Skip to content

Instantly share code, notes, and snippets.

/index.html

Created September 16, 2016 05:57
Show Gist options
  • Save anonymous/56c6b1fab72868e158838df30c978d20 to your computer and use it in GitHub Desktop.
Save anonymous/56c6b1fab72868e158838df30c978d20 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!-- Copy over your previous HTML code below-->
<html>
<head>
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,800" rel="stylesheet" type="text/css">
<title></title>
<style id="jsbin-css">
body {
font-size: 18px;
font-family: "Open Sans";
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
padding: .8em 0;
color: #fffebb;
border-bottom-color: #fffebb;
}
h1, h2 {
text-transform: uppercase;
border-bottom: 4px solid black;
display: inline-block;
font-weight: 800;
}
img {
display: block;
margin: 0 auto;
width: 480px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
footer {
text-align: center;
padding: 1em 0;
clear: both;
}
nav a {
text-decoration: none;
color: black;
margin: 1.8em;
}
nav {
font-size: 1.8em;
float: right;
display: inline-block;
}
div {
font-size: 1.2em;
width: 46%;
padding: 2%;
display: inline-block;
}
selection {
background-color: #222222;
color: white;
overflow: auto;
}
.about {
float: left;
}
.services {
float: right;
}
li {
float: left;
width: 50%;
height: 6em;
outline: 3px solid #222222;
text-align: center;
line-height: 6em;
color: black;
background: white;
}
#hero {
text-align: center;
background: #fffebb;
width: 100%;
margin: 0;
display: block;
}
</style>
</head>
<body>
<header>
<h1>ELK Web Design</h1>
<nav>
<a href="#">work</a>
<a href="#">about</a>
<a href="#">contact</a>
</nav>
<div id="hero">
<img src="http://i.imgur.com/pdsjjxD.jpg">
</div>
</header>
<selection>
<div class="about">
<h2>Who We Are</h2>
<p>Elk provides clean and innovative sites for small businesses, artists, and professionals.</p>
</div>
<div class="services">
<h2>What We Do</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Responsive</li>
<li>Visual Design</li>
</ul>
</div>
</selection>
<footer>
<p>© 2014 ELK</p>
</footer>
</html>
<script id="jsbin-source-css" type="text/css">body {
font-size: 18px;
font-family: "Open Sans";
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
padding: .8em 0;
color: #fffebb;
border-bottom-color: #fffebb;
}
h1, h2 {
text-transform: uppercase;
border-bottom: 4px solid black;
display: inline-block;
font-weight: 800;
}
img {
display: block;
margin: 0 auto;
width: 480px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
footer {
text-align: center;
padding: 1em 0;
clear: both;
}
nav a {
text-decoration: none;
color: black;
margin: 1.8em;
}
nav {
font-size: 1.8em;
float: right;
display: inline-block;
}
div {
font-size: 1.2em;
width: 46%;
padding: 2%;
display: inline-block;
}
selection {
background-color: #222222;
color: white;
overflow: auto;
}
.about {
float: left;
}
.services {
float: right;
}
li {
float: left;
width: 50%;
height: 6em;
outline: 3px solid #222222;
text-align: center;
line-height: 6em;
color: black;
background: white;
}
#hero {
text-align: center;
background: #fffebb;
width: 100%;
margin: 0;
display: block;
}</script>
Raw
jsbin.lugoca.css
body {
font-size: 18px;
font-family: "Open Sans";
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
padding: .8em 0;
color: #fffebb;
border-bottom-color: #fffebb;
}
h1, h2 {
text-transform: uppercase;
border-bottom: 4px solid black;
display: inline-block;
font-weight: 800;
}
img {
display: block;
margin: 0 auto;
width: 480px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
footer {
text-align: center;
padding: 1em 0;
clear: both;
}
nav a {
text-decoration: none;
color: black;
margin: 1.8em;
}
nav {
font-size: 1.8em;
float: right;
display: inline-block;
}
div {
font-size: 1.2em;
width: 46%;
padding: 2%;
display: inline-block;
}
selection {
background-color: #222222;
color: white;
overflow: auto;
}
.about {
float: left;
}
.services {
float: right;
}
li {
float: left;
width: 50%;
height: 6em;
outline: 3px solid #222222;
text-align: center;
line-height: 6em;
color: black;
background: white;
}
#hero {
text-align: center;
background: #fffebb;
width: 100%;
margin: 0;
display: block;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment