Browse Source

first version of our homepage

master
Christopher Bross 5 years ago
parent
commit
58cec2391a
  1. BIN
      dist/assets/img/ablauf/cake.jpg
  2. BIN
      dist/assets/img/ablauf/clink.jpg
  3. BIN
      dist/assets/img/ablauf/dinner.jpg
  4. BIN
      dist/assets/img/ablauf/kirche.jpg
  5. BIN
      dist/assets/img/ablauf/party.jpg
  6. BIN
      dist/assets/img/ablauf/photo.jpg
  7. BIN
      dist/assets/img/about/1.jpg
  8. BIN
      dist/assets/img/about/2.jpg
  9. BIN
      dist/assets/img/about/3.jpg
  10. BIN
      dist/assets/img/about/4.jpg
  11. BIN
      dist/assets/img/einladung/dinner.jpg
  12. BIN
      dist/assets/img/einladung/kirche.jpg
  13. BIN
      dist/assets/img/einladung/party.jpg
  14. BIN
      dist/assets/img/favicon.ico
  15. BIN
      dist/assets/img/favicon_wood.ico
  16. BIN
      dist/assets/img/favicon_wood_trans.ico
  17. BIN
      dist/assets/img/header-bg.jpg
  18. 1
      dist/assets/img/header-bg.jpg
  19. BIN
      dist/assets/img/header-bg_original.jpg
  20. BIN
      dist/assets/img/info/anfahrt.jpg
  21. BIN
      dist/assets/img/info/auto_small.jpg
  22. BIN
      dist/assets/img/info/geschenk.jpeg
  23. BIN
      dist/assets/img/info/geschenk_small.jpeg
  24. BIN
      dist/assets/img/info/hotell.jpg
  25. BIN
      dist/assets/img/info/hotell_small.jpg
  26. BIN
      dist/assets/img/info/kleider.jpg
  27. BIN
      dist/assets/img/info/kleider_small.jpg
  28. 82
      dist/assets/img/kc.svg
  29. BIN
      dist/assets/img/kontakt/ck.jpg
  30. BIN
      dist/assets/img/kontakt/ck.png
  31. BIN
      dist/assets/img/kontakt/desiree.jpg
  32. BIN
      dist/assets/img/kontakt/sophia.jpg
  33. BIN
      dist/assets/img/logos/creative-market.jpg
  34. BIN
      dist/assets/img/logos/designmodo.jpg
  35. BIN
      dist/assets/img/logos/envato.jpg
  36. BIN
      dist/assets/img/logos/themeforest.jpg
  37. BIN
      dist/assets/img/ring_am_strand.jpg
  38. BIN
      dist/assets/img/team/1.jpg
  39. BIN
      dist/assets/img/team/2.jpg
  40. BIN
      dist/assets/img/team/3.jpg
  41. 12
      dist/css/styles.css
  42. 737
      dist/index.html

BIN
dist/assets/img/ablauf/cake.jpg vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

BIN
dist/assets/img/ablauf/clink.jpg vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

BIN
dist/assets/img/ablauf/dinner.jpg vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

BIN
dist/assets/img/ablauf/kirche.jpg vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

BIN
dist/assets/img/ablauf/party.jpg vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

BIN
dist/assets/img/ablauf/photo.jpg vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

BIN
dist/assets/img/about/1.jpg vendored

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.8 KiB

BIN
dist/assets/img/about/2.jpg vendored

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

BIN
dist/assets/img/about/3.jpg vendored

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.2 KiB

BIN
dist/assets/img/about/4.jpg vendored

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.8 KiB

BIN
dist/assets/img/einladung/dinner.jpg vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

BIN
dist/assets/img/einladung/kirche.jpg vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

BIN
dist/assets/img/einladung/party.jpg vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

BIN
dist/assets/img/favicon.ico vendored

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
dist/assets/img/favicon_wood.ico vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
dist/assets/img/favicon_wood_trans.ico vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
dist/assets/img/header-bg.jpg vendored

Binary file not shown.

Before

Width:  |  Height:  |  Size: 233 KiB

After

Width:  |  Height:  |  Size: 18 B

1
dist/assets/img/header-bg.jpg vendored

@ -0,0 +1 @@ @@ -0,0 +1 @@
ring_am_strand.jpg

Before

Width:  |  Height:  |  Size: 233 KiB

After

Width:  |  Height:  |  Size: 18 B

BIN
dist/assets/img/header-bg_original.jpg vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 233 KiB

BIN
dist/assets/img/info/anfahrt.jpg vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

BIN
dist/assets/img/info/auto_small.jpg vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

BIN
dist/assets/img/info/geschenk.jpeg vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 110 KiB

BIN
dist/assets/img/info/geschenk_small.jpeg vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

BIN
dist/assets/img/info/hotell.jpg vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

BIN
dist/assets/img/info/hotell_small.jpg vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

BIN
dist/assets/img/info/kleider.jpg vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 108 KiB

BIN
dist/assets/img/info/kleider_small.jpg vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

82
dist/assets/img/kc.svg vendored

@ -0,0 +1,82 @@ @@ -0,0 +1,82 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
inkscape:export-ydpi="300"
inkscape:export-xdpi="300"
inkscape:export-filename="/home/titzi/hochzeit/KC_font/KC_bw.png"
sodipodi:docname="kc.svg"
inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
id="svg24622"
version="1.1"
viewBox="0 0 44.045376 48.926971"
height="48.926971mm"
width="44.045376mm">
<defs
id="defs24616" />
<sodipodi:namedview
fit-margin-bottom="0"
fit-margin-right="0"
fit-margin-left="0"
fit-margin-top="0"
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="6.6473412"
inkscape:cx="79.066074"
inkscape:cy="50.298522"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
inkscape:document-rotation="0"
showgrid="false"
inkscape:window-width="1918"
inkscape:window-height="1041"
inkscape:window-x="0"
inkscape:window-y="1098"
inkscape:window-maximized="1" />
<metadata
id="metadata24619">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="translate(-0.12986281,-0.0640909)"
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<g
style="font-variation-settings:normal;opacity:1;vector-effect:none;fill:#f8ca76;fill-opacity:1;stroke:none;stroke-width:0.314431px;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000;stop-opacity:1"
transform="matrix(2.3733249,0,0,2.3733249,-18.852063,-17.438882)"
id="g2382">
<path
inkscape:export-ydpi="300"
inkscape:export-xdpi="300"
inkscape:connector-curvature="0"
style="font-style:italic;font-variant:normal;font-weight:500;font-stretch:normal;font-size:24.6944px;line-height:125%;font-family:Z003;-inkscape-font-specification:'Z003, Medium Italic';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;font-variation-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;display:inline;vector-effect:none;fill:#f8ca76;fill-opacity:1;stroke:none;stroke-width:0.314431px;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000;stop-opacity:1"
d="m 22.597691,9.11927 c -0.36021,0.006 -0.72193,0.0384 -1.08676,0.0858 -3.4989,0.45435 -7.11627,2.10873 -9.462469,4.7439 -2.453301,2.75543 -4.869876,6.87594 -3.782716,10.40141 0.305056,0.98928 1.164328,1.77101 2.165244,2.28515 0.382476,-1.32434 0.715973,-2.50748 1.013891,-3.59669 -0.137139,-0.25665 -0.229055,-0.53025 -0.258381,-0.82061 -0.507008,-5.02001 5.468681,-10.98015 9.660391,-11.65304 1.36267,-0.21876 2.40997,-0.24651 3.21582,-0.12816 0.0879,-0.36288 0.19314,-0.75621 0.23875,-1.09554 -0.56735,-0.17195 -1.13356,-0.23148 -1.70377,-0.22222 z m 3.25768,1.00822 c -0.0605,0.2277 -0.12499,0.44768 -0.19172,0.66352 0.8734,0.1896 1.38583,0.20384 0.19172,-0.66352 z m -3.48971,12.74495 c -0.24747,-0.009 -0.82518,0.25715 -1.54306,0.68059 -2.9904,1.76379 -3.85023,2.11177 -5.84098,1.7172 -0.51915,-0.1029 -1.08531,-0.29266 -1.61903,-0.55605 -0.0498,0.32081 -0.10623,0.67646 -0.15296,0.96687 -0.09248,0.57475 -0.182981,1.07852 -0.287322,1.4728 -0.01781,0.0673 -0.03711,0.12086 -0.05529,0.18137 2.957312,0.30679 6.310302,-0.73321 8.410852,-2.81688 1.17818,-1.16872 1.40596,-1.63447 1.08779,-1.6459 z"
id="path3741-3-7-8-9-0" />
<path
inkscape:export-ydpi="300"
inkscape:export-xdpi="300"
style="font-style:italic;font-variant:normal;font-weight:500;font-stretch:normal;font-size:24.6944px;line-height:125%;font-family:Z003;-inkscape-font-specification:'Z003, Medium Italic';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;font-variation-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;display:inline;vector-effect:none;fill:#f8ca76;fill-opacity:1;stroke:none;stroke-width:0.314431px;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000;stop-opacity:1"
d="m 24.891091,7.37518 c -0.71115,0.0199 -1.3421,0.94454 -0.92242,0.9891 0.8436,0.0896 0.43541,1.29294 0.22582,2.17971 -1.03737,4.38894 -8.62419,7.59026 -9.71052,7.52512 l 0.88883,-4.23486 c -0.34692,0.32697 -0.68344,0.67042 -1.00303,1.03042 -0.42264,0.47603 -0.81428,0.97858 -1.16996,1.49706 -0.579926,3.0408 -1.389125,6.07573 -2.785357,10.88565 -0.293979,1.01272 1.875898,0.73128 2.011246,0.62529 0.537416,-0.4209 0.721799,-3.43768 1.291391,-6.15053 0,0 1.52743,2.2625 3.03961,3.50829 0.23706,-0.0301 0.47431,-0.0799 0.72451,-0.15708 0.42279,-0.13047 0.88971,-0.33843 1.44539,-0.62788 -0.38625,-0.19265 -0.72939,-0.38513 -0.98237,-0.55759 -2.06584,-1.40827 -2.58279,-3.99769 -2.58279,-3.99769 7.16053,-3.45131 9.3472,-5.47717 10.49807,-10.40866 0.11591,-0.49673 0.14013,-1.74543 -0.66146,-2.05414 -0.10205,-0.0393 -0.20537,-0.055 -0.30696,-0.0522 z m -9.63456,1.93064 c -0.30711,0 -0.61584,0.0285 -1.05885,0.0894 -0.10637,0.96689 -0.21376,1.84456 -0.32349,2.68615 0.67109,-0.4999 1.39235,-0.94147 2.14561,-1.32707 l 0.28525,-1.35908 c -0.43601,-0.0587 -0.74141,-0.0888 -1.04852,-0.0894 z m 10.03505,15.77528 c -0.37599,-0.0552 -0.96401,0.49797 -1.71565,0.54777 -0.80526,0.0966 -1.83821,-0.10941 -2.82671,-0.43357 -0.57947,0.47101 -1.22413,0.8759 -1.91151,1.20975 2.00003,0.91697 3.52078,1.33739 4.7594,1.33842 0.63327,0 2.21145,-0.75819 2.13166,-1.66658 -0.0624,-0.71075 -0.21159,-0.96272 -0.43719,-0.99579 z"
id="path3792-0"
inkscape:connector-curvature="0" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 6.4 KiB

BIN
dist/assets/img/kontakt/ck.jpg vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

BIN
dist/assets/img/kontakt/ck.png vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 379 KiB

BIN
dist/assets/img/kontakt/desiree.jpg vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

BIN
dist/assets/img/kontakt/sophia.jpg vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

BIN
dist/assets/img/logos/creative-market.jpg vendored

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

BIN
dist/assets/img/logos/designmodo.jpg vendored

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

BIN
dist/assets/img/logos/envato.jpg vendored

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.0 KiB

BIN
dist/assets/img/logos/themeforest.jpg vendored

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

BIN
dist/assets/img/ring_am_strand.jpg vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 MiB

BIN
dist/assets/img/team/1.jpg vendored

Binary file not shown.

Before

Width:  |  Height:  |  Size: 52 KiB

BIN
dist/assets/img/team/2.jpg vendored

Binary file not shown.

Before

Width:  |  Height:  |  Size: 55 KiB

BIN
dist/assets/img/team/3.jpg vendored

Binary file not shown.

Before

Width:  |  Height:  |  Size: 73 KiB

12
dist/css/styles.css vendored

@ -478,6 +478,10 @@ mark, @@ -478,6 +478,10 @@ mark,
height: auto;
}
.map-fluid {
max-width:100%
}
.img-thumbnail {
padding: 0.25rem;
background-color: #fff;
@ -10503,3 +10507,11 @@ section#contact form#contactForm :-ms-input-placeholder { @@ -10503,3 +10507,11 @@ section#contact form#contactForm :-ms-input-placeholder {
font-size: 0.9rem;
font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
div.hline {
width: 100%;
height: 2px;
display: block;
background: #fed136;
background: radial-gradient(#fed136 40%, rgba(254, 209, 54, 0) 80%);
}

737
dist/index.html vendored

@ -1,11 +1,11 @@ @@ -1,11 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<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="" />
<title>Agency - Start Bootstrap Theme</title>
<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>
@ -16,366 +16,521 @@ @@ -16,366 +16,521 @@
<!-- 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-dark fixed-top" id="mainNav">
<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/navbar-logo.svg" alt="" /></a>
<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="#services">Services</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#portfolio">Portfolio</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#team">Team</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#contact">Contact</a></li>
<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">Welcome To Our Studio!</div>
<div class="masthead-heading text-uppercase">It's Nice To Meet You</div>
<a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Tell Me More</a>
<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>
<!-- Services-->
<section class="page-section" id="services">
<!-- Einladung -->
<section class="page-section " id="einladung">
<div class="container">
<div class="text-center">
<h2 class="section-heading text-uppercase">Services</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
<h2 class="section-heading text-uppercase">CK laden Dich/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">Um diesen wunderbaren Anlass zu feiern, laden wir Dich/Euch herzlich am 10.10.2020 ein
<!-- 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-shopping-cart fa-stack-1x fa-inverse"></i>
<i class="fas fa-church fa-stack-1x fa-inverse"></i>
</span>
<h4 class="my-3">E-Commerce</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
<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-laptop fa-stack-1x fa-inverse"></i>
<i class="fas fa-glass-cheers fa-stack-1x fa-inverse"></i>
</span>
<h4 class="my-3">Responsive Design</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
<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-lock fa-stack-1x fa-inverse"></i>
<i class="fas fa-utensils fa-stack-1x fa-inverse"></i>
</span>
<h4 class="my-3">Web Security</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
<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 text-uppercase js-scroll-trigger" href="#anmelden">wir sind dabei!</a>
</div>
</div>
</section>
<!-- Portfolio Grid-->
<section class="page-section bg-light" id="portfolio">
<!-- Anmelde Formular-->
<section class="page-section bg-dark" id="anmelden">
<div class="container">
<div class="text-center">
<h2 class="section-heading text-uppercase">Portfolio</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</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="#portfolioModal1">
<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/portfolio/01-thumbnail.jpg" alt="" />
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">Threads</div>
<div class="portfolio-caption-subheading text-muted">Illustration</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4">
<div class="portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal2">
<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/portfolio/02-thumbnail.jpg" alt="" />
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">Explore</div>
<div class="portfolio-caption-subheading text-muted">Graphic Design</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4">
<div class="portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal3">
<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/portfolio/03-thumbnail.jpg" alt="" />
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">Finish</div>
<div class="portfolio-caption-subheading text-muted">Identity</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4 mb-lg-0">
<div class="portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal4">
<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/portfolio/04-thumbnail.jpg" alt="" />
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">Lines</div>
<div class="portfolio-caption-subheading text-muted">Branding</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4 mb-sm-0">
<div class="portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal5">
<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/portfolio/05-thumbnail.jpg" alt="" />
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">Southwest</div>
<div class="portfolio-caption-subheading text-muted">Website Design</div>
</div>
</div>
<h2 class="section-heading text-uppercase text-white">Rückmelde Formular</h2>
<h3 class="section-subheading text-muted">
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="anmeldeForm" name="rueckmeldung" method="post">
<!-- 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" data-validation-required-message="Bitte gebe deinen Vornamen ein, damit wir dich eindeutig zuortnen können." />
</div>
<div class="col-lg-4 col-sm-6">
<div class="portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal6">
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
<div class="col-md-4">
<input class="form-control" id="name" type="text" placeholder="Familienname" required="required" data-validation-required-message="Bitte gebe deinen Namen ein, damit wir dich zuortnen können." />
</div>
<img class="img-fluid" src="assets/img/portfolio/06-thumbnail.jpg" alt="" />
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">Window</div>
<div class="portfolio-caption-subheading text-muted">Photography</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">Anzahl<span class="text-primary">*</span></h5></legend>
<div class="col-md-4">
<!-- Erwachsene -->
<input class="form-control" id="numAdult" type="number" 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" type="number" placeholder="Kinder" required="required" 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" id="vegi">
</div>
</div>
<input class="form-control" id="numVegi" type="number" placeholder="Anzahl" />
</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">
</div>
</div>
<input class="form-control" id="numVegan" type="number" placeholder="Anzahl" />
</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">
</div>
</div>
<input class="form-control" id="textAalagen" type="text" placeholder="Allergene und Unverträglichkeiten" />
</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">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">
</div>
</div>
<input class="form-control" id="numUnterkunft" type="number" 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" type="date" />
</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">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" 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">
</div>
</div>
<input class="form-control" id="contact" 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>
<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">
<div id="success"></div>
<button class="btn btn-primary btn-xl text-uppercase" id="sendMessageButton" type="submit">Send Message</button>
</div>
</form>
</div>
</section>
<!-- About-->
<section class="page-section" id="about">
<!-- Ablauf -->
<section class="page-section" id="ablauf">
<div class="container">
<div class="text-center">
<h2 class="section-heading text-uppercase">About</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
<h2 class="section-heading text-uppercase">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/about/1.jpg" alt="" /></div>
<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>2009-2011</h4>
<h4 class="subheading">Our Humble Beginnings</h4>
<h4>11:30 Uhr</h4>
<h4 class="subheading">Kirchliche Trauung</h4>
</div>
<div class="timeline-body"><p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p></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">
<div class="timeline-image"><img class="rounded-circle img-fluid" src="assets/img/about/2.jpg" alt="" /></div>
<!-- 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>March 2011</h4>
<h4 class="subheading">An Agency is Born</h4>
<!-- <h4>12:30 Uhr</h4> -->
<h4 class="subheading">Sektempfang</h4>
</div>
<div class="timeline-body"><p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p></div>
<div class="timeline-body"><p class="text-muted">Im Anschluss 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>
<div class="timeline-image"><img class="rounded-circle img-fluid" src="assets/img/about/3.jpg" alt="" /></div>
<!-- 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>December 2012</h4>
<h4 class="subheading">Transition to Full Service</h4>
<!-- <h4>15:30 Uhr</h4> -->
<h4 class="subheading">Kaffee und Kuchen</h4>
</div>
<div class="timeline-body"><p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p></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">
<div class="timeline-image"><img class="rounded-circle img-fluid" src="assets/img/about/4.jpg" alt="" /></div>
<!-- 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>July 2014</h4>
<h4 class="subheading">Phase Two Expansion</h4>
<h4 class="subheading">Fotos mit euch</h4>
</div>
<div class="timeline-body"><p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p></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">
<div class="timeline-image">
<h4>
Be Part
<br />
Of Our
<br />
Story!
</h4>
<!-- 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 heist es: 'It's Party time!'</p></div>
</div>
</li>
</ul>
</div>
</section>
<!-- Team-->
<section class="page-section bg-light" id="team">
<!-- Kontakt -->
<section class="page-section bg-light" id="kontakt">
<div class="container">
<div class="text-center">
<h2 class="section-heading text-uppercase">Our Amazing Team</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
<h2 class="section-heading text-uppercase">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/team/1.jpg" alt="" />
<h4>Kay Garland</h4>
<p class="text-muted">Lead Designer</p>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-twitter"></i></a>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-facebook-f"></i></a>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-linkedin-in"></i></a>
<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/team/2.jpg" alt="" />
<h4>Larry Parker</h4>
<p class="text-muted">Lead Marketer</p>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-twitter"></i></a>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-facebook-f"></i></a>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-linkedin-in"></i></a>
<img class="mx-auto rounded-circle" src="assets/img/kontakt/ck.jpg" alt="Krisi & Chris" />
<h4>Krisi & Chris</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="mailto:hochzeit@ckris.de"><i class="fa fa-envelope"></i></a>
<a class="btn btn-dark btn-social mx-2" href="https://t.me/titzi1990"><i class="fab fa-telegram"></i></a>
<a class="btn btn-dark btn-social mx-2" href="https://t.me/Krisi1001"><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/team/3.jpg" alt="" />
<h4>Diana Petersen</h4>
<p class="text-muted">Lead Developer</p>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-twitter"></i></a>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-facebook-f"></i></a>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-linkedin-in"></i></a>
<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">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut eaque, laboriosam veritatis, quos non quis ad perspiciatis, totam corporis ea, alias ut unde.</p></div>
<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 Gold richtig.</p></div>
</div>
</div>
</section>
<!-- Clients-->
<div class="py-5">
<!-- Portfolio Grid-->
<section class="page-section" id="portfolio">
<div class="container">
<div class="text-center">
<h2 class="section-heading text-uppercase">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-md-3 col-sm-6 my-3">
<a href="#!"><img class="img-fluid d-block mx-auto" src="assets/img/logos/envato.jpg" alt="" /></a>
<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>
<div class="col-md-3 col-sm-6 my-3">
<a href="#!"><img class="img-fluid d-block mx-auto" src="assets/img/logos/designmodo.jpg" alt="" /></a>
<img class="img-fluid" src="assets/img/info/anfahrt.jpg" alt="" />
</a>
<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>
<div class="col-md-3 col-sm-6 my-3">
<a href="#!"><img class="img-fluid d-block mx-auto" src="assets/img/logos/themeforest.jpg" alt="" /></a>
</div>
<div class="col-md-3 col-sm-6 my-3">
<a href="#!"><img class="img-fluid d-block mx-auto" src="assets/img/logos/creative-market.jpg" alt="" /></a>
</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>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">Wegbeschreibung</div>
<div class="portfolio-caption-subheading text-muted">Wie kommen wir von der Kirche zum Gasthof Roten Ochsen?</div>
</div>
</div>
<!-- Contact-->
<section class="page-section" id="contact">
<div class="container">
<div class="text-center">
<h2 class="section-heading text-uppercase">Contact Us</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
<form id="contactForm" name="sentMessage" novalidate="novalidate">
<div class="row align-items-stretch mb-5">
<div class="col-md-6">
<div class="form-group">
<input class="form-control" id="name" type="text" placeholder="Your Name *" required="required" data-validation-required-message="Please enter your name." />
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<input class="form-control" id="email" type="email" placeholder="Your Email *" required="required" data-validation-required-message="Please enter your email address." />
<p class="help-block text-danger"></p>
<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>
<div class="form-group mb-md-0">
<input class="form-control" id="phone" type="tel" placeholder="Your Phone *" required="required" data-validation-required-message="Please enter your phone number." />
<p class="help-block text-danger"></p>
<img class="img-fluid" src="assets/img/info/hotell_small.jpg" alt="" />
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">Unterkunft</div>
<div class="portfolio-caption-subheading text-muted">Ihr braucht ein Hotelzimmer?</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group form-group-textarea mb-md-0">
<textarea class="form-control" id="message" placeholder="Your Message *" required="required" data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</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>
<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>
</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>
<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>
</div>
</div>
<div class="text-center">
<div id="success"></div>
<button class="btn btn-primary btn-xl text-uppercase" id="sendMessageButton" type="submit">Send Message</button>
</div>
</form>
</div>
</section>
<!-- Footer-->
<footer class="footer py-4">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-4 text-lg-left">Copyright © Your Website 2020</div>
<div class="col-lg-4 my-3 my-lg-0">
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-twitter"></i></a>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-facebook-f"></i></a>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-linkedin-in"></i></a>
<div class="col-lg-5 text-lg-left">Copyright © ckris.de 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-4 text-lg-right">
<a class="mr-3" href="#!">Privacy Policy</a>
<a href="#!">Terms of Use</a>
<div class="col-lg-5 text-lg-right">
Christopher Bross, Gratenstraße 9, 91338 Igensdorf
</div>
</div>
</div>
</footer>
<!-- Portfolio Modals-->
<!-- Modal 1-->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<!-- 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">
<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">
<div class="modal-body bg-light">
<!-- Project Details Go Here-->
<h2 class="text-uppercase">Project Name</h2>
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
<img class="img-fluid d-block mx-auto" src="assets/img/portfolio/01-full.jpg" alt="" />
<p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
<ul class="list-inline">
<li>Date: January 2020</li>
<li>Client: Threads</li>
<li>Category: Illustration</li>
</ul>
<h2 class="text-uppercase">Was soll ich nur anziehen?</h2>
<p class="item-intro text-muted">Mancher Gast der mag sich fragen, was soll ich an diesem Tage tragen.<br />
Es soll ein schickes Feste sein, 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>
Close Project
Schliesen
</button>
</div>
</div>
@ -384,28 +539,31 @@ @@ -384,28 +539,31 @@
</div>
</div>
</div>
<!-- Modal 2-->
<div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
<!-- 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">
<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">
<div class="modal-body bg-light">
<!-- Project Details Go Here-->
<h2 class="text-uppercase">Project Name</h2>
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
<img class="img-fluid d-block mx-auto" src="assets/img/portfolio/02-full.jpg" alt="" />
<p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
<ul class="list-inline">
<li>Date: January 2020</li>
<li>Client: Explore</li>
<li>Category: Graphic Design</li>
</ul>
<!-- <h2 class="text-uppercase">Geschenketisch</h2> -->
<h2 class="text-uppercase">Wie könnt ihr uns eine Freude machne?</h2>
<p class="item-intro text-muted">So mancher Gast wird sich wohl denken: "Was sollen wir dem Brautpaar schenken?"<br />
Am liebsten wäre uns fürwahr, 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 unser 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>
Close Project
Schliesen
</button>
</div>
</div>
@ -414,28 +572,31 @@ @@ -414,28 +572,31 @@
</div>
</div>
</div>
<!-- Modal 3-->
<div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
<!-- 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">
<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">
<div class="modal-body bg-light">
<!-- Project Details Go Here-->
<h2 class="text-uppercase">Project Name</h2>
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
<img class="img-fluid d-block mx-auto" src="assets/img/portfolio/03-full.jpg" alt="" />
<p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
<ul class="list-inline">
<li>Date: January 2020</li>
<li>Client: Finish</li>
<li>Category: Identity</li>
<h2 class="text-uppercase">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>
Close Project
Schließen
</button>
</div>
</div>
@ -444,28 +605,33 @@ @@ -444,28 +605,33 @@
</div>
</div>
</div>
<!-- Modal 4-->
<div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
<!-- 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">
<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">
<div class="modal-body bg-light">
<!-- Project Details Go Here-->
<h2 class="text-uppercase">Project Name</h2>
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
<img class="img-fluid d-block mx-auto" src="assets/img/portfolio/04-full.jpg" alt="" />
<p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
<ul class="list-inline">
<li>Date: January 2020</li>
<li>Client: Lines</li>
<li>Category: Branding</li>
<h2 class="text-uppercase">Wie kommen wir zur Gastwirtschaft?</h2>
<p class="item-intro text-muted">Nach der Kirche fahren wir gemeinsam im Konvoi zur Gastwirtschaft "Roter Ochse".</p>
<iframe class="d-block mx-auto map-fluid" src="https://www.google.com/maps/embed?pb=!1m32!1m12!1m3!1d82773.47313477186!2d11.130958235149492!3d49.585093969070414!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m17!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.5873077!2d11.1856584!4m5!1s0x47a1fca2211d242f%3A0x9a6762c5c10c2459!2sZum%20Roten%20Ochsen%2C%20Wei%C3%9Fgasse%2010-12%2C%2090562%20Kalchreuth!3m2!1d49.5589101!2d11.1347962!5e0!3m2!1sde!2sde!4v1594581003996!5m2!1sde!2sde" tabindex="0" aria-hidden="false" allowfullscreen="" width="600" height="450" frameborder="0" style="border: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äßigem 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>
Close Project
Schließen
</button>
</div>
</div>
@ -474,58 +640,29 @@ @@ -474,58 +640,29 @@
</div>
</div>
</div>
<!-- Modal 5-->
<div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<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">
<!-- Project Details Go Here-->
<h2 class="text-uppercase">Project Name</h2>
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
<img class="img-fluid d-block mx-auto" src="assets/img/portfolio/05-full.jpg" alt="" />
<p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
<ul class="list-inline">
<li>Date: January 2020</li>
<li>Client: Southwest</li>
<li>Category: Website Design</li>
</ul>
<button class="btn btn-primary" data-dismiss="modal" type="button">
<i class="fas fa-times mr-1"></i>
Close Project
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal 6-->
<div class="portfolio-modal modal fade" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true">
<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">
<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">
<div class="modal-body bg-light">
<!-- Project Details Go Here-->
<h2 class="text-uppercase">Project Name</h2>
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
<img class="img-fluid d-block mx-auto" src="assets/img/portfolio/06-full.jpg" alt="" />
<p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
<ul class="list-inline">
<li>Date: January 2020</li>
<li>Client: Window</li>
<li>Category: Photography</li>
</ul>
<h2 class="text-uppercase">Wir brauchen noch eine Unterkunft!</h2>
<p class="item-intro text-muted">Wir empfehlen euch, an unser 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 weieter Zimmer für euch geblockt.
Solltet ihr noch nach einer Unterkunft suchen, um nach der Party keinen Heimweg mehr zu haben, können wir euch die Zimmer beim Roten Ochen wärmlichst empfhelen.
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>
Close Project
Schließen
</button>
</div>
</div>
@ -534,6 +671,8 @@ @@ -534,6 +671,8 @@
</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>

Loading…
Cancel
Save