Skip to content

Instantly share code, notes, and snippets.

@mackenco
Created November 16, 2016 22:30
Show Gist options
  • Save mackenco/d84b7d76ad8d972b0cc786f433a9f973 to your computer and use it in GitHub Desktop.
Save mackenco/d84b7d76ad8d972b0cc786f433a9f973 to your computer and use it in GitHub Desktop.
Exported from Popcode. Click to import: https://popcode.org/?gist=d84b7d76ad8d972b0cc786f433a9f973
<!DOCTYPE html>
<html>
<head>
<title>Homer Simpson</title>
</head>
<body>
<div id="header">
<img id="profile-picture" src="https://pbs.twimg.com/profile_images/609439993094770690/MqfzEbtj.jpg">
<h1 id="title">Homer's Profile</h1>
</div>
<div id="content">
<div id="sidebar">
<h4 id="interests">Interests</h4>
<ul id="interests-list">
<li>Donuts</li>
<li>Nuclear Power</li>
<li>Moe's Bar</li>
<li>Springfield</li>
</ul>
</div>
<div id="main">
<h3 id="wall">Homer's Wall</h3>
<div class="post">
<img class="post-image" src="http://icons.iconarchive.com/icons/jonathan-rey/simpsons/256/Bart-Simpson-01-icon.png">
<p class="post-text">Don't have a cow man</p>
</div>
<div class="post">
<img class="post-image" src="http://vignette4.wikia.nocookie.net/simpsons/images/d/d6/Ned_Flanders_2.png/revision/latest?cb=20141024230457">
<p class="post-text">Hidely-ho neighborino</p>
</div>
<div class="post">
<img class="post-image" src="https://static.simpsonswiki.com/images/thumb/9/9d/Maggie_Simpson.png/250px-Maggie_Simpson.png">
<p class="post-text">*pacifier noise*</p>
</div>
</div>
</div>
<div id="footer">
SimpBook™
</div>
</body>
</html>
#header {
width: 100%;
border: 1px solid black;
}
#header:after, .post:after {
clear: both;
display: table;
content: "";
}
#profile-picture {
height: 100px;
width: 100px;
float: left;
}
#title {
float: left;
margin-left: 50px;
}
#sidebar {
border: 1px solid black;
width: 25%;
height: 500px;
float: left;
}
#main {
border: 1px solid black;
width: 74%;
height: 500px;
float: left;
}
#wall {
text-align: center;
}
#interests {
margin-left: 10px;
}
.post {
border: 1px solid black;
margin: 5px;
padding: 5px;
}
.post-image {
height: 50px;
width: 50px;
float: left;
}
.post-text {
float: left;
}
#footer {
float: right;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment