Skip to content

Instantly share code, notes, and snippets.

@cyb3rD

cyb3rD/Sample comments.markdown

Created June 10, 2015 05:49
Show Gist options
  • Save cyb3rD/05b9cbae586b8091d83e to your computer and use it in GitHub Desktop.
Save cyb3rD/05b9cbae586b8091d83e to your computer and use it in GitHub Desktop.
Download ZIP
Sample comments
Raw
index.html
<html>
<head>
<title>Comments</title>
<meta charset="utf-8">
<link href='//fonts.googleapis.com/css?family=PT+Sans:400,700&subset=cyrillic' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="comment">
<div class="comment-avatar"></div>
<div class="comment-author">Дима Дивов</div>
<div class="comment-text">
Верстать сайты надо только на дивах!
<div class="comment-date">16.09.2013</div>
</div>
<a href="#reply" title="Ответить" class="comment-reply"></a>
</div>
<div class="comment">
<div class="comment-avatar"></div>
<div class="comment-author">Степан Спанов</div>
<div class="comment-text">
Не согласен, лучше спаны.
<div class="comment-date">17.09.2013</div>
</div>
<a href="#reply" title="Ответить" class="comment-reply"></a>
</div>
</body>
</html>
Raw
style.css
body{
font-family:"PT Sans", sans-serif;
font-size:14px;
color:#777777;
}
.comment{
position:relative;
margin-left:50px;
margin-top:30px;
margin-right:20px;
}
.comment-avatar{
position: absolute;
top: 0px;
left: -40px;
width:70px;
height:70px;
background:#7f8c8c url('http://htmlacademy.ru/assets/course14/avatar.png') no-repeat 50% 50%;
}
.comment-author{
margin-bottom:5px;
padding-left:45px;
padding-right:20px;
font-size:16px;
font-weight:bold;
}
.comment-text{
padding:12px;
padding-left:45px;
background:#f8f8f8;
border-bottom:5px solid #e5e6e6;
}
.comment-date{
margin-top:5px;
font-size:12px;
color:#bdc3c7;
}
.comment-reply{
position:absolute;
top:0;
right:0;
width:15px;
height:15px;
background:url('http://htmlacademy.ru/assets/course14/reply.png') no-repeat 0 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment