First Upload

Queen288 · Mar 20, 2024 · 27ae657 · 27ae657
1 parent 300322d
commit 27ae657
Show file tree

Hide file tree

Showing 17 changed files with 377 additions and 0 deletions.
diff --git a/Website kpop/img/album-kpop.jpg b/Website kpop/img/album-kpop.jpg
diff --git a/Website kpop/img/boneka bt21.jpeg b/Website kpop/img/boneka bt21.jpeg
diff --git a/Website kpop/img/bt21.webp b/Website kpop/img/bt21.webp
diff --git a/Website kpop/img/case phone.jpeg b/Website kpop/img/case phone.jpeg
diff --git a/Website kpop/img/infoqueen.png b/Website kpop/img/infoqueen.png
diff --git a/Website kpop/img/instagram.png b/Website kpop/img/instagram.png
diff --git a/Website kpop/img/jaehyun.jpeg b/Website kpop/img/jaehyun.jpeg
diff --git a/Website kpop/img/lightstic-kpop.jpeg b/Website kpop/img/lightstic-kpop.jpeg
diff --git a/Website kpop/img/patung svt.jpeg b/Website kpop/img/patung svt.jpeg
diff --git a/Website kpop/img/photocard-kpop.jpeg b/Website kpop/img/photocard-kpop.jpeg
diff --git a/Website kpop/img/poster-kpop.jpeg b/Website kpop/img/poster-kpop.jpeg
diff --git a/Website kpop/img/totebag.jpeg b/Website kpop/img/totebag.jpeg
diff --git a/Website kpop/img/whatsapp.png b/Website kpop/img/whatsapp.png
diff --git a/Website kpop/img/youtube.png b/Website kpop/img/youtube.png
diff --git a/Website kpop/index.html b/Website kpop/index.html
@@ -0,0 +1,152 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Kpop Store| Havenly Kpop Store in Bogor</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">
+			<h1>JS :)</h1>
+		</div>
+		<nav>
+			<ul>
+				<li><a href="#index.html">Home</a></li>
+				<li><a href="#about">About</a></li>
+				<li><a href="#menu">Product</a></li>
+				<li><a href="#contact">Contact</a></li>
+			</ul>
+		</nav>
+	</header>
+	<div class="hero">
+		<div class="title-hero">
+			<h1>LET'S SHOPPING EVERDY HERE WITH US</h1>
+			<p>Welcome to the Kpop Store, Kpop Store that you can find only one in Bogor</p>
+		</div>
+		<div class="image-hero">
+			<img src="./img/jaehyun.jpeg">
+		</div>
+	</div>
+
+	<div id="about">
+		<h2>About Kpop Store</h2>
+		<hr>
+		<p>Korean popular culture, widely known as K-Pop, has garnered immense global popularity in recent years. One of the central hubs for K-Pop enthusiasts is the K-Pop store, where fans can immerse themselves in the music, fashion, and culture of their favorite Korean idols. Let's delve into the vibrant world of a K-Pop store and explore its unique offerings. Enjoy with your bias!!!</p>
+	</div>
+
+	<div id="Product">
+		<div class="title-menu">
+			<h2>Product on Kpop Store</h2>
+			<hr>
+			<p>Come on, open the door to happiness by attending Kpop Store! Feel the charm and excitement in an atmosphere full of surprises!!</p>
+		</div>
+
+		<!-- Gambar produk -->
+		<div class="cards">
+
+
+
+			<div class="card">
+				<img src="./img/album-kpop.jpg" alt="album's">
+				<div class="container">
+					<h4>Albums</h4>
+					<p>Kpop albums are often used for us to hear our favorite songs and to increase their group's sales so that they become even more famous.</p>
+
+				</div>
+				<a href="#">Order Now</a>
+			</div>
+
+<!-- Gambar produk -->
+			<div class="card">
+				<img src="./img/lightstic-kpop.jpeg" alt="lightstic's">
+				<div class="container">
+					<h4>Lightstick</h4>
+					<p>A collection of photocards can be a way to regenerate that happiness. This small piece of paper can save many happy smiles from many K-Pop fans.</p>
+				</div>
+				<a href="#">Order Now</a>
+			</div>
+
+			<div class="card">
+				<img src="./img/poster-kpop.jpeg" alt="poster's">
+				<div class="container">
+					<h4>Poster</h4>
+					<p>A collection of photocards can be a way to regenerate that happiness. This small piece of paper can save many happy smiles from many K-Pop fans.</p>
+				</div>
+				<a href="#">Order Now</a>
+			</div>
+
+
+			<div class="card">
+				<img src="./img/photocard-kpop.jpeg" alt="photocard's">
+				<div class="container">
+					<h4>Photo Card</h4>
+					<p>A collection of photocards can be a way to regenerate that happiness. This small piece of paper can save many happy smiles from many K-Pop fans.</p>
+				</div>
+				<a href="#">Order Now</a>
+			</div>
+
+			<div class="card">
+				<img src="./img/totebag.jpeg" alt="tote bag's">
+				<div class="container">
+					<h4>Tote Bag</h4>
+					<p>This tote bag is not just a bag, but also a reflection of style and environmental awareness. Carry it anywhere with pride and help reduce plastic. The advantage is that there is a boy or girl band that we like.</p>
+				</div>
+				<a href="#">Order Now</a>
+			</div>
+
+			<div class="card">
+				<img src="./img/boneka bt21.jpeg" alt="doll's">
+				<div class="container">
+					<h4>Doll's </h4>
+					<p>Find fun in the form of our K-pop dolls! Every touch brings life to your favorite idols. Make this collection a source of inspiration and pleasure in your life. Get it now and let K-pop music and charm decorate your room!</p>
+				</div>
+				<a href="#">Order Now</a>
+			</div>
+
+			<div class="card">
+				<img src="./img/case phone.jpeg" alt="case's">
+				<div class="container">
+					<h4>case phone's </h4>
+					<p>Present unmatched K-pop style on your smartphone! With our exclusive collection, you can protect your device with a style worthy of your favorite K-pop idols. Keep your smartphone safe and stylish with our K-pop cellphone cases. Get it now and show your dedication to K-pop music and culture!</p>
+				</div>
+				<a href="#">Order Now</a>
+			</div>
+
+			<div class="card">
+				<img src="./img/patung svt.jpeg" alt="statue mini's">
+				<div class="container">
+					<h4>statue mini </h4>
+					<p>Our collection of K-pop mini statues will bring the sparkle of your favorite stars right into your home! Perfect detail and exceptional quality make each statue a masterpiece. Make your space look like a concert stage by showcasing our collection of K-pop mini statues. Get it now and let the charm of K-pop idols inspire your every day!</p>
+				</div>
+				<a href="#">Order Now</a>
+			</div>
+
+
+			<div id="contact">
+            <h2>Our Contact</h2>
+            <div class="image-info.queen">
+                <img src="./img/infoqueen.png">
+            </div>
+            <div class="text-contact">
+                <div class="data">
+                    <h4>Get in touch</h4>
+                    <p>Telaga Kahuripan</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/a30df7"><img src="img/whatsapp.png"></a>
+
+                </div>
+            </div>
+        </div>
+
+
+        <!-- Fooeter -->
+        <footer>
+        	<p>&copy; March 2024. Build & Design by Bernadetha Fransisa Queen Mezaros</p>
+        </footer>
diff --git a/Website kpop/style.css b/Website kpop/style.css
@@ -0,0 +1,170 @@
+body {
+	background-color: #FFF7F1;
+	margin: 0;
+	padding: 0;
+	scroll-behavior: smooth;
+}
+
+header {
+	background-color: #FFB5DA;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding-left: 30px;
+	padding-right: 30px;
+}
+
+.logo {
+	color: #AD88C6;
+	cursor:pointer;
+}
+
+.logo:hover {
+	color: #AD88C6;
+	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: #AD88C6;
+}
+
+nav li a:hover {
+	color: #65B741;
+	text-decoration: underline;
+	text-underline-offset:8px;
+}
+
+.title-hero {
+	text-align: center;
+	padding-top: 50px;
+	padding-bottom: 30px;
+}
+
+.title-hero h1 {
+	color: #AD88C6;
+}
+
+.title-hero p {
+	color: black;
+}
+
+
+
+.image-hero img {
+	display: block;
+	width: 80%;
+	margin: 0 auto;
+	border-radius: 20px;
+	box-shadow: 2px 4px 10px greenyellow;
+}
+
+.image-hero img:hover {
+	transform: scale(.8);
+	transition: 2s;
+}
+
+#about {
+	width: 90%;
+	margin: 0 auto;
+}
+
+#about h2 {
+	padding-top: 40px;
+	color:#AD88C6 ;
+}
+
+hr {
+	width: 30%;
+}
+
+#product {
+	width: 90%;
+	margin: 0 auto;
+}
+
+#menu h2 {
+	padding-top: 40px;
+	color: #FFB534 ;
+}
+
+.cards {
+	background-color: whitesmoke;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: 20px;
+}
+
+.card {
+	background-color:#6420AA ;
+	width: 350px;
+	border: 1px solid #6420AA;
+	border-radius: 15px;
+}
+
+.card img {
+	width: 100%;
+	border-radius: 15px;
+}
+
+.card img:hover {
+	transform: scale(1.1);
+	transition: .3s;
+}
+
+.container {
+	text-align: center;
+    padding-bottom: 10px;
+}
+
+.card a {
+	text-decoration: none;
+	color: black;
+	margin-left: 105px;
+	border: 1px solid green;
+	padding: 10px 40px;
+	border-radius: 12px;
+	box-shadow: 1px 2px 4px;
+}
+
+.card a:hover {
+	background-color: green;
+	color: whitesmoke;
+}
+
+#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: 95%;
+	margin: 40px auto;
+	background-color: #FFB5DA
+	padding:20px;
+	text-align: center;
+}
diff --git a/Website kpop/styles.css b/Website kpop/styles.css
@@ -0,0 +1,55 @@
+body {
+	margin: 0;
+	padding: 0;
+	font-family: monospace;
+	background-color: whitesmoke;
+}
+
+header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	background-color: gold;
+}
+
+.logo {
+	padding-left: 30px;
+}
+
+.logo:hover {
+	transform: scale(1.2);
+
+}
+
+nav ul {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+nav ul li {
+	list-style-type: none;
+	padding: 0 30px;
+}
+
+nav ul li a {
+	color: gostwhite;
+	padding: 8px 15px:;
+	background-color: #F8E559
+	color: purple;
+	border-radius: 12px;
+	box-shadow: 1px 2px 3px #F8E559;
+
+}
+
+.call {
+	padding-right: 30px
+}
+
+.call a {
+	text-decoration: none;
+	color: whitesmoke
+	padding: 8px 15px;
+	background-color: #F8E559;
+	color: puple;
+}