A Pen by A Non Ymous on CodePen.
A Pen by Anonasaurus Rex.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html lang="en"> | |
<head> | |
<meta charset="utf-8" /> | |
<title>Best Startup Case Studies in Town</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
<!-- stylesheets --> | |
<link rel="stylesheet" type="text/css" href="css/normalize.css" media="screen"> | |
<link rel="stylesheet" href="css/grid.css" type="text/css" /> | |
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'> | |
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'> | |
<link rel="stylesheet" href="css/style.css" type="text/css" /> | |
<!-- javascripts --> | |
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> | |
</head> | |
<body> | |
<div id="header_container"> | |
<div id="header" class="container clearfix"> | |
<div id="logo" class="grid-2 alpha"> | |
<p><a href="#" class="logo">CASE<span>STUDIES</span></a></p> | |
</div> | |
<div class="grid-4 omega"> | |
<ul class="nav"> | |
<li><a href="#">About</a></li> | |
<li><a href="#">Who is behind this?</a></li> | |
<li><a href="#">Contact me</a></li> | |
</ul> | |
</div> | |
</div> | |
</div> | |
<div id="intro" class="grid-6"> | |
<h1>Lifechanging case studies for your startup</h1> | |
<p class="intro">One of the fastest ways to success is learning from others who have done it. I've compiled a list of the<br> | |
best <span>business, marketing & growth hacking</span> case studies studies for your team to use.</p> | |
<div id="button"> | |
<p><a href="#" class="btn">Read the best</a></p> | |
</div> | |
<p class="txt-btn">...or explore the categories below.</p> | |
</div> | |
<div id="content"> | |
<div class="grid-2 alpha"> | |
<h3>Business</h3> | |
<p>This is a little paragraph about <br> | |
some shit I need to write about</p> | |
<p><a href="#" class="small-btn">Explore Business</a></p> | |
</div> | |
<div class="grid-2"> | |
<h3>Marketing</h3> | |
<p>This is a little paragraph about <br> | |
some shit I need to write about</p> | |
<p><a href="#" class="small-btn">Explore Marketing</a></p> | |
</div> | |
<div class="grid-2 omega"> | |
<h3>Growth Hacking</h3> | |
<p>This is a little paragraph about <br> | |
some shit I need to write about</p> | |
<p><a href="#" class="small-btn">Explore Growth Hacking</a></p> | |
</div> | |
</div> | |
<div id="copyright" class="grid-full"> | |
<p>© Fuck Copyrights. All Rights Not Reserved</p> | |
</div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
font-family: 'Lato', sans-serif; | |
color: #FFFFFF; | |
background: #E2D5B6; | |
} | |
a { | |
text-decoration: none; | |
color: #E2D5B6; | |
text-transform: uppercase; | |
} | |
a.small-btn { | |
color: #FFFFFF; | |
background: #337E8D; | |
font-size: 0.7em; | |
padding: 10px 20px; | |
border-radius: 8px; | |
text-transform: none; | |
} | |
h1 { | |
font-size: 2.5em; | |
letter-spacing: -1.5px; | |
font-color: #D8DEE6; | |
padding: 50px 0px 10px 0; | |
margin: 0 0 0 0; | |
text-align: center; | |
} | |
h3 { | |
} | |
p.intro { | |
font-size: 1.3em; | |
color: #FFFFFF; | |
text-align: center; | |
padding-bottom: 10px; | |
} | |
p.txt-btn { | |
font-size: 0.7em; | |
color: #FFFFFF; | |
text-align: center; | |
padding-bottom: 35px; | |
} | |
span { | |
font-weight: bold; | |
} | |
ul.nav { | |
float: right; | |
list-style: none; | |
padding-right: 70px; | |
padding-bottom: 10px; | |
} | |
ul.nav li { | |
float: left; | |
margin-right: 40px; | |
} | |
.btn { | |
color: #FFFFFF; | |
background: #337E8D; | |
padding: 15px 30px; | |
border-radius: 10px; | |
text-transform: uppercase; | |
width: 120px; | |
margin: 0 auto; | |
display: block; | |
} | |
.btn:hover { | |
background-color: #372146; | |
} | |
#logo { | |
float: left; | |
padding-left: 70px; | |
vertical-align: middle; | |
} | |
#header_container { | |
height: 100%; | |
clear: both; | |
background-color: #337E8D; | |
} | |
#intro { | |
background-color: #91B5A8; | |
} | |
#content { | |
background-color: #91B5A8; | |
width: 820px; | |
margin-left: auto; | |
margin-right: auto; | |
text-align: center; | |
} | |
#copyright { | |
padding: 10px 0px 0px 0px; | |
margin: 15px 0px; | |
font-size: 0.7em; | |
text-align: center; | |
} | |
/*------------------------------------------------------------ | |
Style.css | |
Created by: Dave Rupert | |
Contact: http://github.com/davatron5000/foldy960 | |
Copyright 2012 | |
License: WTFPL + "Not going to maintain this because | |
the rent is too damn high licence." | |
--------------------------------------------------------------*/ | |
/* Responsive Resets | |
-------------------------------------------------------------- */ | |
@-o-viewport { | |
width: device-width; | |
} | |
@-ms-viewport { | |
width: device-width; | |
} | |
@viewport { | |
width: device-width; | |
} | |
html { | |
overflow-y: auto; | |
} | |
img, | |
audio, | |
video, | |
canvas { | |
max-width: 100%; | |
} | |
/* Grid > 6 Column Mobile First | |
-------------------------------------------------------------- */ | |
.container { | |
/* | |
The `max-width` property is the width governer. I dare you to experiment | |
with setting this larger, something like 1280px. | |
*/ | |
max-width: 1280px; | |
width: 92%; | |
margin:0px auto; | |
position: relative; | |
} | |
.row { | |
clear: both; | |
} | |
@media screen and (min-width: 480px) { | |
.container { | |
width: 100%; | |
} | |
.grid-1, | |
.grid-2, | |
.grid-3, | |
.grid-4, | |
.grid-5, | |
.grid-6, | |
.grid-half, | |
.grid-full, | |
.grid-unit { | |
float: left; | |
width:100%; | |
} | |
.gallery .grid-unit, | |
.grid-half { | |
width:46.969696969697%; | |
} | |
.grid-flow-opposite{ | |
float:right | |
} | |
} | |
@media screen and (min-width: 640px) { | |
.grid-1 { width: 13.636363636364%; } | |
.grid-2 { width: 30.30303030303%; } | |
.grid-3, | |
.grid-half { width: 46.969696969697%; } | |
.grid-4 { width: 63.636363636364%; } | |
.grid-5 { width: 80.30303030303%; } | |
.grid-6, | |
.grid-full { width: 100%; } | |
.gallery .grid-unit { | |
width: 30.30303030303%; | |
} | |
} | |
/* Micro Clearfix - http://nicolasgallagher.com/micro-clearfix-hack/ | |
For best results, use your favorite clearfix here. | |
-------------------------------------------------------------- */ | |
.cf:before, .cf:after { content:""; display:table; } | |
.cf:after { clear:both; } | |
.cf { zoom:1; } /* For IE 6/7 (trigger hasLayout) */ | |
/* Helpers | |
-------------------------------------------------------------- */ | |
.show-grid div[class*='grid-'] { | |
background-color: #eee; | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
display: block; | |
padding: 0.5em 1em; | |
margin-bottom: 1em; | |
text-align: center; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment