Update style.css

style.css

@@ -1,28 +1,353 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html, body {
+    height: 100%;
+    overflow: hidden; /* Menonaktifkan overflow di body */
+    scroll-behavior: smooth; /* Untuk scroll yang lebih halus */
+}
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: Arial, sans-serif;
+    background: black;
+    color: white;
+    line-height: 1.6;
+}
+
+.scroll-container {
+    height: 100%;
+    overflow-y: scroll; /* Mengaktifkan scroll vertikal */
+    scroll-snap-type: y mandatory; /* Snap scroll secara vertikal */
+}
+
+header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px;
+    background: black;
+    border-bottom: 1px solid white;
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+}
+
+.logo {
+    font-size: 24px;
+    font-weight: bold;
+}
+
+.navigation ul {
+    display: flex;
+    list-style: none;
+}
+
+.navigation ul li {
+    margin: 0 15px;
+}
+
+.navigation ul li a {
+    text-decoration: none;
+    color: white;
+    font-size: 16px;
+    transition: color 0.3s ease, transform 0.3s ease;
+}
+
+.navigation ul li a:hover {
+    color: grey;
+    transform: scale(1.05); /* Efek zoom pada link saat hover */
+}
+
+.menu-toggle {
+    display: none;
+    font-size: 24px;
+    cursor: pointer;
+}
+
+section {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    height: 100vh; /* Setiap section mengambil penuh layar */
+    scroll-snap-align: start; /* Memastikan halaman berhenti di awal */
+    flex-direction: column;
+}
+
+.section-content {
+    max-width: 1200px;
+    width: 100%;
+}
+
+.section h1, .section h2 {
+    font-size: 36px;
+    margin-bottom: 15px;
+}
+
+.section p {
+    font-size: 18px;
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.portfolio {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+    margin-top: 20px;
+}
+
+.item {
+    padding: 20px;
+    background-color: #f4f4f4;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    text-align: center;
+}
+
+.liquid-digital-assets {
+    background-color: #e0f7fa;
+}
+
+.partners {
+    background-color: #f1f8e9;
+}
+
+/* Bagian Portfolio Grid */
+.portfolio-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Responsif grid */
+    gap: 20px;
+    justify-items: center;
+    align-items: center;
+}
+
+/* Item dalam Portfolio */
+.portfolio-item {
+    text-align: center;
+}
+
+.portfolio-item img {
+    max-width: 80px; /* Ukuran logo */
+    height: auto;
+    margin-bottom: 10px; /* Jarak antara logo dan teks */
+}
+
+.portfolio-item p {
+    font-size: 14px;
+    color: white;
+}
+
+/* Responsif untuk grid */
+@media (max-width: 768px) {
+    .portfolio-grid {
+        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Ukuran lebih kecil untuk perangkat kecil */
+    }
+
+    .portfolio-item img {
+        max-width: 60px;
+    }
+
+    .portfolio-item p {
+        font-size: 12px;
+    }
+
+    /* Mengubah menu menjadi hamburger pada layar kecil */
+    .navigation ul {
+        display: none;
+        flex-direction: column;
+        position: absolute;
+        top: 60px; /* Menyesuaikan dengan tinggi navbar */
+        right: 0;
+        background: black;
+        width: 100%; /* Menu sekarang membentang penuh dari kanan ke kiri */
+        height: auto;
+        transform: translateY(-100%); /* Menyembunyikan menu di atas layar */
+        transition: transform 0.5s ease-in-out; /* Efek animasi turun */
+        z-index: 1000;
+    }
+
+    .navigation.active ul {
+        display: flex;
+        transform: translateY(0); /* Menu turun ke bawah */
+    }
+
+    .menu-toggle.active {
+        color: white;
+    }
+
+    .menu-toggle {
+        display: block;
+    }
+
+    /* Tombol X untuk menutup menu */
+    .close-btn {
+        position: absolute;
+        top: 20px;
+        left: 20px;
+        font-size: 30px;
+        color: white;
+        cursor: pointer;
+    }
+}
+
+/* Kartu proyek */
+.project-container {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 20px;
+    flex-wrap: wrap;
+    margin-top: 30px;
+    padding: 0 20px;
+}
+
+.project-card {
+    background-color: #1a1a1a;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    text-align: center;
+    padding: 20px;
+    width: 300px; /* Ukuran tetap untuk kartu */
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.project-card img {
+    width: 100%;
+    height: 150px;
+    object-fit: cover;
+    border-radius: 4px;
+    margin-bottom: 15px;
+}
+
+.project-card h3 {
+    font-size: 20px;
+    margin-bottom: 10px;
+    color: #fff;
+}
+
+.project-card p {
+    font-size: 16px;
+    color: #ccc;
+    margin-bottom: 15px;
+}
+
+.project-card a {
+    display: inline-block;
+    padding: 10px 20px;
+    background-color: #007bff;
+    color: #fff;
+    text-decoration: none;
+    border-radius: 4px;
+    font-size: 14px;
+    transition: background-color 0.3s ease;
+}
+
+.project-card a:hover {
+    background-color: #0056b3;
+}
+
+.project-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+}
+
+/* Responsif untuk kartu proyek */
+@media (max-width: 768px) {
+    .portfolio {
+        grid-template-columns: 1fr;
+    }
+
+    .project-container {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .project-card {
+        width: 90%; /* Lebar kartu menyesuaikan layar kecil */
+    }
+
+    .section {
+        padding: 30px 20px;
+    }
+
+    .section h1, .section h2 {
+        font-size: 28px;
+    }
+
+    .section p {
+        font-size: 16px;
+    }
+}
+
+/* Animasi Fade In */
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+/* Animasi Slide In dari bawah */
+@keyframes slideInUp {
+    0% {
+        opacity: 0;
+        transform: translateY(50px);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Animasi Zoom In */
+@keyframes zoomIn {
+    0% {
+        opacity: 0;
+        transform: scale(0.8);
+    }
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+/* Applying different animations to each section */
+#Home {
+    animation: fadeIn 1s ease-in-out forwards;
+}
+
+#What-I-Do {
+    animation: slideInUp 1s ease-in-out forwards;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+#Portfolio {
+    animation: zoomIn 1s ease-in-out forwards;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+/* Apply fade-in when the section is in view */
+.section {
+    opacity: 0; /* Mulai dengan transparan */
+    transform: translateY(50px); /* Posisi awal */
+    transition: opacity 1s, transform 1s;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.section.visible {
+    opacity: 1;
+    transform: translateY(0);
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Mengatur agar footer tidak ikut bergulir dengan konten */
+.footer {
+    text-align: center;
+    padding: 20px;
+    background: black;
+    border-top: 1px solid white;
+    position: relative; /* Agar footer tetap di bawah dan tidak ikut slide */
+    margin-top: 20px; /* Menambahkan margin agar tidak terlalu rapat dengan konten */
 }