• 0
kotikes

Нестандартная верстка шапки сайта

    Вопрос

    kotikes    0
    kotikes

    Здравствуйте. Я начинающий верстальщик и решила взяться за нестандартную верстку сайта. Так как это мой первый опыт, я не знаю как сделать эту шапку сайта. Подскажите, с помощью каких модификаторов css это делается, или нужно использовать js? Может есть какие-нибудь примеры?

     

    з.ы. интересно так же, как делаются данные часы обратного отсчета в шапке. если у кого-нибудь найдётся пример на php буду премного благодарна :rolleyes:

    Снимок экрана 2017-02-22 в 10.17.05.png

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах

    4 ответа на этот вопрос

    Рекомендуемые сообщения

    • 1
    kattiperk    74
    kattiperk

    Я думаю, вопрос помимо счетчика был про скошенный блок?

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    npofopr    375
    npofopr

    Всё стандартно. Счётчик только дополнительно стоит.

    Здесь много примеров есть http://codepen.io/search/pens/?depth=everything&limit=all&order=popularity&page=1&q=time+counter&show_forks=false

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    kotikes    0
    kotikes
    11 минуту назад, kattiperk сказал:

    Я думаю, вопрос помимо счетчика был про скошенный блок?

    да, и он основной :)

    2 часа назад, npofopr сказал:

    Всё стандартно. Счётчик только дополнительно стоит.

    Здесь много примеров есть http://codepen.io/search/pens/?depth=everything&limit=all&order=popularity&page=1&q=time+counter&show_forks=false

    а как сделать скошенный блок?

    Изменено пользователем kotikes

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    npofopr    375
    npofopr

    https://css-tricks.com/creating-non-rectangular-headers/

    • Like 2

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах

    Создайте аккаунт или войдите в него для комментирования

    Вы должны быть пользователем, чтобы оставить комментарий

    Создать аккаунт

    Зарегистрируйтесь для получения аккаунта. Это просто!

    Зарегистрировать аккаунт

    Войти

    Уже зарегистрированы? Войдите здесь.

    Войти сейчас

    • Войти через Facebook
    • Войти через Twitter
    • Войти через Microsoft
    • Войти через LinkedIn
    • Войти через Google

    • Похожие публикации

      • AShukilovich
        Автор: AShukilovich
        Добрый день. Есть необходимость свертсать слайдер на главной странице:
        1) пролистывание на 1 страницу осуществляется по наведению мыши на текущий слайд т.е. 1 наведение 1 слайд;
        2) пролистывания с эффектом fade (один тухнет другой появляется)
        Все остальное время слайдер стоит просто.
        Попробовал написать использую bootstrap4 carousel, но столкнулся с тем что я не знаю как сделать эффект fade на нем, а если и получалось то текущий слайд резко исчезает, а новый появляется медленно и еще почему то при наведении на последний слайд курсора пролистывание идет через первый слайд (он показывается, но только на короткий промежуток времени) на jsfiddle код работает почему то как часы, но не у меня хотя мой же. Решил использовать swiper так как пользовался ранее, все замечательно работает, но косяк с позиционированием элементов. текст на слайдах заходит за контейнер в котором он находится и просто исчезает (в мобилках в основном).
        Ссылки на jsfiddle соответственно на карусель, второй на свипер. 
        https://jsfiddle.net/AShukilovich/aqyrj8xz/2/
        https://jsfiddle.net/AShukilovich/8kvo4qwm/1/  (почему то не хочет свипер подгружаться, на локалке все корректно)
         
      • Rinat
        Автор: Rinat
        <!--Таблица на диве-->
        <div class="table">
                <div class="row">
                    <div class="cell cell-1">1</div>
                    <div class="cell cell-2">2</div>
                </div>
                <div class="row row-2">
                    <div class="cell cell-3" rowspan="2">3</div>
                    <div class="cell cell-4">4</div>
                </div>
            </div>
        /*——css реализация—————*/
        .table{display: table; border: 1px solid silver; padding: 10px;}
        .row{display: table-row; border: 1px solid silver; padding: 10px;}
        .cell{display: table-cell; border: 1px solid silver; padding: 10px;}
        подскажите как склеить ячейку 3 и 4? Спасибо всем за помощь!