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

сделал верстку карточки товара для пк

Browse Source
This commit is contained in:
Kirill Pet
2024-10-23 19:33:21 +03:00
parent 094e94ad7d
commit 7979a4da6c
3 changed files with 177 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
assets/css/gp-style-desktop.css
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 Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.5 KiB

57
registration.html
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>