Чтобы человек, который пришел на ваш сайт, не уходил от бардака и хаоса, нужно сделать header, а точнее обложку. Обложка - это самое первое, что видит человек, когда заходит на ваш сайт. Ему должен понравиться ваш сайт прям сразу, как только он зашел. Можно сказать что именно обложка создает высокий трафик на вашем сайте.
Чтобы сделать обложку качественно, нужно как меньше создавать мелких деталей. Единственное, что должно быть у вас на обложке - это цепляющаяся картинка, текст и верхнее меню. Помните:
Минимализм. Чем меньше мелких деталей, тем красивее и тем лучше усваивается тот посыл который вы хотите передать.
Как сделать обложку сайта в HTML и CSS
Для того, чтобы создать обложку сайта, нужно в теле кода <body></body> написать <header></header>. Именовать его не нужно, т.к. в CSS можно просто записать header{}.
Смотря на другие сайты можно заметить, что все они используют два типа обложек: с фоном-картинкой и просто с белым фоном (или какой-либо другой цвет). Как по мне более привлекательно смотрятся сайты с пустым фоном, без картинки. И поэтому я попробую сверстать эту обложку.
Обложка без картинки
Ну примерно так я вижу свою обложку сайта. Я сейчас не говорю про адаптивную верстку сайтов, я просто хочу посмотреть получится ли у меня сделать что-то подобное или нет. Адаптивная верстка сайта - это гибкий шаблон, в котором элементы подстраиваются под любой размер цифрового устройства. Это могут быть телефоны, компьютеры, ноутбуки и так далее.
Мне кажется получилось неплохо. Здесь я использовал логотип который я сделал за минуту в генераторе логотипов, меню, состоящая из 5 ссылок, тест и две картинки (как наложить картинку на другую картинку я рассказывал здесь). Сверстал я эту обложку за минут десять или пятнадцать. Единственное, что меня разочаровывает - это логотип, т.к я его подбирал не долго, да и как-то не старался. А вот и его код. Слева это HTML, справа две колонки - CSS:
В CSS есть такая строчка где я писал уникальное имя (menu_text_text) и подставил слово :hover. Оно отвечает за мелкую анимацию. При наведении на объект на сайте, который имеет это уникальное имя (menu_text_text), он будет менять цвет на тот, который я указал в CSS.