added media query sample

JuneReyP · Sep 27, 2023 · c58f419 · c58f419
1 parent 6d69260
commit c58f419
Showing 1 changed file with 216 additions and 0 deletions.
diff --git a/md.html b/md.html
@@ -0,0 +1,216 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Media Query Sample</title>
+    <style>
+        body {
+            background-color: rgba(128, 128, 128, 0.52);
+        }
+
+        .container {
+            display: grid;
+            grid-template-columns: repeat(12, 1fr);
+            grid-template-rows: repeat(8, 12vh);
+            gap: 5px;
+        }
+
+        .item1,
+        .item2,
+        .item3,
+        .item4,
+        .sidebar {
+            background-color: aquamarine;
+        }
+
+        nav {
+            background-color: rgba(188, 41, 236, 0.653);
+        }
+
+        footer {
+            background-color: aquamarine;
+
+        }
+
+        main {
+            background-color: rgba(197, 242, 242, 0.765);
+        }
+
+
+
+        /* Extra small devices (phones, 600px and down)  */
+        @media only screen and (max-width: 767px) {
+            aside {
+                grid-column: 1/13;
+                grid-row: 7/8;
+            }
+
+            main {
+                grid-column: 1/13;
+                grid-row: 6/7;
+            }
+
+            nav {
+                grid-column: 1/13;
+                grid-row: 1/2;
+            }
+            footer {
+                grid-column: 1/13;
+                grid-row: 8/9;
+            }
+
+            .item1 {
+                grid-column: 1/13;
+                grid-row: 2/3;
+            }
+
+            .item2 {
+                grid-column: 1/13;
+                grid-row: 3/4;
+            }
+
+            .item3 {
+                grid-column: 1/13;
+                grid-row: 4/5;
+            }
+
+            .item4 {
+                grid-column: 1/13;
+                grid-row: 5/6;
+            }
+        }
+
+        /* Medium devices (landscape tablets, 768px and up)  */
+        @media only screen and (min-width: 768px) {
+            aside {
+                grid-column: 1/13;
+                grid-row: 7/8;
+            }
+
+            main {
+                grid-column: 2/13;
+                grid-row: 2/7;
+            }
+
+            nav {
+                grid-column: 1/13;
+                grid-row: 1/2;
+            }
+
+            .item1 {
+                grid-column: 1/2;
+                grid-row: 2/3;
+            }
+
+            .item2 {
+                grid-column: 1/2;
+                grid-row: 3/4;
+            }
+
+            .item3 {
+                grid-column: 1/2;
+                grid-row: 4/5;
+            }
+
+            .item4 {
+                grid-column: 1/2;
+                grid-row: 5/6;
+            }
+            footer {
+                grid-column: 1/13;
+                grid-row: 8/9;
+            }
+        }
+
+        /* Large devices (laptops/desktops, 992px and up)  */
+        @media only screen and (min-width: 992px) {
+            nav {
+                grid-column: 1/13;
+                grid-row: 1/2;
+            }
+
+            footer {
+                grid-column: 1/13;
+                grid-row: 8/9;
+            }
+
+            main {
+                grid-column: 3/11;
+                grid-row: 2/8;
+            }
+
+            .item1 {
+                grid-column: 1/3;
+                grid-row: 2/3;
+            }
+
+            .item2 {
+                grid-column: 1/3;
+                grid-row: 3/4;
+            }
+
+            .item3 {
+                grid-column: 1/3;
+                grid-row: 4/5;
+            }
+
+            .item4 {
+                grid-column: 1/3;
+                grid-row: 5/6;
+            }
+
+            aside {
+                grid-column: 11/13;
+                grid-row: 2/8;
+            }
+        }
+
+        /* 
+          Extra small devices (phones, 600px and down) 
+@media only screen and (max-width: 600px) {...}
+
+ Small devices (portrait tablets and large phones, 600px and up) 
+@media only screen and (min-width: 600px) {...}
+
+ Medium devices (landscape tablets, 768px and up) 
+@media only screen and (min-width: 768px) {...}
+
+ Large devices (laptops/desktops, 992px and up) 
+@media only screen and (min-width: 992px) {...}
+
+ Extra large devices (large laptops and desktops, 1200px and up)
+@media only screen and (min-width: 1200px) {...} 
+        */
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <nav>
+            <h1>NavBar</h1>
+        </nav>
+
+        <div class="item1">Item1</div>
+        <div class="item2">Item2</div>
+        <div class="item3">Item3</div>
+        <div class="item4">Item4</div>
+
+        <main class="main">
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias eligendi distinctio hic commodi, magni
+                aliquid, nihil neque ipsum illum id ratione rerum iste maxime exercitationem? Repudiandae vero fugiat at
+                aliquid!</p>
+        </main>
+
+        <aside class="sidebar">
+            My Sidebar
+        </aside>
+
+        <footer>
+            My Footer
+        </footer>
+    </div>
+</body>
+
+</html>