orbit-basic/public/demo/comments_1.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>