So I have written the following code for my personal website:
Here is the HTML:
<html>
<head>
<meta charset="utf-8">
<title>My Website</title>
<link rel="stylesheet" href="assets/css/style.css">
<script src="js/jquery-1.11.1.min.js"></script>
</head>
<body>
<div id="jumbotron">
<div id="title-container">
<h1>My Website</h1>
<h3>Personal Portfolio</h3>
</div>
<div id="jumbotron-overlay"></div>
</div>
<div id="profile"></div>
</body>
</html>
And here is the CSS:
body {
background: url(../img.jpg) no-repeat top center fixed;
background-size: cover;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: 'Open Sans', sans-serif;
}
h1, h3 {
color: #fff;
text-align: center;
}
h1 {
margin-top: 400px;
margin-bottom: 0px;
font-size: 62pt;
}
h3 {
margin-top: 20px;
font-size: 24pt;
}
#title-container {
width: 100%;
height: 200px;
}
#jumbotron {
margin: 0px;
padding: 0px;
width: 100%;
height: 600px; //FIXME
}
#jumbotron-overlay {
background-color: #6ACF56;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 1000px;
opacity: .5;
}
#profile {
width: 100%;
height: 640px;
background-color: white
}
I am facing an issue where my "My Website" and "personal portfolio" inside the h tags are being hidden behind the green overlay. I have tried using z-index but it doesn't seem to work. Any suggestions or guidance would be greatly appreciated as I am new to front-end development.