Workshop Page and footer page

AarohanNITD · Apr 6, 2024 · 6527c3a · 6527c3a
1 parent d5621ca
commit 6527c3a
Show file tree

Hide file tree

Showing 11 changed files with 1,796 additions and 148 deletions.
diff --git a/.qdrant-initialized b/.qdrant-initialized
diff --git a/flow/static/css/navbar2.css b/flow/static/css/navbar2.css
@@ -114,9 +114,9 @@
     }
   }
   .content {
-    position: fixed;
+    /* position: fixed;
     left: 5.5%;
-    bottom: 4%;
+    bottom: 4%; */
     color: #f1f1f1;
     width: 100%;
     padding: 20px;

diff --git a/flow/static/firefly.css b/flow/static/firefly.css
@@ -26,14 +26,14 @@
     transform-origin: -10vw;
   }
   .firefly::before {
-    background: #ea7957 ;
+    background: #9BCCEF ;
     opacity: 0.5;
     animation: drift ease alternate infinite;
   }
   .firefly::after {
-    background: #ea7957;
+    background: #9BCCEF;
     opacity: 0;
-    box-shadow: 0 0 0vw 0vw #d63629;
+    box-shadow: 0 0 0vw 0vw #2997d6;
     animation: drift ease alternate infinite, flash ease infinite;
   }
   .firefly:nth-child(1) {

diff --git a/flow/static/navbarAndFooter/footer.css b/flow/static/navbarAndFooter/footer.css
@@ -1,22 +1,32 @@
-.footer {
+/* .footer {
   position: relative;
-  background: #e97957;
+  background: #FA851B;
   min-height: 100px;
   padding: 5px 10px;
   margin: 0;
   top: 0;
   display: flex;
   justify-content: center;
   align-items: center;
-  flex-direction: column;
+  flex-direction: row;
   margin-top: 10rem;
   
 }  
 @media screen and (max-width: 400px){
   .footer {
     flex-direction: column;
   }
+
+  .footer .logo{
+    display: none;
+  }
 }
+
+.footer .logo{
+  width: 100px;
+  height: 100px;
+}
+
 .social-icon {
   position: relative;
   display: flex;
@@ -45,58 +55,277 @@
   font-size: 1.5rem;
   font-weight: 300;
   font-family: 'Raleway', sans-serif;
-}  
-.wave {
+} 
+
+.upper-vector#vector1 {
   position: absolute;
   top: -100px;
   left: 0;
-  width: 100%;
+  color: #FA851B;
+  background-size: 1000px 200px;
+  animation: roll 5s ease-in-out alternate infinite;
+  z-index: 1;
+}
+
+.upper-vector#vector2 {
+  position: absolute;
+  top: -100px;
+  right: 0;
+  color: #FA851B;
+  background-size: 1000px 200px;
+  animation: roll2 5s ease-in-out alternate infinite;
+  z-index: 1;
+}
+
+.upper-vector img{
+  width: 100px;
   height: 100px;
-  background: url("./images/wave1.png");
-  background-size: 1000px 100px;
-}  
-.wave#wave1 {
-  z-index: 10;
-  opacity: 1;
-  bottom: 0;
-  animation: animateWaves 4s linear infinite;
-}  
-.wave#wave2 {
-  z-index: 9;
-  opacity: 0.5;
-  bottom: 10px;
-  animation: animate 4s linear infinite !important;
-}  
-.wave#wave3 {
-  z-index: 10;
-  opacity: 0.2;
-  bottom: 15px;
-  animation: animateWaves 3s linear infinite;
+}
+
+@keyframes roll {
+  0% {transform: translateX(0) rotate(0);}
+  100% {transform: translateX(45vw) rotate(2turn);}
+}
+
+@keyframes roll2 {
+  0% {transform: translateX(0) rotate(0);}
+  100% {transform: translateX(-45vw) rotate(-2turn);}
+}
+
+@media screen and (max-width: 400px) {
+  .upper-vector img {
+    width: 50px;
+    height: 50px;
+  }
+
+  .upper-vector#vector1 {
+    position: absolute;
+    top: -50px;
+    left: 0;
+    color: #FA851B;
+    animation: roll 4s ease-in-out alternate infinite;
+    z-index: 1;
+  }
+  
+  .upper-vector#vector2 {
+    position: absolute;
+    top: -50px;
+    right: 0;
+    color: #FA851B;
+    animation: roll2 4s ease-in-out alternate infinite;
+    z-index: 1;
+  }
+
+  @keyframes roll {
+    0% {transform: translateX(0) rotate(0);}
+    100% {transform: translateX(35vw) rotate(2turn);}
+  }
+  
+  @keyframes roll2 {
+    0% {transform: translateX(0) rotate(0);}
+    100% {transform: translateX(-35vw) rotate(-2turn);}
+  }
+} */
+
+.social-icon {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  margin: 1rem;
 }  
-.wave#wave4 {
-  z-index: 9;
-  opacity: 0.7;
-  bottom: 20px;
-  animation: animate 3s linear infinite;
+.social-icon__item,
+.menu__item {
+  list-style: none;
 }  
-@keyframes animateWaves {
+.social-icon__link {
+  font-size: 2rem;
+  color: #fff;
+  margin: 0 10px;
+  display: inline-block;
+  transition: 0.5s;
+}
+.social-icon__link:hover {
+  transform: translateY(-10px);
+}
+
+/* .container{
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+} */
+
+
+.footer {
+  z-index: 1;
+  --footer-background:hsl(24, 86%, 53%);
+  display: grid;
+  position: relative;
+  max-width: 100%;
+  min-height: 200px;
+  /* overflow-x:hidden; */
+}
+.footer .bubbles {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1rem;
+  background: var(--footer-background);
+  filter: url("#blob");
+}
+.footer .bubbles .bubble {
+  position: absolute;
+  left: var(--position, 50%);
+  background: var(--footer-background);
+  border-radius: 100%;
+  -webkit-animation: bubble-size var(--time, 4s) ease-in infinite var(--delay, 0s), bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s);
+          animation: bubble-size var(--time, 4s) ease-in infinite var(--delay, 0s), bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s);
+  transform: translate(-50%, 100%);
+}
+.footer .content {
+  padding: 4rem;
+  background: var(--footer-background);
+  z-index: 2;
+}
+.footer .content .container {
+  /* max-width: 768px; */
+  display: flex;
+  justify-content: center;
+  margin: 0 auto;
+  /* display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 1.5rem; */
+  color: #fff;
+}
+
+.content h2 {
+  margin-bottom: .25rem;
+  font-size: 2.25rem;
+}
+
+.content span {
+  font-size: .875rem;
+}
+
+.footer__links  {
+  display: flex;
+  flex-direction: row;
+  column-gap: 2rem;
+  transition: all 150ms ease-out;
+  justify-content: center;
+}
+
+.footer__links .footer__link {
+  transition: all 150ms ease-out;
+  display: inline-block;
+}
+
+.footer__link:hover:after {
+    width: 100%;
+}
+
+.footer__link:after {
+    content: '';
+    display: block;
+    margin: auto;
+    height: 2px;
+    width: 0px;
+    background-color: #fff;
+    transition: width .25s ease-out;
+}
+.footer__socials {
+  justify-self: flex-end;
+}
+
+.footer__social {
+  font-size: 1.25rem;
+  margin-right: 1.5rem;
+}
+.footer__social:hover {
+  opacity: 0.8;
+}
+
+.footer__copy {
+  text-align: center;
+  background:rgb(91, 73, 255);
+  font-size: .875rem;
+  text-align: center;
+  color: #dcdcdc;
+  padding: 3rem 0 2rem;
+}
+@-webkit-keyframes bubble-size {
+  0%, 75% {
+    width: var(--size, 4rem);
+    height: var(--size, 4rem);
+  }
+  100% {
+    width: 0rem;
+    height: 0rem;
+  }
+}
+
+.bubbles{
+  position: absolute;
+}
+
+@keyframes bubble-size {
+  0%, 75% {
+    width: var(--size, 4rem);
+    height: var(--size, 4rem);
+  }
+  100% {
+    width: 0rem;
+    height: 0rem;
+  }
+}
+@-webkit-keyframes bubble-move {
   0% {
-    background-position-x: 1000px;
+    bottom: -4rem;
   }
   100% {
-    background-positon-x: 0px;
+    bottom: var(--distance, 10rem);
   }
-}  
-@keyframes animate {
+}
+@keyframes bubble-move {
   0% {
-    background-position-x: -1000px;
+    bottom: -4rem;
   }
   100% {
-    background-positon-x: 0px;
+    bottom: var(--distance, 10rem);
   }
 }
-@media screen and (max-width: 400px){
-  .footer p{
-    font-size: 1rem;
+
+@media screen and (max-width: 767px){
+  .footer .content {
+    padding: 0 1.5rem;
+  }
+  .footer .content .container {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .content h2 {
+    font-size: 1.5rem;
+  }
+
+  .content span {
+    font-size: .813rem;
+  }
+
+  .footer__links  {
+    flex-direction: column;
+    row-gap: 1.5rem;
+  }
+
+  .footer__socials {
+    justify-self: flex-start;
+  }
+}
+
+@media screen and (max-width: 567px){
+  .footer .content .container {
+    grid-template-columns: repeat(1, 1fr);
+    row-gap: 3.5rem;
   }
 }
diff --git a/flow/static/navbarAndFooter/images/a.svg b/flow/static/navbarAndFooter/images/a.svg