Создадим блок, в котором будут находиться несколько элементов: Название, картинка, подпись, описание
Пример блока:
Название
Подпись
Небольшой уточняющие текст (3-4 строки)
Кртинка размером 1000x666px вставлена в бокс занимает 100% ширины и не вылазит за границы.

Кнопка

CSS:
.c-box
{
display:block;
padding:10px;
min-height:200px;
border:solid 1px #dadada;
border-top-left-radius:30px;
border-bottom-right-radius:0px;
border-top-right-radius:0px;
border-bottom-left-radius:0px;
position:relative;
margin-bottom:30px;
background: white;
line-height: 1.2em;
text-decoration: none;
-webkit-box-shadow: 2px 2px 2px 0px rgba(215,215,215,1);
-moz-box-shadow: 2px 2px 2px 0px rgba(215,215,215,1);
box-shadow: 2px 2px 2px 0px rgba(215,215,215,1);
}

.c-box:hover
{
border:solid 1px #5b5b5d;
text-decoration:none;
-webkit-box-shadow: 2px 2px 2px 0px rgba(150,150,150,1);
-moz-box-shadow: 2px 2px 2px 0px rgba(150,150,150,1);
box-shadow: 2px 2px 2px 0px rgba(150,150,150,1);
}

.c-box-caption
{
font-size:16px;
line-height:20px;
font-weight: 500;
margin-bottom:10px;
min-height: 50px;
text-align: left;
font-weight: bold;
}

.c-box-naim
{
font-weight: bold;
font-size: 18px;
line-height: 24px;
margin-bottom:14px;
min-height: 50px;
text-align: center;
vertical-align: middle;
display: table-cell;
background-color: #297dff;
color: #fff;
border-top-left-radius: 20px;
padding: 10px;
display: block;
}

.c-box-image
{
height:100%;
margin-bottom:15px;
text-align: -webkit-center;
}

.c-box-text
{
margin-bottom:10px;
font-weight:300;
color:white;
min-height: 65px;
text-align: left;
background-color: #808080;
padding: 10px;
}
.c-box-btn
{
text-align: right!important;
}

Чтобы картинка умещалась в нужный блок добавляем ей стиль:
style=«width: auto; max-width: 100%; height: auto;”;
2

Автор публікації

Офлайн 3 роки

bchl

Аватар 1,2
Коментарі: 0Публікації: 32Реєстрація: 28-10-2022

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

Категорії
Недавні записи
Панель управления
UserOnline