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 094e94ad7d
commit 7979a4da6c
3 changed files with 177 additions and 5 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. 125
      assets/css/gp-style-desktop.css
  2. BIN
      assets/img/product/mini-card.png
  3. 57
      registration.html

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

@ -1445,6 +1445,8 @@ main{
border: none; border: none;
position: relative; position: relative;
text-decoration: none;
} }
.cabinet-card__button::before{ .cabinet-card__button::before{
content: ''; content: '';
@ -1605,7 +1607,7 @@ main{
color: var(--text-black); color: var(--text-black);
} }
.cabinet-card__order{ .cabinet-card__order{
position: relative;
} }
.cabinet-card-order__header{ .cabinet-card-order__header{
display: flex; display: flex;
@ -1690,7 +1692,106 @@ main{
color: var(--text-red); color: var(--text-red);
} }
.cabinet-card-order__block-detail{} .cabinet-card-order__block-detail{}
.cabinet-card-order__detail{} .cabinet-card-order__detail{
padding-top: 24px;
}
.cabinet-card-order-detail__address{}
.cabinet-card-order-detail-address__title{
font-family: var(--font-family);
font-weight: 500;
font-size: 20px;
line-height: 120%;
color: var(--text-black);
}
.cabinet-card-order-detail-address__text{
margin-top: 16px;
font-family: var(--font-family);
font-weight: 400;
font-size: 20px;
line-height: 120%;
color: var(--text-black);
}
.cabinet-card-order-detail__main{
margin-top: 24px;
display: flex;
justify-content: space-between;
}
.cabinet-card-order-detail-main__products{}
.cabinet-card-order-detail-main__product{
margin-top: 4px;
display: flex;
align-items: center;
}
.cabinet-card-order-detail-main__product:first-child{
margin-top: 0;
}
.cabinet-card-order-detail-main-product__img{
width: 106px;
height: 96px;
}
.cabinet-card-order-detail-main-product__content{
display: flex;
}
.cabinet-card-order-detail-main-product__description{
width: 212px;
}
.cabinet-card-order-detail-main-product-description__what{
font-family: var(--font-family);
font-weight: 500;
font-size: 12px;
line-height: 133%;
color: var(--text-black);
}
.cabinet-card-order-detail-main-product-description__with-what{
margin-top: 8px;
font-family: var(--font-family);
font-weight: 500;
font-size: 12px;
line-height: 133%;
color: var(--text-6);
}
.cabinet-card-order-detail-main-product__count{
margin-left: 8px;
font-family: var(--font-family);
font-weight: 700;
font-size: 12px;
line-height: 133%;
text-align: right;
color: var(--text-6);
}
.cabinet-card-order-detail-main-product__count::before{
margin-right: 4px;
content: 'x';
}
.cabinet-card-order-detail-main-product__price{
margin-left: 16px;
font-family: var(--font-family);
font-weight: 700;
font-size: 12px;
line-height: 133%;
text-align: right;
color: var(--text-black);
}
.cabinet-card-order-detail-main-product__price::after{
content: ' Р';
}
.cabinet-card-order-detail-main__links{
display: flex;
flex-direction: column;
}
.cabinet-card-order-detail-main__link{
margin-top: 16px;
}
.cabinet-card-order-detail-main__link:first-child{
margin-top: 0;
}
.cabinet-card-order__open-detail{ .cabinet-card-order__open-detail{
margin-top: 24px; margin-top: 24px;
@ -1711,16 +1812,30 @@ main{
content: ''; content: '';
position: absolute; position: absolute;
top: 4px; top: 6.75px;
right: 0; right: 0;
width: 16px; width: 12.5px;
aspect-ratio: 1; height: 10.5px;
background-image: url(../img/svg/main/arrow-black.svg); background-image: url(../img/svg/main/arrow-black.svg);
background-size: contain; background-size: contain;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
/* transform: rotate(180deg); */
}
.cabinet-card-order__detail-short{
position: absolute;
right: 0;
bottom: 0;
display: flex;
align-items: center;
}
.cabinet-card-order-detail-short__item{
border-radius: 16px;
width: 106px;
height: 96px;
} }
/* .cabinet-card-no-orders__ */ /* .cabinet-card-no-orders__ */
/* cabinet */ /* cabinet */

BIN
assets/img/product/mini-card.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.5 KiB

57
registration.html
Unescape View File

@ -391,8 +391,65 @@
<p class="cabinet-card-order-status__pointer cabinet-card-order-status__pointer--grey">Доставлен</p> <p class="cabinet-card-order-status__pointer cabinet-card-order-status__pointer--grey">Доставлен</p>
</div> </div>
<div class="cabinet-card-order__block-detail">
<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> <button class="cabinet-card-order__open-detail">Детали заказа</button>
</div> </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>
</div> </div>

Write Preview
Loading…
Cancel
Save