Modèle web Pink Bouquet Shop
Résumé
La communauté du server BIyyy a annoncé la sortie d'un "Modèle web Pink Bouquet Shop". Cette annonce détaille la structure du modèle, incluant des styles CSS axés sur des tons roses, des fonctionnalités JavaScript de base et un espace réservé pour la page d'accueil. Cette version offre aux membres une base de conception thématique prête à l'emploi pour une boutique de fleurs ou de bouquets en ligne.
public/css/style.css**
/* Warna tema pink */
:root {
- -primary-color: #FF69B4; /* Pink cerah */
- -secondary-color: #FFB6C1; /* Pink muda */
- -text-color: #333;
- -bg-color: #F8BBD0;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: var(--bg-color);
color: var(--text-color);
}
/* Header */
header {
background-color: var(--secondary-color);
color: white;
padding: 20px;
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 10px;
}
nav a {
color: var(--primary-color);
text-decoration: none;
}
/* Banner */
.banner {
background-image: url('images/banner.jpg'); /* Ganti dengan gambar buket pink */
background-size: cover;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
color: white;
text-align: center;
}
.banner h1 {
font-size: 3em;
color: var(--primary-color);
}
/* Kategori Populer */
.categories {
padding: 20px;
text-align: center;
}
.category {
display: inline-block;
margin: 10px;
padding: 15px;
background-color: white;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* Produk Unggulan */
.featured-products {
padding: 20px;
text-align: center;
}
.product {
display: inline-block;
margin: 10px;
padding: 15px;
background-color: white;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* Footer */
footer {
background-color: var(--secondary-color);
color: white;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
2. public/js/script.js
// Contoh sederhana: menampilkan alert saat halaman dimuat
window.onload = function() {
alert("Selamat datang di toko buket bunga pink kami!");
};
3. views/pages/homepage.blade.php (Si vous utilisez Laravel, ou homepage.html sinon)
```html
16 views
