I have created two different sections with distinct backgrounds. However, I am facing an issue where these two divs are not appearing on the webpage.
My intention is to position the Navbar at the top and have another section below it that is not linked to the Navbar. Unfortunately, the second section does not seem to be displaying at all. I would appreciate any insights on why this might be happening. Thank you in advance for your help!
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Hair by Michelle
</title>
<link rel="stylesheet" type="text/css" href="home.css">
</head>
<body>
<div class="all">
<div class="navbar">
<ul> <h1>Hair By Michelle</h1>
<li class="home"><a href="#">home</a></li>
<li class="about"><a href="#">about</a></li>
<li class="availability"><a href="http://hairbymichelle.simplybook.me/sheduler/manage/">appointments</a></li>
<li class="contact"><a href="#">contact</a></li>
</ul>
</div>
<img class="pic1" src="https://scontent-lga1-1.xx.fbcdn.net/hphotos-xaf1/v/t1.0-9/598668_4520542180477_68371292_n.jpg?oh=024b6348716dcf01475a40d0576671e7&oe=5640E0C7" alt="Photo of Michelle">
</div>
<div class="hours">
<h1>Hours</h1>
</div>
</div>
CSS
body {
background: gray;
background-image: url("http://i.jootix.com/r/abstract-hair-design-abstract-hair-design-1920x1080.jpg")
}
.navbar {
text-align: center;
background-color: #323232;
position: fixed;
width: 100%;
z-index:100;
}
.navbar h1 {
text-align: center;
text-shadow: -2px 1px 13px;
color: white;
}
.navbar li {
display: inline;
border-right: 2px solid black;
margin: 10px;
padding-right: 25px;
color: white;
}
.navbar li:last-child {
border-right:none;
}
.navbar li a{
text-decoration: none;
text-shadow: 2px;
}
.navbar li a:link {
color: white;
}
.navbar li a:visited {
color: white;
}
.navbar li a:active {
color: green;
}
.navbar li a:hover {
color: brown;
}
.pic1 {
width: 200px;
height: 200px;
border-radius: 100%;
margin-top:5px;
position: absolute;
z-index: 200;
}
.hours h1 {
background-color: #323232;
z-index: 300;
}