Верстка сайта с нуля по макету — компании и отзывы

Автор Denis Lisitsin
Верстка сайта с нуля по макету — компании и отзывы

Всем привет.

Друзья вы на канале Web Developer Blog. Не забывайте подписаться на канал на спонсором данного курса уроков является хвостик в хвостик. Это отличный хостинг для вашего сайта с приятными ценами хочу сказать о главном преимуществе хвостик.

Это крутой поддержки их специалисты всегда помогают и отвечает на любые вопросы очень быстро хоть днем хоть ночью хоть выход скорость ответа в среднем 40 секунд здесь пользователи часто размещают свой первый сайт поэтому задает много вопросов поддержка во всём помогает.

И у них всё получается специально для подписчиков на по промокоду блокхост скидка 40% на любой тариф хостинга ссылку на хвостик вы найдете в описании к этому видео. Приходите и заказывайте хостинг на хвостик мы верстать сайты с нуля — это у нас уже 6 видео по счёту. Сегодня мы сделаем вот эти вот два блока блок с клиентами и также мы сделаем пропустим блок с нашими работами — это мы сделаем в следующем виде отдельного тату галерею. А в этом видео вот чёрный. Блок Мы сделаем с отзывами данных клиентов сейчас мы пропустим эту галерею потому, что я хочу её сделать чисто в отдельном видео мы расположенных копируем всё будет в общем по образу и подобию красиво, а так как эти два блока. Они схожи между собой я решила сделать вместе в одном видео. Ну в смысле. Всё Всё покажу вам и. Давайте же как раз таки приступим первым делом мы здесь создадим новый блок на твоём в моем clients днём у нас будет H1 заголовок насколько я помню our clients если я не ошибаюсь далее blockchain идалия нас будет точно разбудит нас будет четыре картинки. Давайте их все вырежем сейчас не вырежем, а сохраним и как — это всё будет выглядеть в адаптиве. Они все будут становиться также в колонку так вот они у нас в тень от. Мы сделаем их по-отдельности чтобы они все были я буду — это всё пока сохранять, но перемотай чтобы этот момент уже не видели вы сами можете. Я думаю спокойно сохранить, тогда не тратил ваше время не показывал этот момент потому, что напомнили как — это всё делается. Вот принципе я. Всё сохранил уже все изображения. Давайте теперь здесь создадим блок назовем его клиент и здесь расположенном все наши из по очереди в принципе я буду не соблюдать порядок. Как там было доставлю так как мне удобно и быстрее потому, что особой роли мне — это не сыграет. Ну и всё последний вот так вот — это всё у нас получилось сейчас наши изображение мы не увидим. Хорошо ждем кристаллизации Block Main clients здесь у нас будет чёрный далее пилинг. Давайте посмотрим какой. Пинг у нас здесь будет он у нас будет сверху, что всё стандартно, а снизу. Давайте поставим 200 205 100 пикселей 0 250 пикселей и ноль. Хорошо давайте посмотрим на результат так отец сделал для того чтобы было видно наша заголовок вообще и текст line сделать чтобы всё вместилось на свои места, а здесь у нас сама. ВПР Pinnacle поэтому перепишем и теперь всё так как и должно vh1 нам нужно сделать margin-bottom 30 пикселей вот так вот — это выглядит и изображение у нас A margin Left порядка 30 пикселей маршрут 30 пикселей. Давайте посмотрим как — это всё выглядит. На данном этапе. Как по мне выглядит всё прекрасно не. Как видите даже здесь ничего менять не будем сейчас всё становится и так на свои места можно разве, что оттуда по добавлять сверху и всё будет отлично давайте — это сделаем и margin-top добавим 10 пикселей ответите на данном этапе выглядит всё получу хорошо с этим моментом и очень быстро и очень просто разобрались придём дальше дальше мы перейдём уже непосредственно к блоку с отзывами. Давайте скопирую сразу у нас будет новый Block Main Test понял ты здесь также сделал и здесь у нас будет заголовок marlins Test emails далее. У нас будет просто параграф котором будет наш соответственно отзыв. Давайте его скопирую и вставить. Ну и также будет ещё один параграф там где прописан написано имя того кто давал этот отзыв — это всё будет выглядеть у нас смотрим. Ну и как видите здесь-то всё есть. Хорошо данный блок нам нужно отнести чуть пониже сюда вставили в нашей. Галерее В следующем видео. А здесь. Давайте данный блок стилизовать. А у нас будет конечно же с чёрным цветом бэкграунда. Не забывайте дали текст line центр далее ковер также будет белым клеем. Что хотел сделать сразу, а давайте так как я скопировал мне было лень писать текст transform uppercase. Как видите здесь мы всё — это сделали давайте я забыл здесь ещё блок line вот так вот — это всё выглядит и нашему заголовку добавим margin-top он у нас будет. Она нас здесь будет 100 пикселей и margin-bottom соответственно 30 пикселей вот так вот — это всё выглядит дали нам нужно работать с нашим текстом он нас принципе везде будет uppercase. Поэтому всегда можно его вставить. Кроме этого места здесь у нас не будет конечно же поэтому его трогать не будем. Ладно запишем отдельно для про графа тоже текст transform uppercase копируем и вставляем сочинение отсюда досюда вот, что у нас сейчас — это всё выглядит также, что я забыл сделать — это в данном блоке рэпер прописать и всё — это сюда. Закинуть надо и также сделать из этим блоком. Я тоже сюда всё закинуть всё вернули на свои места и теперь — это выглядит немножко по-другому, но так как нам — это и необходимо с этим в принципе в принципе разобрались далее. У параграфа у нас margin-bottom 50 пикселей 50 пикселей здесь и посмотрим на результат. Ну вот как-то всё должно выглядеть. Давайте здесь заднем определённых вас потому, что потому, что здесь у нас несколько параграфов и нож распределяется на всё вот — это всё будет выглядеть вот данному блоку также дать этим поединком потом 170 пикселей 170 пикселей вот так вот, что немножко — это двинет наш область. Ну и в принципе вот. Даны два блока мы завершили он останется немножко поправить шрифты что.

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

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