add flower decorations throughout the page
This commit is contained in:
parent
286fdc45de
commit
1f4e2e8ea8
93
index.html
93
index.html
@ -12,11 +12,12 @@
|
||||
<style>
|
||||
a.kt-ai-btn { text-decoration: none; }
|
||||
.wedding-hero {
|
||||
background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,240,245,0.95)), url('https://images.unsplash.com/photo-1519741497674-611481863552?w=1920&q=80') center/cover fixed;
|
||||
background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,240,245,0.9)), url('https://images.unsplash.com/photo-1519225421980-715cb0202128?w=1920&q=80') center/cover fixed;
|
||||
padding: var(--kt-ai-space-12) 0;
|
||||
min-height: 90vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
.wedding-hero::before {
|
||||
content: '';
|
||||
@ -25,12 +26,35 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: radial-gradient(circle at 50% 50%, transparent 0%, rgba(255,255,255,0.3) 100%);
|
||||
background: radial-gradient(circle at 20% 30%, rgba(255,182,193,0.15) 0%, transparent 40%),
|
||||
radial-gradient(circle at 80% 70%, rgba(255,105,180,0.12) 0%, transparent 40%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.flower-decoration {
|
||||
position: absolute;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
opacity: 0.8;
|
||||
pointer-events: none;
|
||||
}
|
||||
.flower-top-left { top: -40px; left: -40px; transform: rotate(-15deg); }
|
||||
.flower-top-right { top: -40px; right: -40px; transform: rotate(15deg); }
|
||||
.flower-bottom-left { bottom: -40px; left: -40px; transform: rotate(15deg); }
|
||||
.flower-bottom-right { bottom: -40px; right: -40px; transform: rotate(-15deg); }
|
||||
body {
|
||||
background: linear-gradient(180deg, var(--kt-ai-bg-soft) 0%, var(--kt-ai-bg) 50%, var(--kt-ai-bg-soft) 100%);
|
||||
}
|
||||
.flower-divider {
|
||||
text-align: center;
|
||||
margin: var(--kt-ai-space-8) 0;
|
||||
font-size: var(--kt-ai-text-3xl);
|
||||
color: var(--kt-ai-primary);
|
||||
}
|
||||
.couple-photo {
|
||||
border: 4px solid rgba(255,182,193,0.3);
|
||||
box-shadow: 0 20px 40px rgba(255,182,193,0.2);
|
||||
}
|
||||
</style>
|
||||
.couple-photo {
|
||||
width: 280px;
|
||||
height: 350px;
|
||||
@ -87,7 +111,23 @@
|
||||
</header>
|
||||
|
||||
<section class="wedding-hero kt-ai-hero" data-align="center">
|
||||
<div class="kt-ai-wrap">
|
||||
<div class="kt-ai-wrap" style="position: relative;">
|
||||
<svg class="flower-decoration flower-top-left" viewBox="0 0 100 100" fill="none">
|
||||
<circle cx="50" cy="50" r="45" fill="rgba(255,182,193,0.3)"/>
|
||||
<circle cx="50" cy="20" r="12" fill="rgba(255,105,180,0.5)"/>
|
||||
<circle cx="80" cy="50" r="12" fill="rgba(255,105,180,0.5)"/>
|
||||
<circle cx="50" cy="80" r="12" fill="rgba(255,105,180,0.5)"/>
|
||||
<circle cx="20" cy="50" r="12" fill="rgba(255,105,180,0.5)"/>
|
||||
<circle cx="50" cy="50" r="15" fill="rgba(255,255,255,0.8)"/>
|
||||
</svg>
|
||||
<svg class="flower-decoration flower-top-right" viewBox="0 0 100 100" fill="none">
|
||||
<circle cx="50" cy="50" r="45" fill="rgba(255,182,193,0.3)"/>
|
||||
<circle cx="50" cy="20" r="12" fill="rgba(255,105,180,0.5)"/>
|
||||
<circle cx="80" cy="50" r="12" fill="rgba(255,105,180,0.5)"/>
|
||||
<circle cx="50" cy="80" r="12" fill="rgba(255,105,180,0.5)"/>
|
||||
<circle cx="20" cy="50" r="12" fill="rgba(255,105,180,0.5)"/>
|
||||
<circle cx="50" cy="50" r="15" fill="rgba(255,255,255,0.8)"/>
|
||||
</svg>
|
||||
<h1>Приглашаем на нашу свадьбу!</h1>
|
||||
<p class="kt-ai-hero-sub" style="margin-top: var(--kt-ai-space-3)">Али и Зарина</p>
|
||||
<p class="kt-ai-hero-sub">Дорогие друзья и родные! Приглашаем вас разделить с нами этот особенный день</p>
|
||||
@ -109,15 +149,36 @@
|
||||
<p>Мы очень ждем этого дня и хотим разделить его с вами</p>
|
||||
</div>
|
||||
<div class="couple-grid">
|
||||
<div class="couple-card reveal">
|
||||
<div class="couple-card reveal" style="position: relative;">
|
||||
<svg class="flower-decoration flower-top-left" style="width: 80px; height: 80px; top: -20px; left: -20px;" viewBox="0 0 100 100" fill="none">
|
||||
<circle cx="50" cy="50" r="40" fill="rgba(255,182,193,0.25)"/>
|
||||
<circle cx="50" cy="15" r="10" fill="rgba(255,105,180,0.4)"/>
|
||||
<circle cx="85" cy="50" r="10" fill="rgba(255,105,180,0.4)"/>
|
||||
<circle cx="50" cy="85" r="10" fill="rgba(255,105,180,0.4)"/>
|
||||
<circle cx="15" cy="50" r="10" fill="rgba(255,105,180,0.4)"/>
|
||||
<circle cx="50" cy="50" r="12" fill="rgba(255,255,255,0.7)"/>
|
||||
</svg>
|
||||
<img src="https://loremflickr.com/400/500/groom,suit" alt="Жених" class="couple-photo">
|
||||
<h3>Али</h3>
|
||||
<p style="color: var(--kt-ai-fg-muted)">Жених</p>
|
||||
</div>
|
||||
<div class="reveal" style="display: flex; align-items: center; justify-content: center;">
|
||||
<div class="reveal" style="display: flex; align-items: center; justify-content: center; flex-direction: column;">
|
||||
<svg class="heart-icon"><use href="#sparkles"></use></svg>
|
||||
<div class="flower-divider">
|
||||
<svg class="kt-icon" style="width: 24px; height: 24px;"><use href="#sparkles"></use></svg>
|
||||
<svg class="kt-icon" style="width: 24px; height: 24px; margin: 0 8px;"><use href="#sparkles"></use></svg>
|
||||
<svg class="kt-icon" style="width: 24px; height: 24px;"><use href="#sparkles"></use></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="couple-card reveal">
|
||||
<div class="couple-card reveal" style="position: relative;">
|
||||
<svg class="flower-decoration flower-top-right" style="width: 80px; height: 80px; top: -20px; right: -20px;" viewBox="0 0 100 100" fill="none">
|
||||
<circle cx="50" cy="50" r="40" fill="rgba(255,182,193,0.25)"/>
|
||||
<circle cx="50" cy="15" r="10" fill="rgba(255,105,180,0.4)"/>
|
||||
<circle cx="85" cy="50" r="10" fill="rgba(255,105,180,0.4)"/>
|
||||
<circle cx="50" cy="85" r="10" fill="rgba(255,105,180,0.4)"/>
|
||||
<circle cx="15" cy="50" r="10" fill="rgba(255,105,180,0.4)"/>
|
||||
<circle cx="50" cy="50" r="12" fill="rgba(255,255,255,0.7)"/>
|
||||
</svg>
|
||||
<img src="https://loremflickr.com/400/500/bride,wedding" alt="Невеста" class="couple-photo">
|
||||
<h3>Зарина</h3>
|
||||
<p style="color: var(--kt-ai-fg-muted)">Невеста</p>
|
||||
@ -152,8 +213,24 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="location" class="kt-ai-cta reveal">
|
||||
<div class="kt-ai-wrap" data-width="narrow">
|
||||
<section id="location" class="kt-ai-cta reveal" style="position: relative; overflow: hidden;">
|
||||
<svg class="flower-decoration flower-bottom-left" style="width: 100px; height: 100px; bottom: 20px; left: 20px;" viewBox="0 0 100 100" fill="none">
|
||||
<circle cx="50" cy="50" r="45" fill="rgba(255,182,193,0.2)"/>
|
||||
<circle cx="50" cy="15" r="11" fill="rgba(255,105,180,0.35)"/>
|
||||
<circle cx="85" cy="50" r="11" fill="rgba(255,105,180,0.35)"/>
|
||||
<circle cx="50" cy="85" r="11" fill="rgba(255,105,180,0.35)"/>
|
||||
<circle cx="15" cy="50" r="11" fill="rgba(255,105,180,0.35)"/>
|
||||
<circle cx="50" cy="50" r="14" fill="rgba(255,255,255,0.6)"/>
|
||||
</svg>
|
||||
<svg class="flower-decoration flower-bottom-right" style="width: 100px; height: 100px; bottom: 20px; right: 20px;" viewBox="0 0 100 100" fill="none">
|
||||
<circle cx="50" cy="50" r="45" fill="rgba(255,182,193,0.2)"/>
|
||||
<circle cx="50" cy="15" r="11" fill="rgba(255,105,180,0.35)"/>
|
||||
<circle cx="85" cy="50" r="11" fill="rgba(255,105,180,0.35)"/>
|
||||
<circle cx="50" cy="85" r="11" fill="rgba(255,105,180,0.35)"/>
|
||||
<circle cx="15" cy="50" r="11" fill="rgba(255,105,180,0.35)"/>
|
||||
<circle cx="50" cy="50" r="14" fill="rgba(255,255,255,0.6)"/>
|
||||
</svg>
|
||||
<div class="kt-ai-wrap" data-width="narrow" style="position: relative; z-index: 1;">
|
||||
<h2>Место проведения</h2>
|
||||
<p style="font-size: var(--kt-ai-text-xl); margin: var(--kt-ai-space-4) 0;">
|
||||
Ресторан «Астана»<br>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user