<div class="block-cakes">
<div class="wrap__inner">
<div class="block-cakes__message">
<div class="block-cakes__text">
<h2 class="block-cakes__header block-cakes__header_size_l
block-cakes__header_font_type_alegreya-bold">
Art of cakes
</h2>
<p class="block-cakes__header-description block-cakes__header-description_size_s
block-cakes__header-description_font_type_alegreya-bold">
we create delicious memories
</p>
<p class="block-cakes__description block-cakes__description_font_type_proximanova
block-cakes__description_size_xs">
Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.
Curabitur ullamcorper ultricies nisi.
Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus,
sem quam semper libero, sit amet adipiscing sem neque sed.
</p>
</div>
<div class="block-cakes__information-cook">
<div class="block-cakes__post block-cakes__post_size_xl
block-cakes__post_font_type_alegreya-bold">
Chef Cook
</div>
<div class="block-cakes__profile">
<span class="block-cakes__name block-cakes__name_font_type_alegreya">Benito</span>
<span class="block-cakes__user-img">
<img src="http://imgdepo.com/id/10570641.png" alt="Benito Gaspare">
</span>
<span class="block-cakes__name block-cakes__name_font_type_alegreya">Gaspare</span>
</div>
<div class="block-cakes__blockquote">
<blockquote class="block-cakes__quote block-cakes__quote_size_m
block-cakes__quote_font_type_scriptina">
Unique creations for unique occasions.
</blockquote>
</div>
</div>
</div>
<div class="block-cakes__logo">
<div class="block-cakes__gallery-item">
<img src="http://imgdepo.com/id/10570629.jpg" alt="cakes">
</div>
<div class="block-cakes__gallery-item">
<img src="http://imgdepo.com/id/10570630.jpg" alt="cakes">
</div>
<div class="block-cakes__gallery-item">
<img src="http://imgdepo.com/id/10570631.jpg" alt="cakes">
</div>
<div class="block-cakes__gallery-item">
<img src="http://imgdepo.com/id/10570632.jpg" alt="cakes">
</div>
<div class="block-cakes__header-gallery">
<img src="http://imgdepo.com/id/10570637.png" alt="gallery title">
</div>
<div class="block-cakes__title-gallery block-cakes__title-gallery_size_l
block-cakes__title-gallery_font_type_alegreya">
tastes so good!
</div>
</div>
</div>
</div>
|
Код:
|
.block-cakes {
background: #fdfcfa;
text-align: center;
padding: 105px 0;
}
.wrap__inner {
width: 1260px;
margin: 0 auto;
}
.block-cakes__message, .block-cakes__logo {
display: inline-block;
width: 628px;
vertical-align: top;
}
.block-cakes__header {
padding-bottom: 20px;
}
.block-cakes__header_size_l {
font-size: 48px;
color: #56534c;
}
.block-cakes__header-description {
padding-bottom: 70px;
}
.block-cakes__header-description_size_s {
font-size: 14px;
color: #a47d5e;
text-transform: uppercase;
}
.block-cakes__description {
width: 490px;
margin: 0 auto 45px;
letter-spacing: 1px;
}
.block-cakes__description_size_xs {
font-size: 14px;
color: #56534c;
line-height: 24px;
}
.block-cakes__gallery-item {
margin: 8px;
width: 295px;
height: 250px;
display: inline-block;
}
.block-cakes__logo {
position: relative;
}
.block-cakes__header-gallery {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0.9;
}
.block-cakes__title-gallery {
width: 160px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.block-cakes__title-gallery_size_l {
text-transform: uppercase;
font-size: 30px;
color: #c9b176;
}
.block-cakes__post_size_xl {
font-size: 24px;
color: #56534c;
}
.block-cakes__name {
border-bottom: 1px solid #d7d5ca;
border-top: 1px solid #d7d5ca;
width: 111px;
padding: 20px 22px;
display: inline-block;
}
.block-cakes__name_size_m {
font-size: 24px;
color: #56534c;
}
.block-cakes__profile {
margin: 50px 0 25px;
}
.block-cakes__user-img {
margin: 0 25px;
display: inline-block;
vertical-align: middle;
}
.block-cakes__quote_size_m {
font-size: 24px;
line-height: 30px;
color: #a47d5e;
}
.block-cakes__quote {
width: 245px;
margin: 0 auto;
}
.header-menu__list {
font-size: 0;
} |
Для просмотра:
https://jsfiddle.net/4g45m3uq/
Не могу сверстать у цитаты декоративный элемент, помогите пожалуйста.
