Веб-дизайн. Создание лендинга. Урок 6. Плейлисты и футер. (Даниил Волосатов — Webformyself)

Автор Ruslana Chernenko
Веб-дизайн. Создание лендинга. Урок 6. Плейлисты и футер. (Даниил Волосатов — Webformyself)

осталось немного нам нужно сделать блок плейлисты и добавить еще фото.

Мы можем по новой не создавать эти блоки просто воспользоваться уже готовым решением. У нас есть видеоуроками. Нам нужно выделить заголовок и три верхних папки скопировать данные папки и перенести.

На самый верх закинуть всё — это в папку.

Яна плейлисты. Открой папку нажимаем контроль и перетаскиваем вниз таскаем так чтобы заголовок не попадал на круг и было большое расстояние. Ишим плейлисты плей-лист и нажимай. О'кей здесь у нас будут плейлисты поэтому лишнюю информацию нам нужно удалить вот эти иконки 197 комментариев платно и иконку тоже, что мы можем сделать мы можем сделать как в исходном материале здесь написать просто 12 видео либо можем сделать на примере. Как сделана. ВКонтакте давайте сделаем на примере. ВКонтакте что-то и посмотрим, что у нас получится. Я честно ещё не делал и вместе с вами я увижу, что получится создаем новый слой над фоном выбираю чёрный цвет инструмент прямоугольник и рисуй. Такую форму шириной 80 пикселей прячем за основной фон у нас всё накладывается сверху. Градиент И как вы помните текст должен быть сколько видео здесь создадим новый слой выберем инструмент текста и напишу например 12 видео выделим на новую строчку и уменьшить размеры до 14 пунктов. Оливия и в дополнительных материалах у нас будет такая вот иконка с видео мы берём и перетаскиваем уменьшаем в размерах по высоте зрелом 20 который может быть сейчас делаем побольше, но я думаю этого будет достаточно 12. Давайте выделим поставим режим Medium задвинем понижен чтобы фотография на фоне было видно можно поиграться с ней прозрачностью условия и сделать например непрозрачность 70% и. Давайте этот текст выровнен по центру как мы будем выравнивать выбираем фон нажимаем контроль и выравнивание по краю основного фона добавляем ему линеек выбираем 12 видео подвигаем по центру и нужно по горизонтали помогать выбираем фон и трансформированный его он должен прилипать и добавляем в линейку сверху выравниваю данный текст по центру и возможно вообще можно убрать на. Сейчас посмотрим как смотрится она здесь в принципе не нужно. Давайте удалим и здесь напишем например идеальная попа. О'кей — это название урока плейлисте под давлением пониже то есть плейлисты у нас будет отличаться от видеоуроков, что здесь будет дополнительное дополнительные фон и написано сколько будет видео и здесь название быть пониже для каждого мы не будем так изменять. Мы просто удалим и продублирована папку чтобы нам по 10 раз всё не выравнивать я сейчас включу линейки выбираем фон слева и добавляем линейка слева по нему выровняем выбираем следующую фон и добавляем тоже линейка слева теперь удалим вторую и третью скопирую данную папку и просто перенесём проверим ещё раз копируем или перенесён правее. Я немножко неправильно сказала здесь будет название урока. А название плейлиста идеальный пресс например дальше у нас будет идеальные ноги идеальные ноги у нас будет 3 плейлист 3 2 нажимаем OK и уберём лишний линейки здесь здесь здесь логисты сделаем чуть пониже и теперь нам осталось добавить разные фотографии здесь можно подобрать что-то по теме опять заходим на гудфон и подбираем 3 нужно фотографий для первого. Я думаю подойдёт вот эта фотография в моём случае вообще все фотографии которые будут убирать. Я предложил дополнительных материалов. Если не хотите тратить на — это время просто берет туда нужно вставить между вот этим слоем и основным фоном поэтому вставляем нажимаем Control T фотографию нас наверху поэтому я был твоим размеров и вставляем следующей фотографии можно удалить. И здесь тоже удалить картинки домофона мешается за ним прекрасно видно фотографию выбираем свечи блок и нам нужно найти что-то с прессом. В итоге у нас получилось в таких три плейлиста очень качественными фотографиями и теперь осталось добавить футорку переход и здесь у нас есть текст для футляра создадим новую папку завела футер создадим новый слой инструмент текста и прописан текст белым цветом размером сейчас. Подгорная 16 сделаем так сделаем 16 пунктов выделим и выбери выделим пункта меню удалим и принесенных на новый слой вообще можно конечно добавить ещё социальных кнопок справа пункта меню можно оставить по центру. Но — это сделаем пока, что так уменьшен до 15 пунктов. Догоню правее и этот текст тоже сделаем 15 пунктов наберём линейки телефон мы не будем делать. Вот будет лишнее сделаем так, что он во всю ширину будет только у первого экрана, а в итоге у нас получился вот такой дизайн, но ещё не всё нужно сделать интерактивные элементы. Давайте сохраним ся и уже — это сделаем следующем.

0 комментариев
0

Читайте также