В общем история такая, сижу 4й час и не понимаю как сделать все красиво
Как поставить задний фон - "волну" и чтоб картинки не растягивались, недочетов много, буду очень благодарен и признателен за помощь!
P.S Картинку приложил, как должно получится
Код:
Цитата:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/Css/style.css">
<link rel="stylesheet" href="/Css/style2.css">
</head>
<body>
<div class="main_contaner">
<div class="back_home">
<a href="program.html" class="back">Назад</a>
</div>
<div class="modul">Модули курса Веб-верстка</div>
<div class="parent">
<ul class="list">
<li class="child">
<div class="card">
<img class="image_one" src="/img/1.jpeg" alt="">
<div class="info_menu">
<h3 class="header_color">Введение</h3>
<p class="list_info">Как работают сайты.Верстка</p>
<p class="list_info">Возможности HTML, CSS, JS</p>
<p class="list_info">Редактор кода. Codepen</p>
<p class="list_info">Работа с DevTools</p>
</div>
</div>
<div class="number">01</div>
</li>
<li class="right child">
<div class="card">
<img class="image_one" src="/img/2.jpeg" alt="">
<div class="info_menu">
<h3 class="header_color">Базовый HTML</h3>
<p class="list_info">Базовые теги</p>
<p class="list_info">Теги картинок и ссылок</p>
<p class="list_info">Теги таблиц</p>
<p class="list_info">Служебные теги</p>
<p class="list_info">Кодстайл HTML</p>
</div>
</div>
<div class="number">02</div>
</li>
<li class="child">
<div class="card">
<img class="image_one" src="/img/3.jpeg" alt="">
<div class="info_menu">
<h3 class="header_color">Базовый CSS</h3>
<p class="list_info">Подключение CSS</p>
<p class="list_info">Вес селектора</p>
<p class="list_info">Свойство display</p>
<p class="list_info">Блочная модель и позиционирование</p>
<p class="list_info">Кодстайл CSS</p>
</div>
</div>
<div class="number">03</div>
</li>
<li class="right child">
<div class="card">
<img class="image_one" src="/img/4.jpeg" alt="">
<div class="info_menu">
<h3 class="header_color">Работа с макетом</h3>
<p class="list_info">Про форматы изображений</p>
<p class="list_info">Работа с макетом в Photoshop</p>
<p class="list_info">Работа с макетом Figma</p>
</div>
</div>
<div class="number">04</div>
</li>
</ul>
</div>
<div class="btn_center">
<button class="btn">Показать ещё</button>
</div>
</div>
</body>
</html>
|
Код:
Цитата:
/* Modules ========================== */
.main_contaner {
width: 1180px;
margin: 0 auto;
}
.back_home {
padding-top: 70px;
}
.modul {
margin-top: 35px;
font-size: 48px;
font-weight: bold;
font-family: "Gilroy Medium", sans-serif;
}
.parent {
width: 1150px;
margin: 0 auto;
margin-top: 70px;
}
.right {
margin-right: 0;
}
.list {
padding: 0;
margin: 0;
}
.child {
width: 481px;
min-height: 501px;
border: 1px solid black;
display: inline-block;
margin-left: 62px;
margin-bottom: 15px;
position: relative;
}
.card {
position: relative;
}
.image_one {
width: 479px;
height: 176px;
}
.info_menu {
position: absolute;
left: 50px;
}
.number {
position: absolute;
right: 20px;
bottom: 20px;
color: #eaeaea;
font-size: 48px;
}
.header_color {
font-size: 36px;
color: #2f1ce4;
}
.list_info {
font-size: 16px;
}
.btn_center {
text-align: center;
margin-top: 95px;
}
/*=============================== */
/* Кнопка ===============================
================ */
.btn {
width: 278px;
height: 78px;
font-size: 18px;
border: 3px solid #2f1ce4;
color: #2f1ce4;
background-color: Transparent;
cursor: pointer;
}
/*=============================== */
|