Весь контент заходит за header. Помогите пожалуйста.
<!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">
<link rel="stylesheet" href="style.css">
<!--Icon-->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<title>Кулинарная книга</title>
</head>
<body>
<!--Navbar-->
<header>
<a href="#" class="logo"><i class='bx bxs-basket'></i>Delicacy</a>
<!--Menu Icon-->
<div class="bx bx-menu" id="menu-icon"></div>
<!--Nav list-->
<ul class="navbar">
<li><a href="#home" class="home-active">Home</a></li>
<li><a href="#categories">Categories</a></li>
<li><a href="#products">Products</a></li>
<li><a href="#about" >About</a></li>
<li><a href="#customers">Customers</a></li>
</ul>
<!--Profile-->
<div class="profile">
<img src="images/profile.png" alt="">
<span>Adbus Rahman</span>
<i class='bx bx-caret-down'></i>
</div>
</header>
<!--Home-->
<section class="home swiper" id="home">
<div class="swiper-wrapper">
<!--Slide 1-->
<div class="swiper-slide container">
<div class="home-text">
<span>We are delicary</span>
<h1>Choose delicary <br> the best healthy <br> chicken salad</h1>
<a href="#" class="btn">Shop Now<i class='bx bx-right-arrow-alt' ></i></a>
</div>
<img src="images/home1.png" alt="">
</div>
<!--Slide 2-->
<div class="swiper-slide container">
<div class="home-text">
<span>We are delicary</span>
<h1>Choose delicary <br> the best healthy <br> chicken salad</h1>
<a href="#" class="btn">Shop Now<i class='bx bx-right-arrow-alt' ></i></a>
</div>
<img src="images/home2.png" alt="">
</div>
<!--Slide 3-->
<div class="swiper-slide container">
<div class="home-text">
<span>We are delicary</span>
<h1>Choose delicary <br> the best healthy <br> chicken salad</h1>
<a href="#" class="btn">Shop Now<i class='bx bx-right-arrow-alt' ></i></a>
</div>
<img src="images/home3.png" alt="">
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</section>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<!--Link to JS-->
<script src="main.js"></script>
</body>
</html>
/* Шрифты*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;900&display=swap');
*{
font-family: "Poppins", sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
scroll-padding-top: 2rem;
scroll-behavior: smooth;
}
/* Регулировка цвета*/
:root{
--green-color: #3cb815;
--light-green-color: #c0eb7b;
--orange-color: #ff7e00;
--light-orange-color: #f75f1d;
--text-color: #1a2428;
--bg-color: #fff;
}
section{
padding: 4.5rem 0 1.5rem;
}
/* Настройка изображений*/
img{
width: 100%;
}
body{
color: var(--text-color);
}
header{
position: fixed;
width: 100%;
top: 0;
right: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
background: var(--bg-color);
box-shadow: 0 8px 11px rgb(14 55 54 / 15%);
padding: 20px 100px;
transition: 0.5s;
}
.profile{
display: flex;
align-items: center;
column-gap: 0.5rem;
cursor: pointer;
}
.profile img{
width: 40px;
height: 40px;
object-fit: cover;
object-position: center;
border-radius: 50%;
}
.profile span{
font-size: 13px;
font-weight: 500;
}
.logo{
display: flex;
align-items: center;
font-size: 1.1rem;
font-weight: 600;
color: var(--text-color);
column-gap: 0.5rem;
}
.logo .bx{
font-size: 24px;
color: var(--orange-color);
}
.navbar{
display: flex;
column-gap: 0.5rem;
}
.navbar a {
font-size: 1rem;
font-weight: 500;
color: var(--text-color);
padding: 0.5rem 1rem;
}
.navbar a:hover,
.navbar .home-active
{
background: var(--green-color);
border-radius: 5rem;
color: var(--bg-color);
transition: 0.5s;
}
#menu-icon{
font-size: 24px;
cursor: pointer;
z-index: 10001;
display: none;
}
.container{
position: fixed;
width: 100%;
min-height: 840px;
display: flex;
align-items: center;
background: url(images/background.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
overflow: hidden;
}
.container img{
width: 400px;
position: absolute;
bottom: 500px;
right: 200px;
}
.home-text{
padding: 0 150px;
}
.home-text span{
font-weight: 400;
text-transform: uppercase;
color: var(--green-color);
}
var swiper = new Swiper(".home", {
spaceBetween: 30,
centeredSlides: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
Простой
