Aigerim_Ryskalievna/sozday-sayt-gde-budet-razmes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add flower decorations throughout the page

Browse Source
This commit is contained in:
Aigerim_Ryskalievna 2026-09-16 09:55:34 +00:00
parent 286fdc45de
commit 1f4e2e8ea8
1 changed files with 85 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
index.html
View File

@ -12,11 +12,12 @@
<style> <style>
a.kt-ai-btn { text-decoration: none; } a.kt-ai-btn { text-decoration: none; }
.wedding-hero { .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; padding: var(--kt-ai-space-12) 0;
min-height: 90vh; min-height: 90vh;
display: flex; display: flex;
align-items: center; align-items: center;
position: relative;
} }
.wedding-hero::before { .wedding-hero::before {
content: ''; content: '';
@ -25,12 +26,35 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 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; 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 { body {
background: linear-gradient(180deg, var(--kt-ai-bg-soft) 0%, var(--kt-ai-bg) 50%, var(--kt-ai-bg-soft) 100%); 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 { .couple-photo {
width: 280px; width: 280px;
height: 350px; height: 350px;
@ -87,7 +111,23 @@
</header> </header>
<section class="wedding-hero kt-ai-hero" data-align="center"> <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> <h1>Приглашаем на нашу свадьбу!</h1>
<p class="kt-ai-hero-sub" style="margin-top: var(--kt-ai-space-3)">Али и Зарина</p> <p class="kt-ai-hero-sub" style="margin-top: var(--kt-ai-space-3)">Али и Зарина</p>
<p class="kt-ai-hero-sub">Дорогие друзья и родные! Приглашаем вас разделить с нами этот особенный день</p> <p class="kt-ai-hero-sub">Дорогие друзья и родные! Приглашаем вас разделить с нами этот особенный день</p>
@ -109,15 +149,36 @@
<p>Мы очень ждем этого дня и хотим разделить его с вами</p> <p>Мы очень ждем этого дня и хотим разделить его с вами</p>
</div> </div>
<div class="couple-grid"> <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"> <img src="https://loremflickr.com/400/500/groom,suit" alt="Жених" class="couple-photo">
<h3>Али</h3> <h3>Али</h3>
<p style="color: var(--kt-ai-fg-muted)">Жених</p> <p style="color: var(--kt-ai-fg-muted)">Жених</p>
</div> </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> <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>
<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"> <img src="https://loremflickr.com/400/500/bride,wedding" alt="Невеста" class="couple-photo">
<h3>Зарина</h3> <h3>Зарина</h3>
<p style="color: var(--kt-ai-fg-muted)">Невеста</p> <p style="color: var(--kt-ai-fg-muted)">Невеста</p>
@ -152,8 +213,24 @@
</div> </div>
</section> </section>
<section id="location" class="kt-ai-cta reveal"> <section id="location" class="kt-ai-cta reveal" style="position: relative; overflow: hidden;">
<div class="kt-ai-wrap" data-width="narrow"> <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> <h2>Место проведения</h2>
<p style="font-size: var(--kt-ai-text-xl); margin: var(--kt-ai-space-4) 0;"> <p style="font-size: var(--kt-ai-text-xl); margin: var(--kt-ai-space-4) 0;">
Ресторан «Астана»<br> Ресторан «Астана»<br>