From 4d906d089fe568af433a0b54e148f9337cdfe263 Mon Sep 17 00:00:00 2001 From: Mujahid Ansori Majid Date: Tue, 3 Oct 2023 23:42:01 +0700 Subject: [PATCH 1/7] finishing 80% section 2 and 3 --- .vscode/settings.json | 3 + assets/css/navbar.css | 4 +- assets/css/root.css | 14 +- assets/css/section2.css | 138 ++++++++++++++ assets/css/section3.css | 30 +++ assets/css/styles.css | 2 + assets/js/section2.js | 16 ++ index.html | 394 +++++++++++++++++++++++++++++++++++++++- 8 files changed, 598 insertions(+), 3 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 assets/css/section2.css create mode 100644 assets/css/section3.css create mode 100644 assets/css/styles.css create mode 100644 assets/js/section2.js diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6b665aa --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/assets/css/navbar.css b/assets/css/navbar.css index f261558..1e31771 100644 --- a/assets/css/navbar.css +++ b/assets/css/navbar.css @@ -94,4 +94,6 @@ .nav__cart { width: 47px; } - /* End Nav */ \ No newline at end of file + /* 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 @@ + +
+
+
+
+ + Ngaku2 Waifu Keqing
+ Ehh, besoknya pake Ayaka
+ mau adain Community Gathering?
+ Gath di Alpha Store jawabannya! + + +
+
+
+ + + + + +
+
+
+ +
+
+ + + +
+ +
+

Categories

+
+
+
+ +
+
+

Nendroid

+
+
+
+
+ +
+
+

Scaled Figure

+
+
+
+
+ +
+
+

Prize Figure

+
+
+
+
+ +
+
+

Pop up Parade

+
+
+
+
+ +
+
+

Model Kit

+
+
+
+
+ +
+
+

Figma

+
+
+
+
+ +
+
+

Merchandise

+
+
+
+
+ +
+
+

Plush

+
+
+
+
+ +
+
+

Light Novel

+
+
+
+
+ +
+
+

Mangga

+
+
+
+
+ +
+ + + + - \ No newline at end of file + From d0244863526c1b78deeadb9e74f6440ff39e3c97 Mon Sep 17 00:00:00 2001 From: Mujahid Ansori Majid Date: Tue, 3 Oct 2023 23:43:55 +0700 Subject: [PATCH 2/7] adding git ignore --- .gitignore | 1 + 1 file changed, 1 insertion(+) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..722d5e7 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.vscode From 3e2f2035c86af2f3b7f3a5596298641628974fd3 Mon Sep 17 00:00:00 2001 From: I Made Hary Mahayana <72241009+harymahayana07@users.noreply.github.com> Date: Sun, 8 Oct 2023 15:23:35 +0800 Subject: [PATCH 3/7] nothing change --- assets/css/navbar.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/assets/css/navbar.css b/assets/css/navbar.css index 1e31771..c73679d 100644 --- a/assets/css/navbar.css +++ b/assets/css/navbar.css @@ -95,5 +95,3 @@ width: 47px; } /* End Nav */ - - \ No newline at end of file From 8be9b868224d2b7f92e6a123060d343833512ca7 Mon Sep 17 00:00:00 2001 From: I Made Hary Mahayana <72241009+harymahayana07@users.noreply.github.com> Date: Sun, 8 Oct 2023 15:26:08 +0800 Subject: [PATCH 4/7] nothing change --- .vscode/settings.json | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 6b665aa..8b13789 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1 @@ -{ - "liveServer.settings.port": 5501 -} + From bf3734a4817667c79d2121e83d41f931812bc93c Mon Sep 17 00:00:00 2001 From: I Made Hary Mahayana <72241009+harymahayana07@users.noreply.github.com> Date: Sun, 8 Oct 2023 15:28:29 +0800 Subject: [PATCH 5/7] Delete .vscode/settings.json --- .vscode/settings.json | 1 - 1 file changed, 1 deletion(-) delete mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index 8b13789..0000000 --- a/.vscode/settings.json +++ /dev/null @@ -1 +0,0 @@ - From 9bababe26791ce4149a0bc507c698c79dcbdcd00 Mon Sep 17 00:00:00 2001 From: I Made Hary Mahayana <72241009+harymahayana07@users.noreply.github.com> Date: Sun, 8 Oct 2023 15:29:02 +0800 Subject: [PATCH 6/7] Delete .gitignore --- .gitignore | 1 - 1 file changed, 1 deletion(-) delete mode 100644 .gitignore diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 722d5e7..0000000 --- a/.gitignore +++ /dev/null @@ -1 +0,0 @@ -.vscode From b9e02279645a679581bb6153c9b911838579c883 Mon Sep 17 00:00:00 2001 From: I Made Hary Mahayana <72241009+harymahayana07@users.noreply.github.com> Date: Sun, 8 Oct 2023 15:29:40 +0800 Subject: [PATCH 7/7] Delete assets/css/navbar.css --- assets/css/navbar.css | 97 ------------------------------------------- 1 file changed, 97 deletions(-) delete mode 100644 assets/css/navbar.css diff --git a/assets/css/navbar.css b/assets/css/navbar.css deleted file mode 100644 index c73679d..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 */