Update markup, add bg and a few minor styles

Update markup, add bg and a few minor styles.

Signed-off-by: Emanuele Feliziani <feliziani.emanuele@gmail.com>

Author: GioSensation

animation.scss

@@ -1,4 +1,15 @@
+$main: #938F8D;
+
 /**************************************************/
 /*************** animation specific ***************/
 /**************************************************/
 
+.congratulation-container {
+	color: white;
+}
+
+.congratulation-container__undo {
+	color: $main;
+	font-size: 12px;
+	margin-top: 15px;
+}

index.html

@@ -28,17 +28,18 @@
 	<header>
 		<a href="http://duplii.com" title="Duplii | We Make Duplication Happen"><img src="http://duplii.com/images/duplii-logo.svg" alt="Duplii | We Make Duplication Happen" class="logo" /></a>
 	</header>
-	
+	<div class="bg"></div>
+	<div class="bg bg-overlay"></div>
 	<div class="animation-container">
 		<div class="congratulation-container">
 			<div class="celebration-container">
 				<div class="bubble-container bubble-container--left" data-bubble-quantity="8"></div>
 				<div class="bubble-container bubble-container--right" data-bubble-quantity="8" data-bubble-align="right"></div>
 				<div class="vertically-center celebration-message">
-					<h2>Congratulations!</h1>
-					<h3>Woooo! You scored a sign-up. Keep going strong.</h2>
+					<h1 class="celebration-title">Congratulations!</h1>
+					<p class="celebration-body">Woooo! You scored a sign-up. Keep going strong.</p>
 					<button class="btn btn-orange btn-big modal-button--show-next">Confirm</button>
-					<a href="#">Ops, sorry. I got it wrong. Undo.</a>
+					<a href="#" class="congratulation-container__undo">Click here to undo.</a>
 				</div>
 			</div>
 		</div>

public/animation.css

@@ -1,3 +1,10 @@
 /**************************************************/
 /*************** animation specific ***************/
-/**************************************************/
+/**************************************************/
+.congratulation-container {
+  color: white; }
+
+.congratulation-container__undo {
+  color: #938F8D;
+  font-size: 12px;
+  margin-top: 15px; }

public/duplii-funnel-preview.png

@@ -24,3 +24,20 @@ a {
 
 .animation-container {
   margin: 70px auto 100px; }
+
+/* This simulates our background. It's blurred with css because I wanted to check whether this impacted performance. It looks like it's not a problem. */
+.bg {
+  position: fixed;
+  top: -30px;
+  left: -30px;
+  right: -30px;
+  bottom: -30px;
+  background-image: url('duplii-funnel-preview.png');
+  background-size: cover;
+  -webkit-filter: blur(7px);
+  z-index: -2; }
+
+.bg-overlay {
+  background-image: none;
+  background-color: rgba(0, 0, 0, 0.8);
+  z-index: -1; }

public/style.css

@@ -41,3 +41,21 @@ a {
 	margin: 70px auto 100px;
 }
 
+/* This simulates our background. It's blurred with css because I wanted to check whether this impacted performance. It looks like it's not a problem. */
+.bg {
+	position: fixed;
+	top: -30px;
+	left: -30px;
+	right: -30px;
+	bottom: -30px;
+	background-image: url('duplii-funnel-preview.png');
+	background-size: cover;
+	-webkit-filter: blur(7px);
+	z-index: -2;
+}
+
+.bg-overlay {
+	background-image: none;
+	background-color: rgba(0, 0, 0, .8);
+	z-index: -1;
+}