Помогите с адаптивностью сайта :)

Я не очень разбираюсь в адаптивности, помогите с первой страничкой. Особенно не понимаю, как на мобильных устройствах сделать так, чтобы был только белый квадрат меню.

body {
    padding: 0;
    margin: 0;
    color: black;
    font-size: 16px;
    font-family: FuturaBookC;
}

h1, h2, h3, h4, h5, h6 {
    padding: 0;
    margin: 0;
    text-transform: uppercase;
}

h1 {
    font-family: FuturaDemiC;
}

a {
    text-decoration: none;
}

p {
    margin: 0;
    font-size: 25px;
}

ul, li {
    display: block;
    padding: 0;
    margin: 0;
}

section {
    padding-top: 160px;
}

section h1 {
    margin-bottom: 40px;

}

.container {
    width: 1170px;
    /*позиционирование по центру*/
    margin: 0 auto; 
}

.header {
    background: linear-gradient(to right, #00a2ff, #00ffb4);
    width: 100%;
    height: 800px;
    padding-top: 110px;
}

.header1 {
    width: 1000px;
    height: 600px;
    background: #fff;
    margin: 0 auto;

    
}

header a {
    color: #000;
}

.menu {
    display: flex;
    margin-left: 450px;
    padding-top: 20px;

}

.menu li a {
    text-transform: capitalize;
    font-size: 24px;
}

.menu li a:hover {
    border-bottom: 1px solid #fff;
}

.menu li {
    margin-right: 40px;
}

.nav {
    align-items: center;
}

.logo {
    display: flex;
}

.offer {
    margin-top: 200px;
    margin-left: 50px;
}

.offer p {
    text-transform: uppercase;
}
.offer-right {
    float: right;
}
.offer-right {
    margin-left: auto;
}


.one, .two, .three {
    display: flex;
    margin-bottom: 150px;
}


.des-1, .des-3{
    width: 450px;
    margin-left: 200px;
    margin-top: 30px;
}

.for {
    display: flex;
}

.des-2, .des-4{
    width: 450px;
    margin-right: 200px;
    margin-top: 30px;
}

.objective1 h1{
    text-align: center;
    font-family: FuturaDemiC;
    margin-bottom: 73px;
}

.obj-1, .obj-2, .obj-3, .obj-4{
    width: 500px;
    text-align: center;
}

hr {
    border: none; 
    border-top: 2px solid #FFF623; 
    width: 100px;
    margin-top: 70px;
}


.objj1, .objj2{
    margin-bottom: 73px;
    display: flex;
    justify-content: space-between;
}

.footer{
    padding-top: 25px;
    width: 100%;
    height: 100px;
    background: #757575;
}

.footer p{
    font-size: 15px;
    margin-bottom: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="preload" href="/fonts/FuturaBookC.ttf" as="font">
    <link rel="preload" href="/fonts/FuturaDemiC.ttf" as="font">
    <link rel="stylesheet" href="css/main.css">
     <style type="text/css">
             @font-face {
    font-family: FuturaDemiC; 
    src: url(fonts/FuturaDemiC.ttf); 
   }
     @font-face {
    font-family: FuturaBookC; 
    src: url(fonts/FuturaBookC.ttf); 
   }
        </style>  
</head>
<body>
    <header id="header" class="header">
        <div class="container" >
            <div class="header1">
                <div class="nav">
                    <ul class="menu">
                    <li>
                        <a href="#">
                            Главная
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            Руководитель
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            Студенты
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            Проекты
                        </a>
                    </li>
                </ul>
                </div>
                <div class="logo">
                <div class="offer">
                <h1> ПРОЕКТНАЯ <br>ЛАБОРАТОРИЯ </h1>
                <p>кафедра математики</p>
            </div>

            <div class="offer-right">
                <img src="img/logo-header.svg" alt="logo" style="margin-top: 100px; border: solid;">
            </div>
            
            </div>

            </div>
        </div>
        
    </header>

    <section id="about" class="about">
        <div class="container" >
            <div class="description">
                <div class="one">
                    <div class="one1">
                    <img src="img/1.svg" style="width: 450px; border: solid;" >
                </div>
                <div class="des-1">
                    <h1>Что такое лаборатория?</h1>
                    <p>Лаборатория - это обьединение единомышленчерез проведение различных мероприятий в активной форме</p>
                </div>
            </div>
            <div class="two">
                <div class="des-2">
                    <h1>Чем мы занимаемся?</h1>
                    <p>Научной, прикладной и творческой деятельностью</p>
                </div>
                <div class="two2">
                    <img src="img/2.svg" style="width: 450px; border: solid;" >
                </div>
            </div>
            <div class="three">
                <div class="three3">
                <img src="img/3.svg" style="width: 450px; border: solid;">
            </div>
            <div class="des-3">
                <h1>для чего?</h1>
                <p>У участников появляется возможность не только развить свой потенциал, но и пробовать себя в других направлениях деятельности через мастер-классы, исследовательскую и творческую деятельность.</p>
            </div>
            </div>
            <div class="for">
                <div class="des-4">
                    <h1>присоединяйся</h1>
                    <p>Нет иерархии в отношениях участников. Задачи решаются совместно, согласовано, происходит обмен знаниями. Такой подход к работе является очень эффективным.</p>
                </div>
                <div class="for4">
                    <img src="img/4.svg" alt="" style="width: 450px; border: solid;" >
                </div>
            </div>

        </div>
        </div>
    </section>

    <section id="objective" class="objective" >
        <div class="container">
            <div class="objective1">
                <h1>основные задачи лаборатории</h1>
            </div>
            <div class="objj1">
            <div class="obj-1">
                <hr align="center" > 
                <p>повышение проффесионального мастерства учеников</p>
            </div>
            <div class="obj-2">
                <hr align="center" > 
                <p>поддерка творческой молодежи, использующей в своей работе инновационный и передовой опыт</p>
            </div>
        </div>
        <div class="objj2">
            <div class="obj-3">
                <hr align="center" >
                <p>совершенствование подходов к организации образовательного и творческого процесса с ориентацией на развитие личности   </p>
            </div>
            <div class="obj-4">
                <hr align="center" >
                <p>представлению возможности для самореализации и развития потенциала</p>
            </div>
        </div>
        </div>
    </section>


    <footer id="footer" class="footer">
        <div class="container">
            <div class="footer-text">
                <p>©1994—2021 УГНТУ</p>
                <p>[email protected]</p>
            </div>
            <div class="icons">
                <a class="instagram" href="https://www.instagram.com/bni_rusoil/">
                    <img src="img/inst.svg" alt="">
                </a>
                <a class="vk" href="https://m.vk.com/digital_track?from=groups%253Fact%253Dlist"><img src="img/vk.svg" alt=""></a>
            </div>
        </div>
    </footer>

</body>
</html>


Ответы (1 шт):

Автор решения: Сергей В.
  1. Перед блоком меню <ul class="menu">...</ul> добавь кнопку, она будет тем самым "белым квадратом меню".
  2. Скрой кнопку в стилях.
  3. Добавь медиа-правила - для мобильных сделать кнопку видимой, а блок меню сделать невидимым.
  4. Добавь скрипт, который будет по клику на кнопку открывать-закрывать меню.
  5. Всё.

body{padding:0;margin:0;color:#000;font-size:16px;font-family:FuturaBookC}
h1,h2,h3,h4,h5,h6{padding:0;margin:0;text-transform:uppercase}
h1{font-family:FuturaDemiC}
a{text-decoration:none}
p{margin:0;font-size:25px}
ul,li{display:block;padding:0;margin:0}
section{padding-top:160px}
section h1{margin-bottom:40px}
.container{width:1170px;margin:0 auto}
.header{background:linear-gradient(to right,#00a2ff,#00ffb4);width:100%;height:800px;padding-top:110px}
.header1{width:1000px;height:600px;background:#fff;margin:0 auto}
header a{color:#000}
.super_menu{display:none;border:1px solid #ddd;border-radius:5px;padding:2px 8px;background:#fff;color:#000}
.menu{display:flex;margin-left:450px;padding-top:20px}
.menu li a{text-transform:capitalize;font-size:24px}
.menu li a:hover{border-bottom:1px solid #fff}
.menu li{margin-right:40px}
.nav{align-items:center}
.logo{display:flex}
@media (max-width: 767px) {
.super_menu{display:block;}
.menu{display:none;}
}
.offer{margin-top:200px;margin-left:50px}
.offer p{text-transform:uppercase}
.offer-right{float:right;margin-left:auto}
.one,.two,.three{display:flex;margin-bottom:150px}
.des-1,.des-3{width:450px;margin-left:200px;margin-top:30px}
.for{display:flex}
.des-2,.des-4{width:450px;margin-right:200px;margin-top:30px}
.objective1 h1{text-align:center;font-family:FuturaDemiC;margin-bottom:73px}
.obj-1,.obj-2,.obj-3,.obj-4{width:500px;text-align:center}
hr{border:none;border-top:2px solid #FFF623;width:100px;margin-top:70px}
.objj1,.objj2{margin-bottom:73px;display:flex;justify-content:space-between}
.footer{padding-top:25px;width:100%;height:100px;background:#757575}
.footer p{font-size:15px;margin-bottom:10px}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="preload" href="/fonts/FuturaBookC.ttf" as="font">
    <link rel="preload" href="/fonts/FuturaDemiC.ttf" as="font">
    <link rel="stylesheet" href="css/main.css">
     <style type="text/css">
             @font-face {
    font-family: FuturaDemiC; 
    src: url(fonts/FuturaDemiC.ttf); 
   }
     @font-face {
    font-family: FuturaBookC; 
    src: url(fonts/FuturaBookC.ttf); 
   }
        </style>  
</head>
<body>
    <header id="header" class="header">
        <div class="container" >
            <div class="header1">
                <div class="nav">
                    <button class="super_menu">Menu</button>
                    <ul class="menu">
                    <li>
                        <a href="#">
                            Главная
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            Руководитель
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            Студенты
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            Проекты
                        </a>
                    </li>
                </ul>
                </div>
                <div class="logo">
                <div class="offer">
                <h1> ПРОЕКТНАЯ <br>ЛАБОРАТОРИЯ </h1>
                <p>кафедра математики</p>
            </div>

            <div class="offer-right">
                <img src="img/logo-header.svg" alt="logo" style="margin-top: 100px; border: solid;">
            </div>
            
            </div>

            </div>
        </div>
        
    </header>

    <section id="about" class="about">
        <div class="container" >
            <div class="description">
                <div class="one">
                    <div class="one1">
                    <img src="img/1.svg" style="width: 450px; border: solid;" >
                </div>
                <div class="des-1">
                    <h1>Что такое лаборатория?</h1>
                    <p>Лаборатория - это обьединение единомышленчерез проведение различных мероприятий в активной форме</p>
                </div>
            </div>
            <div class="two">
                <div class="des-2">
                    <h1>Чем мы занимаемся?</h1>
                    <p>Научной, прикладной и творческой деятельностью</p>
                </div>
                <div class="two2">
                    <img src="img/2.svg" style="width: 450px; border: solid;" >
                </div>
            </div>
            <div class="three">
                <div class="three3">
                <img src="img/3.svg" style="width: 450px; border: solid;">
            </div>
            <div class="des-3">
                <h1>для чего?</h1>
                <p>У участников появляется возможность не только развить свой потенциал, но и пробовать себя в других направлениях деятельности через мастер-классы, исследовательскую и творческую деятельность.</p>
            </div>
            </div>
            <div class="for">
                <div class="des-4">
                    <h1>присоединяйся</h1>
                    <p>Нет иерархии в отношениях участников. Задачи решаются совместно, согласовано, происходит обмен знаниями. Такой подход к работе является очень эффективным.</p>
                </div>
                <div class="for4">
                    <img src="img/4.svg" alt="" style="width: 450px; border: solid;" >
                </div>
            </div>

        </div>
        </div>
    </section>

    <section id="objective" class="objective" >
        <div class="container">
            <div class="objective1">
                <h1>основные задачи лаборатории</h1>
            </div>
            <div class="objj1">
            <div class="obj-1">
                <hr align="center" > 
                <p>повышение проффесионального мастерства учеников</p>
            </div>
            <div class="obj-2">
                <hr align="center" > 
                <p>поддерка творческой молодежи, использующей в своей работе инновационный и передовой опыт</p>
            </div>
        </div>
        <div class="objj2">
            <div class="obj-3">
                <hr align="center" >
                <p>совершенствование подходов к организации образовательного и творческого процесса с ориентацией на развитие личности   </p>
            </div>
            <div class="obj-4">
                <hr align="center" >
                <p>представлению возможности для самореализации и развития потенциала</p>
            </div>
        </div>
        </div>
    </section>


    <footer id="footer" class="footer">
        <div class="container">
            <div class="footer-text">
                <p>©1994—2021 УГНТУ</p>
                <p>[email protected]</p>
            </div>
            <div class="icons">
                <a class="instagram" href="https://www.instagram.com/bni_rusoil/">
                    <img src="img/inst.svg" alt="">
                </a>
                <a class="vk" href="https://m.vk.com/digital_track?from=groups%253Fact%253Dlist"><img src="img/vk.svg" alt=""></a>
            </div>
        </div>
    </footer>

</body>
</html>

→ Ссылка