Header для сайта с боковым блоком используя HTML & CSS шаг за шагом || HTML & CSS step by step

Подписаться 3,6 тыс.

Просмотров 2,4 тыс.

50% 1

В этом видео я покажу, как сделать Header для сайта с боковым блоком в котором будут размещены иконки на социальные сети с hover-эффектом используя HTML & CSS шаг за шагом.
👍 Полезная информация для программирования и дизайна на моем телеграм-канале: t.me/CodingWithTopchiy
💵 Поддержать канал: send.monobank.ua/jar/3Aze2gcvVa
👍 Subscribe: / @codingwithtopchiy
😀Спасибо за просмотр!😀

Опубликовано:

4 авг 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 20

@frozenplay1417 6 месяцев назад

Боже чел ты легенда, бог знает сколько я бы еще искал такой подробный гайд. А то бывает я заходил на другие видео по шапке, и там с начала вроде все понятно, но потом начинает писать что то и вроде даже объясняет только когда повторяешь то вылазит ошибка и ни где нет решения как ее исправить, или даже с первых секунд у них написан почти весь сайт, но они не покажут как так же повторить, а если просто делать как у них то не получится потому что у тебя скорее всего не будет стилей таких же как у него. В общем огромное спасибо, но вряд ли ты прочтешь это спустя год))

@codingwithtopchiy 6 месяцев назад

Спасибо за обратную связь) Рад, что все понятно! 👍

@One-fact06 Год назад

10 из 10

@javlonbekabdumuradov3447 Год назад

А можешь сделать видео где ты верстаешь полноценный сайт?

@codingwithtopchiy Год назад

Приветствую! Хорошо, запишу видео по созданию лэндинговой странички.

@Fins-tp5ux 11 месяцев назад

Помогите у меня не появляется фон Я в css пишу url(img/2.jpg) и не появляется

@codingwithtopchiy 11 месяцев назад

Проверяйте правильность написания свойств и значений и также проверьте размещение изображения в папке, возможно в этом проблематика.

@Fins-tp5ux 11 месяцев назад

@@codingwithtopchiyнаписано все правильно но не появляется

@codingwithtopchiy 11 месяцев назад

Сбросьте отрезок кода на почту: codingwithtopchiy@gmail.com посмотрю в чем может быть причина.

@Fins-tp5ux 11 месяцев назад

@@codingwithtopchiyя это решил, но вышла проблема я за вами повторял. Вот логотип и текст не хочет двигаться. На это решение есть ?

@Fins-tp5ux 11 месяцев назад

А Как найти фон ?

@codingwithtopchiy 11 месяцев назад

Приветствую! Посмотрите это видео: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Yd0QDywQvrY.html в нем есть подборка разных источников с которых можно скачать любой фон. И вот ссылка на этот фон: pixabay.com/photos/workspace-coffee-laptop-macbook-1280538/

@Fins-tp5ux 11 месяцев назад

Спасибо , у меня еще есть один вопрос. Смотрите я поставил фон а тут отступы по краям как их убрать ?

@codingwithtopchiy 11 месяцев назад

Попробуйте указать для body { background: url(); width: 100%; height: 100vh; background-position: center; background-size: cover; background-repeat: no-repeat; } Эти свойства и значения помогут растянуть фон на всю страницу 👌🏻

@Fins-tp5ux 11 месяцев назад

@@codingwithtopchiyхорошо спасибо. А логотип тоже через эти ссылки искать ?

@codingwithtopchiy 11 месяцев назад

Да, один из лучших ресурсов это flaticon.com там и логотипы и иконки есть 👍 Также можете подписаться на мой тг-канал: t.me/CodingWithTopchiy там много полезных ресурсов на разные темы.

@bobikloxebnytiysrach228 2 месяца назад

Мда уж до чего дошли Front-End верстальщики) Видосов по html куча но очень старые(

@codingwithtopchiy 2 месяца назад

Приветствую! Разные есть и старые и новые)

@shota7804 Год назад

Прошу вас о помощи. Можете пожалуйста написать в комментариях css код самого первого .container

@codingwithtopchiy Год назад

Приветствую! .container { width: 100%; height: 100vh; background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(img/bg.jpg); background-position: center; background-size: cover; padding: 15px 12%; }