first commit

RaviShankar5777 · Dec 14, 2023 · 11a3afd · 11a3afd
commit 11a3afd
Show file tree

Hide file tree

Showing 13 changed files with 272 additions and 0 deletions.
diff --git a/app.js b/app.js
@@ -0,0 +1,90 @@
+
+
+const images = document.querySelector(".images");
+const burger = document.querySelector(".burger");
+
+const firstImg = document.querySelector(".img1");
+const secondImg = document.querySelector(".img2");
+const thirdImg = document.querySelector(".img3");
+const fourthImg = document.querySelector(".img4");
+const fifthImg = document.querySelector(".img5");
+const sixthImg = document.querySelector(".img6");
+const seventhImg = document.querySelector(".img7");
+const eighthImg = document.querySelector(".img8");
+const ninthImg = document.querySelector(".img9");
+const tenthImg = document.querySelector(".img10");
+
+function image1Function() {
+  firstImg.style.display = "block";
+  images.style.opacity = "0.2";
+  burger.style.display = "block";
+}
+
+function burgerFunction() {
+  firstImg.style.display = "none";
+  secondImg.style.display = "none";
+  thirdImg.style.display = "none";
+  fourthImg.style.display = "none";
+  fifthImg.style.display = "none";
+  sixthImg.style.display = "none";
+  seventhImg.style.display = "none";
+  eighthImg.style.display = "none";
+  ninthImg.style.display = "none";
+  tenthImg.style.display = "none";
+  images.style.opacity = "1";
+  burger.style.display = "none";
+}
+
+function image2Function() {
+  secondImg.style.display = "block";
+  images.style.opacity = "0.2";
+  burger.style.display = "block";
+}
+
+function image3Function() {
+  thirdImg.style.display = "block";
+  images.style.opacity = "0.2";
+  burger.style.display = "block";
+}
+
+function image4Function() {
+  fourthImg.style.display = "block";
+  images.style.opacity = "0.2";
+  burger.style.display = "block";
+}
+
+function image5Function() {
+  fifthImg.style.display = "block";
+  images.style.opacity = "0.2";
+  burger.style.display = "block";
+}
+
+function image6Function() {
+  sixthImg.style.display = "block";
+  images.style.opacity = "0.2";
+  burger.style.display = "block";
+}
+
+function image7Function() {
+  seventhImg.style.display = "block";
+  images.style.opacity = "0.2";
+  burger.style.display = "block";
+}
+
+function image8Function() {
+  eighthImg.style.display = "block";
+  images.style.opacity = "0.2";
+  burger.style.display = "block";
+}
+
+function image9Function() {
+  ninthImg.style.display = "block";
+  images.style.opacity = "0.2";
+  burger.style.display = "block";
+}
+
+function image10Function() {
+  tenthImg.style.display = "block";
+  images.style.opacity = "0.2";
+  burger.style.display = "block";
+}
diff --git a/image1.jpg b/image1.jpg
diff --git a/image10.jpg b/image10.jpg
diff --git a/image2.jpg b/image2.jpg
diff --git a/image3.jpg b/image3.jpg
diff --git a/image4.jpg b/image4.jpg
diff --git a/image5.jpg b/image5.jpg
diff --git a/image6.jpg b/image6.jpg
diff --git a/image7.jpg b/image7.jpg
diff --git a/image8.jpg b/image8.jpg
diff --git a/image9.jpg b/image9.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Images Viewer</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="container">
+      <div class="images">
+        <img src="image1.jpg" onclick="image1Function()"  alt="" />
+        <img src="image2.jpg" onclick="image2Function()" alt="" />
+        <img src="image3.jpg" onclick="image3Function()" alt="" />
+        <img src="image4.jpg" onclick="image4Function()"  alt="" />
+        <img src="image5.jpg" onclick="image5Function()" alt="" />
+        <img src="image6.jpg" onclick="image6Function()" alt="" />
+        <img src="image7.jpg" onclick="image7Function()" alt="" />
+        <img src="image8.jpg" onclick="image8Function()" alt="" />
+        <img src="image9.jpg" onclick="image9Function()" alt="" />
+        <img src="image10.jpg"onclick="image10Function()" alt="" />
+      </div>
+      <div class="image1">
+        <img src="image1.jpg"  class="img1" alt="" />
+        <div class="burger" onclick="burgerFunction()">
+          <div class="line1"></div>
+          <div class="line2"></div>
+        </div>
+      </div>
+      <div class="image2">
+        <img src="image2.jpg"  class="img2" alt="" />
+        <div class="burger">
+          <div class="line1"></div>
+          <div class="line2"></div>
+        </div>
+      </div>
+      <div class="image3">
+        <img src="image3.jpg"  class="img3" alt="" />
+        <div class="burger">
+          <div class="line1"></div>
+          <div class="line2"></div>
+        </div>
+      </div>
+      <div class="image4">
+        <img src="image4.jpg"  class="img4" alt="" />
+        <div class="burger">
+          <div class="line1"></div>
+          <div class="line2"></div>
+        </div>
+      </div>
+      <div class="image5">
+        <img src="image5.jpg"  class="img5" alt="" />
+        <div class="burger">
+          <div class="line1"></div>
+          <div class="line2"></div>
+        </div>
+      </div>
+      <div class="image6">
+        <img src="image6.jpg"  class="img6" alt="" />
+        <div class="burger">
+          <div class="line1"></div>
+          <div class="line2"></div>
+        </div>
+      </div>
+      <div class="image7">
+        <img src="image7.jpg"  class="img7" alt="" />
+        <div class="burger">
+          <div class="line1"></div>
+          <div class="line2"></div>
+        </div>
+      </div>
+      <div class="image8">
+        <img src="image8.jpg"  class="img8" alt="" />
+        <div class="burger">
+          <div class="line1"></div>
+          <div class="line2"></div>
+        </div>
+      </div>
+      <div class="image9">
+        <img src="image9.jpg"  class="img9" alt="" />
+        <div class="burger">
+          <div class="line1"></div>
+          <div class="line2"></div>
+        </div>
+      </div>
+      <div class="image10">
+        <img src="image10.jpg"  class="img10" alt="" />
+        <div class="burger">
+          <div class="line1"></div>
+          <div class="line2"></div>
+        </div>
+      </div>
+
+    </div>
+
+    <script src="app.js"></script>
+  </body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,84 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.container {
+  width: 100%;
+  height: 100vh;
+  padding: 50px 200px;
+  background-color: black;
+}
+.images {
+  height: 100%;
+  display: grid;
+  grid-template-columns: auto auto auto auto auto;
+  grid-gap: 20px;
+  cursor: pointer;
+}
+
+.images img {
+  border-radius: 5px;
+  width: 200px;
+  height: auto;
+  box-shadow: 5px 5px 10px 5px rgba(255, 255, 255, 0.2);
+}
+.images img:hover {
+  width: 190px;
+}
+
+.image1 img,
+.image2 img,
+.image3 img,
+.image4 img,
+.image5 img,
+.image6 img,
+.image7 img,
+.image8 img,
+.image9 img,
+.image10 img {
+  width: 440px;
+  height: auto;
+  position: absolute;
+  top: 41px;
+  left: 550px;
+  display: none;
+}
+
+.line1,
+.line2 {
+  width: 35px;
+  height: 3px;
+  background-color: white;
+  box-shadow: 1px 1px 3px 3px rgba(0, 255, 255, 0.2);
+}
+
+.line1 {
+  transform: rotate(-45deg) translate(-13px, 10px);
+}
+.line2 {
+  transform: rotate(45deg) translate(8px, 10px);
+}
+
+.image1 .burger,
+.image2 .burger,
+.image3 .burger,
+.image4 .burger,
+.image5 .burger,
+.image6 .burger,
+.image7 .burger,
+.image8 .burger,
+.image9 .burger,
+.image10 .burger {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: 5px;
+  cursor: pointer;
+  position: absolute;
+  top: 45px;
+  right: 410px;
+  display: none;
+}