92 lines
2.9 KiB
HTML
92 lines
2.9 KiB
HTML
|
<link rel="stylesheet" href="../stylesheets/easy.css" media="screen" />
|
||
|
|
|
||
|
|
<style>
|
||
|
|
|
||
|
|
/* COPY START HERE */
|
||
|
|
|
||
|
|
.comments, .comments ul, #comments li{
|
||
|
|
margin:0;
|
||
|
|
padding:0;
|
||
|
|
list-style:none;
|
||
|
|
}
|
||
|
|
.comments li{margin:0 0 1.5em 0;position:relative;}
|
||
|
|
.comments .meta{margin-bottom:.5em;}
|
||
|
|
.comments .meta li{
|
||
|
|
margin:0;
|
||
|
|
display:inline;
|
||
|
|
color:#777;
|
||
|
|
}
|
||
|
|
.comments .meta .author{
|
||
|
|
font-size:14px;
|
||
|
|
font-weight:bold;
|
||
|
|
}
|
||
|
|
.comments .meta img{
|
||
|
|
position:absolute;
|
||
|
|
left:0;
|
||
|
|
top:2.5em;
|
||
|
|
z-index:100;
|
||
|
|
border:1px solid #ccc;
|
||
|
|
}
|
||
|
|
.comments .body{
|
||
|
|
border-top:1px solid #ccc;
|
||
|
|
padding-top:1em;
|
||
|
|
padding-left:70px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* COPY END HERE */
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<div id="container">
|
||
|
|
<div class="main">
|
||
|
|
|
||
|
|
<!-- COPY START HERE -->
|
||
|
|
|
||
|
|
|
||
|
|
<ol class="comments">
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<ul class="meta">
|
||
|
|
<li class="image"><img src="http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48" alt="Author's name" /></li>
|
||
|
|
<li class="author"><a href="#">Author's name</a></li>
|
||
|
|
<li class="date">posted on September 23rd, 2009</li>
|
||
|
|
</ul>
|
||
|
|
<div class="body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||
|
|
Suspendisse at enim augue, et luctus odio. Duis porttitor orci id arcu consequat varius.
|
||
|
|
Pellentesque tempus augue sed purus facilisis vitae feugiat sem convallis. Maecenas a dolor velit.
|
||
|
|
Ut tempus elit et nibh pellentesque et molestie mauris adipiscing.
|
||
|
|
Curabitur elementum rutrum augue vitae tempus. Donec tincidunt ipsum ac arcu</div>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<ul class="meta">
|
||
|
|
<li class="image"><img src="http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48" alt="Author's name" /></li>
|
||
|
|
<li class="author"><a href="#">Author's name</a></li>
|
||
|
|
<li class="date">posted on September 23rd, 2009</li>
|
||
|
|
</ul>
|
||
|
|
<div class="body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||
|
|
Suspendisse at enim augue, et luctus odio. Duis porttitor orci id arcu consequat varius.
|
||
|
|
Pellentesque tempus augue sed purus facilisis vitae feugiat sem convallis. Maecenas a dolor velit.
|
||
|
|
Ut tempus elit et nibh pellentesque et molestie mauris adipiscing.
|
||
|
|
Curabitur elementum rutrum augue vitae tempus. Donec tincidunt ipsum ac arcu</div>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<ul class="meta">
|
||
|
|
<li class="image"><img src="http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48" alt="Author's name" /></li>
|
||
|
|
<li class="author"><a href="#">Author's name</a></li>
|
||
|
|
<li class="date">posted on September 23rd, 2009</li>
|
||
|
|
</ul>
|
||
|
|
<div class="body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||
|
|
Suspendisse at enim augue, et luctus odio. Duis porttitor orci id arcu consequat varius.
|
||
|
|
Pellentesque tempus augue sed purus facilisis vitae feugiat sem convallis. Maecenas a dolor velit.
|
||
|
|
Ut tempus elit et nibh pellentesque et molestie mauris adipiscing.
|
||
|
|
Curabitur elementum rutrum augue vitae tempus. Donec tincidunt ipsum ac arcu</div>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
</ol>
|
||
|
|
|
||
|
|
<!-- COPY END HERE -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|