Add more

KukangDeveloper · Dec 9, 2023 · 18e8fce · 18e8fce
1 parent ff1ec58
commit 18e8fce
Show file tree

Hide file tree

Showing 12 changed files with 93 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="resources/style.css" />
   </head>
   <body>
-    <nav class="navbar navbar-expand-lg" style="background-color: #212226">
+    <nav class="navbar fixed-top navbar-expand-lg" style="background-color: #212226">
       <div class="container-fluid">
         <a class="navbar-brand" href="#">
           <img src="resources/images/logo.png" alt="Logo" width="64" height="64" />
@@ -36,14 +36,14 @@
       </div>
     </nav>
 
-    <div class="bg-hero">
+    <div class="bg-hero jarak">
       <div class="hero">
         <img src="resources/images/hero.png" width="1024" height="256" alt="hero" />
       </div>
     </div>
 
-    <div class="about">
-      <div class="container-md" style="margin-top: 120px">
+    <div id="about" class="jarak">
+      <div class="container">
         <h4>Hello everyone</h4>
         <p>
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit doloremque, magnam
@@ -53,6 +53,66 @@ <h4>Hello everyone</h4>
       </div>
     </div>
 
+    <div id="series" class="jarak">
+      <div class="container">
+        <div class="d-flex justify-content-center">
+          <img src="resources/images/series.png" width="384" alt="series" />
+        </div>
+        <div class="list-series d-flex justify-content-center flex-wrap gap-4">
+          <div class="box">
+            <div class="box-season">
+              <img src="resources/images/bookmark.png" width="98" alt="mark" />
+            </div>
+            <div class="box-text">
+              <h4>[ SEASON 1 ]</h4>
+              <p>Lorem ipsum, dolor sit amet consectetur adipisicing.</p>
+            </div>
+          </div>
+          <div class="box">
+            <div class="box-season">
+              <img src="resources/images/bookmark.png" width="98" alt="mark" />
+            </div>
+            <div class="box-text">
+              <h4>[ SEASON 2 ]</h4>
+              <p>Lorem ipsum, dolor sit amet consectetur adipisicing.</p>
+            </div>
+          </div>
+          <div class="box">
+            <div class="box-season">
+              <img src="resources/images/bookmark.png" width="98" alt="mark" />
+            </div>
+            <div class="box-text">
+              <h4>[ SEASON 3 ]</h4>
+              <p>Lorem ipsum, dolor sit amet consectetur adipisicing.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="community">
+      <div class="d-flex justify-content-center">
+        <img src="resources/images/community.png" width="384" alt="series" />
+      </div>
+
+      <div class="container">
+        <div class="d-flex flex-wrap column-gap-4">
+          <div class="main-screen">
+            <div class="screen"></div>
+            <div class="d-flex justify-content-center">
+              <img src="resources/images/discord.png" width="128" alt="Discord" />
+              <img src="resources/images/wa.png" width="128" alt="Discord" />
+              <img src="resources/images/instagram.png" width="128" alt="Discord" />
+              <img src="resources/images/youtube.png" width="128" alt="Discord" />
+            </div>
+          </div>
+          <div class="skin">
+            <img src="resources/images/rif_skin.png" width="512" alt="RIF" />
+          </div>
+        </div>
+      </div>
+    </div>
+
     <script src="resources/vendor/aos.js"></script>
     <script src="resources/vendor/bootstrap.bundle.min.js"></script>
 

diff --git a/resources/images/arrow_l.png b/resources/images/arrow_l.png
diff --git a/resources/images/arrow_r.png b/resources/images/arrow_r.png
diff --git a/resources/images/bookmark.png b/resources/images/bookmark.png
diff --git a/resources/images/community.png b/resources/images/community.png
diff --git a/resources/images/discord.png b/resources/images/discord.png
diff --git a/resources/images/instagram.png b/resources/images/instagram.png
diff --git a/resources/images/rif_skin.png b/resources/images/rif_skin.png
diff --git a/resources/images/series.png b/resources/images/series.png
diff --git a/resources/images/wa.png b/resources/images/wa.png
diff --git a/resources/images/youtube.png b/resources/images/youtube.png
diff --git a/resources/style.css b/resources/style.css
@@ -1,3 +1,7 @@
+.jarak {
+  margin-bottom: 140px;
+}
+
 .bg-hero {
   height: 470px;
   background-image: url("../resources/images/bg_hero.png");
@@ -14,6 +18,31 @@
   filter: drop-shadow(1px 1px 1px #000000);
 }
 
+.box-season {
+  width: 320px;
+  height: 440px;
+  margin: 0 auto;
+  background-color: #f3f3f3;
+  outline-style: solid;
+  outline-color: red;
+  outline-width: 4px;
+  border-radius: 4px;
+}
+
+.box-text {
+  margin-top: 10px;
+  text-align: center;
+}
+
+.screen {
+  width: 640px;
+  height: 400px;
+  background-color: #d9d9d9;
+  outline-style: solid;
+  outline-color: #ffffff;
+  outline-width: 4px;
+}
+
 @media (min-width: 960px) {
   .navbar-nav.abs {
     position: absolute;