diff --git a/public/css/user/main.css b/public/css/user/main.css index 847d20e..ddb8760 100644 --- a/public/css/user/main.css +++ b/public/css/user/main.css @@ -401,37 +401,89 @@ .collage-wrapper { margin: 0 auto; } -/* Gambar Besar (2 buah ditumpuk) */ -.img-lg { +/* Container pembungkus kolase agar menempel ke pinggir */ +.collage-inner { + display: flex; + gap: 15px; + /* Jarak antar gambar kolase */ width: 100%; - height: 200px; +} + +/* Gambar tumpuk (stacked) */ +.img-florist-stacked { + width: 230px; + /* Lebar tetap agar tidak lari */ + aspect-ratio: 1 / 1; object-fit: cover; + border-radius: 16px; transition: transform 0.3s ease; } -/* Gambar Sedang/Kecil (1 buah di tengah) */ -.img-md { - width: 100%; - height: 220px; +/* Gambar tunggal (single) */ +.img-florist-single { + width: 200px; + /* Ukuran sedikit lebih kecil agar variatif */ + aspect-ratio: 1 / 1; object-fit: cover; + border-radius: 16px; transition: transform 0.3s ease; } -/* Hover Effect */ -.img-lg:hover, -.img-md:hover { +/* Responsif: Agar di HP gambar tidak pecah */ +@media (max-width: 768px) { + + .img-florist-stacked, + .img-florist-single { + width: 100%; + max-width: 100%; + } +} + +/* Container utama kolase */ +.collage-container { + display: flex; + gap: 15px; + align-items: center; + width: fit-content; + /* Kunci: agar container hanya selebar gambarnya saja */ +} + +/* Bagian yang isi 2 gambar tumpuk */ +.collage-stacked { + display: flex; + flex-direction: column; + gap: 15px; + width: 220px; + /* Tentukan lebar pasti di sini */ +} + +/* Bagian yang isi 1 gambar tunggal */ +.collage-single { + width: 200px; + /* Tentukan lebar pasti di sini (buat sedikit lebih kecil agar manis) */ +} + +/* Style gambar universal */ +.img-collage { + width: 100%; + aspect-ratio: 1 / 1; + object-fit: cover; + border-radius: 20px; + transition: transform 0.3s ease; +} + +.img-collage:hover { transform: scale(1.03); } -/* Responsive Fix (Mobile) */ -@media (max-width: 767.98px) { - .collage-wrapper { - margin-bottom: 30px; +/* Responsif untuk HP: kalau kekecilan, lebarnya jadi otomatis */ +@media (max-width: 576px) { + .collage-stacked { + width: 140px; } - .img-lg, - .img-md { - height: 160px; + .collage-single { + width: 120px; } } diff --git a/resources/views/user/beranda.blade.php b/resources/views/user/beranda.blade.php index 137c2ba..65434e4 100644 --- a/resources/views/user/beranda.blade.php +++ b/resources/views/user/beranda.blade.php @@ -29,9 +29,9 @@
-
-
-
-
+
+
- Flo.do menyajikan rangkaian bunga segar yang dirancang dengan keanggunan untuk - berbagai momen istimewa, lengkap dengan katalog pilihan dan pemesanan yang mudah - secara online. -
+Flo.do menyajikan rangkaian bunga segar yang dirancang dengan keanggunan untuk + berbagai momen istimewa.
Lihat Pilihan Bunga- Flodo menghadirkan pengalaman self photo yang estetik dan personal di Nganjuk, - dengan pilihan paket dan jadwal yang dapat kamu atur langsung melalui website. +
Flodo menghadirkan pengalaman self photo yang estetik dan personal di Nganjuk.
Lihat Paket Foto
-
-
-
+
+
Cari tahu tentang layanan florist dan self photo studio kami. -
+Cari tahu tentang layanan florist dan self photo studio kami.