Moim problemem jest komenda position: fixed; w css. Zasłania wszystko, oprócz ikon.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<style>
#header{
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #00CED1;
height: 160px;
}
#color{
background-color: white;
width: 100%;
height: 30px;
position: relative;
top: 0;
}
#logo{
float: left;
position: relative;
left: 5vw;
top: 3vh;
}
#nav-bar{
float: right;
position: relative;
top: 5vh;
}
.nav-link{
color: white;
text-decoration: none;
font-size:
}
#main1{
clear: both;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 200px;
margin-top: 130px;
}
#container{
width: 50%;
margin: 0 auto; <!-- wyśrodkowanie kontentu -->
}
.icon{
float: left;
font-size: 40px;
position: relative;
top: 4vh;
}
.subtitle{
margin-left: 70px;
}
#Part1{
float: left;
display: flex;
justify-content: center;
text-align: left;
flex-direction: column;
}
#Part1_1{
}
#Part1_2{
}
#Part1_3{
}
#Part2{
clear: both;
}
</style>
</head>
<body>
<header id="header">
<div id="color"></div>
<div id="logo">
<img id="header-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Logo_TV_2015.svg/1200px-Logo_TV_2015.svg.png" title="title title title" width="100px" height="100px">
</div>
<nav id="nav-bar">
<ul style="list-style: none; display: flex; flex-direction: row; justify-content: space-around; width: 35vw;">
<li>
<a class="nav-link" href="#Part1" >Part1</a>
</li>
<li>
<a class="nav-link" href="#Part2">Part2</a>
</li>
<li>
<a class="nav-link" href="#Part3">Part3</a>
</li>
</ul>
</nav>
</header>
<section id="main1">
<h1>Title title tiletitle title</h1>
<form id="form">
<input name="email" id="email" type="email" placeholder="Enter your email address" required>
<input id="submit" type="submit" value="Let's go!" class="button">
</form>
</section>
<div id="container">
<section id="Part1">
<div id="Part1_1">
<div class="icon">
<i class="fas fa-fire" ></i>
</div>
<div class="subtitle">
<h2>Subtitle</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
</div>
<div id="Part1_2">
<div class="icon">
<i class="fas fa-radiation"></i>
</div>
<div class="subtitle">
<h2>Subtitle</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
</div>
<div id="Part1_3">
<div class="icon">
<i class="fas fa-lightbulb"></i>
</div>
<div class="subtitle">
<h2>Subtitle</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
</div>
</section>
<section id="Part2">
<iframe width="560" height="315" src="https://www.youtube.com/embed/XD4xqV1XM9w" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>
<section id="Part3">
<div class="dog">
<div class="level">Dog</div>
<h2>$100</h2>
<ol style="list-style: none;">
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ol>
</div>
<div class="dog">
<div class="level">Super Dog</div>
<h2>$200</h2>
<ol style="list-style: none;">
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ol>
</div>
<div class="dog">
<div class="level">Mega Dog</div>
<h2>$300</h2>
<ol style="list-style: none;">
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ol>
</div>
</section>
<footer>
<ul>
<li>
<a href="#">Lorem</a>
</li>
<li>
<a href="#">Lorem</a>
</li>
<li>
<a href="#">Lorem</a>
</li>
</ul>
<span>Copyright 2019, Dog</span>
</footer>
</div>
</body>
</html>
