Completed basic site yet to add links and also relevant contents

css/style.css

@@ -1,3 +1,196 @@
+
 body{
 	font-family: 'Open Sans', sans-serif;
+}
+@font-face {
+    font-family: Nevis;
+    src: url("../fonts/nevis.ttf");
+}
+@font-face {
+    font-family: Quadon;
+    src: url("../fonts/QuadonMedium.otf");
+}
+.thin-strip{
+	width:100%;
+	height:3px;
+	background-color:#fff;
+	position:fixed;
+	top:0px;
+	z-index: 9999;
+
+}
+#tabzilla{
+	right:15%;
+	z-index: 10000;
+	position:fixed;
+	top:3px;
+}
+.full-width{
+	min-width:100%;
+	max-width:100%;
+	width:100% !important;
+
+}
+.landing-div{
+	background: url(../img/landing1.jpg) no-repeat scroll center center / cover transparent;
+	background-color:#000;
+	width:100vw;
+	height:100vh;
+	position:relative;
+}
+section{
+	overflow-x:hidden;
+	position:relative;
+}
+.img-overlay{
+	width:100%;
+	height:100%;
+	position: absolute;
+	opacity:0.5;
+	background-color:#000;
+}
+.womoz-title{
+	position: absolute;
+	top:100px;
+	bottom:0px;
+	left:0px;
+	right:0px;
+	margin:auto;
+	height:auto;
+	width:auto;
+	text-align: center;
+
+}
+.womoz-title span{
+	font-size:80px;
+	/* color:#048C4C; */
+	color:#fff;
+	width:auto;
+	text-align: center;
+	width:100%;
+}
+.womoz-desc{
+	padding:50px 10px;
+
+}
+.womoz-desc h2{
+	font-family: "Nevis";
+}
+.womoz-desc p{
+	font-family: "Quadon";
+	font-size:20px;
+	font-weight: 500;
+	line-height: 2;
+	padding-top:20px;
+	text-align: center;
+}
+.padding-top-10{
+	padding-top:10px;
+}
+#section-3{
+	height:400px;
+	background: url(../img/landing.jpg) no-repeat scroll center center / cover transparent;
+	background-color: #100B0A;
+}
+.subscribe{
+	padding-top:60px;
+	font-family: "Nevis";
+	color:#fff;
+}
+.subscribe-form form{
+	padding:60px 0px;
+}
+.subscribe-form form input{
+	height:40px;
+	border-radius:6px;
+	border:none;
+}
+#section-4{
+	padding:50px 0px;
+}
+#section-4 .faq{
+	font-family: "Nevis";
+	color:#000;
+}
+#section-4 .question-div{
+	padding-top:30px;
+	font-weight:300;
+	font-size:20px;
+}
+.question-div .question-head{
+	color:#048C4C;
+}
+/* #section-5{
+	padding:0px;
+}
+#section-5>div{
+	position: relative;
+	height:300px;
+	background-color:#f5f5f5;
+}
+#section-5>div.symbol{
+	padding:0px;
+	border:none;
+}
+#secion-5>div.symbol .fa{
+	color:#fff;
+}
+#section-5>div.timer,#section-5>div.blog{
+	background: url(../img/landing.png) repeat scroll left center / 100% transparent;
+}
+#section-5 .symbol{
+	font-size:8em;
+}
+.time-text{
+	padding:0px;
+}
+.time-text h2,.blog-text h2{
+	font-family: "Nevis";
+	color:#000;
+	padding-bottom:10px;
+}
+.time-text .icon i,.blog-text .icon i{
+	font-size:6em;
+} */
+
+footer{
+	background-color:#565a5c;
+	padding:90px 0px;
+	font-size: 12px;
+}
+footer .copyright{
+	color:#bbb;
+
+}
+footer ul li{
+	list-style-type: none;
+	line-height: 1.2;
+}
+footer .medium-6{
+	padding:0px;
+}
+footer ul a{
+	font-size:12px;
+
+}
+@media only screen and (min-width: 64.063em) and (max-width: 90em) {
+}
+@media only screen and (min-width: 40.063em) and (max-width: 64em) {
+}
+@media only screen and (max-width: 40em){
+	.womoz-title{
+		top:50px;
+	}
+	.womoz-title span{
+		font-size:40px;
+	}
+	.subscribe-form form input[type="submit"]{
+		margin-top:20px;
+		width:40%;
+		margin-left:30%;
+		margin-left:30%;
+	}
+	footer .medium-6{
+		padding-top:15px;
+	}
 }

index.html

@@ -5,13 +5,128 @@
 	<title>Womoz Kerala | Mozilla Kerala</title>
 	<link href="https://www.mozilla.org/tabzilla/media/css/tabzilla.css" rel="stylesheet" />
 	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
-	<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
+	<link type="text/css" href="css/font-awesome.min.css" rel="stylesheet">
 	<link rel="stylesheet" type="text/css" href="css/foundation.min.css">
 	<link rel="stylesheet" type="text/css" href="css/style.css">
 	<script type="text/javascript" src="js/jquery.min.js"></script>
+	<script type="text/javascript" src="js/skrollr.js"></script>
 	<script src="https://www.mozilla.org/tabzilla/media/js/tabzilla.js"></script>
+	<script type="text/javascript" src="js/script.js"></script>
 </head>
 <body>
+	<div class="thin-strip"></div>
+	<section id="section-1" class="full-width row" >
 	<a href="http://www.mozilla.org/" id="tabzilla">mozilla</a>
+		<div class="landing-div" data-center="background-position: 50% 0px;"
+        data-top-bottom="background-position: 50% -150px;" data-anchor-target="#section-1">
+			<div class="img-overlay" data-top="background-color:rgb(0,0,0); opacity:0.2;" data-top-bottom="background-color:rgb(255,255,255); opacity:1;"></div>
+			<div class="womoz-title" data-100-top="opacity:1"
+                data-0-top="opacity: 0">
+                <div class="womoz-logo"><img src="img/logo.png"></div>
+                <span >WOMOZ KERALA</span></div>
+		</div>
+	</section>
+	<section id="section-2" class="full-width" data-0="background-color:rgb(255,255,255);"
+        data-top="background-color:(244,244,244);"
+        data-anchor-target="#section-2">
+        <div class="row">
+        	<div class="womoz-desc small-12 columns" >
+        	<h2 class="small-12 columns text-center">
+        		WHO IS WOMOZ?
+        	</h2>
+				<p class="small-12 ">Women &amp; Mozilla ("WoMoz") a community composed of members from different Open Source projects. We are mainly dedicated to improving women's visibility and involvement in Free/Open Source and Mozilla, and to increase the number of women contributors.<p>
+			</div>
+        </div>
+
+	</section>
+	<section id="section-3" class="full-width" data-center="background-position: 50% 0px;"
+        data-top-bottom="background-position: 50% -150px;" data-anchor-target="#section-3">
+		<div class="img-overlay"></div>
+		<h2 class="subscribe small-12 columns text-center">SUBSCRIBE TO US</h2>
+		<div class="small-12 columns subscribe-form">
+			<form class="small-12 medium-8 large-6 medium-offset-2 large-offset-3 columns">
+				<input type="text" class="small-12 medium-10 large-8 columns" placeholder="Enter Email">
+				<div class="small-12 medium-2 large-4 columns text-center">
+					<input type="submit" value="Subscribe" class="small-4 medium-12 columns">
+				</div>
+			</form>
+		</div>
+	</div>
+	</section>
+	<section id="section-4" class="row">
+		<h2 class="small-12 columns faq text-center">Frequently Asked Questions</h2>
+		<div class="question-div small-12 medium-6 large-6 columns">
+			<div class="small-12 question-wrapper">
+				<div class="small-12 question-head columns">
+					What is Mozilla?
+				</div>
+				<div class="small-12 question-body columns">
+				 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, magnam optio quidem. Aperiam, ab vel. Debitis sequi error dolore tempore, nisi magni fugiat repellat veritatis? Maiores dolorem fugiat dolores cupiditate.
+				</div>
+			</div>
+		</div>
+		<div class="question-div small-12 medium-6 large-6 columns">
+			<div class="small-12 question-wrapper">
+				<div class="small-12 question-head columns">
+					What is Mozilla?
+				</div>
+				<div class="small-12 question-body columns">
+				 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, magnam optio quidem. Aperiam, ab vel. Debitis sequi error dolore tempore, nisi magni fugiat repellat veritatis? Maiores dolorem fugiat dolores cupiditate.
+				</div>
+			</div>
+		</div>		
+	</section>
+	<!-- <section id="section-5" class="full-width row">
+		<div class="small-12 medium-6 large-3 columns timer">
+		</div>
+		<div class="small-12 medium-6 large-3 columns time-text">
+			<h2 class="small-12 columns text-center item-heading">Upcoming Event</h2>
+			<div class="icon small-12 columns text-center"><i class="fa fa-calendar-o"></i></div>
+			<div class="small-12 columns text-center date padding-top-10">
+				Date: 26<sup>th</sup> February 2015
+			</div>
+			<div class="small-12 columns text-center read-more-button padding-top-10">
+				<div class="button button-positive">More</div>
+			</div>
+		</div>
+		<div class="small-12 medium-6 large-3 columns blog">
+		</div>
+		<div class="small-12 medium-6 large-3 columns blog-text">
+			<h2 class="small-12 columns text-center item-heading">Blog</h2>
+			<div class="icon small-12 columns text-center"><i class="fa fa-comments-o"></i></div>
+			<div class="small-12 columns text-center read-more-button padding-top-10">
+				<div class="button button-positive">More</div>
+			</div>
+
+		</div>
+
+	</section> -->
+	<footer>
+		<div class="row">
+			<div class="small-12 medium-3 columns">
+				<div class="small-12 logo columns">
+					<img src="img/footer-mozilla-white.png">
+				</div>
+
+			</div>
+			<div class="small-12 medium-6 columns">
+				<div class="small-6 columns copyright">
+					The <a href="#">Mozilla Foundation</a> invites all others who support the principles of the Mozilla Manifesto to join with us, and to find new ways to make this vision of the Internet a reality.
+				</div>
+				<div class="small-6 columns">
+					<ul class="links">
+						<li><a href="#">Facebook</a></li>
+						<li><a href="#">Facebook Group</a></li>
+						<li><a href="#">Twitter</a></li>
+						<li><a href="#">Flickr</a></li>
+						<li><a href="#">Download Firefox</a></li>
+						<li><a href="#">Get Involved</a></li>
+					</ul>
+				</div>
+			</div>
+			<div class="small-12 medium-4 columns">
+			</div>
+		</div>
+	</footer>
 </body>
 </html>

js/script.js

@@ -0,0 +1,10 @@
+$(document).ready(function(){
+	var s = skrollr.init({
+        render: function(data) {
+            //Debugging - Log the current scroll position.
+            //console.log(data.curTop);
+        }
+    });
+
+})
+