diff --git a/assets/css/navbar.css b/assets/css/navbar.css index e331b4f..b5f0a8b 100644 --- a/assets/css/navbar.css +++ b/assets/css/navbar.css @@ -1,98 +1,100 @@ - - /* 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 +/* Nav Created By I Made Hary Mahayana */ +header * { + box-sizing: content-box; +} +.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 */ diff --git a/assets/css/section1.css b/assets/css/section1.css new file mode 100644 index 0000000..039e127 --- /dev/null +++ b/assets/css/section1.css @@ -0,0 +1,89 @@ +/* Section 1 Created By I Made Hary Mahayana */ +.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; +} +/* end Section 1 */ \ No newline at end of file diff --git a/assets/css/styles.css b/assets/css/styles.css index 0ffa9e8..5d9fe24 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -1,7 +1,8 @@ +@import './section1.css'; @import './section2.css'; @import './section3.css'; -@import './section10.css'; @import './section6.css'; @import './section7.css'; @import './section8.css'; @import './section9.css'; +@import './section10.css'; \ No newline at end of file diff --git a/assets/js/section1.js b/assets/js/section1.js new file mode 100644 index 0000000..b49c4f6 --- /dev/null +++ b/assets/js/section1.js @@ -0,0 +1,20 @@ +$(document).ready(function () { + $(".section__1-carousel").slick({ + autoplay: true, + autoplaySpeed: 2500, + slidesToShow: 3, + slidesToScroll: 1, + centerMode: true, + focusOnSelect: true, + nextArrow: false, + prevArrow: false, + }); + + $(".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/index.html b/index.html index 1bb920a..79296f1 100644 --- a/index.html +++ b/index.html @@ -69,24 +69,166 @@
- -
-
- - -
-

-
-
- + +
+
+
+
+
+ +
+ + Slider-Gambar-Carousel + + + Slider-Gambar-Carousel + + + Slider-Gambar-Carousel + + + Slider-Gambar-Carousel + + + Slider-Gambar-Carousel + + + Slider-Gambar-Carousel + + + Slider-Gambar-Carousel + + + Slider-Gambar-Carousel + + + Slider-Gambar-Carousel + + + Slider-Gambar-Carousel + + + Slider-Gambar-Carousel + + + Slider-Gambar-Carousel + + + Slider-Gambar-Carousel + + + Slider-Gambar-Carousel + +
+ +
+
+
+
+
+
@@ -1750,6 +1892,7 @@
+