Jump to content
  • Sign Up
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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • 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,841
    Total Members
    1,451
    Most Online
    Robel
    Newest Member
    Robel
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

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

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

    • Мучаюсь, не могу не как попасть на иконки вацапа и вайбера, используя карту изображений. Не как не пойму как эти координаты высчитать. Подскажите пожалуйста - https://codepen.io/
    • Облако в помощь: как облачные технологии помогают известным компаниям Ценным опытом нужно делиться, особенно – опытом успешного использования облачных сервисов. Начнем с опыта компаний, чьи товары и услуги на слуху по всему миру. Поговорим о тех, кто внедрил облачные технологии (или планирует это сделать) и выгодно использует свое облачное преимущество над конкурентами.   Немного истории   Люди грезили облаками всегда. И если в буквальном смысле их покорение далось человечеству еще в 18 веке (спасибо братьям Монгольфье), то в интересующем нас значении все произошло много позже.   Ждать пришлось более двух столетий. Да, «облачные» идеи провозглашались еще в 50-х годах 20 века, задолго до появления интернета, но впервые по-настоящему материализовались лишь в 1999 году. Тогда компания Salesforce начала давать пользователям доступ к своим вычислительным ресурсам через веб-сайт. Новинка разлеталась как горячие пирожки, поэтому скоро похожими решениями обзавелись гиганты – Amazon, Google, IBM и Microsoft.   Облако на колесах   Компьютерам, как известно, уже давно не сидится в офисах – добрались они и до автопромышленности, причем много лет назад. А где компьютеры, там и до облака рукой подать. Одними из первых это смекнули в компании Volvo и приступили к созданию умного автомобиля нового поколения. А работать он будет вот как: автомобиль во время движения фиксирует все потенциальные опасности (скользкий участок трассы, яма, авария, обломок дерева и т.д.) и передает их в облачную базу данных, откуда эта информация транслируется на все автомобили, которые приближаются к опасному отрезку пути. Если Volvo успеет внедрить эту технологию раньше всех, то наверняка покорит сердца еще большего количества автолюбителей, в частности тех, кому безопасность на дороге превыше всего.       Финансы В банковском деле вопрос безопасности тоже стоит далеко не на последнем месте. Это, а еще желание опередить конкурентов в плане производительности привело в облака мировых гигантов банковского дела: BBVA, Goldman Sachs, Capital One и других. За признанными авторитетами подтягиваются организации поменьше – облачные технологии становятся трендом среди банкиров.   В Украине процесс виртуализации хоть и отстает немного, но на месте не стоит. Не так давно экс-топы ПриватБанка анонсировали запуск осенью 2017 года первого в стране мобильного банка без физических отделений. Сами разработчики обещают, что приложение будет даже круче, чем Приват24. Ждем.   Умный дом…   Технологии умного дома стремительно обретают популярность по всему миру. Активнее всего их внедряют в США, Китае и Германии. Суть следующая – в доме подключаются датчики и устройства, которые связывают между собой все электроприборы и позволяют управлять ими с помощью одного пульта или даже смартфона. Чтобы хранить и обрабатывать весь массив информации, пользователю, по логике, нужен мощный компьютер, что сказывается на стоимости такого решения. Выход нашелся довольно быстро – обрабатывать информацию в вычислительном облаке, что позволило снизить затраты на умный дом, подняв тем самым его популярность.   Если полноценный умный дом не по карману, то можно выбрать его «упрощенные», бюджетные версии. В частности, компания Xiaomi со своим Smart Home Kit предложила автоматизировать основные процессы в доме по доступной цене, чем значительно повысила свой авторитет на рынке.   …да и город не дурак   Если построить рядом много умных домов, получится умный город? Ну, почти. :) Умный город – это еще и интеллектуальные системы общественного транспорта, виртуальные очереди в поликлинику и городские службы, централизованная система проката велосипедов и автомобилей и много других по-настоящему классных и нужных решений. Среди европейских городов такие системы частично реализованы в Париже, Мадриде, Барселоне, Лондоне.   Не отстает Китай. Так, власти административного района Макао (или, как его еще называют, «Китайский Лас-Вегас») заключили соглашение на внедрение облачных технологий с компанией Alibaba. Уже через 4 года Макао превратится в умный город с развитой ИТ-инфраструктурой.   На этом, пожалуй, пока сделаем паузу. Впишите и свое имя в список великих, прихватив с собой облако на удачу. Не знаете, с чего начать? Обращайтесь к нам за грамотной консультацией, мы рады вам 24х7.    
    • По указанному адресу убрал, проблема осталась
  • Popular Contributors

×
×
  • Create New...