I'm currently working on my first website, also I'm still new to HTML and CSS, so sorry if the code is a bit "sloppy". Anyways I made a navbar that works in the home page ( it has an image background ). I found online "about" page code that I found helpful, so I used it, the problem it that the navbar interfers with it and makes it weird.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #f1f1f1;
}
.header{
width: 100%;
background-color: rgba(0,0,0,0.9);
}
.header ul{
text-align: center;
}
.header ul li{
list-style: none;
display: inline-block;
}
.header ul li a{
display: flex;
text-decoration: none;
text-transform: uppercase;
color:white;
font-size: 100%;
letter-spacing: 2px;
font-weight: 600;
padding: 25px;
transition: width .3s;
}
.about{
background: url("/images/Industrial2.jpg") no-repeat left;
background-size: 55%;
background-color: #fdfdfd;
overflow: hidden;
padding: 100px 0;
}
.inner-section{
width: 55%;
float: right;
background-color: #fdfdfd;
padding: 140px;
box-shadow: 10px 10px 8px rgba(0,0,0,0.3);
}
.inner-section h1{
margin-bottom: 30px;
font-size: 30px;
font-weight: 900;
}
.text{
font-size: 13px;
color: #545454;
line-height: 30px;
text-align: justify;
margin-bottom: 40px;
}
.skills button{
font-size: 22px;
text-align: center;
letter-spacing: 2px;
border: none;
border-radius: 20px;
padding: 8px;
width: 200px;
background-color: #00999c;
color: white;
cursor: pointer;
}
.skills button:hover{
transition: 1s;
background-color: #ecf5f5;
color: #00999c;
}
@media screen and (max-width:1200px){
.inner-section{
padding: 80px;
}
}
@media screen and (max-width:1000px){
.about{
background-size: 100%;
padding: 100px 40px;
}
.inner-section{
width: 100%;
}
}
@media screen and (max-width:600px){
.about{
padding: 0;
}
.inner-section{
padding: 60px;
}
.skills button{
font-size: 19px;
padding: 5px;
width: 160px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<div class="header"></div>
<body>
<div class="about">
<div class="inner-section">
<div class="header">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Projects</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</div>
<div class="body">
<h1>About Us</h1>
<p class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Doloribus velit ducimus, enim inventore earum, eligendi
nostrum pariatur necessitatibus eius dicta a voluptates sit
deleniti autem error eos totam
nisi neque voluptates sit deleniti autem error eos totam nisi neque.
</p>
<div class="skills">
<button>Contact Us</button>
</div>
</div>
</div>
</div>
</body>
</html>
question from:
https://stackoverflow.com/questions/65600758/navbar-interfering-with-content 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
