yaparoff

Интересная задумка дизайнера. Как реализовать?

Recommended Posts

 Дизайнер нарисовал макет вот с такими интересными линиями, которые идут по всей высоте сайта http://skrinshoter.ru/s/300819/pJvpKBvC
А я теперь вот ломаю голову как такое сверстать.
С одной стороны это можно сверстать колонками с рамкой, но ведь есть такие блоки, которые выходят за пределы этих колонок
Как тогда быть в таком случае?

Такие линии реально идут по всей высоте сайта. 

Share this post


Link to post
Share on other sites

как вариант
можно использовать background
можно так и делать как вы сказали, ничего не мешает выходить за пределы блоков некоторым элементам

Share this post


Link to post
Share on other sites

Можно ещё у дизайнера спросить, каким сайтом он вдохновился. 

Когда-то давно мне попадался дизайнерский сайт, с точно такими же линиями. Возможно и он с него идею взял) 

Share this post


Link to post
Share on other sites

Быстро набросал, попробуйте:

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div class="container">
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
    </div>
</body>
</html>
html,
body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    height: 100%;
}

.container {
    display: flex;
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;
}

.row {
    margin: 0 1%;
    width: 33.33333%;
    border-left: 1px solid red;
    height: 100%;
    border-right: 1px solid red;
}

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By irina_qmobi
      Мы, компания Qmobi, ищем дизайнеров на удаленную работу для создания баннеров игровых приложений для кампаний в FB/Insta. Будем обращаться неоднократно, т.к. приложений довольно много. В дальнейшем возможно предоставление вам доступа к нашей новой платформе с постоянно растущим списком приложений, к которым необходимо создавать креативы. Первым оплачиваемым заказом будет создание баннера к игре From Zero to Hero:Cityman. 

      Для начала просим выполнить небольшое тестовое задание, описание ниже. После прохождения тестового задания, вышлем ТЗ для первого оплачиваемого заказа. Тестовое задание не оплачивается. Стоимость за последующие заказы - 5$ за один статический баннер в трех размерах. 

      Тестовое задание: 
      Приложение: https://itunes.apple.com/ru/app/flippy-bottle-extreme/id1157626939?mt=8 
      Цель: создать статический баннер для кампании в FB/Insta 
      1200x628 
      Размер: 1200x628, не больше 150KB 

      Количество текста на баннере не должно составлять более 20% от размера баннера. Необходимо изобразить Ihone последней модели, на экране которого будет скриншот данного приложения. Сам Iphone должен быть изображен крупно в левой части баннера, а в правой части должен быть текст “Best Bottle flip Game ever”, а также кнопка “PLAY NOW” и кнопка appstore. Фон баннера должен соответствовать стилю приложения.
      Просим высылать тестовое задание на creators@qmobi.com. Принимаем тестовые задания до 10 августа 19.00 по Мск времени.
    • By Marina_salt
      В компании Кварта открыта вакансия: Верстальщик/Web-дизайнер

      Компетенции:
      * Уверенное владение Photoshop, знание HTML, CSS, LESS, jQuery, Bootstrap, навыки кроссбраузерной верстки.
      * Опыт разработки пользовательских интерфейсов веб-приложений.
      Очень желательно понимать, что такое GIT, иметь представление об ASP.net.

      Чем предстоит заниматься:
      * Отрисовка макетов страниц.
      * Вверстка HTML-страниц и шаблонов.
      * Аудит соответствия страниц руководству по корпоративному дизайну.

      Мы предлагаем:
      * Офис в пешеходной доступности от м. Китай-город.
      * ДМС
      * "Белая" заработная плата
      * Размер заработной платы обсуждается и зависит от квалификации.

      Инна Савельева
      Зам. Начальника Отдела профессионального развития персонала
      Компания "КВАРТА"
      +7-926-294-20-10
      8 (495) 926-54-23
      SavelevaIY@quarta.su
      www.quarta.su
    • By andrdov
      Готов для начинающего дизайнера предложить работу для портфолио (если Вам нужно). Задача в следующем, нужно для паблика нарисовать аватарку, размеры 250x350px, тема интелект (чтобы было что то связано с умом или блокнотом), чтобы было приятно глазу.
       
      Все получают выгоду, Вы — первую или просто работу в портфолио и плюс отзыв с меня, и возможно заказы уже за деньги в будущем, а я аватарку.
       
      Надеюсь на взаимопонимание.
  • Member Statistics

    46,451
    Total Members
    3,128
    Most Online
    rhouland
    Newest Member
    rhouland
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • Вернулся в свою созданную тему через 4,5 года. )) После создания темы около года верстал заказы на фрилансе. От обычной верстки до полноценных LP и небольших сайтов. Даже один раз из своей верстки шаблон Wordpress сделал.   Потом заинтересовался другими нишами и верстку забросил. Арбитражил, занимался СЕО, даже трейдил криптовалютой больше года. Но опять потянуло в вебразработку. Пытаюсь снова все вспомнить. Мешает только основная работа - мало времени остается на своё хобби.  В общем, кому сроки не жмут и кто не боится доверится джуниору, милости просим. Сверстаю, подправлю, помогу. В свободное от работы время. Бескорыстно. Просто хочется снова покодить и не просто так, а чтобы с пользой.  Почта : zdl79@mail.ru Skype : forest19791 Телеграмм : https://t.me/forestino
    • Могу попробовать. Опыт верстки 1 год. Но в связи с основной работой, не связанной с IT, мало на это времени. zdl79@mail.ru
    • Здравствуйте, кажется я делаю что-то не так, но вот что именно никак не пойму.
      Проблема в следующем: подключаю карусель и блок становится неактивен, хотя вроде бы все должно работать как нужно.
      Пробовал подключать карусель и через cdn и через скачанный архив - результат один и тот же.
      Открывал через google, firefox и opera-у - все так же никакого сдвига.
      Подключал по инструкции на официальном сайте.
      Пробовал использовать SlickSlider, но результат тот же.
  • Popular Contributors