Создал контейнер прописал бекграунд цвет есть а картинка не подтягиваетса, не пойму почему.
<!DOCTYPE html>
<html>
<head>
<title>Background Images — Practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link href="lightbox/css/lightbox.min.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;700&display=swap" rel="stylesheet">
<link href="reset.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<!--Main conteiner-->
<div class= "main">
<!--Left Side-->
<div class="main_left">
<img src="img/left.png">
</div>
<!--Right Side-->
<div class="main_right">
<p>For business</p>
<h1>Business <br> Chat App</h1>
<p>We strive to remain a safe and high-quality place for our users, we consider each request <br> individually</p>
<a href="#"><img src="img/ap.png"></a>
<a href="#"><img src="img/gp.png"></a>
</div>
</div>
</body>
</html>
body {
font-family: 'Manrope', sans-serif;
font-size: 1em;
color: #eee;
background-color: #383838;
background-image: url(../img/bg.png);
}
.main {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
max-width: 960px;
margin-left: auto;
margin-right: auto;
}
.main_left{
width: 50%;
float: left;
}
.main_right{
width: 50%;
float: right;
}
.main_left img{
padding-top:162px;
}
.main p,h1{
color: #071640;
}
.main p{
font-weight: 300;
font-size: 14px;
line-height: 170%;
/* identical to box height, or 24px */
letter-spacing: 0.03em;
}
.main h1{
margin-top:16px;
margin-bottom:28px;
font-weight: bold;
font-size: 72px;
line-height: 100%;
/* or 72px */
letter-spacing: -0.03em;
}
Средний
