project-1 (screen size) project build

SamiurRahmanMukul · Sep 11, 2021 · d09d133 · d09d133
1 parent de07672
commit d09d133
Show file tree

Hide file tree

Showing 9 changed files with 239 additions and 1 deletion.
diff --git a/1_Project-01 (SCREEN SIZE)/index.html b/1_Project-01 (SCREEN SIZE)/index.html
@@ -0,0 +1,25 @@
+<!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 / 01</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">
+      <div class="text">Hello Screen !</div>
+    </div>
+
+    <!-- window screen size adding div -->
+    <div id="screen-size"></div>
+
+    <!-- linking SCRIPT / JS -->
+    <script src="./src/js/main.js"></script>
+  </body>
+</html>
diff --git a/1_Project-01 (SCREEN SIZE)/public/favicon.ico b/1_Project-01 (SCREEN SIZE)/public/favicon.ico
diff --git a/1_Project-01 (SCREEN SIZE)/src/js/main.js b/1_Project-01 (SCREEN SIZE)/src/js/main.js
@@ -0,0 +1,9 @@
+window.onresize = screen;
+window.onload = screen;
+
+function screen() {
+  myWidth = window.innerWidth;
+
+  document.getElementById("screen-size").innerHTML =
+    "Width : " + myWidth + "px";
+}
diff --git a/1_Project-01 (SCREEN SIZE)/src/style/sass/include/_universal-selectors.scss b/1_Project-01 (SCREEN SIZE)/src/style/sass/include/_universal-selectors.scss
@@ -0,0 +1,16 @@
+/* ========================
+      UNIVERSAL SELECTORS
+  ======================== */
+
+* {
+  margin: 0;
+  padding: 0;
+  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/1_Project-01 (SCREEN SIZE)/src/style/sass/include/_variable.scss b/1_Project-01 (SCREEN SIZE)/src/style/sass/include/_variable.scss
@@ -0,0 +1,20 @@
+/* ===============
+      VARIABLES
+  =============== */
+
+/* COLORS */
+$primary-color: #0275d8;
+$secondary-color: #0084ff;
+$success-color: #5cb85c;
+$info-color: #5bc0de;
+$warning-color: #f0ad4e;
+$danger-color: #d9534f;
+$inverse-color: #292b2c;
+$faded-color: #f7f7f7;
+$white-color: #ffffff;
+$black-color: #000000;
+$dark-color: #303030;
+$gray-color: #808080;
+
+/* TRANSITIONS */
+$main-transition: all 0.5s ease-in-out;
diff --git a/1_Project-01 (SCREEN SIZE)/src/style/sass/style.css b/1_Project-01 (SCREEN SIZE)/src/style/sass/style.css
diff --git a/1_Project-01 (SCREEN SIZE)/src/style/sass/style.css.map b/1_Project-01 (SCREEN SIZE)/src/style/sass/style.css.map
diff --git a/1_Project-01 (SCREEN SIZE)/src/style/sass/style.scss b/1_Project-01 (SCREEN SIZE)/src/style/sass/style.scss
@@ -0,0 +1,77 @@
+@import "./include/variable";
+@import "./include/universal-selectors";
+
+// DIFFERENT SCREEN-SIZE COLOR VARIABLE
+$color-1: #cdb4db; // Mobile
+$color-2: #fff1e6; // Tablet
+$color-3: #52b788; // Laptop
+$color-4: #bee1e6; // Desktop
+
+// DIFFERENT SCREEN-SIZE BREAKPOINTS
+$mobile: 576px;
+$tablet: 768px;
+$laptop: 992px;
+$desktop: 1200px;
+
+.container {
+  height: 100vh;
+  //display: flex;
+  //justify-content: center;
+  //align-items: center;
+  display: grid;
+  place-content: center;
+  background: white;
+
+  .text {
+    top: -10%;
+    font-size: 40px;
+  }
+}
+
+#screen-size {
+  position: absolute;
+  top: 55%;
+  left: 50%;
+  transform: translateX(-50%);
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  -o-transform: translateX(-50%);
+  font-size: 40px;
+}
+
+// !MAX-WIDTH = inside applied
+// !MIN-WIDTH = outside applied
+
+/*  Common Breakpoints: Is there a Standard Resolution?
+      320px — 480px: Mobile devices.
+      481px — 768px: iPads, Tablets.
+      769px — 1024px: Small screens, laptops.
+      1025px — 1200px: Desktops, large screens.
+      1201px and more — Extra large screens, TV.
+*/
+
+// !MOBILE DEVICE
+@media screen and (max-width: $mobile) {
+  .container {
+    background-color: $color-1;
+  }
+}
+// !TABLET DEVICE
+@media screen and (max-width: $tablet) {
+  .container {
+    background-color: $color-2;
+  }
+}
+// !LAPTOP DEVICE
+@media screen and (max-width: $laptop) {
+  .container {
+    background-color: $color-3;
+  }
+}
+// !DESKTOP DEVICE
+@media screen and (max-width: $desktop) {
+  .container {
+    background-color: $color-4;
+  }
+}
diff --git a/README.md b/README.md
@@ -1 +1 @@
-# css-media-queries-3-project
+# Learn `CSS Media Queries` Build 3 Project
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		# css-media-queries-3-project
		# Learn `CSS Media Queries` Build 3 Project