Added codes section to index.html

pretty easy compared to hero
1337faye · Apr 30, 2024 · 1556087 · 1556087
1 parent ec5f6b9
commit 1556087
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -61,6 +61,52 @@ <h1>zenridev</h1>
         <a href="#"><i class="ri-patreon-fill"></i></a>
     </div> -->
 
+    <section class="indexCodes">
+        <h1 class="indexCodesHeading">Active Codes</h1>
+        <div class="indexCodesGrid">
+            <div class="indexCodesGridBox">
+                <h3>STARRAILGIFT</h3>
+                <p>50 Stellar Jades + EXP materials</p><br>
+                <p class="indexCodesReleaseDate">Released on 26.04.2023</p>
+            </div>
+            <div class="indexCodesGridBox">
+                <h3>ST3SHPNLNTN3</h3>
+                <p>50 Stellar Jades + 10k Credits</p><br>
+                <p class="indexCodesReleaseDate">Released on 27.03.2024</p>
+            </div>
+            <div class="indexCodesGridBox">
+                <h3>BTKBH6P47B77</h3>
+                <p>50 Stellar Jades + 10k Credits</p><br>
+                <p class="indexCodesReleaseDate">Released on 17.04.2024</p>
+            </div>
+            <div class="indexCodesGridBox">
+                <h3>LUCKYGAME</h3>
+                <p>Materials</p><br>
+                <p class="indexCodesReleaseDate">Released on 17.04.2024</p>
+            </div>
+            <div class="indexCodesGridBox">
+                <h3>ALLORNOTHING</h3>
+                <p>Materials</p><br>
+                <p class="indexCodesReleaseDate">Released on 17.04.2024</p>
+            </div>
+            <div class="indexCodesGridBox">
+                <h3>CHARMEDONE</h3>
+                <p>Materials</p><br>
+                <p class="indexCodesReleaseDate">Released on 17.04.2024</p>
+            </div>
+            <div class="indexCodesGridBox">
+                <h3>QBJTY77MN9T7</h3>
+                <p>50 Stellar Jades + 10k Credits</p><br>
+                <p class="indexCodesReleaseDate">Released on 19.04.2024</p>
+            </div>
+            <div class="indexCodesGridBox">
+                <h3>5AJTZPPMN8VB</h3>
+                <p>50 Stellar Jades + 10k Credits</p><br>
+                <p class="indexCodesReleaseDate">Released on 19.04.2024</p>
+            </div>
+        </div>
+    </section>
+
     <!-- scroll reveal effect -->
     <script src="https://unpkg.com/scrollreveal"></script>
 

diff --git a/styles/style.css b/styles/style.css
@@ -119,15 +119,17 @@ a:active {
   height: 100%;
   width: 100%;
   min-height: 60vh;
-
+  /* background: linear-gradient(
+    245.59deg,
+    #29315c 0%,
+    #182449 28.53%,
+    #0a1336 75.52%
+  ); */
   position: relative;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   align-items: center;
   gap: 2rem;
-}
-
-section {
   padding: 0 19%;
 }
 
@@ -254,4 +256,43 @@ section {
     width: 100%;
     height: auto;
   }
+  .indexHeroText a.indexSecondButton {
+    margin-left: 0;
+    margin-top: 20px;
+  }
+}
+
+.indexCodes {
+  padding: 2% 10%;
+  background-color: #182449;
+}
+
+.indexCodesHeading {
+  padding-bottom: 15px;
+  color: #e6f7ff;
+  font-size: 2rem;
+}
+
+.indexCodes .indexCodesGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
+  gap: 15px;
+}
+
+.indexCodesGrid .indexCodesGridBox {
+  border-radius: 5px;
+  background: #29315c;
+  text-align: center;
+  padding: 30px 20px;
+}
+
+.indexCodesGridBox h3 {
+  color: #a9d9ce;
+  font-size: 22px;
+  padding: 10px 0;
+}
+
+.indexCodesReleaseDate {
+  color: lightslategrey;
+  font-style: italic;
 }