Загрузка...

Оценка вёрстки одностраничника с PSD макета

Тема в разделе Frontend создана пользователем Money_Back 17 июл 2020. 313 просмотров

Загрузка...
  1. Money_Back
    Money_Back Автор темы 17 июл 2020 1272 9 июн 2018
    [IMG]
    [IMG]

    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>
    Код
    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;
    }
    }
    Код
    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');
    Есть адаптив.
     
  2. Demon156
    Demon156 17 июл 2020 24 20 окт 2019
    Может js ты имел ввиду?
    Ну в верстке ничего особенного нет, можно было и лучше конечно но это всего лишь верстка
    Осталось выучить нормально js и все, на собесы:PepeDance2::da:
     
    1. Посмотреть предыдущие комментарии (16)
    2. Demon156
      Money_Back, А такие есть так то))
      js так то на хайпе сейчас, сложный просто если вдаваться в точности
  3. Pisos224
    Pisos224 17 июл 2020 51 21 авг 2019
    норм но я бы вместо html body сделал либо reset.css либо * { }
     
  4. de9x
    de9x 17 июл 2020 Frontend developer 141 3 янв 2019
    на мобиле вырви глаз, сделай заголовки чуть меньше.
    кодстайл в рамках одного проекта должен быть один. читать код с разными методологиями названия css классов даже не хочется
    --- Сообщение объединено с предыдущим 17 июл 2020
    в шапке скрипты подключаешь вхахааха, серьезно?
    сейчас бы стилизовать код html-тегами.
    section-tex классный класс.
    alt у картинок нет.
    дай класс section уже.
     
Top