Вот скелет Index.httml:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="header">
<div class="wrapper">
<div class="navigation">
<img src="img/Logo.png" alt="Logo">
<ul class="nav">
<li><a href="#"> Новости</a></li>
<li><a href="#">Поддержка </a> </li>
<li><a href="#"> Магазин</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</div>
</div>
</div>
<div class="banner">
<div class="wrapper">
<h1>Создай сам свою пиццу!</h1>
<h2>Выбирай размер, ингродиенты. Создавай уникальную пиццу по своему вкусу и выбору. Всё что хочешь можешь создать сам.</h2>
<a href="#">Читать подробнее</a>
<img src="img/Pizza1.png" alt="Pizza">
</div>
</div>
<div class="page">
<div class="wrapper">
<h2> Как это происходит?</h2>
<p> Бла бал бла/p>
<a href="# ">Пицца </a>
<a href="# "> Бургер</a>
<a href="# "> Сэндвич </a>
<a href="# "> Роллы</a>
</div></div>
<footer>
<div class="wrapper">
Подвал
</div>
</footer>
</body>
</html>
---
Вот скелет CSS:
body{
background-color: #d9d6d6;
font-family: fantasy; sans-serif;
}
.wrapper{
padding-right: 15px;
padding-left: 15px;
max-width: 1170px;
margin: 0 auto;
}
.navigation{
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 36px;
padding-bottom: 40px;
}
.nav {
display: flex;
list-style-type: none;
padding-left: 0;
font-weight: 700;
text-transform: uppercase;
}
.nav>li{
padding-left: 23px;
margin-left: 22px;
position: relative;
}
.nav>li:first-child {
padding-left: 0px;
margin-left: 0px;
}
.nav>li::before{
content: '';
display: block;
width: 2px;
height: 100%;
background-color: #494949;
position: absolute;
left: 0;
}
.nav>li:first-child::before {
display: none;
}
.nav>li>a{
text-decoration: none;
color: #494949;
}
.banner {
background-image: url(img/banner.png);
background-repeat: no-repeat;
}
До попытки вставить картинку заднего фона, всё работало отлично!!
Попробовал и png картинку поставить и jpg не ставится..
Вроде всё должно работать, что не так??!
----
Простой
Простой
