Описание с картинкой

Описание с картинкой

Рарзметка HTML:

Nullam malesuada erat
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.
Nullam malesuada erat
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.
Nullam malesuada erat
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.

Стили CSS:

.lb_withimage_wr{
    padding: 25px;
    background-color:#f3f3f3;
}
.lb_withimage_image{
    background-position: 50%;
    -webkit-background-size: cover;
    background-size: cover;
    width: 380px;
    height: 240px;
}
.lb_withimage_item{
    background: #fff;
    box-shadow: 0 0 5px #aaa;
    -webkit-box-shadow: 0 0 5px #aaa;
    -moz-box-shadow: 0 0 5px #aaa;
    -o-box-shadow: 0 0 5px #aaa;
}
.lb_withimage_item + .lb_withimage_item{
    margin-top: 24px;
}
.lb_withimage_item.leftimage .lb_withimage_image_wr{
    float: left;
    position: relative;
    margin-right: 85px;
}
.lb_withimage_item.rightimage .lb_withimage_image_wr{
    float: right;
    position: relative;
    margin-left: 85px;
}
.lb_withimage_image_icon{
    position: absolute;
    top:50%;
    margin-top:-50px;
    background: rgb(191,224,114);
    background: -moz-linear-gradient(top, rgba(191,224,114,1) 0%, rgba(138,182,107,1) 44%, rgba(86,150,61,1) 100%);
    background: -webkit-linear-gradient(top, rgba(191,224,114,1) 0%,rgba(138,182,107,1) 44%,rgba(86,150,61,1) 100%);
    background: linear-gradient(to bottom, rgba(191,224,114,1) 0%,rgba(138,182,107,1) 44%,rgba(86,150,61,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfe072', endColorstr='#56963d',GradientType=0 );
    padding: 18px;
    width: 100px;
    height: 100px;
    border: 2px solid #FFF;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -o-border-radius: 100%;
}
.leftimage .lb_withimage_image_icon{
    right: -50px;
}
.rightimage .lb_withimage_image_icon{
    left: -50px;
}
.lb_withimage_text_wr{
    padding: 50px 50px 25px;
}
.rightimage .lb_withimage_text_wr{
    text-align: right;
}
.lb_withimage_text_title{
    font-weight: 600;
    font-size:18px;
    margin-bottom: 15px;
}

Результат:

Nullam malesuada erat
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.
Nullam malesuada erat
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.
Nullam malesuada erat
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.
Способ поблагодарить автора сайта:

Комментарии (0)

  1. Напишите первый комментарий
*Комментарий будет опубликован после проверки модератором
Наш сайт использует куки, нажмите «ОК» если вы не против
OK