Карточка товара — Rei

DemoHTMLCSS
Женские кроссовки

Demix Absolute

Как было показано выше, символический метафоризм представляет собой самодостаточный горизонт ожидания.
Рейтинг:
3499 ₽
<section class="t-div-container-wide-card">
    <div class="t-div-rei">
        <div class="t-div-rei-previewimage"></div>
        <div class="t-div-rei-base">
            <div class="t-div-rei-subtitle"><span>Женские кроссовки</span></div>
            <div class="t-div-rei-title"><h3>Demix Absolute</h3></div>
            <div class="t-div-rei-description"><span>Как было показано выше, символический метафоризм представляет собой самодостаточный горизонт ожидания.</span></div>
            <div class="t-div-rei-bottom-meta">
                <div class="t-div-rei-rating">
                    <span class="t-div-rei-rating-label">Рейтинг:</span>
                    <span class="t-div-rei-rating-stars"><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span></span>
                </div>
                <div class="t-div-rei-price">3499 ₽</div>
            </div>
        </div>
    </div>
</section>
.t-div-rei {
    display: flex;
    background: #fafafa;
    border-radius: 10px;
    max-width: 576px;
    margin: 40px auto;
}

.t-div-rei .t-div-rei-previewimage {
    flex-basis: 38%;
    background: url("/des/code/img-cards/sneakers.jpg") no-repeat center center;
    background-size: cover;
}

.t-div-rei .t-div-rei-base {
    flex-basis: 62%;
    padding: 20px 30px;
}

.t-div-rei .t-div-rei-base h3 {
    font-size: 14pt;
    font-weight: bold;
    color: #444444;
    padding: 0;
    margin: 10px 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
	font-family: "Open Sans", sans-serif;
}

.t-div-rei .t-div-rei-base .t-div-rei-subtitle span {
    font-size: 8pt;
    color: #999999;
}

.t-div-rei .t-div-rei-base .t-div-rei-description {
    padding: 10px 0;
    font-size: 11pt;
    color: #666666;
    line-height: 1.38em;
}

.t-div-rei .t-div-rei-bottom-meta {
    border-top: 1px solid #999999;
    margin: 30px 0 0 0;
    padding: 10px 0;
}

.t-div-rei .t-div-rei-bottom-meta .t-div-rei-rating-label {
    font-size: 10pt;
    color: #666666;
}

.t-div-rei .t-div-rei-bottom-meta .t-div-rei-rating-stars {
    font-size: 13pt;
}

.t-div-rei .t-div-rei-bottom-meta .t-div-rei-rating-stars span:hover {
    cursor: pointer;
    color: yellow;
}

.t-div-rei .t-div-rei-price {
    padding: 10px 0 0 0;
    text-align: center;
    font-size: 18pt;
    font-weight: bold;
    letter-spacing: 0.02em;
}

@media screen and (max-width: 720px) {
   .t-div-rei {
       min-width: 300px;
       flex-direction: column;
       width: 90%;
    }
   .t-div-rei .t-div-rei-previewimage {
       min-height: 320px;
   }
}

Другие проекты