Показать сообщение отдельно
  #1 (permalink)  
Старый 25.04.2017, 15:48
Новичок на форуме
Отправить личное сообщение для Rimako Посмотреть профиль Найти все сообщения от Rimako
 
Регистрация: 06.08.2015
Сообщений: 3

Сверстать элемент
<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/



Не могу сверстать у цитаты декоративный элемент, помогите пожалуйста.
Ответить с цитированием