diff --git a/assets/css/style.css b/assets/css/style.css deleted file mode 100644 index d32f9c5..0000000 --- a/assets/css/style.css +++ /dev/null @@ -1,1146 +0,0 @@ -/*-----------------------------------*\ - #style.css -\*-----------------------------------*/ - -/** - * copyright 2022 codewithsadee - */ - - - - - -/*-----------------------------------*\ - #CUSTOM PROPERTY -\*-----------------------------------*/ - -:root { - - /** - * colors - */ - - --sefety-orange_10: hsla(24, 100%, 50%, 0.1); - --sefety-orange: hsl(24, 100%, 50%); - --sonic-silver: hsl(220, 1%, 48%); - --gunmetal_10: hsla(217, 21%, 16%, 0.1); - --davys-gray: hsl(220, 2%, 31%); - --light-gray: hsl(0, 0%, 80%); - --gunmetal: hsl(217, 21%, 16%); - --cultured: hsl(0, 0%, 95%); - --black_40: hsla(0, 0%, 0%, 0.4); - --black_25: hsla(0, 0%, 0%, 0.25); - --black_15: hsla(0, 0%, 0%, 0.15); - --white: hsl(0, 0%, 100%); - --snow: hsl(345, 20%, 96%); - - /** - * typography - */ - - --ff-jost: 'Jost', sans-serif; - - --fs-1: 3.8rem; - --fs-2: 2.2rem; - --fs-3: 2rem; - --fs-4: 1.8rem; - --fs-5: 1.4rem; - - --fw-600: 600; - --fw-500: 500; - - /** - * spacing - */ - - --section-padding: 80px; - - /** - * shadow - */ - - --shadow-1: 0px 2px 15px hsla(0, 0%, 0%, 0.05); - --shadow-2: -10px 10px 40px -2px hsla(217, 21%, 16%, 0.05); - - /** - * border radius - */ - - --radius-pill: 500px; - --radius-circle: 50%; - --radius-4: 4px; - - /** - * transition - */ - - --transition-1: 0.25s ease; - --transition-2: 0.5s ease; - --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28); - --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96); - -} - - - - - -/*-----------------------------------*\ - #RESET -\*-----------------------------------*/ - -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -li { list-style: none; } - -a, -img, -span, -button, -ion-icon { display: block; } - -a { - color: inherit; - text-decoration: none; -} - -img { height: auto; } - -button { - background: none; - border: none; - font: inherit; - cursor: pointer; -} - -ion-icon { pointer-events: none; } - -html { - font-family: var(--ff-jost); - font-size: 10px; - scroll-behavior: smooth; -} - -body { - background-color: var(--white); - color: var(--davys-gray); - font-size: 1.6rem; - line-height: 1.7; -} - -body.active { overflow: hidden; } - -:focus-visible { outline-offset: 4px; } - -::-webkit-scrollbar { width: 10px; } - -::-webkit-scrollbar-track { background-color: hsl(0, 0%, 98%); } - -::-webkit-scrollbar-thumb { background-color: hsl(0, 0%, 80%); } - -::-webkit-scrollbar-thumb:hover { background-color: hsl(0, 0%, 70%); } - - - - - -/*-----------------------------------*\ - #REUSED STYLE -\*-----------------------------------*/ - -.container { padding-inline: 15px; } - -.section { padding-block: var(--section-padding); } - -.h1, -.h2, -.h3, -.h4 { - color: var(--gunmetal); - line-height: 1.3; -} - -.h1, -.h2 { font-size: var(--fs-1); } - -.h3 { font-size: var(--fs-2); } - -.h3, -.h4 { font-weight: var(--fw-600); } - -.h4 { font-size: var(--fs-3); } - -.section-title .span { - display: inline-block; - color: var(--sefety-orange); -} - -.section-text { font-size: var(--fs-3); } - -.btn { - background-color: var(--bg, var(--gunmetal)); - color: var(--color, var(--white)); - padding: var(--padding, 10px 20px); - border: 2px solid var(--border-color, var(--gunmetal)); - border-radius: var(--radius-4); - transition: var(--transition-1); -} - -.btn-primary { - --bg: var(--sefety-orange); - --color: var(--white); - --border-color: var(--sefety-orange); -} - -.btn-primary:is(:hover, :focus) { - --bg: transparent; - --color: var(--sefety-orange); -} - -.btn-secondary:is(:hover, :focus) { - --bg: var(--sefety-orange); - --border-color: var(--sefety-orange); -} - -.btn-outline { - --bg: transparent; - --color: var(--sefety-orange); - --border-color: var(--sefety-orange); - --padding: 10px 28px; - font-weight: var(--fw-500); -} - -.btn-outline:is(:hover, :focus) { - --color: var(--white); - --bg: var(--sefety-orange); -} - -.has-shape { - position: relative; - z-index: 1; -} - -.shape { - position: absolute; - z-index: -1; -} - -.w-100 { width: 100%; } - -.title-wrapper { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - align-items: flex-end; - gap: 30px; - margin-block-end: 60px; -} - -.grid-list { - display: grid; - gap: 30px; -} - -.card-text { - font-size: var(--fs-4); - text-align: justify; -} - -.btn-link { - display: flex; - align-items: center; - gap: 5px; - color: var(--gunmetal); - font-weight: var(--fw-500); - transition: var(--transition-1); -} - -.btn-link:is(:hover, :focus) { color: var(--sefety-orange); } - -.img-holder { - aspect-ratio: var(--width) / var(--height); - background-color: var(--light-gray); -} - -.img-cover { - width: 100%; - height: 100%; - object-fit: cover; - transition: var(--transition-2); -} - -.hover\:underline { - display: inline; - background-image: linear-gradient(to right, var(--gunmetal), var(--gunmetal)); - background-repeat: no-repeat; - max-width: max-content; - background-position-y: bottom; - background-size: 0 2px; - transition: var(--transition-2); -} - -.hover\:underline:is(:hover, :focus) { background-size: 100% 2px; } - - - - - -/*-----------------------------------*\ - #HEADER -\*-----------------------------------*/ - -.header .btn { display: none; } - -.header { - position: absolute; - top: 0; - left: 0; - width: 100%; - padding-block: 25px; - z-index: 4; -} - -.header.active { - position: fixed; - background-color: var(--white); - box-shadow: var(--shadow-1); - transform: translateY(-100%); - animation: slideIn 0.5s ease forwards; -} - -@keyframes slideIn { - 0% { transform: translateY(-100%); } - 100% { transform: translateY(0); } -} - -.header .container { - display: flex; - justify-content: space-between; - align-items: center; - gap: 30px; -} - -.nav-open-btn { - background-color: var(--gunmetal_10); - color: var(--gunmetal); - font-size: 20px; - padding: 10px; - border-radius: var(--radius-circle); - transition: var(--transition-1); -} - -.nav-open-btn ion-icon { --ionicon-stroke-width: 50px; } - -.nav-open-btn:is(:hover, :focus) { - background-color: var(--sefety-orange); - color: var(--white); -} - -.navbar { - position: fixed; - top: 0; - left: -450px; - width: calc(100% - 70px); - max-width: 450px; - height: 100vh; - background-color: var(--cultured); - z-index: 1; - visibility: hidden; - transition: 0.25s var(--cubic-in); -} - -.navbar.active { - transform: translate(450px); - visibility: visible; - transition: 0.5s var(--cubic-out); -} - -.navbar-title { - color: var(--black_40); - text-align: center; - padding: 12px; - border-block-end: 1px solid var(--black_15); -} - -.navbar-item { border-block-end: 1px solid var(--black_15); } - -.navbar-link { - color: var(--gunmetal); - padding: 15px 30px; - transition: var(--transition-1); -} - -.navbar-link:is(:hover, :focus) { color: var(--sefety-orange); } - -.overlay { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100vh; - background-color: var(--black_25); - opacity: 0; - transition: var(--transition-1); - pointer-events: none; -} - -.overlay.active { - pointer-events: all; - opacity: 1; -} - - - - - -/*-----------------------------------*\ - #HERO -\*-----------------------------------*/ - -.hero { padding-block-start: calc(var(--section-padding) + 90px); } - -.hero .container { - display: grid; - gap: 40px; -} - -.hero .section-text { - margin-block: 25px 40px; - text-align: justify; -} - -.hero-banner .w-100 { - max-width: 70%; - margin-inline: auto; -} - -.hero .shape { - bottom: -10px; - left: 10px; -} - - - - - -/*-----------------------------------*\ - #SERVICE -\*-----------------------------------*/ - -.service { background-color: var(--snow); } - -.service .section-text { - text-align: justify; - margin-block-end: 20px; -} - -.service-card { - background-color: var(--white); - padding: 50px 30px; - border-radius: var(--radius-4); - box-shadow: var(--shadow-2); -} - -.service-card .card-title { - margin-block: 35px 20px; - transition: var(--transition-1); -} - -.service-card .card-title:is(:hover, :focus) { color: var(--sefety-orange); } - -.service .shape-2 { display: none; } - -.service .shape-1 { - bottom: 0; - left: -50px; -} - - - - - -/*-----------------------------------*\ - #ABOUT -\*-----------------------------------*/ - -.about .container { - display: grid; - gap: 50px; -} - -.about-banner .w-100 { max-width: 90%; } - -.about .shape { - top: -25px; - right: -5px; -} - -.about .section-text { - font-size: unset; - margin-block: 30px 40px; -} - -.about .btn { max-width: max-content; } - - - - - -/*-----------------------------------*\ - #PROJECT -\*-----------------------------------*/ - -.project { background-color: var(--snow); } - -.project .section-title { margin-block-end: 30px; } - -.project-list { - display: flex; - flex-wrap: wrap; - gap: 60px; -} - -.project-card .card-banner { margin-block-end: 35px; } - -.project-card .img-holder { overflow: hidden; } - -.project-card:is(:hover, :focus-within) .img-cover { transform: scale(1.2); } - -.project-card .card-content { - display: flex; - justify-content: space-between; - align-items: center; - gap: 25px; -} - -.project-card .h3 { - --fs-2: 2.4rem; - margin-block-end: 4px; -} - -.project-card .card-tag { font-size: var(--fs-4); } - -.project-card .card-link { - color: var(--gunmetal); - font-size: 22px; - padding: 14px; - border-radius: var(--radius-circle); - transform: rotate(-45deg); - transition: var(--transition-1); -} - -.project-card .card-link:is(:hover, :focus) { - background-color: var(--sefety-orange_10); - color: var(--sefety-orange); -} - - - - - -/*-----------------------------------*\ - #BLOG -\*-----------------------------------*/ - -.blog .grid-list { gap: 50px; } - -.blog-card .card-banner { - position: relative; - overflow: hidden; -} - -.blog-card .card-banner:is(:hover, :focus) .img-cover { transform: scale(1.2); } - -.blog-card .card-tag { - position: absolute; - bottom: 10px; - right: 10px; - background-color: var(--white); - color: var(--gunmetal); - font-size: var(--fs-5); - font-weight: var(--fw-500); - text-transform: uppercase; - padding: 4px 10px; - border-radius: var(--radius-pill); - transition: var(--transition-1); -} - -.blog-card .card-tag:is(:hover, :focus) { - background-color: var(--sefety-orange); - color: var(--white); -} - -.blog-card :is(.meta-list, .meta-item) { - display: flex; - align-items: center; -} - -.blog-card .meta-list { - column-gap: 20px; - flex-wrap: wrap; - margin-block: 25px 15px; -} - -.blog-card .meta-item { column-gap: 5px; } - -.blog-card .meta-item-text { color: var(--sonic-silver); } - -.blog-card .h3 { --fs-2: 2.8rem; } - -.blog-card .btn-link { - font-size: var(--fs-4); - margin-block-start: 20px; -} - - - - - -/*-----------------------------------*\ - #FOOTER -\*-----------------------------------*/ - -.footer { color: var(--gunmetal); } - -.footer-top { - display: grid; - gap: 30px; - border-block: 1px solid var(--light-gray); -} - -.footer-link { - font-size: var(--fs-4); - transition: var(--transition-1); -} - -.footer-link:is(:hover, :focus) { color: var(--sefety-orange); } - -.footer-brand .footer-link:not(:last-of-type) { margin-block: 30px 15px; } - -.social-list { - display: flex; - gap: 15px; - margin-block-start: 25px; -} - -.social-link { - font-size: 20px; - transition: var(--transition-1); -} - -.social-link:is(:hover, :focus) { color: var(--sefety-orange); } - -.footer-list .footer-link { padding-block: 5px; } - -.footer-list-title { margin-block-end: 20px; } - -.copyright { - padding-block: 35px; - text-align: center; -} - - - - - -/*-----------------------------------*\ - #MEDIA QUERIES -\*-----------------------------------*/ - -/** - * responsive for large than 575px screen - */ - -@media (min-width: 575px) { - - /** - * CUSTOM PROPERTY - */ - - :root { - - /** - * typography - */ - - --fs-1: 5rem; - - } - - - - /** - * REUSED STYLE - */ - - .container { - max-width: 540px; - width: 100%; - margin-inline: auto; - } - - - - /** - * HERO - */ - - .hero-banner .w-100 { max-width: 100%; } - - .hero .shape { - bottom: 0; - left: -50px; - } - - - - /** - * SERVICE - */ - - .service .grid-list { - grid-template-columns: 1fr 1fr; - column-gap: 25px; - } - - - - /** - * PROJECT - */ - - .project-list > * { min-width: 100%; } - - - - /** - * FOOTER - */ - - .footer-top { grid-template-columns: 1fr 1fr; } - -} - - - - - -/** - * responsive for large than 768px screen - */ - -@media (min-width: 768px) { - - /** - * REUSED STYLE - */ - - .container { max-width: 720px; } - - .grid-list { grid-template-columns: 1fr 1fr; } - - - - /** - * HERO - */ - - .hero .container { - grid-template-columns: 1fr 0.8fr; - align-items: center; - } - - - - /** - * SERVICE - */ - - .service .title-wrapper > * { - max-width: calc(50% - 30px); - align-items: flex-start; - } - - .service .section-text { - margin-block: 0; - text-align: justify; - } - - - - /** - * ABOUT - */ - - .about .container { - grid-template-columns: 1fr 1fr; - align-items: center; - } - - - - /** - * PROJECT - */ - - .project-list > * { - min-width: calc(50% - 30px); - width: calc(50% - 30px); - } - -} - - - - - -/** - * responsive for large than 992px screen - */ - -@media (min-width: 992px) { - - /** - * CUSTOM PROPERTY - */ - - :root { - - /** - * typography - */ - - --fs-1: 6.5rem; - - /** - * spacing - */ - - --section-padding: 120px; - - } - - - - /** - * REUSED STYLE - */ - - .container { max-width: 960px; } - - .h2 { --fs-1: 5.5rem; } - - .section-text { --fs-3: 2.4rem; } - - .btn { - --padding: 10px 32px; - font-weight: var(--fw-500); - } - - .btn-secondary { --padding: 14px 32px; } - - - - /** - * FOOTER - */ - - .footer-top { grid-template-columns: 1fr 0.7fr 0.7fr 0.7fr; } - -} - - - - - -/** - * responsive for large than 1200px screen - */ - -@media (min-width: 1200px) { - - /** - * CUSTOM PROPERTY - */ - - :root { - - /** - * typography - */ - - --fs-1: 8rem; - - } - - - - /** - * REUSED STYLE - */ - - .container { max-width: 1140px; } - - .h2 { --fs-1: 7.2rem; } - - .grid-list { grid-template-columns: repeat(3, 1fr); } - - - - /** - * HEADER - */ - - .nav-open-btn, - .navbar-title { display: none; } - - .header .btn { display: block; } - - .navbar, - .navbar.active { - all: unset; - margin-inline-start: auto; - } - - .navbar-list { display: flex; } - - .navbar-item { border: none; } - - .navbar-link { - text-transform: uppercase; - font-weight: var(--fw-500); - } - - - - /** - * SERVICE - */ - - .service .grid-list { grid-template-columns: repeat(4, 1fr); } - - - - /** - * PROJECT - */ - - .project .title-wrapper > div { width: 75%; } - - .project-list > * { - min-width: calc(33.33% - 40px); - width: calc(33.33% - 40px); - } - - .project-list > *:is(:first-child, :nth-child(2)) { - width: calc(50% - 30px); - } - -} - -/* SLIDER CARD */ -/* Import Google font - Poppins */ -@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); - -.wrapper { - max-width: 1100px; - width: 100%; - position: relative; - margin: 0 auto; /* Center the wrapper horizontally */ - display: flex; - justify-content: center; - align-items: center; -} - -.wrapper i { - top: 50%; - height: 50px; - width: 50px; - cursor: pointer; - font-size: 1.25rem; - position: absolute; - text-align: center; - line-height: 50px; - background: #fff; - border-radius: 50%; - box-shadow: 0 3px 6px rgba(0,0,0,0.23); - transform: translateY(-50%); - transition: transform 0.1s linear; -} -.wrapper i:active { - transform: translateY(-50%) scale(0.85); -} -.wrapper i:first-child { - left: -22px; -} -.wrapper i:last-child { - right: -22px; -} - -.wrapper .carousel { - display: grid; - grid-auto-flow: column; - grid-auto-columns: calc((100% / 3) - 12px); - overflow-x: auto; - scroll-snap-type: x mandatory; - gap: 16px; - border-radius: 8px; - scroll-behavior: smooth; - scrollbar-width: none; -} -.carousel::-webkit-scrollbar { - display: none; -} -.carousel.no-transition { - scroll-behavior: auto; -} -.carousel.dragging { - scroll-snap-type: none; - scroll-behavior: auto; -} -.carousel.dragging .card { - cursor: grab; - user-select: none; -} -.carousel :where(.card, .img) { - display: flex; - justify-content: center; - align-items: center; -} -.carousel .card { - scroll-snap-align: start; - height: 342px; - list-style: none; - background: #fff; - cursor: pointer; - padding-bottom: 15px; - flex-direction: column; - border-radius: 8px; -} -.carousel .card .img { - background: #000000; - height: 148px; - width: 148px; - border-radius: 50%; -} -.card .img img { - width: 140px; - height: 140px; - border-radius: 50%; - object-fit: cover; - border: 4px solid #fff; -} -.carousel .card h2 { - font-weight: 500; - font-size: 1.56rem; - margin: 30px 0 5px; -} -.carousel .card span { - color: #6A6D78; - font-size: 1.31rem; -} - -@media screen and (max-width: 900px) { - .wrapper .carousel { - grid-auto-columns: calc((100% / 2) - 9px); - } -} - -@media screen and (max-width: 600px) { - .wrapper .carousel { - grid-auto-columns: 100%; - } -} -/* Batas Slider Card */ - - -/* FORM */ -.containerrr { - background-color: #ffffff; - width: 70%; - min-width: 420px; - padding: 35px 50px; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - height: 100vh; - border-radius: 10px; - box-shadow: 20px 30px 25px rgba(0,0,0,0.15); - margin: 0 auto; /* Tambahkan margin auto untuk memastikan centering */ -} - -.judul { - font-size: 30px; - text-align: center; - color: #1c093c; -} - -.subjudul { - position: relative; - margin: auto; - width: 100%; - text-align: center; - color: #606060; - font-size: 14px; - font-weight: 400; -} - -form { - width: 100%; - position: relative; - margin: 30px auto 0 auto; -} - -.rowsi { - width: 100%; - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); - grid-gap: 20px 30px; - margin-bottom: 20px; -} - -.labels { - color: #1c093c; - font-size: 14px; -} - -textarea, -.inputsn { - width: 100%; - font-weight: 400; - padding: 8px 10px; - border-radius: 5px; - border: 1.2px solid #c4cae0; - margin-top: 5px; -} - -textarea { - resize: none; -} - -textarea:focus, -input:focus { - outline: none; - border-color: #6f6df4; -} - -.buttonos { - border: none; - padding: 10px 20px; - background: linear-gradient( - 130deg, - #6f6df4, - #4c46f5 - ); - color: #ffffff; - border-radius: 3px; -} - -/* FORM */ \ No newline at end of file diff --git a/assets/images/40626.jpg b/assets/images/40626.jpg deleted file mode 100644 index 85a3b03..0000000 Binary files a/assets/images/40626.jpg and /dev/null differ diff --git a/assets/images/Thumbs.db b/assets/images/Thumbs.db deleted file mode 100644 index 48b0712..0000000 Binary files a/assets/images/Thumbs.db and /dev/null differ diff --git a/assets/images/about-banner.png b/assets/images/about-banner.png deleted file mode 100644 index c94ccd8..0000000 Binary files a/assets/images/about-banner.png and /dev/null differ diff --git a/assets/images/author-1.png b/assets/images/author-1.png deleted file mode 100644 index 76c4777..0000000 Binary files a/assets/images/author-1.png and /dev/null differ diff --git a/assets/images/author-2.png b/assets/images/author-2.png deleted file mode 100644 index 641c94e..0000000 Binary files a/assets/images/author-2.png and /dev/null differ diff --git a/assets/images/banner-shape.svg b/assets/images/banner-shape.svg deleted file mode 100644 index b001fe8..0000000 --- a/assets/images/banner-shape.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/assets/images/blog-1.png b/assets/images/blog-1.png deleted file mode 100644 index b565b7e..0000000 Binary files a/assets/images/blog-1.png and /dev/null differ diff --git a/assets/images/blog-2.png b/assets/images/blog-2.png deleted file mode 100644 index 478a7b3..0000000 Binary files a/assets/images/blog-2.png and /dev/null differ diff --git a/assets/images/blog-3.png b/assets/images/blog-3.png deleted file mode 100644 index 75f97b9..0000000 Binary files a/assets/images/blog-3.png and /dev/null differ diff --git a/assets/images/circle-shape.svg b/assets/images/circle-shape.svg deleted file mode 100644 index fb8bc4c..0000000 --- a/assets/images/circle-shape.svg +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - diff --git a/assets/images/feature-banner.png b/assets/images/feature-banner.png deleted file mode 100644 index 35fb83a..0000000 Binary files a/assets/images/feature-banner.png and /dev/null differ diff --git a/assets/images/features-shape.svg b/assets/images/features-shape.svg deleted file mode 100644 index 6b36f92..0000000 --- a/assets/images/features-shape.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - diff --git a/assets/images/hero-banner.png b/assets/images/hero-banner.png deleted file mode 100644 index 0b5a257..0000000 Binary files a/assets/images/hero-banner.png and /dev/null differ diff --git a/assets/images/hero-shape-1.svg b/assets/images/hero-shape-1.svg deleted file mode 100644 index a68d90e..0000000 --- a/assets/images/hero-shape-1.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/assets/images/logo.svg b/assets/images/logo.svg deleted file mode 100644 index 7cd4989..0000000 --- a/assets/images/logo.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/assets/images/project-1.png b/assets/images/project-1.png deleted file mode 100644 index 52a2125..0000000 Binary files a/assets/images/project-1.png and /dev/null differ diff --git a/assets/images/project-2.png b/assets/images/project-2.png deleted file mode 100644 index 0295b1d..0000000 Binary files a/assets/images/project-2.png and /dev/null differ diff --git a/assets/images/project-3.png b/assets/images/project-3.png deleted file mode 100644 index 6bcc7d4..0000000 Binary files a/assets/images/project-3.png and /dev/null differ diff --git a/assets/images/project-4.png b/assets/images/project-4.png deleted file mode 100644 index a1448bd..0000000 Binary files a/assets/images/project-4.png and /dev/null differ diff --git a/assets/images/project-5.png b/assets/images/project-5.png deleted file mode 100644 index ea829c8..0000000 Binary files a/assets/images/project-5.png and /dev/null differ diff --git a/assets/images/revo1.png b/assets/images/revo1.png deleted file mode 100644 index 046ff38..0000000 Binary files a/assets/images/revo1.png and /dev/null differ diff --git a/assets/images/service-1.svg b/assets/images/service-1.svg deleted file mode 100644 index 398df61..0000000 --- a/assets/images/service-1.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/assets/images/service-2.svg b/assets/images/service-2.svg deleted file mode 100644 index e2b43e0..0000000 --- a/assets/images/service-2.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/assets/images/service-3.svg b/assets/images/service-3.svg deleted file mode 100644 index 5e7d587..0000000 --- a/assets/images/service-3.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/assets/images/service-4.svg b/assets/images/service-4.svg deleted file mode 100644 index fa8c77b..0000000 --- a/assets/images/service-4.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/assets/images/triangle-shape-1.svg b/assets/images/triangle-shape-1.svg deleted file mode 100644 index 539e011..0000000 --- a/assets/images/triangle-shape-1.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - diff --git a/assets/js/script.js b/assets/js/script.js deleted file mode 100644 index 2da4f31..0000000 --- a/assets/js/script.js +++ /dev/null @@ -1,149 +0,0 @@ -'use strict'; - - - -/** - * add event on element - */ - -const addEventOnElem = function (elem, type, callback) { - if (elem.length > 1) { - for (let i = 0; i < elem.length; i++) { - elem[i].addEventListener(type, callback); - } - } else { - elem.addEventListener(type, callback); - } -} - - - -/** - * navbar toggle - */ - -const navbar = document.querySelector("[data-navbar]"); -const navbarLinks = document.querySelectorAll("[data-nav-link]"); -const navTogglers = document.querySelectorAll("[data-nav-toggler]"); -const overlay = document.querySelector("[data-overlay]"); - -const toggleNavbar = function () { - navbar.classList.toggle("active"); - overlay.classList.toggle("active"); - document.body.classList.toggle("active"); -} - -addEventOnElem(navTogglers, "click", toggleNavbar); - -const closeNavbar = function () { - navbar.classList.remove("active"); - overlay.classList.remove("active"); - document.body.classList.remove("active"); -} - -addEventOnElem(navbarLinks, "click", closeNavbar); - - - -/** - * header active when window scroll down to 100px - */ - -const header = document.querySelector("[data-header]"); - -const activeElemOnScroll = function () { - if (window.scrollY > 100) { - header.classList.add("active"); - } else { - header.classList.remove("active"); - } -} - -addEventOnElem(window, "scroll", activeElemOnScroll); - -// SLIDER CARD -const wrapper = document.querySelector(".wrapper"); -const carousel = document.querySelector(".carousel"); -const firstCardWidth = carousel.querySelector(".card").offsetWidth; -const arrowBtns = document.querySelectorAll(".wrapper i"); -const carouselChildrens = [...carousel.children]; - -let isDragging = false, isAutoPlay = true, startX, startScrollLeft, timeoutId; - -// Get the number of cards that can fit in the carousel at once -let cardPerView = Math.round(carousel.offsetWidth / firstCardWidth); - -// Insert copies of the last few cards to beginning of carousel for infinite scrolling -carouselChildrens.slice(-cardPerView).reverse().forEach(card => { - carousel.insertAdjacentHTML("afterbegin", card.outerHTML); -}); - -// Insert copies of the first few cards to end of carousel for infinite scrolling -carouselChildrens.slice(0, cardPerView).forEach(card => { - carousel.insertAdjacentHTML("beforeend", card.outerHTML); -}); - -// Scroll the carousel at appropriate postition to hide first few duplicate cards on Firefox -carousel.classList.add("no-transition"); -carousel.scrollLeft = carousel.offsetWidth; -carousel.classList.remove("no-transition"); - -// Add event listeners for the arrow buttons to scroll the carousel left and right -arrowBtns.forEach(btn => { - btn.addEventListener("click", () => { - carousel.scrollLeft += btn.id == "left" ? -firstCardWidth : firstCardWidth; - }); -}); - -const dragStart = (e) => { - isDragging = true; - carousel.classList.add("dragging"); - // Records the initial cursor and scroll position of the carousel - startX = e.pageX; - startScrollLeft = carousel.scrollLeft; -} - -const dragging = (e) => { - if(!isDragging) return; // if isDragging is false return from here - // Updates the scroll position of the carousel based on the cursor movement - carousel.scrollLeft = startScrollLeft - (e.pageX - startX); -} - -const dragStop = () => { - isDragging = false; - carousel.classList.remove("dragging"); -} - -const infiniteScroll = () => { - // If the carousel is at the beginning, scroll to the end - if(carousel.scrollLeft === 0) { - carousel.classList.add("no-transition"); - carousel.scrollLeft = carousel.scrollWidth - (2 * carousel.offsetWidth); - carousel.classList.remove("no-transition"); - } - // If the carousel is at the end, scroll to the beginning - else if(Math.ceil(carousel.scrollLeft) === carousel.scrollWidth - carousel.offsetWidth) { - carousel.classList.add("no-transition"); - carousel.scrollLeft = carousel.offsetWidth; - carousel.classList.remove("no-transition"); - } - - // Clear existing timeout & start autoplay if mouse is not hovering over carousel - clearTimeout(timeoutId); - if(!wrapper.matches(":hover")) autoPlay(); -} - -const autoPlay = () => { - if(window.innerWidth < 800 || !isAutoPlay) return; // Return if window is smaller than 800 or isAutoPlay is false - // Autoplay the carousel after every 2500 ms - timeoutId = setTimeout(() => carousel.scrollLeft += firstCardWidth, 2500); -} -autoPlay(); - -carousel.addEventListener("mousedown", dragStart); -carousel.addEventListener("mousemove", dragging); -document.addEventListener("mouseup", dragStop); -carousel.addEventListener("scroll", infiniteScroll); -wrapper.addEventListener("mouseenter", () => clearTimeout(timeoutId)); -wrapper.addEventListener("mouseleave", autoPlay); -// Batas Slider Card