diff --git a/assets/css/footer.css b/assets/css/footer.css
new file mode 100644
index 0000000..bce647f
--- /dev/null
+++ b/assets/css/footer.css
@@ -0,0 +1,133 @@
+/* createdby affu satouru */
+.footer{
+ border-top: 1px solid #d1d3d4;
+ padding: 32px;
+ padding-bottom: 0px;
+ box-sizing: border-box;
+ background: #ffff;
+}
+.footer h4{
+ font-size: 1.2em;
+ margin-bottom: 10px;
+ color: #606060;
+}
+.footer__wrapper-contact{
+ display: grid;
+ grid-template-columns: 20% 15% 15% 25% 25% ;
+ justify-content: center;
+ width: 90%;
+ margin: 0px auto;
+}
+.footer__contact-help ul{
+ list-style: none;
+}
+.footer__contact-help li{
+ font-size: 1.2em;
+}
+.footer__contact-help li a{
+ padding: 8px 0px;
+ display: inline-block;
+ color: #808080 ;
+ text-decoration: none;
+}
+
+
+
+.footer__contact-tos ul{
+ list-style: none;
+}
+.footer__contact-tos li{
+ font-size: 1.2em;
+}
+.footer__contact-tos li a{
+ padding: 8px 0px;
+ display: inline-block;
+ color: #808080 ;
+ text-decoration: none;
+}
+
+
+
+.footer__contact-location ul{
+ list-style: none;
+}
+.footer__contact-location li{
+ font-size: 1.2em;
+ margin-bottom: 8px;
+}
+.footer__contact-location li a{
+ padding: 8px 0px;
+ display: inline-block;
+ color: #808080 ;
+ text-decoration: none;
+}
+
+
+
+.footer__contact-payment ul {
+ width: 100%;
+ column-gap: 1em;
+ column-width: 60px;
+}
+.footer__contact-location li img{
+ width: 50px;
+ user-select: none;
+ border-style: none;
+}
+
+
+
+.footer__contact-sosmed ul{
+ list-style: none;
+}
+.footer__contact-sosmed li{
+ margin-bottom: 16px;
+ display: flex;
+ align-items: center;
+}
+.footer__sosmed img{
+ margin-right: 12px;
+
+}
+.footer__contact-sosmed li a{
+ outline: none;
+ text-decoration: none;
+ color: #FC4C02;
+ background-color: transparent;
+}
+.footer__sosmed-2 img{
+ width: 16px;
+ height: 16px;
+ object-fit: contain;
+ margin-right: 8px;
+}
+.footer__sosmed-3 img{
+ width: 16px;
+ height: 16px;
+ object-fit: contain;
+ margin-right: 8px;
+}
+
+
+.footer__copyright{
+ margin: 0 auto;
+ margin-top: 10px;
+ width: 90%;
+ border-top: 1px solid #d1d3d4 ;
+ padding: 24px 0px;
+ display: flex;
+ align-items: center;
+}
+.footer__copyright img{
+ height: 32px;
+}
+.footer__tagline{
+ font-size: 14px;
+ margin-left: 20px;
+ color: #565252 ;
+ flex-grow: 1;
+}.footer__copy{
+ font-size: 14px;
+ color:#808080 ;
+}
+/* End footer */
\ No newline at end of file
diff --git a/assets/css/login.css b/assets/css/login.css
new file mode 100644
index 0000000..2d17805
--- /dev/null
+++ b/assets/css/login.css
@@ -0,0 +1,151 @@
+/* create by dosma rina br manik */
+.login{
+ padding: 24px 0px;
+}
+.login_content{
+ width: 100%;
+ max-width: 480px;
+ margin: auto;
+}
+.login_logo{
+ width: 120px;
+ height: 44.4px;
+ object-fit: contain;
+ margin: 0px auto;
+ display: block;
+}
+
+.login_tittle{
+ text-align: center;
+ margin-top: 12px;
+ font-size: 24px;
+ font-weight: normal;
+ font-style: normal;
+ font-stretch: normal;
+ line-height: normal;
+ color: #606060;
+}
+
+.login_form{
+ margin-top: 24px;
+ padding: 24px;
+ box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
+ width: 100%;
+ background: white;
+ display: flex;
+ flex-direction: column;
+ box-sizing: border-box;
+ border-radius: 4px;
+}
+.login_name{
+ display: block;
+ font-size: 14px;
+ font-weight: normal;
+ font-style: normal;
+ font-stretch: normal;
+ line-height: normal;
+ color: #808080;
+ margin-top: 15px;
+}
+.login_box{
+ border-radius: 4px;
+ border: 1px solid #d1d3d4;
+ color: #565252;
+ padding: 10px;
+ box-sizing: border-box;
+ font-size: 16px;
+ margin-top: 8px;
+ width: 100%;
+}
+
+.login_forgot{
+ text-align: right;
+ margin-top: 16px;
+ font-size: 14px;
+ font-weight: normal;
+ font-style: normal;
+ font-stretch: normal;
+ line-height: normal;
+ margin-left: auto;
+ color: orangered;
+ text-decoration: none;
+}
+
+.login_forgot:hover{
+ text-decoration: underline;
+}
+
+.login_button{
+ margin-top: 32px;
+}
+.login_signin{
+ padding: 16px;
+ border-radius: 4px;
+ border: none;
+ color: #ffffff;
+ font-size: 16px;
+ font-weight: bold;
+ font-style: normal;
+ font-stretch: normal;
+ line-height: 1;
+ width: 100%;
+ cursor: pointer;
+ background: orangered;
+}
+
+.login_button_tittle{
+ font-size: 14px;
+ font-weight: normal;
+ font-style: normal;
+ font-stretch: normal;
+ line-height: 1.14;
+ color: #808080;
+ margin: 16px 0px;
+ display: block;
+ text-align: center;
+}
+.login_button_fb{
+ padding: 16px;
+ border-radius: 4px;
+ border: none;
+ color: #ffffff;
+ font-size: 16px;
+ font-weight: bold;
+ font-style: normal;
+ font-stretch: normal;
+ line-height: 1;
+ width: 100%;
+ cursor: pointer;
+ background: #465daa;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.login_fb{
+ filter: brightness(0) invert(1);
+ height: 20px;
+ width: 10px;
+ object-fit: contain;
+ margin-right: auto;
+}
+.login_button_tittle_fb{
+ color: inherit;
+ margin-right: auto;
+}
+
+.login_register{
+ font-size: 16px;
+ font-weight: normal;
+ font-style: normal;
+ font-stretch: normal;
+ line-height: normal;
+ display: block;
+ margin: 16px auto 0px;
+ text-decoration: none;
+ color: orangered;
+}
+
+.login_register:hover{
+ text-decoration: underline;
+}
\ No newline at end of file
diff --git a/assets/css/navbar.css b/assets/css/navbar.css
index f261558..07705de 100644
--- a/assets/css/navbar.css
+++ b/assets/css/navbar.css
@@ -1,97 +1,308 @@
- /* 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;
+/* Nav Created By Harymahayana07 */
+header * {
+ box-sizing: content-box;
+}
+.nav__navigation {
+ padding: 0px 64px;
+ background: var(--white-color);
+ 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;
+}
+.nav__search_mobile {
+ display: none;
+}
+.nav__search_mobile-img {
+ display: none;
+}
+.nav__button_menu {
+ display: none;
+}
+.nav__modal__hamburger {
+ display:none;
+}
+.nav__modal__search {
+ display:none;
+}
+
+@media screen and (max-width: 1024px) {
+ .nav__navigation {
+ padding: 0px 20px;
+ height: 56px;
+ }
+ .nav__mascot {
+ display: none;
+ }
+ .nav__icons {
+ display: flex;
+ align-items: center;
+ height: 100%;
+ }
+ .nav__logo {
+ width: 64px;
+ height: 32px;
+ }
+ .nav__wishlist_mobile {
+ display: none;
+ }
+ .nav__button_menu {
+ display: initial;
+ background: none;
+ border: none;
+ margin-right: 20px;
+ cursor: pointer;
+ }
+ .nav__signin {
+ display: none;
+ }
+ .nav__search_mobile,
+ .nav__search_mobile-img {
+ display: block;
+ }
+ .nav__form_search {
+ display: none;
+ }
+ .nav__links {
+ border-right: none;
+ padding-right: 0px;
+ margin-left: auto;
+ }
+ .nav__img-kyou {
+ object-fit: contain;
+ width: 64px;
+ height: 32px;
+ }
+
+ .nav__modal__hamburger , .nav__modal__search {
+ background: rgba(0, 0, 0, 0.75);
+ display: none;
+ align-items: flex-start;
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: hidden;
+ z-index: 1000;
+ padding: 0px;
+ width: 100%;
+ transition: opacity 5.3s ease-in-out, transform 5.3s ease-in-out;
+ }
+
+ .nav__modal-container, .nav__modal__search-container {
+ max-width: 800px;
+ position: relative;
+ padding: 1.2rem;
+ background: var(--white-color);
+ background-clip: padding-box;
+ box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.25);
+ margin: 0 auto;
+ }
+ .nav__modal__menu , .nav__modal__search_menu {
+ width: 100%;
+ height: 100%;
+ border-radius: 0px;
+ padding: 0px;
+ max-width: none;
+ }
+ .nav__modal_menu-hidden {
+ display: block;
+ }
+ .nav__modal_mobile_top {
+ padding: 18px 24px;
+ position: fixed;
+ top: 0px;
+ width: 100%;
+ background: var(--white-color);
+ display: flex;
+ align-items: center;
+ border-bottom: 1px solid #d1d3d4;
+ }
+ .nav__modal__search_mobile_top {
+ padding: 0px 24px;
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ width: 100%;
+ box-sizing: border-box;
+ background: var(--white-color);
+ display: flex;
+ align-items: center;
+ z-index: 10;
+ }
+
+ .nav__modal_button-back, .nav__modal_button-search-back {
+ background: transparent;
+ border: none;
+ margin-right: 20px;
+ height: 16px;
+ cursor: pointer;
+ }
+ .nav__modal_button-img {
+ filter: brightness(0);
+ height: 16px;
+ }
+ .nav__modal_inner_menu {
+ height: 100%;
+ margin-top: 55px;
+ }
+ .nav__modal_info_card {
+ padding: 24px 20px;
+ display: flex;
+ align-items: center;
+ }
+ .nav__modal_img-face {
+ width: 40px;
+ margin-right: 16px;
+ }
+
+ .nav__modal_username {
+ font-size: 16px;
+ color: #565252;
+ font-weight: bold;
+ }
+ hr.nav__modal_hr {
+ border: 0.5px solid #d1d3d4;
+ }
+ .nav__modal_link_menu {
+ display: flex;
+ padding: 16px 20px;
+ align-items: center;
+ color: #565252;
+ text-decoration: none;
+ cursor: pointer;
+ font-size: 14px;
+ }
+ .nav__modal_svg {
+ width: 20px;
+ height: 20px;
+ margin-right: 12px;
+ fill: #808080;
+ }
+ .nav__modal__search_form {
+ height: 52px;
+ flex-grow: 1;
+ position: relative;
+ }
+ .nav__modal__search_form input {
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
+ box-sizing: border-box;
+ border: none;
+ font-size: 16px;
+ font-family: "Nunito", sans-serif;
+ transform: scale(calc(14/16));
+ margin-top: 1px;
+ transform-origin: left center;
+ padding-right: 24px;
+ }
+ .nav__modal__search-content {
+ padding: 16px 20px;
+ margin-top: 52px;
+ }
+ .nav__modal__search-content-label {
+ font-size: 12px;
+ color: #a2a2a2;
+ display: block;
+ margin-bottom: 8px;
+ }
+ .nav__modal__search-content-entry {
+ background: none;
+ border: none;
+ font-family: "Nunito", sans-serif;
+ color: #565252;
+ padding: 8px 0px;
+ cursor: pointer;
+ width: 100%;
+ text-align: left;
+ }
+}
+/* End Nav */
diff --git a/assets/css/register.css b/assets/css/register.css
new file mode 100644
index 0000000..85b3150
--- /dev/null
+++ b/assets/css/register.css
@@ -0,0 +1,141 @@
+/* create by dosma rina br manik */
+.register{
+ display: flex;
+ width: 100%;
+ min-height: 100vh;
+ background-color: #f7f7f7;
+ box-sizing: border-box;
+ padding: 24px 0px;
+}
+.register_content{
+ width: 100%;
+ max-width: 480px;
+ margin: auto;
+}
+.register_logo{
+ width: 120px;
+ height: 44.4px;
+ object-fit: contain;
+ margin: 0px auto;
+ display: block;
+}
+.register_tittle{
+ text-align: center;
+ margin-top: 12px;
+ font-size: 24px;
+ font-weight: normal;
+ font-style: normal;
+ font-stretch: normal;
+ line-height: normal;
+ color: #606060;
+}
+.register_form_content{
+ margin-top: 24px;
+ padding: 24px;
+ box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
+ width: 100%;
+ background: white;
+ display: flex;
+ flex-direction: column;
+ box-sizing: border-box;
+ border-radius: 4px;
+}
+.register_fb{
+ margin-top: 0px;
+}
+.register_button_fb{
+ padding: 16px;
+ border-radius: 4px;
+ border: none;
+ color: #ffffff;
+ font-size: 16px;
+ font-weight: bold;
+ font-style: normal;
+ font-stretch: normal;
+ line-height: 1;
+ width: 100%;
+ cursor: pointer;
+ background: #465daa;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.register_img_fb{
+ filter: brightness(0) invert(1);
+ height: 20px;
+ width: 10px;
+ object-fit: contain;
+ margin-right: auto;
+}
+.register_button_tittle_fb{
+ color: inherit;
+ margin-right: auto;
+}
+.register_content_label{
+ display: flex;
+ align-items: center;
+ margin-top: 15px;
+}
+.register_content_label:before{
+ margin-right: 8px;
+ content: " ";
+ display: inline-block;
+ border: 0.5px solid #d1d3d4;
+ flex-grow: 1;
+}
+.register_content_label:after{
+ margin-left: 8px;
+ content: " ";
+ display: inline-block;
+ border: 0.5px solid #d1d3d4;
+ flex-grow: 1;
+}
+.register_name{
+ display: block;
+ font-size: 14px;
+ font-weight: normal;
+ font-style: normal;
+ font-stretch: normal;
+ line-height: normal;
+ color: #808080;
+ margin-top: 15px;
+}
+.register_box{
+ border-radius: 4px;
+ border: 1px solid #d1d3d4;
+ color: #565252;
+ padding: 10px;
+ box-sizing: border-box;
+ font-size: 16px;
+ margin-top: 8px;
+ width: 100%;
+}
+.register_btn{
+ padding: 16px;
+ border-radius: 4px;
+ border: none;
+ color: #ffffff;
+ font-size: 16px;
+ font-weight: bold;
+ font-style: normal;
+ font-stretch: normal;
+ line-height: 1;
+ width: 100%;
+ cursor: pointer;
+ background: orangered;
+ margin-top: 15px;
+}
+.register_ready{
+ font-size: 16px;
+ font-weight: normal;
+ font-style: normal;
+ font-stretch: normal;
+ line-height: normal;
+ display: block;
+ margin: 16px auto 0px;
+ text-decoration: none;
+ color: orangered;
+}
+.register_ready:hover{
+ text-decoration: underline;
+}
\ No newline at end of file
diff --git a/assets/css/reset.css b/assets/css/reset.css
new file mode 100644
index 0000000..1933c16
--- /dev/null
+++ b/assets/css/reset.css
@@ -0,0 +1,83 @@
+.reset-page{
+ background: white;
+ max-width: 720px;
+ margin: auto;
+ border-radius: 4px;
+ box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
+ padding: 40px;
+ box-sizing: border-box;
+ margin-bottom: 150px;
+ margin-top: 100px;
+}
+
+.reset-page-content{
+ width: 100%;
+ max-width: 480px;
+ margin: 0px auto;
+}
+
+.reset-page-tittle{
+ text-align: center;
+ font-size: 24px;
+ font-weight: bold;
+ font-style: normal;
+ font-stretch: normal;
+ line-height: normal;
+ letter-spacing: normal;
+ color: #303030;
+}
+
+.reset-page-detail{
+ font-size: 14px;
+ font-weight: normal;
+ font-style: normal;
+ font-stretch: normal;
+ line-height: normal;
+ text-align: center;
+ color: #606060;
+ margin-top: 16px;
+}
+
+.reset-page-form{
+ margin-top: 24px;
+}
+
+.reset-page-input{
+ border-radius: 4px;
+ border: solid 1px #d1dae8;
+ padding: 12px 16px;
+ box-sizing: border-box;
+ color: #303030;
+ width: 100%;
+}
+
+.reset-page-button{
+ margin-top: 24px;
+ border-radius: 4px;
+ border-radius: 4px;
+ background-color: #FC4C02;
+ border: none;
+ color: white;
+ font-size: 15px;
+ font-weight: bold;
+ font-style: normal;
+ font-stretch: normal;
+ line-height: 1.6;
+ cursor: pointer;
+ padding: 12px 16px;
+ box-sizing: border-box;
+ width: 100%;
+}
+
+.reset-page_back-main{
+ margin-top: 16px;
+ font-size: 14px;
+ font-weight: normal;
+ font-style: normal;
+ font-stretch: normal;
+ line-height: normal;
+ color: rgba(128, 128, 128, 0.84);
+ display: block;
+ text-decoration: underline;
+ text-align: center;
+}
\ No newline at end of file
diff --git a/assets/css/root.css b/assets/css/root.css
index 4a9733f..6b0de0d 100644
--- a/assets/css/root.css
+++ b/assets/css/root.css
@@ -1,8 +1,24 @@
:root {
--body-margin: 0px;
+ --primary-color: #fc4c02;
+ --ready-stock: #41B774;
+ --pre-order: #657996;
+ --late-pre-order: #D3647A;
+ --white-color: #ffffff;
+}
+* {
+ 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/section1.css b/assets/css/section1.css
new file mode 100644
index 0000000..70c3dd4
--- /dev/null
+++ b/assets/css/section1.css
@@ -0,0 +1,95 @@
+/* Section 1 Created By I Made Harymahayana07 */
+.section__1 {
+ background: linear-gradient(90deg, #8e2610 0%, #481502 100%);
+ margin-top: 64px;
+}
+.section__1-container {
+ width: 100%;
+ position: relative;
+}
+.section__1-container2 {
+ font-size: 2em;
+ color: rgb(255, 255, 255);
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
+.section__1-container3 {
+ display: flex;
+ overflow: hidden;
+}
+.section__1-button {
+ position: absolute;
+ font-size: 32px;
+ border: none;
+ border-radius: 100%;
+ width: 48px;
+ height: 48px;
+ line-height: 0;
+ color: rgb(252, 76, 2);
+ background: white;
+ font-style: bold;
+ box-shadow: none;
+ cursor: pointer;
+ transition: opacity 0.25s ease, box-shadow 0.15s ease, transform 0.25s ease;
+ pointer-events: all;
+ z-index: 1;
+ opacity: 0.6;
+ transform: scale(1);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ padding-bottom: 6px;
+}
+.section__1-button:hover {
+ opacity: 1;
+}
+.section__1-button:first-child {
+ left: 8px;
+}
+.section__1-button:last-child {
+ right: 8px;
+}
+.section__1 {
+ padding: 20px 0;
+ margin-top: 64px;
+}
+.section__1-content {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ font-size: 2em;
+ top: 0px;
+ left: 0px;
+ width: 100%;
+ height: 100%;
+ position: relative;
+ -webkit-box-align: center;
+}
+.section__1-carousel {
+ width: 100%;
+ white-space: nowrap;
+}
+.section__1-images {
+ border-radius: 10px;
+ opacity: 1;
+ transition: opacity 0.25s ease 0s;
+ object-fit: cover;
+ margin-left: 5px;
+ margin-right: 5px;
+ width: 100%;
+ height: 100%;
+}
+.section__1-images-link {
+ margin-left: 15px;
+ background: transparent !important;
+}
+
+@media screen and (max-width: 1024px) {
+ .section__1 {
+ margin-top:56px;
+ }
+}
+/* end Section 1 */
\ No newline at end of file
diff --git a/assets/css/section10.css b/assets/css/section10.css
new file mode 100644
index 0000000..032467d
--- /dev/null
+++ b/assets/css/section10.css
@@ -0,0 +1,247 @@
+/* created by Endri Nastiar */
+
+.section__10_filter-tittle {
+ padding-top: 50px;
+ font-size: 20px;
+}
+
+.section__10_filter {
+ position: relative;
+ width: 100%;
+ margin: 20px auto;
+ padding: 20px;
+ background: #ffffff;
+ border-radius: 4px;
+ box-shadow: -1px -1px 15px 3px #e5e5e5;
+}
+
+.section__10_filter-button {
+ border-bottom: 10px;
+ box-shadow: 0 1px rgb(151, 151, 151);
+ display: flex;
+ flex-direction: row;
+}
+
+.section__10_filter-button button {
+ padding: 10px 20px;
+ font-size: 16px;
+ background: none;
+ border: none;
+ cursor: pointer;
+ overflow: hidden;
+}
+
+.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: grid;
+ gap: 2px;
+ grid-template-columns: repeat(6, 177px);
+ overflow: hidden;
+}
+
+.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: 165px;
+ border-radius: 5px 5px 5px 5px;
+ height: 165px;
+}
+
+.section__10_card-late-pre-order {
+ font-size: 12px;
+ background: var(--late-pre-order);
+ padding: 0 12px;
+ width: max-content;
+ 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: var(--ready-stock);
+ padding: 0 12px;
+ width: max-content;
+ height: 20px;
+ border-radius: 3px 3px 3px 3px;
+ display: flex;
+ align-items: center;
+ color: #ffffff;
+ font-weight: 700;
+ font-family: "nunito", sans-serif;
+}
+
+.section__10_card-pre-order {
+ font-size: 12px;
+ background: var(--pre-order);
+ padding: 0 12px;
+ width: max-content;
+ height: 20px;
+ border-radius: 3px 3px 3px 3px;
+ display: flex;
+ align-items: center;
+ color: #ffffff;
+ font-weight: 700;
+ font-family: "nunito", sans-serif;
+}
+
+.section__10_card-showcase {
+ font-size: 12px;
+ background: rgb(95, 199, 201);
+ padding: 0 12px;
+ width: max-content;
+ height: 20px;
+ border-radius: 3px 3px 3px 3px;
+ display: flex;
+ align-items: center;
+ color: #ffffff;
+ font-weight: 700;
+ font-family: "nunito", sans-serif;
+}
+.section__10_card-back-order {
+ font-size: 12px;
+ background: rgb(153, 98, 145);
+ padding: 0 12px;
+ width: max-content;
+ height: 20px;
+ border-radius: 3px 3px 3px 3px;
+ display: flex;
+ align-items: center;
+ color: #ffffff;
+ font-weight: 700;
+ font-family: "nunito", sans-serif;
+}
+
+.section__10_card-tittle {
+ font-size: 13px;
+ padding-top: 10px;
+ padding-bottom: 4px;
+}
+
+.section__10_card-date {
+ font-size: 12px;
+ padding-bottom: 9px;
+ color: gray;
+}
+
+.section__10_price {
+ color: orangered;
+ padding-bottom: 5px;
+ font-size: 14px;
+ font-weight: 600;
+}
+
+.section__10_dp {
+ color: rgb(20, 20, 20);
+ font-size: small;
+ font-weight: 200;
+}
+
+.section__10_btnn-next {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: row;
+ padding: 8px 0px;
+ margin: auto;
+}
+
+.section__10_btnn-next button {
+ background: var(--primary-color);
+ border: 2px solid var(--primary-color);
+ border-radius: 4px;
+ color: #ffffff;
+ font-weight: bold;
+ display: block;
+ font-size: 1em;
+ padding: 16px;
+ width: 100%;
+ max-width: 720px;
+}
+
+@media screen and (max-width: 1024px) {
+ .section__10_filterable-card {
+ grid-template-columns: repeat(4, minmax(215px, 1fr));
+ overflow: hidden;
+ }
+
+ .section__10_card .section__10_image {
+ width: 200px;
+ height: 200px;
+ }
+}
+@media screen and (max-width: 675px) {
+ .section__10_filter-button button {
+ padding: 10px 10px;
+ font-size: 15px;
+ overflow: hidden;
+ }
+}
+@media screen and (max-width: 580px) {
+ .section__10_filterable-card {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ overflow: hidden;
+ }
+ .section__10_filter-button button {
+ font-size: 13px;
+ }
+}
+@media screen and (max-width: 420px) {
+ .section__10_card .section__10_image {
+ width: 160px;
+ height: 160px;
+ }
+ .section__10_card-tittle {
+ font-size: 11px;
+ }
+ .section__10_filter-button button {
+ font-size: 13px;
+ padding: 8px 4px;
+ width: 100%;
+ }
+}
+@media screen and (max-width: 360px) {
+ .section__10_filter-button button {
+ font-size: 11px;
+ padding: 8px 1.3px;
+ width: 100%;
+ }
+}
diff --git a/assets/css/section11.css b/assets/css/section11.css
new file mode 100644
index 0000000..8e83101
--- /dev/null
+++ b/assets/css/section11.css
@@ -0,0 +1,381 @@
+.section_11_filter {
+ width: 256px;
+ border-radius: 4px;
+ padding: 16px 14px;
+ background: #ffffff;
+ box-sizing: border-box;
+ box-shadow: 0 0 4px 0 rgba(14, 14, 14, 0.1);
+ margin-right: 24px;
+ flex-shrink: 0;
+}
+.section_11_content {
+ width: 100%;
+ margin: 100px auto;
+ display: flex;
+ flex-direction: row;
+ flex-direction: center;
+ align-items: flex-start;
+}
+.section_11_filter {
+ display: flex;
+ flex-direction: column;
+}
+.section_11_category {
+ font-size: 16px;
+ font-weight: bold;
+ margin-bottom: 16px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.section_11_radiodb {
+ display: block;
+ cursor: pointer;
+ margin-bottom: 12px;
+}
+.section_11_radiodb span {
+ font-size: 14px;
+ color: #808080;
+ display: inline-flex;
+ align-items: center;
+ box-sizing: border-box;
+}
+.section_11_radiodb.indented {
+ margin-left: 24px;
+}
+.section_11_filter hr {
+ border: none;
+ border-top-width: medium;
+ border-top-style: none;
+ border-top-color: currentcolor;
+ border-top: 1px solid #d1d3d4;
+ margin: 14px 0px;
+}
+
+.section_11_parameters {
+ display: none;
+ padding: 16px 0px;
+ border-bottom: 1px solid #d1d3d4;
+}
+.section_11_parameters button {
+ border-radius: 4px;
+ border: 1px solid #fc4c02;
+ background: none;
+ flex-grow: 1;
+ padding: 8px;
+ box-sizing: border-box;
+ color: #fc4c02;
+ cursor: pointer;
+ font-size: 14px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 2px;
+}
+.section_11_parameters button:hover {
+ color: white;
+ background: #fc4c02;
+}
+.section_11_parameters button:hover img {
+ filter: brightness(50%);
+}
+.section_11_subcategory {
+ margin-top: 16px;
+ font-size: 14px;
+ font-weight: bold;
+ margin-bottom: 12px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.section_11_category button {
+ background: transparent;
+ border: none;
+ color: #fc4c02;
+ font-size: 12px;
+ cursor: pointer;
+}
+.section_11_subcategory button {
+ background: transparent;
+ border: none;
+ color: #fc4c02;
+ font-size: 12px;
+ cursor: pointer;
+}
+.section_11_gory span::after {
+ content: "\A";
+ white-space: pre;
+}
+.section_11_gory span {
+ font-size: 14px;
+ color: #606060;
+ display: inline-flex;
+ align-items: center;
+ box-sizing: border-box;
+ width: 100%;
+ flex-grow: 1;
+ position: relative;
+ padding-right: 32px;
+ margin-bottom: 8px;
+ padding-left: 16px;
+}
+
+input[type="checkbox"] {
+ appearance: none;
+ width: 20px;
+ height: 20px;
+ border: 1px solid rgb(59, 59, 59);
+ background-color: white;
+ border-radius: 4px;
+}
+
+input[type="checkbox"]:checked {
+ background-color: var(--primary-color);
+ border: 1px solid var(--primary-color);
+}
+
+input[type="checkbox"]::before {
+ content: "\2713";
+ font-size: 16px;
+ color: #ffffff;
+}
+
+.section_11_main {
+ width: 80%;
+ box-sizing: border-box;
+ flex-shrink: 1;
+ border-radius: 4px;
+ padding: 16px;
+ background: #ffffff;
+ box-sizing: border-box;
+ box-shadow: 0 0 4px 0 rgba(14, 14, 14, 0.1);
+}
+.section_11_heading {
+ display: flex;
+ align-items: flex-start;
+ border-bottom: 1px solid #d1d3d4;
+ padding-bottom: 10px;
+}
+.section_11_left {
+ flex-grow: 1;
+}
+.section_11_left h3 {
+ font-size: 20px;
+ margin-bottom: 4px;
+}
+
+.section_11_count {
+ font-size: 16px;
+ color: #808080;
+ margin-bottom: 16px;
+ display: inline-block;
+}
+.section_11_right {
+ display: flex;
+ align-items: center;
+}
+
+.section_11_right span {
+ margin-right: 12px;
+}
+.section_11_right select {
+ border: 1px solid #d1d3d4;
+ border-radius: 4px;
+ padding: 8px 14px;
+ background: transparent;
+ margin-top: 4px;
+ margin-bottom: 2px;
+}
+.section_11_galery {
+ background: green;
+ width: 100%;
+ height: 700px;
+ margin-top: 20px;
+}
+
+.section__11_filterable-card {
+ margin-top: 25px;
+ display: grid;
+ gap: 5px;
+ grid-template-columns: repeat(5, 167px);
+ overflow: hidden;
+}
+
+.section__11_card {
+ background-color: #ffffff;
+ padding: 3px;
+ border-radius: 8px;
+ flex: 0 1 calc(16.666% - 10px);
+}
+
+.section__11_card.section__10_hide {
+ display: none;
+}
+
+.section__11_card .section__11_image {
+ width: 155px;
+ border-radius: 5px 5px 5px 5px;
+ height: 155px;
+}
+
+.section__11_card-late-pre-order {
+ font-size: 12px;
+ background: var(--late-pre-order);
+ padding: 0 12px;
+ width: max-content;
+ height: 20px;
+ border-radius: 3px 3px 3px 3px;
+ display: flex;
+ text-align: center;
+ align-items: center;
+ color: #ffffff;
+ font-weight: 700;
+}
+
+.section__11_card-ready-stock {
+ font-size: 12px;
+ background: var(--ready-stock);
+ padding: 0 12px;
+ width: max-content;
+ height: 20px;
+ border-radius: 3px 3px 3px 3px;
+ display: flex;
+ align-items: center;
+ color: #ffffff;
+ font-weight: 700;
+ font-family: "nunito", sans-serif;
+}
+
+.section__11_card-pre-order {
+ font-size: 12px;
+ background: var(--pre-order);
+ padding: 0 12px;
+ width: max-content;
+ height: 20px;
+ border-radius: 3px 3px 3px 3px;
+ display: flex;
+ align-items: center;
+ color: #ffffff;
+ font-weight: 700;
+ font-family: "nunito", sans-serif;
+}
+
+.section__11_card-showcase {
+ font-size: 12px;
+ background: rgb(95, 199, 201);
+ padding: 0 12px;
+ width: max-content;
+ height: 20px;
+ border-radius: 3px 3px 3px 3px;
+ display: flex;
+ align-items: center;
+ color: #ffffff;
+ font-weight: 700;
+ font-family: "nunito", sans-serif;
+}
+.section__11_card-back-order {
+ font-size: 12px;
+ background: rgb(153, 98, 145);
+ padding: 0 12px;
+ width: max-content;
+ height: 20px;
+ border-radius: 3px 3px 3px 3px;
+ display: flex;
+ align-items: center;
+ color: #ffffff;
+ font-weight: 700;
+ font-family: "nunito", sans-serif;
+}
+
+.section__11_card-tittle {
+ font-size: 13px;
+ padding-top: 10px;
+ padding-bottom: 4px;
+}
+
+.section__11_card-date {
+ font-size: 12px;
+ padding-bottom: 9px;
+ color: gray;
+}
+
+.section__11_price {
+ color: orangered;
+ padding-bottom: 5px;
+ font-size: 14px;
+ font-weight: 600;
+}
+
+.section__11_dp {
+ color: rgb(20, 20, 20);
+ font-size: small;
+ font-weight: 200;
+}
+
+.section_11__pagination {
+ padding: 20px 0;
+}
+.section_11__pagination__paging {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ list-style-type: none;
+}
+.section_11__pagination__paging li {
+ display: block;
+ margin: 0px 8px;
+ z-index: 1;
+ transition: 0.2s;
+ border-radius: 4px;
+ text-decoration: none;
+}
+.section_11__pagination__paging li a {
+ display: block;
+ padding: 8px;
+ transition: 0.2s;
+ font-weight: bold;
+ color: #565252;
+ text-decoration: none;
+}
+.section_11__disabled {
+ background: #d1d3d4;
+}
+
+.section_11__active {
+ background: #fc4c02;
+ border-color: #fc4c02;
+ z-index: 3;
+}
+.section_11__active .section_11__undefined {
+ color: #ffffff;
+ cursor: default;
+}
+
+@media screen and (max-width: 1024px) {
+ .section_11_main {
+ margin: auto;
+ width: 100%;
+ }
+ .section_11_filter {
+ display: none;
+ }
+ .section_11_heading {
+ border-bottom: none;
+ }
+ .section_11_count {
+ margin-bottom: 0px;
+ }
+ .section_11_right {
+ display: none;
+ }
+ .section_11_parameters {
+ display: flex;
+ position: sticky;
+ top: 56px;
+ background: white;
+ z-index: 6;
+ width: 100%;
+ gap: 10px;
+ }
+}
diff --git a/assets/css/section2.css b/assets/css/section2.css
new file mode 100644
index 0000000..d345e4d
--- /dev/null
+++ b/assets/css/section2.css
@@ -0,0 +1,263 @@
+.section__2 {
+ display: flex;
+ justify-content: center;
+ background: -moz-linear-gradient(90deg, #8e2610 0%, #481502 100%);
+ 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: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 48px 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;
+ top: 0px;
+ left: 0px;
+ width: 100%;
+ height: 100%;
+ position: relative;
+}
+.section__2-img {
+ object-fit: cover;
+}
+.section__2-button-next {
+ right: 8px;
+}
+.section__2-container-shopping:nth-child(2) {
+ background-color: white;
+ flex: 1;
+}
+.section__2-button-carousel {
+ position: absolute;
+ font-size: 32px;
+ border: none;
+ border-radius: 100%;
+ width: 48px;
+ height: 48px;
+ line-height: 0;
+ color: rgb(252, 76, 2);
+ background: white;
+ font-style: bold;
+ box-shadow: none;
+ cursor: pointer;
+ transition: opacity 0.25s ease, box-shadow 0.15s ease, transform 0.25s ease;
+ pointer-events: all;
+ z-index: 1;
+ opacity: 0.6;
+ transform: scale(1);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ padding-bottom: 6px;
+}
+.section__2-button-carousel:hover {
+ opacity: 1;
+}
+.section__2-button-carousel:first-child {
+ left: 8px;
+}
+.section__2-button-carousel:nth-child(2) {
+ right: 8px;
+}
+.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);
+}
+.section__2-carousel {
+ max-width: 300px;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.section__2-carousel-item {
+ height: 150px;
+ margin-right: 10px;
+}
+/* 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;
+ 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: 100%;
+ padding: 0 1rem;
+ margin: 0 auto;
+ justify-content: center;
+ gap: 16px;
+ margin-bottom: 16px;
+}
+.section__2-list-store-item {
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ border-radius: 20px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.section__2-list-store-item img {
+ max-width: 100%;
+ max-height: 100%;
+ padding: 0 10px;
+}
+.section__2-store-button {
+ background-color: var(--primary-color);
+ padding: 12px 16px;
+ border-radius: 20px;
+ border: none;
+ color: white;
+ font-weight: bold;
+}
+.section__2-container-shopping {
+ max-width: 900px;
+ height: 200px;
+}
+
+@media screen and (max-width: 1024px) {
+ .section__2-container {
+ width: 100%;
+ margin: 0 2rem;
+ }
+ .section__2-container-shopping-right {
+ margin-left: 200px;
+ }
+ .section__2-shopping-caption {
+ font-size: 1.3rem;
+ }
+ .section__2-container-shopping {
+ max-width: 100%;
+ }
+ .section__2-container {
+ width: 100%;
+ flex-direction: column;
+ }
+ .section__2-carousel-item {
+ height: 100%;
+ }
+ .section__2-carousel {
+ max-width: 400px;
+ max-height: 300px;
+ display: flex;
+ justify-content: right;
+ align-items: center;
+ }
+}
+
+@media screen and (max-width: 960px) {
+ .section__2-container {
+ margin: 0;
+ }
+ .section__2-container {
+ height: fit-content;
+ }
+ .section__2-container-shopping-right {
+ margin-left: 0;
+ padding: 0 4rem;
+ }
+ .section__2-carousel-item {
+ width: 200px;
+ height: 100%;
+ }
+ .section__2-carousel {
+ max-width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ .section__2-container-shopping:nth-child(1) {
+ flex-direction: column;
+ flex: 0;
+ padding-top: 2rem;
+ }
+ .section__2-container-shopping:nth-child(2) {
+ flex: 0;
+ }
+ .section__2-container-shopping-right {
+ order: -10;
+ flex: 0;
+ }
+ .section__2-container-shopping-left {
+ flex: 0;
+ }
+ .section__2-shopping-caption {
+ font-size: 1.3rem;
+ max-width: 400px;
+ line-height: 20px;
+ }
+ .section__2-title-description {
+ font-size: 16px;
+ margin-top: 5px;
+ }
+}
diff --git a/assets/css/section3.css b/assets/css/section3.css
new file mode 100644
index 0000000..c7d1ee3
--- /dev/null
+++ b/assets/css/section3.css
@@ -0,0 +1,69 @@
+.container {
+ width: 72%;
+ max-width: 1280px;
+ margin: 0 auto;
+}
+.section__3 {
+ width: 100%;
+ overflow-x: auto;
+}
+.section__3-title {
+ font-size: 20px;
+ font-weight: bold;
+ padding: 16px 0;
+}
+.section__3-categories {
+ display: flex;
+ border-radius: 10px;
+ background-color: white;
+ margin-bottom: 10px;
+}
+.section__3-categories-item {
+ width: 8rem;
+ text-align: center;
+ 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 {
+ 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;
+ }
+}
diff --git a/assets/css/section4.css b/assets/css/section4.css
new file mode 100644
index 0000000..a19c64d
--- /dev/null
+++ b/assets/css/section4.css
@@ -0,0 +1,89 @@
+/* createdby affu satouru */
+
+
+.section__4-title h3{
+ display: block;
+ margin-block-start: 1em;
+ margin-block-end: 1em;
+ margin-inline-start: 0px;
+ margin-inline-end: 0px;
+ font-weight: bold;
+}
+.section__4-container {
+ width: 100%;
+ position: relative;
+ }
+ .section__4-container2 {
+ font-size: 2em;
+ color: rgb(255, 255, 255);
+ position: relative;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ }
+ .section__4-container3 {
+ display: flex;
+ overflow: hidden;
+ }
+ .section__4-button {
+ position: absolute;
+ font-size: 32px;
+ border: none;
+ border-radius: 100%;
+ width: 48px;
+ height: 48px;
+ line-height: 0;
+ color: rgb(252, 76, 2);
+ background: white;
+ font-style: bold;
+ box-shadow: none;
+ cursor: pointer;
+ transition: opacity 0.25s ease, box-shadow 0.15s ease, transform 0.25s ease;
+ pointer-events: all;
+ z-index: 1;
+ opacity: 0.6;
+ transform: scale(1);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ padding-bottom: 6px;
+ }
+ .section__4-button:hover {
+ opacity: 1;
+ }
+ .section__4-button:first-child {
+ left: 8px;
+ }
+ .section__4-button:last-child {
+ right: 8px;
+ }
+ .section__4-content {
+ display: flex;
+ align-items: center;
+ /* font-size: 2em; */
+ top: 0px;
+ left: 0px;
+ width: 100%;
+ height: 100%;
+ position: relative;
+ -webkit-box-align: center;
+ }
+ .section__4-carousel {
+ width: 100%;
+ /* white-space: nowrap; */
+ display: flex;
+ }
+ .section__4-img {
+ border-radius: 10px;
+ opacity: 1;
+ transition: opacity 0.25s ease 0s;
+ object-fit: cover;
+ width: 100%;
+ height: 100%;
+ }
+ .section__4-direct{
+ margin-left: 15px;
+ background: transparent !important;
+ }
\ No newline at end of file
diff --git a/assets/css/section5.css b/assets/css/section5.css
new file mode 100644
index 0000000..d2e0320
--- /dev/null
+++ b/assets/css/section5.css
@@ -0,0 +1,96 @@
+/* createdby affu satouru */
+
+.section__5-gallery-slider {
+ width: 100%;
+ margin-top: 30px;
+ margin-bottom: 20px;
+ }
+ .section__5-gallery-slider__tittle {
+ display: block;
+ margin-block-start: 1em;
+ margin-block-end: 1em;
+ margin-inline-start: 0px;
+ margin-inline-end: 0px;
+ font-weight: bold;
+ }
+ .section__5-container-col {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+ .section__5-gallery-slider__more > a {
+ border: none;
+ text-decoration: none;
+ color: #fc4c02;
+ }
+ .section__5-gallery-slider__content {
+ padding: 24px;
+ background-color: white;
+ display: flex;
+ justify-content: center;
+ border-radius: 6px;
+ box-shadow: -1px -1px 15px 3px #e5e5e5;
+ }
+ .section__5-gallery-slider__content a {
+ text-decoration: none;
+ color: black;
+ }
+ .section__5-gallery-slider__content img {
+ height: 165px;
+ width: 165px;
+ border-radius: 6px;
+ margin-bottom: 6px;
+ }
+
+ .section__5-container-card {
+ display: flex;
+ align-items: center;
+ overflow: hidden;
+ justify-content: center;
+ width: 100vw;
+ }
+ .section__5-content_card {
+ width: 165px;
+ margin: 0 6px;
+ }
+ .section__5-product__status {
+ color: rgb(255, 255, 255);
+ border-radius: 4px;
+ font-weight: bold;
+ font-size: small;
+ background: rgb(211, 100, 122);
+ width: max-content;
+ margin: 0;
+ padding: 2px 14px 2px;
+ }
+ .section__5-product__status__ready {
+ color: rgb(255, 255, 255);
+ border-radius: 4px;
+ font-weight: bold;
+ font-size: small;
+ background: rgb(36, 202, 3);
+ width: max-content;
+ margin: 0;
+ padding: 2px 14px 2px;
+ }
+ .section__5-product__name {
+ font-size: small;
+ padding: 10px 0 0 0;
+ max-width: 300px;
+ -webkit-line-clamp: 2;
+ /* autoprefixer: off */
+ -webkit-box-orient: vertical;
+ /* autoprefixer: on */
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ }
+ .section__5-product__date {
+ font-size: x-small;
+ color: gray;
+ padding: 0 0 10px 0;
+ }
+ .section__5-product__price {
+ color: #fc4c02;
+ font-weight: 600;
+ }
\ No newline at end of file
diff --git a/assets/css/section6.css b/assets/css/section6.css
new file mode 100644
index 0000000..b09ee6d
--- /dev/null
+++ b/assets/css/section6.css
@@ -0,0 +1,96 @@
+.container__section_6 {
+ margin-top: 20px;
+}
+
+.container_title_section_6 {
+ display: flex;
+ justify-content: space-between;
+}
+
+.items_showcase_header_section_6 {
+ padding-bottom: 16px;
+ font-size: 20px;
+ line-height: 23px;
+ font-weight: 700;
+}
+
+.container__section_6_see_all {
+ display: flex;
+ flex-direction: row;
+ justify-content: end;
+ align-items: center;
+ gap: 5px;
+}
+
+.section__6_link_see_all {
+ text-decoration: none;
+ text-align: right;
+ color: rgb(252, 76, 2);
+ font-size: 14px;
+}
+
+.section_6_lazyload_wrapper {
+ background-color: #fff;
+ box-shadow: -1px -1px 15px 3px #e5e5e5;
+ border-radius: 4px;
+ padding: 24px;
+ display: flex;
+ flex-direction: row;
+ overflow-x: hidden;
+}
+
+.section_6_lazyload_wrapper.dragging {
+ scroll-snap-type: none;
+ scroll-behavior: auto;
+}
+
+.section_6_lazyload_wrapper .overlay_image_section_6 {
+ user-select: none;
+}
+
+.section_6_lazyload_wrapper img {
+ width: 100%;
+ height: 100%;
+}
+
+.overlay_image_section_6 {
+ margin: 0 auto;
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ width: 100%;
+ /* animation: 1s scroll linear infinite; */
+}
+.overlay_image_section_6:hover .image_overlay_text_section_6 {
+ color: rgb(252, 76, 2);
+ background-color: rgba(0, 0, 0, 0.6);
+ transition: all 0.1s ease-in;
+}
+
+.overlay_image_section_6.slick-slide {
+ width: 280px;
+ height: 280px;
+ background-color: black !important;
+}
+
+.image_overlay_text_section_6 {
+ font-family: 'nunito', sans-serif;
+ text-align: center;
+ text-decoration: underline;
+ font-weight: 700;
+
+ width: 100%;
+ position: absolute;
+ bottom: 0;
+ background-color: transparent;
+ color: transparent;
+}
+
+@keyframes scroll {
+ from {
+ transform: translateX(0);
+ }
+ to {
+ transform: translateX(-100%);
+ }
+}
diff --git a/assets/css/section7.css b/assets/css/section7.css
new file mode 100644
index 0000000..170ea02
--- /dev/null
+++ b/assets/css/section7.css
@@ -0,0 +1,89 @@
+/* section 7 created by ahmad fahmi faza*/
+
+.section__7-gallery-slider {
+ width: 100%;
+ margin-top: 30px;
+ margin-bottom: 20px;
+}
+.section__7-container-col {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.section__7-gallery-slider__more > a {
+ border: none;
+ text-decoration: none;
+ color: #fc4c02;
+}
+.section__7-gallery-slider__content {
+ padding: 24px;
+ background-color: white;
+ display: flex;
+ justify-content: center;
+ border-radius: 6px;
+ box-shadow: -1px -1px 15px 3px #e5e5e5;
+ margin-top: 16px;
+}
+.section__7-gallery-slider__content a {
+ text-decoration: none;
+ color: black;
+}
+.section__7-gallery-slider__content img {
+ height: 165px;
+ width: 165px;
+ border-radius: 6px;
+ margin-bottom: 6px;
+}
+
+.section__7-container-card {
+ display: flex;
+ align-items: center;
+ overflow: hidden;
+ justify-content: center;
+ width: 100vw;
+}
+.section__7-content_card {
+ width: 165px;
+ margin: 0 6px;
+ background-color: white;
+}
+.section__7-product__status {
+ color: rgb(255, 255, 255);
+ border-radius: 4px;
+ font-weight: bold;
+ font-size: small;
+ background: var(--late-pre-order);
+ width: max-content;
+ margin: 0;
+ padding: 2px 14px 2px;
+}
+
+.section__7-product__name {
+ font-weight: bold;
+ font-size: small;
+ padding: 10px 0 0 0;
+ max-width: 300px;
+ -webkit-line-clamp: 2;
+ /* autoprefixer: off */
+ -webkit-box-orient: vertical;
+ /* autoprefixer: on */
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+}
+.section__7-product__date {
+ font-size: x-small;
+ color: gray;
+ padding: 0 0 10px 0;
+}
+.section__7-product__price {
+ color: #fc4c02;
+ font-weight: 600;
+}
+.section__7-product__dp {
+ margin-top: 2px;
+ font-size: small;
+ font-weight: 200;
+ color: rgb(20, 20, 20);
+}
+/* end section 7 */
diff --git a/assets/css/section8.css b/assets/css/section8.css
new file mode 100644
index 0000000..741719d
--- /dev/null
+++ b/assets/css/section8.css
@@ -0,0 +1,90 @@
+/* section 8 created by ahmad fahmi faza*/
+
+.section__8-gallery-slider {
+ width: 100%;
+ margin-top: 30px;
+ margin-bottom: 20px;
+}
+.section__8-container-col {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.section__8-gallery-slider__more > a {
+ border: none;
+ text-decoration: none;
+ color: #fc4c02;
+}
+.section__8-gallery-slider__content {
+ padding: 24px;
+ background-color: white;
+ display: flex;
+ justify-content: center;
+ border-radius: 6px;
+ box-shadow: -1px -1px 15px 3px #e5e5e5;
+ margin-top: 16px;
+}
+.section__8-gallery-slider__content a {
+ text-decoration: none;
+ color: black;
+}
+.section__8-gallery-slider__content img {
+ height: 165px;
+ width: 165px;
+ border-radius: 6px;
+ margin-bottom: 6px;
+}
+
+.section__8-container-card {
+ display: flex;
+ align-items: center;
+ overflow: hidden;
+ justify-content: center;
+ width: 100vw;
+}
+.section__8-content_card {
+ width: 165px;
+ margin: 0 6px;
+ background-color: white;
+}
+.section__8-product__status {
+ color: rgb(255, 255, 255);
+ border-radius: 4px;
+ font-weight: bold;
+ font-size: small;
+ background: var(--late-pre-order);
+ width: max-content;
+ margin: 0;
+ padding: 2px 14px 2px;
+}
+
+.section__8-product__name {
+ font-weight: bold;
+ font-size: small;
+ padding: 10px 0 0 0;
+ max-width: 300px;
+ -webkit-line-clamp: 2;
+ /* autoprefixer: off */
+ -webkit-box-orient: vertical;
+ /* autoprefixer: on */
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+}
+.section__8-product__date {
+ font-size: x-small;
+ color: gray;
+ padding: 0 0 10px 0;
+}
+.section__8-product__price {
+ color: #fc4c02;
+ font-weight: 600;
+}
+.section__8-product__dp {
+ margin-top: 2px;
+ font-size: small;
+ font-weight: 200;
+ color: rgb(20, 20, 20);
+}
+
+/* end section 8 */
diff --git a/assets/css/section9.css b/assets/css/section9.css
new file mode 100644
index 0000000..d198374
--- /dev/null
+++ b/assets/css/section9.css
@@ -0,0 +1,84 @@
+/* section 9 created by ahmad fahmi faza*/
+
+.section__9-gallery-slider {
+ width: 100%;
+ margin-top: 30px;
+ margin-bottom: 20px;
+}
+.section__9-container-col {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.section__9-gallery-slider__more > a {
+ border: none;
+ text-decoration: none;
+ color: #fc4c02;
+}
+.section__9-gallery-slider__content {
+ padding: 24px;
+ background-color: white;
+ display: flex;
+ justify-content: center;
+ border-radius: 6px;
+ box-shadow: -1px -1px 15px 3px #e5e5e5;
+ margin-top: 16px;
+}
+.section__9-gallery-slider__content a {
+ text-decoration: none;
+ color: black;
+}
+.section__9-gallery-slider__content img {
+ height: 165px;
+ width: 165px;
+ border-radius: 6px;
+ margin-bottom: 6px;
+}
+
+.section__9-container-card {
+ display: flex;
+ align-items: center;
+ overflow: hidden;
+ justify-content: center;
+ width: 100vw;
+}
+.section__9-content_card {
+ width: 165px;
+ margin: 0 6px;
+ background-color: white;
+}
+
+.section__9-product__status__ready {
+ color: rgb(255, 255, 255);
+ border-radius: 4px;
+ font-weight: bold;
+ font-size: small;
+ background: var(--ready-stock);
+ width: max-content;
+ margin: 0;
+ padding: 2px 14px 2px;
+}
+.section__9-product__name {
+ font-weight: bold;
+ font-size: small;
+ padding: 10px 0 0 0;
+ max-width: 300px;
+ -webkit-line-clamp: 2;
+ /* autoprefixer: off */
+ -webkit-box-orient: vertical;
+ /* autoprefixer: on */
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+}
+.section__9-product__date {
+ font-size: x-small;
+ color: gray;
+ padding: 0 0 10px 0;
+}
+.section__9-product__price {
+ color: #fc4c02;
+ font-weight: 600;
+}
+
+/* end section 9 */
diff --git a/assets/css/styles.css b/assets/css/styles.css
new file mode 100644
index 0000000..170cdb3
--- /dev/null
+++ b/assets/css/styles.css
@@ -0,0 +1,16 @@
+@import "./navbar.css";
+@import "./section1.css";
+@import "./section2.css";
+@import "./section3.css";
+@import "./section4.css";
+@import "./section5.css";
+@import "./section6.css";
+@import "./section7.css";
+@import "./section8.css";
+@import "./section9.css";
+@import "./section10.css";
+@import "./footer.css";
+@import "./login.css";
+@import "./register.css";
+@import "./reset.css";
+@import "./section11.css";
diff --git a/assets/images/image1.png b/assets/images/image1.png
new file mode 100644
index 0000000..d40e197
Binary files /dev/null and b/assets/images/image1.png differ
diff --git a/assets/images/image10.png b/assets/images/image10.png
new file mode 100644
index 0000000..fad542f
Binary files /dev/null and b/assets/images/image10.png differ
diff --git a/assets/images/image11.png b/assets/images/image11.png
new file mode 100644
index 0000000..113e05f
Binary files /dev/null and b/assets/images/image11.png differ
diff --git a/assets/images/image12.png b/assets/images/image12.png
new file mode 100644
index 0000000..bd4ac1d
Binary files /dev/null and b/assets/images/image12.png differ
diff --git a/assets/images/image13.png b/assets/images/image13.png
new file mode 100644
index 0000000..f323606
Binary files /dev/null and b/assets/images/image13.png differ
diff --git a/assets/images/image14.png b/assets/images/image14.png
new file mode 100644
index 0000000..8c1dc7c
Binary files /dev/null and b/assets/images/image14.png differ
diff --git a/assets/images/image15.png b/assets/images/image15.png
new file mode 100644
index 0000000..1781831
Binary files /dev/null and b/assets/images/image15.png differ
diff --git a/assets/images/image16.png b/assets/images/image16.png
new file mode 100644
index 0000000..6d13f36
Binary files /dev/null and b/assets/images/image16.png differ
diff --git a/assets/images/image17.png b/assets/images/image17.png
new file mode 100644
index 0000000..504390a
Binary files /dev/null and b/assets/images/image17.png differ
diff --git a/assets/images/image18.png b/assets/images/image18.png
new file mode 100644
index 0000000..debe6b4
Binary files /dev/null and b/assets/images/image18.png differ
diff --git a/assets/images/image19.png b/assets/images/image19.png
new file mode 100644
index 0000000..2cd44ad
Binary files /dev/null and b/assets/images/image19.png differ
diff --git a/assets/images/image2.png b/assets/images/image2.png
new file mode 100644
index 0000000..cc27329
Binary files /dev/null and b/assets/images/image2.png differ
diff --git a/assets/images/image20.png b/assets/images/image20.png
new file mode 100644
index 0000000..bcd771f
Binary files /dev/null and b/assets/images/image20.png differ
diff --git a/assets/images/image21.png b/assets/images/image21.png
new file mode 100644
index 0000000..02a08ff
Binary files /dev/null and b/assets/images/image21.png differ
diff --git a/assets/images/image22.png b/assets/images/image22.png
new file mode 100644
index 0000000..9eff691
Binary files /dev/null and b/assets/images/image22.png differ
diff --git a/assets/images/image23.png b/assets/images/image23.png
new file mode 100644
index 0000000..3900d5c
Binary files /dev/null and b/assets/images/image23.png differ
diff --git a/assets/images/image24.png b/assets/images/image24.png
new file mode 100644
index 0000000..a087ba0
Binary files /dev/null and b/assets/images/image24.png differ
diff --git a/assets/images/image25.png b/assets/images/image25.png
new file mode 100644
index 0000000..2f6b9b2
Binary files /dev/null and b/assets/images/image25.png differ
diff --git a/assets/images/image26.png b/assets/images/image26.png
new file mode 100644
index 0000000..4d3296c
Binary files /dev/null and b/assets/images/image26.png differ
diff --git a/assets/images/image27.png b/assets/images/image27.png
new file mode 100644
index 0000000..18a8c37
Binary files /dev/null and b/assets/images/image27.png differ
diff --git a/assets/images/image28.png b/assets/images/image28.png
new file mode 100644
index 0000000..fd6a157
Binary files /dev/null and b/assets/images/image28.png differ
diff --git a/assets/images/image29.png b/assets/images/image29.png
new file mode 100644
index 0000000..30e5c7a
Binary files /dev/null and b/assets/images/image29.png differ
diff --git a/assets/images/image3.png b/assets/images/image3.png
new file mode 100644
index 0000000..a58d6ee
Binary files /dev/null and b/assets/images/image3.png differ
diff --git a/assets/images/image30.png b/assets/images/image30.png
new file mode 100644
index 0000000..18ad952
Binary files /dev/null and b/assets/images/image30.png differ
diff --git a/assets/images/image31.png b/assets/images/image31.png
new file mode 100644
index 0000000..82081c2
Binary files /dev/null and b/assets/images/image31.png differ
diff --git a/assets/images/image32.png b/assets/images/image32.png
new file mode 100644
index 0000000..b3ddec4
Binary files /dev/null and b/assets/images/image32.png differ
diff --git a/assets/images/image33.png b/assets/images/image33.png
new file mode 100644
index 0000000..ae80178
Binary files /dev/null and b/assets/images/image33.png differ
diff --git a/assets/images/image34.png b/assets/images/image34.png
new file mode 100644
index 0000000..9985a0e
Binary files /dev/null and b/assets/images/image34.png differ
diff --git a/assets/images/image35.png b/assets/images/image35.png
new file mode 100644
index 0000000..781e4bf
Binary files /dev/null and b/assets/images/image35.png differ
diff --git a/assets/images/image36.png b/assets/images/image36.png
new file mode 100644
index 0000000..5058d88
Binary files /dev/null and b/assets/images/image36.png differ
diff --git a/assets/images/image37.png b/assets/images/image37.png
new file mode 100644
index 0000000..218e18c
Binary files /dev/null and b/assets/images/image37.png differ
diff --git a/assets/images/image38.png b/assets/images/image38.png
new file mode 100644
index 0000000..8392af1
Binary files /dev/null and b/assets/images/image38.png differ
diff --git a/assets/images/image39.png b/assets/images/image39.png
new file mode 100644
index 0000000..a73a70c
Binary files /dev/null and b/assets/images/image39.png differ
diff --git a/assets/images/image4.png b/assets/images/image4.png
new file mode 100644
index 0000000..80dd16b
Binary files /dev/null and b/assets/images/image4.png differ
diff --git a/assets/images/image40.png b/assets/images/image40.png
new file mode 100644
index 0000000..96eff19
Binary files /dev/null and b/assets/images/image40.png differ
diff --git a/assets/images/image41.png b/assets/images/image41.png
new file mode 100644
index 0000000..3f15519
Binary files /dev/null and b/assets/images/image41.png differ
diff --git a/assets/images/image42.png b/assets/images/image42.png
new file mode 100644
index 0000000..47155a0
Binary files /dev/null and b/assets/images/image42.png differ
diff --git a/assets/images/image43.png b/assets/images/image43.png
new file mode 100644
index 0000000..fbc2d7c
Binary files /dev/null and b/assets/images/image43.png differ
diff --git a/assets/images/image5.png b/assets/images/image5.png
new file mode 100644
index 0000000..f0ee64b
Binary files /dev/null and b/assets/images/image5.png differ
diff --git a/assets/images/image6.png b/assets/images/image6.png
new file mode 100644
index 0000000..d1df2b8
Binary files /dev/null and b/assets/images/image6.png differ
diff --git a/assets/images/image7.png b/assets/images/image7.png
new file mode 100644
index 0000000..f7d4ad5
Binary files /dev/null and b/assets/images/image7.png differ
diff --git a/assets/images/image8.png b/assets/images/image8.png
new file mode 100644
index 0000000..a77a4f3
Binary files /dev/null and b/assets/images/image8.png differ
diff --git a/assets/images/image9.png b/assets/images/image9.png
new file mode 100644
index 0000000..db348a8
Binary files /dev/null and b/assets/images/image9.png differ
diff --git a/assets/js/navbar.js b/assets/js/navbar.js
new file mode 100644
index 0000000..ae48fa5
--- /dev/null
+++ b/assets/js/navbar.js
@@ -0,0 +1,33 @@
+// created by Harymahayana07
+document
+ .querySelector("#nav__modal_button-menu")
+ .addEventListener("click", toggleClass);
+document
+ .querySelector(".nav__modal_button-back")
+ .addEventListener("click", toggleClassBack);
+document
+ .querySelector("#nav__modal_button-search")
+ .addEventListener("click", searchClass);
+document
+ .querySelector(".nav__modal_button-search-back")
+ .addEventListener("click", searchClassBack);
+
+function toggleClass() {
+ var navModal = document.querySelector(".nav__modal__hamburger");
+ navModal.style.display =
+ navModal.style.display === "block" ? "none" : "block";
+}
+function toggleClassBack() {
+ var navModal = document.querySelector(".nav__modal__hamburger");
+ navModal.style.display = navModal.style.display === "none" ? "block" : "none";
+}
+function searchClass() {
+ var searchModal = document.querySelector(".nav__modal__search");
+ searchModal.style.display =
+ searchModal.style.display === "block" ? "none" : "block";
+}
+function searchClassBack() {
+ var searchModal = document.querySelector(".nav__modal__search");
+ searchModal.style.display =
+ searchModal.style.display === "none" ? "block" : "none";
+}
\ No newline at end of file
diff --git a/assets/js/section1.js b/assets/js/section1.js
new file mode 100644
index 0000000..f99adb0
--- /dev/null
+++ b/assets/js/section1.js
@@ -0,0 +1,37 @@
+$(document).ready(function () {
+ $(".section__1-carousel").slick({
+ autoplay: true,
+ autoplaySpeed: 2500,
+ slidesToShow: 3,
+ slidesToScroll: 1,
+ centerMode: true,
+ focusOnSelect: true,
+ nextArrow: false,
+ prevArrow: false,
+ infinite: true,
+ responsive: [
+ {
+ breakpoint: 748,
+ settings: {
+ autoplay: true,
+ autoplaySpeed: 2500,
+ slidesToShow: 1,
+ slidesToScroll: 1,
+ centerMode: true,
+ focusOnSelect: true,
+ nextArrow: false,
+ prevArrow: false,
+ infinite: true,
+ },
+ },
+ ],
+ });
+
+ $(".section__1-button-prev").on("click", function () {
+ $(".section__1-carousel").slick("slickPrev");
+ });
+
+ $(".section__1-button-next").on("click", function () {
+ $(".section__1-carousel").slick("slickNext");
+ });
+});
diff --git a/assets/js/section10.js b/assets/js/section10.js
new file mode 100644
index 0000000..b15dac9
--- /dev/null
+++ b/assets/js/section10.js
@@ -0,0 +1,75 @@
+const filterButtons = document.querySelectorAll(
+ ".section__10_filter-button button"
+);
+const filterableCards = document.querySelectorAll(
+ ".section__10_filterable-card .section__10_card"
+);
+const cardsToShow = 18;
+
+let visibleCards = [];
+let currentFilter = "section__10_all";
+
+const loadMoreButton = document.querySelector(".section__10_btnn-load");
+loadMoreButton.style.display = "none";
+
+const filterCards = (e) => {
+ document
+ .querySelector(".section__10_active")
+ .classList.remove("section__10_active");
+ e.target.classList.add("section__10_active");
+ currentFilter = e.target.dataset.name;
+ visibleCards.length = 0;
+ loadMoreButton.innerText = "Klik Untuk Melihat Item Baru Lainya";
+
+ filterableCards.forEach((card, index) => {
+ const cardCategory = card.dataset.name;
+
+ card.classList.add("section__10_hide");
+
+ if (cardCategory === currentFilter || currentFilter === "section__10_all") {
+ if (visibleCards.length < cardsToShow) {
+ card.classList.remove("section__10_hide");
+ visibleCards.push(index);
+ }
+ }
+ });
+
+ handleLoadMoreButton();
+};
+
+filterButtons.forEach((button) =>
+ button.addEventListener("click", filterCards)
+);
+
+loadMoreButton.addEventListener("click", loadMoreCards);
+
+function handleLoadMoreButton() {
+ if (visibleCards.length < filterableCards.length) {
+ loadMoreButton.style.display = "block";
+ }
+}
+
+function loadMoreCards() {
+ const nextVisibleCards = visibleCards.length + cardsToShow;
+ let anyMoreCards = false;
+
+ for (let i = visibleCards.length; i < nextVisibleCards; i++) {
+ if (
+ i < filterableCards.length &&
+ (currentFilter === "section__10_all" ||
+ filterableCards[i].dataset.name === currentFilter)
+ ) {
+ filterableCards[i].classList.remove("section__10_hide");
+ visibleCards.push(i);
+ anyMoreCards = true;
+ }
+ }
+
+ handleLoadMoreButton();
+
+ if (!anyMoreCards) {
+ loadMoreButton.innerText = "Tidak ada item lainnya";
+ }
+}
+
+filterButtons[0].click();
diff --git a/assets/js/section2.js b/assets/js/section2.js
new file mode 100644
index 0000000..cd1b801
--- /dev/null
+++ b/assets/js/section2.js
@@ -0,0 +1,20 @@
+$(document).ready(function () {
+ $(".section__2-carousel").slick({
+ infinite: true,
+ autoplaySpeed: 1500,
+ autoplay: true,
+ slidesToShow: 1,
+ focusOnSelect: true,
+ centerMode: true,
+ nextArrow: false,
+ prevArrow: false,
+ });
+});
+
+ $(".section__2-button-prev").on("click", function () {
+ $(".section__2-carousel").slick("slickPrev");
+ });
+
+ $(".section__2-button-next").on("click", function () {
+ $(".section__2-carousel").slick("slickNext");
+ });
\ No newline at end of file
diff --git a/assets/js/section4.js b/assets/js/section4.js
new file mode 100644
index 0000000..1df49af
--- /dev/null
+++ b/assets/js/section4.js
@@ -0,0 +1,19 @@
+// createdby affu satouru
+$('.section__4-carousel').slick({
+slidesToShow: 3,
+slidesToScroll: 1,
+autoplay: true,
+autoplaySpeed: 2000,
+nextArrow: false,
+prevArrow: false,
+focusOnSelect: true,
+centerMode: true,
+});
+
+$(".section__4-button-prev").on("click", function () {
+ $(".section__4-carousel").slick("slickPrev");
+ });
+
+ $(".section__4-button-next").on("click", function () {
+ $(".section__4-carousel").slick("slickNext");
+ });
\ No newline at end of file
diff --git a/assets/js/section5.js b/assets/js/section5.js
new file mode 100644
index 0000000..af41e7f
--- /dev/null
+++ b/assets/js/section5.js
@@ -0,0 +1,11 @@
+// createdby affu satouru
+$(document).ready(function () {
+ $(".section__5-container-card").slick({
+ arrows: false,
+ infinite: true,
+ slidesToShow: 6,
+ slidesToScroll: 6,
+ variableWidth: true,
+ });
+ });
+
\ No newline at end of file
diff --git a/assets/js/section6.js b/assets/js/section6.js
new file mode 100644
index 0000000..a94f98f
--- /dev/null
+++ b/assets/js/section6.js
@@ -0,0 +1,11 @@
+$(document).ready(function () {
+ $('.section_6_lazyload_wrapper').slick({
+ arrows: false,
+ slidesToShow: 3,
+ slidesToScroll: 1,
+ autoplay: true,
+ autoplaySpeed: 1000,
+ infinite: true,
+ dosts: false,
+ });
+});
diff --git a/assets/js/section7.js b/assets/js/section7.js
new file mode 100644
index 0000000..76086c4
--- /dev/null
+++ b/assets/js/section7.js
@@ -0,0 +1,11 @@
+// js untuk section 7 created by ahmad fahmi faza
+
+$(document).ready(function () {
+ $(".section__7-container-card").slick({
+ arrows: false,
+ infinite: true,
+ slidesToShow: 6,
+ slidesToScroll: 6,
+ variableWidth: true,
+ });
+});
diff --git a/assets/js/section8.js b/assets/js/section8.js
new file mode 100644
index 0000000..d975691
--- /dev/null
+++ b/assets/js/section8.js
@@ -0,0 +1,11 @@
+// js untuk section 8 created by ahmad fahmi faza
+
+$(document).ready(function () {
+ $(".section__8-container-card").slick({
+ arrows: false,
+ infinite: true,
+ slidesToShow: 6,
+ slidesToScroll: 6,
+ variableWidth: true,
+ });
+});
diff --git a/assets/js/section9.js b/assets/js/section9.js
new file mode 100644
index 0000000..176ea1c
--- /dev/null
+++ b/assets/js/section9.js
@@ -0,0 +1,11 @@
+// js untuk section 9 created by ahmad fahmi faza
+
+$(document).ready(function () {
+ $(".section__9-container-card").slick({
+ arrows: false,
+ infinite: true,
+ slidesToShow: 6,
+ slidesToScroll: 6,
+ variableWidth: true,
+ });
+});
diff --git a/index.html b/index.html
index b932604..1677142 100644
--- a/index.html
+++ b/index.html
@@ -1,106 +1,2507 @@
-
-
-
-
-
-
-
-
- Kyou Hobby Shop - Anime Figure & Merchandise
-
-
-
-