To achieve the desired result of placing the text "Visit Us To Know More" behind the red navigation bar, simply include a z-index: 1000; to the nav element. This adjustment will position the navigation bar layer on top of the text. However, this will make the text unreadable.
Update: After some experimentation, I implemented grid-template-areas in your code to prevent text overflow issues.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>University</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,700;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fortawesome/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ed8b828399fc9a889e92909389c1cabeb998aba7bbbdb283aaadb1ad">[email protected]</a>/css/fontawesome.min.css">
</head>
<body>
<header class="header">
<nav>
<a href="index.html"><img src="img/logo.png"></a>
<div class="nav-links">
<i class="fa fa-times"></i>
<ul>
<li><a href="">HOME</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">COURSE</a></li>
<li><a href="">BLOG</a></li>
<li><a href="">CONTACT</a></li>
</ul>
</div>
<i class="fa fa-bars"></i>
</nav>
</header>
<main>
<div class="text-box">
<h1>World's Biggest University</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget iaculis dui, quis dapibus diam.
Etiam tellus erat, consectetur eget eros sit amet, tincidunt consectetur erat</p>
<a href="" class="hero-btn">Visit Us To Know More</a>
</div>
</main>
</body>
</html>
* {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
body {
display: grid;
height: fit-content;
grid-template-areas:
'header'
'section'
;
}
main {
grid-area: section;
display: flex;
width: auto;
background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), url(./img/banner.png);
height: 100vh;
vertical-align: middle;
}
.text-box {
background-color: gray;
}
header {
grid-area: header;
width: auto;
background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), url(./img/banner.png);
background-position: center;
background-size: cover;
position: relative;
}
nav {
display: flex;
padding: 2% 6%;
justify-content: space-between;
align-items: center;
position: sticky;
z-index: 1000;
}
nav img {
width: 150px;
}
.nav-links {
flex: 1;
text-align: right;
}
.nav-links ul li {
list-style: none;
display: inline-block;
padding: 8px 12px;
position: relative;
}
.nav-links ul li a {
color: #fff;
text-decoration: none;
font-size: 13px;
}
.nav-links ul li::after {
content: '';
width: 0%;
height: 2px;
background: #a85d58;
display: block;
margin: auto;
transition: 0.5s;
}
.nav-links ul li:hover::after {
width: 100%;
}
.text-box {
padding-top: 5rem;
height: 100%;
width: 100%;
color: #fff;
margin: 0 auto;
text-align: center;
}
.text-box h1 {
font-size: 62px;
}
.text-box p {
margin: 10px 0 40px;
font-size: 14px;
color: #fff;
}
.hero-btn {
display: inline-block;
text-decoration: none;
color: #fff;
border: 1px solid #fff;
padding: 12px 34px;
font-size: 13px;
background: transparent;
position: relative;
cursor: pointer;
}
.hero-btn:hover {
border: 1px solid #f44336;
background: #f44336;
transition: 1s;
}
@media all and (max-width: 700px) {
body {
display: grid;
grid-template-areas:
'section header'
'section header'
;
}
.text-box h1 {
padding-top: 10rem;
font-size: 20px;
}
.nav-links ul li {
display: block;
}
header {
background: #f44336;
text-align: left;
}
}