Skip to content

Instantly share code, notes, and snippets.

@hundred

hundred/GraceHopper.jpg

Last active December 28, 2015 05:09
Show Gist options
  • Save hundred/7448077 to your computer and use it in GitHub Desktop.
Save hundred/7448077 to your computer and use it in GitHub Desktop.
Download ZIP
Lesson4
Raw
example.html
<!DOCTYPE html>
<html>
<head>
<title>Grace Hopper</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="my-picture">
<img src="assets/images/GraceHopper.jpg" height="60px"/>
</div>
<div class="title">
<h2> Hi, I'm Grace Hopper</h2>
</div>
</header>
<div id="container">
</div>
<footer>
<p>Made by <a href="http://codebar.io">codebar.io</a></p>
</footer>
</body>
</html>
Raw
styles.css
body {
font-family: Helvetica, Arial, sans-serif;
padding:0;
margin:0;
line-height: 23px;
}
header {
background-color: #fdfdfc;
text-align: center;
border-bottom: 1px solid #e7e6e6;
padding-top: 14px;
height: 100px;
width: 100%;
}
.title {
display: inline-block;
margin: 20px;
margin-bottom: 0px;
padding-bottom: 0;
vertical-align: top;
}
#container {
min-width: 200px;
padding-top: 150px
}
ul {
list-style:none;
padding: 0;
}
footer {
height: 60px;
padding-top: 20px;
background-color: #1f1430;
border-top: 1px solid #eeeeee;
margin-top: 20px;
width: 100%;
}
footer p {
color: #b0afc0;
font-size: 14px;
margin-left: 30px;
}
footer a {
color: #b0afc0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment