Migrate to scss

.github/workflows/main.yaml

@@ -11,6 +11,6 @@ jobs:
     - name: 📂 Sync files
       uses: SamKirkland/FTP-Deploy-Action@v4.3.4
       with:
-        server: ftp://files.000webhost.com
+        server: files.000webhost.com/public_html/
         username: smart-bengkel-komputer
         password: ${{ secrets.password }}

pages/gen13.php

@@ -0,0 +1,5 @@
+<div class="member-container">
+    <div class="d-flex">
+        
+    </div>
+</div>

pages/main.php

@@ -94,7 +94,7 @@
                 <p class="text-white mt-2">Belajar dasar jaringan dengan materi yang praktis dan interaktif</p>
             </div>
             <div class="icon">
-                <span class="play"></span>
+                <a href="#" class="play"></a>
             </div>
         </div>
     </div>

pages/member.php

@@ -3,8 +3,14 @@
     <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>
-<div class="position-relative mt-5">
+<hr class="mt-2">
+<div class="position-relative mt-3">
     <img src="pictures/devit-cache.png" alt="Ustadz Devit Hari Ashari" class="mt-2 ms-4">
     <h1 class="title text-center position-absolute top-0 w-100">pembina</h1>
     <p class="text-black text-capitalize position-absolute top-50 start-50 translate-middle">diantika arifianti, s.t.</p>
-</div>
+</div>
+<div class="d-flex justify-content-center fs-3 mb-2">
+    <button type="button">Gen 12</button>
+    <button type="button" class="active">Gen 13</button>
+</div>
+<?php include('pages/gen13.php');

stylesheet/_nav.scss

@@ -0,0 +1,51 @@
+nav {
+    background-color: black;
+    height: 60px;
+    position: sticky;
+    top: 0;
+    z-index: 3;
+}
+
+nav> {
+    a> {
+        img {
+            left: 3%;
+            transform: translateY(-50%) scale(0.8);
+        }
+
+        i {
+            right: 2%;
+        }
+    }
+
+    div {
+        width: fit-content;
+        column-gap: 2rem;
+    }
+
+    div {
+        a {
+            display: inline-block;
+            position: relative;
+        }
+
+        a:after {
+            content: '';
+            position: absolute;
+            width: 100%;
+            transform: scaleX(0);
+            height: 1px;
+            bottom: 0;
+            left: 0;
+            background-color: white;
+            transform-origin: bottom right;
+            transition: transform .25s ease-out;
+        }
+
+
+        a:hover:after {
+            transform: scaleX(1);
+            transform-origin: bottom left;
+        }
+    }
+}

stylesheet/index.css

@@ -1,13 +1,13 @@
 .bgi-1 {
-  background: url('../pictures/bg-1.png');
+  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');
+  background: url("../pictures/cache-1.png");
   width: 70%;
   height: 70%;
   border-radius: 15px;
@@ -19,23 +19,24 @@
 
 .a-first {
   display: grid;
-  grid-template-areas: 'text' 'icon';
+  grid-template-areas: "text" "icon";
   grid-template-columns: 60% 40%;
 }
 
 .p-first {
   display: grid;
-  grid-template-areas: 'icon' 'text';
+  grid-template-areas: "icon" "text";
   grid-template-columns: 40% 60%;
-  column-gap: 5vw;
+  -moz-column-gap: 5vw;
+       column-gap: 5vw;
 }
 
 .text {
-  grid-area: 'text';
+  grid-area: "text";
 }
 
 .icon {
-  grid-area: 'icon';
+  grid-area: "icon";
 }
 
 .filter-1 {
@@ -115,8 +116,9 @@
 }
 
 .grid-4 {
-  grid-template-areas: 'first' 'second';
-  column-gap: 3vw;
+  grid-template-areas: "first" "second";
+  -moz-column-gap: 3vw;
+       column-gap: 3vw;
   height: 7vw;
 }
 
@@ -129,14 +131,12 @@
 }
 
 .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 {
+.grid-4 > div {
   border-radius: 16px;
   height: 320px;
   overflow: hidden;
@@ -145,7 +145,6 @@
 .grid-4:nth-child(2) > div:first-child {
   background-color: #83c6e9;
 }
-
 .grid-4:nth-child(2) > div:last-child {
   background-color: #5e9cbb;
 }
@@ -157,7 +156,6 @@
 .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);
 }
@@ -170,31 +168,26 @@
   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;
-}
-
-.grid-4 a {
   position: absolute;
   bottom: 1.5vw;
   left: 2vw;
   z-index: 2;
   transition: 0.3s;
 }
-
 .grid-4 a:hover {
   transform: translateX(10px);
 }
 
+.grid-4:nth-child(2) > .container:last-child > h1 {
+  color: #004669;
+}
+
+.grid-4:last-child > .container:first-child > h1 {
+  color: #353939;
+}
+
 .overlay {
   width: 70%;
   position: absolute;
@@ -221,12 +214,12 @@
 }
 
 .grid-1 {
-  grid-template-areas: 'text' 'icon';
+  grid-template-areas: "text" "icon";
   grid-template-columns: 80% 20%;
-  z-index: 1;
-  color: white;
   margin-top: 13vw;
   margin-bottom: 1.3vw;
+  z-index: 1;
+  color: white;
 }
 
 .grid-center {
@@ -255,22 +248,27 @@
 
 .play {
   background-color: white;
-  clip-path: polygon(84% 49%, 32% 18%, 32% 79%);
+  -webkit-clip-path: polygon(84% 49%, 32% 18%, 32% 79%);
+          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;
+  transition: 0.3s;
+}
+
+.play:hover {
+  transform: rotate(360deg);
 }
 
 @media screen and (max-width: 1279px) {
   .translate-50 {
     transform: translateY(20vw);
   }
 }
-
 @media (min-width: 1280px) {
   .text > p {
     padding-right: 10vw;
   }
-}
+}/*# sourceMappingURL=index.css.map */