mq-icon-googles

arielmlima · arielmlima · commit c3ccc913e919 · 2024-04-07T11:05:04.000-03:00
diff --git a/EXERCICIOS/EXE026/mq005/estilos/style.css b/EXERCICIOS/EXE026/mq005/estilos/style.css
@@ -0,0 +1,74 @@
+@charset "UTF-8";
+
+*{
+    font-family: Arial, Helvetica, sans-serif;
+    margin: 0px;
+    padding: 0px;
+}
+
+body, html {
+    background-color: lightgray;
+}
+
+header{
+    background-color: rgb(148, 148, 148);
+}
+
+header > h1 {
+    padding: 10px;
+    text-align: center;
+}
+
+span#burguer{
+    background-color: rgb(49, 49, 49);
+    color: white;
+    display: block;
+    text-align: center;
+    padding: 10px;
+}
+
+#burger:hover{
+    background-color: white;
+    color: black;
+}
+
+menu{
+    display: none;
+}
+
+menu > ul{
+    list-style-type: none;
+}
+
+menu > ul > li > a {
+    display: block;
+    padding: 10px;
+    text-decoration: none;
+    text-align: center;
+    background-color: rgb(87, 87, 87);
+    color: white;
+    border-top: 2px solid gray;
+}
+
+menu  ul  li  a:hover{
+    background-color: gray;
+}
+
+main{
+    width: 90vw;
+    background-color: white;
+    margin: auto;
+    margin-top: 10px;
+    padding: 10px;
+    border-radius: 10px;
+}
+
+article > h2 {
+    padding-bottom: 20px;
+}
+
+article > p {
+    text-align: justify;
+    margin-bottom: 20px;
+    text-indent: 20px;
+}
diff --git a/EXERCICIOS/EXE026/mq005/index.html b/EXERCICIOS/EXE026/mq005/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Media Queries</title>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link rel="stylesheet" href="estilos/style.css">
+</head>
+<body>
+    <header>
+        <h1>Meu site</h1>
+        <span id="burguer" class="material-icons" onclick="clickMenu()">menu</span>
+        <menu id="itens">
+            <ul>
+                <li><a href="#">Opção 1</a></li>
+                <li><a href="#">Opção 2</a></li>
+                <li><a href="#">Opção 3</a></li>
+                <li><a href="#">Opção 4</a></li>
+                <li><a href="#">Opção 5</a></li>
+            </ul>
+        </menu>
+    </header>
+    <main>
+        <article>
+            <h2>Testando Media Queries</h2>
+
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis nemo ratione, esse vitae exercitationem, assumenda quam impedit doloremque dolores sed excepturi iure? Voluptatem dolorum voluptate ratione reiciendis animi? Distinctio, repellendus.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat ipsum suscipit vero error facilis perferendis, aspernatur eius ab voluptates? Aperiam iure laudantium molestias tenetur consequuntur. Iure autem odit veniam assumenda!</p>
+
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis hic beatae non aliquam dolor numquam, magnam vero quo nulla fuga maiores dicta amet quas quaerat corporis explicabo ipsa, repudiandae cum.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat ipsum suscipit vero error facilis perferendis, aspernatur eius ab voluptates? Aperiam iure laudantium molestias tenetur consequuntur. Iure autem odit veniam assumenda!</p>
+
+            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat ipsum suscipit vero error facilis perferendis, aspernatur eius ab voluptates? Aperiam iure laudantium molestias tenetur consequuntur. Iure autem odit veniam assumenda!</p>
+        </article>
+    </main>
+    <script>
+        function clickMenu(){
+            if (itens.style.display == 'block'){
+                itens.style.display = 'none'
+            } else{
+                itens.style.display = 'block'
+            }
+        }
+    </script>
+</body>
+</html>
+
+<!-- E agora vamos procurar no google, google icons, é um recurso que o google vai disponibilizar para a gente: https://fonts.google.com/icons, la voce pode ou puxar via link ou baixar a fonte, na aba de instruções ensina tudo. -->
