Merge pull request #12 from RishavOsaurus/sfd-2024

Hero Section Added Closes #5
noskofficial · Sep 8, 2024 · 0dbb2ba · 0dbb2ba
2 parents 6b6dfac + 20d76fd
commit 0dbb2ba
Show file tree

Hide file tree

Showing 8 changed files with 169 additions and 13 deletions.
diff --git a/assets/blob-1.svg b/assets/blob-1.svg
diff --git a/assets/blob-2.svg b/assets/blob-2.svg
diff --git a/assets/blob-3.svg b/assets/blob-3.svg
diff --git a/assets/intro.svg b/assets/intro.svg
diff --git a/assets/nosk_logo.svg b/assets/nosk_logo.svg
diff --git a/assets/sfd_horizontal.svg b/assets/sfd_horizontal.svg
diff --git a/css/input.css b/css/input.css
@@ -4,17 +4,22 @@
 
 @layer components {
   .bg-grid {
-    background-color: #F6F6FF;
-    background-image:
-      linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px),
+    background-color: #f6f6ff;
+    background-image: linear-gradient(
+        90deg,
+        rgba(0, 0, 0, 0.1) 1px,
+        transparent 1px
+      ),
       linear-gradient(180deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
-  
+
     background-size: 50px 50px;
   }
 
-
-
-
+  .sec-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 45%));
+    grid-template-rows: repeat(1, (0, 55%));
+  }
 }
 
 @font-face {

diff --git a/html/index.html b/html/index.html
@@ -1,13 +1,68 @@
 <!doctype html>
 <html lang="en">
-  <head class="m-0 p-0 box-border">
+  <head class="m-0 box-border p-0">
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="./../css/output.css" />
     <title>Document</title>
   </head>
-  <body class="bg-grid font-bahnschrift grid-5-cols main-body">
-    <script src="../js/script.js"></script>
-    </body>
-    </html>
-
+  <body class="bg-grid font-bahnschrift" id="body">
+
+    <section
+      id="hero"
+      class="w-dvwpx-[10%] flex h-[calc(100dvh-7.5rem)] items-center justify-center p-3 pt-0"
+    >
+      <div id="holder" class="grid grid-cols-2 grid-rows-1">
+        <div>
+          <div class="mb-2 text-[44px] font-bold">
+            <p>
+              <span class="text-black">Celebrate </span
+              ><span class="text-[#FFC700]"> Software<br />Freedom Day</span>
+              <span class="text-[#E4554E]">2024</span> with
+              <span class="text-[#208820]"><br />Nepal Open Source Klub</span>
+            </p>
+          </div>
+          <div class="my-2">
+            <p class="text-left text-xl font-semibold text-[#E4554E]">
+              &nbsp;"A celebration of innovation and open collaboration!"
+            </p>
+          </div>
+          <div class="align my-5 flex items-center text-xl font-bold">
+            <button
+              class="mr-2 h-[3.75rem] w-[13.75rem] rounded-[1.71rem] bg-[#FFDD50] text-center hover:border-2 hover:border-solid hover:border-[#FFDD50] hover:bg-transparent"
+            >
+              <a
+                href="#"
+                target="_blank"
+                class="text-xl font-bold leading-4 text-black"
+                >Learn More</a
+              >
+            </button>
+            <button
+              class="group h-[3.75rem] w-[13.75rem] rounded-[1.71rem] bg-[#208820] text-center hover:border-2 hover:border-solid hover:border-[#208820] hover:bg-transparent hover:text-black"
+            >
+              <a
+                href="#"
+                target="_blank"
+                class="text-xl font-bold leading-4 text-white group-hover:text-black"
+                >Register Here</a
+              >
+            </button>
+          </div>
+          <div class="mt-2 flex flex-row">
+            <img src="../assets/sfd_horizontal.svg" alt="SFD Horizontal" />
+            <img src="../assets/nosk_logo.svg" alt="Nosk Logo" />
+          </div>
+        </div>
+        <div class="">
+          <img
+            src="../assets/intro.svg"
+            alt="Candle Ceremony NOSK"
+            class="z-10"
+          />
+        </div>
+      </div>
+    </section>
+    <script src="../js/navbar.js"></script>
+  </body>
+</html>