Team4FullstackDev · harymahayana07 · Oct 11, 2023 · Oct 10, 2023 · Oct 11, 2023
diff --git a/assets/css/section10.css b/assets/css/section10.css
@@ -0,0 +1,215 @@
+
+/* created by Endri Nastiar */
+
+.section__10_filter-tittle {
+    padding-top: 50px;
+    font-size: 20px;
+ }
+
+
+ .section__10_filter {
+    position: relative;
+    width: 1195px;
+    margin: 20px auto;
+    padding: 20px;
+    background: #ffffff;
+    border-radius: 4px;
+    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
+ }
+
+ .section__10_filter-button {
+    border-bottom: 10px;
+    box-shadow: 0 1px rgb(151, 151, 151);
+ }
+
+ .section__10_filter-button button {
+    padding: 10px 20px;
+    font-size: 16px;
+    background: none;
+    border: none;
+    cursor: pointer;
+
+ }
+
+ .section__10_filter-button button.section__10_active {
+    border-bottom: 2px solid orangered;
+    color: orangered;
+ }
+
+ .section__10_filter .section__10_filter-button button:hover {
+    color: orangered;
+ }
+
+ .filter-link:hover,
+ .filter-link:focus {
+    color: orangered;
+
+ }
+
+ .filter-link.section__10_active {
+    color: orangered;
+    border-bottom: 2px solid orangered;
+ }
+
+ .filter-link::after {
+    content: '';
+    display: block;
+    border-bottom: 2px solid orangered;
+ }
+
+
+ .section__10_filterable-card {
+    margin-top: 25px;
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+ }
+
+
+
+
+
+ .section__10_card {
+    background-color: #ffffff;
+    padding: 3px;
+    border-radius: 8px;
+    flex: 0 1 calc(16.666% - 10px);
+ }
+
+
+
+ .section__10_card.section__10_hide {
+    display: none;
+ }
+
+ .section__10_card .section__10_image {
+    width: 105%;
+    border-radius: 5px 5px 5px 5px;
+    height: 195px;
+ }
+
+
+
+
+
+
+ .section__10_card-late-pre-order {
+    font-size: 12px;
+    background: rgb(197, 62, 84);
+    padding: 0 12px;
+    width: 63%;
+    height: 20px;
+    border-radius: 3px 3px 3px 3px;
+    display: flex;
+    text-align: center;
+    align-items: center;
+    color: #ffffff;
+    font-weight: 700;
+ }
+
+
+
+ .section__10_card-ready-stock {
+    font-size: 12px;
+    background: rgb(6, 166, 49);
+    padding: 0 12px;
+    width: 55%;
+    height: 20px;
+    border-radius: 3px 3px 3px 3px;
+    display: flex;
+    align-items: center;
+    color: #ffffff;
+    font-weight: 700;
+ }
+
+
+ .section__10_card-pre-order {
+    font-size: 12px;
+    background: rgb(103, 103, 115);
+    padding: 0 12px;
+    width: 50%;
+    height: 20px;
+    border-radius: 3px 3px 3px 3px;
+    display: flex;
+    align-items: center;
+    color: #ffffff;
+    font-weight: 700;
+ }
+
+ .section__10_card-showcase {
+    font-size: 12px;
+    background: rgb(95, 199, 201);
+    padding: 0 12px;
+    width: 50%;
+    height: 20px;
+    border-radius: 3px 3px 3px 3px;
+    display: flex;
+    align-items: center;
+    color: #ffffff;
+    font-weight: 700;
+ }
+ .section__10_card-back-order {
+    font-size: 12px;
+    background: rgb(153, 98, 145);
+    padding: 0 12px;
+    width: 50%;
+    height: 20px;
+    border-radius: 3px 3px 3px 3px;
+    display: flex;
+    align-items: center;
+    color: #ffffff;
+    font-weight: 700;
+ }
+
+
+ .section__10_card-tittle {
+    font-size: 13px;
+    padding-top: 10px;
+    padding-bottom: 4px;
+
+ }
+
+ .section__10_card-date {
+    font-size: 12px;
+    padding-bottom: 9px;
+    color: #606060;
+ }
+
+ .section__10_price {
+    color: orangered;
+    padding-bottom: 5px;
+    font-size: 14px;
+ }
+
+ .section__10_dp {
+    color: #565252;
+    font-size: 12px;
+ }
+
+
+
+
+ .section__10_btnn-next {
+    border-radius: 4px;
+    border: 2px solid var(--primary-color);
+    margin-left: 217px;
+ }
+
+
+
+ .section__10_btnn-next button {
+    color: #FFF;
+    text-align: center;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 13.8px;
+    display: flex;
+    max-width: 720px;
+    padding: 18px 244.254px 18px 254.746px;
+    flex-direction: column;
+    align-items: center;
+    flex: 1 0 0;
+    align-self: stretch;
+    background: var(--primary-color);
+ }
diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -1,2 +1,3 @@
 @import "./section2.css";
 @import "./section3.css";
+@import "./section10.css";
diff --git a/assets/images/image1.png b/assets/images/image1.png
diff --git a/assets/images/image10.png b/assets/images/image10.png
diff --git a/assets/images/image11.png b/assets/images/image11.png
diff --git a/assets/images/image12.png b/assets/images/image12.png
diff --git a/assets/images/image13.png b/assets/images/image13.png
diff --git a/assets/images/image14.png b/assets/images/image14.png
diff --git a/assets/images/image15.png b/assets/images/image15.png
diff --git a/assets/images/image16.png b/assets/images/image16.png
diff --git a/assets/images/image17.png b/assets/images/image17.png
diff --git a/assets/images/image18.png b/assets/images/image18.png
diff --git a/assets/images/image19.png b/assets/images/image19.png
diff --git a/assets/images/image2.png b/assets/images/image2.png
diff --git a/assets/images/image20.png b/assets/images/image20.png
diff --git a/assets/images/image21.png b/assets/images/image21.png
diff --git a/assets/images/image22.png b/assets/images/image22.png
diff --git a/assets/images/image23.png b/assets/images/image23.png
diff --git a/assets/images/image24.png b/assets/images/image24.png
diff --git a/assets/images/image25.png b/assets/images/image25.png
diff --git a/assets/images/image26.png b/assets/images/image26.png
diff --git a/assets/images/image27.png b/assets/images/image27.png
diff --git a/assets/images/image28.png b/assets/images/image28.png
diff --git a/assets/images/image29.png b/assets/images/image29.png
diff --git a/assets/images/image3.png b/assets/images/image3.png
diff --git a/assets/images/image30.png b/assets/images/image30.png
diff --git a/assets/images/image31.png b/assets/images/image31.png
diff --git a/assets/images/image32.png b/assets/images/image32.png
diff --git a/assets/images/image33.png b/assets/images/image33.png
diff --git a/assets/images/image34.png b/assets/images/image34.png
diff --git a/assets/images/image35.png b/assets/images/image35.png
diff --git a/assets/images/image36.png b/assets/images/image36.png
diff --git a/assets/images/image37.png b/assets/images/image37.png
diff --git a/assets/images/image38.png b/assets/images/image38.png
diff --git a/assets/images/image39.png b/assets/images/image39.png
diff --git a/assets/images/image4.png b/assets/images/image4.png
diff --git a/assets/images/image40.png b/assets/images/image40.png
diff --git a/assets/images/image41.png b/assets/images/image41.png
diff --git a/assets/images/image42.png b/assets/images/image42.png
diff --git a/assets/images/image43.png b/assets/images/image43.png
diff --git a/assets/images/image5.png b/assets/images/image5.png
diff --git a/assets/images/image6.png b/assets/images/image6.png
diff --git a/assets/images/image7.png b/assets/images/image7.png
diff --git a/assets/images/image8.png b/assets/images/image8.png
diff --git a/assets/images/image9.png b/assets/images/image9.png
diff --git a/assets/js/section10.js b/assets/js/section10.js
@@ -0,0 +1,26 @@
+const filterButtons = document.querySelectorAll(".section__10_filter-button button");
+const filterableCards = document.querySelectorAll(".section__10_filterable-card .section__10_card");
+
+const filterCards = e => {
+    document.querySelector(".section__10_active").classList.remove("section__10_active");
+    e.target.classList.add("section__10_active");
+
+
+    filterableCards.forEach(card => {
+
+        card.classList.add("section__10_hide");
+
+        if (card.dataset.name === e.target.dataset.name || e.target.dataset.name === "section__10_all"){
+            card.classList.remove("section__10_hide");
+        }
+
+    })
+};
+
+
+
+filterButtons.forEach(button => button.addEventListener("click", filterCards));
+
+
+
+