Good-Production
/
template-for-verstka
13
2
Fork 0
Code Pull Requests Releases Wiki Activity

сделал модальные окна без форм

Browse Source
cosmopet--Memento-mori-dev
Kirill Pet 10 months ago
parent 7979a4da6c
commit bc0c849ccd
10 changed files with 1375 additions and 1 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 101
      assets/css/gp-style-core.css
  2. 14
      assets/css/gp-style-desktop.css
  3. 15
      assets/css/gp-style-mobile.css
  4. BIN
      assets/img/modal/about_slider.png
  5. 3
      assets/img/svg/main/white-x.svg
  6. 325
      new.html
  7. 254
      notification-decorated.html
  8. 250
      notification-sub.html
  9. 325
      notification.html
  10. 89
      registration.html

101
assets/css/gp-style-core.css
Unescape View File

@ -929,6 +929,8 @@ button{
top: 0;
left: 0;
padding: 20px;
width: 100%;
height: 100%;
@ -939,6 +941,10 @@ button{
opacity: 0;
transition: opacity .2s ease-out;
pointer-events: none;
display: flex;
justify-content: center;
align-items: center;
}
.modal.active{
opacity: 1;
@ -1205,6 +1211,101 @@ button{
background-color: var(--background-black);
border-radius: 2px;
}
.notification{
padding: 24px;
border-radius: 20px;
position: relative;
}
.notification--white{
border: 1px solid var(--background-black);
background: var(--background-white);
}
.notification--green-gradient{
background: var(--gradient-blue);
}
.notification--width-584{
width: 584px;
}
.notification__close{
position: absolute;
top: 24px;
right: 24px;
width: 24px;
aspect-ratio: 1;
border: none;
background: none;
background-image: url(../img/svg/main/black-x.svg);
background-repeat: no-repeat;
background-size: 24px;
background-position: center;
transition: opacity .2s ease-out;
}
.notification__close--white{
background-image: url(../img/svg/main/white-x.svg);
}
.notification__close:hover{
opacity: .8;
}
.notification__title{
padding-right: 50px;
font-family: var(--font-family);
font-weight: 700;
font-size: 26px;
line-height: 123%;
text-transform: uppercase;
color: var(--text-dark);
}
.notification__text--center{
text-align: center;
}
.notification__text--center-pc{
text-align: center;
}
.notification__title--green-gradient{
background: var(--gradient-blue);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.notification__title--white{
color: var(--text-white);
}
.notification__element{
margin-top: 24px;
}
.notification__element--center{
display: flex;
justify-content: center;
}
.notification__element--top-40{
margin-top: 40px;
}
.notification__text{
font-family: var(--font-family);
font-weight: 400;
font-size: 20px;
line-height: 120%;
color: var(--text-black);
}
.notification__text--weight-500{
font-weight: 500;
}
.notification__text--white{
color: var(--text-white);
}
.notification__img{
width: 100%;
height: 360px;
object-fit: contain;
}
/* modal */
/* toggle */

14
assets/css/gp-style-desktop.css
Unescape View File

@ -1691,7 +1691,10 @@ main{
.cabinet-card-order-status__pointer--red{
color: var(--text-red);
}
.cabinet-card-order__block-detail{}
.cabinet-card-order__block-detail{
height: 0;
overflow: hidden;
}
.cabinet-card-order__detail{
padding-top: 24px;
}
@ -1837,6 +1840,15 @@ main{
width: 106px;
height: 96px;
}
.cabinet-card__download{
margin-top: 32px;
}
.cabinet-card__order.active .cabinet-card-order__detail-short{
opacity: 0;
}
.cabinet-card__order.active .cabinet-card-order__open-detail::after{
transform: rotate(180deg);
}
/* .cabinet-card-no-orders__ */
/* cabinet */

15
assets/css/gp-style-mobile.css
Unescape View File

@ -53,6 +53,21 @@
.modal-basket__item--return .modal-basket-item__title{
margin-right: auto;
}
.notification--width-584{
width: 100%;
}
.notification__title{
font-size: 20px;
}
.notification__text--center-pc{
text-align: start;
}
.notification__img{
height: 360px;
}
.notification__title{
padding-right: 96px;
}
/* modal */
/* footer */

BIN
assets/img/modal/about_slider.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

3
assets/img/svg/main/white-x.svg
Unescape View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.62404 2.77566C3.38807 2.54301 3.00683 2.54436 2.77252 2.77867C2.53821 3.01299 2.53954 3.39154 2.77551 3.62419L6.90259 7.6933L2.77551 11.7624C2.53954 11.9951 2.53821 12.3736 2.77252 12.6079C3.00684 12.8422 3.38807 12.8436 3.62404 12.6109L7.75716 8.53587L11.8903 12.6109C12.1262 12.8436 12.5075 12.8422 12.7418 12.6079C12.9761 12.3736 12.9748 11.995 12.7388 11.7624L8.61173 7.6933L12.7388 3.62421C12.9748 3.39156 12.9761 3.01301 12.7418 2.77869C12.5075 2.54438 12.1262 2.54303 11.8903 2.77568L7.75716 6.85073L3.62404 2.77566Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 695 B

325
new.html
View File

File diff suppressed because one or more lines are too long

254
notification-decorated.html
View File

File diff suppressed because one or more lines are too long

250
notification-sub.html
View File

File diff suppressed because one or more lines are too long

325
notification.html
View File

File diff suppressed because one or more lines are too long

89
registration.html
Unescape View File

@ -454,6 +454,89 @@
</div>
</div>
<div class="cabinet-card cabinet-card--grey">
<div class="cabinet-card__content">
<div class="cabinet-card__order active">
<div class="cabinet-card-order__header">
<div class="cabinet-card-order__main">
<p class="cabinet-card-order-main__date">Заказ от 06.09.2024</p>
<p class="cabinet-card-order-main__number">763276427364</p>
</div>
<div class="cabinet-card-order__payment">
<p class="cabinet-card-order-payment__title">Оплачено:</p>
<p class="cabinet-card-order-payment__price">8960</p>
</div>
</div>
<div class="cabinet-card-order__content">
<div class="cabinet-card-order__status">
<p class="cabinet-card-order-status__title">Статус:</p>
<p class="cabinet-card-order-status__pointer cabinet-card-order-status__pointer--grey">Доставлен</p>
</div>
<div class="cabinet-card-order__block-detail" style="height: 308px;">
<div class="cabinet-card-order__detail">
<div class="cabinet-card-order-detail__address">
<p class="cabinet-card-order-detail-address__title">Адрес доставки: </p>
<p class="cabinet-card-order-detail-address__text">Постомат: г.Москва, Каланчевская набережная, д.16</p>
</div>
<div class="cabinet-card-order-detail__main">
<div class="cabinet-card-order-detail-main__products">
<div class="cabinet-card-order-detail-main__product">
<img src="assets/img/product/mini-card.png" alt="" class="cabinet-card-order-detail-main-product__img">
<div class="cabinet-card-order-detail-main-product__content">
<div class="cabinet-card-order-detail-main-product__description">
<p class="cabinet-card-order-detail-main-product-description__what">Сухой корм, для крупных и средних пород </p>
<p class="cabinet-card-order-detail-main-product-description__with-what">Индейка, 2 кг</p>
</div>
<p class="cabinet-card-order-detail-main-product__count">3</p>
<p class="cabinet-card-order-detail-main-product__price">10280</p>
</div>
</div>
<div class="cabinet-card-order-detail-main__product">
<img src="assets/img/product/mini-card.png" alt="" class="cabinet-card-order-detail-main-product__img">
<div class="cabinet-card-order-detail-main-product__content">
<div class="cabinet-card-order-detail-main-product__description">
<p class="cabinet-card-order-detail-main-product-description__what">Сухой корм, для крупных и средних пород </p>
<p class="cabinet-card-order-detail-main-product-description__with-what">Индейка, 2 кг</p>
</div>
<p class="cabinet-card-order-detail-main-product__count">3</p>
<p class="cabinet-card-order-detail-main-product__price">10280</p>
</div>
</div>
</div>
<div class="cabinet-card-order-detail-main__links">
<a href="#" class="cabinet-card__button cabinet-card-order-detail-main__link">
Электронный чек
</a>
<button class="cabinet-card__button cabinet-card-order-detail-main__link">
Отследить заказ
</button>
</div>
</div>
</div>
</div>
<button class="cabinet-card-order__open-detail">Детали заказа</button>
</div>
<div class="cabinet-card-order__detail-short">
<img src="assets/img/product/mini-card.png" alt="" class="cabinet-card-order-detail-short__item">
<img src="assets/img/product/mini-card.png" alt="" class="cabinet-card-order-detail-short__item">
<img src="assets/img/product/mini-card.png" alt="" class="cabinet-card-order-detail-short__item">
</div>
</div>
</div>
</div>
<div class="cabinet-card__no-orders">
<div class="cabinet-card-no-orders__element">
<p class="cabinet-card-no-orders__title">Пока нет заказов</p>
@ -464,6 +547,12 @@
</button>
</div>
</div>
<div class="cabinet-card__download">
<button class="cabinet-card__button">
Показать ещё
</button>
</div>
</div>
</div>
</main>

Write Preview
Loading…
Cancel
Save