Anadee11 · Anadee11 · Oct 12, 2022 · Oct 12, 2022
diff --git a/Photo_Gallery/.vscode/settings.json b/Photo_Gallery/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/Photo_Gallery/README.md b/Photo_Gallery/README.md
@@ -0,0 +1,13 @@
+# PHOTO GALLERY 
+This is a Photo gallery website developed in HTML, CSS and JavaScript.
+
+# 📝Steps to run
+<br>
+- Clone the repo into local machine
+- Open the folder with a code editor like VScode
+- Run the index.html
+
+ # Snapshot 
+ <p align="center">
+   <img src="images/gallery.PNG"></img>
+</p>
diff --git a/Photo_Gallery/images/gallery.PNG b/Photo_Gallery/images/gallery.PNG
diff --git a/Photo_Gallery/images/i1.jpg b/Photo_Gallery/images/i1.jpg
diff --git a/Photo_Gallery/images/i10.jpg b/Photo_Gallery/images/i10.jpg
diff --git a/Photo_Gallery/images/i11.jpg b/Photo_Gallery/images/i11.jpg
diff --git a/Photo_Gallery/images/i12.jpg b/Photo_Gallery/images/i12.jpg
diff --git a/Photo_Gallery/images/i13.jpg b/Photo_Gallery/images/i13.jpg
diff --git a/Photo_Gallery/images/i14.webp b/Photo_Gallery/images/i14.webp
diff --git a/Photo_Gallery/images/i15.webp b/Photo_Gallery/images/i15.webp
diff --git a/Photo_Gallery/images/i16.jpg b/Photo_Gallery/images/i16.jpg
diff --git a/Photo_Gallery/images/i17.webp b/Photo_Gallery/images/i17.webp
diff --git a/Photo_Gallery/images/i19.jpg b/Photo_Gallery/images/i19.jpg
diff --git a/Photo_Gallery/images/i2.jpg b/Photo_Gallery/images/i2.jpg
diff --git a/Photo_Gallery/images/i20.jpg b/Photo_Gallery/images/i20.jpg
diff --git a/Photo_Gallery/images/i21.webp b/Photo_Gallery/images/i21.webp
diff --git a/Photo_Gallery/images/i22.webp b/Photo_Gallery/images/i22.webp
diff --git a/Photo_Gallery/images/i23.jpg b/Photo_Gallery/images/i23.jpg
diff --git a/Photo_Gallery/images/i24.jpg b/Photo_Gallery/images/i24.jpg
diff --git a/Photo_Gallery/images/i26.jpg b/Photo_Gallery/images/i26.jpg
diff --git a/Photo_Gallery/images/i27.jpg b/Photo_Gallery/images/i27.jpg
diff --git a/Photo_Gallery/images/i28.jpg b/Photo_Gallery/images/i28.jpg
diff --git a/Photo_Gallery/images/i29.jpg b/Photo_Gallery/images/i29.jpg
diff --git a/Photo_Gallery/images/i3.jpg b/Photo_Gallery/images/i3.jpg
diff --git a/Photo_Gallery/images/i30.jpg b/Photo_Gallery/images/i30.jpg
diff --git a/Photo_Gallery/images/i31.jpg b/Photo_Gallery/images/i31.jpg
diff --git a/Photo_Gallery/images/i32.jpg b/Photo_Gallery/images/i32.jpg
diff --git a/Photo_Gallery/images/i4.jpg b/Photo_Gallery/images/i4.jpg
diff --git a/Photo_Gallery/images/i5.jpg b/Photo_Gallery/images/i5.jpg
diff --git a/Photo_Gallery/images/i6.jpg b/Photo_Gallery/images/i6.jpg
diff --git a/Photo_Gallery/images/i7.jpg b/Photo_Gallery/images/i7.jpg
diff --git a/Photo_Gallery/images/i8.webp b/Photo_Gallery/images/i8.webp
diff --git a/Photo_Gallery/images/i9.jpg b/Photo_Gallery/images/i9.jpg
diff --git a/Photo_Gallery/index.html b/Photo_Gallery/index.html
@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PHOTO GALLERY</title>
+
+    <!-- magnific-popup css cdn link  -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
+
+    <!-- custom css file link  -->
+    <link rel="stylesheet" href="style.css">
+
+</head>
+<body>
+
+
+<div class="gallery">
+    <div class="header">
+        <h1>PHOTO GALLERY</h1>
+
+       </div>
+       <hr/>
+
+    <ul class="controls">
+        <li class="buttons active" data-filter="all">all</li>
+        <li class="buttons" data-filter="random">Random</li>
+        <li class="buttons" data-filter="places">Places</li>
+        <li class="buttons" data-filter="anime">Anime</li>
+        <li class="buttons" data-filter="flowers">Flowers</li>
+        <li class="buttons" data-filter="wallpaper">Wallpaper</li>
+    </ul>
+
+    <div class="image-container">
+
+
+        <a href="images/i6.jpg" class="image random">
+            <img src="images/i6.jpg" alt="">
+        </a>
+        <a href="images/i7.jpg" class="image random">
+            <img src="images/i7.jpg" alt="">
+        </a>
+        <a href="images/i8.webp" class="image random">
+            <img src="images/i8.webp" alt="">
+        </a>
+        <a href="images/i9.jpg" class="image random">
+            <img src="images/i9.jpg" alt="">
+        </a>
+        <a href="images/i10.jpg" class="image random">
+            <img src="images/i10.jpg" alt="">
+        </a>
+        <a href="images/i11.jpg" class="image random">
+            <img src="images/i11.jpg" alt="">
+        </a>
+        <a href="images/i12.jpg" class="image random">
+            <img src="images/i12.jpg" alt="">
+        </a>
+        <a href="images/i13.jpg" class="image random">
+            <img src="images/i13.jpg" alt="">
+        </a>
+        <a href="images/i14.webp" class="image random">
+            <img src="images/i4.jpg" alt="">
+        </a>
+        <a href="images/i15.webp" class="image random">
+            <img src="images/i15.webp" alt="">
+        </a>
+        <a href="images/i16.jpg" class="image random">
+            <img src="images/i16.jpg" alt="">
+        </a>
+
+
+        <a href="images/i29.jpg" class="image places">
+            <img src="images/i29.jpg" alt="">
+        </a>
+        <a href="images/i30.jpg" class="image places">
+            <img src="images/i30.jpg" alt="">
+        </a>
+        <a href="images/i31.jpg" class="image places">
+            <img src="images/i12.jpg" alt="">
+        </a>
+        <a href="images/cake4.jpg" class="image places">
+            <img src="images/i31.jpg" alt="">
+        </a>
+        <a href="images/i32.jpg" class="image places">
+            <img src="images/i32.jpg" alt="">
+        </a>
+
+
+        <a href="images/i26.jpg" class="image anime">
+            <img src="images/i26.jpg" alt="">
+        </a>
+        <a href="images/i27.jpg" class="image anime">
+            <img src="images/i27.jpg" alt="">
+        </a>
+        <a href="images/i28.jpg" class="image anime">
+            <img src="images/i28.jpg" alt="">
+        </a>
+        <a href="images/i1.jpg" class="image flowers">
+            <img src="images/i1.jpg" alt="">
+        </a>
+        <a href="images/i2.jpg" class="image flowers">
+            <img src="images/i2.jpg" alt="">
+        </a>
+        <a href="images/i3.jpg" class="image flowers">
+            <img src="images/i3.jpg" alt="">
+        </a>
+        <a href="images/i4.jpg" class="image flowers">
+            <img src="images/i4.jpg" alt="">
+        </a>
+        <a href="images/i5.jpg" class="image flowers">
+            <img src="images/i5.jpg" alt="">
+        </a>
+
+        <a href="images/i19.jpg" class="image wallpaper">
+            <img src="images/i19.jpg" alt="">
+        </a>
+        <a href="images/i20.jpg" class="image wallpaper">
+            <img src="images/i20.jpg" alt="">
+        </a>
+        <a href="images/i21.webp" class="image wallpaper">
+            <img src="images/i21.webp" alt="">
+        </a>
+        <a href="images/i23.jpg" class="image wallpaper">
+            <img src="images/i23.jpg" alt="">
+        </a>
+
+    </div>
+
+</div>
+
+
+<!-- jquery cdn link  -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+
+<!-- magnific popup js cdn link  -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
+
+<script>
+
+$(document).ready(function(){
+
+    $('.buttons').click(function(){
+
+        $(this).addClass('active').siblings().removeClass('active');
+
+        var filter = $(this).attr('data-filter')
+
+        if(filter == 'all'){
+            $('.image').show(400);
+        }else{
+            $('.image').not('.'+filter).hide(200);
+            $('.image').filter('.'+filter).show(400);
+        }
+
+    });
+
+    $('.gallery').magnificPopup({
+
+        delegate:'a',
+        type:'image',
+        gallery:{
+            enabled:true
+        }
+
+    });
+
+});
+
+</script>
+
+</body>
+</html>
diff --git a/Photo_Gallery/style.css b/Photo_Gallery/style.css
@@ -0,0 +1,86 @@
+*{
+    margin: 0; padding: 0;
+    box-sizing: border-box;
+    font-family: Arial, Helvetica, sans-serif;
+    text-transform: capitalize;
+    transition:all .2s cubic-bezier(.34,1.12,.68,1.31);
+    background-image: linear-gradient(to right, rgb(5, 56, 71),rgb(43, 162, 199) ,rgb(84, 146, 165), rgb(184, 201, 211));
+}
+
+.header {
+    width: 100%;
+    height: 100px;
+    background-color: teal;
+    text-align: center;
+  }
+  h1 {
+     padding-top: 40px;
+     font-size: 38px;
+     font-family: cursive;
+     color: white;		 
+  }	 
+
+  hr {
+    width: 40%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+.gallery{
+    min-height: 100vh;
+
+    padding-bottom: 100px;
+}
+
+.gallery .controls{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    padding:20px 0;
+    list-style: none;
+}
+
+.gallery .controls .buttons{
+    height:40px;
+    width: 140px;
+    background:#fff;
+    color:#666;
+    font-size: 20px;
+    line-height: 40px;
+    cursor: pointer;
+    margin:20px;
+    box-shadow: 0 3px 5px rgba(0,0,0,.3);
+    text-align: center;
+}
+
+.gallery .controls .buttons.active{
+    background:coral;
+    color:#fff;
+}
+
+.gallery .image-container{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.gallery .image-container .image{
+    height:250px;
+    width: 350px;
+    overflow: hidden;
+    border:15px solid #fff;
+    box-shadow: 0 3px 5px rgba(0,0,0,.3);
+    margin: 20px;
+}
+
+.gallery .image-container .image img{
+    height: 100%;
+    width:100%;
+    object-fit: cover;
+}
+
+.gallery .image-container .image:hover img{
+    transform: scale(1.4);
+}