fresh

index.html

@@ -44,6 +44,7 @@ <h1 class="grid_12">
 							<div class="uibutton red"></div>
 							<div class="uibutton yellow"></div>
 							<div class="uibutton green"></div>
+							<div class="uibutton white"></div>
 							<div class="window">
 								<div class="logo">
 									<i>b</i><i>i</i><i>k</i><i>e</i><i>shop</i>
@@ -77,7 +78,7 @@ <h1 class="grid_12">
 									<div class="line"></div>
 									<div class="line"></div>
 								</div>
-								<div class="review">
+								<div class="review short">
 									<img class="photo" src="img/head.png">
 									<div class="stars">
 										<img src="img/star.png">
@@ -88,7 +89,6 @@ <h1 class="grid_12">
 									<div class="line"></div>
 									<div class="line"></div>
 									<div class="line"></div>
-									<div class="line"></div>
 								</div>
 								<div class="review">
 									<img class="photo" src="img/head.png">
@@ -104,7 +104,7 @@ <h1 class="grid_12">
 									<div class="line"></div>
 									<div class="line"></div>
 								</div>
-								<div class="review">
+								<div class="review short">
 									<img class="photo" src="img/head.png">
 									<div class="stars">
 										<img src="img/star.png">
@@ -116,7 +116,6 @@ <h1 class="grid_12">
 									<div class="line"></div>
 									<div class="line"></div>
 									<div class="line"></div>
-									<div class="line"></div>
 								</div>
 								<div class="review">
 									<img class="photo" src="img/head.png">
@@ -132,12 +131,59 @@ <h1 class="grid_12">
 									<div class="line"></div>
 								</div>
 							</div>
+							<div class="cnvrt">
+								<div class="item fanCount big">9</div>
+								<div class="item fanCount caption">people bought this bike</div>
+								<div class="close"></div>
+								<div class="downarrow"></div>
+							</div>
+							<img class="mouse" src="img/mouse.png"></img>
+
+						</div>
+
+						<div class="ctacontainer">
+							<button class="calltoaction">Get CNVRT now</button>
 						</div>
 					</div>
 				</div>
 			</div>
 		</div>
 
+		<div id="featureicons">
+			<div class="container_12">
+				<h1 class="grid_12">CNVRT improves your conversions<span class="underscore">_</span></h1>
+				<div class="spacer empty"></div>
+				<div class="circle">lads</div>
+				<div class="arrow"><img src="img/arrow.png"></div>
+				<div class="circle">lads</div>
+				<div class="arrow"><img src="img/arrow.png"></div>
+				<div class="circle">
+					<div class="graphcaption"></div>
+				</div>
+				<div class="spacer empty"></div>
+			</div>
+		</div>
+
+		<div id="featurelist">
+			<div class="container_12">
+				<ul class="grid_12">
+					<li>
+						One line of code<span class="underscore">_</span>
+					</li>
+					<li>
+						Automatic colour coding<span class="underscore">_</span>
+					</li>
+					<li>
+						Enhanced analytics<span class="underscore">_</span>
+					</li>
+					<li class="ctacontainer">
+						<button class="calltoaction">Get CNVRT now</button>
+						<button class="calltoaction grey">Contact us</button>
+					</li>
+				</ul>
+			</div>
+		</div>
+
 		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 		<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.2.min.js"><\/script>')</script>
 		<script src="js/plugins.js"></script>

js/main.js

@@ -1,10 +1,8 @@
-var entries = ["bookings","sales","donations"];
+var entries = ["bookings","sales","users","donations","audience","subscribers"];
 var entrypos = 0;
 var stringpos = 0;
 
 function loop(string, callback){
-	console.log("hey");
-
 	if(stringpos == string.length){
 		callback();
 		return;
@@ -20,6 +18,7 @@ function loop(string, callback){
 
 function cycle(instantly){
 	if(instantly){
+		$(".graphcaption").html(entries[entrypos]);
 		loop(entries[entrypos], function(){
 			cycle();
 		});
@@ -30,11 +29,47 @@ function cycle(instantly){
 
 		setTimeout(function(){
 			$(".subject").html("");
+			$(".graphcaption").html(entries[entrypos]);
 			loop(entries[entrypos], function(){
 				cycle();
 			});
 		}, 2000);
 	}
 }
 
-cycle(true);
+cycle(true);
+
+function animation(){
+	var obj = $(".mac .window");
+	var scrollheight = obj[0].scrollHeight;
+	var midway = scrollheight/2;
+
+	$(".cnvrt").fadeIn(400, function(){
+		$(".cnvrt").addClass("pulsate");
+		obj.animate({scrollTop: scrollheight,opacity:0.2}, 1400, function(){
+			obj.find("button").addClass("pulsate");
+			setTimeout(function(){
+				obj.animate({scrollTop:0,opacity:1},700);
+
+				$(".mouse").fadeIn(200).animate({top:275,left:520},1400, function(){
+					setTimeout(function(){
+						obj.find("button").removeClass("pulsate").addClass("active");
+						setTimeout(function(){
+							obj.find("button").removeClass("active");
+							$(".mouse").fadeOut(1000, function(){
+								$(".mouse").css({
+									"top":"",
+									"left":"",
+								});
+								setTimeout(animation, 1000);
+							});
+							$(".cnvrt").fadeOut(1000).removeClass("pulsate");
+						},1000);
+					}, 1600);
+				});
+			}, 4000);
+		});
+	});
+}
+
+setTimeout(animation, 1000);