Загрузка...

Evaluation of the one-page layout with PSD layout

Thread in Frontend created by Money_Back Jul 17, 2020. 337 views

Sort
  1. Money_Back
    Money_Back Topic starter Jul 17, 2020 1273 Jun 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>
    Code
    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;
    
    }
    
}
    Code
    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');
    Есть адаптив.
     
    Jul 17, 2020
  2. Demon156
    Demon156 Jul 17, 2020 24 Oct 20, 2019
    Может js ты имел ввиду?
    Ну в верстке ничего особенного нет, можно было и лучше конечно но это всего лишь верстка
    Осталось выучить нормально js и все, на собесы:PepeDance2::da:
     
    Jul 17, 2020
    1. View previous comments (11)
    2. Money_Back Topic starter
      Demon156, Чтобы быть программистом или веб разрабом,не нада образования,это хобби для тех кто себя переосилив,изучает на дому,то,что в будущем приведёт тебя к небесам *Ты нажрёшься в баре с другими программистами,потом поедите домой и будете иметь друг друга без смазки пока не умрёте,потому что вы дохуя крутые программисты!
      Jul 17, 2020
    3. Demon156
      Money_Back, Я в психушке познакомился с фронтэндером... Так и зародился во мне первый интерес аххАХхах
      Jul 17, 2020
    4. Money_Back Topic starter
      Demon156, Пиши адрес,я опять хочу немного пхп на твоём длинном питоне!
      Jul 17, 2020
    5. View the next comments (5)
  3. Pisos224
    Pisos224 Jul 17, 2020 51 Aug 21, 2019
    норм но я бы вместо html body сделал либо reset.css либо * { }
     
    Jul 17, 2020
  4. de9x
    de9x Jul 17, 2020 Frontend developer 141 Jan 3, 2019
    на мобиле вырви глаз, сделай заголовки чуть меньше.
    кодстайл в рамках одного проекта должен быть один. читать код с разными методологиями названия css классов даже не хочется
    The post was merged to previous Jul 17, 2020
    в шапке скрипты подключаешь вхахааха, серьезно?
    сейчас бы стилизовать код html-тегами.
    section-tex классный класс.
    alt у картинок нет.
    дай класс section уже.
     
    Jul 17, 2020
Loading...
Top