From 7e35022618a4010e94129f1d11ddfd7387380999 Mon Sep 17 00:00:00 2001
From: Fadlihh <62737219+Fadlihh@users.noreply.github.com>
Date: Wed, 15 Nov 2023 14:41:52 +0700
Subject: [PATCH] Day 1 Web Development

---
 AhmadFadlih/Introduction.html | 61 ++++++++++++++++++++++
 AhmadFadlih/style.css         | 98 +++++++++++++++++++++++++++++++++++
 2 files changed, 159 insertions(+)
 create mode 100644 AhmadFadlih/Introduction.html
 create mode 100644 AhmadFadlih/style.css
diff --git a/AhmadFadlih/Introduction.html b/AhmadFadlih/Introduction.html
new file mode 100644
index 0000000..d58eccd
--- /dev/null
+++ b/AhmadFadlih/Introduction.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Biodata Diri</title>
+    <link rel="stylesheet" type="text/css" href="style.css" />
+    <title>Ahmad Fadlih Wahyu Sardana</title>
+</head>
+<body>
+    <section>
+        <div class="container"></div>
+        <div class="container">
+            <h1>Biodata Diri</h1>
+            <img src="https://daftarulang.polinema.ac.id/photo/2023/423643227-5fv5M.jpeg" alt="Foto Diri" />
+            <div class="info">
+                <h1>Ahmad Fadlih Wahyu Sardana</h1>
+                <ul>
+                    <li>
+                        <p>Nama : Ahmad Fadlih Wahyu Sardana</p>
+                    </li>
+                    <li>
+                        <p>Tempat Tanggal Lahir : Malang, 05 Mei 2005</p>
+                    </li>
+                    <li>
+                        <p>Umur : 18 Tahun</p>
+                    </li>
+                    <li>
+                        <p>Alamat : JL Mentaraman Talok Turen Kabupaten Malang</p>
+                    </li>
+                    <li>
+                        <p>Hobby : Swim</p>
+                    </li>
+                    <li>
+                        <p>
+                            Deskripsi : Yang Penting Menjalani <br>
+    
+                        </p>
+                    </li>
+                    <li><a href="https://github.com/Fadlihh">GitHub</a></li>
+                </ul>
+    </section>
+            </div>
+            <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        viewBox="0 26 150 30"
+        preserveAspectRatio="none"
+        >
+        <defs>
+            <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s
+        58 18 88 18 58-18 88-18
+        58 18 88 18 v44h-352z" />
+        </defs>
+        <g class="waves">
+            <use xlink:href="#gentle-wave" x="50" y="0" fill="#03ffff" fill-opacity=".2" />
+            <use y="3" fill-opacity=".5" />
+            <use y="6" fill-opacity=".10" />
+        </g>
+    </svg>
+</body>
+</html>
\ No newline at end of file
diff --git a/AhmadFadlih/style.css b/AhmadFadlih/style.css
new file mode 100644
index 0000000..2fd2d80
--- /dev/null
+++ b/AhmadFadlih/style.css
@@ -0,0 +1,98 @@
+body {
+    max-width: 800px;
+    margin: auto;
+    padding: 20px;
+    font-family: "Poppins";
+    color: #ddfdfd;
+    background: #050808;
+}
+h1 {
+    text-align: center;
+    margin-top: 0;
+}
+img {
+    display: block;
+    margin: auto;
+    max-width: 300px;
+    height: auto;
+    border-radius: 50%;
+}
+.banner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column-reverse;
+    gap: 50px;
+    padding: 80px;
+    text-align: center;
+    height: 100vh;
+    background: #050808;
+}
+
+.banner>img {
+    width: 60vw;
+    transition: 0.1s Linear;
+}
+
+.banner h2 {
+    font-weight: 500;
+    font-size: 30px;
+    margin: 10px;
+}
+
+.banner p {
+    margin: 0;
+    line-height: 1.65;
+    opacity: 0.7;
+}
+
+.waves>use:nth-child(2) {
+    animation-delay: -3s;
+    animation-duration: 6s;
+}
+
+.waves>use:nth-child(3) {
+    animation-delay: -4s;
+    animation-duration: 3s;
+}
+
+@keyframes move-forever {
+    0% {
+        translate: -90px 0%;
+    }
+
+    100% {
+        translate: 85px 0%;
+    }
+}
+
+svg {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 30vw;
+    max-height: 200px;
+}
+
+.waves>use {
+    animation: move-forever 2s -2s linear infinite;
+}
+
+@media (width >=420px) {
+    .banner img {
+        width: 40vw;
+    }
+}
+
+@media (width >=648px) {
+    .banner {
+        text-align: left;
+        flex-direction: row;
+        justify-content: space-between;
+    }
+
+    .banner>img {
+        width: 30vw;
+    }
+}
\ No newline at end of file
