Skip to content

Instantly share code, notes, and snippets.

@robfig

robfig/gist:e9d1b3a4cd23270be63c

Created October 20, 2014 20:11
Show Gist options
  • Save robfig/e9d1b3a4cd23270be63c to your computer and use it in GitHub Desktop.
Save robfig/e9d1b3a4cd23270be63c to your computer and use it in GitHub Desktop.
Download ZIP
robfig fedemo
Raw
gistfile1.html
<html>
<body>
<style>
body {
width: 900px;
margin: auto;
font-family: helvetica;
}
p {
margin: 0;
margin-left: 10px;
}
#make-post {
background-color: #CCC;
border: 1px solid #999;
padding: 10px;
position: relative;
}
#make-post input {
border: 1px solid #999;
display: inline-block;
margin: 10px;
margin-right: 200px;
width: 80%;
padding: 5px;
}
#btn-post {
position: absolute;
right: 0;
width: 100px;
margin: 10px;
border: 1px solid #999;
background-color: #caa;
padding: 5px;
}
#old-post {
margin: 10px 0;
border: 1px solid #999;
position: relative;
height: 250px;
}
#old-post .imgbg {
border: 1px solid #999;
background-color: #CCC;
position: absolute;
width: 200px;
height: 100%;
text-align: center;
}
#old-post .img {
margin: 10px auto;
height: 150px;
width: 150px;
border: 1px solid #999;
text-align: center;
line-height: 150px;
}
#old-post .content {
margin-left: 200px;
margin-right: 30px;
width: auto;
padding: 15px;
}
#old-post .x {
border: 1px solid #999;
background-color: #CCC;
position: absolute;
top: 0;
right: 0;
margin: 10px;
padding: 10px;
}
</style>
<div id="make-post">
<p>How are you feeling today?</p>
<button id="btn-post">Post</button>
<input placeholder="Say how you feel...">
</div>
<div id="old-post">
<div class="imgbg">
<div class="img">
IMG
</div>
<p>Billy Bastardi</p>
<p><b>Front-End Ninja</b></p>
</div>
<div class="content">
<p class="x">X</p>
<p>
This is my last post. Just fill this in with some random text right now;
This is my last post. Just fill this in with some random text right now;
This is my last post. Just fill this in with some random text right now;
This is my last post. Just fill this in with some random text right now;
This is my last post. Just fill this in with some random text right now;
</p>
</div>
</div>
<div id="old-post">
<div class="imgbg">
<div class="img">
IMG
</div>
<p>Billy Bastardi</p>
<p><b>Front-End Ninja</b></p>
</div>
<div class="content">
<p class="x">X</p>
<p>
This is my last post. Just fill this in with some random text right now;
This is my last post. Just fill this in with some random text right now;
This is my last post. Just fill this in with some random text right now;
This is my last post. Just fill this in with some random text right now;
This is my last post. Just fill this in with some random text right now;
</p>
</div>
</div>
<div id="old-post">
<div class="imgbg">
<div class="img">
IMG
</div>
<p>Billy Bastardi</p>
<p><b>Front-End Ninja</b></p>
</div>
<div class="content">
<p class="x">X</p>
<p>
This is my last post. Just fill this in with some random text right now;
This is my last post. Just fill this in with some random text right now;
This is my last post. Just fill this in with some random text right now;
This is my last post. Just fill this in with some random text right now;
This is my last post. Just fill this in with some random text right now;
</p>
</div>
</div>
<div id="old-post">
<div class="imgbg">
<div class="img">
IMG
</div>
<p>Billy Bastardi</p>
<p><b>Front-End Ninja</b></p>
</div>
<div class="content">
<p class="x">X</p>
<p>
This is my last post. Just fill this in with some random text right now;
This is my last post. Just fill this in with some random text right now;
This is my last post. Just fill this in with some random text right now;
This is my last post. Just fill this in with some random text right now;
This is my last post. Just fill this in with some random text right now;
</p>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment