Last active
December 11, 2015 22:29
-
-
Save goldsmith/4670248 to your computer and use it in GitHub Desktop.
CourseGraph "grid"
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> | |
<head> | |
<title>Grid</title> | |
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"> | |
<link href='http://fonts.googleapis.com/css?family=Arvo|PT+Sans|Kreon|Crete+Round' rel='stylesheet' type='text/css'> | |
<style type="text/css"> | |
body { | |
background-image: url("http://subtlepatterns.com/patterns/project_papper_@2X.png") | |
} | |
a:hover { | |
text-decoration: none; | |
} | |
.wrapper { | |
width: 50%; | |
margin: 0 auto; | |
} | |
#header { | |
padding: 50px 0; | |
} | |
#logo { | |
position: relative; | |
} | |
#logo a span { | |
font-family: 'Crete Round'; | |
font-size: 4em; | |
text-decoration: none; | |
text-shadow: 1px 1px 1px black; | |
} | |
#menu { | |
position: relative; | |
margin: -20px 0 0 0; | |
} | |
#menu { | |
font-size: 1.25em; | |
} | |
#intro { | |
width: 100%; | |
height: 350px; | |
} | |
#introi { | |
padding: 10px 35px 0 40px; | |
height: 100%; | |
} | |
#introl { | |
float: left; | |
width: 45%; | |
padding-left: 10px; | |
} | |
#introl h1 { | |
margin-bottom: 30px; | |
font-family: 'Crete Round', serif; | |
font-size: 44.5px; | |
} | |
#introimg { | |
background-image: url("http://placehold.it/400x300&text=Screenshot"); | |
width: 400px; | |
height: 100%; | |
float: right; | |
} | |
#main { | |
margin: 60px auto; | |
width: 100%; | |
} | |
.feature-block { | |
position: relative; | |
display: inline-block; | |
height: 400px; | |
width: 25%; | |
font-size: 1.2em; | |
line-height: 1.4em; | |
} | |
.feature-block h2 { | |
display: inline-block; | |
text-align: center; | |
margin-bottom: 20px; | |
} | |
#mainc { | |
margin-right: 12%; | |
margin-left: 12%; | |
} | |
.feature-block img { | |
width: 100%; | |
height: 200px; | |
} | |
</style> | |
</head> | |
<body> | |
<!-- <div id="grid"> --> | |
<div class="wrapper"> | |
<div id="header"> | |
<div id="logo"> | |
<a href="#"><span>CourseGraph</span></a> | |
</div> | |
<ul id="menu" class="nav-pills pull-right"> | |
<li class="active"><a href="#">Home</a></li> | |
<li><a href="#">Graph</a></li> | |
<li><a href="#">Connect</a></li> | |
</ul> | |
</div> | |
<div id="intro"> | |
<div id="introi"> | |
<div id="introl"> | |
<h1>All your education <br />in one place.</h1> | |
<p class="lead">CourseGraph lets you create a record of every course you've taken, at anywhere from Caltech to Coursera.</p> | |
<a href="#" class="btn btn-large btn-primary">Start building your CourseGraph</a> | |
</div> | |
<div id="introimg"></div> | |
</div> | |
</div> | |
<div id="main"> | |
<div id="mainl" class="feature-block pull-left"> | |
<h2>Connect With Learners</h2> | |
<img src="http://placehold.it/200x210&text=Screenshot"> | |
</div> | |
<div id="mainc" class="feature-block"> | |
<h2>Discover New Classes</h2> | |
<img src="http://placehold.it/200x210&text=Screenshot"> | |
</div> | |
<div id="mainr" class="feature-block pull-right"> | |
<h2>Find a Great Job</h2> | |
<img src="http://placehold.it/200x210&text=Screenshot"> | |
</div> | |
</div> | |
</div> | |
<!-- </div> --> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment