Hi RichardSa,
Refer below example.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Cosmic</title>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" intergrity="sha384-AYmEC3Yw5cVb3ZcuHt0A9w35dYTsvhLPVnYs9eStHfGJv0vKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' />
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" />
<link href="http://fonts.cdnfonts.com/css/renogare" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<style type="text/css">
.wrapper {
background-repeat: no-repeat;
height: 1000px;
background-position: center;
background-size: cover;
overflow: hidden;
position: relative;
}
.footer {
width: 100%;
position: fixed !important;
}
.top {
height: 100%;
background-size: cover;
background-color: rgb(245, 245, 245);
width: 100%;
z-index: 100;
}
.navbar-nav {
margin-left: auto;
}
#navbarNav li a {
color: #eeeeee;
font-family: 'Be Vietnam', sans-serif;
font-size: 11pt;
font-weight: bolder;
}
.nav-item {
float: right;
}
.navbar-nav .active {
color: #eeeeee;
}
#navbarNav li a::after:hover {
color: #eeeeee;
}
.navbar-brand:hover {
color: #eeeeee;
}
.container2 {
width: 100%;
}
.container {
width: 100%;
}
.title {
line-height: 1.33;
letter-spacing: -.5px;
margin-bottom: 5px;
margin-top: 0%;
}
.desc {
margin-bottom: 50px;
margin-top: 12px;
line-height: 1.7;
}
@media(min-width:992px) {
.col-md-6:not(:first-child) {
}
.col-md-6:not(:last-child) {
border-right: 1px solid #200662;
border-left: 1px;
}
.form-horizontal {
line-height: 1.33;
letter-spacing: -.5px;
margin-bottom: 5px;
margin-top: 0%;
}
}
#btnstart {
border-radius: 5px;
background-color: #32657c;
font-weight: 500;
font-size: 12pt;
}
#btnstart:hover {
color: #eeeeee;
background-color: steelblue;
}
#working {
border-radius: 5px;
background-color: #32657c;
font-weight: 500;
font-size: 11pt;
}
.img-circle {
border-radius: 50%;
float: left;
}
#imgone {
width: 100%;
height: auto;
}
@media screen and (min-width: 360px) and (max-width:640px) {
#imgone {
width: 100%;
height: auto;
}
#boldhead {
font-size: 17pt;
}
}
.frontimg {
width: 100%;
height: auto;
}
.image-fluid {
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
.row::after {
content: "";
clear: both;
display: table;
}
@media screen and (max-width: 500px) {
.column {
width: 100%;
}
}
#newclients {
font-family: 'Be Vietnam', sans-serif;
}
span.step {
background: #ececed;
border-radius: 1.6em;
-moz-border-radius: 1.6em;
-webkit-border-radius: 1.6em;
color: #ffffff;
display: inline-block;
font-weight: bold;
line-height: 2.5em;
text-align: center;
width: 2.5em;
margin-left: auto;
margin-right: auto;
font-size: 20pt;
}
#dots {
width: 100%;
height: auto;
position: absolute;
background-size: cover;
background-repeat: no-repeat;
opacity: 0.2;
margin-top: -29%;
}
#img6 {
width: 100%;
height: 200px;
}
#img7 {
width: 100%;
height: 200px;
}
#img0 {
width: 100%;
height: 200px;
}
@media screen and (min-width: 360px) and (max-width:640px) {
#qr {
display: none;
}
}
.navbar-toggler > .close {
display: inline;
}
.navbar-toggler.collapsed > .close, .navbar-toggler:not(.collapsed) > .navbar-toggler-icon {
display: none;
}
</style>
<script type="text/javascript">
$(window).scroll(function () {
if ($(window).scrollTop() >= 50) {
$('.navbar').css('background', '#32657c');
$('.nav-link').css('color', '#eeeeee');
$('.navbar-brand').css('color', '#eeeeee');
$('#newclients').css('color', '#eeeeee');
$('#newclients').css('border-color', '#eeeeee');
$('#newclients').css('background', '#32657c');
}
else {
$('.navbar').css('background', 'transparent');
$('.nav-link').css('color', '#32657c');
$('.navbar-brand').css('color', '#32657c');
$('#newclients').css('border-color', '#32657c');
$('#newclients').css('color', '#32657c');
$('#newclients').css('background', 'transparent');
}
if (!$('#dvMobile').is(':hidden')) {
$('.navbar-nav').css('background', '#32657c');
$('.nav-link').css('color', '#eeeeee');
$('.navbar-brand').css('color', '#eeeeee');
$('#newclients').css('color', '#eeeeee');
$('#newclients').css('border-color', '#eeeeee');
$('#newclients').css('background', 'transparent');
}
});
$(function () {
MobileNavColor();
});
function MobileNavColor() {
if ($('#dvMobile').is(':hidden')) {
$('.navbar').css('background', 'transparent');
$('.nav-link').css('color', '#32657c');
$('.navbar-brand').css('color', '#32657c');
$('#newclients').css('border-color', '#32657c');
$('#newclients').css('color', '#32657c');
$('#newclients').css('background', 'transparent');
} else {
$('.navbar').css('background', 'transparent');
$('.navbar-nav').css('background', '#32657c');
$('.nav-link').css('color', '#eeeeee');
$('.navbar-brand').css('color', '#eeeeee');
$('#newclients').css('color', '#eeeeee');
$('#newclients').css('border-color', '#eeeeee');
$('#newclients').css('background', 'transparent');
$('.navbar-toggler').css('background', '#32657c');
}
}
</script>
</head>
<body style="background-color: #f9fcfe; font-family: Roboto;">
<form id="form1" runat="server">
<asp:ScriptManager ID="script" runat="server"></asp:ScriptManager>
<div class="wrapper">
<div class="top">
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="header" style="font-family: Nunito;">
<a class="navbar-brand" href="Default.aspx" style="font-family: 'Renogare Soft', sans-serif; font-weight: 500; font-size: 16pt;">
<i class="fas fa-bowling-ball" aria-hidden="true" style="margin: 0 7px; font-size: 20pt; color: #44a6e8;"></i>Cosmic</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style="background-color: transparent; border-color: none; font-size: 10pt; border-width: 0px; color: #fff;">
<span class="close">X</span>
<span class="navbar-toggler-icon" style="font-size: 10pt; color: #fff;"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link active" href="Default.aspx" style="font-weight: bolder;">
<i class="fa fa-home" aria-hidden="true" style="margin: 0 7px; font-size: 11pt;"></i>home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="About.aspx" style="font-weight: bolder;">
<i class="fas fa-address-card" aria-hidden="true" style="margin: 0 7px; font-size: 11pt;"></i>about Us
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Contact.aspx" style="font-weight: bolder;">
<i class="fas fa-address-book" aria-hidden="true" style="margin: 0 7px; font-size: 11pt;"></i>contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="LoginForm.aspx" style="font-weight: bolder;">
<i class="fas fa-sign-in" aria-hidden="true" style="margin: 0 7px; font-size: 11pt;"></i>login
</a>
</li>
<li class="nav-item">
<asp:Button ID="newclients" runat="server" CssClass="btn" Font-Bold="true" Font-Size="10pt" Text="Create free account" />
</li>
</ul>
</div>
</nav>
<div id="dvMobile" class="visible-lg hidden-xl d-block d-lg-none"></div>
<div>
<img id="dots" alt="dotted" src="images/curly.jpg" />
<div class="line" style="color: #fff;">
</div>
<div class="row" id="frontpage" style="width: 98%; margin: 0 auto; padding: 35px; top: 1%;">
<div class="col-sm-7" style="margin: 0 auto; padding: 5px;">
<br />
<div class="container" style="margin-top: 4%; padding: 0px; top: 8%;">
<label id="boldhead" style="font-family: Roboto; font-size: 7.0vmin; color: #002335; top: 6%; font-weight: 900;">Best Prices for your Kids</label>
<br />
<p id="secondhead" style="font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 13pt; color: #05214d;">
Start yourshopping for your kids anywhere and anytime!
</p>
<br />
<asp:Button ID="btnstart" runat="server" class="btn btn-lg btn-primary" PostBackUrl="~/SignUp.aspx" Text="Create an account" />
<br />
<br />
</div>
</div>
<div class="col-sm-4" id="qr" style="margin: 0 auto;">
<div class="container-fluid p-3 mb5 bg-transparent rounded">
<i class="fas fa-home" aria-expanded="true" style="margin: 0 auto; font-size: 290pt; color: #32657c; opacity: 0.9;"></i>
</div>
</div>
</div>
</div>
<br />
<br />
</div>
<div class="back-cont" style="background-color: #eeeeee;">
<div class="container-fluid" style="text-align: center; padding: 30px;">
</div>
<br />
</div>
<div class="contain" style="margin: 0 auto; padding: 10px;">
<br />
</div>
</div>
</form>
</body>
</html>
Screenshot
