Adição de media-queries e da pasta css

lucascampardo · Feb 8, 2024 · e68d4c2 · e68d4c2
1 parent cb000a1
commit e68d4c2
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 1 deletion.
diff --git a/css/media-query.css b/css/media-query.css
@@ -0,0 +1,61 @@
+/* Media Query para desktops */
+@media (min-width: 1200px) {
+    body {
+        font-size: 16px;
+        max-width: 960px;
+        margin: 0 auto;
+    }
+
+    .main {
+        padding: 20px;
+    }
+
+    .main .header {
+        height: 100px;
+    }
+}
+
+/* Media Query para laptops */
+@media (min-width: 768px) and (max-width: 1199px) {
+    body {
+        font-size: 14px;
+    }
+
+    .main {
+        padding: 15px;
+    }
+
+    .main  .header {
+        height: 80px;
+    }
+}
+
+/* Media Query para tablets */ 
+@media (min-width: 481px) and (max-width: 767px) {
+    body {
+        font-size: 12px;
+    }
+
+    .main {
+        padding: 10px;
+    }
+
+    .main .header {
+        height: 60px;
+    }
+}
+
+/* Media Query para celulares */
+@media (max-width: 480px) {
+    body {
+        font-size: 10px;
+    }
+
+    .main {
+        padding: 5px;
+    }
+
+    .main .header {
+        height: 40px;
+    }
+}
diff --git a/styles.css → css/styles.css b/styles.css → css/styles.css
diff --git a/index.html b/index.html
@@ -3,7 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <title>NLW Expert</title>
-    <link rel="stylesheet" href="styles.css" />
+    <link rel="stylesheet" href="css/styles.css" />
+    <link rel="stylesheet" href="css/media-query.css">
   </head>
   <body>
   <main>