Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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/



Не могу сверстать у цитаты декоративный элемент, помогите пожалуйста.
Ответить с цитированием
  #2 (permalink)  
Старый 03.06.2017, 11:43
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

Как то так. https://jsfiddle.net/BlackStar1991/4g45m3uq/1/ Ну идея я думаю понятна.
Ответить с цитированием
  #3 (permalink)  
Старый 22.07.2017, 12:21
Новичок на форуме
Отправить личное сообщение для Rimako Посмотреть профиль Найти все сообщения от Rimako
 
Регистрация: 06.08.2015
Сообщений: 3

Спасибо за помощь
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
определить элемент под перетаскиваемым элементом slavaspirit Элементы интерфейса 3 26.07.2015 01:49
При клике на элемент, изменять значение поля Apelcun77 Общие вопросы Javascript 2 14.02.2014 15:26
Выбрать элемент у родителя которого сын это элемент по которому кликнули MalikSPB Events/DOM/Window 8 30.12.2012 12:22
Вытеснить элемент из потока Isaac (X)HTML/CSS 5 13.04.2012 15:14
Drag-n-Drop - перетянуть элемент Jugo ExtJS 1 10.08.2011 19:10