Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@Cornnn123
Cornnn123 authored Jun 11, 2024
1 parent d70672a commit 128a55c
Show file tree
Hide file tree
Showing 2 changed files with 323 additions and 0 deletions.
135 changes: 135 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -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>
188 changes: 188 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -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";
}

0 comments on commit 128a55c

Please sign in to comment.