Разделы:

Шапка для сайта html css

Скачать шрифт из видео

Смотреть видеоурок

HTML файл

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/style.css"> <title>Шапка для сайта</title> </head> <body> <div id="block-body"> // в тегах header прописана наша шапка <header> // разметка для логотипа <div class="logo"> <a href="index.html"> <span class="use">USE</span>-<span class="web">WEB</span>.ru </a> <p>Разработка- это просто</p> </div> // разметка для нашего меню <div class="top-menu"> <ul> <li><a class="clickMenu" href="#">Темы</a></li> <li><a href="#">Видеоуроки</a></li> <li><a href="#">Об авторе</a></li> <li><a href="#">Обратная связь</a></li> </ul> </div> // блок с авторизацией <div class="block-top-auth"> <p><a href="#">Вход</a></p> <p><a href="#">Регистрация</a></p> </div> </header> <div id="block-content"></div> </div> </body> </html>

CSS файл

@font-face { font-family: "Exo2-Medium"; src: url("../fonts/Exo2-Medium.ttf"); } @font-face { font-family: "Exo2-MediumItalic"; src: url("../fonts/Exo2-MediumItalic.ttf"); } @font-face { font-family: "Exo2-Bold"; src: url("../fonts/Exo2-Bold.ttf"); } @font-face { font-family: "Exo2-BoldItalic"; src: url("../fonts/Exo2-BoldItalic.ttf"); } * { margin: 0; padding: 0; } body { background-image: url("../img/white-needle.png"); } #block-body { width: 1035px; margin: 5px auto; height: auto; } header { width: 1035px; height: 80px; background-color: black; } #block-content { width: 1035px; height: auto; min-height: 500px; } .logo { width: 200px; float: left; height: 80px; } .logo a { display: block; margin-left: 15px; margin-top: 10px; font-family: "Exo2-Bold", sans-serif; font-size: 28px; color: #b2aeb2; text-decoration: none; cursor: pointer; } .use { color: #aa064b; } .web { color: #429595; } .logo p { margin-left: 20px; margin-top: 2px; margin-bottom: 5px; font-family: "Exo2-Medium", sans-serif; font-size: 13px; color: white; } .top-menu { width: 685px; height: 80px; float: left; } .top-menu ul li { list-style: none; float: left; text-align: center; } .top-menu ul li a { display: block; width: 171px; text-decoration: none; font-family: "Exo2-Medium", sans-serif; font-size: 17px; color: white; height: 55px; padding-top: 25px; cursor: pointer; } .top-menu ul li a:hover { transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition:all 0.5s ease; -moz-transition:all 0.5s ease; background: #00ADE4; } .block-top-auth { width: 100px; float: left; margin-left: 40px; height: 80px; } .block-top-auth p { margin-top: 12px; text-align: center; margin-bottom: 8px; } .block-top-auth a { text-decoration: none; color: white; font-family: "Exo2-Medium", sans-serif; font-size: 15px; text-decoration: underline; cursor: pointer; } .block-top-auth a:hover { transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition:all 0.5s ease; -moz-transition:all 0.5s ease; color: #00ADE4; }