Merge branch 'main' into princegupta3

DhanushNehru · Oct 20, 2023 · df05bc4 · df05bc4
2 parents ee16d73 + d369180
commit df05bc4
Show file tree

Hide file tree

Showing 3 changed files with 159 additions and 0 deletions.
diff --git a/Superstar Gallery/index.html b/Superstar Gallery/index.html
@@ -0,0 +1,55 @@
+<!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">
+    <title>Image Flex Gallery</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="panels">
+        <div class="panel panel1"> 
+            <p>SUNDAR PICHAI</p>
+            <p>GOOGLE</p>
+            <p>CEO</p>
+        </div>
+
+        <div class="panel panel2">
+            <p>SATYA NADELA</p>
+            <p>MICROSOFT</p>
+            <p>CEO</p>
+        </div>
+
+        <div class="panel panel3">
+            <p>ELON MUSK</p>
+            <p>TESLA</p>          
+            <p>CEO</p>
+        </div>
+
+        <div class="panel panel4">
+            <p>BILL GATES</p>
+            <p>MICROSOFT</p>
+            <p>FOUNDER</p>
+        </div>
+
+        <div class="panel panel5">
+            <p>JEFF BEZOS</p>
+            <p>AMAZON</p>
+            <p>FOUNDER</p>
+        </div>
+
+        <div class="panel panel6">
+            <p>MARK ZUCKERBURG</p>
+            <p>META</p>
+            <p>CEO</p>
+        </div>
+
+    </div>
+
+<script src="script.js"></script>
+
+</body>
+
+</html>
diff --git a/Superstar Gallery/script.js b/Superstar Gallery/script.js
@@ -0,0 +1,14 @@
+const panels = document.querySelectorAll('.panel');
+
+function toggleOpen(){
+    this.classList.toggle('open');
+}
+
+function toggleActive(e){
+    if(e.propertyName.includes('flex')){     //the proerty should contain either flex or flex-grow
+        this.classList.toggle('open-active');
+    }
+}
+
+panels.forEach(panel => panel.addEventListener('click', toggleOpen));   //we are listening to a click on each panel   //we do not use open() becuase we want it to find the function and run it
+panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
diff --git a/Superstar Gallery/style.css b/Superstar Gallery/style.css
@@ -0,0 +1,90 @@
+html{
+    box-sizing: border-box;
+    background: black;
+    font-family:'helvetica neue';
+    font-size:10px;
+    font-weight: 200;
+}
+
+body{
+    margin: 0;
+}
+
+*, *:before, *:after{
+    box-sizing: inherit;
+}
+
+.panels{
+    min-height:100vh;
+    overflow:hidden;
+    display: flex;  /*flex makes the panel stand side by side*/
+}
+
+.panel{
+    background: #6B0F9C;
+    box-shadow: insert 0 0 0 5px rgba(255,255,255,0,1);
+    color:white;
+    text-align: center;
+    align-items: center;
+    transition:
+    font-size 0.7s cubic-bezier(0.61,-0.19,0.7,-0.11),
+    flex 0.7s cubic-bezier(0.61,-0.19,0.7,-0.11),
+    background 0.2s;
+    font-size: 20px;
+    background-size: cover;
+    background-position: center;
+    flex: 1; /*The flex boxes panels divide the space among them equally*/
+    border: 1px solid black;
+    justify-content: center;
+    align-items: center;
+    display: flex; /*panel is a flex item of panels and we also make it become flex container -> nested flex*/
+    flex-direction: column; /*bring text to center middle*/
+}
+
+.panel1{background-image:url(https://wallpapercave.com/wp/wp4056761.jpg);}
+
+.panel2{background-image:url(https://wallpapercave.com/wp/wp6760162.jpg);}
+
+.panel3{background-image:url(https://wallpapercave.com/wp/wp2048442.jpg);}
+
+.panel4{background-image:url(https://wallpapercave.com/wp/HFsWtAz.jpg);}
+
+.panel5{background-image:url(https://wallpapercave.com/wp/wp4025618.jpg);}
+
+.panel6{background-image:url(https://wallpapercave.com/wp/wp2126272.jpg);}
+
+.panel > * {     /*This means the text in each panel -> Flex items*/
+    margin:0;
+    width:100%;
+    transition:transform 0.5s;
+    /* border: 1px solid red; */
+    flex: 1 0 auto; /*text in three parts one top mid and bottom*/
+    display: felx;  /*make these text flex itself*/
+    align-items: center;
+}
+
+.panel > *:first-child { transform: translateY(-100%);} /*the up text*/ /*We will need this to switch between .panel and .panel.openactive class for text to slide up and down*/
+.panel.open-active > *:first-child { transform: translateY(0);}
+.panel > *:last-child { transform: translateY(100%);}       /*the down text*/
+.panel.open-active > *:last-child { transform: translateY(0);}
+
+.panel p{
+    text-transform: uppercase;
+    text-shadow: 0 0 4px rgba(0,0,0,0.72), 0 0 14px rgba(0,0,0,0.45);
+    font-size: 2em;
+}
+
+.panel p:nth-child(2){
+    font-size: 4rem;
+}
+
+.panel.open{
+    flex: 5;    /*when panel opens it will take 5 times size*/
+    font-size: 40px;
+}
+
+@media only screen and (max-width: 600px) {
+    .panel p {
+      font-size: 1em;
+    }
+  }