Skip to content

Instantly share code, notes, and snippets.

Created January 17, 2014 19:45
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save anonymous/8480111 to your computer and use it in GitHub Desktop.
A Pen by Anonasaurus Rex.
<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>&copy; Fuck Copyrights. All Rights Not Reserved</p>
</div>
</body>
</html>
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