<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mountains</title>
<link rel="stylesheet" href="/css/style.css">
<style>
/*css stylization*/
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
header{
justify-content: space-between;
align-items: center;
display: flex;
padding: 10px 50px;
}
.logoname{
margin-bottom: 10px;
}
.logo img{
height: 50px;
width: 50px;
cursor: pointer;
}
.navlinks{
list-style-type: none;
}
.navlinks li{
display: inline-block;
padding: 20px;
}
.navlinks li a{
transition: all 0.3s ease 0s;
text-decoration: none;
font-family: roboto;
}
.navlinks li a:hover{
color: aquamarine;
}
/*hero image code*/
.herobanner {
background-image:url(/image/herobanner.jpg);
width: 100%;
}
.herotext {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #000;
}
</style>
</head>
<body>
<header>
<figure class="logo">
<img src="\image/logo.png" alt="logo">
</figure>
<nav>
<ul class="navlinks">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">GALERY</a></li>
</ul>
</nav>
</header>
<div class="herobanner">
<span class="herotext">
<h1>LIVE HIGH</h1>
</span>
</div>
</body>
</html>
Having created a navigation bar and attempted to add a hero banner underneath it, I encountered an issue where the image URL did not work properly, resulting in the image not being displayed. However, the text within the herotext class was successfully centered as intended.
If anyone has suggestions on how to resolve this issue with the code, your assistance would be greatly appreciated. Thank you for taking the time to help me troubleshoot this problem.