Files
weddingapiPage/index.html
2022-02-12 21:42:33 +01:00

243 lines
8.3 KiB
HTML

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hochzeit</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Free HTML5 Template by FREEHTML5.CO" />
<meta name="keywords" content="free html5, free template, free bootstrap, html5, css3, mobile first, responsive" />
<meta name="author" content="FREEHTML5.CO" />
<!--
//////////////////////////////////////////////////////
FREE HTML5 TEMPLATE
DESIGNED & DEVELOPED by FREEHTML5.CO
Website: http://freehtml5.co/
Email: info@freehtml5.co
Twitter: http://twitter.com/fh5co
Facebook: https://www.facebook.com/fh5co
//////////////////////////////////////////////////////
-->
<!-- Facebook and Twitter integration -->
<meta property="og:title" content="" />
<meta property="og:image" content="" />
<meta property="og:url" content="" />
<meta property="og:site_name" content="" />
<meta property="og:description" content="" />
<meta name="twitter:title" content="" />
<meta name="twitter:image" content="" />
<meta name="twitter:url" content="" />
<meta name="twitter:card" content="" />
<link href='https://fonts.googleapis.com/css?family=Work+Sans:400,300,600,400italic,700' rel='stylesheet'
type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Sacramento" rel="stylesheet">
<!-- Animate.css -->
<link rel="stylesheet" href="css/animate.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="css/icomoon.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- Magnific Popup -->
<link rel="stylesheet" href="css/magnific-popup.css">
<!-- Owl Carousel -->
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="css/style.css">
<!-- sweetalert2 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.2.0/sweetalert2.min.css">
<!-- Modernizr JS -->
<script src="js/modernizr-2.6.2.min.js"></script>
<!-- FOR IE9 below -->
<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="fh5co-loader"></div>
<div id="page">
<nav class="fh5co-nav" role="navigation">
<div class="container">
<div class="row">
<div class="col-xs-2">
<div id="fh5co-logo"><a href="index.html" data-i18n="top_left_title">Hochzeit<strong>.</strong></a></div>
</div>
</div>
</div>
</nav>
<header id="fh5co-header" class="fh5co-cover" role="banner"
style="background-image:url(images/front.jpg); background-position-x: center;"
data-stellar-background-ratio="0.5">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 text-center">
<div class="display-t">
<div class="display-tc animate-box" data-animate-effect="fadeIn">
<h1>Draga &amp; Julian</h1>
<h2 data-i18n="welcoming_title">Wir werden am 01.07.2022 heiraten!</h2>
<div class="simply-countdown simply-countdown-one"></div>
</div>
</div>
</div>
</div>
</div>
</header>
<div id="fh5co-started">
<div class="container">
<div class="row animate-box">
<div class="col-md-8 col-md-offset-2 text-center fh5co-heading">
<h2 data-i18n="header_text">Nimmst du teil?</h2>
<p data-i18n="invitation_text">Liebe Gäste, zu unserer Hochzeit laden wir euch recht herzlich ein. Bitte gebt uns mit
folgendem Formular bis zum 03.03.2022 Bescheid, ob ihr teilnehmt! Über das Plus-Symbol könnt
ihr eure Begleitpersonen hinzufügen.
Falls ihr nicht teilnehmen könnt, bitte einfach die Seite wieder verlassen. Die Feier wird
in 55234 Kettenheim (DE)
stattfinden.
</p>
<p data-i18n="greetings">
Liebe Grüße<br/>
Draga & Julian
</p>
</div>
</div>
<div class="row animate-box" id="attentant-container">
<div class="col-md-10">
<form id="js-attentants" class="form-inline">
<div>
<div class="col-md-3 col-sm-3">
<div class="form-group">
<label for="firstname" class="sr-only">Vorname</label>
<input type="firstname" class="form-control js-form-input" id="firstname" data-i18n="firstname" data-i18n-attr="placeholder"
placeholder="Vorname">
</div>
</div>
<div class="col-md-3 col-sm-3">
<div class="form-group">
<label for="lastname" class="sr-only">Nachname</label>
<input type="lastname" class="form-control js-form-input" id="lastname" data-i18n="lastname" data-i18n-attr="placeholder"
placeholder="Nachname">
</div>
</div>
<div class="col-md-3 col-sm-3">
<div class="form-group">
<label for="tel" class="sr-only">Telefonnummer</label>
<input type="telephon" class="form-control js-form-input" id="tel" data-i18n="telephone_number" data-i18n-attr="placeholder"
placeholder="Telefonnummer">
</div>
</div>
<div class="col-md-3 col-sm-3">
<div class="form-group">
<label for="email" class="sr-only">E-Mail Addresse</label>
<input type="email" class="form-control js-form-input" id="email" data-i18n="E-Mail" data-i18n-attr="placeholder"
placeholder="E-Mail">
</div>
</div>
</div>
</form>
</div>
<div class="plus-button col-md-2">
<span class="icon">
<a href="#" class="js-addField"><i class="icon-plus"></i></a>
</span>
</div>
</div>
<div class="row animate-box overnight" id="overnight-div">
<input class="overnight-js" type="checkbox" name="overnight" checked>
<label for="overnight">Braucht Ihr einen Schlafplatz?</label>
</div>
<div class="row animate-box">
<div class="col-md-4 col-md-offset-4 text-center fh5co-heading">
<button type="submit" id="js-submitbtn" data-i18n="submit" class="btn btn-default btn-block">Absenden</button>
</div>
</div>
<div class="row animate-box" style="margin-top: 50px;">
<div class="col-md-8 col-md-offset-2 text-center fh5co-heading">
<div id="guest_counter_holder" class="feature-center">
<span class="icon">
<i class="icon-users"></i>
</span>
<span id="guest_counter" class="counter js-counter" data-from="0" data-to="500" data-speed="5000"
data-refresh-interval="50">1</span>
<span class="counter-label" data-i18n="guest_count">Geschätzte Gäste</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="gototop js-top">
<a href="#" class="js-gotop"><i class="icon-arrow-up"></i></a>
</div>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="js/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- Waypoints -->
<script src="js/jquery.waypoints.min.js"></script>
<!-- Carousel -->
<script src="js/owl.carousel.min.js"></script>
<!-- countTo -->
<script src="js/jquery.countTo.js"></script>
<!-- Stellar -->
<script src="js/jquery.stellar.min.js"></script>
<!-- Magnific Popup -->
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/magnific-popup-options.js"></script>
<!-- Sweetalert2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.2.0/sweetalert2.min.js"></script>
<!-- // <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.js"></script> -->
<script src="js/simplyCountdown.js"></script>
<!-- Main -->
<script src="js/main.js"></script>
<script>
var d = new Date(2022, 7, 1, 14, 0, 0);
// default example
simplyCountdown('.simply-countdown-one', {
year: d.getFullYear(),
month: d.getMonth(),
day: d.getDate()
});
//jQuery example
// $('#simply-countdown-losange').simplyCountdown({
// year: d.getFullYear(),
// month: d.getMonth() + 1,
// day: d.getDate(),
// enableUtc: false
// });
</script>
</body>
</html>