project-3 (more items) project build

SamiurRahmanMukul · Sep 13, 2021 · 7b3114d · 7b3114d
1 parent 37f076c
commit 7b3114d
Show file tree

Hide file tree

Showing 6 changed files with 169 additions and 0 deletions.
diff --git a/3_Project-03 (MORE ITEMS)/index.html b/3_Project-03 (MORE ITEMS)/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- webpage title -->
+    <title>CSS Media Queries / 03</title>
+    <!-- external SASS -->
+    <link rel="stylesheet" href="./src/style/sass/style.css" />
+    <!-- favicon -->
+    <link rel="shortcut icon" href="./public/favicon.ico" type="image/x-icon" />
+  </head>
+  <body>
+    <div class="container">
+      <!-- row-1 -->
+      <div class="row-1">
+        <div class="box-1">A</div>
+        <div class="box-2">B</div>
+        <div class="box-3">C</div>
+      </div>
+
+      <!-- row-2 -->
+      <div class="row-2">
+        <div class="box-4">D</div>
+        <div class="box-5">E</div>
+        <div class="box-6">F</div>
+      </div>
+
+      <!-- row-3 -->
+      <div class="row-3">
+        <div class="box-7">G</div>
+        <div class="box-8">H</div>
+        <div class="box-9">I</div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/3_Project-03 (MORE ITEMS)/public/favicon.ico b/3_Project-03 (MORE ITEMS)/public/favicon.ico
diff --git a/3_Project-03 (MORE ITEMS)/src/style/sass/include/_universal-selectors.scss b/3_Project-03 (MORE ITEMS)/src/style/sass/include/_universal-selectors.scss
@@ -0,0 +1,13 @@
+* {
+  padding: 0;
+  margin: 5px;
+  box-sizing: border-box;
+
+  html {
+    scroll-behavior: smooth;
+
+    body {
+      font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
+    }
+  }
+}
diff --git a/3_Project-03 (MORE ITEMS)/src/style/sass/style.css b/3_Project-03 (MORE ITEMS)/src/style/sass/style.css
diff --git a/3_Project-03 (MORE ITEMS)/src/style/sass/style.css.map b/3_Project-03 (MORE ITEMS)/src/style/sass/style.css.map
diff --git a/3_Project-03 (MORE ITEMS)/src/style/sass/style.scss b/3_Project-03 (MORE ITEMS)/src/style/sass/style.scss
@@ -0,0 +1,46 @@
+// include partials
+@import "./include/universal-selectors";
+
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  gap: 20px;
+
+  // select all rows
+  [class^="row-"] {
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
+
+    // select all boxes
+    [class^="box-"] {
+      background-color: grey;
+      border: 2px solid black;
+
+      width: (100vw) / 3;
+      height: (100vh) / 3;
+
+      display: grid;
+      place-items: center;
+
+      font-size: 50px;
+      font-weight: bold;
+    }
+  }
+}
+
+// media queries applied
+@media (max-width: 650px) {
+  .container {
+    // justify-content: center;
+
+    [class^="row-"] {
+      flex-direction: column;
+
+      [class^="box-"] {
+        width: 100%;
+      }
+    }
+  }
+}