<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dreamy Blooming - Luxury Flower Boutique</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Georgia', serif;
background: #ffffff;
color: #333;
overflow-x: hidden;
}
/* Header */
.header {
text-align: center;
padding: 40px 20px 30px;
background: linear-gradient(180deg, #ffffff 0%, #fef8fc 100%);
position: relative;
}
.company-name {
font-size: 48px;
font-weight: 300;
letter-spacing: 3px;
color: #2c2c2c;
margin-bottom: 10px;
font-family: 'Georgia', serif;
text-transform: uppercase;
}
.company-name span {
background: linear-gradient(135deg, #e8a0bf, #a78ec4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.tagline {
font-size: 16px;
color: #999;
font-style: italic;
letter-spacing: 1px;
}
/* Hero Section */
.hero {
text-align: center;
padding: 60px 20px 80px;
position: relative;
background: #ffffff;
}
.hero h2 {
font-size: 36px;
font-weight: 300;
color: #2c2c2c;
margin-bottom: 20px;
letter-spacing: 2px;
}
.hero p {
font-size: 18px;
color: #888;
max-width: 600px;
margin: 0 auto 50px;
line-height: 1.6;
}
/* Flower Size Cards */
.flower-sizes {
display: flex;
justify-content: center;
gap: 40px;
flex-wrap: wrap;
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}
.flower-card {
background: #ffffff;
border: 2px solid #f5e6ef;
border-radius: 20px;
padding: 30px;
width: 280px;
cursor: pointer;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
box-shadow: 0 8px 25px rgba(200, 160, 190, 0.1);
}
.flower-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(200, 160, 190, 0.2);
border-color: #e8a0bf;
}
.flower-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(232, 160, 191, 0.05) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.4s ease;
}
.flower-card:hover::before {
opacity: 1;
}
.flower-image {
width: 150px;
height: 150px;
margin: 0 auto 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 80px;
position: relative;
z-index: 1;
}
.flower-card.small .flower-image {
background: linear-gradient(135deg, #fef0f5, #fce4ec);
}
.flower-card.medium .flower-image {
background: linear-gradient(135deg, #f3e8f5, #e8d5f0);
}
.flower-card.large .flower-image {
background: linear-gradient(135deg, #fdf0f8, #f5d5e8);
}
.flower-name {
font-size: 28px;
font-weight: 400;
color: #2c2c2c;
margin-bottom: 10px;
letter-spacing: 1px;
position: relative;
z-index: 1;
}
.flower-price {
font-size: 32px;
font-weight: 300;
color: #c7809a;
margin-bottom: 15px;
position: relative;
z-index: 1;
}
.flower-price span {
font-size: 16px;
color: #999;
}
.flower-description {
font-size: 14px;
color: #aaa;
line-height: 1.6;
position: relative;
z-index: 1;
}
.customize-btn {
display: inline-block;
margin-top: 20px;
padding: 12px 30px;
background: linear-gradient(135deg, #e8a0bf, #a78ec4);
color: white;
border: none;
border-radius: 25px;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
z-index: 1;
letter-spacing: 1px;
text-transform: uppercase;
}
.customize-btn:hover {
transform: scale(1.05);
box-shadow: 0 5px 20px rgba(200, 160, 190, 0.4);
}
/* Customization Modal */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 1000;
justify-content: center;
align-items: center;
animation: fadeIn 0.3s ease;
}
.modal.active {
display: flex;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.modal-content {
background: #ffffff;
border-radius: 30px;
padding: 40px;
max-width: 800px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
position: relative;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
animation: slideUp 0.4s ease;
}
@keyframes slideUp {
from {
transform: translateY(50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.close-modal {
position: absolute;
top: 20px;
right: 20px;
width: 40px;
height: 40px;
border-radius: 50%;
background: #f5e6ef;
border: none;
cursor: pointer;
font-size: 20px;
color: #999;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.close-modal:hover {
background: #e8a0bf;
color: white;
}
.modal h2 {
font-size: 32px;
font-weight: 300;
color: #2c2c2c;
margin-bottom: 10px;
text-align: center;
}
.modal-size-display {
text-align: center;
font-size: 18px;
color: #c7809a;
margin-bottom: 30px;
font-style: italic;
}
/* 3D Flower Preview */
.flower-preview {
width: 200px;
height: 200px;
margin: 0 auto 30px;
border-radius: 50%;
background: linear-gradient(135deg, #fef0f5, #fce4ec);
display: flex;
align-items: center;
justify-content: center;
font-size: 100px;
position: relative;
box-shadow: 0 10px 30px rgba(200, 160, 190, 0.3);
animation: float 3s ease-in-out infinite;
transition: all 0.5s ease;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
/* Customization Options */
.customization-section {
margin-bottom: 25px;
}
.customization-section h3 {
font-size: 18px;
font-weight: 400;
color: #2c2c2c;
margin-bottom: 15px;
letter-spacing: 1px;
}
.options-grid {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.option-btn {
padding: 10px 20px;
background: #faf5f8;
border: 2px solid #f5e6ef;
border-radius: 20px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 14px;
color: #666;
position: relative;
}
.option-btn:hover {
border-color: #e8a0bf;
color: #c7809a;
background: #fef8fc;
}
.option-btn.selected {
border-color: #e8a0bf;
background: linear-gradient(135deg, #fef0f5, #fce4ec);
color: #c7809a;
box-shadow: 0 5px 15px rgba(200, 160, 190, 0.2);
}
.color-option {
width: 40px;
height: 40px;
border-radius: 50%;
border: 3px solid #f5e6ef;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
.color-option:hover {
transform: scale(1.1);
border-color: #e8a0bf;
}
.color-option.selected {
border-color: #e8a0bf;
transform: scale(1.1);
box-shadow: 0 5px 15px rgba(200, 160, 190, 0.3);
}
.color-option.red { background: #e74c3c; }
.color-option.pink { background: #e91e63; }
.color-option.white { background: #ffffff; }
.color-option.yellow { background: #f1c40f; }
.color-option.purple { background: #9b59b6; }
.color-option.orange { background: #e67e22; }
.total-price {
text-align: center;
font-size: 36px;
font-weight: 300;
color: #c7809a;
margin: 20px 0;
}
.total-price span {
font-size: 16px;
color: #999;
}
.add-to-cart {
display: block;
width: 100%;
padding: 15px;
background: linear-gradient(135deg, #e8a0bf, #a78ec4);
color: white;
border: none;
border-radius: 30px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
letter-spacing: 1px;
text-transform: uppercase;
margin-top: 20px;
}
.add-to-cart:hover {
transform: scale(1.02);
box-shadow: 0 10px 30px rgba(200, 160, 190, 0.4);
}
/* Responsive Design */
@media (max-width: 768px) {
.company-name {
font-size: 32px;
}
.flower-sizes {
gap: 20px;
}
.flower-card {
width: 100%;
max-width: 300px;
}
.hero h2 {
font-size: 28px;
}
.modal-content {
padding: 20px;
}
.flower-preview {
width: 150px;
height: 150px;
font-size: 70px;
}
}
</style>
</head>
<body>
<!-- Header -->
<header class="header">
<h1 class="company-name">Dreamy <span>Blooming</span></h1>
<p class="tagline">Luxury Flowers, Elegantly Crafted</p>
</header>
<!-- Hero Section -->
<section class="hero">
<h2>Choose Your Perfect Bouquet</h2>
<p>Select from our three signature sizes, each thoughtfully curated to bring beauty and elegance to any occasion.</p>
<!-- Flower Size Cards -->
<div class="flower-sizes">
<div class="flower-card small" onclick="openCustomization('small', 350)">
<div class="flower-image">🌸</div>
<h3 class="flower-name">Small</h3>
<div class="flower-price">350 <span>DKK</span></div>
<p class="flower-description">A delicate arrangement perfect for intimate moments and thoughtful gestures.</p>
<button class="customize-btn">Customize</button>
</div>
<div class="flower-card medium" onclick="openCustomization('medium', 500)">
<div class="flower-image">💐</div>
<h3 class="flower-name">Medium</h3>
<div class="flower-price">500 <span>DKK</span></div>
<p class="flower-description">A balanced bouquet ideal for celebrations, congratulations, and special occasions.</p>
<button class="customize-btn">Customize</button>
</div>
<div class="flower-card large" onclick="openCustomization('large', 600)">
<div class="flower-image">🌺</div>
<h3 class="flower-name">Large</h3>
<div class="flower-price">600 <span>DKK</span></div>
<p class="flower-description">A stunning statement piece designed to impress and create unforgettable moments.</p>
<button class="customize-btn">Customize</button>
</div>
</div>
</section>
<!-- Customization Modal -->
<div class="modal" id="customizationModal">
<div class="modal-content">
<button class="close-modal" onclick="closeCustomization()">✕</button>
<h2>Customize Your Bouquet</h2>
<div class="modal-size-display" id="selectedSizeDisplay"></div>
<!-- 3D Flower Preview -->
<div class="flower-preview" id="flowerPreview">🌸</div>
<!-- Flower Type Selection -->
<div class="customization-section">
<h3>Choose Your Flowers</h3>
<div class="options-grid" id="flowerTypes">
<button class="option-btn selected" data-flower="rose" onclick="selectFlower('rose', '🌹', this)">🌹 Rose</button>
<button class="option-btn" data-flower="tulip" onclick="selectFlower('tulip', '🌷', this)">🌷 Tulip</button>
<button class="option-btn" data-flower="daisy" onclick="selectFlower('daisy', '🌼', this)">🌼 Daisy</button>
<button class="option-btn" data-flower="sunflower" onclick="selectFlower('sunflower', '🌻', this)">🌻 Sunflower</button>
<button class="option-btn" data-flower="peony" onclick="selectFlower('peony', '🌸', this)">🌸 Peony</button>
<button class="option-btn" data-flower="lily" onclick="selectFlower('lily', '🌺', this)">🌺 Lily</button>
<button class="option-btn" data-flower="orchid" onclick="selectFlower('orchid', '💮', this)">💮 Orchid</button>
</div>
</div>
<!-- Color Selection -->
<div class="customization-section">
<h3>Choose Your Colors</h3>
<div class="options-grid" id="flowerColors">
<div class="color-option red selected" data-color="red" onclick="selectColor('red', this)" title="Red"></div>
<div class="color-option pink" data-color="pink" onclick="selectColor('pink', this)" title="Pink"></div>
<div class="color-option white" data-color="white" onclick="selectColor('white', this)" title="White"></div>
<div class="color-option yellow" data-color="yellow" onclick="selectColor('yellow', this)" title="Yellow"></div>
<div class="color-option purple" data-color="purple" onclick="selectColor('purple', this)" title="Purple"></div>
<div class="color-option orange" data-color="orange" onclick="selectColor('orange', this)" title="Orange"></div>
</div>
</div>
<div class="total-price" id="totalPrice">350 <span>DKK</span></div>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
<script>
let currentSize = 'small';
let currentPrice = 350;
let selectedFlower = '🌹';
let selectedColor = 'red';
function openCustomization(size, price) {
currentSize = size;
currentPrice = price;
document.getElementById('customizationModal').classList.add('active');
document.getElementById('selectedSizeDisplay').textContent =
`${size.charAt(0).toUpperCase() + size.slice(1)} Bouquet - ${price} DKK`;
document.getElementById('totalPrice').innerHTML = `${price} <span>DKK</span>`;
document.body.style.overflow = 'hidden';
}
function closeCustomization() {
document.getElementById('customizationModal').classList.remove('active');
document.body.style.overflow = 'auto';
}
function selectFlower(flower, emoji, element) {
selectedFlower = emoji;
document.querySelectorAll('#flowerTypes .option-btn').forEach(btn => {
btn.classList.remove('selected');
});
element.classList.add('selected');
updatePreview();
}
function selectColor(color, element) {
selectedColor = color;
document.querySelectorAll('#flowerColors .color-option').forEach(btn => {
btn.classList.remove('selected');
});
element.classList.add('selected');
updatePreview();
}
function updatePreview() {
const preview = document.getElementById('flowerPreview');
preview.textContent = selectedFlower;
// Apply color hint to preview background
const colorMap = {
red: '#fef0f0',
pink: '#fef0f5',
white: '#f5f5f5',
yellow: '#fefbf0',
purple: '#f5f0fa',
orange: '#fef5f0'
};
preview.style.background = `linear-gradient(135deg, ${colorMap[selectedColor]}, #fce4ec)`;
}
// Close modal when clicking outside
document.getElementById('customizationModal').addEventListener('click', function(e) {
if (e.target === this) {
closeCustomization();
}
});
// Close modal with Escape key
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
closeCustomization();
}
});
</script>
</body>
</html>