- Ehh, besoknya pake Ayaka
- mau adain Community Gathering?
- Gath di Alpha Store jawabannya! - -
diff --git a/assets/css/section7.css b/assets/css/section7.css new file mode 100644 index 0000000..36b8b13 --- /dev/null +++ b/assets/css/section7.css @@ -0,0 +1,90 @@ +/* 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; +} +.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; +} +.section__7-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__7-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__7-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__7-product__date { + font-size: x-small; + color: gray; + padding: 0 0 10px 0; +} +.section__7-product__price { + color: #fc4c02; + font-weight: 600; +} + +/* end section 7 */ diff --git a/assets/css/section8.css b/assets/css/section8.css new file mode 100644 index 0000000..470425e --- /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; +} +.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; +} +.section__8-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__8-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__8-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__8-product__date { + font-size: x-small; + color: gray; + padding: 0 0 10px 0; +} +.section__8-product__price { + color: #fc4c02; + font-weight: 600; +} + +/* end section 8 */ diff --git a/assets/css/section9.css b/assets/css/section9.css new file mode 100644 index 0000000..6470c1c --- /dev/null +++ b/assets/css/section9.css @@ -0,0 +1,90 @@ +/* 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; +} +.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; +} +.section__9-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__9-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__9-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__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 index b8229c9..3c413c9 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -1,3 +1,6 @@ @import "./section2.css"; @import "./section3.css"; -@import "./section10.css"; \ No newline at end of file +@import "./section10.css"; +@import "./section7.css"; +@import "./section8.css"; +@import "./section9.css"; 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 a5244eb..3e0970d 100644 --- a/index.html +++ b/index.html @@ -1,879 +1,2018 @@ +
+ + + + + + + + - - - - - - - - - + + + - - - + + - - + + - - +