You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
722 lines
47 KiB
722 lines
47 KiB
<!DOCTYPE html> |
|
<html lang="de"> |
|
<head> |
|
<meta charset="utf-8" /> |
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> |
|
<meta name="description" content="" /> |
|
<meta name="author" content="Christopher Bross" /> |
|
<title>CKris - Hochzeit</title> |
|
<link rel="icon" type="image/x-icon" href="assets/img/favicon.ico" /> |
|
<!-- Font Awesome icons (free version)--> |
|
<script src="https://use.fontawesome.com/releases/v5.13.0/js/all.js" crossorigin="anonymous"></script> |
|
<!-- Google fonts--> |
|
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet" type="text/css" /> |
|
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" /> |
|
<link href="https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic" rel="stylesheet" type="text/css" /> |
|
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css" /> |
|
<!-- Core theme CSS (includes Bootstrap)--> |
|
<link href="css/styles.css" rel="stylesheet" /> |
|
</head> |
|
|
|
|
|
|
|
<body id="page-top"> |
|
<!-- Navigation--> |
|
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav"> |
|
<div class="container"> |
|
<a class="navbar-brand js-scroll-trigger" href="#page-top"><img src="assets/img/kc.svg" alt="KC" /></a> |
|
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> |
|
Menu |
|
<i class="fas fa-bars ml-1"></i> |
|
</button> |
|
<div class="collapse navbar-collapse" id="navbarResponsive"> |
|
<ul class="navbar-nav text-uppercase ml-auto"> |
|
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#einladung">Einladung</a></li> |
|
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#anmelden">Rückmelden</a></li> |
|
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#ablauf">Ablauf</a></li> |
|
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#kontakt">Kontakt</a></li> |
|
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#portfolio">weitere Infos</a></li> |
|
</ul> |
|
</div> |
|
</div> |
|
</nav> |
|
|
|
<!-- Masthead--> |
|
<header class="masthead"> |
|
<div class="container"> |
|
<div class="masthead-subheading">Wir sagen Ja!</div> |
|
<div class="masthead-heading text-uppercase my-5">Krisi & Chris</div> |
|
<!-- <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#anmelden">... und wir sind dabei!</a> --> |
|
</div> |
|
</header> |
|
|
|
<!-- Einladung --> |
|
<section class="page-section bg-wood" id="einladung"> |
|
<div class="container"> |
|
<div class="text-center"> |
|
<h2 class="section-heading ">CKris laden Euch ein</h2> |
|
<!-- <h3 class="section-subheading text-muted">Wir würden geren unsere Hochzeit zusammen mit euch feiernc!<\b> --> |
|
<h3 class="section-subheading text-muted"> |
|
Wir laden Euch herzlich dazu ein, uns an unserer Hochzeit am 10.10.2020 zu begleiten. |
|
<!-- Daher laden wir euch herzlich am 10.10.2020 ein zur ... --> |
|
</h3> |
|
</div> |
|
<div class="row text-center"> |
|
<div class="col-md-4"> |
|
<span class="fa-stack fa-4x"> |
|
<i class="fas fa-circle fa-stack-2x text-primary"></i> |
|
<i class="fas fa-church fa-stack-1x fa-inverse"></i> |
|
</span> |
|
<h4 class="my-3">... zur kirchlichen Trauung</h4> |
|
<p class="text-muted">in der St. Jakobuskirche in Kirchrüsselbach.</p> |
|
</div> |
|
<div class="col-md-4"> |
|
<span class="fa-stack fa-4x"> |
|
<i class="fas fa-circle fa-stack-2x text-primary"></i> |
|
<i class="fas fa-glass-cheers fa-stack-1x fa-inverse"></i> |
|
</span> |
|
<h4 class="my-3">... um mit uns anzustoßen</h4> |
|
<p class="text-muted">auf unseren Start ins Eheglück</p> |
|
</div> |
|
<div class="col-md-4"> |
|
<span class="fa-stack fa-4x"> |
|
<i class="fas fa-circle fa-stack-2x text-primary"></i> |
|
<i class="fas fa-utensils fa-stack-1x fa-inverse"></i> |
|
</span> |
|
<h4 class="my-3">... mit uns zu feiern</h4> |
|
<p class="text-muted">in der Gastwirtschaft zum Roten Ochsen in Kalchreuth.</p> |
|
</div> |
|
</div> |
|
<div class="text-center my-5"> |
|
<a class="btn btn-primary btn-xl js-scroll-trigger" href="#anmelden">wir sind dabei!</a> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
<!-- Anmelde Formular--> |
|
<section class="page-section bg-dark" id="anmelden"> |
|
<div class="container"> |
|
<div class="text-center"> |
|
<h2 class="section-heading text-white">Rückmeldung</h2> |
|
<h3 class="section-subheading text-white"> |
|
Bitte gebt uns Bescheid, ob Ihr kommen könnt oder verhindert seid.<br/> |
|
Außerdem helft Ihr uns bei der Planung, wenn Ihr uns noch ein paar Zusatzinformationen gebt. |
|
</h3> |
|
</div> |
|
<form id="form_anmelden" method="post" action="/response"> |
|
|
|
<!-- NAME --> |
|
<fieldset class="form-group"> |
|
<div class="form-row align-items-stretch mb-2"> |
|
<legend class="col-sm-3 col-form-label pt-0 text-white"><h5 class="subheading">Name<span class="text-primary" >*</span></h5></legend> |
|
<!-- VORNAME --> |
|
<div class="col-md-4"> |
|
<input class="form-control" id="firstname" type="text" placeholder="Vorname" required="required" name="firstname" data-validation-required-message="Bitte gebe deinen Vornamen ein, damit wir dich eindeutig zuortnen können." /> |
|
</div> |
|
<div class="col-md-4"> |
|
<input class="form-control" id="name" type="text" placeholder="Familienname" required="required" name="name" data-validation-required-message="Bitte gebe deinen Namen ein, damit wir dich zuortnen können." /> |
|
</div> |
|
<p class="help-block text-danger"></p> |
|
</div> |
|
</fieldset> |
|
|
|
<!-- Bestätigung --> |
|
<fieldset class="form-group"> |
|
<div class="form-row align-items-stretch mb-2"> |
|
<legend class="col-sm-3 col-form-label text-white"><h5 class="subheading">Rückmeldung<span class="text-primary">*</span></h5></legend> |
|
<div class="col-md-8"> |
|
<div class="form-check custom-control custom-radio"> |
|
<input class="form-check-input custom-control-input" type="radio" name="rueckmeldung" id="reuckmeldungYES" value="yes" checked > |
|
<label class="form-check-label text-white custom-control-label" for="reuckmeldungYES">Ich/Wir freuen uns mit Euch zu feiern.</label> |
|
</div> |
|
<div class="form-check custom-control custom-radio"> |
|
<input class="form-check-input custom-control-input" type="radio" name="rueckmeldung" id="reuckmeldungNO" value="no"> |
|
<label class="form-check-label text-white custom-control-label" for="reuckmeldungNO">Ich/Wir stoßen aus der Ferne mit Euch an.</label> |
|
</div> |
|
<div class="form-check custom-control custom-radio"> |
|
<input class="form-check-input custom-control-input" type="radio" name="rueckmeldung" id="reuckmeldungMaybe" value="maybe"> |
|
<label class="form-check-label text-white custom-control-label" for="reuckmeldungMaybe">Aufgrud der unklaren Coronalage (z.B. Einreisebestimmungen) kann ich/ können wir leider noch nicht fest zusagen.</label> |
|
</div> |
|
</div> |
|
</div> |
|
</fieldset> |
|
|
|
<!-- Anzahl Personen --> |
|
<fieldset class="form-group"> |
|
<div class="form-row align-items-stretch mb-2"> |
|
<legend class="col-sm-3 col-form-label text-white"><h5 class="subheading">Personenzahl <span class="text-primary">*</span></h5></legend> |
|
<div class="col-md-4"> |
|
<!-- Erwachsene --> |
|
<input class="form-control" id="numAdult" name="numAdult" type="number" min="1" placeholder="Erwachsene" required="required" data-validation-required-message="Bitte verrate uns wie viele Erwachsene du anmeldest." /> |
|
</div> |
|
<div class="col-md-4"> |
|
<!-- Kinder --> |
|
<input class="form-control" id="numKids" name="numKids" type="number" min="0" placeholder="Kinder" data-validation-required-message="Bitte verrate uns wie viele Kinder du mitbringst." /> |
|
</div> |
|
<p class="help-block text-danger"></p> |
|
|
|
</div> |
|
</fieldset> |
|
|
|
|
|
<div class="hline m-5"></div> |
|
|
|
|
|
<fieldset class="form-group"> |
|
<div class="form-row align-items-stretch mb-2"> |
|
<legend class="col-sm-3 col-form-label text-white"><h5 class="subheading">Essenswünsche</h5></legend> |
|
<div class="col-md-8 "> |
|
<label class="text-white mb-0" for="vegi">Vegetarier</label> |
|
<div class="input-group mb-2"> |
|
<div class="input-group-prepend"> |
|
<div class="input-group-text"> |
|
<input type="checkbox" name="vegi" id="vegi"> |
|
</div> |
|
</div> |
|
<input class="form-control" id="numVegi" name="numVegi" type="number" min="0" placeholder="Anzahl der Personen" /> |
|
</div> |
|
|
|
|
|
<label class="text-white mb-0" for="vegan">Veganer</label> |
|
<div class="input-group mb-2"> |
|
<div class="input-group-prepend"> |
|
<div class="input-group-text"> |
|
<input type="checkbox" id="vegan" name="vegan"> |
|
</div> |
|
</div> |
|
<input class="form-control" id="numVegan" name="numVegan" type="number" min="0" placeholder="Anzahl der Personen" /> |
|
</div> |
|
|
|
<label class="text-white mb-0" for="alagen">Allergien und Unverträglichkeiten</label> |
|
<div class="input-group mb-2"> |
|
<div class="input-group-prepend"> |
|
<div class="input-group-text"> |
|
<input type="checkbox" id="alagen" name="allergiger"> |
|
</div> |
|
</div> |
|
<input class="form-control" id="textAalagen" name="allagene" type="text" placeholder="Allergene und Unverträglichkeiten" /> |
|
</div> |
|
</div> |
|
</div> |
|
</fieldset> |
|
|
|
|
|
<div class="hline m-5"></div> |
|
|
|
<!-- Unterkunft --> |
|
<fieldset class="fmorm-group"> |
|
<div class="form-row align-items-stretch mb-2"> |
|
<legend class="col-sm-3 col-form-label text-white"><h5 class="subheading">Unterkunft</h5></legend> |
|
<div class="col-md-8 "> |
|
<label class="text-white mb-0" for="unterkunft">Ich/Wir benötige/n eine Unterkunft</label> |
|
<div class="input-group mb-2"> |
|
<div class="input-group-prepend"> |
|
<div class="input-group-text"> |
|
<input type="checkbox" id="unterkunft" name="unterkunft"> |
|
</div> |
|
</div> |
|
<input class="form-control" id="numUnterkunft" name="numUnterkunft" type="number" min="0" placeholder="Anzahl der Zimmer" /> |
|
</div> |
|
|
|
<div> |
|
<label class="text-white mb-0" for="arival">Geplante Anreise</label> |
|
<!-- <input class="form-control" id="arival" type="date" value="2020-10-09" /> --> |
|
<input class="form-control" id="arival" name="arrival" type="date" /> |
|
</div> |
|
</div> |
|
</div> |
|
</fieldset> |
|
|
|
|
|
<div class="hline m-5"></div> |
|
|
|
<!-- Sonstiges --> |
|
<fieldset class="form-group"> |
|
<div class="form-row align-items-stretch mb-2"> |
|
<legend class="col-sm-3 col-form-label text-white"><h5 class="subheading">Sonstiges</h5></legend> |
|
<div class="col-md-8 "> |
|
<div class="mb-4"> |
|
<label class="text-white mb-0" for="musik">Zu dieser Musik werde/n ich/wir die Tanzfläche rocken</label> |
|
<input class="form-control" type="text" id="musik" name="musik" placeholder="Musikwunsch"> |
|
</div> |
|
|
|
<div class="mb-4"> |
|
<!-- <input class="form-check-input custom-control-input" type="checkbox" id="trauzeugen" > --> |
|
<label class="form-check-label text-white " for="trauzeugen">Dürfen wir Deine/Eure E-Mail Adresse an unsere Trauzeugen weitergeben, damit diese Dich/Euch anschreiben können?</label> |
|
<div class="input-group mb-4"> |
|
<div class="input-group-prepend"> |
|
<div class="input-group-text"> |
|
<input type="checkbox" id="trauzeugen" name="weitergabe"> |
|
</div> |
|
</div> |
|
<input class="form-control" id="contact" name="email" type="email" placeholder="E-Mail Kontaktadresse für Trauzeugen" /> |
|
</div> |
|
</div> |
|
|
|
<!-- <div class="mb-4 custom-control custom.control-switch"> |
|
<input class="form-check-input custom-control-input" type="checkbox" id="corona" > |
|
<label class="form-check-label custom-control-label text-white " for="corona"> |
|
Sollten wir die gestzlichen Möglichkeiten NICHT voll ausschöpfen um keine Anteckungen auf unserer Hochzeit zu reskieren |
|
</label> |
|
</div> |
|
--> |
|
|
|
</div> |
|
</div> |
|
</fieldset> |
|
|
|
|
|
<div class="hline m-5"></div> |
|
|
|
<fieldset class="form-group"> |
|
<div class="form-row align-items-stretch mb-2"> |
|
<legend class="col-sm-3 col-form-label text-white"><h5 class="subheading">Corona</h5></legend> |
|
<div class="col-md-8"> |
|
<div class="form-check custom-control custom-radio"> |
|
<input class="form-check-input custom-control-input" type="radio" name="covid19" id="gesaetzlicheGrundlage" value="gesätzliche Grundlage" > |
|
<label class="form-check-label text-white custom-control-label" for="gesaetzlicheGrundlage">Ich/Wir freuen uns darauf, mit euch im Rahmen der gesetzlichen Bestimmungen zu feiern.</label> |
|
</div> |
|
<div class="form-check custom-control custom-radio"> |
|
<input class="form-check-input custom-control-input" type="radio" name="covid19" id="vorsichtig" value="vorsichtiger"> |
|
<label class="form-check-label text-white custom-control-label" for="vorsichtig">Ich/Wir würden uns wohler fühlen, wenn über die gesezlichen Bestimmungen hinaus weitere Vorsichtsmaßnahmen getroffen werden.</label> |
|
</div> |
|
</div> |
|
</div> |
|
</fieldset> |
|
|
|
|
|
|
|
<div class="hline m-5"></div> |
|
|
|
|
|
<div class="text-white mb-3"> |
|
Wir verwenden die Angaben natürlich nur im Zusammenhang mit unserer Hochzeit und geben keine persönlichen Daten an Dritte weiter, die nicht direkt in die Planung oder Vorbereitung der Hochzeit involviert sind. |
|
<br/>Bitte füllt mindestens die mit einem <span class="text-primary">*</span> markierten Felder aus, damit wir zum Beispiel zusammen mit dem Wirt das Festmenü planen können. |
|
</div> |
|
|
|
<div class="text-center"> |
|
<button class="btn btn-primary btn-xl " id="sendMessageButton" type="submit">Daten übermitteln</button> |
|
<div id="form_message"></div> |
|
</div> |
|
</form> |
|
<div id="form_next"> </div> |
|
</div> |
|
</section> |
|
|
|
|
|
<!-- Ablauf --> |
|
<section class="page-section" id="ablauf"> |
|
<div class="container"> |
|
<div class="text-center"> |
|
<h2 class="section-heading">Ablauf</h2> |
|
<h3 class="section-subheading text-muted">So planen wir, mit Euch zu feiern.</h3> |
|
</div> |
|
<ul class="timeline"> |
|
<li> |
|
<div class="timeline-image"><img class="rounded-circle img-fluid" src="assets/img/ablauf/kirche.jpg" alt="Trauung" /></div> |
|
<div class="timeline-panel"> |
|
<div class="timeline-heading"> |
|
<h4>11:30 Uhr</h4> |
|
<h4 class="subheading">Kirchliche Trauung</h4> |
|
</div> |
|
<div class="timeline-body"><p class="text-muted">Wir werden uns in der St. Jakobuskirche in Kirchrüsselbach trauen lassen und freuen uns darauf, dass Ihr uns in unseren Traugottesdeinst begleitet. |
|
<!-- und für uns betet. --> |
|
</p></div> |
|
</div> |
|
</li> |
|
<li class="timeline-inverted"> |
|
<!-- Bildquelle: Pexels https://www.pexels.com/de-de/foto/alkohol-alkoholisches-getrank-champagner-drinnen-1121331/ --> |
|
<div class="timeline-image"><img class="rounded-circle img-fluid" src="assets/img/ablauf/clink.jpg" alt="clink glases" /></div> |
|
<div class="timeline-panel"> |
|
<div class="timeline-heading"> |
|
<!-- <h4>12:30 Uhr</h4> --> |
|
<h4 class="subheading">Sektempfang</h4> |
|
</div> |
|
<div class="timeline-body"><p class="text-muted">Nach der Trauung stoßen wir mit Euch an und stärken uns gemeinsam mit kleinen Häppchen an der Kirche.</p></div> |
|
</div> |
|
</li> |
|
<li> |
|
<!-- Bildquelle: Pexels https://www.pexels.com/de-de/foto/braut-dessert-essen-feier-1345574/ --> |
|
<div class="timeline-image"><img class="rounded-circle img-fluid" src="assets/img/ablauf/cake.jpg" alt="cake" /></div> |
|
<div class="timeline-panel"> |
|
<div class="timeline-heading"> |
|
<!-- <h4>15:30 Uhr</h4> --> |
|
<h4 class="subheading">Kaffee und Kuchen</h4> |
|
</div> |
|
<div class="timeline-body"><p class="text-muted"> |
|
Wir wechseln die Location zum Roten Ochsen in Kalchreuth, wo |
|
in rustikaler Atmosphäre der nächste Höhepunkt auf uns wartet: Das Anschneiden der Hochzeitstorte!</p></div> |
|
</div> |
|
</li> |
|
<li class="timeline-inverted"> |
|
<!-- Bildquelle: Pexels https://www.pexels.com/de-de/foto/business-dslr-erwachsener-fashion-167832/ --> |
|
<div class="timeline-image"><img class="rounded-circle img-fluid" src="assets/img/ablauf/photo.jpg" alt="photo" /></div> |
|
<div class="timeline-panel"> |
|
<div class="timeline-heading"> |
|
<h4 class="subheading">Fotos mit Euch</h4> |
|
</div> |
|
<div class="timeline-body"><p class="text-muted">Natürlich dürfen auch ein paar Erinnerungsfotos mit dem Brautpaar nicht fehlen.</p></div> |
|
</div> |
|
</li> |
|
<li> |
|
<!-- Bildquelle: Pexels https://www.pexels.com/de-de/foto/bankett-besteck-blume-dekoration-1114425/--> |
|
<div class="timeline-image"><img class="rounded-circle img-fluid" src="assets/img/ablauf/dinner.jpg" alt="dinner" /></div> |
|
<div class="timeline-panel"> |
|
<div class="timeline-heading"> |
|
<!-- <h4>19:00 Uhr</h4> --> |
|
<h4 class="subheading">Abendessen</h4> |
|
</div> |
|
<div class="timeline-body"><p class="text-muted">Nach einem aufregenden Tag nehmen wir das Festmenü in stilvollem Ambiente ein.</p></div> |
|
</div> |
|
</li> |
|
<li class="timeline-inverted"> |
|
<!-- Bildquelle: Pexels https://www.pexels.com/de-de/foto/toast-menschen-hand-festival-59884/--> |
|
<div class="timeline-image"><img class="rounded-circle img-fluid" src="assets/img/ablauf/party.jpg" alt="party" /></div> |
|
<div class="timeline-panel"> |
|
<div class="timeline-heading"> |
|
<!-- <h4>22:00 Uhr</h4> --> |
|
<h4 class="subheading">Party Time</h4> |
|
</div> |
|
<div class="timeline-body"><p class="text-muted">Mit dem Hochzeitstanz werden wir die Tanzfläche eröffnen, denn dann heißt es: 'It's Party time!'</p></div> |
|
</div> |
|
</li> |
|
</ul> |
|
</div> |
|
</section> |
|
|
|
<!-- Kontakt --> |
|
<section class="page-section bg-wood" id="kontakt"> |
|
<div class="container"> |
|
<div class="text-center"> |
|
<h2 class="section-heading ">Schreibt uns!</h2> |
|
<h3 class="section-subheading text-muted">Ihr habt noch Fragen oder wollt uns einfach noch was sagen?</h3> |
|
</div> |
|
<div class="row"> |
|
<div class="col-lg-4"> |
|
<div class="team-member"> |
|
<img class="mx-auto rounded-circle" src="assets/img/kontakt/sophia.jpg" alt="Sophia" /> |
|
<h4>Sophia</h4> |
|
<p class="text-muted">Trauzeugin von Chris</p> |
|
<a class="btn btn-dark btn-social mx-2" href="mailto:trauzeugen@ckris.de"><i class="fa fa-envelope"></i></a> |
|
</div> |
|
</div> |
|
<div class="col-lg-4"> |
|
<div class="team-member"> |
|
<img class="mx-auto rounded-circle" src="assets/img/kontakt/ck.jpg" alt="Krisi & Chris" /> |
|
<!-- <h4>Krisi & Chris</h4> --> |
|
<h4>CKris</h4> |
|
<p class="text-muted">Brautpaar</p> |
|
<!-- <p class="text-muted" href="mailto:hochzeit@ckris.de" >hochzeit@ckris.de</p> --> |
|
<a class="btn btn-dark btn-social mx-2" href="https://t.me/titzi1990" target="_blank"><i class="fab fa-telegram"></i></a> |
|
<a class="btn btn-dark btn-social mx-2" href="mailto:hochzeit@ckris.de" target="_blank"><i class="fa fa-envelope"></i></a> |
|
<a class="btn btn-dark btn-social mx-2" href="https://t.me/Krisi1001" target="_blank"><i class="fab fa-telegram"></i></a> |
|
</div> |
|
</div> |
|
<div class="col-lg-4"> |
|
<div class="team-member"> |
|
<img class="mx-auto rounded-circle" src="assets/img/kontakt/desiree.jpg" alt="Desiree" /> |
|
<h4>Desiree</h4> |
|
<p class="text-muted">Trauzeugin von Krisi</p> |
|
<a class="btn btn-dark btn-social mx-2" href="mailto:trauzeugen@ckris.de"><i class="fa fa-envelope"></i></a> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="row"> |
|
<div class="col-lg-8 mx-auto text-center"><p class="large text-muted"> |
|
Auch unsere Trauzeugen Desiree und Sophia helfen Euch gerne weiter. Wenn Ihr eine Überaschung für uns plant oder Fragen zu Geschenken habt, seid Ihr bei ihnen goldrichtig.</p></div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
<!-- Portfolio Grid--> |
|
<section class="page-section" id="portfolio"> |
|
<div class="container"> |
|
<div class="text-center"> |
|
<h2 class="section-heading ">Weitere Informationen</h2> |
|
<h3 class="section-subheading text-muted">Alles, was Ihr vor unserer Hochzeit noch wissen solltet.</h3> |
|
</div> |
|
<div class="row"> |
|
<div class="col-lg-4 col-sm-6 mb-4"> |
|
<div class="portfolio-item"> |
|
<a class="portfolio-link" data-toggle="modal" href="#infoAnfahrt"> |
|
<div class="portfolio-hover"> |
|
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div> |
|
</div> |
|
<img class="img-fluid" src="assets/img/info/anfahrt.jpg" alt="" /> |
|
</a> |
|
<a class="portfolio-link" data-toggle="modal" href="#infoAnfahrt"> |
|
<div class="portfolio-caption"> |
|
<div class="portfolio-caption-heading">Traulocation</div> |
|
<div class="portfolio-caption-subheading text-muted">Wo findet Ihr die Kirche?</div> |
|
</div> |
|
</a> |
|
</div> |
|
</div> |
|
<div class="col-lg-4 col-sm-6 mb-4"> |
|
<div class="portfolio-item"> |
|
<a class="portfolio-link" data-toggle="modal" href="#infoConvoi"> |
|
<div class="portfolio-hover"> |
|
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div> |
|
</div> |
|
<!-- bild quelle: unsplash https://unsplash.com/photos/tPxnF8LVNEI --> |
|
<img class="img-fluid" src="assets/img/info/auto_small.jpg" alt="" /> |
|
</a> |
|
<a class="portfolio-link" data-toggle="modal" href="#infoConvoi"> |
|
<div class="portfolio-caption"> |
|
<div class="portfolio-caption-heading">Wegbeschreibung</div> |
|
<div class="portfolio-caption-subheading text-muted">Wie kommen wir von der Kirche zur Gastwirtschaft zum Roten Ochsen?</div> |
|
</div> |
|
</a> |
|
</div> |
|
</div> |
|
<div class="col-lg-4 col-sm-6 mb-4"> |
|
<div class="portfolio-item"> |
|
<a class="portfolio-link" data-toggle="modal" href="#infoUnterkunft"> |
|
<div class="portfolio-hover"> |
|
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div> |
|
</div> |
|
<img class="img-fluid" src="assets/img/info/hotell_small.jpg" alt="" /> |
|
</a> |
|
<a class="portfolio-link" data-toggle="modal" href="#infoUnterkunft"> |
|
<div class="portfolio-caption"> |
|
<div class="portfolio-caption-heading">Unterkunft</div> |
|
<div class="portfolio-caption-subheading text-muted">Braucht Ihr noch ein Hotelzimmer?</div> |
|
</div> |
|
</a> |
|
</div> |
|
</div> |
|
<div class="col-lg-6 col-sm-6 mb-4 mb-lg-0"> |
|
<div class="portfolio-item"> |
|
<a class="portfolio-link" data-toggle="modal" href="#infoDresscode"> |
|
<div class="portfolio-hover"> |
|
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div> |
|
</div> |
|
<img class="img-fluid" src="assets/img/info/kleider_small.jpg" alt="" /> |
|
</a> |
|
<a class="portfolio-link" data-toggle="modal" href="#infoDresscode"> |
|
<div class="portfolio-caption"> |
|
<div class="portfolio-caption-heading">Dresscode</div> |
|
<div class="portfolio-caption-subheading text-muted">Was soll ich nur anziehen?</div> |
|
</div> |
|
</a> |
|
</div> |
|
</div> |
|
<div class="col-lg-6 col-sm-6 mb-4 mb-sm-0"> |
|
<div class="portfolio-item"> |
|
<a class="portfolio-link" data-toggle="modal" href="#infoGeschenk"> |
|
<div class="portfolio-hover"> |
|
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div> |
|
</div> |
|
<img class="img-fluid" src="assets/img/info/geschenk_small.jpeg" alt="" /> |
|
</a> |
|
<a class="portfolio-link" data-toggle="modal" href="#infoGeschenk"> |
|
<div class="portfolio-caption"> |
|
<div class="portfolio-caption-heading">Geschenketisch</div> |
|
<div class="portfolio-caption-subheading text-muted">Wie können wir euch eine Freude machen?</div> |
|
</div> |
|
</a> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
<!-- Footer--> |
|
<footer class="footer py-4"> |
|
<div class="container"> |
|
<div class="row align-items-center"> |
|
<div class="col-lg-5 text-lg-left">Copyright © ckris 2020</div> |
|
<div class="col-lg-2 my-3 my-lg-0"> |
|
<a class="btn btn-dark btn-social mx-2" href="mailto:webmaster@ckris.de"><i class="fa fa-envelope"></i></a> |
|
</div> |
|
<div class="col-lg-5 text-lg-right"> |
|
Christopher Bross, Gartenstraße 9, 91338 Igensdorf |
|
</div> |
|
</div> |
|
</div> |
|
</footer> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Portfolio Modals--> |
|
<!-- Info Dresscode--> |
|
<div class="portfolio-modal modal fade col-lg-8" id="infoDresscode" tabindex="-1" role="dialog" aria-hidden="true"> |
|
<div class="modal-dialog"> |
|
<div class="modal-content bg-wood-color"> |
|
<div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div> |
|
<div class="container"> |
|
<div class="row justify-content-center"> |
|
<div class="col-lg-8"> |
|
<div class="modla-body bg-light-transparent"> |
|
<!-- Project Details Go Here--> |
|
<h2 class="my-3">Was soll ich nur anziehen?</h2> |
|
<p class="item-intro text-muted">Mancher Gast der mag sich fragen,<br /> was soll ich an diesem Tage tragen.<br /> |
|
Es soll ein schickes Feste sein,<br /> dann kleidet Euch entsprechend ein.</p> |
|
<!-- Bildquelle: pexels https://www.pexels.com/de-de/foto/anzuge-bunt-business-designeranzuge-6805/ --> |
|
<img class="img-fluid d-block mx-auto" src="assets/img/info/kleider.jpg" alt="" /> |
|
<p>Wenn Ihr noch nach einem passenden Outfit sucht, orentiert Euch doch am besten an den Dresscodes <a href="https://www.dresscode.de/dresscodes/summer-chic/" target="_blank" >Summer Chic</a> und <a href="https://www.dresscode.de/dresscodes/cocktail/" target="_blank">Cocktail</a>. </p> |
|
<button class="btn btn-primary" data-dismiss="modal" type="button"> |
|
<i class="fas fa-times mr-1"></i> |
|
Schliesen |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<!-- Info Geschenk--> |
|
<div class="portfolio-modal modal fade col-lg-8" id="infoGeschenk" tabindex="-1" role="dialog" aria-hidden="true"> |
|
<div class="modal-dialog"> |
|
<div class="modal-content bg-wood-color"> |
|
<div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div> |
|
<div class="container"> |
|
<div class="row justify-content-center"> |
|
<div class="col-lg-8"> |
|
<div class="modla-body bg-light-transparent"> |
|
<!-- Project Details Go Here--> |
|
<!-- <h2 class="text-uppercase">Geschenketisch</h2> --> |
|
<h2 class="my-3">Wie könnt Ihr uns eine Freude machen?</h2> |
|
<p class="item-intro text-muted">So mancher Gast wird sich wohl denken:<br /> "Was soll'n wir dem Brautpaar schenken?"<br /> |
|
Am liebsten wäre uns fürwahr,<br /> nebst guten Wünschen eine Kleinigkeit in bar.</p> |
|
<!-- <p class="item-intro text-muted">Wie können wir Euch eine Freude machen?</p> --> |
|
<!-- Bildqulle: pexels https://www.pexels.com/de-de/foto/bluhen-blumen-blute-box-2072169/ --> |
|
<img class="img-fluid d-block mx-auto" src="assets/img/info/geschenk.jpeg" alt="" /> |
|
<p>Für unsere Flitterwochen in Tansania freuen wir uns über einen finanziellen Zuschuss in unsere Reisekasse.</p> |
|
<p>Für den Fall, dass Euch Scheine und Münzen zu unpersönlich sind, führen unsere Trauzeugen eine kleine Geschenkeliste. |
|
Bitte erkundigt Euch in so einem Fall bei ihnen, wie Ihr uns eine Freude machen könnt.</p> |
|
<!-- TODO alternativ trauzeugen ein kleine liste geben? --> |
|
<button class="btn btn-primary" data-dismiss="modal" type="button"> |
|
<i class="fas fa-times mr-1"></i> |
|
Schliesen |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<!-- Info Anfarts Skitze --> |
|
<div class="portfolio-modal modal fade col-lg-8" id="infoAnfahrt" tabindex="-1" role="dialog" aria-hidden="true"> |
|
<div class="modal-dialog"> |
|
<div class="modal-content bg-wood-color"> |
|
<div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div> |
|
<div class="container"> |
|
<div class="row justify-content-center"> |
|
<div class="col-lg-8"> |
|
<div class="modla-body bg-light-transparent"> |
|
<!-- Project Details Go Here--> |
|
<h2 class="my-3">Wo muss ich hin?</h2> |
|
<p class="item-intro text-muted">Unsere Trauung wird in der St. Jakobuskirche in Kirchrüsselbach stattfinden.</p> |
|
<iframe class="d-block mx-auto map-fluid" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d165457.93912456147!2d11.2669754!3d49.6113201!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xe17de36b38c8cf20!2sEv.%20Pfarramt%20Kirchr%C3%BCsselbach!5e0!3m2!1sde!2sde!4v1594547048952!5m2!1sde!2sde" tabindex="0" aria-hidden="false" allowfullscreen="" width="600" height="450" frameborder="0" style="border:0;"></iframe> |
|
<ul class="list-inline my-3"> |
|
<a href="https://www.google.com/maps/dir/?api=1&travelmode=driving&layer=traffic&destination=St.+Jakobuskirche,+st.-Jakobus-straße+2,+91338+Igensdorf" target="_blank"> |
|
<li>St. Jakobuskirche</li> |
|
<li>St.-Jakobus-Straße 2</li> |
|
<li>91338 Igensdorf</li> |
|
</a> |
|
</ul> |
|
<p>Am Straßenrand vor und hinter der Kirche kann geparkt werden.</p> |
|
<button class="btn btn-primary" data-dismiss="modal" type="button"> |
|
<i class="fas fa-times mr-1"></i> |
|
Schließen |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<!-- Info Convoi --> |
|
<div class="portfolio-modal modal fade col-lg-8" id="infoConvoi" tabindex="-1" role="dialog" aria-hidden="true"> |
|
<div class="modal-dialog"> |
|
<div class="modal-content bg-wood-color"> |
|
<div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div> |
|
<div class="container"> |
|
<div class="row justify-content-center"> |
|
<div class="col-lg-8"> |
|
<div class="modla-body bg-light-transparent"> |
|
<!-- Project Details Go Here--> |
|
<h2 class="my-3">Wie kommen wir zur Gastwirtschaft?</h2> |
|
<p class="item-intro text-muted">Nach der Kirche fahren wir gemeinsam im Autokorso zur Gastwirtschaft zum Roten Ochsen in Kalchreuth.</p> |
|
<iframe class="d-block mx-auto map-fluid" src="https://www.google.com/maps/embed?pb=!1m36!1m12!1m3!1d41385.47953812564!2d11.16589271278478!3d49.58657578603973!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m21!3e0!4m5!1s0x47a1e5c1a5f19139%3A0xe17de36b38c8cf20!2sEv.%20Pfarramt%20Kirchr%C3%BCsselbach%2C%20St.-Jakobus-Stra%C3%9Fe%202%2C%2091338%20Igensdorf!3m2!1d49.61119!2d11.26724!4m3!3m2!1d49.6135763!2d11.2350111!4m3!3m2!1d49.5914856!2d11.186234599999999!4m5!1s0x47a1fca2211d242f%3A0x9a6762c5c10c2459!2sZum%20Roten%20Ochsen%2C%20Wei%C3%9Fgasse%2010-12%2C%2090562%20Kalchreuth!3m2!1d49.5589101!2d11.1347962!5e0!3m2!1sde!2sde!4v1595964170565!5m2!1sde!2sde" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe> |
|
|
|
<a href="https://www.google.com/maps/dir/?api=1&travelmode=driving&layer=traffic&destination=Zum+Roten+Ochsen,+Wei%C3%9Fgasse+10-12,+90562+Kalchreuth" target="_blank"> |
|
<ul class="list-inline my-3"> |
|
<li>Zum Roten Ochsen</li> |
|
<li>Weißgasse 10-12</li> |
|
<li>90562 Kalchreuth</li> |
|
</ul> |
|
</a> |
|
<p>Um möglichst als geschlossener Konvoi zur Gastwirtschaft zu fahren, bitten wir Euch, keine Lücken entsehen zu lassen und im gleichmäßigen Tempo des Konvois zu fahren. |
|
Wir werden größere Straßen meiden, müssen aber ein kurzes Stück auf der B2 fahren. Solltet Ihr dennoch den Anschluss verlieren, findet Ihr oben die geplante Route und die Addresse der Gastwirtschaft zum Roten Ochsen.</p> |
|
|
|
<button class="btn btn-primary" data-dismiss="modal" type="button"> |
|
<i class="fas fa-times mr-1"></i> |
|
Schließen |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<!-- Modal 5--> |
|
<div class="portfolio-modal modal fade col-lg-8" id="infoUnterkunft" tabindex="-1" role="dialog" aria-hidden="true"> |
|
<div class="modal-dialog"> |
|
<div class="modal-content bg-wood-color"> |
|
<div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div> |
|
<div class="container"> |
|
<div class="row justify-content-center"> |
|
<div class="col-lg-8"> |
|
<div class="modal-body bg-light-transparent"> |
|
<!-- Project Details Go Here--> |
|
<h2 class="my-3">Braucht Ihr noch eine Unterkunft!</h2> |
|
<p class="item-intro text-muted">Wir empfehlen Euch, an unserer Partylocation, in der Gastwirtschaft zum Roten Ochsen ein Zimmer zu buchen.</p> |
|
<img class="img-fluid d-block mx-auto" src="assets/img/info/hotell.jpg" alt="" /> |
|
<p> Die Gastwirtschaft zum Roten Ochsen, in der wir feiern werden, bietet auch <a href="https://www.roter-ochse-kalchreuth.de/hotel" target="_blank">Hotelzimmer</a> an. |
|
Wir haben uns dort ein Zimmer für unsere Hochzeitsnacht genommen und weitere Zimmer für Euch geblockt. |
|
Solltet Ihr noch nach einer Unterkunft suchen, um nach der Party keinen Heimweg zu haben, können wir Euch die Zimmer beim Roten Ochsen empfehlen. |
|
Besonders freuen wir uns auf ein entspanntes, gemeinsames Frühstück mit allen Übernachtungsgästen am nächsten Morgen. |
|
Gebt bei der Buchung einfach an, dass Ihr zu Hochzeitsgesellschaft gehört. |
|
</p> |
|
<button class="btn btn-primary" data-dismiss="modal" type="button"> |
|
<i class="fas fa-times mr-1"></i> |
|
Schließen |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<!-- Bootstrap core JS--> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> |
|
<!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script> --> |
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> |
|
<!-- Third party plugin JS--> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script> |
|
<!-- Contact form JS--> |
|
<script src="js/jqBootstrapValidation.js"></script> |
|
<script src="js/form.js"></script> |
|
<!-- Core theme JS--> |
|
<script src="js/scripts.js"></script> |
|
</body> |
|
</html>
|
|
|