diff --git a/html-css-01/index.html b/html-css-01/index.html index d566bf0..074a6ff 100644 --- a/html-css-01/index.html +++ b/html-css-01/index.html @@ -14,7 +14,7 @@ rel="stylesheet" /> - + @@ -159,5 +177,12 @@

Acompanhe as nossas oportunidades

© 2022 OptimusTech. Todos os direitos reservados. + + diff --git a/html-css-01/style.css b/html-css-01/style.css index 6bbb7aa..3cf3e91 100644 --- a/html-css-01/style.css +++ b/html-css-01/style.css @@ -1,10 +1,9 @@ * { font-family: 'Inter', sans-serif; box-sizing: border-box; - margin: 0 auto; } -body { +/* body { margin: 0; padding: 0; box-sizing: border-box; @@ -12,8 +11,8 @@ body { .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; + } } \ No newline at end of file