Merge pull request #21 from satyam-seth-learnings/image-sprites

satyam-seth · web-flow · commit 9bd8f10d6a11 · 2023-07-31T02:34:49.000+05:30
Image sprites
diff --git a/Image Sprites/README.md b/Image Sprites/README.md
@@ -0,0 +1,5 @@
+[CSS Tricks Blog Link](https://css-tricks.com/css-sprites/)
+
+[W3School Link](https://www.w3schools.com/css/css_image_sprites.asp)
+
+[MDN Article Link](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS)
diff --git a/Image Sprites/demo.html b/Image Sprites/demo.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Image Sprites</title>
+</head>
+<body>
+    <h1 class="title">Image Sprites Demo</h1>
+    <div class="original-image">
+        <h1>ORIGINAL IMAGE</h1>
+        <img src="sprite.webp" alt="sprite image">
+    </div>
+    <div class="result">
+        <div class="country">
+            <h1>CANADA</h1>
+            <div class="flags-canada"></div>
+        </div>
+        <div class="country">
+            <h1>USA</h1>
+            <div class="flags-usa"></div>
+        </div>
+        <div class="country">
+            <h1>MEXICO</h1>
+            <div class="flags-mexico"></div>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/Image Sprites/sprite.webp b/Image Sprites/sprite.webp
diff --git a/Image Sprites/style.css b/Image Sprites/style.css
@@ -0,0 +1,73 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    width: 100%;
+    height: 100vh;
+    display: grid;
+    place-items: center;
+    grid-template-areas:
+        "title title"
+        "original-image result";
+    color: whitesmoke;
+    background-color: black;
+}
+
+.title {
+    grid-area: title;
+    padding: 10px;
+    place-self: center;
+    border-radius: 12px;
+    border: 2px solid greenyellow;
+}
+
+.original-image {
+    grid-area: original-image;
+    display: grid;
+    gap: 16px;
+    place-items: center;
+}
+
+.original-image img {
+    border: 2px solid greenyellow;
+}
+
+.result {
+    grid-area: result;
+    display: grid;
+    gap: 16px;
+    place-items: center;
+}
+
+.country {
+    display: grid;
+    gap: 16px;
+    place-items: center;
+}
+
+.flags-canada,
+.flags-mexico,
+.flags-usa {
+    width: 250px;
+    background-image: url('sprite.webp');
+    background-repeat: no-repeat;
+    border: 2px solid greenyellow;
+}
+
+.flags-canada {
+    height: 128px;
+    background-position: -5px -5px;
+}
+
+.flags-usa {
+    height: 135px;
+    background-position: -5px -143px;
+}
+
+.flags-mexico {
+    height: 147px;
+    background-position: -5px -288px;
+}
diff --git a/index.html b/index.html
@@ -52,6 +52,7 @@
     <a href="./Scroll Snapping/index.html">Scroll Snapping</a>
     <a href="./Orientation Lock/demo.html">Orientation Lock</a>
     <a href="./Scratch card effect/demo.html">Scratch card effect</a>
+    <a href="./Image Sprites/demo.html">Image Sprites</a>
 </body>
 
 </html>
