Added header. Also added media query for mobile devices

rajdole · Feb 29, 2012 · 77bd94f · 77bd94f
1 parent bf4b45a
commit 77bd94f
Show file tree

Hide file tree

Showing 2 changed files with 96 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -2,11 +2,27 @@
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+<meta name="viewport" content="width = device-width">
 <title>fleX</title>
+<link href='http://fonts.googleapis.com/css?family=Lobster+Two:700' rel='stylesheet' type='text/css'>
 <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8">
 </head>
 <body>
 	<div class="container clearfix">
+		<div id="header" class="grid-12">
+			<div class="blogTitle grid-8">
+				<h1>fleX</h1>
+				<h2>One framework to rule them all</h2>
+			</div>
+
+			<ul class="blogLinks grid-4">
+				<li><a href="#">Home</a></li>
+				<li><a href="#">About</a></li>
+				<li><a href="#">Misc</a></li>
+			</ul>
+
+		</div>
+
 		<div class="grid-3">
 			<h1>3</h1>
 		</div>

diff --git a/style.css b/style.css
@@ -3,9 +3,9 @@ body {
 	}
 
 	h1 {
-		border: 1px solid #000;
+		/*border: 1px solid #000;
 		text-align: center;
-		padding: 10px;
+		padding: 10px;*/
 	}
 
 /* CLEARFIX */
@@ -40,4 +40,81 @@ body {
 	margin-right: 0.83333333333333%;
 	float: left;
 	display: block;
-}
+}
+
+/* STYLING OF TEMPLATE STARTS HERE */
+
+body {
+	background: #f5f5f5;
+}
+
+.container {
+	background: #fff;
+	border: 1px solid #bfbfbf;
+}
+
+#header {
+	border-bottom: 1px solid #bfbfbf;
+}
+
+.blogTitle h1 {
+		font-family: 'Lobster Two', cursive;
+}
+
+@media only screen
+and (max-width : 480px) {
+
+	#header {
+		border: 0;
+	}
+
+	.blogTitle {
+		width: 100%
+	}
+
+	.blogTitle h1 {
+		font-size: 4.5em;
+		line-height: 1.5em;
+		text-align: center;
+		margin: 0.16em 0;
+	}
+
+	.blogTitle h2 {
+		font-size: 1em;
+		color: #686868;
+		text-align: center;
+		text-transform: uppercase;
+	}
+
+	ul.blogLinks {
+		width: 100%;
+		background: #111;
+		text-align: center;
+
+	}
+
+	ul.blogLinks li a {
+		display: block;
+		color: #fff;
+		font-size: 0.8em;
+		font-weight: bold;
+		text-transform: uppercase;
+		text-decoration: none;
+		padding: 10px;
+	}
+
+	ul.blogLinks li a:active {
+		background: #c23c32;
+	}
+}
+
+
+ul.blogLinks {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+
+ul.blogLinks li {
+	display: inline-block;
+}