Я пытаюсь создать веб-страницу, где у меня фиксированное поле 50 пикселей слева и справа, где изображения страниц имеют индекс, который приближает его к экрану, а поле выглядит дальше. Я также хочу добиться фиксированного значения Нижний колонтитул, как у меня для навигационной панели. Я попытался установить поля влево и вправо на 50 пикселей и установить их в фиксированное положение и попытался использовать класс обертки для добавления к разделам, оба не дали желаемого результата.
Вот мой код ниже
HTML КОД:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Archers</title>
<link rel="stylesheet" href="arch.css">
</head>
<body>
<section id="main">
<div class="bg1">
<header>
<div id="navbar">
<nav class="nav-list">
<ul class="ul-style ">
<li><a href="#portfolio">OUR PORTFOLIO</a></li>
<li><a href="#process">OUR PROCESS</a></li>
<li><a href="#about">ABOUT</a></li>
<li><a href="#main">HOME</a></li>
</ul>
</div>
</header>
</div>
</div>
</section>
<section id="about">
<div class="bg1">
<div class="about_us">
<a name="#about">
<p>
<h1>ABOUT US</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ducimus officia vero, animi dicta magni tenetur praesentium quisquam, iusto itaque distinctio quis blanditiis. Ad quos, voluptate labore aut aspernatur vitae nostrum quaerat
quasi nulla earum incidunt facere dolorum ipsam necessitatibus ex illum hic voluptatibus! Suscipit laborum consectetur numquam neque ratione ullam asperiores adipisci quidem, totam praesentium nisi quisquam at tempora autem earum iste,
itaque
minima. Modi repellendus laudantium quas odio tempora hic similique molestias quia sapiente saepe nobis, vel, nemo impedit delectus. Voluptatum suscipit est, autem laborum, maiores ad nesciunt necessitatibus in neque sunt, ipsam dolorem
rem.
Sit, illum, non.
</p>
</a>
</div>
</div>
</div>
</section>
<section id="process">
<div class="bg1>
<div class=" our_process">
<a name="#process">
<p>
<h1>OUR PROCESS</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ducimus officia vero, animi dicta magni tenetur praesentium quisquam, iusto itaque distinctio quis blanditiis. Ad quos, voluptate labore aut aspernatur vitae nostrum quaerat
quasi nulla earum incidunt facere dolorum ipsam necessitatibus ex illum hic voluptatibus! Suscipit laborum consectetur numquam neque ratione ullam asperiores adipisci quidem, totam praesentium nisi quisquam at tempora autem earum iste,
itaque
minima. Modi repellendus laudantium quas odio tempora hic similique molestias quia sapiente saepe nobis, vel, nemo impedit delectus. Voluptatum suscipit est, autem laborum, maiores ad nesciunt necessitatibus in neque sunt, ipsam dolorem
rem.
Sit, illum, non.
</p>
</a>
</div>
</div>
</div>
</section>
<section id="portfolio">
<div class="bg1">
<div class="our_portfolio">
<a name="#portfolio">
<p>
<h1>OUR PORTFOLIO</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ducimus officia vero, animi dicta magni tenetur praesentium quisquam, iusto itaque distinctio quis blanditiis. Ad quos, voluptate labore aut aspernatur vitae nostrum quaerat
quasi nulla earum incidunt facere dolorum ipsam necessitatibus ex illum hic voluptatibus! Suscipit laborum consectetur numquam neque ratione ullam asperiores adipisci quidem, totam praesentium nisi quisquam at tempora autem earum iste,
itaque
minima. Modi repellendus laudantium quas odio tempora hic similique molestias quia sapiente saepe nobis, vel, nemo impedit delectus. Voluptatum suscipit est, autem laborum, maiores ad nesciunt necessitatibus in neque sunt, ipsam dolorem
rem.
Sit, illum, non.
</p>
</a>
</div>
</div>
</div>
</section>
</section>
<section id="footer">
<footer>
2020 DeborahPalmTree
</footer>
</section>
<script src="index.js" charset="utf-8"></script>
</body>
</html>
CSS КОД
* {
padding: 0;
margin: 0;
}
body {
width: 100%;
height: 100vh;
}
#navbar {
width: 100%;
height: 50px;
background-color: rgba(219, 219, 219, 1.0);
position: fixed;
}
nav ul li {
list-style: none;
float: right;
margin: 20px;
}
li a {
text-decoration: none;
color: #ffffff;
}
.bg1 {
background-color:rgba(255,255,255, 0.5);
width:100%;
height:100%;
}
/*.wrapper{
width:50px;
position:fixed;
height:100%;
background-color:rgba(255,255,255,1.0);
opacity:0;
z-index:1;}
}*/
#main {
height: 100%;
width: 100%;
background-image: url('structural-images/img_house_trees.jpg');
background-size: cover;
background-position: bottom;
}
#about {
height: 100%;
width: 100%;
background-image: url('structural-images/img_construction_site.jpg');
background-size: cover;
background-position: bottom;
}
#process {
height: 100%;
width: 100%;
background-image: url('structural-images/img_arc_plan.jpg');
background-size: cover;
background-position: bottom;
}
#portfolio {
height: 100%;
width: 100%;
background-image: url('structural-images/img-structure-garden-car-park.jpg');
background-size: cover;
background-position: bottom;
}
#fixed{
position: fixed;
height :50px;
width:100%;
background-color: rgba(219,219,219,1.0);
}