Merge branch 'experimental'

jund-fauz · Jan 30, 2024 · e3fe98a · e3fe98a
2 parents 0f86a44 + 82f74eb
commit e3fe98a
Show file tree

Hide file tree

Showing 12 changed files with 282 additions and 84 deletions.
diff --git a/.github/workflows/main.yaml 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
@@ -9,13 +9,14 @@
         integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
     <link rel="stylesheet" href="stylesheet/main.css?<?= time(); ?>">
     <link rel="stylesheet" href="stylesheet/index.css?<?= time(); ?>">
+    <link rel="stylesheet" href="stylesheet/member.css?<?= time(); ?>">
 </head>
 
 <body>
     <?php
     include 'views/navbar.php';
-    include 'views/main.php';
-    include 'views/footer.php';
+    include 'pages/member.php';
+    // include 'views/footer.php';
     ?>
     <script src="https://code.jquery.com/jquery-3.7.1.js"
         integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>

diff --git a/views/main.php → pages/main.php b/views/main.php → pages/main.php
@@ -1,14 +1,11 @@
-<div>
-    <img class="position-relative w-100" src="pictures/bg-1.png" alt="IT">
-    <div class="position-absolute top-0 w-100 h-100 translate-50">
-        <div class="a-first container">
-            <div class="text">
-                <h1 class="text-uppercase text-white fw-bold title">smart bengkel komputer</h1>
-                <h2 class="text-white subtitle">bersama sBK bangkitkan sMK</h2>
-                <a href="#" class="button color-secondary bg-white reverse-1">start exploring</a>
-            </div>
-            <img src="pictures/sbk-1.png" alt="SBK" class="icon sepia">
+<div class="w-100 h-100 bgi-1">
+    <div class="a-first container">
+        <div class="text">
+            <h1 class="text-uppercase title fs-7">smart bengkel komputer</h1>
+            <h2 class="subtitle mt-1">bersama sBK bangkitkan sMK</h2>
+            <a href="#" class="button color-secondary bg-white reverse-1 mt-1">start exploring</a>
         </div>
+        <img src="pictures/sbk-1.png" alt="SBK" class="icon filter-1">
     </div>
 </div>
 <div class="bg-black second-content w-100"></div>
@@ -59,24 +56,49 @@
         </div>
     </div>
 </div>
-<div class="bg-black pt-4">
+<div class="bg-black pt-5">
     <div class="container">
-        <h1>another features</h1>
+        <h1 class="fw-bold text-white mb-5">another features</h1>
         <div class="d-grid grid-4">
-            <div class="container">
+            <div class="container position-relative">
+                <span class="overlay bg-1 clip-long"></span>
                 <h1>sBK store</h1>
+                <a href="#">Let’s go shopping -></a>
             </div>
-            <div class="container">
-                <h1></h1>
+            <div class="container position-relative">
+                <span class="overlay bg-2 clip-short"></span>
+                <h1>member</h1>
+                <a href="#">know us -></a>
             </div>
         </div>
         <div class="d-grid grid-4">
-            <div class="container">
-
+            <div class="container position-relative">
+                <span class="overlay bg-3 clip-short"></span>
+                <h1>sBK xtra</h1>
+                <a href="#">check another things -></a>
+            </div>
+            <div class="container position-relative">
+                <span class="overlay bg-4 clip-long"></span>
+                <h1>mIKROTIK academy</h1>
+                <a href="#">learn more -></a>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="container grid-center position-relative">
+    <img src="pictures/cache-1.png" alt="Konten">
+    <div class="csb-1">
+        <div class="d-grid grid-1">
+            <div class="text">
+                <h1 class="title">learn basics</h1>
+                <p class="text-white mt-2">Belajar dasar jaringan dengan materi yang praktis dan interaktif</p>
             </div>
-            <div class="container">
-                
+            <div class="icon">
+                <span class="play"></span>
             </div>
         </div>
     </div>
-</div>
+</div>
+<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
+    crossorigin="anonymous"></script>
+<script src="script/parallax.js"></script>
diff --git a/pages/member.php b/pages/member.php
@@ -0,0 +1,5 @@
+<div class="position-relative mt-2">
+    <img src="pictures/devit-cache.png" alt="Ustadz Devit Hari Ashari">
+    <h1 class="title text-center position-absolute top-0 w-100">penanggung jawab</h1>
+    <p class="text-black text-capitalize position-absolute top-50 start-50 translate-middle">devit hari ashari, s.pd.</p>
+</div>
diff --git a/pages/mikrotik.php b/pages/mikrotik.php
diff --git a/pictures/cache-1.png b/pictures/cache-1.png
diff --git a/pictures/devit-cache.png b/pictures/devit-cache.png
diff --git a/script/parallax.js 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%)`
+    )
+}