x

Bianck23 · Aug 9, 2024 · 0f4a9aa · 0f4a9aa
1 parent afab551
commit 0f4a9aa
Show file tree

Hide file tree

Showing 8 changed files with 199 additions and 1 deletion.
diff --git a/img/brasil.png b/img/brasil.png
diff --git a/img/logonova.jpeg b/img/logonova.jpeg
diff --git a/img/menu.png b/img/menu.png
diff --git a/img/rota rural.png b/img/rota rural.png
diff --git a/img/vaca.png b/img/vaca.png
diff --git a/index.html b/index.html
@@ -12,8 +12,27 @@
 <body>
     <header class="cabeçario-1">
         <div class="logo-div">
-            <img class="cabeçario-pricipal" src="img/logonova.jpeg" alt="logo do site">
+            <img class="cabeçario-pricipal" src="img/rota rural.jpeg" alt="logo do site">
         </div>
+
+        <nav class="menu-hamburger">
+
+            <input id="menu-hamburguer" type="checkbox" />
+            <label for="menu-hamburguer">
+                <div class="menu">
+                    <span class="hamburguer"></span>
+                </div>
+            </label>
+
+            <ul class="menu-hamburguer-elements show">
+                <li>
+                    <a href="index.html">Home</a>
+                </li>
+                <li><a href="#">Quem Somos</a></li>
+                <li><a href="#">Contato</a></li>
+                <li><a href="index.html">Voltar</a></li>
+            </ul>
+        </nav>
 
     </header>
 

diff --git a/menu.css b/menu.css
@@ -0,0 +1,177 @@
+*{
+    margin: 0;
+    padding: 0;
+    border: 0;
+    box-sizing: border-box;
+  }
+
+  body{
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    background-color: rgb(165, 94, 223);
+
+    font-family: 'Courier New', Courier, monospace;
+  }
+
+  header{
+    width: 100%;
+    height: 10%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    color: whitesmoke;
+    background-color:  rgba(23, 23, 23, .4);
+  }
+
+  .menu-hamburger{
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+
+  .menu-hamburguer-elements{
+    display: flex;
+    width: 80%;
+    height: 10vh;
+    justify-content: space-around;
+    align-items: center;
+  }
+
+  .menu-hamburguer-elements li{
+    list-style: none;
+    font-size: 1.4rem;
+    margin: 2rem 0;
+    font-size: 1.4rem;
+    list-style: none;
+  }
+
+  .menu-hamburguer-elements a{
+    color: white;
+    text-decoration: none;
+  }
+
+  .menu-hamburguer-elements a:hover{
+    color: rgba(20,20,20,.8)
+  }
+
+
+  /* BOTÃO MENU HAMBURGUER */
+  .menu {
+    background-color: rgb(214, 161, 214);
+    width: 60px;
+    height: 60px;
+    margin: 1rem 1rem;
+    border-radius: 5px;
+    cursor: pointer;
+    display: none;
+  }
+
+  .hamburguer {
+    position: relative;
+    display: block;
+    background: #fff;
+    width: 30px;
+    height: 2px;
+    top: 29px;
+    left: 15px;
+    transition: 0.5s ease-in-out;
+  }
+
+  .hamburguer:before,
+  .hamburguer:after {
+    background: #ffff;
+    content: '';
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    transition: 0.5s ease-in-out;
+  }
+
+  .hamburguer:before {
+    top: -10px;
+  }
+
+  .hamburguer:after {
+    bottom: -10px;
+  }
+
+  input {
+    display: none;
+  }
+
+  /* rotação dos elementos do span */
+  input:checked ~ label .hamburguer {
+    transform: rotate(45deg);
+  }
+
+  input:checked ~ label .hamburguer:before {
+    transform: rotate(90deg);
+    top: 0;
+  }
+
+  input:checked ~ label .hamburguer:after {
+    transform: rotate(90deg);
+    bottom: 0;
+  }
+
+  input:checked ~ .menu-hamburguer-elements{
+    left: 0;
+  }
+
+  /* ATIVANDO O BOTÃO HAMBURGUER QUANDO O TAMANHO DA TELA ATINGIR 600PX */
+  @media (max-width: 600px){
+
+    header{
+        height: 20%;
+    }
+
+    .menu-hamburguer-elements a:hover{
+        color: rgb(214, 161, 214);
+    }
+
+    .menu-hamburger{
+        display: flex;
+        width: auto;
+        flex-direction: column;
+        align-self: flex-start;
+        overflow: auto;
+        z-index: 1;
+        color: white
+    }
+
+    .menu-hamburguer-elements{
+        width: 40%;
+        height: 60%;
+        background-color: rgba(10,10,10,.9);
+        position: fixed;
+        left: -30%;
+        top: 0;
+
+        transition: left cubic-bezier(1,0,0,1) .8s;
+
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        justify-content: center;
+
+        padding-top: 15vh;
+
+        z-index: -1;
+    }
+
+    .menu{
+        display: flex;
+        height: 60px;
+        width: 60px;
+    }
+
+  }
+
+
+
+
diff --git a/style.css b/style.css
@@ -1,3 +1,5 @@
+@import url("menu.css");
+
 *{
     margin: 0;
     padding: 0;