Skeleton clicky

css/style.css

@@ -1133,7 +1133,7 @@ form label {
   text-align: center;
 }
 
-.plus-button .icon 
+.plus-button a
 {
   width: 70px;
   height: 70px;
@@ -1147,13 +1147,11 @@ form label {
   border-radius: 50%;
 }
 
-
-
-.plus-button .icon i 
+.plus-button .icon a i
 {
   display: table-cell;
   vertical-align: middle;
-  height: 70px;
+  height: 60px;
   font-size: 40px;
   line-height: 40px;
   color: #efefef; 

index.html

@@ -96,7 +96,7 @@
 						<div class="display-t">
 							<div class="display-tc animate-box" data-animate-effect="fadeIn">
 								<h1>Draga &amp; Julian</h1>
-								<h2>Wir werden heiraten!</h2>
+								<h2>Wir werden am 01.07.2022 heiraten!</h2>
 								<div class="simply-countdown simply-countdown-one"></div>
 							</div>
 						</div>
@@ -110,30 +110,30 @@
 				<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>Bitte gebt uns mit folgendem Formular bis zum 03.03.2022 bescheid ob ihr könnt oder nicht! Falls nicht bitte einfach die Seite wieder verlassen. Die Feier wird in Frankfurt (DE) stattfinden.
 						</p>
 					</div>
 				</div>
 				<div class="row animate-box">
-					<div class="col-md-10">
+					<div id="attentants" 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">
+									<label for="firstname" class="sr-only">Vorname</label>
+									<input type="firstname" class="form-control" id="firstname" placeholder="Vorname">
 								</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">
+									<label for="lastname" class="sr-only">Nachname</label>
+									<input type="lastname" class="form-control" id="lastname" placeholder="Nachname">
 								</div>
 							</div>
 						</form>
 					</div>
 					<div class="plus-button col-md-2">
 						<span class="icon">
-							<i class="icon-plus"></i>
+							<a href="#" class="js-addField"><i class="icon-plus"></i></a> 
 						</span>
 					</div>
 				</div>

js/main.js

@@ -182,6 +182,33 @@
 	
 	};
 
+	var addField = function() {
+		$('.js-addField').on('click', function(event){
+			
+			event.preventDefault();
+
+			// Container <div> where dynamic content will be placed
+			var container = document.getElementById("attentants");
+			// Clear previous contents of the container
+			// while (container.hasChildNodes()) {
+			// 	container.removeChild(container.lastChild);
+			// }
+			//container.appendChild()
+
+			// Append a node with a random text
+			container.appendChild(document.createTextNode("Member"));
+			// // Create an <input> element, set its type and name attributes
+			// var input = document.createElement("input");
+			// input.type = "text";
+			// input.name = "member" + i;
+			// container.appendChild(input);
+			// // Append a line break 
+			// container.appendChild(document.createElement("br"));
+			
+			return false;
+		});
+	}
+
 	// Loading page
 	var loaderPage = function() {
 		$(".fh5co-loader").fadeOut("slow");
@@ -209,7 +236,7 @@
 
 	// Parallax
 	var parallax = function() {
-		$(window).stellar();
+		$(window).stellar({ horizontalScrolling: false });
 	};
 
 	
@@ -225,9 +252,8 @@
 		loaderPage();
 		counter();
 		counterWayPoint();
+		addField();
 	});
 
 
 }());
-
-$(window).stellar({ horizontalScrolling: false });