[07.10, 11/3/2025] Chat Gpt: Berikut adalah landing page untuk brand "Semoga Glowing" dengan tema skincare dan nuansa Barbie, menggunakan formula PAS (Problem-Agitate-Solution) serta Bootstrap. Saya juga akan menambahkan gambar dengan sudut lengkung, border, shadow, dan transisi sebelum gambar muncul. Di bawah ini adalah kode HTML dan CSS lengkap untuk mencapai semua elemen yang diminta.
HTML (landing-page-semoga-glowing.html):
```html
Semoga Glowing - Skincare untuk Kulit Cerah dan Sehat
Ingin Kulit Cerah dan Glowing?
[07.10, 11/3/2025] Chat Gpt:Dengan "Semoga Glowing", kamu bisa mendapatkan kulit yang cerah, halus, dan bebas masalah.
Mulai Perawatan SekarangApakah Kulit Anda Mengalami Masalah Ini?
- Kulit Kusam: Kulit tampak lelah dan kurang bercahaya.
- Jerawat dan Bekasnya: Jerawat datang dan meninggalkan noda.
- Kulit Kering: Kulit terasa kasar dan tidak terhidrasi dengan baik.
Jangan Biarkan Masalah Kulit Mengganggu Hari-Harimu
Tanpa perawatan yang tepat, masalah kulit bisa semakin parah. Jerawat akan semakin merusak penampilan, kulit kering bisa semakin teriritasi, dan kulit kusam akan membuatmu kehilangan kepercayaan diri.
Perkenalkan: Semoga Glowing
[07.11, 11/3/2025] Chat Gpt:Semoga Glowing adalah produk skincare dengan bahan alami yang efektif untuk mengatasi berbagai masalah kulit, memberikan hasil glowing alami, dan menjaga kesehatan kulit kamu!
Manfaat Produk:
Siap Memiliki Kulit Glowing?
Ayo, rasakan manfaat perawatan dari Semoga Glowing dan dapatkan kulit cerah alami yang kamu impikan.
Beli SekarangApa Kata Pengguna Kami?
"Kulit saya lebih cerah dan halus dalam waktu singkat! Semoga Glowing benar-benar bekerja dengan baik."
- Rina, 28
CSS (styles.css):
css
/* Global Styles */
body {
font-family: Arial, sans-serif;
background-color: #f5f0f7;
color: #333;
}
/* Hero Section */
.hero {
background-color: #ff66b2;
color: white;
padding: 60px 20px;
}
.hero h1 {
font-size: 3rem;
}
.hero p {
font-size: 1.2rem;
}
/* Problem Section */
.problem {
padding: 40px 20px;
}
.problem h2 {
font-size: 2.5rem;
margin-bottom: 20px;
}
.problem ul {
font-size: 1.1rem;
}
/* Agitate Section */
.agitate {
background-color: #f9f2f8;
padding: 40px 20px;
}
.agitate h2 {
font-size: 2.5rem;
}
.agitate p {
font-size: 1.1rem;
}
/* Solution Section */
.solution {
padding: 60px 20px;
background-color: white;
}
.solution h2 {
font-size: 2.5rem;
margin-bottom: 20px;
}
.solution ul {
font-size: 1.1rem;
text-align: left;
margin-top: 20px;
}
.solution img {
border-radius: 15px;
border: 2px solid #ff3399;
[07.11, 11/3/2025] Chat Gpt: box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease-in-out;
}
.solution img:hover {
transform: scale(1.05);
}
.image-transition {
opacity: 0;
animation: fadeIn 1s forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* CTA Section */
.cta {
background-color: #ff66b2;
color: white;
padding: 50px 20px;
}
.cta h2 {
font-size: 2.5rem;
}
.cta p {
font-size: 1.2rem;
}
/* Testimonials Section */
.testimonials {
padding: 40px 20px;
background-color: #fff;
}
.testimonials h2 {
font-size: 2.5rem;
margin-bottom: 20px;
}
.testimonials p {
font-style: italic;
font-size: 1.1rem;
}
/* Footer */
footer {
background-color: #333;
color: white;
padding: 20px;
}
footer p {
font-size: 1rem;
}
```
Penjelasan:
1. Gambar dengan Sudut Lengkung dan Border:
- Menggunakan border-radius: 15px; untuk membuat sudut lengkung pada gambar.
- Menambahkan border: 2px solid #ff3399; untuk memberikan border pada gambar dengan ketebalan 2px dan warna pink yang sesuai dengan tema Barbie.
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); menambahkan bayangan lembut di sekitar gambar.
2. Transisi Sebelum Gambar Muncul:
[07.11, 11/3/2025] Chat Gpt: - Menambahkan animasi fadeIn dengan menggunakan keyframes CSS. Gambar memiliki class image-transition yang membuat gambar muncul secara bertahap saat halaman dimuat.
- Transisi gambar menggunakan properti transition: transform 0.3s ease-in-out;, yang akan memperbesar