I am trying to create a page header with a specific requirement of the banner image, which has a 4 cross lines in the design along with the logo.
Image: https://sample.tiiny.site/resources/home-banner-bg.png
I have to place some text on the dark blue bar & some on the light blue bar. so that they should be aligned with the image in the left logo.
<!doctype html>
<html lang="en">
<head>
<!-- Bootstrap CSS -->
<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;
}
body {
padding-top: 0px;
margin-top: 0px;
}
.carousel-caption {
bottom: 0rem;
right: -15rem;
left: 30rem;
z-index: 999;
/*z-index: 0;*/
}
</style>
</head>
<body style="margin: 0px; border: 0px;">
<!--Trying to achieve with carousel-->
<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">
<nav class="navbar navbar-expand-lg">
<div class="mx-auto d-sm-flex d-block flex-sm-nowrap">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Pricing</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">List 1</a></li>
<li><a class="dropdown-item" href="#">List 2</a></li>
<li><a class="dropdown-item" href="#">List 3</a></li>
<li><a class="dropdown-item" href="#">List 4</a></li>
<li><a class="dropdown-item" href="#">List 5</a></li>
<li><a class="dropdown-item" href="#">List 6</a></li>
<li><a class="dropdown-item" href="#">List 7</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Products
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">List 1</a></li>
<li><a class="dropdown-item" href="#">List 2</a></li>
<li><a class="dropdown-item" href="#">List 3</a></li>
<li><a class="dropdown-item" href="#">List 4</a></li>
<li><a class="dropdown-item" href="#">List 5</a></li>
<li><a class="dropdown-item" href="#">List 6</a></li>
<li><a class="dropdown-item" href="#">List 7</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<br />
<p class="white small text-center text-uppercase" style="padding: 0px; margin: 2px;">
Elevate your app development with .NET 8.
</p>
<p class="small text-center" style="font-size: x-small; font-weight: 300; padding: 0px; margin: 1px; color: #f2ebeb;">
Fully-featured integrated development environment (IDE) on Windows for building every type of .NET application.
<br />
Develop on Linux, macOS, or Windows to build cross-platform websites and services. Install the C# Dev Kit to get the best experience.
</p>
</div>
</div>
</div>
</div>
<!--Trying to achieve with Table-->
<br /><br /><br />
<h2>Table with Background Image</h2>
<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 style="padding: 0px;height:100px;width:30%">
<td style="padding: 0px;width:500px;" rowspan="2">
</td>
<td>
<nav class="navbar navbar-expand-lg">
<div class="mx-auto d-sm-flex d-block flex-sm-nowrap">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Pricing</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">List 1</a></li>
<li><a class="dropdown-item" href="#">List 2</a></li>
<li><a class="dropdown-item" href="#">List 3</a></li>
<li><a class="dropdown-item" href="#">List 4</a></li>
<li><a class="dropdown-item" href="#">List 5</a></li>
<li><a class="dropdown-item" href="#">List 6</a></li>
<li><a class="dropdown-item" href="#">List 7</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Products
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">List 1</a></li>
<li><a class="dropdown-item" href="#">List 2</a></li>
<li><a class="dropdown-item" href="#">List 3</a></li>
<li><a class="dropdown-item" href="#">List 4</a></li>
<li><a class="dropdown-item" href="#">List 5</a></li>
<li><a class="dropdown-item" href="#">List 6</a></li>
<li><a class="dropdown-item" href="#">List 7</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</td>
</tr>
<tr style="padding: 0px; height:100px; width: 70%;">
<td style="padding: 0px;">
<p class="white small text-center text-uppercase" style="padding: 0px; margin: 2px;">
Elevate your app development with .NET 8.
</p>
<p class="small text-center" style="font-size: x-small; font-weight: 300; padding: 0px; margin: 1px; color: #f2ebeb;">
Fully-featured integrated development environment (IDE) on Windows for building every type of .NET application.
<br />
Develop on Linux, macOS, or Windows to build cross-platform websites and services. Install the C# Dev Kit to get the best experience.
</p>
</td>
</tr>
</table>
</body>
</html>Approach 1. I have tried with carousel, and using carousel-caption to place the text on top of it. The challenge is in different screen texts are not looking great. Also if navbar dropdown is cut, as I see the restriction of dropdown being confined to the carousel area only. whereas I have longer dropdowns.
Approach 2. I have tried with table with image in the background, but not able to position the text, it keeps overlapping with the image. Also navbar dropdown issue still persists.
Please advise what would be the best way to handle this. I have put the sample here, Also I have the complete code in the code snippet.
https://sample.tiiny.site/
Blockquote