Criando menu hamburguer

emiliosarges · emiliosarges · commit de9b05bf616d · 2024-12-26T01:53:12.000-03:00
diff --git a/exercicios/ex027/mq005/estilos/style.css b/exercicios/ex027/mq005/estilos/style.css
@@ -1,5 +1,96 @@
 @charset "UTF-8";
 
-body {
+* {
+    margin: 0;
+    padding: 0;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+ul{
+    list-style-type: none;
+}
+
+body, html {
     background-color: lightgrey;
+}
+
+header {
+    background-color: gray;
+}
+
+header > h1 {
+    padding: 10px;
+    text-align: center;
+}
+
+span#burguer {
+    background-color: rgb(36, 36, 36);
+    color: white;
+    display: block;
+    text-align: center;
+    padding: 10px;
+}
+
+span#burguer:hover {
+    background-color: white;
+    color: black;
+}
+
+nav {
+    display: none;
+}
+
+nav > ul > li > a {
+    display: block;
+    padding: 10px;
+    text-decoration: none;
+    text-align: center;
+    background-color: rgb(78, 78, 78);
+    color: white;
+    border-top: 2px solid gray;
+}
+
+nav > ul > li > a:hover {
+    background-color: rgb(201, 198, 198);
+    font-weight: bold;
+    color: black;
+}
+
+main {
+    margin: auto;
+    margin-top: 10px;
+    width: 90vw;
+    background-color: white;
+    padding: 10px;
+    border-radius: 10px;
+    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.459);
+}
+
+article > h2 {
+    padding-bottom: 20px;
+}
+
+article > p {
+    text-align: justify;
+    margin-bottom: 10px;
+    text-indent: 30px;
+}
+
+footer {
+    background-color: black;
+    margin-top: 20px;
+    padding: 15px;
+    color: white;
+    text-align: center;
+    text-decoration: none;
+}
+
+footer > p > a {
+    color: white;
+    font-weight: bolder;
+    text-decoration: underline;
+}
+
+footer > p > a:hover {
+    color: red;
 }
diff --git a/exercicios/ex027/mq005/index.html b/exercicios/ex027/mq005/index.html
@@ -4,12 +4,16 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Media Query</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=menu" />
     <link rel="stylesheet" href="estilos/style.css">
 </head>
 <body>
     <header>
         <h1>Meu Site</h1>
-        <nav>
+        <span class="material-symbols-outlined" id="burguer" onclick="clickMenu()">
+            menu
+            </span>
+        <nav id="itens">
             <ul>
                 <li><a href="#">Opção 1</a></li>
                 <li><a href="#">Opção 2</a></li>
@@ -29,5 +33,18 @@ <h2>Testando Media Queries</h2>
             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, ullam corrupti soluta excepturi at ab, ad repellat minima aliquam ut tempora? Ullam placeat deserunt voluptatum architecto esse, nulla laboriosam voluptas.</p>
         </article>
     </main>
+    <footer>
+        <p>Este site foi criado por <a href="https://github.com/emiliosarges" target="_blank">Emílio Sarges</a> para a plataforma <a href="https://www.estudonauta.com/" target="_blank">Estudonauta</a></p>
+    </footer>
+    <script>
+        function clickMenu() {
+            if (itens.style.display == 'block'){
+                itens.style.display = 'none'
+            } else {
+                itens.style.display = 'block'
+            }
+
+        }
+    </script>
 </body>
 </html>
