Карточка товара — Serana
DemoHTMLCSS
Имидж предприятия стремительно синхронизирует принцип восприятия. Позиционирование на рынке, конечно, масштабирует рейтинг. Медиамикс, пренебрегая деталями, вполне вероятен.
<section class="t-div-container-wide-card">
<div class="t-div-serana">
<div class="t-div-serana-previewimage"></div>
<div class="t-div-serana-base">
<div class="t-div-serana-top-meta">
<div class="t-div-serana-subtitle">studio design</div>
<div class="t-div-serana-title">Lora vase</div>
</div>
<div class="t-div-serana-description">
Имидж предприятия стремительно синхронизирует принцип восприятия. Позиционирование на рынке, конечно, масштабирует рейтинг. Медиамикс, пренебрегая деталями, вполне вероятен.
</div>
<div class="t-div-serana-bottom-meta">
<div class="t-div-serana-bottom-meta-line"><span class="t-div-serana-parameter-name">Производство:</span><span class="t-div-serana-parameter-value">Италия</span></div>
<div class="t-div-serana-price">2 500 руб.</div>
</div>
</div>
</div>
</section>
.t-div-serana {
background: #fdfdfd;
display: flex;
max-width: 576px;
margin: 40px auto;
}
.t-div-serana .t-div-serana-previewimage {
background: #333333;
background: url("/des/code/img-cards/serana.jpg") no-repeat center center;
background-size: cover;
flex-basis: 50%;
}
.t-div-serana .t-div-serana-base {
padding: 40px 30px;
flex-basis: 50%;
display: flex;
flex-direction: column;
justify-content: center;
}
.t-div-serana .t-div-serana-top-meta {
flex-shrink: 2;
}
.t-div-serana .t-div-serana-subtitle {
text-transform: uppercase;
letter-spacing: 0.05em;
color: #999999;
font-family: "Open Sans", sans-serif;
font-size: 10pt;
flex-shrink: 1;
}
.t-div-serana .t-div-serana-title {
color: darkcyan;
font-family: "Lora", serif;
font-size: 18pt;
font-weight: bold;
font-style: italic;
margin: 5px 0;
}
.t-div-serana .t-div-serana-description {
flex-grow: 2;
display:flex;
justify-content:center;
flex-direction: column;
font-size: 11pt;
color: #333333;
line-height: 1.44em;
}
.t-div-serana .t-div-serana-bottom-meta {
flex-shrink: 1;
}
.t-div-serana .t-div-serana-bottom-meta-line {
font-size: 10pt;
color: #666666;
}
.t-div-serana .t-div-serana-parameter-name:after {
content: " ";
}
.t-div-serana .t-div-serana-price {
font-family: "Lora", serif;
font-size: 16pt;
font-weight: bold;
margin: 10px 0 0 0;
}
@media screen and (max-width: 640px) {
.t-div-serana {
flex-direction: column;
max-width: 320px;
}
.t-div-serana .t-div-serana-previewimage {
min-height: 320px;
}
}