From d07d757ff73d85c0496d02b91c85d47b589cc1fc Mon Sep 17 00:00:00 2001
From: Mujahid Ansori Majid <hitzveraidn@gmail.com>
Date: Fri, 13 Oct 2023 10:10:26 +0700
Subject: [PATCH 1/3] adding responsive to section 3

---
 assets/css/section3.css | 49 ++++++++++++++++++++++---
 index.html              | 80 -----------------------------------------
 2 files changed, 45 insertions(+), 84 deletions(-)

diff --git a/assets/css/section3.css b/assets/css/section3.css
index 1c4b463..33383ab 100644
--- a/assets/css/section3.css
+++ b/assets/css/section3.css
@@ -1,6 +1,11 @@
 .container {
   width: 72%;
+  max-width: 1280px;
   margin: 0 auto;
+  border: 1px solid red;
+}
+.section__3 {
+  width: 100%;
 }
 .section__3-title {
   font-size: 20px;
@@ -9,22 +14,58 @@
 }
 .section__3-categories {
   display: flex;
+  gap: 0.1rem;
   box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
 }
 .section__3-categories-item {
-  min-height: 150px;
-  min-width: 120px;
+  width: 8rem;
   text-align: center;
-  padding: 8px;
+  padding: 6px 6px 0 6px;
   background-color: white;
   border: 1px solid rgba(0, 0, 0, 0.2);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 .section__3-categories-item-img {
-  height: 80%;
   display: flex;
   justify-content: center;
   align-items: center;
+  border: 1px solid red;
+}
+.section__3-categories-item-img img {
+  width: 100%;
+  min-width: 70px;
+  height: auto;
+  margin-bottom: 6px;
 }
 .section__3-categories-item-title {
   font-size: 14px;
 }
+
+@media only screen and (max-width: 1280px) {
+  .container {
+    width: 80%;
+  }
+}
+
+@media only screen and (max-width: 1024px) {
+  .container {
+    width: 90%;
+  }
+  .section__3-categories-item {
+    width: 100%;
+    height: 12rem;
+    width: 12rem;
+    border: 1px solid black;
+  }
+  .section__3-categories {
+    display: grid;
+    gap: 0;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+  }
+  .section__3-categories-item-img {
+    width: 8rem;
+  }
+}
diff --git a/index.html b/index.html
index 7a26c7e..2168abe 100644
--- a/index.html
+++ b/index.html
@@ -280,18 +280,10 @@ <h3 class="section__3-title">Categories</h3>
                 <img
                   src="https://kyou.id/static/img/sidebar/nendo.png"
                   alt=""
-                  width="90px"
-                  height="90px"
                   loading="lazy"
                 />
               </div>
               <div
-                style="
-                  display: flex;
-                  height: 20%;
-                  align-items: center;
-                  justify-content: center;
-                "
               >
                 <h4 class="section__3-categories-item-title">Nendroid</h4>
               </div>
@@ -301,18 +293,10 @@ <h4 class="section__3-categories-item-title">Nendroid</h4>
                 <img
                   src="https://kyou.id/static/img/sidebar/scaled.png"
                   alt=""
-                  width="90px"
-                  height="90px"
                   loading="lazy"
                 />
               </div>
               <div
-                style="
-                  display: flex;
-                  height: 20%;
-                  align-items: center;
-                  justify-content: center;
-                "
               >
                 <h4 class="section__3-categories-item-title">Scaled Figure</h4>
               </div>
@@ -322,18 +306,10 @@ <h4 class="section__3-categories-item-title">Scaled Figure</h4>
                 <img
                   src="https://kyou.id/static/img/sidebar/prize.png"
                   alt=""
-                  width="90px"
-                  height="90px"
                   loading="lazy"
                 />
               </div>
               <div
-                style="
-                  display: flex;
-                  height: 20%;
-                  align-items: center;
-                  justify-content: center;
-                "
               >
                 <h4 class="section__3-categories-item-title">Prize Figure</h4>
               </div>
@@ -343,18 +319,10 @@ <h4 class="section__3-categories-item-title">Prize Figure</h4>
                 <img
                   src="https://kyou.id/static/img/sidebar/pup.png"
                   alt=""
-                  width="90px"
-                  height="90px"
                   loading="lazy"
                 />
               </div>
               <div
-                style="
-                  display: flex;
-                  height: 20%;
-                  align-items: center;
-                  justify-content: center;
-                "
               >
                 <h4 class="section__3-categories-item-title">Pop up Parade</h4>
               </div>
@@ -364,18 +332,10 @@ <h4 class="section__3-categories-item-title">Pop up Parade</h4>
                 <img
                   src="https://kyou.id/static/img/sidebar/model-kit.png"
                   alt=""
-                  width="90px"
-                  height="90px"
                   loading="lazy"
                 />
               </div>
               <div
-                style="
-                  display: flex;
-                  height: 20%;
-                  align-items: center;
-                  justify-content: center;
-                "
               >
                 <h4 class="section__3-categories-item-title">Model Kit</h4>
               </div>
@@ -385,18 +345,10 @@ <h4 class="section__3-categories-item-title">Model Kit</h4>
                 <img
                   src="https://kyou.id/static/img/sidebar/figma.png"
                   alt=""
-                  width="90px"
-                  height="90px"
                   loading="lazy"
                 />
               </div>
               <div
-                style="
-                  display: flex;
-                  height: 20%;
-                  align-items: center;
-                  justify-content: center;
-                "
               >
                 <h4 class="section__3-categories-item-title">Figma</h4>
               </div>
@@ -406,18 +358,10 @@ <h4 class="section__3-categories-item-title">Figma</h4>
                 <img
                   src="https://kyou.id/static/img/sidebar/merch.png"
                   alt=""
-                  width="90px"
-                  height="90px"
                   loading="lazy"
                 />
               </div>
               <div
-                style="
-                  display: flex;
-                  height: 20%;
-                  align-items: center;
-                  justify-content: center;
-                "
               >
                 <h4 class="section__3-categories-item-title">Merchandise</h4>
               </div>
@@ -427,18 +371,10 @@ <h4 class="section__3-categories-item-title">Merchandise</h4>
                 <img
                   src="https://kyou.id/static/img/sidebar/plush.png"
                   alt=""
-                  width="90px"
-                  height="90px"
                   loading="lazy"
                 />
               </div>
               <div
-                style="
-                  display: flex;
-                  height: 20%;
-                  align-items: center;
-                  justify-content: center;
-                "
               >
                 <h4 class="section__3-categories-item-title">Plush</h4>
               </div>
@@ -448,18 +384,10 @@ <h4 class="section__3-categories-item-title">Plush</h4>
                 <img
                   src="https://kyou.id/static/img/sidebar/ln.png"
                   alt=""
-                  width="90px"
-                  height="90px"
                   loading="lazy"
                 />
               </div>
               <div
-                style="
-                  display: flex;
-                  height: 20%;
-                  align-items: center;
-                  justify-content: center;
-                "
               >
                 <h4 class="section__3-categories-item-title">Light Novel</h4>
               </div>
@@ -469,18 +397,10 @@ <h4 class="section__3-categories-item-title">Light Novel</h4>
                 <img
                   src="https://kyou.id/static/img/sidebar/manga.png"
                   alt=""
-                  width="90px"
-                  height="90px"
                   loading="lazy"
                 />
               </div>
               <div
-                style="
-                  display: flex;
-                  height: 20%;
-                  align-items: center;
-                  justify-content: center;
-                "
               >
                 <h4 class="section__3-categories-item-title">Mangga</h4>
               </div>

From c73bee7395785d4729b0557bd9778ded8e72eaeb Mon Sep 17 00:00:00 2001
From: Mujahid Ansori Majid <hitzveraidn@gmail.com>
Date: Fri, 13 Oct 2023 11:25:06 +0700
Subject: [PATCH 2/3] pull from upstream dev

---
 assets/css/section3.css | 49 +++----------------------
 index.html              | 80 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 84 insertions(+), 45 deletions(-)

diff --git a/assets/css/section3.css b/assets/css/section3.css
index 33383ab..1c4b463 100644
--- a/assets/css/section3.css
+++ b/assets/css/section3.css
@@ -1,11 +1,6 @@
 .container {
   width: 72%;
-  max-width: 1280px;
   margin: 0 auto;
-  border: 1px solid red;
-}
-.section__3 {
-  width: 100%;
 }
 .section__3-title {
   font-size: 20px;
@@ -14,58 +9,22 @@
 }
 .section__3-categories {
   display: flex;
-  gap: 0.1rem;
   box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
 }
 .section__3-categories-item {
-  width: 8rem;
+  min-height: 150px;
+  min-width: 120px;
   text-align: center;
-  padding: 6px 6px 0 6px;
+  padding: 8px;
   background-color: white;
   border: 1px solid rgba(0, 0, 0, 0.2);
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
 }
 .section__3-categories-item-img {
+  height: 80%;
   display: flex;
   justify-content: center;
   align-items: center;
-  border: 1px solid red;
-}
-.section__3-categories-item-img img {
-  width: 100%;
-  min-width: 70px;
-  height: auto;
-  margin-bottom: 6px;
 }
 .section__3-categories-item-title {
   font-size: 14px;
 }
-
-@media only screen and (max-width: 1280px) {
-  .container {
-    width: 80%;
-  }
-}
-
-@media only screen and (max-width: 1024px) {
-  .container {
-    width: 90%;
-  }
-  .section__3-categories-item {
-    width: 100%;
-    height: 12rem;
-    width: 12rem;
-    border: 1px solid black;
-  }
-  .section__3-categories {
-    display: grid;
-    gap: 0;
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-  }
-  .section__3-categories-item-img {
-    width: 8rem;
-  }
-}
diff --git a/index.html b/index.html
index ddd7585..3e0970d 100644
--- a/index.html
+++ b/index.html
@@ -283,10 +283,18 @@ <h3 class="section__3-title">Categories</h3>
                 <img
                   src="https://kyou.id/static/img/sidebar/nendo.png"
                   alt=""
+                  width="90px"
+                  height="90px"
                   loading="lazy"
                 />
               </div>
               <div
+                style="
+                  display: flex;
+                  height: 20%;
+                  align-items: center;
+                  justify-content: center;
+                "
               >
                 <h4 class="section__3-categories-item-title">Nendroid</h4>
               </div>
@@ -296,10 +304,18 @@ <h4 class="section__3-categories-item-title">Nendroid</h4>
                 <img
                   src="https://kyou.id/static/img/sidebar/scaled.png"
                   alt=""
+                  width="90px"
+                  height="90px"
                   loading="lazy"
                 />
               </div>
               <div
+                style="
+                  display: flex;
+                  height: 20%;
+                  align-items: center;
+                  justify-content: center;
+                "
               >
                 <h4 class="section__3-categories-item-title">Scaled Figure</h4>
               </div>
@@ -309,10 +325,18 @@ <h4 class="section__3-categories-item-title">Scaled Figure</h4>
                 <img
                   src="https://kyou.id/static/img/sidebar/prize.png"
                   alt=""
+                  width="90px"
+                  height="90px"
                   loading="lazy"
                 />
               </div>
               <div
+                style="
+                  display: flex;
+                  height: 20%;
+                  align-items: center;
+                  justify-content: center;
+                "
               >
                 <h4 class="section__3-categories-item-title">Prize Figure</h4>
               </div>
@@ -322,10 +346,18 @@ <h4 class="section__3-categories-item-title">Prize Figure</h4>
                 <img
                   src="https://kyou.id/static/img/sidebar/pup.png"
                   alt=""
+                  width="90px"
+                  height="90px"
                   loading="lazy"
                 />
               </div>
               <div
+                style="
+                  display: flex;
+                  height: 20%;
+                  align-items: center;
+                  justify-content: center;
+                "
               >
                 <h4 class="section__3-categories-item-title">Pop up Parade</h4>
               </div>
@@ -335,10 +367,18 @@ <h4 class="section__3-categories-item-title">Pop up Parade</h4>
                 <img
                   src="https://kyou.id/static/img/sidebar/model-kit.png"
                   alt=""
+                  width="90px"
+                  height="90px"
                   loading="lazy"
                 />
               </div>
               <div
+                style="
+                  display: flex;
+                  height: 20%;
+                  align-items: center;
+                  justify-content: center;
+                "
               >
                 <h4 class="section__3-categories-item-title">Model Kit</h4>
               </div>
@@ -348,10 +388,18 @@ <h4 class="section__3-categories-item-title">Model Kit</h4>
                 <img
                   src="https://kyou.id/static/img/sidebar/figma.png"
                   alt=""
+                  width="90px"
+                  height="90px"
                   loading="lazy"
                 />
               </div>
               <div
+                style="
+                  display: flex;
+                  height: 20%;
+                  align-items: center;
+                  justify-content: center;
+                "
               >
                 <h4 class="section__3-categories-item-title">Figma</h4>
               </div>
@@ -361,10 +409,18 @@ <h4 class="section__3-categories-item-title">Figma</h4>
                 <img
                   src="https://kyou.id/static/img/sidebar/merch.png"
                   alt=""
+                  width="90px"
+                  height="90px"
                   loading="lazy"
                 />
               </div>
               <div
+                style="
+                  display: flex;
+                  height: 20%;
+                  align-items: center;
+                  justify-content: center;
+                "
               >
                 <h4 class="section__3-categories-item-title">Merchandise</h4>
               </div>
@@ -374,10 +430,18 @@ <h4 class="section__3-categories-item-title">Merchandise</h4>
                 <img
                   src="https://kyou.id/static/img/sidebar/plush.png"
                   alt=""
+                  width="90px"
+                  height="90px"
                   loading="lazy"
                 />
               </div>
               <div
+                style="
+                  display: flex;
+                  height: 20%;
+                  align-items: center;
+                  justify-content: center;
+                "
               >
                 <h4 class="section__3-categories-item-title">Plush</h4>
               </div>
@@ -387,10 +451,18 @@ <h4 class="section__3-categories-item-title">Plush</h4>
                 <img
                   src="https://kyou.id/static/img/sidebar/ln.png"
                   alt=""
+                  width="90px"
+                  height="90px"
                   loading="lazy"
                 />
               </div>
               <div
+                style="
+                  display: flex;
+                  height: 20%;
+                  align-items: center;
+                  justify-content: center;
+                "
               >
                 <h4 class="section__3-categories-item-title">Light Novel</h4>
               </div>
@@ -400,10 +472,18 @@ <h4 class="section__3-categories-item-title">Light Novel</h4>
                 <img
                   src="https://kyou.id/static/img/sidebar/manga.png"
                   alt=""
+                  width="90px"
+                  height="90px"
                   loading="lazy"
                 />
               </div>
               <div
+                style="
+                  display: flex;
+                  height: 20%;
+                  align-items: center;
+                  justify-content: center;
+                "
               >
                 <h4 class="section__3-categories-item-title">Mangga</h4>
               </div>

From e0d911bdcfc565bee4191f04297d2c18a47ab724 Mon Sep 17 00:00:00 2001
From: Mujahid Ansori Majid <hitzveraidn@gmail.com>
Date: Fri, 13 Oct 2023 11:30:03 +0700
Subject: [PATCH 3/3] fixing responsive in section 3

---
 assets/css/section3.css | 50 ++++++++++++++++++++++++++++++++++++-----
 1 file changed, 45 insertions(+), 5 deletions(-)

diff --git a/assets/css/section3.css b/assets/css/section3.css
index 1c4b463..e9a869e 100644
--- a/assets/css/section3.css
+++ b/assets/css/section3.css
@@ -1,6 +1,12 @@
 .container {
   width: 72%;
+  max-width: 1280px;
   margin: 0 auto;
+  min-width: 50vw;
+}
+.section__3 {
+  width: 100%;
+  overflow-x: auto;
 }
 .section__3-title {
   font-size: 20px;
@@ -9,22 +15,56 @@
 }
 .section__3-categories {
   display: flex;
-  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
+  border-radius: 10px;
+  background-color: white;
+  margin-bottom: 10px;
 }
 .section__3-categories-item {
-  min-height: 150px;
-  min-width: 120px;
+  width: 8rem;
   text-align: center;
-  padding: 8px;
+  padding: 10px 6px 10px 6px;
   background-color: white;
+  display: flex;
   border: 1px solid rgba(0, 0, 0, 0.2);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-radius: 2px;
 }
 .section__3-categories-item-img {
-  height: 80%;
   display: flex;
   justify-content: center;
   align-items: center;
 }
+.section__3-categories-item-img img {
+  width: 100%;
+  min-width: 70px;
+  height: auto;
+  margin-bottom: 6px;
+}
 .section__3-categories-item-title {
   font-size: 14px;
 }
+
+@media only screen and (max-width: 1280px) {
+  .container {
+    width: 80%;
+  }
+}
+
+@media only screen and (max-width: 1024px) {
+  .container {
+    width: 90%;
+  }
+  .section__3-categories-item {
+    width: 100%;
+  }
+  .section__3-categories {
+    display: grid;
+    gap: 0;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+  }
+  .section__3-categories-item-img {
+    width: 8rem;
+  }
+}