Gulum/weddingapiPage
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Responsive guest add

Browse Source
This commit is contained in:
Julian
2022-02-05 15:06:57 +01:00
parent b051610da1
commit 80e999c142
3 changed files with 153 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
css/style.css
View File

@@ -1128,6 +1128,46 @@ form label {
} }
} }
.plus-button
{
text-align: center;
}
.plus-button .icon
{
width: 70px;
height: 70px;
background:#F14E95;
display: table;
text-align: center;
margin: 0 auto 30px auto;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
}
.plus-button .icon i
{
display: table-cell;
vertical-align: middle;
height: 70px;
font-size: 40px;
line-height: 40px;
color: #efefef;
}
.plus-button p, .feature-center h3 {
margin-bottom: 30px;
}
.plus-button h3 {
text-transform: uppercase;
font-size: 18px;
color: #5d5d5d;
}
.feature-center { .feature-center {
text-align: center; text-align: center;
padding-left: 20px; padding-left: 20px;
@@ -1141,7 +1181,8 @@ form label {
margin-bottom: 50px; margin-bottom: 50px;
} }
} }
.feature-center .icon { .feature-center .icon
{
width: 90px; width: 90px;
height: 90px; height: 90px;
background: #efefef; background: #efefef;

205
index.html
View File

@@ -2,8 +2,11 @@
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[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 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <!--[if gt IE 8]><!-->
<head> <html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hochzeit &mdash; 100% Free Fully Responsive HTML5 Template by FREEHTML5.co</title> <title>Hochzeit &mdash; 100% Free Fully Responsive HTML5 Template by FREEHTML5.co</title>
@@ -12,7 +15,7 @@
<meta name="keywords" content="free html5, free template, free bootstrap, html5, css3, mobile first, responsive" /> <meta name="keywords" content="free html5, free template, free bootstrap, html5, css3, mobile first, responsive" />
<meta name="author" content="FREEHTML5.CO" /> <meta name="author" content="FREEHTML5.CO" />
<!-- <!--
////////////////////////////////////////////////////// //////////////////////////////////////////////////////
FREE HTML5 TEMPLATE FREE HTML5 TEMPLATE
@@ -26,20 +29,21 @@
////////////////////////////////////////////////////// //////////////////////////////////////////////////////
--> -->
<!-- Facebook and Twitter integration --> <!-- Facebook and Twitter integration -->
<meta property="og:title" content=""/> <meta property="og:title" content="" />
<meta property="og:image" content=""/> <meta property="og:image" content="" />
<meta property="og:url" content=""/> <meta property="og:url" content="" />
<meta property="og:site_name" content=""/> <meta property="og:site_name" content="" />
<meta property="og:description" content=""/> <meta property="og:description" content="" />
<meta name="twitter:title" content="" /> <meta name="twitter:title" content="" />
<meta name="twitter:image" content="" /> <meta name="twitter:image" content="" />
<meta name="twitter:url" content="" /> <meta name="twitter:url" content="" />
<meta name="twitter:card" 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=Work+Sans:400,300,600,400italic,700' rel='stylesheet'
type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Sacramento" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Sacramento" rel="stylesheet">
<!-- Animate.css --> <!-- Animate.css -->
<link rel="stylesheet" href="css/animate.css"> <link rel="stylesheet" href="css/animate.css">
<!-- Icomoon Icon Fonts--> <!-- Icomoon Icon Fonts-->
@@ -64,88 +68,101 @@
<script src="js/respond.min.js"></script> <script src="js/respond.min.js"></script>
<![endif]--> <![endif]-->
</head> </head>
<body>
<body>
<div class="fh5co-loader"></div> <div class="fh5co-loader"></div>
<div id="page"> <div id="page">
<nav class="fh5co-nav" role="navigation"> <nav class="fh5co-nav" role="navigation">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-xs-2"> <div class="col-xs-2">
<div id="fh5co-logo"><a href="index.html">Hochzeit<strong>.</strong></a></div> <div id="fh5co-logo"><a href="index.html">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>Wir werden heiraten!</h2>
<div class="simply-countdown simply-countdown-one"></div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</header>
</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 id="fh5co-started">
<div class="overlay"></div> <div class="container">
<div class="container"> <div class="row animate-box">
<div class="row"> <div class="col-md-8 col-md-offset-2 text-center fh5co-heading">
<div class="col-md-8 col-md-offset-2 text-center"> <h2>Nimmst du Teil?</h2>
<div class="display-t"> <p>Bitte gebt uns mit folgendem Formular bis zum 03.03.2022 bescheid ob ihr könnt oder nicht!
<div class="display-tc animate-box" data-animate-effect="fadeIn"> </p>
<h1>Draga &amp; Julian</h1> </div>
<h2>Wir werden heiraten!</h2> </div>
<div class="simply-countdown simply-countdown-one"></div> <div class="row animate-box">
<p><a href="#" class="btn btn-default btn-sm">Save the date</a></p> <div class="col-md-10">
<form class="form-inline">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label for="name" class="sr-only">Name</label>
<input type="name" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label for="email" class="sr-only">Email</label>
<input type="email" class="form-control" id="email" placeholder="Email">
</div>
</div>
</form>
</div>
<div class="plus-button col-md-2">
<span class="icon">
<i class="icon-plus"></i>
</span>
</div>
</div>
<div class="row animate-box">
<div class="col-md-4 col-md-offset-4 text-center fh5co-heading">
<button type="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 class="feature-center">
<span class="icon">
<i class="icon-users"></i>
</span>
<span class="counter js-counter" data-from="0" data-to="500" data-speed="5000"
data-refresh-interval="50">1</span>
<span class="counter-label">Geschätzte Gäste</span>
</div> </div>
</div> </div>
</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>Nimmst du Teil?</h2>
<p>Bitte gebt uns mit folgendem Formular bis zum 03.03.2022 bescheid ob ihr könnt oder nicht!</p>
</div>
</div>
<div class="row animate-box">
<div class="col-md-10 col-md-offset-1">
<form class="form-inline">
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label for="name" class="sr-only">Name</label>
<input type="name" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label for="email" class="sr-only">Email</label>
<input type="email" class="form-control" id="email" placeholder="Email">
</div>
</div>
<div class="col-md-4 col-sm-4">
<button type="submit" class="btn btn-default btn-block">Absenden</button>
</div>
<div class="feature-center">
<span class="icon">
<i class="icon-users"></i>
</span>
<span class="counter js-counter" data-from="0" data-to="500" data-speed="5000" data-refresh-interval="50">1</span>
<span class="counter-label">Estimated Guest</span>
</div>
</form>
</div>
</div>
</div>
</div>
</div> </div>
<div class="gototop js-top"> <div class="gototop js-top">
<a href="#" class="js-gotop"><i class="icon-arrow-up"></i></a> <a href="#" class="js-gotop"><i class="icon-arrow-up"></i></a>
</div> </div>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery.min.js"></script> <script src="js/jquery.min.js"></script>
<!-- jQuery Easing --> <!-- jQuery Easing -->
@@ -171,24 +188,24 @@
<script src="js/main.js"></script> <script src="js/main.js"></script>
<script> <script>
var d = new Date(2022, 7, 1, 14, 0, 0); var d = new Date(2022, 7, 1, 14, 0, 0);
// default example // default example
simplyCountdown('.simply-countdown-one', { simplyCountdown('.simply-countdown-one', {
year: d.getFullYear(), year: d.getFullYear(),
month: d.getMonth() + 1, month: d.getMonth() + 1,
day: d.getDate() day: d.getDate()
}); });
//jQuery example //jQuery example
$('#simply-countdown-losange').simplyCountdown({ $('#simply-countdown-losange').simplyCountdown({
year: d.getFullYear(), year: d.getFullYear(),
month: d.getMonth() + 1, month: d.getMonth() + 1,
day: d.getDate(), day: d.getDate(),
enableUtc: false enableUtc: false
}); });
</script> </script>
</body> </body>
</html>
</html>

1
js/main.js
View File

@@ -182,7 +182,6 @@
}; };
// Loading page // Loading page
var loaderPage = function() { var loaderPage = function() {
$(".fh5co-loader").fadeOut("slow"); $(".fh5co-loader").fadeOut("slow");