To create a page header with a unique design, I am looking to incorporate a banner image with 4 cross lines along with the logo.
Image Link
The goal is to align text on both the dark blue and light blue bars with the logo on the left side of the image.
<!doctype html>
<html lang="en">
<head>
<!-- CSS links -->
<link rel="stylesheet" type="text/css" href="https://sample.tiiny.site/resources/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://sample.tiiny.site/resources/style.css">
<link rel="stylesheet" type="text/css" href="https://sample.tiiny.site/resources/owl.carousel.css">
<style>
.nav-link {
color: #ffffff;
text-transform: uppercase !important;
}
/* Additional styles */
</style>
</head>
<body>
<!-- Carousel implementation -->
<div class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<a href="/sell-your-boat">
<img src="https://sample.tiiny.site/resources/home-banner-bg.png" class="d-block w-100">
</a>
<div class="carousel-caption text-end">
<!-- Navbar content -->
</div>
</div>
</div>
</div>
<!-- Table implementation -->
<table class="d-none d-sm-block table-responsive" style="padding: 0px; width: 100%;background-image:url('https://sample.tiiny.site/resources/home-banner-bg.png');background-repeat: no-repeat;background-size:cover;" border="1">
<tr>
<td>
<!-- Navbar content -->
</td>
</tr>
<tr>
<td>
<p>Text content here</p>
</td>
</tr>
</table>
</body>
</html>
Approach 1: Carousel method with text placement. Text alignment and responsiveness are concerns, especially with navbar dropdowns.
Approach 2: Table method with image background. Issues with text positioning and navbar dropdown alignment persist.
Your feedback on the best approach is appreciated. Full code available at: Code Sample