adicionando um menu sanduiche na versao mobile

geronimofx · Nov 16, 2023 · 3268253 · 3268253
1 parent 8877df7
commit 3268253
Showing 1 changed file with 99 additions and 3 deletions.
diff --git a/html-css-01/style.css b/html-css-01/style.css
@@ -448,6 +448,48 @@
 }
 
 @media (max-width: 1000px) {
+
+    .depoimentos, .cabecalho {
+        width: 100%;
+        margin: 0 auto;
+    }
+
+    .cabecalho h1 {
+        font-size: 36px;
+    }
+
+    .cabecalho p {
+        width: 80%;
+        font-size: 18px;
+    }
+
+    .metricas-container .metricas {
+        margin-bottom: 25px;
+    }
+
+    .depoimentos h3{
+        width: 80%; 
+        font-size: 28px;
+    }
+
+    .talentos-container img {
+        width: 100%;
+    }
+
+    .vagas-container {
+        width: 100%;
+        margin:  0;
+        padding: 0 0 96px;
+    }
+
+    .form-container {
+        width: 100%;
+    }
+
+    .form-container .forms #email {
+        width: 70%;
+    }
+
     .navbar-container .menu-nav,
     .navbar-container .btn-nav {
         display: none; /* Esconde o menu de navegação e os botões para telas menores */
@@ -458,31 +500,85 @@
         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 */
+        background-color: #8E2424; /* Cor de fundo do menu sanduíche */
         color: white; /* Cor do texto do menu sanduíche */
+        border-radius: 4px;
     }
 
     .navbar-container .menu-icon {
         cursor: pointer;
         font-size: 24px; /* Tamanho do ícone do menu sanduíche */
+        order: -1;
     }
 
     .navbar-container .menu-content {
         display: none;
         flex-direction: column;
         align-items: center;
+        background-color: #FFFFFF; /* Cor de fundo do menu quando aberto */
+        border: 1px solid #ccc; /* Borda de 1px cinza */
+        position: absolute; /* Posiciona o menu de forma absoluta */
+        right: 75px;
+        top: 20px; /* Distância do topo da página */
+        z-index: 1; /* Garante que o menu fique acima de outros elementos */
+    }
+
+    .menu-mobile {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        color: #667085;
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 24px;
+        letter-spacing: 0em;
+        text-align: left;
+    }
+
+    .menu-mobile a {
+        text-decoration: none;
     }
 
     .navbar-container .menu-content.show {
         display: flex;
     }
 
     .navbar-container .menu-mobile li {
-        padding: 15px;
+        padding: 8px;
     }
 
     .navbar-container .btn-mobile {
         text-align: center;
-        margin-top: 10px;
+        margin: 10px 10px;
+    }
+
+    .btn-login {
+        width: 70px;
+        height: 44px;
+        padding: 5px 10 5px 10;
+        border-radius: 8px;
+        border: 1px solid #667085;
+
+        font-size: 12px;
+        font-weight: 500;
+        letter-spacing: 0em;
+        color: #667085;
+        cursor: pointer;
+    }
+
+    .btn-cadastro {
+        width: 80px;
+        height: 44px;
+        padding: 5px 10px 5px 10px;
+        border-radius: 8px;
+        border: 1px;
+        background: #8E2424;
+
+        font-size: 12px;
+        font-weight: 500;
+        line-height: 24px;
+        letter-spacing: 0em;
+        color:  #FFFFFF;
+        cursor: pointer;
     }
 }