theooel
diff --git a/‎ASET/1.png
431 KB b/‎ASET/1.png
431 KB
diff --git a/‎ASET/2.png
2.62 MB b/‎ASET/2.png
2.62 MB
diff --git a/‎ASET/3.png
2.21 MB b/‎ASET/3.png
2.21 MB
diff --git a/‎ASET/4.png
4.14 MB b/‎ASET/4.png
4.14 MB
diff --git a/‎ASET/5.png
4.34 MB b/‎ASET/5.png
4.34 MB
diff --git a/‎ASET/6.png
3.55 MB b/‎ASET/6.png
3.55 MB
diff --git a/‎ASET/foto.jpg
30.1 KB b/‎ASET/foto.jpg
30.1 KB
diff --git a/‎ASET/pesawat kertas.gif
614 KB b/‎ASET/pesawat kertas.gif
614 KB
diff --git a/‎index.html
+39 b/‎index.html
+39
diff --git a/‎style.css
+52 b/‎style.css
+52
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Theo Satria Portofolio</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <header>
+        <h1>Theo Portofolio</h1>
+        <p>Halo, selamat datang di website saya</p>
+        <img src="./ASET/foto.jpg" alt="my image">
+        <a href="#project"><button>See my project</button></a>
+    </header>
+    <main>
+        <div class="7B">
+            <img src="./ASET/pesawat kertas.gif" alt="about me">
+            <p>Halo... perkenalkan nama saya Theo, saya bersekolah di smpk Ora ET Labora pamulang. Hobi saya adalah bermain futsal, badminton dan kadang saya suka membuat pesawat kertas. Umur saya adalah 12 tahun.</p>
+        </div>
+        <div class="project" id="project">
+            <h2>My Project</h2>
+            <hr>
+        </div>
+        <div class="project-image">
+            <img src="ASET/1.png" alt="">
+            <img src="ASET/2.png" alt="">
+            <img src="ASET/3.png" alt="">
+            <img src="ASET/4.png" alt="">
+            <img src="ASET/5.png" alt="">
+            <img src="ASET/6.png" alt="">
+        </div>
+    </main>
+
+    <footer>
+        <p>Copyright © 2025 <a href="">Theo Website</a> ALL Rights Reserved</p>
+    </footer>
+</body>
+</html>
@@ -0,0 +1,52 @@
+body{
+    background-color: #71c9ce;
+}
+header {
+    border: 1px solid #FFE31A;
+    padding: 30px;
+    text-align: center;
+    border-radius: 20px;
+}
+h1 {
+    color:chocolate
+}
+p {
+    font-style: italic;
+}
+img {
+    width: 40%;
+    border: 3px solid chocolate;
+    border-radius: 50px 0 50px 0;
+    margin-bottom: 30px;
+    display: block;
+    margin: 0 auto;
+}
+
+img:hover {
+    transform: scale(1.1);
+    transition: all .3s ease-in-out;
+}
+
+button {
+    margin-top: 30px;
+    padding: 10px 20px;
+    background-color: blue;
+    color: azure;
+    border: none;
+    border-radius: 40 px 40px 0;
+    cursor: pointer;
+}
+
+button:hover {
+    transform: scale(1.1);
+    transition: all .5 ease-in-out;
+    background-color: #FFE31A;
+    color: cornflowerblue;
+}
+.about {
+    display: flex;
+    padding: 30 px;
+}
+.about p {
+    padding-left: 40px;
+}