diff --git a/.github/workflows/main.yaml b/.github/workflows/main.yaml new file mode 100644 index 0000000..ff19518 --- /dev/null +++ b/.github/workflows/main.yaml @@ -0,0 +1,16 @@ +on: push +name: πŸš€ Deploy website on push +jobs: + web-deploy: + name: πŸŽ‰ Deploy + runs-on: ubuntu-latest + steps: + - name: 🚚 Get latest code + uses: actions/checkout@v3 + + - name: πŸ“‚ Sync files + uses: SamKirkland/FTP-Deploy-Action@v4.3.4 + with: + server: files.000webhost.com + username: smart-bengkel-komputer + password: ${{ secrets.password }} diff --git a/index.php b/index.php index 738068c..5b234f0 100644 --- a/index.php +++ b/index.php @@ -9,13 +9,14 @@ integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> + diff --git a/views/main.php b/pages/main.php similarity index 60% rename from views/main.php rename to pages/main.php index b4f58d0..b0f78b3 100644 --- a/views/main.php +++ b/pages/main.php @@ -1,14 +1,11 @@ -
- IT -
-
-
-

smart bengkel komputer

-

bersama sBK bangkitkan sMK

- start exploring -
- SBK +
+
+
+

smart bengkel komputer

+

bersama sBK bangkitkan sMK

+ start exploring
+ SBK
@@ -59,24 +56,49 @@
-
+
-

another features

+

another features

-
+
+

sBK store

+ Let’s go shopping ->
-
-

+
+ +

member

+ know us ->
-
- +
+ +

sBK xtra

+ check another things -> +
+
+ +

mIKROTIK academy

+ learn more -> +
+
+
+
+
+ Konten +
+
+
+

learn basics

+

Belajar dasar jaringan dengan materi yang praktis dan interaktif

-
- +
+
-
\ No newline at end of file +
+ + \ No newline at end of file diff --git a/pages/member.php b/pages/member.php new file mode 100644 index 0000000..f1ef94b --- /dev/null +++ b/pages/member.php @@ -0,0 +1,5 @@ +
+ Ustadz Devit Hari Ashari +

penanggung jawab

+

devit hari ashari, s.pd.

+
\ No newline at end of file diff --git a/pages/mikrotik.php b/pages/mikrotik.php new file mode 100644 index 0000000..e69de29 diff --git a/pictures/cache-1.png b/pictures/cache-1.png new file mode 100644 index 0000000..bda034c Binary files /dev/null and b/pictures/cache-1.png differ diff --git a/pictures/devit-cache.png b/pictures/devit-cache.png new file mode 100644 index 0000000..d6942b1 Binary files /dev/null and b/pictures/devit-cache.png differ diff --git a/script/parallax.js b/script/parallax.js new file mode 100644 index 0000000..5b71627 --- /dev/null +++ b/script/parallax.js @@ -0,0 +1,20 @@ +parallax($(window).scrollTop()) +$('.grid-1 > .icon').css('max-width', $('.grid-1 > .icon').height()) + +$(window).scroll(() => parallax($(this).scrollTop())) + +function parallax(firstScroll) { + const scroll = firstScroll - 1711 + $('.clip-long').css( + 'clip-path', + `polygon(0 0, ${67 + scroll / 35}% 0, ${ + 50 + scroll / 35 + }% 100%, 0 100%)` + ) + $('.clip-short').css( + 'clip-path', + `polygon(0 0, ${67 + scroll / 35}% 0, ${ + 40 + scroll / 35 + }% 100%, 0 100%)` + ) +} \ No newline at end of file diff --git a/stylesheet/index.css b/stylesheet/index.css index db6e2f5..2ac45b5 100644 --- a/stylesheet/index.css +++ b/stylesheet/index.css @@ -1,146 +1,276 @@ +.bgi-1 { + background: url('../pictures/bg-1.png'); + background-size: 100%; + background-attachment: fixed; + background-repeat: no-repeat; + padding: 12.7vw 0; +} + +.bgi-2 { + background: url('../pictures/cache-1.png'); + width: 70%; + height: 70%; + border-radius: 15px; +} + .translate-50 { - transform: translateY(35%); + transform: translateY(35%); } .a-first { - display: grid; - grid-template-areas: "text" "icon"; - grid-template-columns: 60% 40%; + display: grid; + grid-template-areas: 'text' 'icon'; + grid-template-columns: 60% 40%; } .p-first { - display: grid; - grid-template-areas: "icon" "text"; - grid-template-columns: 40% 60%; - column-gap: 5vw; + display: grid; + grid-template-areas: 'icon' 'text'; + grid-template-columns: 40% 60%; + column-gap: 5vw; } .text { - grid-area: "text"; + grid-area: 'text'; } .icon { - grid-area: "icon"; + grid-area: 'icon'; } -.sepia { - margin-top: -4vw; - width: 90%; - filter: sepia(); +.filter-1 { + margin-top: -4vw; + width: 90%; + mix-blend-mode: luminosity; } .title { - font-size: 7vw; - margin-bottom: 0; + font-weight: bolder; + margin-bottom: 0; + color: white; } .subtitle { - font-weight: 600; - font-size: 3.5vw; - margin-bottom: 2vw; + font-weight: 600; + font-size: 2.5vw; + margin-bottom: 2vw; + color: white; +} + +.fs-7 { + font-size: 6vw; } .button { - font-weight: 500; - border-radius: .5vw; - padding: .7vw 1.2vw; - font-size: clamp(10px 1.3vw); + font-weight: 500; + border-radius: 0.5vw; + padding: 0.7vw 1.2vw; } .color-secondary { - color: var(--secondary-color); + color: var(--secondary-color); } .reverse-1:hover { - background-color: var(--primary-color) !important; - color: white; + background-color: var(--primary-color) !important; + color: white; } .reverse-2 { - border: 1px solid; + border: 1px solid; } .reverse-2:hover { - background-color: white !important; - color: var(--primary-color); + background-color: white !important; + color: var(--primary-color); } .second-content { - height: 40px; - margin-top: -10px; + height: 40px; + margin-top: -10px; } .bg-color-primary { - background-color: var(--primary-color); + background-color: var(--primary-color); } .third-content { - margin: 5vw 0; + margin: 5vw 0; } .cmb-1 { - margin-bottom: 2vw; + margin-bottom: 2vw; } .cmt-1 { - margin-top: 6vw; + margin-top: 6vw; +} + +.pt-5 { + padding-bottom: 280px; } .text > p { - padding-right: 6vw; + padding-right: 6vw; } .grid-4 { - grid-template-areas: "first" "second"; - column-gap: 3vw; - height: 7vw; + grid-template-areas: 'first' 'second'; + column-gap: 3vw; + height: 7vw; } .grid-4:nth-child(2) { - grid-template-columns: 70% 30%; + grid-template-columns: 70% 30%; } .grid-4:last-child { - grid-template-columns: 30% 70%; + grid-template-columns: 30% 70%; } .grid-4 > div:first-child { - grid-area: "first"; + grid-area: 'first'; } .grid-4 > div:last-child { - grid-area: "second"; + grid-area: 'second'; } -.grid-4 > div { - border-radius: .5vw; +.grid-4 div { + border-radius: 16px; + height: 320px; + overflow: hidden; } .grid-4:nth-child(2) > div:first-child { - background-color: #9df; + background-color: #83c6e9; } .grid-4:nth-child(2) > div:last-child { - background-color: #5aadd7; + background-color: #5e9cbb; +} + +.grid-4:last-child { + margin-top: 280px; +} + +.grid-4:last-child > div:first-child { + background-color: rgba(253, 255, 140, 0.92); +} + +.grid-4:last-child > div:last-child { + background-color: rgba(255, 255, 255, 0.84); +} + +.grid-4 h1 { + position: absolute; + top: 1.5vw; + left: 2vw; + color: black; + font-weight: 800; + z-index: 2; +} + +.grid-4 a { + color: black; +} + +.grid-4:nth-child(2) > .container:last-child > h1 { + color: #004669; +} + +.grid-4:last-child > .container:first-child > h1 { + color: #353939; } -.pt-4 h1 { - color: white; - font-weight: bold; +.grid-4 a { + position: absolute; + bottom: 1.5vw; + left: 2vw; + z-index: 2; + transition: 0.3s; } -pt-4 > .container .container { - position: relative; +.grid-4 a:hover { + transform: translateX(10px); +} + +.overlay { + width: 70%; + position: absolute; + top: 0; + left: 0; + height: 100%; + z-index: 1; +} + +.bg-1 { + background-color: #9df; +} + +.bg-2 { + background-color: #5aadd7; +} + +.bg-3 { + background-color: rgba(250, 254, 78, 0.68); +} + +.bg-4 { + background-color: rgba(255, 255, 255, 0.53); +} + +.grid-1 { + grid-template-areas: 'text' 'icon'; + grid-template-columns: 80% 20%; + z-index: 1; + color: white; + margin-top: 13vw; + margin-bottom: 1.3vw; +} + +.grid-center { + display: grid; + place-items: center; + padding: 5vw 0; +} + +.grid-center > img { + width: 70%; +} + +.csb-1 { + position: absolute; + left: 12.5vw; + bottom: 8vw; + width: 70%; + padding: 0 3vw; +} + +.grid-1 > .icon { + background-color: #0079b7; + display: grid; + place-items: center; +} + +.play { + background-color: white; + clip-path: polygon(84% 49%, 32% 18%, 32% 79%); + width: 0; + height: 0; + border-top: 25px solid transparent; + border-left: 50px solid white; + border-bottom: 25px solid transparent; } @media screen and (max-width: 1279px) { - .translate-50 { - transform: translateY(20vw); - } + .translate-50 { + transform: translateY(20vw); + } } @media (min-width: 1280px) { - .text > p { - padding-right: 10vw; - } -} \ No newline at end of file + .text > p { + padding-right: 10vw; + } +} diff --git a/stylesheet/main.css b/stylesheet/main.css index afbba6c..f5fee67 100644 --- a/stylesheet/main.css +++ b/stylesheet/main.css @@ -1,4 +1,4 @@ -@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Barlow&display=swap"); :root { --primary-color: #0079B7; @@ -8,9 +8,10 @@ * { padding: 0; margin: 0; - font-family: "Barlow Semi Condensed", sans-serif; + font-family: "Barlow", sans-serif; box-sizing: border-box; scroll-behavior: smooth; + user-select: none; } h1, h2, a { @@ -28,7 +29,7 @@ nav { height: 60px; position: sticky; top: 0; - z-index: 1; + z-index: 3; } nav > a > img { diff --git a/stylesheet/member.css b/stylesheet/member.css new file mode 100644 index 0000000..9a3e1bd --- /dev/null +++ b/stylesheet/member.css @@ -0,0 +1,3 @@ +.title { + color: #004669; +} \ No newline at end of file diff --git a/stylesheet/mikrotik.css b/stylesheet/mikrotik.css new file mode 100644 index 0000000..e69de29