Пример:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid et tempore quae quas pariatur ratione voluptas inventore. Doloremque soluta quisquam natus perspiciatis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid et tempore quae quas pariatur ratione voluptas inventore. Doloremque soluta quisquam natus perspiciatis.
HTML:
|
1 2 3 4 5 6 |
<div class="img-section"> <img src="photo.jpg" alt="" /> <div class="img-data"> <p>Информация блока</p> </div> </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
.img-section { width: 100%; background: linear-gradient(135deg, #337AB7 0%, #337AB7 40%, #FFF 40%, #FFF 100%); display: flex; align-items: center; margin: 20px 0; } .img-section img { border: 20px solid rgba(191, 226, 255, 0.8); box-shadow: 10px 10px 20px 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: 8px solid #337AB7; } .img-section img { margin: 40px auto; flex: 0 0 80%; width: 80%; } } |
Добавить комментарий: