diff --git a/index.html b/index.html
new file mode 100644
index 0000000..c7d53a6
--- /dev/null
+++ b/index.html
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Gadgeton</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <link rel="icon" type="image/x-icon" href="./asset/favicon-YC.png">
+</head>
+<body>
+    <header>
+        <div class="logo">
+            <img src="./img-2/GadgetOn..png" width="70" height="70">
+        </div>
+        <nav>
+            <ul>
+                <li><a href="#index.html">Home</a></li>
+                <li><a href="#about">About</a></li>
+                <li><a href="#menu">Menu</a></li>
+                <li><a href="#contact">Contact</a></li>
+            </ul>
+        </nav>
+    </header>
+    <div class="hero">
+        <div class="title-hero">
+            <h1>Lets be better with GadgetOn</h1>
+            <p>Welcome to the on, the best selling gadget only in Gadgeton</p>
+        </div>
+        <div class="image-hero">
+            <a href="https://ibox.co.id/product/IP-15PM-IB-CON">
+            <img src="./img/hero-image.jpg">
+        </a>
+        </div>
+        <div>
+            <video controls width="1480" height="1240">
+                <source src="Iphone-15.mp4" type="video/mp4">
+        </div>
+    </div>
+
+    <div id="about">
+        <h2>About GadgetOn</h2>
+        <hr>
+        <p>
+Welcome to GadgetOn Gadget Emporium, your premier destination for cutting-edge technology and innovative gadgets. Located in the heart of Bogor, our store is designed to cater to tech enthusiasts, professionals, and everyday users looking for the latest and greatest in electronics.</p>
+    </div>
+
+    <div id="menu">
+        <div class="title-menu">
+            <h2>Gadget on GadgetOn</h2>
+        </div>
+        <div class="cards">
+         
+
+
+         <div class="card">
+            <img src="./img-2/Iphone 15.jpeg.webp" alt="Iphone 15">
+            <div class="container">
+                <h4>Iphone 15</h4>
+                <p>The best iphone in this year</p>
+            </div>
+            <a href="https://ibox.co.id/product/IP-15-IB-CON">Order Now!</a>
+         </div>
+         
+         <div class="card">
+            <img src="./img-2/Samsung S24.png" alt="Samsung s24">
+            <div class="container">
+                <h4>Samsung S24</h4>
+                <p>The best Samsung you can buy</p>
+            </div>
+            <a href="https://www.samsung.com/id/smartphones/galaxy-s24-ultra/buy/">Order Now!</a>
+         </div>
+
+        
+         <div class="card">
+            <img src="./img-2/Rog-phone-8.jpg" alt="ROG Phone 8 Pro">
+            <div class="container">
+                <h4>ROG Phone 8 Pro</h4>
+                <p>The best ROG Phone from Asus</p>
+            </div>
+            <a href="https://rog.asus.com/id/phones/rog-phone-8-pro/">Order Now!</a>
+         </div>
+
+         <div class="card">
+            <img src="./img-2/xiaomi-14-ultra-launch.jpg" alt="Xiaomi 14 Ultra">
+            <div class="container">
+                <h4>Xiaomi 14 Ultra</h4>
+                <p>The best phone form Xiaomi</p>
+            </div>
+            <a href="https://www.tokopedia.com/giovannigadget/xiaomi-14-ultra-5g-16gb-512gb-global-rom-black-1ef08?extParam=ivf%3Dfalse%26src%3Dsearch&refined=true">Order Now!</a>
+         </div>
+
+         <div class="card">
+            <img src="./img-2/vivo_iqoo_12_16gb-512gb_full01_mchjx3tm.jpg.webp" alt="Iqoo 12">
+            <div class="container">
+                <h4>Iqoo 12 pro</h4>
+                <p>The best vivo phone </p>
+            </div>
+            <a href="https://www.tokopedia.com/archive-rifsystore-1663286801/vivo-iqoo-12-pro-5g-snapdragon-8-gen-3-64mp-144hz-5100mah-120w-ip68-bnib-garansi-resmi-1-tahun-hp-original-putih-16gb-512gb-73962">Order Now!</a>
+         </div>
+
+         <div class="card">
+            <img src="./img-2/no_brand_premium_rugged_hybrid_case_red_magic_9_pro_plus_full11_fuycf9ps.jpg.webp" alt="Red magic 9 pro">
+            <div class="container">
+                <h4>Red Magic 9 Pro</h4>
+                <p>The best phone from Red Magic</p>
+            </div>
+            <a href="">Order Now!</a>
+         </div>
+
+          <div id="contact">
+            <h2>Our Contact</h2>
+            <div class="image-contact">
+                <img src="./img/contact-removebg.png">
+            </div>
+            <div class="text-contact">
+                <div class="data">
+                    <h4>Get in touch</h4>
+                    <p>Kebun Raya Bogor</p>
+                    <p>Bogor, 16310</p>
+                </div>
+                <div class="sosmed-icon">
+                    <a href=""><img src="img/instagram.png"></a>
+                    <a href=""><img src="img/youtube.png"></a>
+                    <a href="https://wa.wizard.id/9355aa"><img src="img/whatsapp.png"></a>
+                   
+                </div>
+            </div>
+        </div>
+
+        <footer>
+            <p>&copy; March 2024. Build by <a href="https://www.instagram.com/pippoonb/">Filipo</a></p>
+        </footer>
+    </div>
+</body>
+</html>
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..662a6d6
--- /dev/null
+++ b/style.css
@@ -0,0 +1,188 @@
+html{
+    scroll-behavior: smooth;
+}
+
+body {
+    background-color: #FFFFFF;
+    margin: 0;
+    padding: 0;
+    scroll-behavior: smooth;
+}
+
+header {
+    background-color: black;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-left: 30px;
+    padding-right: 30px;
+}
+
+.logo {
+    color: #FFFFFF;
+    cursor:pointer;
+}
+
+.logo:hover {
+    color: #65B741;
+    transform: scale(1.2);
+    transition: all ease .5s;
+}
+
+nav ul {
+    display: flex;
+}
+
+nav li {
+    list-style: none;
+    padding-right: 30px;
+}
+
+nav li a {
+    text-decoration: none;
+    color: #056AFC;
+}
+
+nav li a:hover {
+    color: #05FC88;
+    text-decoration: underline;
+    text-underline-offset:8px;
+}
+
+.title-hero {
+    text-align: center;
+    padding-top: 50px;
+    padding-bottom: 30px;
+}
+
+.title-hero h1 {
+    color: #056AFC;
+}
+
+.title-hero p {
+    color: black;
+}
+
+.image-hero img {
+    display: block;
+    width: 80%;
+    margin: 0 auto;
+    border-radius: 20px;
+    box-shadow: 2px 4px 10px black;
+}
+
+.image-hero img:hover {
+    transform: scale(.6);
+    transition: 1s;
+}
+
+#about {
+    width: 90%;
+    margin: 0 auto;
+}
+
+#about h2 {
+    padding-top: 40px;
+    align-items: center;
+    color: #FF0000 ;
+}
+#about p {
+    color: black ;
+}
+
+
+hr {
+    width: 30%;
+}
+
+#menu {
+    width: 90%;
+    margin: 0 auto;
+}
+
+#menu h2 {
+    padding-top: 40px;
+    color: ;
+}
+
+.cards {
+    background-color: whitesmoke;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 20px;
+}
+
+.card {
+    background-color:#d43931 ;
+    width: 350px;
+    border: 1px solid #65B741;
+    border-radius: 15px;
+}
+
+.card img {
+    width: 100%;
+    border-radius: 15px;
+}
+
+.card img:hover {
+    transform: scale(1.1);
+    transition: .3s;
+}
+
+.container {
+    text-align: center;
+}
+
+.card a {
+    text-decoration: none;
+    color: whitesmoke;
+    padding: 12px 30px;
+    margin-left: 105px;
+    border: 1px;
+    border-radius: 12px;
+    box-shadow: 1px 2px 4px;
+}
+
+.card a:hover {
+    background-color: black;
+    color: white;
+}
+
+#contact {
+    width: 95%;
+    margin: 40px auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.image-contact {
+    width: 50%;
+}
+
+.image-contact img {
+    width: 100%;
+    border-radius: 50%;
+}
+
+footer {
+    width: 100%;
+    margin: 60px auto;
+    background-color: yellow;
+    padding: 20px;
+    text-align: center;
+}
+
+h1 {
+    font-family: "Vanquish W00 Bold";
+}
+
+h2 {
+    font-family: "Vanquish W00 Bold";
+}
+
+p {
+    font-family: "Vanquish W00 Bold";
+}
\ No newline at end of file
