inserindo @media para 600 px, assim como menu para mobile

JonatasASB · Nov 22, 2024 · bba0ec2 · bba0ec2
1 parent c6a2ae8
commit bba0ec2
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 8 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -1,3 +1,7 @@
+html, body{
+    width: 100vw;
+    overflow-x: hidden;
+    }
 * {
     font-family: Arial, Helvetica, sans-serif;
 }
@@ -62,14 +66,14 @@ nav a:hover {
 .banner_headline h1 {
     color: #fff;
     font-size: 60px;
-    text-shadow: 3px 3px 0px #777;
+    text-shadow: 1px 1px 3px #000;
     margin:0;
     padding:0;
     max-width: 350px;
 }
 .banner_headline h3 {
     color: #fff;
-    text-shadow: 3px 3px 0px #777;
+    text-shadow: 1px 1px 3px #000;
     font-size: 19px;
     margin:30px 0px 0px 0px;
     padding:0;
@@ -376,4 +380,72 @@ footer .widget-title-text {
     text-decoration: none;
     color: #f5f5f5;
     font-size: 12px;
+}
+.menuMobile {
+    display: none;
+    width: 40px;
+    height: 40px;
+    margin: 40px 20px 40px 0;
+}
+.mm-line {
+    height: 3px;
+    background-color: #39aae1;
+}
+@media (max-width:600px) {
+    .banner_headline h1 {
+        font-size: 50px;
+    }
+
+    .banner_option {
+        height: auto;
+        flex-direction: column;
+    }
+    #banner {
+        height: auto;
+    }
+    .container {
+        flex-direction: column;
+    }
+    #geral section,
+    #geral aside {
+        margin: 0 0 0 10px;
+    }
+    aside .media600 {
+        justify-content: center;
+    }
+    .footer-menu {
+        flex-direction: column;
+    }
+    .footer-health, .footer-medical, .footer-pay {
+        margin: 0;
+    }
+    .footer-area {
+        flex-direction: column;
+        margin: 5px;
+    }
+    .footer-copy {
+        padding-left: 5px;
+    }
+    header .container {
+        flex-direction: row;
+    }
+    nav ul {
+        display: none;
+        flex-direction: column;
+        position: absolute;
+        left: 0;
+        width: 100%;
+        background-color: #fff;
+    }
+    header {
+        height: auto;
+    }
+    .logo {
+        padding-left: 18px;
+    }
+    .menuMobile {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+    }
 }
diff --git a/index.html b/index.html
@@ -6,6 +6,17 @@
     <link rel="stylesheet"  type="text/css" href="assets/css/style.css">
     <link rel="stylesheet" type="text/css" href="C:\Users\jonat\OneDrive\MediCenter_Pj\medicenter_PJ\assets\css\normalize.css"/>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,100,0,0&icon_names=arrow_right_alt" />
+    <script type="text/javascript">
+        window.onload = function() {
+            document.querySelector(".menuMobile"). addEventListener ("click", function (){
+                if(document.querySelector(".menu nav ul").style.display == 'flex') {
+                    document.querySelector(".menu nav ul").style.display = 'none';
+                } else {
+                    document.querySelector(".menu nav ul").style.display = 'flex';
+                }
+            });
+        };
+    </script>
     <title>MediCenter</title>
 </head>
 <body>
@@ -18,6 +29,11 @@
             </div>
             <div class="menu">
                 <nav>
+                    <div class="menuMobile">
+                        <div class="mm-line"></div>
+                        <div class="mm-line"></div>
+                        <div class="mm-line"></div>
+                    </div>
                     <ul>
                         <li><a class="active "href="">HOME</a></li>
                         <li><a href="">HOME</a></li>
@@ -177,7 +193,7 @@ <h1 class="widget-title-text">Latest News</h1>
                         <h1 class="widget-title-text">Departments</h1>
                         <span class="widget-title-bar"></span>
                     </div>
-                    <div class="widget-body">
+                    <div class="widget-body media600">
                         <div class="square"></div>
                         <div class="square"></div>
                         <div class="square"></div>
@@ -213,19 +229,14 @@ <h1>Health Insurance</h1>
                         <h3>Here in medicenter we have individual</h3>
 
                     </div>
-
-
                     <div class="footer-medical">
                         <h1>Medical Records</h1>
                         <h3>Here in medicenter we have individual</h3>
                     </div>
-
-
                     <div class="footer-pay">
                         <h1>Online Bill Pay</h1>
                         <h3>Here in medicenter we have individual</h3>
                     </div>
-
             </div>
             <div class="footer-area">
                 <div class="footer-area-item">