Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Added header. Also added media query for mobile devices

  • Loading branch information...
commit 77bd94f98cc4daec998af5334cd8bf8036f0d5ab 1 parent bf4b45a
Pushkraj Dole authored
Showing with 96 additions and 3 deletions.
  1. +16 −0 index.html
  2. +80 −3 style.css
16 index.html
View
@@ -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>
83 style.css
View
@@ -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;
+}
Please sign in to comment.
Something went wrong with that request. Please try again.