Hey, da mir etwas langweilig war habe ich auf die schnelle mal eine kleine Fullvideo-background Splashpage und ein Modal gecoded.
Der Name "Awesome" ist nur weil ich das Barney Stinson Video genommen habe und ich irgendeinen Namen dafür brauchte.
Die page ist komplett selbst geschrieben und es wurden bis auf JQuery keine Frameworks genutzt.
HTML: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Awesome - SplashPage - Modal</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div class="container">
<video autoplay="true" muted loop> <!-- Rechte des Videos liegen nicht bei mir sondern bei HWIMYM und folgendem Youtube Link: https://www.youtube.com/watch?v=ZzCyD5n3ct8 -->
<source src="media/Barney%20Stinson%20-%20Awesome%20CV.mp4" type="video/mp4">
<source src="media/Barney_Stinson_-_Awesome_CV.webm" type="video/webm">
</video>
<div class="content">
<h1><span>Are you</span></h1>
<h1><span>Awesome?</span></h1>
<a class="cta">Learn more ></a>
</div>
</div>
<div class="overlay">
<div class="modal">
<div class="close-btn">
X
</div>
<div class="text-box">
<p class="lead">Wanna be Awesome?</p>
<p>If you wanna be awesome, we have some tips and tricks for you! Its pretty easy. Easier than you can imagine</p>
</div>
<div class="graphic">
</div>
<form action="">
<input type="text" placeholder="Email Adress">
<input type="submit">
</form>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(".cta").click(function(){
$(".overlay").addClass('is-open');
return false;
});
$(".close-btn").click(function(){
$(".overlay").removeClass('is-open');
});
</script>
</body>
</html>//EDITS:
18.06.2016 - 14:25 : DL berichtigt (Link war falsch)