diff --git a/assets/css/navbar.css b/assets/css/navbar.css
deleted file mode 100644
index f261558..0000000
--- a/assets/css/navbar.css
+++ /dev/null
@@ -1,97 +0,0 @@
- /* Nav Created By I Made Hary Mahayana */
- .nav__navigation {
- padding: 0px 64px;
- background: #ffffff;
- box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
- height: 64px;
- display: flex;
- align-items: center;
- position: fixed;
- top: 0px;
- width: 100%;
- z-index: 100;
- box-sizing: border-box;
- }
- form .nav__input_search {
- padding: 8px 16px;
- border: 1px solid #d1d3d4;
- border-right: none;
- border-top-left-radius: 4px;
- border-bottom-left-radius: 4px;
- font-size: 14px;
- flex-grow: 1;
- box-sizing: border-box;
- height: 36px;
- font-family: "Nunito", sans-serif;
- }
- .nav__search_submit {
- background: #fc4c02;
- border: 1px solid #fc4c02;
- border-left: none;
- border-top-right-radius: 4px;
- border-bottom-right-radius: 4px;
- box-sizing: border-box;
- height: 36px;
- width: 36px;
- cursor: pointer;
- }
- .nav__button {
- width: 46px;
- height: 46px;
- padding: 12px;
- box-sizing: border-box;
- display: flex;
- align-items: center;
- justify-content: center;
- background: none;
- border: none;
- }
- a.nav__icons {
- display: flex;
- align-items: center;
- height: 100%;
- }
- a.nav__icons .nav__mascot {
- width: 144px;
- height: 64px;
- object-fit: cover;
- }
- .nav__logo-kyou {
- width: 100%;
- height: 100%;
- object-fit: contain;
- }
- .nav__img-kyou {
- width: 103px;
- height: 48px;
- margin-top: 5px;
- }
- .nav__links {
- display: flex;
- align-items: center;
- box-sizing: border-box;
- padding-right: 24px;
- border-right: 1px solid #d1d3d4;
- }
- .nav__signin {
- padding-left: 24px;
- font-size: 14px;
- width: 128px;
- text-align: center;
- }
- .nav__text_signin {
- border: none;
- text-decoration: none;
- color: #fc4c02;
- }
- .nav__form_search {
- flex-grow: 1;
- padding: 0px 48px;
- display: flex;
- align-items: center;
- position: relative;
- }
- .nav__cart {
- width: 47px;
- }
- /* End Nav */
\ No newline at end of file
diff --git a/assets/css/root.css b/assets/css/root.css
index 4a9733f..76a83ab 100644
--- a/assets/css/root.css
+++ b/assets/css/root.css
@@ -1,8 +1,20 @@
:root {
--body-margin: 0px;
+ --primary-color: #fc4c02;
+}
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
}
-
body {
margin: var(--body-margin);
font-family: "Nunito", sans-serif;
}
+textarea,
+select,
+input,
+button,
+a {
+ outline: none;
+}
diff --git a/assets/css/section2.css b/assets/css/section2.css
new file mode 100644
index 0000000..4bc9a2d
--- /dev/null
+++ b/assets/css/section2.css
@@ -0,0 +1,138 @@
+.section__2 {
+ display: flex;
+ justify-content: center;
+ background: linear-gradient(90deg, #8e2610 0%, #481502 100%);
+ background-repeat: no-repeat;
+ background-size: 100% 72px;
+}
+.section__2-container {
+ display: flex;
+ border-radius: 5px;
+ overflow: hidden;
+ width: 82.5%;
+ box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px 0px;
+ box-sizing: border-box;
+}
+.section__2-container-shopping {
+ max-width: 900px;
+ height: 200px;
+}
+.section__2-container-shopping:nth-child(1) {
+ flex: 1;
+ background-color: var(--primary-color);
+ display: flex;
+}
+.section__2-container-shopping:nth-child(2) {
+ flex: 1;
+ display: flex;
+ padding: 24px 8px;
+ flex-direction: column;
+ align-items: center;
+}
+.section__2-container-shopping-left {
+ flex: 1;
+ padding: 26px 8px 24px 24px;
+ display: flex;
+ flex-direction: column;
+ max-height: 200px;
+}
+.section__2-container-shopping-right {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+}
+.section__2-img {
+ object-fit: cover;
+}
+.section__2-container-shopping:nth-child(2) {
+ background-color: white;
+ flex: 1;
+}
+.section__2-shopping-caption {
+ color: white;
+ font-size: 20px;
+ font-weight: bold;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ line-height: 110%;
+}
+.section__2-button {
+ width: 100%;
+ font-size: 1rem;
+ padding: 12px 16px;
+ background-color: white;
+ color: var(--primary-color);
+ border-radius: 2rem;
+ border: 1px solid var(--primary-color);
+ margin-top: 1rem;
+ font-weight: 600;
+}
+.section__2-button a {
+ text-decoration: none;
+ color: var(--primary-color);
+}
+.slick-slide {
+ background: #f5f5f5;
+ border-radius: 10px;
+}
+.section__2-carousel {
+ max-width: 200px;
+ max-height: 500px;
+}
+.section__2-carousel-item {
+ height: 100%;
+ width: 100%;
+}
+/* right sight carousel */
+.section__2-title-button {
+ color: var(--primary-color);
+ font-size: 20px;
+ text-decoration: none;
+ font-weight: bold;
+ position: relative;
+}
+.section__2-badge {
+ position: absolute;
+ right: -18px;
+ top: -12px;
+ width: 24px;
+ height: 24px;
+}
+.section__2-title-description {
+ color: black;
+ margin-top: -5px;
+ font-weight: bold;
+ font-size: 24px;
+ margin-bottom: 1rem;
+}
+.section__2-container-list-store {
+ width: 100%;
+}
+.section__2-container-list-store p {
+ text-align: center;
+ color: slategray;
+ font-size: 18px;
+}
+.section__2-list-store {
+ display: flex;
+ width: 80%;
+ margin: 0 auto;
+ justify-content: center;
+ gap: 16px;
+ margin-bottom: 16px;
+}
+.section__2-list-store-item {
+ padding: 0 12px;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ border-radius: 20px;
+}
+.section__2-store-button {
+ background-color: var(--primary-color);
+ padding: 12px 16px;
+ border-radius: 20px;
+ border: none;
+ color: white;
+ font-weight: bold;
+}
diff --git a/assets/css/section3.css b/assets/css/section3.css
new file mode 100644
index 0000000..1c4b463
--- /dev/null
+++ b/assets/css/section3.css
@@ -0,0 +1,30 @@
+.container {
+ width: 72%;
+ margin: 0 auto;
+}
+.section__3-title {
+ font-size: 20px;
+ font-weight: bold;
+ padding: 16px 0;
+}
+.section__3-categories {
+ display: flex;
+ box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
+}
+.section__3-categories-item {
+ min-height: 150px;
+ min-width: 120px;
+ text-align: center;
+ padding: 8px;
+ background-color: white;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+}
+.section__3-categories-item-img {
+ height: 80%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.section__3-categories-item-title {
+ font-size: 14px;
+}
diff --git a/assets/css/styles.css b/assets/css/styles.css
new file mode 100644
index 0000000..431b6f8
--- /dev/null
+++ b/assets/css/styles.css
@@ -0,0 +1,2 @@
+@import "/assets/css/section2.css";
+@import "/assets/css/section3.css";
diff --git a/assets/js/section2.js b/assets/js/section2.js
new file mode 100644
index 0000000..be558c4
--- /dev/null
+++ b/assets/js/section2.js
@@ -0,0 +1,16 @@
+$(document).ready(function () {
+ console.log("test");
+ $(".section__2-carousel").slick({
+ // prevArrow: "",
+ // nextArrow: "",
+ // dots: true,
+ // autoplay: true,
+ // autoplaySpeed: 2500,
+ // centerMode: true,
+ // centerPadding: "60px",
+ // slidesToShow: 3,
+
+ // slidesToShow: 1,
+ // slidesToScroll: 1,
+ });
+});
diff --git a/index.html b/index.html
index b932604..2910e1b 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,7 @@
+
+
+
+
+
+
+
+
+
+
+
+
Kyou Hobby Shop - Anime Figure & Merchandise
@@ -100,7 +126,373 @@
+
+
+
+
+
+
+
+
+ UNIQUE REQUEST
+
+ Belanja barang dari jepang semudah copy link!
+
+
+
+
+
+
+
+ Categories
+
+
+
+
+
+
+
Nendroid
+
+
+
+
+
+
+
+
Scaled Figure
+
+
+
+
+
+
+
+
Prize Figure
+
+
+
+
+
+
+
+
Pop up Parade
+
+
+
+
+
+
+
+
Model Kit
+
+
+
+
+
+
+
+
Figma
+
+
+
+
+
+
+
+
Merchandise
+
+
+
+
+
+
+
+
Plush
+
+
+
+
+
+
+
+
Light Novel
+
+
+
+
+
+
+
+
Mangga
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+