Сам макет *Скрин На телефоне HTML <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0"/> <meta charset="utf-8"> <title>Сайт</title> <link rel="stylesheet" href="css/style.css"/> </head> <body> <header> <div class="container"> <div class="burger-menu"> <a href="#" class="burger-menu__button"> <span class="burger-menu__lines"></span> </a> <nav class="burger-menu__nav"> <a href="#section-1" class="burger-menu__link">Home</a> <a href="#section-2" class="burger-menu__link">About us</a> <a href="#section-3" class="burger-menu__link">Projects</a> <a href="#section-4" class="burger-menu__link">Contact us</a> </nav> <div class="burger-menu__overlay"></div> </div> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="js/script.js"></script> <div class="header-info"> <div class="header-logo"> <a href="#"><img src="img/logo.png"></a> </div> <div class="header-menu"> <nav> <ul> <li><a href="#">Home</a> </li> <li><a href="#">About us</a> </li> <li><a href="#">Projects</a> </li> </ul> </nav> <form action="#" class="action-form" method="post"> <input class="action-submit" type="submit" value="Contact us"> </form> </div> </div> </div> </header> <section> <div class="container"> <div class="section-info"> <div class="section-text"> <p>I Like To Ask The Same Question</p> <b>Many Many Times<b> </div> <div class="section-sumbit"> <form action="#" class="action-form1" method="post"> <input class="action-submit1" type="submit" value="Ok ask me"> </form> </div> <div class="section-block"> <img src="img/block.png"> </div> <div class="section-tex"> <p>We’ve since expanded our life list to 43 sites around the world</p> <b>43 Places to See Before You Die<b> </div> <div class="section-icon"> <div class="icon-planeta"> <img src="img/planeta.png"> <p>Sites the world</p> </div> <div class="icon-planeta"> <img src="img/planeta.png"> <p>Sites the world</p> </div> <div class="icon-planeta"> <img src="img/planeta.png"> <p>Sites the world</p> </div> <div class="icon-planeta"> <img src="img/planeta.png"> <p>Sites the world</p> </div> </div> </div> </div> </section> <footer> <div class="container"> <div class="footer-text"> <p>Designed by cssauthor.com</p> </div> </div> </footer> </body> </html> HTML <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0"/> <meta charset="utf-8"> <title>Сайт</title> <link rel="stylesheet" href="css/style.css"/> </head> <body> <header> <div class="container"> <div class="burger-menu"> <a href="#" class="burger-menu__button"> <span class="burger-menu__lines"></span> </a> <nav class="burger-menu__nav"> <a href="#section-1" class="burger-menu__link">Home</a> <a href="#section-2" class="burger-menu__link">About us</a> <a href="#section-3" class="burger-menu__link">Projects</a> <a href="#section-4" class="burger-menu__link">Contact us</a> </nav> <div class="burger-menu__overlay"></div> </div> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="js/script.js"></script> <div class="header-info"> <div class="header-logo"> <a href="#"><img src="img/logo.png"></a> </div> <div class="header-menu"> <nav> <ul> <li><a href="#">Home</a> </li> <li><a href="#">About us</a> </li> <li><a href="#">Projects</a> </li> </ul> </nav> <form action="#" class="action-form" method="post"> <input class="action-submit" type="submit" value="Contact us"> </form> </div> </div> </div> </header> <section> <div class="container"> <div class="section-info"> <div class="section-text"> <p>I Like To Ask The Same Question</p> <b>Many Many Times<b> </div> <div class="section-sumbit"> <form action="#" class="action-form1" method="post"> <input class="action-submit1" type="submit" value="Ok ask me"> </form> </div> <div class="section-block"> <img src="img/block.png"> </div> <div class="section-tex"> <p>We’ve since expanded our life list to 43 sites around the world</p> <b>43 Places to See Before You Die<b> </div> <div class="section-icon"> <div class="icon-planeta"> <img src="img/planeta.png"> <p>Sites the world</p> </div> <div class="icon-planeta"> <img src="img/planeta.png"> <p>Sites the world</p> </div> <div class="icon-planeta"> <img src="img/planeta.png"> <p>Sites the world</p> </div> <div class="icon-planeta"> <img src="img/planeta.png"> <p>Sites the world</p> </div> </div> </div> </div> </section> <footer> <div class="container"> <div class="footer-text"> <p>Designed by cssauthor.com</p> </div> </div> </footer> </body> </html> CSS код body { margin: 0; padding: 0; } header { height: 67px; } .container { margin-left: 152px; margin-right: 146px; } .header-logo { padding-top: 19px; height: 0; } .header-menu { width: 100%; margin: 0; padding: 0; display: flex; justify-content: flex-end; } .header-menu ul { display: flex; flex-direction: row; margin-top: 0px; margin-bottom: 0px; list-style-type: none; } .header-menu li { margin-right: 30px; } .header-menu a { color: rgba(102, 102, 102, 0.671); text-decoration: none; font-size: 16.35px; font-family: "Roboto"; line-height: 2.202; } .action-form { padding-top: 4px; } .action-submit{ color: #ffffff; font-size: 16px; /*Размер текста в кнопке*/ line-height: 20px; letter-spacing: 0.95px; background-color:#33abf5; /*Цвет кнопки*/ border:none; /*Убирает рамки*/ border-radius:10px; /*Закругление углов*/ padding:4px 25px 3px 25px; cursor:pointer; /*Длеает палец при наведении*/ margin-right: -1px; } .header-menu a:hover { color: red; /* ДЕЛАЕТ КРАСНУЮ КНОПКУ ПРИ НАВЕДЕНИИ */ } /*Тут начало кода в section!!!*/ section { background: url("../img/Background.png") no-repeat center/cover; height: 528px; } .section-text { text-align: center; } .section-text p { font-size: 52.35px; font-family: "Roboto"; color: rgb(255, 255, 255); text-transform: uppercase; line-height: 1.2; margin: 0; padding-top: 170px; } .section-text b { font-size: 52.35px; font-family: "Roboto"; color: rgb(255, 255, 255); text-transform: uppercase; line-height: 1.2; margin: 0; } .section-block { text-align: center; } .section-sumbit { text-align: center; padding-top: 44px; padding-bottom: 44px; } .action-submit1{ color: #ffffff; font-size: 34px; /*Размер текста в кнопке*/ line-height: 20px; letter-spacing: 0.95px; background-color:#4bbc37; /*Цвет кнопки*/ border:none; /*Убирает рамки*/ border-radius:5px; /*Закругление углов*/ padding:20px 50px 20px 50px; cursor:pointer; /*Длеает палец при наведении*/ margin-right: -1px; font-family: "Inter"; } .section-tex { text-align: center; margin-top: 60px; } .section-tex p { font-size: 22.35px; font-family: "Bahnschrift"; color: rgb(126, 124, 124); line-height: 1.29; } .section-tex b { font-size: 22.35px; font-family: "Bahnschrift"; color: rgb(126, 124, 124); line-height: 1.29; } .section-icon { display: flex; flex-direction: row; text-align: center; margin-left: 310px; margin-top: 76px; margin-bottom: 73px; } .icon-planeta { margin-left: 95px; } .icon-planeta p { font-size: 20.35px; font-family: "Bahnschrift"; color: rgb(126, 124, 124); line-height: 1.671; } /*Конец*/ footer { background-color: #414141; height: 30px; margin-top: 700px; } .footer-text p { font-size: 14.35px; font-family: "Calibri"; color: rgba(255, 255, 255, 0.502); line-height: 1.2; text-align: center; padding-top: 5px; } .burger-menu__nav { display: none; } /*ТЕЛЕФОН*/ @media (max-width: 1242px) { .section-icon { margin-left: 1px; } } @media (max-width: 1024px) { .section-icon { margin-left: 10px; } .icon-planeta { margin-left: 25px; } } @media (max-width: 877px) { .section-icon { margin-left: 0px; } .icon-planeta { margin-left: 0px; margin-right: 11px; } } @media (max-width: 862px) { .header-menu { display: none; } .header-logo img { padding-left: 100px; } .burger-menu__button { position: fixed; top: 10px; left: 10px; z-index: 30; width: 80px; height: 80px; border-radius: 50%; background-color: #2a2a2a; transition: 0.4s; } .burger-menu__button:hover .burger-menu__lines { filter: brightness(0.7); } .burger-menu__lines, .burger-menu__lines::after, .burger-menu__lines::before { position: absolute; width: 40px; height: 6px; background-color: #fff; } .burger-menu__lines { top: 50%; left: 50%; transform: translate(-50%, -50%); } .burger-menu__lines::before { content: ""; top: -12px; } .burger-menu__lines::after { content: ""; top: 12px; } .burger-menu_active .burger-menu__button, .burger-menu_active .burger-menu__lines { background-color: transparent; } .burger-menu_active .burger-menu__lines::before { top: 0; transform: rotate(45deg); } .burger-menu_active .burger-menu__lines::after { top: 0; transform: rotate(-45deg); } .burger-menu__nav { padding-top: 80px; position: fixed; z-index: 20; display: flex; flex-flow: column; height: 100%; background-color: #2a2a2a; overflow-y: auto; left: -100%; transition: 0.5s; } .burger-menu_active .burger-menu__nav { left: 0; } .burger-menu__link { padding: 30px; font-family: sans-serif; font-size: 32px; text-decoration: none; text-transform: uppercase; letter-spacing: 5px; font-weight: bold; color: #fff; } .burger-menu__link :hover { filter: brightness(0.7); } .burger-menu__overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 10; } .burger-menu_active .burger-menu__overlay { display: block; } } @media (max-width: 779px) { .container { margin-left: 110px; } .section-icon { display: flex; flex-direction: column; } footer { margin-top: 1300px; } .section-sumbit { padding-top: 22px; } } @media (max-width: 659px) { .container { margin: 0; } .header-logo img { padding-left: 125px; } .section-block img { width: 350px; } } @media (max-width: 375px) { .container { margin: 0; } .header-logo img { padding-left: 125px; } .section-block img { width: 350px; } } @media (max-width: 320px) { .container { margin: 0; } .header-logo img { padding-left: 125px; } .section-block img { width: 310px; } .section-text { width: 320px; } .section-text p { padding-top: 50px; } } Код body { margin: 0; padding: 0; } header { height: 67px; } .container { margin-left: 152px; margin-right: 146px; } .header-logo { padding-top: 19px; height: 0; } .header-menu { width: 100%; margin: 0; padding: 0; display: flex; justify-content: flex-end; } .header-menu ul { display: flex; flex-direction: row; margin-top: 0px; margin-bottom: 0px; list-style-type: none; } .header-menu li { margin-right: 30px; } .header-menu a { color: rgba(102, 102, 102, 0.671); text-decoration: none; font-size: 16.35px; font-family: "Roboto"; line-height: 2.202; } .action-form { padding-top: 4px; } .action-submit{ color: #ffffff; font-size: 16px; /*Размер текста в кнопке*/ line-height: 20px; letter-spacing: 0.95px; background-color:#33abf5; /*Цвет кнопки*/ border:none; /*Убирает рамки*/ border-radius:10px; /*Закругление углов*/ padding:4px 25px 3px 25px; cursor:pointer; /*Длеает палец при наведении*/ margin-right: -1px; } .header-menu a:hover { color: red; /* ДЕЛАЕТ КРАСНУЮ КНОПКУ ПРИ НАВЕДЕНИИ */ } /*Тут начало кода в section!!!*/ section { background: url("../img/Background.png") no-repeat center/cover; height: 528px; } .section-text { text-align: center; } .section-text p { font-size: 52.35px; font-family: "Roboto"; color: rgb(255, 255, 255); text-transform: uppercase; line-height: 1.2; margin: 0; padding-top: 170px; } .section-text b { font-size: 52.35px; font-family: "Roboto"; color: rgb(255, 255, 255); text-transform: uppercase; line-height: 1.2; margin: 0; } .section-block { text-align: center; } .section-sumbit { text-align: center; padding-top: 44px; padding-bottom: 44px; } .action-submit1{ color: #ffffff; font-size: 34px; /*Размер текста в кнопке*/ line-height: 20px; letter-spacing: 0.95px; background-color:#4bbc37; /*Цвет кнопки*/ border:none; /*Убирает рамки*/ border-radius:5px; /*Закругление углов*/ padding:20px 50px 20px 50px; cursor:pointer; /*Длеает палец при наведении*/ margin-right: -1px; font-family: "Inter"; } .section-tex { text-align: center; margin-top: 60px; } .section-tex p { font-size: 22.35px; font-family: "Bahnschrift"; color: rgb(126, 124, 124); line-height: 1.29; } .section-tex b { font-size: 22.35px; font-family: "Bahnschrift"; color: rgb(126, 124, 124); line-height: 1.29; } .section-icon { display: flex; flex-direction: row; text-align: center; margin-left: 310px; margin-top: 76px; margin-bottom: 73px; } .icon-planeta { margin-left: 95px; } .icon-planeta p { font-size: 20.35px; font-family: "Bahnschrift"; color: rgb(126, 124, 124); line-height: 1.671; } /*Конец*/ footer { background-color: #414141; height: 30px; margin-top: 700px; } .footer-text p { font-size: 14.35px; font-family: "Calibri"; color: rgba(255, 255, 255, 0.502); line-height: 1.2; text-align: center; padding-top: 5px; } .burger-menu__nav { display: none; } /*ТЕЛЕФОН*/ @media (max-width: 1242px) { .section-icon { margin-left: 1px; } } @media (max-width: 1024px) { .section-icon { margin-left: 10px; } .icon-planeta { margin-left: 25px; } } @media (max-width: 877px) { .section-icon { margin-left: 0px; } .icon-planeta { margin-left: 0px; margin-right: 11px; } } @media (max-width: 862px) { .header-menu { display: none; } .header-logo img { padding-left: 100px; } .burger-menu__button { position: fixed; top: 10px; left: 10px; z-index: 30; width: 80px; height: 80px; border-radius: 50%; background-color: #2a2a2a; transition: 0.4s; } .burger-menu__button:hover .burger-menu__lines { filter: brightness(0.7); } .burger-menu__lines, .burger-menu__lines::after, .burger-menu__lines::before { position: absolute; width: 40px; height: 6px; background-color: #fff; } .burger-menu__lines { top: 50%; left: 50%; transform: translate(-50%, -50%); } .burger-menu__lines::before { content: ""; top: -12px; } .burger-menu__lines::after { content: ""; top: 12px; } .burger-menu_active .burger-menu__button, .burger-menu_active .burger-menu__lines { background-color: transparent; } .burger-menu_active .burger-menu__lines::before { top: 0; transform: rotate(45deg); } .burger-menu_active .burger-menu__lines::after { top: 0; transform: rotate(-45deg); } .burger-menu__nav { padding-top: 80px; position: fixed; z-index: 20; display: flex; flex-flow: column; height: 100%; background-color: #2a2a2a; overflow-y: auto; left: -100%; transition: 0.5s; } .burger-menu_active .burger-menu__nav { left: 0; } .burger-menu__link { padding: 30px; font-family: sans-serif; font-size: 32px; text-decoration: none; text-transform: uppercase; letter-spacing: 5px; font-weight: bold; color: #fff; } .burger-menu__link :hover { filter: brightness(0.7); } .burger-menu__overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 10; } .burger-menu_active .burger-menu__overlay { display: block; } } @media (max-width: 779px) { .container { margin-left: 110px; } .section-icon { display: flex; flex-direction: column; } footer { margin-top: 1300px; } .section-sumbit { padding-top: 22px; } } @media (max-width: 659px) { .container { margin: 0; } .header-logo img { padding-left: 125px; } .section-block img { width: 350px; } } @media (max-width: 375px) { .container { margin: 0; } .header-logo img { padding-left: 125px; } .section-block img { width: 350px; } } @media (max-width: 320px) { .container { margin: 0; } .header-logo img { padding-left: 125px; } .section-block img { width: 310px; } .section-text { width: 320px; } .section-text p { padding-top: 50px; } } Java код function burgerMenu(selector) { let menu = $(selector); let button = menu.find('.burger-menu__button'); let links = menu.find('.burger-menu__link'); let overlay = menu.find('.burger-menu__overlay'); button.on('click', (e) => { e.preventDefault(); toggleMenu(); }); links.on('click', () => toggleMenu()); overlay.on('click', () => toggleMenu()); function toggleMenu() { menu.toggleClass('burger-menu_active'); if (menu.hasClass('burger-menu_active')) { $('body').css('overflow', 'hidden'); } else { $('body').css('overflow', 'visible'); } } } burgerMenu ('.burger-menu'); Код function burgerMenu(selector) { let menu = $(selector); let button = menu.find('.burger-menu__button'); let links = menu.find('.burger-menu__link'); let overlay = menu.find('.burger-menu__overlay'); button.on('click', (e) => { e.preventDefault(); toggleMenu(); }); links.on('click', () => toggleMenu()); overlay.on('click', () => toggleMenu()); function toggleMenu() { menu.toggleClass('burger-menu_active'); if (menu.hasClass('burger-menu_active')) { $('body').css('overflow', 'hidden'); } else { $('body').css('overflow', 'visible'); } } } burgerMenu ('.burger-menu'); Есть адаптив.
Может js ты имел ввиду? Ну в верстке ничего особенного нет, можно было и лучше конечно но это всего лишь верстка Осталось выучить нормально js и все, на собесы:PepeDance2:
Money_Back, А такие есть так то)) js так то на хайпе сейчас, сложный просто если вдаваться в точности
на мобиле вырви глаз, сделай заголовки чуть меньше. кодстайл в рамках одного проекта должен быть один. читать код с разными методологиями названия css классов даже не хочется --- Сообщение объединено с предыдущим 17 июл 2020 в шапке скрипты подключаешь вхахааха, серьезно? сейчас бы стилизовать код html-тегами. section-tex классный класс. alt у картинок нет. дай класс section уже.