Merge pull request #56 from Animesh-Pattnaik/Animesh-Pattnaik

Created a Image Gallery [#38]
debrajrout · Oct 2, 2023 · fea73b1 · fea73b1
2 parents 5d3b2f2 + 9be9e19
commit fea73b1
Show file tree

Hide file tree

Showing 16 changed files with 295 additions and 0 deletions.
diff --git a/Image Gallery/Animesh Pattnaik/index.html b/Image Gallery/Animesh Pattnaik/index.html
@@ -0,0 +1,130 @@
+<!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" />
+    <link rel="stylesheet" href="style.css" media="all" />
+    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
+    <title>Magical Gallery</title>
+  </head>
+
+  <body>
+    <div class="head">
+        <div class="left">
+            <img src="photos\WW_Hero_Image-fotor-bg-remover-20230519175554.png" alt="ww" id="r">
+        </div>
+        <div class="center">
+            <h1><span>Gallery of Wizardry<br/>▬▬ι═════════🢒</h1>
+        </div>
+        <div class="right">
+            <img src="photos\WW_Hero_Image-fotor-bg-remover-20230519175554.png" alt="ww" id="l">
+        </div>          
+    </div>
+    <section class="gallery">
+        <div class="a">
+            <img src="photos\Grindelwald.jpg" alt="Grindelwald">
+            <h1>Gallert Grindelwald</h1>
+            <p>Grindelwald was one of the most powerful and notorious wizard to ever
+                exist.He was a complex figure, highly idealistic and talented, 
+                dedicated to achieve his ends at any cost. 
+            </p>
+        </div>
+
+        <div class="b">
+            <img src="photos\images (1).jpeg" alt="Dumbledore">
+            <h1>Albus Dumbledore</h1>
+            <p>Dumbledore was one of the most famous wizard alive. He was considered the leader of light,
+                he founded and lead an organisation called order of phoenix in order to fight against voldermort.
+            </p>
+        </div>
+
+        <div class="c">
+            <img src="photos\HP1.jpg" alt="Hadrian">
+            <h1>Harry Potter</h1>
+            <p>Harry was seen and had proven himself to be an extremely powerful and talented wizard. 
+            His power was evident from the start: he was able to conjure a corporeal Patronus
+             at an exceptionally young age and even survived numerous encounters with Lord Voldemort. 
+        </div>
+
+        <div class="d">
+            <img src="photos\Voldie.jpg" alt="Voldemort">
+            <h1>Lord Voldemort</h1>
+            <p>He was considered to have been the most powerful and dangerous 
+            Dark wizard of all time. He was amongst the greatest wizards to have ever 
+            lived
+            </p>
+        </div>
+
+        <div class="e">
+            <img src="photos\Ootp076.jpg" alt="Snape">
+            <h1>Severus Snape</h1>
+            <p>Professor Severus Snape was an English half-blood wizard serving as Potions Master
+                Head of Slytherin House, Defence Against the Dark Arts professor 
+                and Headmasterof the Hogwarts.
+
+            </p>
+        </div>
+        <div class="f">
+            <img src="photos\images (5).jpeg" alt="Cat">
+            <h1>Minerva McGonagall</h1>
+            <p>Minerva McGonagall was an incredibly powerful and talented witch whom none
+                should have ever underestimated. Her magical prowess allowed her to be the teacher 
+                of Transfiguration, a remarkably complex field of magic. 
+            </p>
+        </div>
+
+        <div class="g">
+            <img src="photos\Newt1.png" alt="Newt">
+            <h1>Newt Scamander</h1>
+            <p>Newton Artemis Fido "Newt" Scamander,was an English wizard, famed Magizoologist and
+            the author of Fantastic Beasts and Where to Find Them.  
+            </p>
+        </div>
+
+        <div class="h">
+            <img src="photos\images (6).jpg" alt="Flamel">
+            <h1>Nicolas Flamel</h1>
+            <p>Nicolas Flamel was a French wizard and famed alchemist who was 
+            the only known maker of the Philosopher's Stone, a legendary substance with incredible powers. 
+
+
+            </p>
+        </div>
+
+        <div class="i">
+            <img src="photos\images (3).jpg" alt="Griff">
+            <h1> Godric Gryffindor</h1>
+            <p>Godric Gryffindor was an English wizard and one of the four founders of Hogwarts.
+                Gryffindor was said to have praised courage, determination, and strength of heart 
+                above all other qualities. 
+
+        </div>
+
+        <div class="j">
+            <img src="photos\images (4).jpg" alt="Snake">
+            <h1>Salazar Slytherin</h1>
+            <p>Salazar Slytherin was a pure-blood wizard, noted for his cunning and determination. 
+                He was regarded as one of the greatest wizards of the age, regarded for his abilities
+                as a Parselmouth and as a skilled Legilimens. 
+            </p>
+        </div>
+
+        <div class="k">
+            <img src="photos\images (1) (1).jpg" alt="Raven">
+            <h1>Rowena Ravenclaw</h1>
+            <p>Rowena Ravenclaw was a Scottish witch and one of the four 
+                founders of Hogwarts School of Witchcraft and Wizardry. She was noted 
+                for her intelligence and creativity.
+            </p>
+        </div>
+
+        <div class="l">
+            <img src="photos\images (2).jpg" alt="Badger">
+            <h1>Helga Hufflepuff</h1>
+            <p>Helga Hufflepuff was a Welsh witch and was one of the four 
+               founders of Hogwarts School of Witchcraft and Wizardry. 
+            </p>
+        </div>
+
+    </section>
diff --git a/Image Gallery/Animesh Pattnaik/photos/Grindelwald.jpg b/Image Gallery/Animesh Pattnaik/photos/Grindelwald.jpg
diff --git a/Image Gallery/Animesh Pattnaik/photos/HP1.jpg b/Image Gallery/Animesh Pattnaik/photos/HP1.jpg
diff --git a/Image Gallery/Animesh Pattnaik/photos/Newt1.png b/Image Gallery/Animesh Pattnaik/photos/Newt1.png
diff --git a/Image Gallery/Animesh Pattnaik/photos/Ootp076.jpg b/Image Gallery/Animesh Pattnaik/photos/Ootp076.jpg
diff --git a/Image Gallery/Animesh Pattnaik/photos/Voldie.jpg b/Image Gallery/Animesh Pattnaik/photos/Voldie.jpg
diff --git a/...llery/Animesh Pattnaik/photos/WW_Hero_Image-fotor-bg-remover-20230519175554.png b/...llery/Animesh Pattnaik/photos/WW_Hero_Image-fotor-bg-remover-20230519175554.png
diff --git a/Image Gallery/Animesh Pattnaik/photos/WW_Hero_Image.jpg b/Image Gallery/Animesh Pattnaik/photos/WW_Hero_Image.jpg
diff --git a/Image Gallery/Animesh Pattnaik/photos/images (1) (1).jpg b/Image Gallery/Animesh Pattnaik/photos/images (1) (1).jpg
diff --git a/Image Gallery/Animesh Pattnaik/photos/images (1).jpeg b/Image Gallery/Animesh Pattnaik/photos/images (1).jpeg
diff --git a/Image Gallery/Animesh Pattnaik/photos/images (2).jpg b/Image Gallery/Animesh Pattnaik/photos/images (2).jpg
diff --git a/Image Gallery/Animesh Pattnaik/photos/images (3).jpg b/Image Gallery/Animesh Pattnaik/photos/images (3).jpg
diff --git a/Image Gallery/Animesh Pattnaik/photos/images (4).jpg b/Image Gallery/Animesh Pattnaik/photos/images (4).jpg
diff --git a/Image Gallery/Animesh Pattnaik/photos/images (5).jpeg b/Image Gallery/Animesh Pattnaik/photos/images (5).jpeg
diff --git a/Image Gallery/Animesh Pattnaik/photos/images (6).jpg b/Image Gallery/Animesh Pattnaik/photos/images (6).jpg
diff --git a/Image Gallery/Animesh Pattnaik/style.css b/Image Gallery/Animesh Pattnaik/style.css
@@ -0,0 +1,165 @@
+*{
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+body{
+
+    margin: 5%;
+    background :#081b29; 
+}
+
+.head{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+
+}
+
+.head img{
+    width: 32%;
+    transition: transform .5s;
+    height: auto;
+    flex: 1;
+    margin-left: 8%;
+
+}
+
+.right{
+    visibility: hidden;
+}
+
+.head img:hover{
+    transform: scale(1.25);
+}
+
+.head h1{
+    color:rgb(15, 204, 204);
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+}
+
+.head h1:before{
+    content: '';
+    position: absolute;
+    left: 120%;
+    width: 120%;
+    height: 120%;
+    background: linear-gradient(90deg, transparent 0%,#081b29 5%, #081b29 100% );
+    animation: animate 8s linear infinite;
+}
+
+@keyframes animate{
+    0%
+    {
+        left: -20%;
+    }
+    50%
+    {
+        left: 120%;
+    }
+    100%
+    {
+        left: -20%;
+    }
+}
+
+.gallery h1{
+    color: #00abf0;
+    text-align: center;
+}
+
+.gallery{
+    margin-top: 4%;
+    display: grid;
+    grid-template-columns: repeat(3,1fr);
+    grid-gap: 70px;
+
+}
+
+.gallery img{
+    height: auto;
+    width: 60%;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+img{
+    transition: transform .5s;
+    width: 65%;
+    height: auto;
+}
+
+img:hover{
+    transform: scale(1.05);
+}
+
+.gallery p{
+    color: #b8c5d4;
+    font-size: 97%;
+    letter-spacing: 1px;
+    line-height: 97%;
+    text-align: center;
+    font-family: Arial, Helvetica, sans-serif;
+
+}
+
+.gallery h1{
+    color: #00abf0;
+    font-size: 100%;
+    margin-top: 7%;
+    letter-spacing: 1px;
+    line-height: 100%;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+@media screen and (max-width:950px) {
+    .head img{
+        width: 38%;
+    }
+}
+
+@media screen and (max-width:850px) {
+    .gallery{
+        grid-template-columns: repeat(2,1fr);
+    }
+
+    .head img{
+        width: 44%;
+    }
+
+}
+@media screen and (max-width:750px) {
+    .head img{
+        width: 50%;
+    }
+}
+
+@media screen and (max-width:650px) {
+    .head img{
+        width: 68%;
+    }
+}
+
+@media screen and (max-width:550px) {
+    .head img{
+        width: 78%;
+    }
+}
+
+@media screen and (max-width:500px) {
+    .gallery{
+        grid-template-columns: repeat(1,1fr);
+    }
+
+    .head img{
+        width: 90%;
+    }
+}
+
+@media screen and (max-width:450px) {
+    .head img{
+        width: 100%;
+    }
+}