I've successfully configured the navigation bar, added an image with text, and now I am looking to center and overlap another menu at the bottom of the image, similar to the example provided. Here is How I envision it to appear
However, this is How it currently appears
I have only included the code for the image and the bottom part as the navigation bar code is irrelevant.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'/>
<title>SerFin</title>
<link href="https://fonts.googleapis.com/css?family=Lato:300,700|Prata" rel="stylesheet">
<style>
.HomeTabImage {
background-image: url('Images/Chairs.jpg');
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<script>
</script>
<link rel='stylesheet' href='Styles.css'/>
</head>
<body>
<header class="TopMenu">
<nav class="TopSetup-Container">
<img src="Images/Logo.png"/ id="Logo">
<ul class="Menu">
<li><a href="#">Login</a></li>
<li><a href="#">Sign Up</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<ul class="Menu">
<li><a href="#">Support</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Submission</a></li>
<li><a href="#">Tutorial</a></li>
</ul>
</nav>
</header>
<article class="HomeTabImage">
<h1> Service Finder </h1>
<p> Let the opportunities begin </p>
<p> Everything we do is driven by opportunities </p>
<p> Search and provide services </p>
</article>
<article class="Services">
<h3 id="HomeTabServicesTitle"> Here are the services provided by the community </h3>
<div class="ServicesContainer">
<ul class="Options">
<li><a href="#">Univeristies<br>🎓</br></a></li>
<li><a href="#">Internships<br>📊</br></a></li>
<li><a href="#">Courses<br>💻</br></a></li>
<li><a href="#">Jobs<br>💼</br></a></li>
<li><a href="#">Services<br>🌐</br></a></li>
</ul>
</div>
</article>
</body>
</html>
CSS
.HomeTabImage {
height: 340px;
width: 100%;
text-align: center;
line-height: normal;
}
.HomeTabImage h1 {
font-size: 70px;
color: black;
}
.HomeTabImage p {
font-size: 50px;
color: black;
}
/*Home Tab Info part*/
.Services {
text-align: center;
width: 80%;
}
.Services p {
width: 640px;
}
.ServicesContainer {
}
#HomeTabServicesTitle {
color: #828282;
border-bottom: 2px solid #8B8C8C;
padding-top: 20px;
padding-bottom: 10px;
}
.Options {
display: flex;
justify-content: space-around;
width: 100%;
padding-top: 20px;
}
.Options li {
list-style: none;
}
.Options a {
font-size: 25px;
}