Html Source code
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=2, minimum-scale=1">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" media="all">
</head>
<body style="background-image: url(./images/header.jpg);" class="bg">
<nav class="navbar navbar-expand-md bg-dark menubar">
<div class="container"> <a href="#" class="brandlogo"><img src="./images/logo.jpg" alt=""> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item"> <a href="#" class="nav-link">Home </a> </li>
<li class="nav-item"> <a href="#" class="nav-link">About us </a> </li>
<li class="nav-item"> <a href="#" class="nav-link">Services </a> </li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item"> <a href="#" class="nav-link">Contact </a> </li>
<li class="nav-item"> <a href="#" class="nav-link">Services </a> </li>
<li class="nav-item"> <a href="#" class="nav-link">new </a> </li>
</ul>
</div>
</div>
</nav>
</body>
</html>
CSS Source code
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');
body {
font-family: 'Open Sans', sans-serif;
color: #292929;
}
.bg {
background-attachment: fixed;
background-repeat: no-repeat;
position: relative;
background-position: center center;
background-size: cover;
height: 100vh;
}
.bg::before {
content: "";
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: 0;
}
.brandlogo {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0px;
margin: auto;
text-align: center;
width: 82px;
}
.brandlogo>img {
max-width: 82px;
height: auto;
}
.menubar ul.navbar-nav>li.nav-item>a.nav-link {
color: #fff;
padding: 10px 30px !important;
font-size: 18px;
text-transform: uppercase;
transition: ease 0.3s all;
}
.menubar ul.navbar-nav>li.nav-item>a.nav-link:hover {
color: chocolate;
}
No comments:
Post a Comment