From 55bb30c4aaa25aeb3d8c3731203a4667e299dce4 Mon Sep 17 00:00:00 2001
From: Yudhaaaaa <yudhapratama11005@gmail.com>
Date: Sat, 27 Apr 2024 18:35:51 +0700
Subject: [PATCH] fIL

---
 index.html | 41 +++++++++++++++++++++++------------------
 style.css  | 26 ++++++++++++++++----------
 2 files changed, 39 insertions(+), 28 deletions(-)
diff --git a/index.html b/index.html
index b4ddcad..a40a062 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>SMK MA'ARIF NU 01 KARANGKOBAR</title>
     <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
     <link href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap" rel="stylesheet">
 </head>
 <style>
@@ -18,32 +19,32 @@
 
 <body>
     <div class="pertama">
-        <h1>SMK MA'ARIF<br><span> NU 01 KARANGKOBAR</span></h1>
-        <div class="aset">
+        <h1 data-aos="fade-right">SMK MA'ARIF<br><span> NU 01 KARANGKOBAR</span></h1>
+        <div class="aset" data-aos="fade-up">
             <img src="./asset foto/1-removebg-preview.png" class="bulat">
             <img src="./asset foto/2-removebg-preview.png" class="bintang">
             <img src="./asset foto/3-removebg-preview.png" class="segitiga">
         </div>
     </div>
-    <div class="awal">
+    <div class="awal" data-aos="fade-up">
         <h1>Come Toghether, Let's celebrate unforgettable achievements,<br><span>Memories and Friendship</span></h1>
     </div>
     <div class="container">
-        <img src="./asset foto/4-removebg-preview.png" class="kubus">
+        <img src="./asset foto/4-removebg-preview.png" class="kubus" data-aos="fade-right">
         <div class="parent">
-            <h2><span>Inspiratif, bersemangat, dan siap menaklukkan dunia!</span><br> Alumni tahun 2023 adalah kelompok
+            <h2 data-aos="fade-right"><span>Inspiratif, bersemangat, dan siap menaklukkan dunia!</span><br> Alumni tahun 2023 adalah kelompok
                 yang
                 penuh potensi, <br>siap untuk menorehkan jejak mereka dalam sejarah dengan <span>dedikasi, inovasi,
                     dan
                     semangat </span>yang luar biasa.</h2>
-            <img src="./asset foto/IMG_6176.jpg">
+            <img src="./asset foto/IMG_6176.jpg"">
         </div>
     </div>
     <div class="profil">
-        <h1>Program Studi</h1>
-        <div class="tkj">
-            <img src="./asset foto/IMG_6162.jpg">
-            <ul>
+        <h1 data-aos="fade-up">Program Studi</h1>
+        <div class="tkj" >
+            <img src="./asset foto/IMG_6162.jpg" data-aos="fade-up">
+            <ul data-aos="fade-up">
                 <li>
                     <h3>Teknik Komputer dan Jaringan</h3>
                     <p>"Mereka adalah para pionir di dunia digital, menggali jaringan dan membangun sistem yang menjadi tulang punggung teknologi masa depan. Kreatif, cermat, dan siap menghadapi setiap tantangan di ranah teknologi informasi."</p>
@@ -51,8 +52,8 @@ <h3>Teknik Komputer dan Jaringan</h3>
             </ul>
         </div>
         <div class="akl">
-            <img src="./asset foto/IMG_6162.jpg">
-            <ul>
+            <img src="./asset foto/IMG_6162.jpg" data-aos="fade-up">
+            <ul data-aos="fade-up">
                 <li>
                     <h3>Akutansi dan Keuangan Lembaga</h3>
                     <p>"Mengintip masa depan melalui angka dan laporan keuangan, mereka adalah penjaga ketelitian dan keandalan informasi keuangan. Dengan ketepatan dan kecermatan, mereka mengarahkan langkah menuju kesuksesan finansial."
@@ -61,8 +62,8 @@ <h3>Akutansi dan Keuangan Lembaga</h3>
             </ul>
         </div>
         <div class="tbsm">
-            <img src="./asset foto/IMG_6162.jpg">
-            <ul>
+            <img src="./asset foto/IMG_6162.jpg" data-aos="fade-up">
+            <ul data-aos="fade-up"> 
                 <li>
                     <h3>Teknik Bisnis Sepeda Motor</h3>
                     <p>"Dari mesin hingga kenyamanan pengendara, mereka adalah ahli di bidang mobil dan sepeda motor. Dengan kecakapan dan keahlian, mereka membawa inovasi dan kenyamanan ke setiap perjalanan."</p>
@@ -71,12 +72,16 @@ <h3>Teknik Bisnis Sepeda Motor</h3>
         </div>
     </div>
     <div class="akhir">
-        <h1>Thank you for making this trip amazing."</h1>
-        <h2>give advice</h2>
+        <h1 data-aos="fade-right">Thank you for making this trip amazing."</h1>
+        <h2 data-aos="fade-up">give advice</h2>
         <ul class="link">
-            <li><a href="https://www.instagram.com/gua_yudha/">instagram</a></li>
-            <li><a href="https://github.com/yudha556">Github</a></li>
+            <li data-aos="fade-up"><a href="https://www.instagram.com/gua_yudha/">instagram</a></li>
+            <li data-aos="fade-up"><a href="https://github.com/yudha556">Github</a></li>
             <p>Beri tahu saya jika ada saran</p>
         </ul>
     </div>
+    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
+    <script>
+      AOS.init();
+    </script>
 </body>
\ No newline at end of file
diff --git a/style.css b/style.css
index eefcc97..da0107b 100644
--- a/style.css
+++ b/style.css
@@ -24,6 +24,7 @@ h1 {
     text-align: left;
     text-transform: uppercase;
     padding: 40px;
+    width: 100%;
 }
 
 span {
@@ -35,12 +36,13 @@ span {
     text-align: center;
     padding: 30px;
     margin: 5px;
-    margin-top: 20px;
+    width: 99%;
+    margin-top: 140px;
 }
 
 .aset img {
     margin: 10px;
-    width: 15%;
+    width: 12%;
     padding: 0px;
     
 }
@@ -64,12 +66,13 @@ span {
 /*slide 2*/
 .container {
     margin-bottom: 0px;
+    width: 100%;
 }
 
 .container img {
     margin-top: 20px;
-    margin-left: -6px;
     width: 250px;
+    margin-left: 10px;
     margin-top: 120px;
 }
 
@@ -87,17 +90,20 @@ span {
 .parent img {
     width: 550px;
     height: 400px;
-    margin-right: 50px;
+    margin-right: 30px;
     border-radius: 80px 40px;
     transform: translateY(-250px);
+    background-color: #f27c22;
 }
 
 /*slide 3 */
 
 
 .profil {
-    width: 90%;
+    width: 92%;
+    margin-left: 50px;
     margin-top: 40px;
+    
 }
 
 .profil h1 {
@@ -118,7 +124,7 @@ span {
 
 .tkj {
     display: flex;
-    margin-left: 120px;
+    margin-left: 20px;
     width: 42%;
     padding: 10px;
     margin-top: 50px;
@@ -194,16 +200,16 @@ span {
 
 .akhir h2 {
     text-align: right;
-    margin-right: 30px;
     font-size: 40px;
     margin-bottom: 10px;
+    margin-right: 40px;
     margin-top: 170px;
 }
 
 .link {
+    width: 97%;
     display: flex;
     flex-direction: column;
-    margin-right: 30px;
     gap: 5px;
     text-decoration: none;
 }
@@ -213,8 +219,8 @@ li {
 }
 
 .link li a {
-    float: right;
     text-align: right;
+    float: right;
     text-decoration: none;
 }
 
@@ -251,7 +257,7 @@ footer {
         inset: 20px;
         width: 25%;
         margin: 0px;
-        margin-top: 70px;
+        margin-top: -30px;
         position: relative;
     }
 
