😎 » DARYA DLE » Готовые дизайны » Простой дизайн последних комм.
611 0  

Простой дизайн последних комм.

Простой и очень красивый дизайн последних комментариев DLE

 

Код:

<div class="main-comments"><div class="main-comments-top">
<div class="main-comments-image"><img src="{foto}" alt=""></div>
<div class="main-comments-author">{author}</div>
<div class="main-comments-date">{date}</div>
<a href="{news-link}" class="main-comments-link"><i>.</i><u>.</u>.</a>
</div>
<div class="main-comments-text">{comment limit="150"}</div>
</div>


Стили:

 /*--- custom coments ---*/
.main-comments {border-bottom: 1px #e6ecf5 solid;padding: 25px 15px 25px 15px;}
.main-comments:last-child {border: 0;}
.main-comments-top {position: relative;padding: 0 50px 0 50px;min-height: 34px;margin: 0 0 15px 0;}
.main-comments-image {width: 34px;height: 34px;-moz-border-radius: 34px;-webkit-border-radius: 34px;border-radius: 34px;position: absolute;left: 0;top: 0;}
.main-comments-image img {width: 34px;height: 34px;-moz-border-radius: 34px;-webkit-border-radius: 34px;border-radius: 34px;}
.main-comments-author {color: #3f3f3f;font-size: 13px;padding: 3px 0 0 0;}
.main-comments-author a {color: #3f3f3f;}
.main-comments-date {color: #939393;font-size: 10px;font-weight: 300;text-transform: uppercase;}
.main-comments-link {font-size: 35px !important;color: #8c99b0;position: absolute;right: 5px;top: -10px;letter-spacing: -2px;display: block;transition:all 1.2s ease;-webkit-transition:all 1.2s ease;-o-transition:all 1.2s ease;-moz-transition:all 1.2s ease;}
.main-comments-link i {font-style: normal;transition:all 1.2s ease;-webkit-transition:all 1.2s ease;-o-transition:all 1.2s ease;-moz-transition:all 1.2s ease;}
.main-comments-link u {text-decoration: none;transition:all 1.2s ease;-webkit-transition:all 1.2s ease;-o-transition:all 1.2s ease;-moz-transition:all 1.2s ease;} 
.main-comments-link:hover {color: #287ed7;}
.main-comments-link:hover i {color: #ff704f;}
.main-comments-link:hover u {color: #8dd03d;}
.main-comments-text {color: #6d6d6d;font-size: 11px;line-height: 16px;}
 /*--- /custom coments ---*/

Залишити свій коментар:

Досвід у веброзробці:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2009
2023