Add the Prizes section

UR-dandyhacks · Oct 19, 2023 · c0e1b48 · c0e1b48
1 parent 490d896
commit c0e1b48
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -85,7 +85,7 @@ <h2 class="text-2xl lg:text-5xl">
       </div>
       <img class="hidden hover-scale lg:block lg:relative lg:b-[150px]" src="img/sticker1.png" />
     </div>
-    <div class="relative flex flex-row items-center justify-center text-xl bg-violet">
+    <div class="relative flex items-center justify-center text-xl bg-violet">
       <div class="flex flex-col grow-0 items-center w-full gap-7 lg:gap-11 px-9 lg:px-0 lg:w-[999px] box-border text-base lg:text-xl">
         <h2 class="text-5xl">
           <div id="tracks" class="absolute -top-20"></div>
@@ -125,9 +125,28 @@ <h3 class="mb-4 text-2xl text-center font-display">Emerging Tech</h3>
         </div>
       </div>
     </div>
-    <div id="faq" class="relative px-5 bg-deep-purple">
+    <div id="particles-js" class="relative px-5 bg-deep-purple">
+      <div class="flex flex-col items-center justify-center pt-16 gap-10 bg-deep-purple">
+        <h2 class="text-5xl">
+          <div id="prizes" class="absolute -top-20"></div>
+          Prizes
+        </h2>
+        <div class="flex flex-wrap justify-center pointer-events-none max-w-7xl gap-6">
+          <div class="hover-scale pointer-events-auto flex items-center h-28 p-8 bg-no-repeat bg-contain w-72 md:w-80 lg:w-96 grow-0 rounded-2xl bg-prize-acer-nitro-monitor bg-violet bg-[bottom_-16px_right_-16px]"><h3>Acer Nitro KG241Y Sbiip 23.8" Monitor</h3></div>
+          <div class="hover-scale pointer-events-auto flex items-center h-28 p-8 bg-no-repeat bg-contain w-72 md:w-80 lg:w-96 grow-0 rounded-2xl bg-prize-razer-blackwidow bg-violet bg-[bottom_-16px_right_-16px]"><h3>Razer BlackWidow V4 with Yellow Switches</h3></div>
+          <div class="hover-scale pointer-events-auto flex items-center h-28 p-8 bg-no-repeat bg-contain w-72 md:w-80 lg:w-96 grow-0 rounded-2xl bg-prize-wireless-photo-printer bg-violet bg-[bottom_-16px_right_-16px]"><h3>Wireless Photo Printer</h3></div>
+          <div class="hover-scale pointer-events-auto flex items-center h-28 p-8 bg-no-repeat bg-contain w-72 md:w-80 lg:w-96 grow-0 rounded-2xl bg-prize-jbl-flip-5 bg-violet bg-[bottom_-16px_right_-16px]"><h3>JBL Flip 5 Speaker</h3></div>
+          <div class="hover-scale pointer-events-auto flex items-center h-28 p-8 bg-no-repeat bg-contain w-72 md:w-80 lg:w-96 grow-0 rounded-2xl bg-prize-desk-lamp bg-violet bg-[bottom_-8px_right_0px]"><h3>Desk Lamp</h3></div>
+          <div class="hover-scale pointer-events-auto flex items-center h-28 p-8 bg-no-repeat bg-contain w-72 md:w-80 lg:w-96 grow-0 rounded-2xl bg-prize-echo-dot bg-violet bg-[bottom_-12px_right_-16px]"><h3>Echo dot 5th gen</h3></div>
+          <div class="hover-scale pointer-events-auto flex items-center h-28 p-8 bg-no-repeat bg-contain w-72 md:w-80 lg:w-96 grow-0 rounded-2xl bg-prize-airtag bg-violet bg-[bottom_-16px_right_-16px]"><h3>AirTag</h3></div>
+          <div class="hover-scale pointer-events-auto flex items-center h-28 p-8 bg-no-repeat bg-contain w-72 md:w-80 lg:w-96 grow-0 rounded-2xl bg-prize-amazon-fire-stick bg-violet bg-[bottom_-16px_right_0px]"><h3>Amazon Fire Stick</h3></div>
+        </div>
+      </div>
       <div class="flex flex-col items-center py-24 box-border gap-12 lg:gap-20">
-        <h2 class="text-5xl">FAQS</h2>
+        <h2 class="text-5xl">
+          <div id="faq" class="absolute -top-20"></div>
+          FAQS
+        </h2>
         <div class="flex flex-col px-10 py-4 pointer-events-none lg:py-0 gap-5 lg:px-0">
           <details>
             <summary>

diff --git a/main.css b/main.css
@@ -45,7 +45,7 @@
     left: 0;
   }
 
-  #faq > div > * {
+  #particles-js > div > * {
     position: relative;
     z-index: 10;
   }

diff --git a/script.js b/script.js
@@ -41,5 +41,5 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // particles.js
 
-    particlesJS.load('faq', 'assets/particlesjs-config.json');
+    particlesJS.load('particles-js', 'assets/particlesjs-config.json');
 });
diff --git a/styles.css b/styles.css
@@ -844,6 +844,10 @@ h1, h2, h3, h4, h5, h6 {
   display: none;
 }
 
+.h-28 {
+  height: 7rem;
+}
+
 .h-8 {
   height: 2rem;
 }
@@ -888,6 +892,10 @@ h1, h2, h3, h4, h5, h6 {
   width: 100vw;
 }
 
+.max-w-7xl {
+  max-width: 80rem;
+}
+
 .flex-none {
   flex: none;
 }
@@ -1431,6 +1439,10 @@ h1, h2, h3, h4, h5, h6 {
   justify-items: stretch;
 }
 
+.gap-10 {
+  gap: 2.5rem;
+}
+
 .gap-12 {
   gap: 3rem;
 }
@@ -1775,6 +1787,10 @@ h1, h2, h3, h4, h5, h6 {
   border-radius: 0.25rem;
 }
 
+.rounded-2xl {
+  border-radius: 1rem;
+}
+
 .rounded-3xl {
   border-radius: 1.5rem;
 }
@@ -1953,6 +1969,38 @@ h1, h2, h3, h4, h5, h6 {
   background-image: url('img/hero-bg/layer4.svg');
 }
 
+.bg-prize-acer-nitro-monitor {
+  background-image: url('img/prizes/acer_nitro_monitor.png');
+}
+
+.bg-prize-airtag {
+  background-image: url('img/prizes/airtag.png');
+}
+
+.bg-prize-amazon-fire-stick {
+  background-image: url('img/prizes/amazon_fire_stick.png');
+}
+
+.bg-prize-desk-lamp {
+  background-image: url('img/prizes/desk_lamp.png');
+}
+
+.bg-prize-echo-dot {
+  background-image: url('img/prizes/echo_dot.png');
+}
+
+.bg-prize-jbl-flip-5 {
+  background-image: url('img/prizes/jbl_flip_5.png');
+}
+
+.bg-prize-razer-blackwidow {
+  background-image: url('img/prizes/razer_blackwidow.png');
+}
+
+.bg-prize-wireless-photo-printer {
+  background-image: url('img/prizes/wireless_photo_printer.png');
+}
+
 .decoration-slice {
   -webkit-box-decoration-break: slice;
           box-decoration-break: slice;
@@ -1973,6 +2021,10 @@ h1, h2, h3, h4, h5, h6 {
           box-decoration-break: clone;
 }
 
+.bg-contain {
+  background-size: contain;
+}
+
 .bg-cover {
   background-size: cover;
 }
@@ -2006,6 +2058,22 @@ h1, h2, h3, h4, h5, h6 {
           background-clip: text;
 }
 
+.bg-\[bottom_-12px_right_-16px\] {
+  background-position: bottom -12px right -16px;
+}
+
+.bg-\[bottom_-16px_right_-16px\] {
+  background-position: bottom -16px right -16px;
+}
+
+.bg-\[bottom_-16px_right_0px\] {
+  background-position: bottom -16px right 0px;
+}
+
+.bg-\[bottom_-8px_right_0px\] {
+  background-position: bottom -8px right 0px;
+}
+
 .bg-center-bottom {
   background-position: center bottom;
 }
@@ -2079,11 +2147,20 @@ h1, h2, h3, h4, h5, h6 {
   padding: 1.5rem;
 }
 
+.p-8 {
+  padding: 2rem;
+}
+
 .px-10 {
   padding-left: 2.5rem;
   padding-right: 2.5rem;
 }
 
+.px-16 {
+  padding-left: 4rem;
+  padding-right: 4rem;
+}
+
 .px-5 {
   padding-left: 1.25rem;
   padding-right: 1.25rem;
@@ -2118,6 +2195,10 @@ h1, h2, h3, h4, h5, h6 {
   padding-bottom: 1.75rem;
 }
 
+.pt-16 {
+  padding-top: 4rem;
+}
+
 .pt-32 {
   padding-top: 8rem;
 }
@@ -2710,7 +2791,7 @@ canvas {
   left: 0;
 }
 
-#faq > div > * {
+#particles-js > div > * {
   position: relative;
   z-index: 10;
 }
@@ -2879,6 +2960,10 @@ canvas {
     height: fit-content;
   }
 
+  .md\:w-80 {
+    width: 20rem;
+  }
+
   .md\:w-fit {
     width: -moz-fit-content;
     width: fit-content;
@@ -2976,6 +3061,10 @@ canvas {
     display: flex;
   }
 
+  .lg\:w-96 {
+    width: 24rem;
+  }
+
   .lg\:w-\[999px\] {
     width: 999px;
   }