оформление блока с картинкой и текстом

Доброго времени суток. Хочу предложить вам, как можно с помощью CSS. красиво оформить блок с картинкой и нужным текстом. Сразу скажу, что такой вариант оформления, прекрасно отображается на экранах разного размера. Код совершенно простой и всё разберём ниже. 

Вы наглядно можете посмотреть пример. Скопируйте приведённый ниже код и установите в этом редакторе. На размер ширины внимание не обращайте. На вашей странице блога, будет выглядеть, как на картинке выше.

<div class="img-section">
<img alt="" height="200" src="https://avatars.mds.yandex.net/get-pdb/901820/7909be1b-5b7d-4bfa-800c-19853f1c0781/s1200" width="400" /> 

<div class="img-data">
<span style="background-color: white; color: #303030; font-family: &quot;verdana&quot; , sans-serif; font-size: 16px; letter-spacing: 0.3px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid et tempore quae quas pariatur ratione voluptas inventore. Doloremque soluta quisquam natus perspiciatis.</span><br />
<br /></div>
</div>
<style>
.img-section {
    width: 100%;
    background: linear-gradient(135deg, #00897B 0%, #00897B 40%, #FFF 40%, #FFF 100%);
    display: flex;
    align-items: center;
    margin: 20px 0;
} .img-section img {
    border: 12px solid rgba(204, 255, 144, 0.8);
    box-shadow: 5px 7px 16px rgba(0, 0, 0, 0.7);
    margin: 40px;
    box-sizing: border-box;
    flex: 0 0 45%;
    width: 45%;
} .img-section .img-data {
    font-family: Verdana, sans-serif;
    font-size: 16px;
    padding: 20px;
}
@media only screen and (max-width: 700px) {
    .img-section {
        flex-flow: row wrap;
    }
    .img-section .img-data {
        background: #FFF;
        border-bottom: 5px solid #AED581;
    }
    .img-section img {
        margin: 40px auto;
        flex: 0 0 80%;
        width: 80%;
    }
}
</style>

В строке, отмеченной розовым цветом, вставьте адрес вашей картинки.

Синим цветом выделен сам отображаемый текст.

Обратите внимание, что в примере высота картинки height="200". Соответственно высота области с текстом будет такая же.

Можно поэкспериментировать со значением linear-gradient. Почитаете здесь.

Можно подобрать свои решения, относительно цвета и размеров тени  box-shadow: 5px 7px 16px rgba(0, 0, 0, 0.7); и border: 12px solid rgba(204, 255, 144, 0.8) рамки.

Размер текста можно заменить на другой  font-size: 16px;

Вот такие не сложные настройки. И выглядит достаточно красиво, аккуратно и профессионально.

В редакторе сообщения код вставляется в формате HTML. Если пропустили, прочитайте как просто вставлять коды в сообщениях.

Всем добра и до встречи. 

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email