From 100dbb1551a2a464fc5a245c5693e1f78bd4cbfc Mon Sep 17 00:00:00 2001
From: Raksha A <raksha@Rakshas-MacBook-Pro.local>
Date: Fri, 28 Oct 2022 14:25:22 +0530
Subject: [PATCH] Day 5 assignment setup

---
 Day5_Flex_Panel/index-START.html | 132 +++++++++++++++++++++++++++++++
 Day5_Flex_Panel/index.html       | 132 +++++++++++++++++++++++++++++++
 2 files changed, 264 insertions(+)
 create mode 100644 Day5_Flex_Panel/index-START.html
 create mode 100644 Day5_Flex_Panel/index.html
diff --git a/Day5_Flex_Panel/index-START.html b/Day5_Flex_Panel/index-START.html
new file mode 100644
index 0000000..6d627bf
--- /dev/null
+++ b/Day5_Flex_Panel/index-START.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en">
+
+    <head>
+        <meta charset="UTF-8">
+        <title>Flex Panels 💪</title>
+        <link href='https://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
+    </head>
+
+    <body>
+        <style>
+            html {
+                box-sizing: border-box;
+                background: #ffc600;
+                font-family: 'helvetica neue';
+                font-size: 20px;
+                font-weight: 200;
+            }
+
+            body {
+                margin: 0;
+            }
+
+            *,
+            *:before,
+            *:after {
+                box-sizing: inherit;
+            }
+
+            .panels {
+                min-height: 100vh;
+                overflow: hidden;
+            }
+
+            .panel {
+                background: #6B0F9C;
+                box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.1);
+                color: white;
+                text-align: center;
+                align-items: center;
+                /* Safari transitionend event.propertyName === flex */
+                /* Chrome + FF transitionend event.propertyName === flex-grow */
+                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;
+            }
+
+            .panel1 {
+                background-image: url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500);
+            }
+
+            .panel2 {
+                background-image: url(https://source.unsplash.com/rFKUFzjPYiQ/1500x1500);
+            }
+
+            .panel3 {
+                background-image: url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d);
+            }
+
+            .panel4 {
+                background-image: url(https://source.unsplash.com/ITjiVXcwVng/1500x1500);
+            }
+
+            .panel5 {
+                background-image: url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500);
+            }
+
+            /* Flex Children */
+            .panel>* {
+                margin: 0;
+                width: 100%;
+                transition: transform 0.5s;
+            }
+
+            .panel p {
+                text-transform: uppercase;
+                font-family: 'Amatic SC', cursive;
+                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: 4em;
+            }
+
+            .panel.open {
+                font-size: 40px;
+            }
+        </style>
+
+
+        <div class="panels">
+            <div class="panel panel1">
+                <p>Hey</p>
+                <p>Let's</p>
+                <p>Dance</p>
+            </div>
+            <div class="panel panel2">
+                <p>Give</p>
+                <p>Take</p>
+                <p>Receive</p>
+            </div>
+            <div class="panel panel3">
+                <p>Experience</p>
+                <p>It</p>
+                <p>Today</p>
+            </div>
+            <div class="panel panel4">
+                <p>Give</p>
+                <p>All</p>
+                <p>You can</p>
+            </div>
+            <div class="panel panel5">
+                <p>Life</p>
+                <p>In</p>
+                <p>Motion</p>
+            </div>
+        </div>
+
+        <script>
+
+        </script>
+
+
+
+    </body>
+
+</html>
\ No newline at end of file
diff --git a/Day5_Flex_Panel/index.html b/Day5_Flex_Panel/index.html
new file mode 100644
index 0000000..6d627bf
--- /dev/null
+++ b/Day5_Flex_Panel/index.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en">
+
+    <head>
+        <meta charset="UTF-8">
+        <title>Flex Panels 💪</title>
+        <link href='https://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
+    </head>
+
+    <body>
+        <style>
+            html {
+                box-sizing: border-box;
+                background: #ffc600;
+                font-family: 'helvetica neue';
+                font-size: 20px;
+                font-weight: 200;
+            }
+
+            body {
+                margin: 0;
+            }
+
+            *,
+            *:before,
+            *:after {
+                box-sizing: inherit;
+            }
+
+            .panels {
+                min-height: 100vh;
+                overflow: hidden;
+            }
+
+            .panel {
+                background: #6B0F9C;
+                box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.1);
+                color: white;
+                text-align: center;
+                align-items: center;
+                /* Safari transitionend event.propertyName === flex */
+                /* Chrome + FF transitionend event.propertyName === flex-grow */
+                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;
+            }
+
+            .panel1 {
+                background-image: url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500);
+            }
+
+            .panel2 {
+                background-image: url(https://source.unsplash.com/rFKUFzjPYiQ/1500x1500);
+            }
+
+            .panel3 {
+                background-image: url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d);
+            }
+
+            .panel4 {
+                background-image: url(https://source.unsplash.com/ITjiVXcwVng/1500x1500);
+            }
+
+            .panel5 {
+                background-image: url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500);
+            }
+
+            /* Flex Children */
+            .panel>* {
+                margin: 0;
+                width: 100%;
+                transition: transform 0.5s;
+            }
+
+            .panel p {
+                text-transform: uppercase;
+                font-family: 'Amatic SC', cursive;
+                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: 4em;
+            }
+
+            .panel.open {
+                font-size: 40px;
+            }
+        </style>
+
+
+        <div class="panels">
+            <div class="panel panel1">
+                <p>Hey</p>
+                <p>Let's</p>
+                <p>Dance</p>
+            </div>
+            <div class="panel panel2">
+                <p>Give</p>
+                <p>Take</p>
+                <p>Receive</p>
+            </div>
+            <div class="panel panel3">
+                <p>Experience</p>
+                <p>It</p>
+                <p>Today</p>
+            </div>
+            <div class="panel panel4">
+                <p>Give</p>
+                <p>All</p>
+                <p>You can</p>
+            </div>
+            <div class="panel panel5">
+                <p>Life</p>
+                <p>In</p>
+                <p>Motion</p>
+            </div>
+        </div>
+
+        <script>
+
+        </script>
+
+
+
+    </body>
+
+</html>
\ No newline at end of file
