why navigation bar is not going on the top?

why navigation bar is not going on the top? - html

My navbar is not showing at the top. I have used my bootstrap-css file and custom scss file. I am attaching the screenshot.
Also, I wanted to know if the overlay div present here is important or not.
I want it to look like this, and my current page looks like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./CSS/style.css">
<title>Aurora Grove</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark ">
<a class="navbar-brand" href="#"><h3 class="mb-0">Aurora Grove</h3></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#MainNav" aria-controls="MainNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="MainNav">
<ul class="navbar-nav ml-auto">
<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="#">About</a></li>
<li class="nav-item">
<a class="nav-link" href="#">Explore</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Book</a>
</li>
</ul>
</div>
</nav>
<section id="showcase" class="d-flex justify-content-center align-items-center">
<div id="overlay"></div>
<div class="container text-center text-white " id="header">
<h3 class="display-5">mordern camping</h3>
<h1 class="display-1">Aurora Grove</h1>
<p class="lead d-none d-md-block">Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores?</p>
<button id="book" class="btn btn-primary px-5">Book Now</button>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
scss file
body{
background-color: #d460bb;
font-family: "Raleway",sans-serif;
}
.navbar{
font-weight: 100;
position: fixed;
top: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
.navbar-brand h3{
font-weight: 100;
}
.nav-item{
font-size: 1.4rem;
}
.nav-link:hover{
transition: border 0.2s;
border-bottom: 1px solid white;
}
}
// showcasase
#showcase{
background: url('../images/main.jpeg') bottom center no-repeat;
min-height: 30rem;
position: relative;
#header{
z-index: 2;
}
#overlay{
background: rgba($color: #000000, $alpha: 0.2);
position: absolute;
top: 0rem;
left: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 1;
}
h1{
font-family: "Questrial",sans-serif;
line-height: 1;
}
#book{
font-size: 1.5rem;
border-radius: 2rem;
}
}
// phone
#media (max-width:768px){
.navbar{
background: #1f1f1f;
.nav-link:hover{
border-bottom: none;
}
}
// showcase
#showcase{
min-height: 500px;
h1{
font-size: 4rem;
}
}
}
Thanks.

It was mainly due to the height:100%.
body {
font-family: "Raleway", sans-serif;
}
.navbar {
font-weight: 100;
position: fixed;
top: 0;
right: 0;
left: 0;
width: 100%;
z-index: 3;
}
.navbar-brand h3 {
font-weight: 100;
}
.nav-item {
font-size: 1.4rem;
}
.nav-link:hover {
transition: border 0.2s;
border-bottom: 1px solid white;
}
#showcase {
background: url("https://images.unsplash.com/photo-1478827536114-da961b7f86d2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop")
no-repeat bottom center;
min-height: 30rem;
position: relative;
#header {
z-index: 2;
}
#overlay {
background: #000000;
opacity: 0.2;
position: absolute;
top: 0rem;
left: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 1;
}
h1 {
font-family: "Questrial", sans-serif;
line-height: 1;
}
#book {
font-size: 1.5rem;
border-radius: 2rem;
}
}
// phone
#media (max-width: 768px) {
.navbar {
background: #1f1f1f;
.nav-link:hover {
border-bottom: none;
}
}
// showcase
#showcase {
min-height: 500px;
h1 {
font-size: 4rem;
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Template</title>
<!-- bootstrap 4.4 -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top">
<a class="navbar-brand" href="#"><h3 class="mb-0">Aurora Grove</h3></a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#MainNav"
aria-controls="MainNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="MainNav">
<ul class="navbar-nav ml-auto">
<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="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Explore</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Book</a>
</li>
</ul>
</div>
</nav>
<section
id="showcase"
class="d-flex justify-content-center align-items-center"
>
<div id="overlay"></div>
<div class="container text-center text-white " id="header">
<h3 class="display-5">mordern camping</h3>
<h1 class="display-1">Aurora Grove</h1>
<p class="lead d-none d-md-block">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores?
</p>
<button id="book" class="btn btn-primary px-5">Book Now</button>
</div>
</section>
<!-- Bootstrap js ,popper js and jquery -->
<script
src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"
></script>
</body>
</html>
As part of your follow-up question
Also, I wanted to know if the overlay div present here is important or not?
It depends on you if you want to add an overlay effect on certain area not. Generally it is added to make some part closer(more appealing/more focused) to the user

You have mentioned height:100% in the styles for .navbar.
I changed that to height:15vh; and it seems to work fine.
Feel free to play with the value until you find it suitable.

Related

navbar color can't vanished or transparent because it linked body color, how to solve it?

#import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght#400;500;600;700&display=swap');
:root {
--color-body: #b6cbce;
--color-heading: #eef3db;
--color-base: #033f47;
--color-base2: #022a30;
--color-brand: #e0f780;
--color-brand2: #deff58;
--sidbar-width: 240px;
--font-base: "Bai Jamjuree";
}
*{
background-color: var(--color-base2);
color: var(--color-base);
font-family: var(--font-base);
}
.navbar .nav-link {
font-weight: 700;
text-transform: uppercase;
color: white;
transition:all 0.5s ease-in;
}
.navbar .nav-link:hover{
color: var(--color-brand);
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--color-heading);
color: aliceblue;
font-weight: 700;
}
a {
text-decoration: none;
color: var(--color-body);
transition: all 0.5s ease;
}
a:hover {
color: var(--color-brand);
}
img {
width: 100%;
}
h3 {
color: white;
}
#media (min-width:992px) {
.navbar {
min-height: 100vh;
width: 240px;
background: linear-gradient(rgba(3, 63, 71, 0.623), rgba(3, 63, 71, 0.853)), url(./sidebar-img.jpg);
background-size: cover;
background-position: center;
}
.navbar img{
border: 8px solid var(--color-brand);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href=" https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css">
</head>
<body>
<!-- Navigation bar start -->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
<div class="container flex-lg-column">
<a class="navbar-brand mx-lg-auto mb-lg-4" href="#"><span class="h3 text-white fw-bold d-block d-none">Shuvo Raj</span>
<img src="./person.jpg" class="d-none d-lg-block rounded-circle" alt="">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 ms-auto flex-lg-column text-lg-center">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#work">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#reviews">Reviews</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- navigation bar close -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js"
integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js"
integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V"
crossorigin="anonymous"></script>
</body>
</html>
navbar color can't vanish or be transparent because it is linked to body color, how to solve it? I'm practicing some projects with some youtube tutorials. and I got an error or I can't do like same as a developer?
I'm doing this project with html/css/bootstap5
This is a Problem!!`
i Want to do as like it
Html Code
``

There is multiple approaches to this, on the css for *{…} you can use *:not(.navbar){…
Or you can use !important at the end of background such as:
background-color:#33b5e5 !important;

Why is the opacity of the background color of the HTML hr tag decreasing?

I want to change the height and background color of the <hr> tag in HTML. Although the height and color change, but it seems the background color opacity is reducing slightly. Why is this happening?
My Code:
<hr class="mb-4" style="width: 10%; margin: auto; height: 10px; border: none; color:#f24516; background-color:#f24516;">
How can I get the original color and why is this problem happening? I am using the current version of Chrome (Windows 10).
Edited
I get such output in the browser when I run the whole code:
My whole code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="./images/favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
text-decoration: none;
list-style: none;
}
header {
background: url(./images/bg-masthead.jpg) no-repeat center center/cover;
color: white;
font-weight: bold;
}
.navbar-brand {
font-size: 20px;
}
#header-texts-1 {
font-size: 50px;
}
#header-texts-2 {
font-size: 20px;
font-weight: normal;
}
#header-btn {
background: #f24516;
color: white;
padding: 15px 20px;
border-radius: 30px;
letter-spacing: 0.8px;
}
/* ========================= Responsive ========================= */
#media (min-width: 992px) {
.navbar-expand-lg {
background: transparent !important;
}
a {
color: white !important;
}
}
</style>
<title>Creative</title>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col">
<nav class="navbar navbar-expand-lg navbar-light bg-light menu" id="navigation">
<div class="container-fluid">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
<div class="navbar-nav" id="nav-items">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Protfolio</a>
<a class="nav-link" href="#">Contact</a>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="row text-center py-5" id="header-texts">
<div class="col">
<p id="header-texts-1">YOUR FAVORITE SOURCE OF FREE<br>BOOTSTRAP THEMES</p>
<hr class="mb-4" style="width: 10%; margin: auto; height: 10px; border: none; color:#f24516; background-color:#f24516;">
<p id="header-texts-2">Start Bootstrap can help you build better websites using the Bootstrap<br>framework! Just download a theme and start customizing, no strings attached!</p>
<button class="btn mt-4" id="header-btn">FIND OUT MORE</button>
</div>
</div>
</div>
</header>
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>

In your reboot.scss you have an hr style with opacity:.25;.
Add:
hr {
opacity:1;
}
<hr class="mb-4" style="width: 10%; margin: auto; height: 10px; border: none; color:#f24516; background-color:#ff0000;">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="./images/favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
text-decoration: none;
list-style: none;
}
header {
/*background: url(./images/bg-masthead.jpg) no-repeat center center/cover;*/
color: white;
font-weight: bold;
}
.navbar-brand {
font-size: 20px;
}
#header-texts-1 {
font-size: 50px;
}
#header-texts-2 {
font-size: 20px;
font-weight: normal;
}
#header-btn {
background: #f24516;
color: white;
padding: 15px 20px;
border-radius: 30px;
letter-spacing: 0.8px;
}
hr {
opacity:1;
}
/* ========================= Responsive ========================= */
#media (min-width: 992px) {
.navbar-expand-lg {
background: transparent !important;
}
a {
color: white !important;
}
}
</style>
<title>Creative</title>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col">
<nav class="navbar navbar-expand-lg navbar-light bg-light menu" id="navigation">
<div class="container-fluid">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
<div class="navbar-nav" id="nav-items">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Protfolio</a>
<a class="nav-link" href="#">Contact</a>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="row text-center py-5" id="header-texts">
<div class="col">
<p id="header-texts-1">YOUR FAVORITE SOURCE OF FREE<br>BOOTSTRAP THEMES</p>
<hr class="mb-4" style="width: 10%; margin: auto; height: 10px; border: none; color:#f24516; background-color:#f24516;">
<p id="header-texts-2">Start Bootstrap can help you build better websites using the Bootstrap<br>framework! Just download a theme and start customizing, no strings attached!</p>
<button class="btn mt-4" id="header-btn">FIND OUT MORE</button>
</div>
</div>
</div>
</header>
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>

You have a reboot.css in bootstrap file that has opacity: .25, so you have to reset your hr by adding opacity: 1 to it

HTML header won't center

I'm making a single page scrollable website and want to have the first page to be just a navbar, image, and a header. Now the problem is that I was unable to center the header. Well, at least I got it to center horizontally. But I'm unable to center it vertically. I hope somebody can spot the issue because I've been puzzling this annoying issue for hours.
This: https://startbootstrap.com/previews/grayscale/ is the idea I'm going for, to make it clear.
Here is the code
/*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 {
/*background-image: url("Background_photo_2.jpg");*/
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>
Get Started
</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>

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 {
/*background-image: url("Background_photo_2.jpg");*/
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%;
} */
.mx-auto {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<!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="my-0 text-uppercase">Grayscale</h1>
<h2 class="text-white-50 mt-2 mb-5">A free, responsive, one page Bootstrap theme created by Start Bootstrap.</h2>
Get Started
</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>

No need to use styles. Bootstrap does it for you :
<header class="row align-items-center 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>
Get Started
</div>
</div>
</header>
Add two classes to header div that I have added above.
Note : after you added row class maybe you have to add col to your content elements.

There is two option to do vertical center
you need to give the position to your navigation bar so it does not calculate in flexbox, for that you need to change your code a little bit.
you need to cut out your navigation bar height from your page, so it does not calculate in flexbox, I calculated your navbar height and its equal to 86px so, I will cut 172px from your page
Now you need to choose best way, from my side, first is better than second.
1st Idea
Just added align-items-center vh-100 in masthead class tag and added CSS
.bg-img > .container {
position: fixed;
top: 0;
left: 0;
right: 0;
}
/*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 {
/*background-image: url("Background_photo_2.jpg");*/
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%;
}*/
.bg-img > .container {
position: fixed;
top: 0;
left: 0;
right: 0;
}
<!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 vh-100 align-items-center 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>
Get Started
</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>
2nd Idea
Just added align-items-center in masthead class tag and added CSS
.masthead {
height: calc(100vh - 172px);
}
/*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 {
/*background-image: url("Background_photo_2.jpg");*/
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%;
}*/
.masthead {
height: calc(100vh - 172px);
}
<!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 align-items-center 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>
Get Started
</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>

How to fill white space with the image

I want the image to fill in the column of the page:- https://i.stack.imgur.com/VtgcW.jpg
I am trying to recreate a website to test my skills the website is:-https://www.simplesite.com
It is working when I assign it to the body but when I assign it to the div then there is white space below. I have tried a lot of things still can't get rid of this white space. Any help would be appreciated
HTML:-
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="app.css">
<link rel="stylesheet" href="header">
<title>SimpleSite</title>
</head>
<body>
<div class="contain">
<Section id="Navbar">
<nav id="mainNavbar" class="navbar navbar-light navbar-expand-md fixed-top pt-3">
SimpleSite
<button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navLinks">
<ul class="navbar-nav">
<li class="nav-item">
Make a free website or blog
</li>
<li class="nav-item">
Customer Service
</li>
<li class="nav-item">
Features
</li>
<li class="nav-item">
Themes
</li>
<li class="nav-item">
Our Blog
</li>
<li class="nav-item">
Careers
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item" id="button">
LOG IN
</li>
<li class="nav-item">
<a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-globe" style="font-size: 20px;"></i> English
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
Español
Français
Dansk
</div>
</li>
</ul>
</div>
</nav>
</Section>
<Section id="bgimage">
<div class="container">
<div class="row">
<div class="col-md-12" id="special">
<h1 class="text-center text-white">Create your website in <span>three simple steps</span></h1>
<p class="text-center text-white"><strong>-it's free!-</strong></p>
<button class="btn btn-danger rounded-pill"><span>START HERE</span></button>
</div>
</div>
</div>
</Section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</div>
</body>
</html>
CSS:-
#mainNavbar .navbar-brand {
font-size: 2.4rem;
font-family: "Trebuchet MS", Tahoma, Geneva, Arial, Helvetica, sans-serif;
color: #EA1C2C;
font-weight: 900;
}
#mainNavbar .nav-link {
color: #ffffff;
font-family: Roboto;
font-weight: 300;
font-size: 1.4rem;
}
#mainNavbar .nav-item {
margin-left: 1.2rem;
}
#button .btn-success {
color: white;
background-color: transparent;
border-color: white;
border-radius: 30px;
width: 125px;
font-weight: 400;
}
#special {
padding-top: 33%;
}
#special h1 {
font-size: 55px;
font-weight: 100;
letter-spacing: 1.7px;
}
#special p {
font-size: 30px;
font-weight: 400;
letter-spacing: 2.0px;
padding-top: 30px;
}
#special span {
font-weight: 600;
}
#special button {
margin-top: 1.2rem;
height: 50px;
width: 200px;
margin-left: 40%;
padding-right: 20px;
padding-bottom: 10px;
}
.contain {
background: url("imgs/starter5.jpg") center center;
background-repeat: no-repeat;
background-size: ;
}

Please check this jsfiddle link. Hope this solves your problem. Below is the same code.
#mainNavbar .navbar-brand {
font-size:2.4rem;
font-family: "Trebuchet MS", Tahoma, Geneva, Arial, Helvetica, sans-serif;
color: #EA1C2C;
font-weight: 900;
}
#mainNavbar .nav-link {
color: #ffffff;
font-family: Roboto;
font-weight: 300;
font-size: 1.4rem;
}
#mainNavbar .nav-item {
margin-left: 1.2rem;
}
#button .btn-success {
color: white;
background-color: transparent;
border-color: white;
border-radius: 30px;
width: 125px;
font-weight: 400;
}
#special {
padding-top: 33%;
}
#special h1 {
font-size: 55px;
font-weight: 100;
letter-spacing: 1.7px;
}
#special p {
font-size: 30px;
font-weight: 400;
letter-spacing: 2.0px;
padding-top: 30px;
}
#special span {
font-weight: 600;
}
#special button {
margin-top: 1.2rem;
height: 50px;
width: 200px;
margin-left: 40%;
padding-right: 20px;
padding-bottom: 10px;
}
.contain {
background: url("https://previews.123rf.com/images/dolgachov/dolgachov1407/dolgachov140701912/29971506-business-interview-employment-and-office-concept-business-team-with-tablet-pc-computer-interviewing-.jpg") center center / cover;
background-repeat: no-repeat;
background-size: ;
min-height: 100vh;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="app.css">
<link rel="stylesheet" href="header">
<title>SimpleSite</title>
</head>
<body>
<div class="contain">
<Section id="Navbar">
<nav id="mainNavbar" class="navbar navbar-light navbar-expand-md fixed-top pt-3">
SimpleSite
<button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navLinks">
<ul class="navbar-nav">
<li class="nav-item">
Make a free website or blog
</li>
<li class="nav-item">
Customer Service
</li>
<li class="nav-item">
Features
</li>
<li class="nav-item">
Themes
</li>
<li class="nav-item">
Our Blog
</li>
<li class="nav-item">
Careers
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item" id="button">
LOG IN
</li>
<li class="nav-item">
<a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-globe" style="font-size: 20px;"></i> English
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
Español
Français
Dansk
</div>
</li>
</ul>
</div>
</nav>
</Section>
<Section id="bgimage">
<div class="container">
<div class="row">
<div class="col-md-12" id="special">
<h1 class="text-center text-white">Create your website in <span>three simple steps</span></h1>
<p class="text-center text-white"><strong>-it's free!-</strong></p>
<button class="btn btn-danger rounded-pill"><span>START HERE</span></button>
</div>
</div>
</div>
</Section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</div>
</body>
</html>
https://jsfiddle.net/yudizsolutions/nartkmud/4/

First of all You need the background size to fit the fold, which means set it to cover (please note that the image size should be 1920x1080 to look good and not pixelated).
add/change this:
.contain {
background: url("imgs/starter5.jpg") 50% 0;
background-repeat: no-repeat;
background-size: cover;
}
If the image is good than it should fill all the 1st fold of the page!

Your css need little modification. Please try the below height property in your contain class :
.contain {
background: url(imgs/starter5.jpg) center center;
background-repeat: no-repeat;
height: 100vh;
}

Bootstrap 4, make second column content change depending where have we scrolled on 1st column

I have 2 columns in one row, one is for main content and second one next to it is for code preview for that main content, what I want to do is that second column would switch content that I set to once I scroll down to specific part of column one. The column one in this code is the white one where the content is suppsed to be, and the dark column is where the code should be displayed dependt on where are you on white column
Edit Code:
HTML:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<!-- Bootstrap CSS -->
<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">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<title>Hello, world!</title>
</head>
<body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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/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>
<div class="container-flex">
<!-- navbar top-->
<nav class="navbar navbar-expand-lg navbar-light bg-dark">
<a class="navbar-brand" href="index.html">IP Intelligence</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0 linknav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="input/input.html">Input</a>
</li>
<li class="nav-item">
<a class="nav-link" href="output/output.html">Output</a>
</li>
<li class="nav-item">
<a class="nav-link" href="flags/flags.html">Flags</a>
</li>
<li class="nav-item">
<a class="nav-link" href="flags/flags.html#error">Error Codes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact/contact.html">Contact</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
<div id="wrapper">
<div class="container-fluid">
<div class="row justify-content-between">
<!-- Sidebar -->
<nav class="" id="sidebar">
<ul class="list-unstyled components">
<li class="active">
Home
</li>
<li>
Input
<ul class="collapse list-unstyled" id="inputSubmenu">
<li>
Input
</li>
<li>
Optional Input Settings
</li>
</ul>
</li>
<li>
Output
<ul class="collapse list-unstyled" id="outputSubmenu">
<li>
Expected Output
</li>
<li>
Interpretation of the Results
</li>
<li>
Variations of Implementation
</li>
</ul>
</li>
<li>
Comparing Flags
</li>
<li>
Error Codes
</li>
<li>
Contact
</li>
</ul>
</nav>
<div class="container-flex d-flex content" style="width: 40%">
<div class="col">
<!--main page-->
<div class="cont">
<h1>Usage & Implementation</h1>
<h3>Web Interface</h3>
<p>The web interface allows you to quickly lookup IPs without touching any code. It is assumed that the IP you're looking up has made requests to your services on an application level. The web interface uses flags=f which requests full bad IP detection including compromised systems. If you wish to skip full bad IP detection, please use the API instead. A full lookup might take up to 5 seconds to complete because results are generated in real-time.</p>
</div>
</div>
</div>
<div class="container-flex d-flex content" style="width: 40%">
<div class="col bg-dark">
<!--Code Editor-->
<h2 class="codep">Code Preview</h2>
<div class="neapolitan"/>
<div class="code">
<code>
this is code
</code>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
/*
DEMO STYLE
*/
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
background: #fff;
border: none;
border-radius: 0;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
.stay-open {display:block !important;}
.codep {
color: #f0ad4e;
padding-top: 10px;
padding-bottom: 10px;
}
.code {
padding-top: 20px;
padding-left: 3px;
}
.neapolitan {
background:red;
position:relative;
height:1px;
content:'';
background:gray;
width:100%;
}
.cont{
padding-top: 10px;
}
.cont h3 h2 h6{
padding-top: 20px;
}
.cont p{
color: #696969;
font-size: 14px;
}
.label-default {
background-color: #777;
}
.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
.cont li {
font-family: 'Poppins', sans-serif;
font-weight: 300;
line-height: 1.7em;
color: #696969;
font-size: 14px;
padding-bottom: 10px;
}
.cont ul{
padding-left: 40px;
}
.cont b{
}
.ind{
}
.cont-t{
font-size: 11px;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
#sidebar {
min-width: 250px;
max-width: 250px;
background: #343a40;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar ul.components {
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #343a40;
background: #fff;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #f0ad4e;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #292b2c;
}
.content {
height: 1000px;
}
.linknav {
padding-left: 72px;
}
.linknav a{
display:inline;
margin-right:1.5em;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
}

$('#codeSection').scroll(function(){
($('#previewCode').text($('#codeSection').text()).css('color','white'));
});
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<!-- Bootstrap CSS -->
<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">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="lib/style.css">
<script src="lib/script.js"></script>
<title>Hello, world!</title>
</head>
<body>
<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/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>
<div class="container-flex">
<!-- navbar top-->
<nav class="navbar navbar-expand-lg navbar-light bg-dark">
<a class="navbar-brand" href="index.html">IP Intelligence</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0 linknav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="input/input.html">Input</a>
</li>
<li class="nav-item">
<a class="nav-link" href="output/output.html">Output</a>
</li>
<li class="nav-item">
<a class="nav-link" href="flags/flags.html">Flags</a>
</li>
<li class="nav-item">
<a class="nav-link" href="flags/flags.html#error">Error Codes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact/contact.html">Contact</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
<div id="wrapper">
<div class="container-fluid">
<div class="row justify-content-between">
<!-- Sidebar -->
<nav class="" id="sidebar">
<ul class="list-unstyled components">
<li class="active">
Home
</li>
<li>
Input
<ul class="collapse list-unstyled" id="inputSubmenu">
<li>
Input
</li>
<li>
Optional Input Settings
</li>
</ul>
</li>
<li>
Output
<ul class="collapse list-unstyled" id="outputSubmenu">
<li>
Expected Output
</li>
<li>
Interpretation of the Results
</li>
<li>
Variations of Implementation
</li>
</ul>
</li>
<li>
Comparing Flags
</li>
<li>
Error Codes
</li>
<li>
Contact
</li>
</ul>
</nav>
<div class="container-flex d-flex content" style="width: 40%; height:120px">
<div class="col">
<!--main page-->
<div class="cont" id="codeSection" style="overflow:scroll;height:250px">
<h1>Usage & Implementation</h1>
<h3>Web Interface</h3>
<p>The web interface allows you to quickly lookup IPs without touching any code. It is assumed that the IP you're looking up has made requests to your services on an application level. The web interface uses flags=f which requests full bad IP detection including compromised systems. If you wish to skip full bad IP detection, please use the API instead. A full lookup might take up to 5 seconds to complete because results are generated in real-time.</p>
</div>
</div>
</div>
<div class="container-flex d-flex content" style="width: 40%">
<div class="col bg-dark">
<!--Code Editor-->
<h2 class="codep">Code Preview</h2>
<div class="neapolitan"/>
<div id='previewCode' class="code">
<code>
this is code
</code>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
use jquery's scroll function https://api.jquery.com/scroll/. this will trigger once you scroll your div with the code section.
for this example to work i have added an id to code section and also have done some alteration to make codesection div scrollable. (see console for message on scroll).
so on scroll you can also check page offset and can set value to preview screen as needed..

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

why navigation bar is not going on the top? - html

You have mentioned height:100% in the styles for .navbar. I changed that to height:15vh; and it seems to work fine. Feel free to play with the value until you find it suitable.

Related

navbar color can't vanished or transparent because it linked body color, how to solve it?

Why is the opacity of the background color of the HTML hr tag decreasing?

HTML header won't center

How to fill white space with the image

Bootstrap 4, make second column content change depending where have we scrolled on 1st column

Categories

Resources