adicionando início do header (pendente lapidar hover)

OZimbres · Mar 6, 2024 · e346e7a · e346e7a
1 parent a4455d5
commit e346e7a
Show file tree

Hide file tree

Showing 18 changed files with 130 additions and 1 deletion.
diff --git a/cabeçalho.css b/cabeçalho.css
@@ -0,0 +1,95 @@
+
+*{
+margin: 0;
+padding: 0;
+}
+
+
+#container {
+    width: 980px; /*largura do box content, sem contar padding e border*/
+    margin: 50px auto 0; /*valores em sentido horário;
+    20px para margem superior;
+    valor auto renderiza automaticamente margens laterais, para centralizar conteúdo
+    valor 0 para bottom=0*/
+
+}
+
+.nav1 {
+    display: flex;
+    justify-content: space-between; /*separa o logo e o menu*/
+    align-items: center; /*alinha verticalmente o logo e o menu */
+    background-color: #1b8e99; /*cor de fundo para o menu inferior*/
+    padding: 0 10px; /*espaçamento interno entre itens no cabeçalho */
+    height: 45px; /*define altura do box*/
+    position: relative; /*permite alterar posicionamento; necessário para z-index*/
+    z-index: 2; /*define profundidade; valor maior que menu azul e banner*/
+
+}
+
+.nav2 {
+    display: flex; /*permite uso das propriedades flexbox: justify-content e align items*/
+    justify-content: space-between; /*separa no eixo horizontal, logo e o menu, posiciona-os nas extremidades*/
+    align-items: center; /* centraliza logo e o menu no eixo vertical */
+    background-color: #660000; /* Cor de fundo para o cabeçalho e o menu secundário */
+    padding: 0 10px; /* Espaçamento interno no cabeçalho */
+    height: 45px; /*define altura do box*/
+
+}
+
+#logo img {
+    width: 194px; /* Largura do logo */
+    height: 146px; /* Altura do logo */
+    position: relative;
+    z-index: 1; /*define profundidade; valor menor que logo*/
+    translate: 0 30px; /*desloca 0 no eixo horizontal e 30px no eixo vertical*/
+}
+
+.menu, nav ul {
+    list-style: none; /*remove bullet points*/
+    display: flex; /*define flexbox*/
+    padding: 0; /*reseta padding para zero*/
+    margin: 0;  /*reseta margin para zer0*/
+    gap: 30px; /* Espaço entre os itens do menu; propriedade do display grid, aplicável ao flexbox */
+    text-align: center; /*centraliza texto*/
+    height: 45px; /*define altura para texto, igual à altura do box, para aplicar align-itens*/
+    display: flex; /*permite uso da propriedade align-itens*/
+    align-items: center; /* alinha texto dos links no eixo vertical */
+
+
+}
+
+.menu li a, nav ul li a {
+    color: white; /* Cor do texto dos links */
+    text-decoration: none; /* Remove o sublinhado dos links */
+    font-size: 12px; /* Tamanho da fonte dos links */
+
+}
+
+.hover1:hover{
+    background-color: #92c9ce; /*cor de fundo do hover*/
+    height: 55px; /*altura 10px maior do que box, para dar efeito de overflow/transbordamento*/
+    padding: 0 5px 0 5px;/*aumenta  área de padding à esquerda e à direita, mas está empurrando os elementos circundantes*/
+    margin: -5px; /*evita deslocamento lateral dos elementos ao redor após aumento do padding, mas cria um problema no eixo vertical*/
+    display: flex;/*permite propriedades flexbox*/
+    align-items: center; /*centraliza no eixo vertical*/
+    font-weight: bold; /*negrito*/
+}
+
+.hover2:hover{
+    background-color: white; /*cor de fundo do hover*/
+    height: 55px; /*altura 10px maior do que box, para dar efeito de overflow/transbordamento*/
+    padding: 0 5px 0 5px; /*aumenta  área de padding à esquerda e à direita, mas está empurrando os elementos circundantes*/
+    margin: -5px; /*evita deslocamento lateral dos elementos ao redor após aumento do padding, mas cria um problema no eixo vertical*/
+    display: flex; /*permite propriedades flexbox*/
+    align-items: center; /*centraliza no eixo vertical*/
+    font-weight: bold /*negrito*/
+}
+
+.hover2:hover a {
+    color: #660000; /*sobreposição à regra herdade de .menu li a, nav ul li a*/
+}
+
+#banner {
+
+    z-index: 1; /*define profundidade; valor menor que logo*/
+}
diff --git a/cabeçalho.html b/cabeçalho.html
@@ -0,0 +1,35 @@
+<!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="stylesheet" href="cabeçalho.css">
+</head>
+<body>
+    <div id="container">
+        <nav id="logo-menu" class="nav1">
+            <div id="logo"><img src="./img/logo.fw.png" alt="Drones Net Logo"></div>
+            <ul class="menu">
+                <li class="hover1"><a href="#">HOME</a></li>
+                <li class="hover1"><a href="#">NOSSA<br>EMPRESA</a></li>
+                <li class="hover1"><a href="#">LOJAS</a></li>
+                <li class="hover1"><a href="#">LOCALIZAÇÃO</a></li>
+                <li class="hover1"><a href="#">CONTATO</a></li>
+            </ul>
+        </nav>
+        <div id="banner"> 
+            <img src="./img/banner.fw.png" alt="Banner">
+        </div>
+        <nav class="nav2">
+            <ul>
+                <li class="hover2"><a href="#">PRODUTOS</a></li>
+                <li class="hover2"><a href="#">LOJA<br>VIRTUAL</a></li>
+                <li class="hover2"><a href="#">CURSOS</a></li>
+                <li class="hover2"><a href="#">SERVIÇOS</a></li>
+                <li class="hover2"><a href="#">BLOG</a></li>
+            </ul>
+        </nav>   
+    </div>
+</body>
+</html>
diff --git a/img/DroneA.png b/img/DroneA.png
diff --git a/img/DroneB.png b/img/DroneB.png
diff --git a/img/DroneC.png b/img/DroneC.png
diff --git a/img/ServicosA.png b/img/ServicosA.png
diff --git a/img/ServicosB.png b/img/ServicosB.png
diff --git a/img/ServicosC.png b/img/ServicosC.png
diff --git a/img/banner.fw.png b/img/banner.fw.png
diff --git a/img/carrinho.png b/img/carrinho.png
diff --git a/img/imgDroneA.png b/img/imgDroneA.png
diff --git a/img/imgDroneB.png b/img/imgDroneB.png
diff --git a/img/imgDroneC.png b/img/imgDroneC.png
diff --git a/img/imgProfessor.png b/img/imgProfessor.png
diff --git a/img/logo.fw.png b/img/logo.fw.png
diff --git a/img/logo.png b/img/logo.png
diff --git a/img/modelo.jpg b/img/modelo.jpg
diff --git a/index.html b/index.html