BOUTIQUE MON SHOP</tittle>
<style>
/* =========================
DASAR WEBSITE
========================= */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: Arial, Helvetica, sans-serif;
background:
linear-gradient(
135deg,
#fff5fa,
#ffd6e7,
#ffeaf2
);
color: #4b2636;
}
/* =========================
HEADER / LOGO
========================= */
header {
text-align: center;
padding: 45px 20px;
background:
linear-gradient(
135deg,
#b81763,
#e7548f,
#f58fb5
);
color: white;
box-shadow:
0 5px 20px rgba(120,20,70,0.25);
}
/* LOGO */
.logo {
<img src="https://s3projectmonica.s3.us-east-1.amazonaws.com/logo+monic.jpg">width=100 height=100
width: 115px;
height: 115px;
margin: auto;
border-radius: 50%;
background:
linear-gradient(
135deg,
#ffffff,
#ffe1ec
);
border: 5px solid #f8c6d9;
display: flex;
align-items: center;
justify-content: center;
color: #b81763;
font-size: 35px;
font-weight: bold;
letter-spacing: 3px;
box-shadow:
0 8px 25px
rgba(0,0,0,0.25);
}
header h1 {
margin-top: 20px;
font-size: 40px;
letter-spacing: 5px;
}
header p {
margin-top: 10px;
font-size: 17px;
color: #ffeaf2;
letter-spacing: 3px;
}
/* =========================
NAVBAR
========================= */
nav {
position: sticky;
top: 0;
z-index: 100;
text-align: center;
padding: 17px;
background: #74143f;
box-shadow:
0 3px 12px
rgba(0,0,0,0.2);
}
nav a {
color: white;
text-decoration: none;
margin: 0 18px;
font-weight: bold;
transition: 0.3s;
}
nav a:hover {
color: #ffc5d9;
}
/* =========================
HERO
========================= */
.hero {
text-align: center;
padding: 90px 25px;
background:
linear-gradient(
rgba(255,226,237,0.90),
rgba(255,245,250,0.95)
);
}
.hero .icon {
font-size: 40px;
margin-bottom: 15px;
}
.hero h2 {
font-size: 42px;
color: #a31357;
margin-bottom: 20px;
}
.hero p {
max-width: 800px;
margin: 12px auto;
line-height: 1.9;
font-size: 18px;
}
.btn {
display: inline-block;
margin-top: 25px;
padding: 15px 35px;
background:
linear-gradient(
135deg,
#b81763,
#e7548f
);
color: white;
text-decoration: none;
border-radius: 30px;
font-weight: bold;
box-shadow:
0 6px 18px
rgba(184,23,99,0.3);
transition: 0.3s;
}
.btn:hover {
transform: translateY(-3px);
}
/* =========================
PRODUK
========================= */
.produk {
padding: 70px 30px;
text-align: center;
}
.produk h2 {
font-size: 34px;
color: #a31357;
margin-bottom: 10px;
}
.subjudul {
color: #805466;
margin-bottom: 35px;
}
.container {
display: flex;
justify-content: center;
gap: 35px;
flex-wrap: wrap;
}
/* =========================
CARD PRODUK
========================= */
.card {
width: 300px;
background: rgba(255,255,255,0.95);
border-radius: 20px;
padding: 18px;
box-shadow:
0 10px 30px
rgba(150,40,90,0.18);
border:
2px solid #f5c8d9;
transition: 0.4s;
}
.card:hover {
transform:
translateY(-12px);
box-shadow:
0 18px 35px
rgba(150,40,90,0.25);
}
.card img {
width: 100%;
height: 270px;
object-fit: cover;
border-radius: 15px;
border: 2px solid #f5d3df;
}
.card h3 {
margin-top: 20px;
font-size: 22px;
color: #a31357;
}
.card p {
margin-top: 12px;
line-height: 1.7;
color: #674553;
}
.harga {
font-size: 22px !important;
font-weight: bold;
color: #d42d76 !important;
}
.beli {
display: inline-block;
margin-top: 12px;
padding: 11px 25px;
background: #b81763;
color: white;
text-decoration: none;
border-radius: 25px;
font-weight: bold;
}
.beli:hover {
background: #8e124b;
}
/* =========================
TENTANG TOKO
========================= */
.tentang {
padding: 70px 25px;
text-align: center;
background:
linear-gradient(
135deg,
#9e1455,
#d93679,
#ed6b9c
);
color: white;
}
.tentang h2 {
color: #ffe4ee;
font-size: 32px;
margin-bottom: 20px;
}
.tentang p {
max-width: 800px;
margin: 12px auto;
line-height: 1.9;
font-size: 17px;
}
/* =========================
IDENTITAS
========================= */
.identitas {
margin: 30px auto 0;
padding: 25px;
max-width: 450px;
border:
2px solid #ffd3e2;
border-radius: 18px;
background:
rgba(255,255,255,0.12);
}
.identitas p {
margin: 10px;
}
.identitas strong {
color: #ffe1ec;
}
/* =========================
FOOTER
========================= */
footer {
text-align: center;
padding: 30px;
background: #641238;
color: #f8cbdc;
}
footer strong {
color: white;
}
footer p {
margin: 8px;
}
</style>
</head>
<body>
<!-- =========================
HEADER
========================= -->
<header>
<div class=<img src="https://s3projectmonica.s3.us-east-1.amazonaws.com/logo+monic.jpg" width=100 height=100
MON
</div>
<h1>
BOUTIQUE MON SHOP
</h1>
<p>
✦ ELEGANT • LUXURY • BEAUTY ✦
</p>
</header>
<!-- =========================
NAVBAR
========================= -->
<nav>
<a href="#home">
HOME
</a>
<a href="#produk">
PRODUK
</a>
<a href="#tentang">
TENTANG
</a>
<a href="#kontak">
KONTAK
</a>
</nav>
<!-- =========================
HERO
========================= -->
<section
id="home"
class="hero">
<div class="icon">
🌸 ✦ 🌸
</div>
<h2>
Welcome to Boutique Mon Shop
</h2>
<p>
Selamat datang di
<b>BOUTIQUE MON SHOP</b>,
sebuah toko online yang menghadirkan
koleksi pilihan dengan konsep feminin,
elegan, modern, dan mewah.
</p>
<p>
Kami percaya bahwa setiap orang memiliki
gaya dan keunikan tersendiri.
Karena itu, setiap produk kami hadir
untuk memberikan kesan cantik,
elegan, dan percaya diri.
</p>
<a
href="#produk"
class="btn">
✨ LIHAT KOLEKSI ✨
</a>
</section>
<!-- =========================
PRODUK
========================= -->
<section
id="produk"
class="produk">
<h2>
✨ Koleksi Produk ✨
</h2>
<p class="subjudul">
Temukan pilihan produk favoritmu
di Boutique Mon Shop
</p>
<div class="container">
<!-- PRODUK 1 -->
<div class="card">
<img
src="https://s3projectmonica.s3.us-east-1.amazonaws.com/1.jpg"
alt="Elegant Beauty Set">
<h3>
Elegant Beauty Set
</h3>
<p>
Paket kecantikan dengan konsep
elegan yang cocok digunakan
untuk melengkapi kebutuhan
kecantikan sehari-hari.
Produk ini memiliki tampilan
yang cantik dan praktis,
sehingga cocok untuk digunakan
sendiri maupun sebagai hadiah
untuk orang tersayang.
</p>
<p class="harga">
Rp800.000,00
</p>
<a
href="https://wa.me/+62882006907590"
class="beli">
Beli Sekarang
</a>
</div>
<!-- PRODUK 2 -->
<div class="card">
<img
src="https://s3projectmonica.s3.us-east-1.amazonaws.com/22.jpg"
alt="Luxury Beauty Collection">
<h3>
Luxury Beauty Collection
</h3>
<p>
Koleksi pilihan dengan nuansa
mewah dan stylish.
Dirancang untuk memberikan
pengalaman penggunaan yang
nyaman serta tampilan yang
elegan.
Produk ini sangat cocok bagi
kamu yang menyukai gaya
modern, feminin, dan berkelas.
</p>
<p class="harga">
Rp1.650.000,00
</p>
<a
href="https://wa.me/+62882006907590"
class="beli">
Beli Sekarang
</a>
</div>
<!-- PRODUK 3 -->
<div class="card">
<img
src="https://s3projectmonica.s3.us-east-1.amazonaws.com/3.jpg"
alt="Premium Beauty Package">
<h3>
Premium Beauty Package
</h3>
<p>
Paket premium yang menghadirkan
pilihan produk dengan konsep
eksklusif dan elegan.
Cocok diberikan sebagai hadiah
spesial maupun digunakan untuk
melengkapi koleksi pribadi.
Dengan tampilan mewah,
produk ini memberikan kesan
istimewa pada setiap kesempatan.
</p>
<p class="harga">
Rp5.000.000,00
</p>
<a
href="https://wa.me/+62882006907590"
class="beli">
Beli Sekarang
</a>
</div>
</div>
</section>
<!-- =========================
TENTANG TOKO
========================= -->
<section
id="tentang"
class="tentang">
<h2>
💎 Tentang Boutique Mon Shop 💎
</h2>
<p>
<b>BOUTIQUE MON SHOP</b> merupakan
toko online dengan konsep elegan,
feminin, modern, dan mewah.
Toko ini hadir untuk memberikan
pengalaman berbelanja yang nyaman
dengan menghadirkan berbagai pilihan
produk yang menarik dan berkualitas.
</p>
<p>
Kami mengutamakan keindahan desain,
kualitas produk, serta kepuasan
pelanggan. Setiap koleksi dipilih
dengan perhatian terhadap detail
agar dapat memberikan kesan
istimewa bagi setiap pelanggan.
</p>
<p>
✨ "Beauty begins with confidence,
elegance completes the style." ✨
</p>
<!-- IDENTITAS -->
<div class="identitas">
<p>
<strong>Nama:</strong>
Monica Sela Reztyana
</p>
<p>
<strong>Absen:</strong>
19
</p>
<p>
<strong>Kelas:</strong>
XII TKJ D
</p>
</div>
</section>
<!-- =========================
FOOTER
========================= -->
<footer
id="<footer id="kontak">
<p>
© 2026
<strong>BOUTIQUE MON SHOP</strong>
</p>
<p>
Monica Sela Reztyana
• Absen 19
• XII TKJ D
</p>
<p>
📱 WhatsApp:
<a
href="https://wa.me/62882006907590"
target="_blank"
style="color:white; text-decoration:none; font-weight:bold;">
0882-0069-07590
</a>
</p>
<p>
🌸 Thank You For Visiting Our Boutique 🌸
</p>
</footer>">
<p>
© 2026
<strong>
BOUTIQUE MON SHOP
</strong>
</p>
<p>
Monica Sela Reztyana
• Absen 19
• XII TKJ D
</p>
<p>
🌸 Thank You For Visiting Our Boutique 🌸
</p>
</footer>
</body>
</html>