adicionando um pouco de responsividade ao projeto

geronimofx · Nov 15, 2023 · 8877df7 · 8877df7
1 parent baedd78
commit 8877df7
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 6 deletions.
diff --git a/html-css-01/index.html b/html-css-01/index.html
@@ -14,7 +14,7 @@
             rel="stylesheet"
         />
     </head>
-    <body class="container">
+    <body>
         <!-- Day #01 -->
         <nav class="navbar-container">
             <div>
@@ -44,6 +44,24 @@
                 <button class="btn-login">Entrar</button>
                 <button class="btn-cadastro">Cadastrar</button>
             </div>
+
+            <!-- Menu sanduíche para telas menores -->
+            <div class="nav-mobile">
+                <div class="menu-icon" onclick="toggleMenu()">&#9776;</div> <!-- Ícone do menu sanduíche -->
+                <div class="menu-content">
+                    <ul class="menu-mobile">
+                        <!-- Conteúdo do menu para telas menores -->
+                        <li><a href="#" onclick="toggleMenu()">Home</a></li>
+                        <li><a href="#" onclick="toggleMenu()">Produtos</a></li>
+                        <li><a href="#" onclick="toggleMenu()">Recursos</a></li>
+                        <li><a href="#cabecalho" onclick="toggleMenu()">Sobre nós</a></li>
+                    </ul>
+                    <div class="btn-mobile">
+                        <button class="btn-login" onclick="toggleMenu()">Entrar</button>
+                        <button class="btn-cadastro" onclick="toggleMenu()">Cadastrar</button>
+                    </div>
+                </div>
+            </div>
         </nav>
 
         <!-- Day #02 -->
@@ -159,5 +177,12 @@ <h3>Acompanhe as nossas oportunidades</h3>
             </form>
             <span>© 2022 OptimusTech. Todos os direitos reservados.</span>
         </section>
+
+        <script>
+            function toggleMenu() {
+                var menuContent = document.querySelector('.nav-mobile .menu-content');
+                menuContent.classList.toggle('show');
+            }
+        </script>
     </body>
 </html>
diff --git a/html-css-01/style.css b/html-css-01/style.css
@@ -1,19 +1,18 @@
 * {
     font-family: 'Inter', sans-serif;
     box-sizing: border-box;
-    margin: 0 auto;
 }
 
-body {
+/* body {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 
 .container {
     width: 1440px;
-    margin: 0 auto; /* Isso centralizará a div com a largura especificada */
-}
+    margin: 0 auto;
+} */
 
 /* Day #01 */
 .navbar-container {
@@ -26,10 +25,14 @@ body {
     margin-top: 36px;
 }
 
+.navbar-container .nav-mobile {
+    display: none;
+}
+
 .icon-nav {
     display: flex;
     align-items: center;
-    gap: 15px;
+    gap: 8px;
     width: 148px;
     text-decoration: none;
 }
@@ -415,4 +418,71 @@ body {
     letter-spacing: 0em;
     text-align: left;
     color: #98A2B3;
+}
+
+@media (max-width: 1280px) {
+    .menu-nav {
+        margin-right: 0;
+    }
+
+    .nav-mobile {
+        display: none;
+    }
+
+    .talentos-container img {
+        width: 950px;
+    }
+
+    .vagas-container {
+        width: 950px;
+    }
+
+    .depoimentos {
+        width: 1000px;
+        margin: 0 auto;
+    }
+
+    .depoimentos h3 {
+        width: 950px;
+    }
+}
+
+@media (max-width: 1000px) {
+    .navbar-container .menu-nav,
+    .navbar-container .btn-nav {
+        display: none; /* Esconde o menu de navegação e os botões para telas menores */
+    }
+
+    .navbar-container .nav-mobile {
+        display: flex;
+        justify-content: space-between; /* Alinha os itens horizontalmente */
+        align-items: center; /* Alinha os itens verticalmente */
+        padding: 10px; /* Adiciona um espaçamento interno */
+        background-color: #333; /* Cor de fundo do menu sanduíche */
+        color: white; /* Cor do texto do menu sanduíche */
+    }
+
+    .navbar-container .menu-icon {
+        cursor: pointer;
+        font-size: 24px; /* Tamanho do ícone do menu sanduíche */
+    }
+
+    .navbar-container .menu-content {
+        display: none;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .navbar-container .menu-content.show {
+        display: flex;
+    }
+
+    .navbar-container .menu-mobile li {
+        padding: 15px;
+    }
+
+    .navbar-container .btn-mobile {
+        text-align: center;
+        margin-top: 10px;
+    }
 }