How do I center my buttons on my website? - javascript

I'm having a problem with my code and can't figure it out. I'm writing my own website and can't get my buttons to go to the center of the page. I tried almost everything I think but it always goes to about 30% or 70% for some reason... The website is not fully responsive for now I will work on that later. What's wrong with my code? What can I do to fix it next time? Thanks for any ideas!
function showHide() {
var navList = document.getElementById("nav-lists");
if (navList.className == '_Menus') {
navList.classList.add("_Menus-show");
} else {
navList.classList.remove("_Menus-show");
}
const body = document.querySelector('body')
const twitter = document.querySelector('.twitter')
twitter.addEventListener("mouseover", function () {
body.classList.add('linked')
},false)
twitter.addEventListener("mouseout", function () {
body.classList.remove('linked')
}, false)
}
#font-face {
font-family: 'familiar_probold';
src: url('fonts/FamiliarPro/familiar_pro-bold-webfont.woff2') format('woff2'),
url('fonts/FamiliarPro/familiar_pro-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'uni_sansheavy_caps';
src: url('fonts/UniSansHeavy/uni_sans_heavy-webfont.woff2') format('woff2'),
url('fonts/UniSansHeavy/uni_sans_heavy-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'source_sans_problack';
src: url('fonts/SourceSans/sourcesanspro-black-webfont.woff2') format('woff2'),
url('fonts/SourceSans/sourcesanspro-black-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
*{
margin: 0;
padding: 0;
}
*,
*::before,
*::after {
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
background-color: #f7f7f7;
font-family: sans-serif;
}
img {
width: 100%;
height: auto;
}
.navbar {
width: 100%;
background-color: #000;
}
.container {
max-width: 1140px;
margin: 0 auto;
height: 60px;
display: flex;
flex-wrap: wrap;
}
._Logo {
overflow: hidden;
text-align: center;
flex-basis: 230px;
}
._Logo img {
height: 100% !important;
width: 150px !important;
}
._Menus ul {
display: flex;
list-style: none;
padding: 0;
margin: 0;
flex-wrap: wrap;
}
._Menus ul li a {
display: block;
padding: 0 10px;
height: 60px;
line-height: 60px;
text-decoration: none;
color: #FFF;
outline: none;
font-family: 'uni_sansheavy_caps';
}
._Menus ul li a:hover {
background-color: #FFF;
color: #000;
}
._Iconbar {
display: none;
background-color: #000;
}
.menu-bar {
width: 45px;
align-self: center;
cursor: pointer;
}
.icon-bar {
height: 3px;
width: 100%;
background: #FFF;
margin: 7px 0;
display: block;
border-radius: 2px;
}
.toppadding{
padding-top: 0;
}
.topbackround{
width: 100%;
height: auto;
position: relative;
text-align: center;
color: white;
}
.sloganlefttextfirst{
position: absolute;
top: 20%;
left: 5%;
font-family: 'familiar_probold';
font-size: 200%;
color: grey;
}
.sloganlefttextsecond{
position: absolute;
top: 25%;
left: 5%;
font-family: 'uni_sansheavy_caps';
font-size: 500%;
}
.sloganlefttextthird{
position: absolute;
top: 35%;
left: 5%;
font-family: 'uni_sansheavy_caps';
font-size: 500%;
color: #DCC98E;
border-bottom: 6px solid #DCC98E;
padding-bottom: 3px;
}
.howitworkslefttextfirst a{
position: absolute;
top: 51%;
left: 5%;
font-family: 'familiar_probold';
font-size: 200%;
color: #B9CDBE;
border-bottom: 3px solid #B9CDBE;
padding-bottom: 3px;
text-decoration: none;
}
.howitworkslefttextsecond{
position: absolute;
top: 57%;
left: 5%;
font-family: 'Arial';
font-size: 200%;
color: white;
}
hr{
color: black;
background-color: black;
height: 8px;
border: none;
}
.midbackground{
background-color: #1B1C1E;
padding-bottom: 100px;
}
.tutorial{
padding-top: 3%;
padding-bottom: 3%;
text-align: center;
left: 50%;
font-family: 'uni_sansheavy_caps';
color: #DCC98E;
font-size: 350%;
width: 100%;
}
.tutorial p{
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
left: 50%;
font-family: 'Arial';
color: white;
font-size: 50%;
width: 100%;
}
.circles{
margin: 0 auto;
}
.circles > div {
overflow: hidden;
float: left;
width: auto;
height: auto;
position: relative;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
background: #1B1C1E;
}
.circles > div > div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-family: 'uni_sansheavy_caps';
font-size: 400%;
color: grey;
}
.circles > div > div > div {
display: table;
width: 100%;
height: 100%;
}
.circles > div > div > div > div {
display: table-cell;
text-align: center;
vertical-align: middle;
}
#media (max-width: 320px)
{
.circles > div {padding: 50%;}
}
#media (min-width: 321px) and (max-width: 800px)
{
.circles > div {padding: 25%;}
}
#media (min-width: 801px)
{
.circles{width:800px}
.circles > div {padding: 12.5%;}
}
.circlescontent{
margin: 0 auto;
}
.circlescontent > div {
overflow:hidden;
float:left;
width:auto;
height:auto;
position: relative;
background: #1B1C1E;
}
.circlescontent > div > div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-family: 'familiar_probold';
font-size: 250%;
color: grey;
}
.circlescontent > div > div > div {
display: table;
width: 100%;
height: 100%;
}
.circlescontent > div > div > div > div {
display: table-cell;
text-align: center;
vertical-align: middle;
}
#media (max-width: 320px)
{
.circlescontent > div {padding: 50%;}
}
#media (min-width: 321px) and (max-width: 800px)
{
.circlescontent > div {padding: 25%;}
}
#media (min-width: 801px)
{
.circlescontent{width:800px}
.circlescontent > div {padding: 12.5%;}
}
.statement{
padding-top: 25%;
padding-bottom: 3%;
text-align: center;
left: 50%;
font-family: 'uni_sansheavy_caps';
color: #DCC98E;
font-size: 350%;
width: 100%;
}
.statement p{
padding-top: 20px;
padding-bottom: 0;
text-align: center;
left: 50%;
font-family: 'familiar_probold';
color: white;
font-size: 50%;
width: 100%;
}
.statementfinal{
padding-top: 0;
padding-bottom: 3%;
text-align: center;
left: 50%;
font-family: 'uni_sansheavy_caps';
color: #DCC98E;
font-size: 350%;
width: 100%;
} /*HERE*/
.buttonbkg{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 90vh;
}
.button {
width: 320px;
max-width: 100%;
overflow: hidden;
position: relative;
transform: translatez(0);
text-decoration: none;
box-sizing: border-box;
font-size: 130%;
font-weight: normal;
font-family: 'familiar_probold';
color: #B9CDBE;
box-shadow: 0 9px 18px rgba(0,0,0,0.2);
display: inline-block;
left: 50%;
margin: 3%;
align-content: center;
}
.steam{
text-align: center;
border-radius: 50px;
padding: 26px;
color: white;
background: #BD3381;
transition: all 0.2s ease-out 0s;
display: inline-block;
align-content: center;
}
.gradient {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
bottom: auto;
margin: auto;
z-index: -1;
background: radial-gradient(90px circle at top center, rgba(238,88,63,.8) 30%, rgba(255,255,255,0));
transition: all 0s ease-out 0s;
transform: translatex(-140px);
animation: 18s linear 0s infinite move;
display: inline-block;
align-content: center;
}
#keyframes move {
0% {
transform: translatex(-140px);
}
25% {
transform: translatex(140px);
opacity: 0.3;
}
50% {
transform: translatex(140px);
opacity: 1;
background: radial-gradient(90px circle at bottom center, rgba(238,88,63,.5) 30%, rgba(255,255,255,0));
}
75% {
transform: translatex(-140px);
opacity: 0.3;
}
100% {
opacity: 1;
transform: translatex(-140px);
background: radial-gradient(90px circle at top center, rgba(238,88,63,.5) 30%, rgba(255,255,255,0));
}
}
#media (max-width: 900px) {
._Logo {
height: 60px;
}
._Menus {
flex: 100%;
background: #333;
height: 0;
overflow: hidden;
}
._Menus ul{
flex-direction: column;
}
._Menus ul li a {
height: 40px;
font-size: 14px;
text-transform: uppercase;
line-height: 40px;
}
._Menus ul li a:hover {
background-color: #81d742;
color: #FFF;
}
.container {
justify-content: space-between;
}
._Iconbar {
display: flex;
margin-right: 10px;
}
._Menus-show {
height: auto;
}
.brandimage{
display: none;
}
#media (max-width: 600px) {
._Logo {
height: 60px;
}
._Menus {
flex: 100%;
background: #333;
height: 0;
overflow: hidden;
}
._Menus ul{
flex-direction: column;
}
._Menus ul li a {
height: 40px;
font-size: 14px;
text-transform: uppercase;
line-height: 40px;
}
._Menus ul li a:hover {
background-color: #81d742;
color: #FFF;
}
.container {
justify-content: space-between;
}
._Iconbar {
display: flex;
margin-right: 10px;
}
._Menus-show {
height: auto;
}
.brandimage{
display: none;
}
}}
/*
#0C0028
#1D5EC3
#181A1B
*/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Reff Skins</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS responsive navigation menu</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS responsive navigation menu</title>
</head>
<body>
<nav class="navbar">
<div class="container">
<section class="_Logo"><img src="images/brand.png" alt="REFF SKINS"></section>
<section class="_Iconbar">
<span class="menu-bar" onclick="showHide()">
<i class="icon-bar"></i>
<i class="icon-bar"></i>
<i class="icon-bar"></i>
</span>
</section>
<section class="_Menus" id="nav-lists">
<ul>
<li>ABOUT</li>
<li>HOW IT WORKS</li>
<li>FAQ</li>
<li>AVAILABLE SKINS</li>
<li>SIGN IN THROUGH STEAM</li>
</ul>
</section>
</div>
</nav>
<div class="toppadding"></div>
<div class="topbackround">
<img class="topbackround" src="images/awpasiimov.jpeg">
<div class="sloganlefttextfirst">WEBSITE WITH TRULY FREE SKINS</div>
<div class="sloganlefttextsecond">LOW ON SKINS?</div>
<div class="sloganlefttextthird">TIME TO GET NEW FREE!</div>
<div class="howitworkslefttextfirst">HOW IS THIS WORKING?</div>
<div class="howitworkslefttextsecond">check how it works page or visit our YouTube</div>
<!--<button class="btn1">HOW IT WORKS</button></div>
<button class="btn2">SKINS</button></div>
<button class="btn3">SIGN IN WITH STEAM</button></div>-->
</div>
<hr></hr>
<div class="midbackground">
<div class="tutorial">HOW CAN I DO IT?<p>If you want your new skins complete the four easy steps.</p></div>
<div class="circles">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
1.
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circles">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
2.
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circles">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
3.
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circles">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
4.
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circlescontent">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
SIGN IN WITH STEAM
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circlescontent">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
DO THE REFERR PROCESS
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circlescontent">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
SELECT WANTED SKINS
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circlescontent">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
GET YOUR SKINS
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="statement">IT'S THAT EASY<p>NO DEPOSITS, NO PAYMENT METHODS, NO RISKY GAMBLING, NO SKINS HOLDING</p></div>
<div class="statementfinal">WE SAID NO TO CATCHES!</div>
<div class="buttunbkg">
<span class="gradient"></span>SIGN IN WITH STEAM
<span class="gradient"></span>AVAILABLE SKINS
<span class="gradient"></span>HOW IT WORKS
</div>
</div>
</body>
</html>


Seems like you've got it half using flex, here's an answer sticking to it.
Firstly, you spelt buttonbkg wrong. Add flex-direction: column to it. Then like others said you will want to get rid of the left: 50%. On your .steam add your flex, and center align/justify.
.buttonbkg{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 90vh;
}
.button {
width: 320px;
max-width: 100%;
overflow: hidden;
position: relative;
transform: translatez(0);
text-decoration: none;
box-sizing: border-box;
font-size: 130%;
font-weight: normal;
font-family: 'familiar_probold';
color: #B9CDBE;
box-shadow: 0 9px 18px rgba(0,0,0,0.2);
display: inline-block;
margin: 3%;
align-content: center;
}
.steam{
text-align: center;
border-radius: 50px;
padding: 26px;
color: white;
background: #BD3381;
transition: all 0.2s ease-out 0s;
display: flex;
justify-content: center;
align-items: center;
}


You need to add this to your button selector:
.button {
transform: translateX(-50%);
}


On your .button class you have left: 50%;, remove it. Also add margin: 3% auto
On you .steam class change display: inline-block; to display: block;
margin: 3% auto
3% -> top/bottom margin
auto -> left/right margin, auto will make left an right margin the same
Other solution would be to change your transform: translatez(0); to transform: translateX(-50%);, but I think transform is like shooting with a shotgun at a fly.

Related

After adding bootstrap there is white line between my divs

This is my HTML code.
there was no problem with my project until i added bootstrap.
it seems the details is nt enough so iam writing this pls if u know anything pls correct my code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<script src="main.js" defer></script>
<title>test home</title>
</head>
<body>
<div class="hero">
<video autoplay loop muted plays-inline class="back-video">
<source src="Wolf.mp4" type="video/mp4">
</video>
<nav>
<img src="Wild logo2.png" class="logo">
<div class="menu-btn">
<div class="menu-btn_lines"></div>
</div>
<ul class="menu-items">
<li>HOME</li>
<li>MISSIONS</li>
<li>COURSE</li>
<li>CONTACT</li>
<li><a type="submit" class="cta" href="#"><button>LogIn</button></a></li>
</ul>
</nav>
<div class="content">
<h1>WILDPRO</h1>
READ
</div>
</div>
<div class="banner">
<h2>
Photography is life.
</h2>
<br><br><br>
<p>Wildlife photography is one of the most exciting photographic genres out there. But it can be difficult to get started as a wildlife photographer because of all the gear, technical know-how, and additional knowledge required.In the early days of photography, it was difficult to get a photograph of wildlife due to slow lenses and the low sensitivity of photographic media. Earlier photos of animals were often captive animals. These included photos of lion cubs taken at the Bristol zoo in 1854 and in 1864, photos of the last Quagga by Frank Hayes. Wildlife photography gained more traction when faster photography emulsions and quicker shutters came in the 1880s. Developments like these lead to photos such as the ones taken by German Ottomar Anschutz in 1884, the first shots of wild birds in action. Members of the Delaware Valley Ornithological Club (DVOC) captured early photographs of nesting songbirds in the Philadelphia area in 1897.In July 1906, National Geographic published its first wildlife photos.The photos were taken by George Shiras III, a U.S. Representative from Pennsylvania. Some of his photos were taken with the first wire-tripped camera traps.</p>
<div class="custom-shape-divider-bottom-1676808801">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
</svg>
</div>
</div>
<div id="mission-id" class="mission">
<h2>
Missions.
</h2>
<br>
<p>
The website intends on to focus on many rescue missions,for a bright future for the wild animals and <span>SAVE</span> many animals from their existition.
</p>
</div>
</body>
</html>
This is my CSS code
the css code seem to have some position problem or something
this is a screenshot of my project
enter image description here
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#100;500&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
li, a, button{
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 16px;
text-decoration: none;
}
.hero{
background:linear-gradient(rgba(0, 0, 0, 0.5),rgb(0, 150, 17));
width: 100%;
height: 100vh;
position: relative;
padding: 0 5%;
display: flex;
align-items: center;
justify-content: center;
}
input{
display: block;
width: 400px;
height: 40px;
margin: 60px;
border: none;
outline: none;
font-size: 20px;
background: transparent;
color: #fff;
margin-bottom: 0%;
}
::placeholder{
color: rgba(211, 211, 211, 0.767);
}
nav{
width: 100%;
position: absolute;
top: 0;
left: 0;
padding: 20px 8%;
display: flex;
align-items: center;
justify-content: space-between;
}
nav .logo{
margin-right:auto;
width: 100px;
cursor: pointer;
}
nav ul li{
list-style: none;
display: inline-block;
margin-left: 40px;
}
nav ul li a{
transition: all 0.3s ease 0s;
text-decoration: none;
color: #fff;
font-size: 17px;
}
nav ul li a:hover {
color: #0ea900;
}
.menu-btn {
position: relative;
display: none;
justify-content: center;
align-items: center;
width: 1.5rem;
height: 1.5rem;
cursor: pointer;
z-index: 3;
}
.menu-btn_lines,
.menu-btn_lines::before,
.menu-btn_lines::after{
width: 1.5rem;
height: 0.1rem;
background-color: #ffffff;
transition: all 0.5s ease-in-out;
}
.menu-btn_lines::before,
.menu-btn_lines::after{
content: "";
position: absolute;
}
.menu-btn_lines::before{
transform: translateY(-0.5rem);
}
.menu-btn_lines::after{
transform: translateY(0.5rem)
}
.menu-btn.open .menu-btn_lines{
transform: translateX(2rem);
background-color: transparent;
}
.menu-btn.open .menu-btn_lines::before{
transform: rotate(45deg) translate(-1.5rem,1.5rem);
}
.menu-btn.open .menu-btn_lines::after{
transform: rotate(-45deg) translate(-1.5rem,-1.5rem);
}
button{
padding: 9px 25px;
background-color: rgb(54, 169, 0);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover{
background-color: rgba(6, 182, 0, 0.8);
}
.content{
position: relative;
text-align: center;
z-index: 1;
}
.content h1{
font-size: 160px;
color: #fff;
font-weight: 600;
transition: 0.3s;
}
.content h1:hover{
-webkit-text-stroke: 2px #fff;
color: transparent;
cursor: default;
}
.content a{
text-decoration: none;
display: inline-block;
color: #fff;
font-size: 24px;
border: 2px solid #fff;
padding: 14px 70px;
border-radius: 50px;
margin-top: 20px;
}
.back-video{
position: absolute;
right: 0;
bottom: 0;
z-index: -2;
}
#media (min-aspect-ratio: 16/9){
.back-video{
width: 100%;
height: auto;
}
}
#media (max-aspect-ratio: 16/9){
.back-video{
width: auto;
height: 100%;
}
}
.banner{
margin-top: 0;
background-color:rgb(0, 150, 17);
width: 100;
height: auto;
position: relative;
padding:0 5%;
align-items: center;
color: #ffffff;
font-family: "Montserrat", sans-serif;
}
.banner h2{
text-align: center;
font-size: 50px;
}
.banner p{
text-align: center;
font-size: 30px;
padding: 2%;
padding-bottom: 8%;
}
.custom-shape-divider-bottom-1676808801 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
}
.custom-shape-divider-bottom-1676808801 svg {
position: relative;
display: block;
width: calc(116% + 1.3px);
height: 100px;
}
.custom-shape-divider-bottom-1676808801 .shape-fill {
fill: #0b8500;
}
.mission{
margin-top: 0;
float: top;
background-color: #0b8500;
width: 100%;
height: auto;
padding:0 5%;
align-items: center;
color: #ffffff;
font-family: "Montserrat", sans-serif;
}
.mission h2{
text-align: center;
font-size: 50px;
}
.mission p{
text-align: center;
font-size: 30px;
padding: 2%;
padding-bottom: 8%;
}
.mission span{
font-size: 40px;
font-weight: 900;
background-image: linear-gradient(98deg,red,blue);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#media (max-width: 767px) {
.custom-shape-divider svg {
width: calc(250% + 1.3px);
height: 150px;
}
.menu-btn{
display: flex;
}
.menu-items {
flex-direction: column;
justify-content: space-around;
position: absolute;
top: 0;
right: 0;
left: 0;
height: 100vh;
transform: translateX(100vw);
background-color: #0ea900;
transition: transform 0.3s ease-in-out;
z-index: 2;
}
.menu-items.open {
transform: translateX(0);
}
.menu-items li {
width: 50vw;
height: 10%;
margin-top: 10%;
}
.menu-items li a {
color: #fff;
font-size: 2vh;
display: flex;
justify-content: center;
align-items: center;
width: 50%;
height: 50%;
}
.banner h2{
font-size: 30px;
text-align: center;
color: #ffffff;
}
.banner p{
font-size: 20px;
text-align: center;
color: white;
padding-bottom: 20%;
}
.content h1{
font-size: 80px;
}
nav .logo{
width: 20%;
}
}

Try adding class="m-0" to the p tag inside div.banner like this:
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#100;500&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
li, a, button{
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 16px;
text-decoration: none;
}
.hero{
background:linear-gradient(rgba(0, 0, 0, 0.5),rgb(0, 150, 17));
width: 100%;
height: 100vh;
position: relative;
padding: 0 5%;
display: flex;
align-items: center;
justify-content: center;
}
input{
display: block;
width: 400px;
height: 40px;
margin: 60px;
border: none;
outline: none;
font-size: 20px;
background: transparent;
color: #fff;
margin-bottom: 0%;
}
::placeholder{
color: rgba(211, 211, 211, 0.767);
}
nav{
width: 100%;
position: absolute;
top: 0;
left: 0;
padding: 20px 8%;
display: flex;
align-items: center;
justify-content: space-between;
}
nav .logo{
margin-right:auto;
width: 100px;
cursor: pointer;
}
nav ul li{
list-style: none;
display: inline-block;
margin-left: 40px;
}
nav ul li a{
transition: all 0.3s ease 0s;
text-decoration: none;
color: #fff;
font-size: 17px;
}
nav ul li a:hover {
color: #0ea900;
}
.menu-btn {
position: relative;
display: none;
justify-content: center;
align-items: center;
width: 1.5rem;
height: 1.5rem;
cursor: pointer;
z-index: 3;
}
.menu-btn_lines,
.menu-btn_lines::before,
.menu-btn_lines::after{
width: 1.5rem;
height: 0.1rem;
background-color: #ffffff;
transition: all 0.5s ease-in-out;
}
.menu-btn_lines::before,
.menu-btn_lines::after{
content: "";
position: absolute;
}
.menu-btn_lines::before{
transform: translateY(-0.5rem);
}
.menu-btn_lines::after{
transform: translateY(0.5rem)
}
.menu-btn.open .menu-btn_lines{
transform: translateX(2rem);
background-color: transparent;
}
.menu-btn.open .menu-btn_lines::before{
transform: rotate(45deg) translate(-1.5rem,1.5rem);
}
.menu-btn.open .menu-btn_lines::after{
transform: rotate(-45deg) translate(-1.5rem,-1.5rem);
}
button{
padding: 9px 25px;
background-color: rgb(54, 169, 0);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover{
background-color: rgba(6, 182, 0, 0.8);
}
.content{
position: relative;
text-align: center;
z-index: 1;
}
.content h1{
font-size: 160px;
color: #fff;
font-weight: 600;
transition: 0.3s;
}
.content h1:hover{
-webkit-text-stroke: 2px #fff;
color: transparent;
cursor: default;
}
.content a{
text-decoration: none;
display: inline-block;
color: #fff;
font-size: 24px;
border: 2px solid #fff;
padding: 14px 70px;
border-radius: 50px;
margin-top: 20px;
}
.back-video{
position: absolute;
right: 0;
bottom: 0;
z-index: -2;
}
#media (min-aspect-ratio: 16/9){
.back-video{
width: 100%;
height: auto;
}
}
#media (max-aspect-ratio: 16/9){
.back-video{
width: auto;
height: 100%;
}
}
.banner{
margin-top: 0;
background-color:rgb(0, 150, 17);
width: 100;
height: auto;
position: relative;
padding:0 5%;
align-items: center;
color: #ffffff;
font-family: "Montserrat", sans-serif;
}
.banner h2{
text-align: center;
font-size: 50px;
}
.banner p{
text-align: center;
font-size: 30px;
padding: 2%;
padding-bottom: 8%;
}
.custom-shape-divider-bottom-1676808801 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
}
.custom-shape-divider-bottom-1676808801 svg {
position: relative;
display: block;
width: calc(116% + 1.3px);
height: 100px;
}
.custom-shape-divider-bottom-1676808801 .shape-fill {
fill: #0b8500;
}
.mission{
margin-top: 0;
float: top;
background-color: #0b8500;
width: 100%;
height: auto;
padding:0 5%;
align-items: center;
color: #ffffff;
font-family: "Montserrat", sans-serif;
}
.mission h2{
text-align: center;
font-size: 50px;
}
.mission p{
text-align: center;
font-size: 30px;
padding: 2%;
padding-bottom: 8%;
}
.mission span{
font-size: 40px;
font-weight: 900;
background-image: linear-gradient(98deg,red,blue);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#media (max-width: 767px) {
.custom-shape-divider svg {
width: calc(250% + 1.3px);
height: 150px;
}
.menu-btn{
display: flex;
}
.menu-items {
flex-direction: column;
justify-content: space-around;
position: absolute;
top: 0;
right: 0;
left: 0;
height: 100vh;
transform: translateX(100vw);
background-color: #0ea900;
transition: transform 0.3s ease-in-out;
z-index: 2;
}
.menu-items.open {
transform: translateX(0);
}
.menu-items li {
width: 50vw;
height: 10%;
margin-top: 10%;
}
.menu-items li a {
color: #fff;
font-size: 2vh;
display: flex;
justify-content: center;
align-items: center;
width: 50%;
height: 50%;
}
.banner h2{
font-size: 30px;
text-align: center;
color: #ffffff;
}
.banner p{
font-size: 20px;
text-align: center;
color: white;
padding-bottom: 20%;
}
.content h1{
font-size: 80px;
}
nav .logo{
width: 20%;
}
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<script src="main.js" defer></script>
<title>test home</title>
</head>
<body>
<div class="hero">
<video autoplay loop muted plays-inline class="back-video">
<source src="Wolf.mp4" type="video/mp4">
</video>
<nav>
<img src="Wild logo2.png" class="logo">
<div class="menu-btn">
<div class="menu-btn_lines"></div>
</div>
<ul class="menu-items">
<li>HOME</li>
<li>MISSIONS</li>
<li>COURSE</li>
<li>CONTACT</li>
<li><a type="submit" class="cta" href="#"><button>LogIn</button></a></li>
</ul>
</nav>
<div class="content">
<h1>WILDPRO</h1>
READ
</div>
</div>
<div class="banner">
<h2>
Photography is life.
</h2>
<br><br><br>
<p class="m-0">Wildlife photography is one of the most exciting photographic genres out there. But it can be difficult to get started as a wildlife photographer because of all the gear, technical know-how, and additional knowledge required.In the early days of photography, it was difficult to get a photograph of wildlife due to slow lenses and the low sensitivity of photographic media. Earlier photos of animals were often captive animals. These included photos of lion cubs taken at the Bristol zoo in 1854 and in 1864, photos of the last Quagga by Frank Hayes. Wildlife photography gained more traction when faster photography emulsions and quicker shutters came in the 1880s. Developments like these lead to photos such as the ones taken by German Ottomar Anschutz in 1884, the first shots of wild birds in action. Members of the Delaware Valley Ornithological Club (DVOC) captured early photographs of nesting songbirds in the Philadelphia area in 1897.In July 1906, National Geographic published its first wildlife photos.The photos were taken by George Shiras III, a U.S. Representative from Pennsylvania. Some of his photos were taken with the first wire-tripped camera traps.</p>
<div class="custom-shape-divider-bottom-1676808801">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
</svg>
</div>
</div>
<div id="mission-id" class="mission">
<h2>
Missions.
</h2>
<br>
<p>
The website intends on to focus on many rescue missions,for a bright future for the wild animals and <span>SAVE</span> many animals from their existition.
</p>
</div>
</body>

how do i activate a new class in java script?

I have this code.
When inspecting from the browser ,it seems when i click on hamburger-menu active class doesn't work.
I expect when I press the hamburger menu the container class to become the container.active class
Also,I set cursor: pointer for hamburger-menu and for link a(read-more) and it doesn't work.
Any help?
const hamburger_menu = document.querySelector(".hamburger-menu");
const container = document.querySelector(".container");
hamburger_menu.addEventListener("click", () => {
container.classList.toggle("active");
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
min-height: 100vh;
background-image: linear-gradient(135deg, #485461 0%, #28313b 74%);
width: 100%;
}
.navbar {
position: fixed;
width: 100%;
height: 3rem;
top: 0;
left: 0;
z-index: 1;
}
.menu {
max-width: 60rem;
margin: 0 auto;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.hamburger-menu {
cursor: pointer;
width: 4em;
height: 3rem;
display: flex;
justify-content: center;
align-items: center;
background: black;
}
.menu-bar {
width: 50%;
height: 1.5px;
background: white;
position: relative;
transition: 0.5s;
right: 0;
}
.menu-bar:before {
position: absolute;
content: "";
width: 100%;
height: 1.5px;
background: white;
transform: translateY(-7px);
}
.menu-bar:after {
position: absolute;
content: "";
width: 100%;
height: 1.5px;
background: white;
transform: translateY(7px);
}
.main {
position: absolute;
width: 100%;
height: 100vh;
top: 0;
left: 0;
}
.background {
position: absolute;
width: 100%;
height: 100vh;
background: url("time.jpg") no-repeat top center / cover;
z-index: -1;
}
.background-blur {
position: absolute;
width: 100%;
height: 100vh;
background-color: rgba(43, 51, 59, 0.8);
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.future {
font-size: 3rem;
font-weight: bolder;
color: white;
}
.time {
font-size: 1.5rem;
font-weight: bold;
color: white;
}
.middle a {
position: relative;
top: 2rem;
text-decoration: none;
font-size: 1.5rem;
font-weight: bold;
color: white;
border-radius: 25px;
background: blue;
padding: 0.6rem;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Time</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="navbar">
<div class="menu">
<div class="hamburger-menu">
<div class="menu-bar"></div>
</div>
</div>
<div class="main">
<div class="background">
<div class="background-blur">
<div class="middle">
<h2 class="future">"Future is here"</h2>
<h2 class="time">"Time isn't the main thing.It's the only thing."</h2>
<a href="#">Read more </a2>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>

It is because your .hamburger_menu classes z-index was under the main element and its dimensions was covering your other elements. I have commented where I increased the z index so you can decide how to handle it. But this way of layering your elements is bad when scaling your project. The read more button is not navigating because u haven't set a href path. Set it to a link or an address and click on the button to navigate. The below code shows that as well.
const hamburger_menu = document.querySelector(".hamburger-menu");
const container = document.querySelector(".container");
hamburger_menu.addEventListener("click", () => {
container.classList.toggle("active");
alert("clicked")
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
min-height: 100vh;
background-image: linear-gradient(135deg, #485461 0%, #28313b 74%);
width: 100%;
}
.navbar {
position: fixed;
width: 100%;
height: 3rem;
top: 0;
left: 0;
z-index: 1;
}
.menu {
max-width: 60rem;
margin: 0 auto;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.hamburger-menu {
cursor: pointer;
width: 10%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: black;
z-index: 4; //changed z index to a higher number
}
.menu-bar {
width: 50%;
height: 1.5px;
background: white;
position: relative;
transition: 0.5s;
right: 0;
}
.menu-bar:before {
position: absolute;
content: "";
width: 100%;
height: 1.5px;
background: white;
transform: translateY(-7px);
}
.menu-bar:after {
position: absolute;
content: "";
width: 100%;
height: 1.5px;
background: white;
transform: translateY(7px);
}
.main {
position: absolute;
width: 100%;
height: 100vh;
top: 0;
left: 0;
z-index: 3;
}
.background {
position: absolute;
width: 100%;
height: 100vh;
background: url("time.jpg") no-repeat top center / cover;
z-index: -1;
}
.background-blur {
position: absolute;
width: 100%;
height: 100vh;
background-color: rgba(43, 51, 59, 0.8);
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.future {
font-size: 3rem;
font-weight: bolder;
color: white;
}
.time {
font-size: 1.5rem;
font-weight: bold;
color: white;
}
.middle a {
position: relative;
top: 2rem;
text-decoration: none;
font-size: 1.5rem;
font-weight: bold;
color: white;
border-radius: 25px;
background: blue;
padding: 0.6rem;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Time</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="navbar">
<div class="menu">
<div class="hamburger-menu">
<div class="menu-bar"></div>
</div>
</div>
<div class="main">
<div class="background">
<div class="background-blur">
<div class="middle">
<h2 class="future">"Future is here"</h2>
<h2 class="time">"Time isn't the main thing.It's the only thing."</h2>
Read more
</div>
</div>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>

the problem is your "main" dom element which positioned absolute, so this is overlapping menu element.
So add position relative to menu in css and assign z-index to 1.
.menu {
max-width: 60rem;
margin: 0 auto;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1;
position: relative;
}
window.onload = function() {
const hamburger_menu = document.querySelector(".hamburger-menu");
const container = document.querySelector(".container");
hamburger_menu.addEventListener("click", () => {
container.classList.toggle("active");
});
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
min-height: 100vh;
background-image: linear-gradient(135deg, #485461 0%, #28313b 74%);
width: 100%;
}
.navbar {
position: fixed;
width: 100%;
height: 3rem;
top: 0;
left: 0;
z-index: 1;
}
.menu {
max-width: 60rem;
margin: 0 auto;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 1;
}
.hamburger-menu {
cursor: pointer;
width: 4em;
height: 3rem;
display: flex;
justify-content: center;
align-items: center;
background: black;
}
.menu-bar {
width: 50%;
height: 1.5px;
background: white;
position: relative;
transition: 0.5s;
right: 0;
}
.menu-bar:before {
position: absolute;
content: "";
width: 100%;
height: 1.5px;
background: white;
transform: translateY(-7px);
}
.menu-bar:after {
position: absolute;
content: "";
width: 100%;
height: 1.5px;
background: white;
transform: translateY(7px);
}
.main {
position: absolute;
width: 100%;
height: 100vh;
top: 0;
left: 0;
}
.background {
position: absolute;
width: 100%;
height: 100vh;
background: url("time.jpg") no-repeat top center / cover;
z-index: -1;
}
.background-blur {
position: absolute;
width: 100%;
height: 100vh;
background-color: rgba(43, 51, 59, 0.8);
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.future {
font-size: 3rem;
font-weight: bolder;
color: white;
}
.time {
font-size: 1.5rem;
font-weight: bold;
color: white;
}
.middle a {
position: relative;
top: 2rem;
text-decoration: none;
font-size: 1.5rem;
font-weight: bold;
color: white;
border-radius: 25px;
background: blue;
padding: 0.6rem;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Time</title>
</head>
<body>
<div class="container">
<div class="navbar">
<div class="menu">
<div class="hamburger-menu">
<div class="menu-bar"></div>
</div>
</div>
<div class="main">
<div class="background">
<div class="background-blur">
<div class="middle">
<h2 class="future">"Future is here"</h2>
<h2 class="time">"Time isn't the main thing.It's the only thing."</h2>
<a href="#">Read more </a2>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Mobile Resizable Window Dropdown Menu Doesnt Work

Ok so I'm attempting a mobile resizable window. When I tried running it, it doesn't work and I don't know why. Here is my html code:
const menu = document.querySelector('#mobile-menu');
const menuLinks = document.querySelector('.navbar__menu');
menu.addEventListener('click', function() {
menu.classList.toggle('is-active');
menuLinks.classList.toggle('active');
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Kumbh Sans', sans-serif;
}
.navbar {
background: #131313;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 999;
}
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
margin-right: auto;
margin-left: auto;
padding-right: 50px;
padding-left: 50px;
}
#navbar__logo {
background-color: #ff8177;
background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.fa-gem {
margin-right: 0.5rem;
}
.navbar__menu {
display: flex;
align-items: center;
list-style: none;
text-align: center;
}
.navbar__item {
height: 80px;
}
.navbar__links {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
padding: 0 1rem;
height: 100%;
}
.navbar__btn {
display: flex;
justify-content: center;
align-items: center;
padding: 0 1rem;
width: 100%;
}
.button {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
padding: 10px 20px;
height: 100%;
width: 100%;
border: none;
outline: none;
border-radius: 4px;
background: #f77062;
color: #fff;
}
.button:hover {
background: #4837ff;
transition: all 0.3s ease;
}
.navbar__links:hover {
color: #f77062;
transition: all 0.3s ease;
}
#media screen and (max-width: 960px) {
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0;
}
.navbar__menu {
display: grid;
grid-template-columns: auto;
margin: 0;
width: 100%;
position: absolute;
top: -1000px;
opacity: 0;
transition: all 0.5s ease;
height: 50vh;
z-index: -1;
background: #131313;
}
.navbar__menu.active {
background: #131313;
top: 100%;
opacity: 1;
transition: all 0.5s ease;
z-index: 99;
height: 50vh;
font-size: 1.6rem;
}
#navbar__logo {
padding-left: 25px;
}
.navbar__toggle .bar {
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background: #fff;
}
.navbar__item {
width: 100%;
}
.navbar__links {
text-align: center;
padding: 2rem;
width: 100%;
display: table;
}
.navbar__btn {
padding-bottom: 2rem;
}
.button {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
height: 80px;
margin: 0;
}
#mobile-menu {
position: absolute;
top: 20%;
right: 5%;
transform: translate(5%, 20%);
}
.navbar__toggle .bar {
display: block;
cursor: pointer;
}
#mobile-menu.is-active .bar:nth-child(2) {
opacity: 0;
}
#mobile-menu.is-active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
#mobile-menu.is-active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML CSS Website</title>
<link rel="stylesheet" href="styles.css" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc"
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#400;700&display=swap"
rel="stylesheet"
/>
</head>
<body>
<nav class="navbar">
<div class="navbar__container">
<i class="fas fa-gem"></i> AigoLearningJuniorTeam
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span> <span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="navbar__item">
Our Team
</li>
<li class="navbar__item">
Weekly Challenges
</li>
<li class="navbar__item">
Monthly Challenges
</li>
<li class="navbar__btn"> Get Started </li>
</ul>
</div>
</nav>
<script>src="app.js"</script>
</body>
Everything works perfectly fine until I resize my window into a mobile version, the drop menu icon shows, but when I press on it, nothing happens.

Frustrating bug with Javascript

My Jquery works just fine in text editors like fiddle and snippets on StackOverflow but once I put it in Brackets or even open it on Github, the navbar scroll down animation doesn't work. Here is a link to the fiddle, where I used the exact same code I used in Brackets and Github Pages. (I just used a random background image).
$(document).ready(function() {
$(window).scroll(function() {
if ($(document).scrollTop() > 10) {
$('#nav').addClass('shrink');
} else {
$('#nav').removeClass('shrink');
}
});
});
/**********BODY GENERAL**********/
body {
margin: 0;
height: 2500px;
/* just to demonstrate how it will looks with content */
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
/* Fix this one day */
.bg-img {
background: url('https://orig00.deviantart.net/2106/f/2012/329/0/e/untitled_drawing_by_walktheinch-d5m49xe.png') no-repeat center center;
background-size: cover;
height: 100vh;
}
strong {
font-weight: bold;
}
/*********NAVIGATION*********/
#media screen and (max-width: 900px) {
nav {
grid-template-columns: 100%;
grid-template-rows: auto;
grid-gap: 1em;
}
}
.menu1 {
grid-column: 1;
}
.menu2 {
grid-column: 2;
}
.logo {
grid-column: 3;
font-family: 'Montserrat', sans-serif;
font-weight: lighter;
font-size: 28px;
width: 500px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
height: 7vh;
margin-bottom: 25px;
color: #000;
text-transform: uppercase;
letter-spacing: 3px;
}
.menu3 {
grid-column: 4;
}
.menu4 {
grid-column: 5;
}
/**************HOVER ANIMATION**************/
div>a {
font-family: 'Raleway';
text-transform: uppercase;
text-decoration: none;
color: #000;
position: relative;
font-size: 0.8rem;
}
div>a:hover {
color: #000;
}
div>a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: -4px;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
div>a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
/**********MAIN HEADER***********/
header {
color: white;
justify-content: center;
align-content: center;
top: 0;
bottom: 0;
left: 0;
}
/**********BODY*****************/
.Minfo {
color: red;
width: 100%;
padding-top: 100px;
font-family: 'Montserrat', sans-serif;
font-weight: lighter;
}
.subtitle {
padding-left: 4em;
padding-top: 29em;
font-size: 100%;
color: #fff;
}
.title {
font-size: 3em;
text-align: left;
color: #FFF;
padding-bottom: 0px;
}
.subtext {
padding-top: 0px;
color: #FFF;
}
/************* NAV TRASPARENT TO OPAQUE ANIMATION *************/
nav {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 1em;
grid-auto-rows: auto;
text-align: center;
align-items: center;
background: transparent;
*/ z-index: 100;
transition: all ease .5s;
height: 70px;
position: relative;
}
/*============= NEW CSS RULES ============*/
#nav {
position: relative;
}
#nav .logo p {
margin: 10px 0;
}
#nav .background {
position: absolute;
top: 0;
left: 0;
width: 100%;
background: #ededed;
height: 0;
transition: height 800ms ease;
}
#nav.shrink .background {
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Centennial It's Academic</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="main.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400" rel="stylesheet">
<!-- Linking Jquery/Javascript -->
</head>
<body>
<div class="bg-img">
<header>
<div id="nav">
<!---- NEW BACKGROUND ELEMENT HERE ---->
<div class="background"></div>
<nav class="container">
<div class="menu1">
<a id="navLinks" href="#home">Home</a>
</div>
<div class="menu2">
<a id="navLinks" href="#upcoming">Tournaments</a>
</div>
<div class="logo">
<p>It's Academic</p>
</div>
<div class="menu3">
<a id="navLinks" href="#history">History</a>
</div>
<div class="menu4">
<a id="navLinks" href="#faq">Contact Info</a>
</div>
</nav>
<!-- This cluster of info -->
</div>
</header>
<div class="Minfo">
<div class="subtitle">
CENTENNIAL<br>
<div class="title">
It's Academic
</div>
<br>
<div class="subtext">
Meets every Tuesday in Room 506
</div>
</div>
</div>
</div>
</body>
</html>

Here is a PR: https://github.com/killerchef732/ItsAcademic/pull/2
Basically you didn't include the script tag (<script src="script.js"></script>) in your page and you also had some junk (รท ,) at the end of your script.js file.
First I noticed your page didn't even have the script code in it.
Then once I added it in, the chrome developer console showed me it encountered errors.

how to remove whitespace below div element

I have some divs and among them there's a small gap or whitespace.
I have tried changing margin top and bottom but it is not working. I think it's something to do with the image but I have not found a solution yet.
HTML
<!DOCTYPE html>
<html lang = "en-us">
<head>
<title>Vizion Fitness</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
<link rel = "stylesheet" type = "text/css" href = "vizion.css">
</head>
<body>
<div class = "clearfix menu">
Vizion Fitness
Contact
Pricing
Trainers
Home
</div>
<div id = "header-bg">
<div id = "header-wrapper">
</div>
</div>
` <div class = "details-wrapper">
</div>
</body>
</html>
CSS
body{
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
font-weight: 400;
line-height: 1.43;
color: red;
}
p{
font-size: 16px;
}
a:link{
font-size: 16px;
text-decoration: none;
margin: 0;
padding: 0;
}
a:visited{
text-decoration: none;
margin: 0;
padding: 0;
}
h1,h2,h3,h4,h5,h6,ul,ol,li{
margin: 0;
padding: 0;
}
ul, ol{
list-style-type: none;
}
::selection{
color: #fff;
background-color: #333;
}
::-moz-selection{
color: #fff;
background-color: #333;
}
.clearfix::after{
content: "";
display: table;
clear: both;
}
.menu{
position:relative;
background-color: #666666;
width: 100%;
height: auto;
top: 0;
left: 0;
z-index: 150;
margin-bottom: 0;
}
.logo:link{
float: left;
font-size: 28px;
color: white;
margin-left: 30px;
margin-top: 20px;
margin-bottom: 20px;
}
.nav-links:link{
float: right;
font-size: 18px;
color: white;
margin-right: 20px;
margin-top: 30px;
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
}
.nav-links:hover{
color: #ff5b5b;
}
#header-bg{
position: relative;
width: 100%;
height: 590px;
margin-top: 0;
background-image: url(bg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
line-height: 0px;
}
#header-wrapper{
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
flex-direction: column;
line-height: 0px;
}
/*-----------------------------------------------------DETAILS----------------------------*/
.details-wrapper{
position: relative;
width: 100%;
height: 400px;
background-color: red;
}

There is a ` character in html, which makes extra space.

You have a ` between those divs
Replace those divs with this
<div id = "header-bg">
<div id = "header-wrapper">
</div>
</div>
<div class = "details-wrapper">
</div>

remove height from #header-bg. You set 590px for the height.
https://jsfiddle.net/owmbw4x6/

Poistioning and display:flex does not well together.
If you want to use position:absolute on the flexed container apply position:absolute on #header-bg,it is because of that you have the white space
check this snippet
body {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
font-weight: 400;
line-height: 1.43;
color: red;
}
p {
font-size: 16px;
}
a:link {
font-size: 16px;
text-decoration: none;
margin: 0;
padding: 0;
}
a:visited {
text-decoration: none;
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li {
margin: 0;
padding: 0;
}
ul,
ol {
list-style-type: none;
}
::selection {
color: #fff;
background-color: #333;
}
::-moz-selection {
color: #fff;
background-color: #333;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
.menu {
position: relative;
background-color: #666666;
width: 100%;
height: auto;
top: 0;
left: 0;
z-index: 150;
margin-bottom: 0;
}
.logo:link {
float: left;
font-size: 28px;
color: white;
margin-left: 30px;
margin-top: 20px;
margin-bottom: 20px;
}
.nav-links:link {
float: right;
font-size: 18px;
color: white;
margin-right: 20px;
margin-top: 30px;
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
}
.nav-links:hover {
color: #ff5b5b;
}
#header-bg {
position: relative;
width: 100%;
height: 590px;
margin-top: 0;
background-image: url(https://storage.googleapis.com/gweb-uniblog-publish-prod/static/blog/images/google-200x200.7714256da16f.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
line-height: 0px;
}
#header-bg {
position: absolute;
}
#header-wrapper {
width: 100%;
height: 100%;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
flex-direction: column;
line-height: 0px;
}
/*-----------------------------------------------------DETAILS----------------------------*/
.details-wrapper {
position: relative;
width: 100%;
height: 400px;
}
<html lang="en-us">
<head>
<title>Vizion Fitness</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="vizion.css">
</head>
<body>
<div class="clearfix menu">
Vizion Fitness
Contact
Pricing
Trainers
Home
</div>
<div id="header-bg">
<div id="header-wrapper">
</div>
</div>
<div class="details-wrapper">
heyllo--details wrapper
</div>
</body>
</html>
Hope it helps

Categories