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

Money_Back · 17 июл 2020

<!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>
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;

    }

}
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');
Есть адаптив.

Demon156 · 17 июл 2020

Может js ты имел ввиду?
Ну в верстке ничего особенного нет, можно было и лучше конечно но это всего лишь верстка
Осталось выучить нормально js и все, на собесы:PepeDance2:

Pisos224 · 17 июл 2020

норм но я бы вместо html body сделал либо reset.css либо * { }

de9x · 17 июл 2020

на мобиле вырви глаз, сделай заголовки чуть меньше.
кодстайл в рамках одного проекта должен быть один. читать код с разными методологиями названия css классов даже не хочется

--- Сообщение объединено с предыдущим 17 июл 2020
в шапке скрипты подключаешь вхахааха, серьезно?
сейчас бы стилизовать код html-тегами.
section-tex классный класс.
alt у картинок нет.
дай класс section уже.

Оцените Telegram Mini App

БЕСПЛАТНО создам ЛИЧНО ВАМ сайт за отзыв в тгк

Курс верстки|БЕСПЛАТНО|+в коммы

2/3 Free | Помогу | копии сайтов | простая верстка | разверну на сервере

Некорректно отображается картинка(-и)?

Практика вебвёрстки HTML,CSS.

Что выбрать для написания Api-Client?

404 Okak

Сделаю сайт бесплатно за отзыв

Какой сервис выбрать?

Как вставить фото <img> в Telegram Web App с телефона?

[FREE LAND 0/3] САЙТЫ|ВЕРСТКА|БЭКЕНД и многое другое

Проблема с клавиатурой IOS в telegram web app.

Персональная карточка Terminal

Personal Card

Бесплатный ленд за отзыв

Быстрые и современные веб-сервисы

Кряк DevExpress

Выживание - Telegram Mini app

БЕСПЛАТНО сверстаю сайт, лендинг, страницу, визитку, под ****** и т.д.

Как прописать анимацию кнопок в QT DESIGNER? CSS

Анонимный чат Telegram Mini-app

Куда в фигме пропал css export?

Что не так в данном SVG файле? почему форум не принимает его?

{FREE} BackEnd/FrontEnd регчек/парс/запросы это я могу

Всем привет оцените первый сайт

Кто поможет сделать такой же блок html, css, js

Typerscript Discord Plugin AutoMute [Vencord]

Как пользоватся VS CODE для написания кода?

FLS GULP 3.0 Документация

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