Currently working on a one-page scrollable website, aiming to have the first page consist of a navbar, image, and header. The challenge I'm facing is centered around aligning the header vertically. Although I managed to center it horizontally, the vertical alignment eludes me. Hoping for some assistance in identifying the issue as I've been grappling with this frustrating problem for hours.
You can get an idea of what I'm trying to achieve by referring to:
Below is the code snippet:
/*body {
background: linear-gradient(rgba(#F9774C, .75), rgba(#802A0C, .85));
background-image: url("Background_photo_2.jpg");
background-size: cover;
box-shadow: 4056 3000px rgba(0, 0, 0, 0) inset;
/* Center and scale the image nicely
background-position: center;
background-repeat: no-repeat;
height: 50%;
}*/
nav {
font-size: medium;
}
.nav-item a{
color: white !important
}
body, html {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
/*styles background image*/
.bg-img {
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 4000px 3000px rgba(0, 0, 0, 0.6) inset;
}
/* use this to change the general fonts */
p, h1 {
color: white;
}
/* arranges navbar items to right */
ul {
margin-left: auto;
}
.bg-img.container {
display: flex;
justify-content: center;
align-items: center;
}
#content {
width: 100%;
height: 85%;
display: flex;
justify-content: center;
align-items: center;
}
/*.container-fluid {
width: 70%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home - Both Sides Now </title>
<!-- BOOTSTRAP CDN IMPLEMENTATION-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Links to the stylesheet-->
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<div class="bg-img">
<!--This is the navbar-->
<div class="container col-md-10">
<nav class="navbar transparant navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="index.html"><img src="logotransparant.gif" class="d-inline-block align-top" width="60" height="60"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
</div>
<header class="masthead d-flex h-100 justify-content-center">
<div class="container ">
<div class="mx-auto text-center">
<h1 class="mx-auto my-0 text-uppercase">Grayscale</h1>
<h2 class="text-white-50 mx-auto mt-2 mb-5">A free, responsive, one page Bootstrap theme created by Start Bootstrap.</h2>
<a href="#about" class="btn btn-primary js-scroll-trigger">Get Started</a>
</div>
</div>
</header>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</div>
</html>