začeni commit
This commit is contained in:
Mark Poljanšek
parent
d3b22ab196
commit
d5c6b5c56e
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
|
|
@ -0,0 +1,336 @@
|
|||
/* ==========================================================================
|
||||
STYLE.CSS - Spletna stran za Brezplačno snemanje porok
|
||||
========================================================================== */
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* 0. UVOZ PISAV, SPREMENLJIVKE IN GLOBALNI RESET
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
/* Uvoz pisav iz Google Fonts */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Lato:wght@400;700&display=swap');
|
||||
|
||||
:root {
|
||||
/* -- Barvna paleta -- */
|
||||
--color-background: #FDFCFB; /* Topla, skoraj bela barva za ozadje */
|
||||
--color-text: #333333; /* Temno siva za glavno besedilo */
|
||||
--color-headings: #2c2c2c; /* Še temnejša za naslove */
|
||||
--color-accent: #c5a47e; /* Elegantna zlato-peščena barva za poudarke */
|
||||
--color-accent-hover: #b3916b; /* Temnejša različica za hover efekte */
|
||||
--color-border: #e0e0e0; /* Svetlo siva za subtilne robove */
|
||||
--color-success: #2ecc71; /* Zelena za sporočila o uspehu */
|
||||
--color-error: #e74c3c; /* Rdeča za sporočila o napakah */
|
||||
|
||||
/* -- Tipografija -- */
|
||||
--font-primary: 'Lato', sans-serif;
|
||||
--font-headings: 'Playfair Display', serif;
|
||||
|
||||
/* -- Razmiki in dimenzije -- */
|
||||
--spacing-xs: 0.5rem; /* 8px */
|
||||
--spacing-sm: 1rem; /* 16px */
|
||||
--spacing-md: 2rem; /* 32px */
|
||||
--spacing-lg: 4rem; /* 64px */
|
||||
--spacing-xl: 6rem; /* 96px */
|
||||
|
||||
--border-radius: 5px;
|
||||
--max-width: 1140px;
|
||||
--transition-speed: 0.3s;
|
||||
}
|
||||
|
||||
/* Osnovni reset za dosleden izgled v vseh brskalnikih */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-primary);
|
||||
line-height: 1.7;
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-background);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* 1. OSNOVNI ELEMENTI IN TIPOGRAFIJA
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: var(--font-headings);
|
||||
color: var(--color-headings);
|
||||
line-height: 1.2;
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
/* Uporaba clamp() za fluidno velikost pisave med različnimi širinami zaslona */
|
||||
h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
|
||||
h2 { font-size: clamp(2rem, 4vw, 3rem); }
|
||||
h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
|
||||
|
||||
p {
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-accent);
|
||||
text-decoration: none;
|
||||
transition: color var(--transition-speed) ease;
|
||||
}
|
||||
|
||||
a:hover, a:focus {
|
||||
color: var(--color-accent-hover);
|
||||
}
|
||||
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* 2. POSTAVITEV IN POMOŽNI RAZREDI
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
width: 90%;
|
||||
max-width: var(--max-width);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: var(--spacing-lg) 0;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Stil za gumbe */
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 0.9rem 2rem;
|
||||
font-family: var(--font-primary);
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: #fff;
|
||||
background-color: var(--color-accent);
|
||||
border: none;
|
||||
border-radius: var(--border-radius);
|
||||
cursor: pointer;
|
||||
transition: background-color var(--transition-speed) ease, transform var(--transition-speed) ease;
|
||||
}
|
||||
|
||||
.btn:hover, .btn:focus {
|
||||
background-color: var(--color-accent-hover);
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* 3. STILI POSAMEZNIH SEKCIJ
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
/* -- Hero sekcija -- */
|
||||
#hero-section {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
overflow: hidden; /* Skrije dele ozadja, ki se premaknejo ven */
|
||||
}
|
||||
|
||||
/* Ozadje za parallax efekt */
|
||||
.hero-background {
|
||||
position: absolute;
|
||||
top: -30px; left: -30px; right: -30px; bottom: -30px; /* Večje od vidnega polja */
|
||||
background: url('https://images.unsplash.com/photo-1523438885262-e6252c869911?auto=format&fit=crop&w=1920&q=80') no-repeat center center/cover;
|
||||
z-index: -2;
|
||||
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Gladki prehodi za JS animacijo */
|
||||
}
|
||||
|
||||
/* Temen overlay za boljšo berljivost besedila */
|
||||
#hero-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.hero-content .subtitle {
|
||||
font-size: clamp(1rem, 2.5vw, 1.25rem);
|
||||
margin-bottom: var(--spacing-md);
|
||||
font-weight: 400;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* -- Sekcija O nas / Opis storitve -- */
|
||||
#about-section {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* -- Sekcija s koraki / procesom -- */
|
||||
.process-grid {
|
||||
display: grid;
|
||||
gap: var(--spacing-md);
|
||||
margin-top: var(--spacing-md);
|
||||
}
|
||||
|
||||
.process-step {
|
||||
border: 1px solid var(--color-border);
|
||||
padding: var(--spacing-md);
|
||||
border-radius: var(--border-radius);
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.process-step .step-number {
|
||||
font-size: 2.5rem;
|
||||
font-family: var(--font-headings);
|
||||
color: var(--color-accent);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
/* -- Kontaktni obrazec -- */
|
||||
#form-section {
|
||||
background-color: var(--color-background);
|
||||
}
|
||||
|
||||
#contact-form {
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="date"],
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 0.9rem;
|
||||
font-family: var(--font-primary);
|
||||
font-size: 1rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--border-radius);
|
||||
background-color: #fff;
|
||||
transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
|
||||
}
|
||||
|
||||
input[type="text"]:focus,
|
||||
input[type="email"]:focus,
|
||||
input[type="date"]:focus,
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-accent);
|
||||
box-shadow: 0 0 0 3px rgba(197, 164, 126, 0.2);
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 150px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-bottom: var(--spacing-xs);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* -- Footer -- */
|
||||
.site-footer {
|
||||
padding: var(--spacing-md) 0;
|
||||
border-top: 1px solid var(--color-border);
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* 4. ANIMACIJE IN STANJA OBRAZCA
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
/* Začetno stanje za elemente, ki se animirajo ob drsanju */
|
||||
.animate-on-scroll {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: opacity 0.8s cubic-bezier(0.645, 0.045, 0.355, 1),
|
||||
transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
|
||||
/* Končno (vidno) stanje */
|
||||
.animate-on-scroll.is-visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Stili za validacijo obrazca */
|
||||
.is-invalid {
|
||||
border-color: var(--color-error);
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: var(--color-error);
|
||||
font-size: 0.875em;
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
#form-response {
|
||||
display: none; /* Skrito po privzetem */
|
||||
padding: var(--spacing-sm);
|
||||
border-radius: var(--border-radius);
|
||||
margin-top: var(--spacing-sm);
|
||||
}
|
||||
|
||||
#form-response.success {
|
||||
background-color: #eaf7ed;
|
||||
color: #2b753c;
|
||||
border: 1px solid var(--color-success);
|
||||
}
|
||||
|
||||
#form-response.error {
|
||||
background-color: #fbe9e7;
|
||||
color: var(--color-error);
|
||||
border: 1px solid var(--color-error);
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* 5. MEDIA QUERIES (ODZIVNOST)
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
/* -- Tablice in večje naprave (768px in več) -- */
|
||||
@media (min-width: 768px) {
|
||||
.section {
|
||||
padding: var(--spacing-xl) 0;
|
||||
}
|
||||
|
||||
.process-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
#contact-form {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
/* Specifična polja raztegnemo čez obe koloni */
|
||||
.form-group.full-width {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,255 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="sl-SI">
|
||||
<head>
|
||||
<!-- ==========================================================================
|
||||
1. OSNOVNI META PODATKI IN NASTAVITVE
|
||||
========================================================================== -->
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Brezplačno Snemanje Poroke | Profesionalni Poročni Video Slovenija</title>
|
||||
|
||||
<!-- ==========================================================================
|
||||
2. SEO META PODATKI (KLJUČNI ZA GOOGLE)
|
||||
========================================================================== -->
|
||||
<meta name="description" content="Iščeta profesionalni poročni video? Ponujava brezplačno snemanje poroke po vsej Sloveniji v zameno za reference. Omejena ponudba – prijavita se zdaj!">
|
||||
<meta name="keywords" content="brezplačno snemanje poroke, poročni video, snemanje poroke, poročna videografija, poročni snemalec, video poroka, Slovenija, Ljubljana, Maribor, Gorenjska, Štajerska, Primorska">
|
||||
<meta name="author" content="Najina Poroka"> <!-- Spremenite v vaše ime/ime podjetja -->
|
||||
<link rel="canonical" href="https://www.najina-poroka.si/"> <!-- POSODOBLJENO z vašo domeno -->
|
||||
<meta name="robots" content="index, follow">
|
||||
|
||||
<!-- ==========================================================================
|
||||
3. OPEN GRAPH PODATKI (ZA FACEBOOK, INSTAGRAM, LINKEDIN)
|
||||
========================================================================== -->
|
||||
<meta property="og:title" content="Brezplačno Snemanje Poroke | Profesionalni Poročni Video">
|
||||
<meta property="og:description" content="Ujemita vajin dan v čudovit poročni video - popolnoma brezplačno! Omejena ponudba za pare po vsej Sloveniji.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://www.najina-poroka.si/"> <!-- POSODOBLJENO z vašo domeno -->
|
||||
<meta property="og:image" content="https://www.najina-poroka.si/assets/og-image.jpg"> <!-- Pripravite sliko velikosti 1200x630px -->
|
||||
<meta property="og:site_name" content="Najina Poroka - Poročni Video">
|
||||
<meta property="og:locale" content="sl_SI">
|
||||
|
||||
<!-- ==========================================================================
|
||||
4. TWITTER CARD PODATKI (ZA TWITTER)
|
||||
========================================================================== -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="Brezplačno Snemanje Poroke | Profesionalni Poročni Video">
|
||||
<meta name="twitter:description" content="Ujemita vajin dan v čudovit poročni video - popolnoma brezplačno! Omejena ponudba za pare po vsej Sloveniji.">
|
||||
<meta name="twitter:image" content="https://www.najina-poroka.si/assets/twitter-image.jpg"> <!-- Pripravite sliko velikosti 1200x600px -->
|
||||
|
||||
<!-- ==========================================================================
|
||||
5. FAVICONS IN IKONE APLIKACIJ
|
||||
========================================================================== -->
|
||||
<link rel="icon" href="/favicon.ico" sizes="any">
|
||||
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
||||
<meta name="theme-color" content="#c5a47e">
|
||||
|
||||
<!-- ==========================================================================
|
||||
6. OPTIMIZACIJA NALAGANJA (PRELOAD)
|
||||
========================================================================== -->
|
||||
<link rel="preload" href="/css/style.css" as="style">
|
||||
<link rel="preload" href="/js/main.js" as="script">
|
||||
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Lato:wght@400;700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
|
||||
<link rel="preload" href="/assets/hero-background.png" as="image"> <!-- POSODOBLJENO ime slike -->
|
||||
|
||||
<!-- ==========================================================================
|
||||
7. POVEZAVA DO CSS DATOTEKE
|
||||
========================================================================== -->
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
|
||||
<!-- ==========================================================================
|
||||
8. STRUKTURIRANI PODATKI (JSON-LD SCHEMA) - IZJEMNO POMEMBNO ZA SEO
|
||||
========================================================================== -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "ProfessionalService",
|
||||
"name": "Profesionalna Poročna Videografija Slovenija",
|
||||
"image": "https://www.najina-poroka.si/assets/og-image.jpg",
|
||||
"description": "Nudimo profesionalno storitev snemanja porok in izdelave poročnih videov po celotni Sloveniji. Iščemo pare za brezplačno snemanje v zameno za reference.",
|
||||
"telephone": "+38600000000",
|
||||
"serviceType": "Poročna videografija",
|
||||
"areaServed": [
|
||||
{ "@type": "State", "name": "Slovenija" },
|
||||
{ "@type": "AdministrativeArea", "name": "Gorenjska" },
|
||||
{ "@type": "AdministrativeArea", "name": "Dolenjska" },
|
||||
{ "@type": "AdministrativeArea", "name": "Štajerska" },
|
||||
{ "@type": "AdministrativeArea", "name": "Primorska" },
|
||||
{ "@type": "AdministrativeArea", "name": "Prekmurje" },
|
||||
{ "@type": "AdministrativeArea", "name": "Koroška" },
|
||||
{ "@type": "AdministrativeArea", "name": "Notranjska" },
|
||||
{ "@type": "City", "name": "Ljubljana" },
|
||||
{ "@type": "City", "name": "Maribor" },
|
||||
{ "@type": "City", "name": "Kranj" },
|
||||
{ "@type": "City", "name": "Celje" },
|
||||
{ "@type": "City", "name": "Koper" }
|
||||
],
|
||||
"offers": {
|
||||
"@type": "Offer",
|
||||
"itemOffered": {
|
||||
"@type": "Service",
|
||||
"name": "Brezplačno snemanje poroke"
|
||||
},
|
||||
"description": "Popolnoma brezplačno snemanje poroke in izdelava poročnega videa v zameno za dovoljenje za uporabo posnetkov za referenčni material. Ponudba je omejena.",
|
||||
"price": "0",
|
||||
"priceCurrency": "EUR",
|
||||
"availabilityStarts": "2024-01-01T00:00:00Z"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ==========================================================================
|
||||
GLAVNA HERO SEKCIJA
|
||||
========================================================================== -->
|
||||
<header id="hero-section">
|
||||
<div class="hero-background" style="background-image: url('/assets/hero-background.png');" aria-hidden="true"></div> <!-- POSODOBLJENO z vašim imenom slike! -->
|
||||
<div class="hero-content container">
|
||||
<h1 class="animate-on-scroll">Brezplačno Snemanje Poroke: Ujemita Vajin Dan v Profesionalni Poročni Video</h1>
|
||||
<p class="subtitle animate-on-scroll">Iščeva zaročene pare po vsej Sloveniji, ki si želijo čustven in kinematografski poročni video – popolnoma brezplačno v zameno za uporabo posnetkov za najin portfelj. Število terminov je omejeno!</p>
|
||||
<a href="#form-section" class="btn animate-on-scroll" aria-label="Prijavita se za brezplačno snemanje poroke">Prijavi se zdaj</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<!-- ==========================================================================
|
||||
SEKCIJA: ZAKAJ TO DELAVA? (GRADNJA ZAUPANJA)
|
||||
========================================================================== -->
|
||||
<section id="about-section" class="section">
|
||||
<div class="container text-center">
|
||||
<h2 class="animate-on-scroll">Zakaj Ponujava Brezplačno Poročno Videografijo?</h2>
|
||||
<p class="animate-on-scroll" style="max-width: 800px; margin: 0 auto;">Sva strastna videografa na začetku svoje skupne poti v svetu poročne videografije. Verjameva, da ima vsaka ljubezenska zgodba moč, da navdihne. Zato iščeva pare, kot sta vidva, da nama pomagata zgraditi portfelj osupljivih poročnih zgodb. V zameno za vajino zaupanje prejmeta profesionalni poročni video, ustvarjen z najnovejšo opremo in polno mero kreativne energije, brez kakršnihkoli stroškov.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ==========================================================================
|
||||
SEKCIJA: KAJ PREJMETA?
|
||||
========================================================================== -->
|
||||
<section id="what-you-get-section" class="section" style="background-color: #fff;">
|
||||
<div class="container text-center">
|
||||
<h2 class="animate-on-scroll">Kaj Vključuje Brezplačni Poročni Video Paket?</h2>
|
||||
<p class="animate-on-scroll">Najina ponudba je transparentna. Prejmeta vse, kar potrebujeta za večen spomin.</p>
|
||||
<ul style="list-style: none; margin-top: 2rem; text-align: left; max-width: 600px; margin-left: auto; margin-right: auto;">
|
||||
<li class="animate-on-scroll" style="margin-bottom: 1rem;">✅ <strong>Profesionalni poročni video:</strong> 3-5 minutni, čustveno zmontiran film vajinega dne.</li>
|
||||
<li class="animate-on-scroll" style="margin-bottom: 1rem;">✅ <strong>Snemanje z več kamerami:</strong> Za dinamične in raznolike posnetke.</li>
|
||||
<li class="animate-on-scroll" style="margin-bottom: 1rem;">✅ <strong>Uporaba drona:</strong> Za dih jemajoče posnetke lokacije iz zraka (kjer je to mogoče in dovoljeno).</li>
|
||||
<li class="animate-on-scroll" style="margin-bottom: 1rem;">✅ <strong>Kakovosten zvok:</strong> Snemanje govora in zaobljub z diskretnimi mikrofoni.</li>
|
||||
<li class="animate-on-scroll">✅ <strong>Digitalna dostava:</strong> Končni video v visoki ločljivosti (4K) preko spletne galerije.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ==========================================================================
|
||||
SEKCIJA: PROCES
|
||||
========================================================================== -->
|
||||
<section id="process-section" class="section">
|
||||
<div class="container text-center">
|
||||
<h2 class="animate-on-scroll">Najin Proces Snemanja Poroke v 3 Korakih</h2>
|
||||
<div class="process-grid">
|
||||
<div class="process-step animate-on-scroll">
|
||||
<div class="step-number">01</div>
|
||||
<h3>Prijava</h3>
|
||||
<p>Izpolnita obrazec na dnu strani z osnovnimi informacijami o vajini poroki. Bolj kot sta podrobna, lažje si vaju predstavljava.</p>
|
||||
</div>
|
||||
<div class="process-step animate-on-scroll">
|
||||
<div class="step-number">02</div>
|
||||
<h3>Spoznavni klic</h3>
|
||||
<p>Če se vajina vizija ujema z najino, se dogovorimo za kratek spletni klic, kjer se spoznamo in pogovorimo o podrobnostih vajinega dne.</p>
|
||||
</div>
|
||||
<div class="process-step animate-on-scroll">
|
||||
<div class="step-number">03</div>
|
||||
<h3>Snemanje</h3>
|
||||
<p>Na poročni dan sva z vama, diskretna in osredotočena na lovljenje pristnih trenutkov. Po poroki se lotiva montaže in vama dostaviva končni video.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ==========================================================================
|
||||
SEKCIJA: KONTAKTNI OBRAZEC
|
||||
========================================================================== -->
|
||||
<section id="form-section" class="section" style="background-color: #fff;">
|
||||
<div class="container text-center">
|
||||
<h2 class="animate-on-scroll">Zagotovita si Svoj Termin za Brezplačno Snemanje Poroke!</h2>
|
||||
<p class="animate-on-scroll">Mesta se hitro polnijo. Ne odlašajta in izpolnita prijavo še danes. Veseliva se vajine zgodbe!</p>
|
||||
|
||||
<form id="contact-form" name="contact" method="POST" data-netlify="true" netlify-honeypot="bot-field" class="animate-on-scroll" style="margin-top: 2rem;">
|
||||
<input type="hidden" name="form-name" value="contact">
|
||||
<p class="hidden" style="display:none;">
|
||||
<label>Don’t fill this out if you’re human: <input name="bot-field"></label>
|
||||
</p>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="name">Ime in priimek</label>
|
||||
<input type="text" id="name" name="name" placeholder="Npr. Ana in Rok Novak" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email">Email naslov</label>
|
||||
<input type="email" id="email" name="email" placeholder="vas.email@primer.com" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="date">Datum poroke</label>
|
||||
<input type="date" id="date" name="date" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="location">Lokacija poroke (kraj/regija)</label>
|
||||
<input type="text" id="location" name="location" placeholder="Npr. Bled, Gorenjska" required>
|
||||
</div>
|
||||
<div class="form-group full-width">
|
||||
<label for="message">Povejta nama kaj več o sebi in vajinem dnevu</label>
|
||||
<textarea id="message" name="message" placeholder="Kakšen bo stil vajine poroke? Kaj vama je pri poročnem videu najbolj pomembno?"></textarea>
|
||||
</div>
|
||||
<div class="form-group full-width" style="text-align: center;">
|
||||
<button type="submit" class="btn">Pošlji prijavo</button>
|
||||
</div>
|
||||
</form>
|
||||
<div id="form-response"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ==========================================================================
|
||||
SEKCIJA: POGOSTA VPRAŠANJA (FAQ) - ODLIČNO ZA SEO
|
||||
========================================================================== -->
|
||||
<section id="faq-section" class="section">
|
||||
<div class="container">
|
||||
<h2 class="text-center animate-on-scroll">Pogosta Vprašanja</h2>
|
||||
<div class="faq-item animate-on-scroll">
|
||||
<h3>Ali so res kakšni skriti stroški?</h3>
|
||||
<p>Ne. Ponudba je 100% brezplačna in ne vključuje nobenih skritih stroškov. Edini pogoj je podpis pogodbe, ki nama dovoljuje uporabo posnetkov za promocijske namene. Potni stroški znotraj Slovenije so vključeni.</p>
|
||||
</div>
|
||||
<div class="faq-item animate-on-scroll">
|
||||
<h3>Katere lokacije v Sloveniji pokrivata?</h3>
|
||||
<p>Pokrivava celotno Slovenijo! Iščeva pare iz vseh regij, od Gorenjske in Primorske do Štajerske in Prekmurja. Ne glede na to, ali je vaša lokacija Ljubljana, Maribor ali skriti kotiček narave, naju zanima.</p>
|
||||
</div>
|
||||
<div class="faq-item animate-on-scroll">
|
||||
<h3>Kako poteka izbor parov?</h3>
|
||||
<p>Ker je število terminov omejeno, bomo izbrali pare, katerih poročni dan in vizija se najbolj ujemata z najinim stilom snemanja. Iščemo unikatne zgodbe, zanimive lokacije in predvsem pristno energijo.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- ==========================================================================
|
||||
FOOTER
|
||||
========================================================================== -->
|
||||
<footer class="site-footer">
|
||||
<div class="container text-center">
|
||||
<p>© <span id="current-year"></span> Najina Poroka. Vse pravice pridržane.</p> <!-- Posodobite z vašim imenom -->
|
||||
<p>Profesionalna poročna videografija po Sloveniji.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- ==========================================================================
|
||||
POVEZAVA DO JAVASCRIPT DATOTEKE
|
||||
========================================================================== -->
|
||||
<script src="/js/main.js"></script>
|
||||
|
||||
<!-- Majhen skript za dinamično leto v footerju -->
|
||||
<script>
|
||||
document.getElementById('current-year').textContent = new Date().getFullYear();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,218 @@
|
|||
/**
|
||||
* main.js
|
||||
* Glavna JavaScript datoteka za spletno stran "Brezplačno snemanje poroke".
|
||||
*
|
||||
* Funkcionalnosti:
|
||||
* 1. Inicializacija vseh skript po nalaganju DOM-a.
|
||||
* 2. Upravljanje animacij elementov ob drsanju strani (Intersection Observer).
|
||||
* 3. Implementacija gladkega drsanja za interne povezave.
|
||||
* 4. Interaktivni parallax efekt v "hero" sekciji, ki se odziva na premik miške.
|
||||
* 5. Napredna validacija in pošiljanje kontaktnega obrazca preko Fetch API.
|
||||
*/
|
||||
|
||||
// Počakamo, da se celoten HTML dokument naloži, preden zaženemo skripte.
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
// Inicializacija vseh glavnih funkcij
|
||||
initScrollAnimations();
|
||||
initSmoothScrolling();
|
||||
initHeroParallaxEffect();
|
||||
initContactFormHandler();
|
||||
|
||||
console.log("Stran je pripravljena in vsi interaktivni elementi so aktivirani.");
|
||||
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* Funkcija za inicializacijo animacij ob drsanju (Fade-in efekt).
|
||||
* Uporablja Intersection Observer API za optimalno delovanje.
|
||||
* Elementi z razredom .animate-on-scroll bodo postali vidni, ko vstopijo v vidno polje.
|
||||
*/
|
||||
function initScrollAnimations() {
|
||||
const animatedElements = document.querySelectorAll('.animate-on-scroll');
|
||||
|
||||
if (!animatedElements.length) return;
|
||||
|
||||
const observerOptions = {
|
||||
root: null, // opazujemo glede na vidno polje brskalnika
|
||||
rootMargin: '0px',
|
||||
threshold: 0.1 // sproži se, ko je vsaj 10% elementa vidnega
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries, observer) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('is-visible');
|
||||
observer.unobserve(entry.target); // prenehamo opazovati, da se animacija zgodi samo enkrat
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
animatedElements.forEach(element => {
|
||||
observer.observe(element);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Funkcija za implementacijo gladkega drsanja do sidrnih točk.
|
||||
* Vsi linki, ki se začnejo z '#', bodo sprožili gladko drsenje namesto skoka.
|
||||
*/
|
||||
function initSmoothScrolling() {
|
||||
const internalLinks = document.querySelectorAll('a[href^="#"]');
|
||||
|
||||
internalLinks.forEach(link => {
|
||||
link.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
const targetId = this.getAttribute('href');
|
||||
const targetElement = document.querySelector(targetId);
|
||||
|
||||
if (targetElement) {
|
||||
targetElement.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Funkcija za parallax efekt v "hero" sekciji, ki se odziva na premik miške.
|
||||
* Predpostavlja obstoj elementa z ID-jem #hero-section in elementa v njem z razredom .hero-background.
|
||||
*/
|
||||
function initHeroParallaxEffect() {
|
||||
const heroSection = document.querySelector('#hero-section');
|
||||
const heroBackground = document.querySelector('.hero-background');
|
||||
|
||||
if (!heroSection || !heroBackground) return;
|
||||
|
||||
const parallaxStrength = 15; // Manjša vrednost = bolj subtilen efekt
|
||||
|
||||
heroSection.addEventListener('mousemove', (e) => {
|
||||
const { clientWidth, clientHeight } = heroSection;
|
||||
const x = (e.clientX / clientWidth) - 0.5;
|
||||
const y = (e.clientY / clientHeight) - 0.5;
|
||||
|
||||
// Uporabimo transform za premik, kar je bolj učinkovito za animacije
|
||||
heroBackground.style.transform = `
|
||||
translateX(${-x * parallaxStrength}px)
|
||||
translateY(${-y * parallaxStrength}px)
|
||||
scale(1.05)`; // Rahlo povečamo ozadje, da robovi niso vidni
|
||||
});
|
||||
|
||||
heroSection.addEventListener('mouseleave', () => {
|
||||
// Obnovimo pozicijo, ko miška zapusti območje
|
||||
heroBackground.style.transform = 'translate(0, 0) scale(1.05)';
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Funkcija za upravljanje kontaktnega obrazca.
|
||||
* Vključuje validacijo na strani odjemalca in pošiljanje podatkov preko Fetch API.
|
||||
* Predpostavlja, da ima obrazec ID #contact-form in da ga upravlja Netlify.
|
||||
*/
|
||||
function initContactFormHandler() {
|
||||
const form = document.querySelector('#contact-form');
|
||||
if (!form) return;
|
||||
|
||||
const submitButton = form.querySelector('button[type="submit"]');
|
||||
const formResponseEl = document.querySelector('#form-response'); // Element za prikaz sporočil
|
||||
|
||||
form.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// 1. Validacija polj
|
||||
if (!validateForm(form)) {
|
||||
return; // Ustavi pošiljanje, če validacija ne uspe
|
||||
}
|
||||
|
||||
// 2. Priprava podatkov za pošiljanje
|
||||
const formData = new FormData(form);
|
||||
const originalButtonText = submitButton.textContent;
|
||||
submitButton.disabled = true;
|
||||
submitButton.textContent = 'Pošiljanje...';
|
||||
|
||||
// 3. Pošiljanje preko Fetch API (prilagojeno za Netlify Forms)
|
||||
fetch('/', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||||
body: new URLSearchParams(formData).toString()
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
// Uspešno poslano
|
||||
form.style.display = 'none'; // Skrij obrazec
|
||||
formResponseEl.innerHTML = `<h3>Hvala za prijavo!</h3><p>Oglasili se vam bova v najkrajšem možnem času. Preverite svoj e-poštni nabiralnik.</p>`;
|
||||
formResponseEl.classList.add('success');
|
||||
formResponseEl.style.display = 'block';
|
||||
} else {
|
||||
// Napaka pri pošiljanju
|
||||
throw new Error('Prišlo je do napake pri pošiljanju. Poskusite znova.');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
formResponseEl.innerHTML = `<p>Napaka: ${error.message}</p>`;
|
||||
formResponseEl.classList.add('error');
|
||||
formResponseEl.style.display = 'block';
|
||||
})
|
||||
.finally(() => {
|
||||
// Ponastavi gumb samo v primeru napake, saj ob uspehu formo skrijemo
|
||||
if (form.style.display !== 'none') {
|
||||
submitButton.disabled = false;
|
||||
submitButton.textContent = originalButtonText;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Pomožna funkcija za validacijo polj v obrazcu.
|
||||
* @param {HTMLFormElement} form - Obrazec, ki ga validiramo.
|
||||
* @returns {boolean} - Vrne `true`, če so vsa polja veljavna, sicer `false`.
|
||||
*/
|
||||
function validateForm(form) {
|
||||
let isValid = true;
|
||||
const requiredFields = form.querySelectorAll('[required]');
|
||||
|
||||
// Najprej počistimo vse prejšnje napake
|
||||
form.querySelectorAll('.error-message').forEach(el => el.remove());
|
||||
form.querySelectorAll('.is-invalid').forEach(el => el.classList.remove('is-invalid'));
|
||||
|
||||
requiredFields.forEach(field => {
|
||||
let error = null;
|
||||
|
||||
if (field.value.trim() === '') {
|
||||
error = 'To polje je obvezno.';
|
||||
} else if (field.type === 'email' && !isValidEmail(field.value)) {
|
||||
error = 'Prosimo, vnesite veljaven e-poštni naslov.';
|
||||
} else if (field.type === 'date' && new Date(field.value) < new Date()) {
|
||||
error = 'Datum poroke ne more biti v preteklosti.';
|
||||
}
|
||||
|
||||
if (error) {
|
||||
isValid = false;
|
||||
field.classList.add('is-invalid');
|
||||
const errorElement = document.createElement('span');
|
||||
errorElement.className = 'error-message';
|
||||
errorElement.textContent = error;
|
||||
// Vstavi sporočilo o napaki za poljem
|
||||
field.parentNode.insertBefore(errorElement, field.nextSibling);
|
||||
}
|
||||
});
|
||||
|
||||
return isValid;
|
||||
}
|
||||
|
||||
/**
|
||||
* Pomožna funkcija za preverjanje veljavnosti e-poštnega naslova.
|
||||
* @param {string} email - E-poštni naslov za preverjanje.
|
||||
* @returns {boolean}
|
||||
*/
|
||||
function isValidEmail(email) {
|
||||
const regex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
||||
return regex.test(String(email).toLowerCase());
|
||||
}
|
||||
Loading…
Reference in New Issue