ITkladovaya

8-902-517-45-10

Блог

Первый день, шапка сайта

Приветствую в моём блоге! Делаю заказ на сайт для стилиста. Вот видео верстки шапки в которой есть "гамбургер" - анимированное меню. Весь код написанный в видео смотрите ниже.
А так же есть два видео, как я делал макет на Figma.
Тут можно скачать Figma: https://www.figma.com
Шрифты от Google: https://fonts.google.com
Программа Punto Switcher: https://itkladovaya.ru/programs.html

Все папки и файлы для этго урока

В папке css

                                
@font-face {
    font-family: "Stylo-Bold";
    src: url("../fonts/Stylo-Bold.woff") format("woff"),
    url("../fonts/Stylo-Bold.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

В папке img

В папке js

                                
$('.menu_btn').on('click', function(e) {
    e.preventDefault();
$(this).toggleClass('menu_btn_active');
$('.menu_nav').toggleClass('menu_nav_active');
});

В папке sass

                                
//ОБнуление
*
    padding: 0
    margin: 0
    border: 0 
*, *:before, *:after 
    -moz-box-sizing: border-box
    -webkit-box-sizing: border-box
    box-sizing: border-box
:focus, :active 
    outline: none
a:focus, a:active
    outline: none
nav, footer, header, aside
    display: block        
html, body
    height: 100%
    width: 100%
    font-size: 100%
    line-height: 1.2
    font-size: 14px
    -ms-text-size-adjust: 100%
    -moz-text-size-adjust: 100%
    -webkit-text-size-adjust: 100%
input, button, textarea
    font-family: inherit  
input::-ms-clear
    display: none
button
    cursor: pointer
button::-moz-focus-inner
    padding: 0
    border: 0
a, a:visited 
    text-decoration: none
a:hover
    text-decoration: none
ul li 
    list-style: none
img
    max-width: 100%
    vertical-align: top                             
h1, h2, h3, h4, h5, h6 
    font-size: inherit
    font-weight: 400 
    
@import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap') 

body
    font-family: 'Didact Gothic', sans-serif
    font-size: 15px
    color: #000
//main
.container_top
    display: flex
    justify-content: space-between   
    margin-top: 50px       
.container
    max-width: 1100px
    margin: 0 auto
.logo_img
    img
        width: 200px
        padding-top: 7px
//Гамбургер -----------------------------------------------------------------------------------------------
.menu_btn
    display: block
    width: 50px
    height: 50px
    background-color: #B663B7
    border-radius: 50%
    position: relative
.menu_btn span,
.menu_btn span::before,
.menu_btn span::after
    position: absolute
    top: 50%
    margin-top: -1px
    left: 50%
    margin-left: -10px
    width: 20px
    height: 2px
    background-color: #fff   
.menu_btn span::before,
.menu_btn span::after
    content: ''
    display: block
    transition: 0.2s
.menu_btn span::before
    transform: translateY(-5px)    
.menu_btn span::after
    transform: translateY(5px)   
.menu_btn_active span::before
    transform: rotate(-35deg)
    width: 10px
    transform-origin: left bottom 
.menu_btn_active span::after
    transform: rotate(35deg)
    width: 10px
    transform-origin: left top 
.menu_block
    display: flex
    justify-content: center
    align-items: center
.menu_nav_link
    display: inline-block
    text-decoration: none
    color: #000
    margin-right: 15px
.menu_nav
    transition: 0.5s
    transform-origin: right center
    transform: scaleX(0) translateX(20%)
    opacity: 0
.menu_nav a 
    position: relative
.menu_nav a::before
    content: ''
    bottom: 0
    left: 0
    position: absolute   
    width: 0%
    height: 2px
    background-color: #B663B7
    transition: 0.2s
    margin-bottom: -3px
.menu_nav a:hover:before
    width: 100%
.menu_nav_active
    transform: scaleX(1) translateX(0%)
    opacity: 1

Код html

                                
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="img/main/icon.png">
    <title>Sofi Dmitrieva</title>
    <link rel="stylesheet" href="sass/style.css">
    <link rel="stylesheet" href="sass/style.sass">
</head>
<body>
   <main>
         <div class="container">
            <div class="container_top">
               <div class="logo">
                  <a class="logo_img" href="index.html"><img src="img/main/logo.png" alt="Sofi Dmitrieva"></a>
               </div>
               <!-- Меню ------------------------------------------------------------------------------------------------>
               <div class="section">
                  <div class="menu_block">
                     <nav class="menu_nav">
                        <a href="#" class="menu_nav_link">Обо мне</a>
                        <a href="#" class="menu_nav_link">Мои работы</a>
                        <a href="#" class="menu_nav_link">Мои услуги</a>
                        <a href="#" class="menu_nav_link">Партнерство</a>
                        <a href="#" class="menu_nav_link" target="_blank" rel="noopener noreferrer">Блог</a>
                        <a href="#" class="menu_nav_link">Контакты</a>
                     </nav>
                     <a href="#" class="menu_btn"><span></span></a>
                  </div>
               </div>
            </div>


         </div>
   </main>
   
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
   <script src="js/main.js"></script> 
</body>
</html>

Ждите продолжение)