Navigation Bar Transitions does not work, what is wrong?

Navigation Bar Transitions does not work, what is wrong? - javascript

so basically I want to make my navbar slide in from the side of the screen when I click the toggle to open it, currently when I open the navbar it comes from the top and has no transition
If you want to understand more of what I mean exactly, check out https://iamtomwalker.com to see what I mean by having the navbar open from the side and transition in
my html:
<!DOCTYPE html>
<html>
<body>
<link rel="stylesheet" href="/JS files/style.css">
<header id="home">
<div id='nav'>
<nav class="navbar">
<div class="logo_header">
<h1 class="logo">Menu</h1>
<button class="nav-btn" onclick="this.classList.toggle('change');">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</button>
</div>
<ul class="main_nav">
<li>home</li>
<li>about</li>
<li>services</li>
</ul>
</nav>
</div>
<div class="banner">
<div class="container">
<h1>scroll project</h1>
<p>wsjnciunclsnjiemc ljfnjdc cinufifl,vlfldlvlekfopec ciun ck cipn i inrc cijan9pnc cipqe</p>
<button class="scroll-link-btn">Explore Tours</button>
</div>
</div>
</header>
<section id="about" class="section">
<div class="title">
<h2>About Us</h2>
</div>
</section>
<section id="services" class="section">
<div class="title">
<h2>Services</h2>
</div>
</section>
<section id="tours" class="section">
<div class="title">
<h2>Tours</h2>
</div>
</section>
<footer class="section">
<p>
company that make this oen f
</p>
<a class="arrow-up" href="#home"></a>
</footer>
<script src='/JS files/js.js'> </script>
</body>
</html>
my css:
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
body{
margin: 0;
padding: 0;
}
.change .bar1 {
transform: translate(0, 11px) rotate(-45deg);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
transform: translate(0, -11px) rotate(45deg);
}
#nav{
background-image: url("images/page.jpg");
height: 800px;
position: absolute;
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
}
a{
text-decoration: none;
}
#home{
padding-bottom: 1000px;
}
.navbar{
display: flex;
justify-content: space-between;
width: 100vw;
background-color: white;
font-size: 20px;
transition: transform 1s ease-out;
}
.logo{
margin-left: 5%;
font-size: 25px;
font-weight: bold;
}
.logo_header{
display: flex;
margin-left: 7px;
}
.main_nav{
display: flex;
width: 333px;
float: right;
margin-right: 20px;
justify-content: space-between;
list-style: none;
}
.main_nav li{
display: inline;
color: black;
overflow: hidden;
transition: all 1s ease-out;
}
.main_nav li a{
color: black;
}
.nav-btn{
display: none;
background-color: white;
}
.container{
text-align: center;
color: white;
position: absolute;
font-size: 23px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.scroll-link-btn{
background: none;
border-color: white;
}
.scroll-link-btn a{
color: white;
font-size: 20px;
padding: 10px;
}
.title{
text-align: center;
font-size: 1.5rem;
}
#about{
padding-bottom: 500px;
}
#services{
padding-bottom: 500px;
background-color:aliceblue;
}
#tours{
padding-bottom: 500px;
}
footer{
background-color:rgb(26, 62, 62);
padding: 0.1px;
color: white;
text-align: center;
font-size: 1.1rem;
}
.arrow-up {
border: solid white;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 10px;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
position: absolute;
right: 10px;
margin-top: -33px;
}
#media only screen and (max-width : 600px){
.navbar{
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100vw;
font-size: 20px;
}
.main_nav{
display: none;
}
.show_nav{
display: flex;
width: 100vw;
height: 150px;
flex-direction: column;
justify-content: flex-start;
}
.main_nav li{
width: 100%;
height: 50px;
font-size: 25px;
justify-content: center;
padding: 0%;
}
.nav-btn {
margin-right: 5%;
font-size: 30px;
color: #ffffff;
background: transparent;
border-color: transparent;
transition: all 0.3s linear;
cursor: pointer;
display: block;
}
.logo_header{
width: 100%;
justify-content: space-between;
margin-right: 2%;
}
}
my js code:
const navToggle = document.querySelector('.nav-btn');
const linksContainer = document.querySelector('.navbar');
const links = document.querySelector('.main_nav');
navToggle.addEventListener('click',function(){
links.classList.toggle("show_nav");
})

top:-50px; for this navbar in class no active and if click on button class active go to navbar and margin-top:0px you can use a transition to very good style to navbar

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>

Block User scroll when full screen menu is open

i'm working on a full screen menu for a website but I need to disable the user to scroll while the menu is open. I can't find a fitting solution on the internet so it would be great if anyone could help me. I am not sure how to trigger the body to no-scroll if the menu is open. I am not that familiar with js.
Here is my code at the moment:
<body id="body">
<div class="navbar">
<div class="navbar-wrapper">
<div class="logo">
<img src="images/Gautama_Buddha_pic.png">
</div>
<nav id="menu">
<ul>
<li>ARTIST</li>
<li>EXHIBITIONS</li>
<li>EVENTS</li>
<li>VISIT US</li>
</ul>
<p class="lite-text">MENU</p>
<img src="images/close-line.png" class="close-icon" onclick="closemenu()">
</nav>
<img src="images/hamburger-menu.png" class="menu-icon" onclick="openmenu()">
</div>
</div>
<section class="one">
<h2>Hello World</h2>
</section>
<section class="two"></section>
<section class="three"></section>
<section class="four"></section>
<section class="five"></section>
<script>
var menu = document.getElementById("menu");
function closemenu(){
menu.style.top = "-100vh";
}
function openmenu(){
menu.style.top = "0";
}
</script>
</body>
And that's the CSS
*{
padding: 0;
margin: 0;
font-family: sans-serif;
user-select: none;
}
.container{
height: 100vh;
width: 100%;
background-color: white;
position: relative;
}
.navbar{
width: 100%;
position: fixed;
}
.navbar-wrapper{
width: 90%;
display: flex;
align-items: center;
justify-content: space-between;
margin: auto;
}
.logo img{
width: 50px;
cursor: pointer;
margin: 35px 0;
}
nav ul li{
list-style: none;
margin: 35px 0;
}
nav ul li a{
text-decoration: none;
font-size: 40px;
color: white;
padding: 10px;
letter-spacing: 5px;
position: relative;
}
nav ul li a::after{
content: '';
height: 3px;
width: 0%;
background: #dfa24e;
position: absolute;
bottom: 0;
left: 0;
transition: width 0.5s;
}
nav ul li a:hover::after{
width: 100%;
}
nav{
position: absolute;
width: 100%;
height: 100vh;
background-color: grey;
z-index: 2;
top: -100vh;
left: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
transition: 1s;
overflow: hidden;
}
.lite-text{
color: transparent;
font-size: 200px;
letter-spacing: 100px;
opacity: 0.1;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-weight: 800;
z-index: -1;
-webkit-text-stroke: 5px #000;
}
.close-icon{
width: 25px;
position: absolute;
right: 80px;
top: 50px;
cursor: pointer;
}
.menu-icon{
width: 30px;
cursor: pointer;
}
section{
height: 100vh;
width: 100%;
}
.one{
background-color: tomato;
}
.two{
background-color: thistle;
}
.three{
background-color: blue;
}
.four{
background-color: blueviolet;
}
.five{
background-color: wheat;
}
.no-scroll {
overflow:hidden;
}
Thanks for your help!

I used document.querySelector('body').classList.add('no-scroll') when menu opened & document.querySelector('body').classList.remove('no-scroll') when menu closed.
*{
padding: 0;
margin: 0;
font-family: sans-serif;
user-select: none;
}
.container{
height: 100vh;
width: 100%;
background-color: white;
position: relative;
}
.navbar{
width: 100%;
position: fixed;
}
.navbar-wrapper{
width: 90%;
display: flex;
align-items: center;
justify-content: space-between;
margin: auto;
}
.logo img{
width: 50px;
cursor: pointer;
margin: 35px 0;
}
nav ul li{
list-style: none;
margin: 35px 0;
}
nav ul li a{
text-decoration: none;
font-size: 40px;
color: white;
padding: 10px;
letter-spacing: 5px;
position: relative;
}
nav ul li a::after{
content: '';
height: 3px;
width: 0%;
background: #dfa24e;
position: absolute;
bottom: 0;
left: 0;
transition: width 0.5s;
}
nav ul li a:hover::after{
width: 100%;
}
nav{
position: absolute;
width: 100%;
height: 100vh;
background-color: grey;
z-index: 2;
top: -100vh;
left: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
transition: 1s;
overflow: hidden;
}
.lite-text{
color: transparent;
font-size: 200px;
letter-spacing: 100px;
opacity: 0.1;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-weight: 800;
z-index: -1;
-webkit-text-stroke: 5px #000;
}
.close-icon{
width: 25px;
position: absolute;
right: 80px;
top: 50px;
cursor: pointer;
}
.menu-icon{
width: 30px;
cursor: pointer;
}
section{
height: 100vh;
width: 100%;
}
.one{
background-color: tomato;
}
.two{
background-color: thistle;
}
.three{
background-color: blue;
}
.four{
background-color: blueviolet;
}
.five{
background-color: wheat;
}
.no-scroll {
overflow:hidden;
}
<body id="body">
<div class="navbar">
<div class="navbar-wrapper">
<div class="logo">
<img src="images/Gautama_Buddha_pic.png">
</div>
<nav id="menu">
<ul>
<li>ARTIST</li>
<li>EXHIBITIONS</li>
<li>EVENTS</li>
<li>VISIT US</li>
</ul>
<p class="lite-text">MENU</p>
<img src="images/close-line.png" class="close-icon" onclick="closemenu()">
</nav>
<img src="images/hamburger-menu.png" class="menu-icon" onclick="openmenu()">
</div>
</div>
<section class="one">
<h2>Hello World</h2>
</section>
<section class="two"></section>
<section class="three"></section>
<section class="four"></section>
<section class="five"></section>
<script>
var menu = document.getElementById("menu");
function closemenu(){
document.querySelector('body').classList.remove('no-scroll')
menu.style.top = "-100vh";
}
function openmenu(){
document.querySelector('body').classList.add('no-scroll')
menu.style.top = "0";
}
</script>
</body>

my whole website pushed to the left in responsive mode how to find the problem?

my whole website pushes content to left and usually its due to syntax error but i really cant find my problem please help I'm a beginner and my code has a lot of noise and i have run the html and css in multiple formatter and validator websites and still did not find anything i also removed all media queries to se if the problem resolved but no luck please help me.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
overflow: visible;
scroll-behavior: smooth;
}
body {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index: 2;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100%;
width: 100%;
}
/*Button Back To Top-----------------------------------------------------------------------*/
#myBtn {
display: none; /* Hidden by default */
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color: #f10e32; /* Set a background color */
color: white; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 15px; /* Some padding */
border-radius: 10px; /* Rounded corners */
font-size: 18px; /* Increase font size */
}
#myBtn:hover {
background-color: #d19ea6;
}
/*NAVBAR --------------------------------------------------------------------------------------*/
.navbar {
top: 0;
width: 100%;
height: auto;
background: #18191a;
display: flex;
justify-content: center;
align-content: center;
z-index: 2;
transition: top 0.3s;
}
.mylist {
height: 100%;
width: 500px;
display: flex;
justify-content: center;
align-content: center;
font-family: "Montserrat", sans-serif;
font-weight: 600;
}
.icons {
width: 100%;
height: 100%;
list-style: none;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.icons a {
text-decoration: none;
color: rgb(180, 148, 158);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.icons:hover {
opacity: 0.7;
}
.icon {
width: 35px;
height: auto;
}
/*INFO -------------------------------------------------------------------------------------------*/
.head-info {
background-color: rgba(134, 128, 128, 0.035);
width: 70%;
border-radius: 10px;
}
.info {
margin-top: 100px;
width: 100%;
height: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: "Roboto", sans-serif;
text-align: center;
}
.info p {
color: rgb(218, 214, 214);
line-height: 25px;
margin: 5px 150px;
font-family: "Montserrat", sans-serif;
font-size: 15px;
}
h1 {
color: rgb(177, 164, 164);
font-weight: 300;
margin-bottom: 5px;
}
h2 {
color: rgb(192, 184, 153);
font-weight: 400;
margin-bottom: 30px;
}
h3 {
font-size: 20px;
color: crimson;
font-weight: 500;
}
.btn {
margin: 80px 0 0 0;
font-family: "Roboto", sans-serif;
background: #f10e32;
border: none;
width: 136px;
height: auto;
outline: none;
overflow: hidden;
font-size: 16px;
padding: 10px;
color: rgb(198, 181, 181);
border-radius: 5px;
cursor: pointer;
scroll-behavior: smooth;
z-index: 1;
margin-bottom: 300px;
}
.btn:hover {
opacity: 0.7;
color: black;
transition: 0.3s ease-in;
text-decoration: none;
}
/*PROJECTS---------------------------------------------------------------------------------------*/
.projects {
scroll-behavior: smooth;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgba(134, 128, 128, 0.035);
border-radius: 10px;
}
.projects h4 {
display: none;
}
.one,
.two,
.three {
display: flex;
justify-content: center;
align-items: center;
margin: 10px;
scroll-behavior: smooth;
position: relative;
}
.images {
margin: 10px;
cursor: pointer;
width: 320px;
height: 220px;
border-radius: 4px;
}
h5 {
position: relative;
right: 200px;
top: 5px;
}
.image-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h5 {
visibility: hidden;
}
#first,
#second,
#third,
#fourth,
#fifth,
#sixth,
#seventh
{
position: relative;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(22, 22, 22, 0.705);
opacity: 0;
transition: 0.3s ease;
cursor: pointer;
}
.overlay p {
font-family: "Roboto", sans-serif;
font-size: 23px;
font-weight: 500;
color: #daced0;
}
.overlay:hover {
opacity: 1;
}
/*Summery and Skills -------------------------------------------------------------*/
.about {
background-color: rgba(134, 128, 128, 0.035);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: 200px;
margin-bottom: 30px;
font-family: "Montserrat", sans-serif;
padding: 70px;
border-radius: 20px;
}
.about h3 {
font-size: 20px;
font-weight: 500;
}
.about p {
color: rgb(218, 214, 214);
line-height: 25px;
margin: 5px 150px;
font-family: "Montserrat", sans-serif;
font-size: 15px;
}
.skills {
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
margin-top: 100px;
}
.skill {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 50px;
}
.skill a {
text-decoration: none;
color: rgb(180, 148, 158);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 10px;
transition: 0.3s ease;
}
.skill a:hover {
transform: translateY(-20px);
}
/*CONTACTS ----------------------------------------------------------------------------------------*/
.contact {
background-color: rgba(255, 0, 0, 0.096);
width: 100%;
height: 400px;
text-align: center;
}
.contacts h3 {
text-align: center;
font-size: 20px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
}
#centrada{
margin: 50px auto 0px auto;
width:300px;
font-family: 'Verdana';
font-weight: bold;
text-align: center;
}
.utopix{
padding-bottom:50px;
}
a{
color:#fff;
text-decoration:none;
}
.cube {
width: 100%;
height: 50px;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
cursor: pointer;
}
.default-state,.active-state {
height: 50px;
}
.cube +.cube{
margin:10px 0px;
}
.default-state {
-webkit-transform: translateZ(25px);
-moz-transform: translateZ(25px);
-o-transform: translateZ(25px);
-ms-transform: translateZ(25px);
transform: translateZ(25px);
}
.flip-to-top .active-state {
-webkit-transform: rotateX(90deg) translateZ(75px);
-moz-transform: rotateX(90deg) translateZ(75px);
-o-transform: rotateX(90deg) translateZ(75px);
-ms-transform: rotateX(90deg) translateZ(75px);
transform: rotateX(90deg) translateZ(75px);
}
.flip-to-bottom .active-state {
-webkit-transform: rotateX(-90deg) translateZ(-50px);
-moz-transform: rotateX(-90deg) translateZ(-50px);
-o-transform: rotateX(-90deg) translateZ(-50px);
-ms-transform: rotateX(-90deg) translateZ(-50px);
transform: rotateX(-90deg) translateZ(-50px);
}
.cube.flip-to-top:hover {
-webkit-transform: rotateX(-89deg);
-moz-transform: rotateX(-89deg);
-o-transform: rotateX(-89deg);
-ms-transform: rotateX(-89deg);
transform: rotateX(-89deg);
}
.cube.flip-to-bottom:hover {
-webkit-transform: rotateX(89deg);
-moz-transform: rotateX(89deg);
-o-transform: rotateX(89deg);
-ms-transform: rotateX(89deg);
transform: rotateX(89deg);
}
.cube {
text-align: center;
margin: 0 auto;
}
.default-state,
.active-state {
font-size: 16px;
color: #fff;
line-height: 50px;
-webkit-transition: background 250ms ease;
-moz-transition: background 250ms ease;
-o-transition: background 250ms ease;
transition: background 250ms ease;
}
.cube:hover .default-state {
background: #000;
}
.facebook {
background: #016d1f;
}
.twitter {
background: #0ec90b;
}
.google-plus {
background: #c01a04;
}
.linkedin {
background:#0590db;
}
.instagram {
background-color: #da4273;
}
/*MEDIA ------------------------------------------------------------------------------------------*/
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous"> <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;500&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./styles.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Document</title>
</head>
<body>
<div class="container">
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<nav id="navbar" class="navbar">
<ul class="mylist" >
<li class="icons" title="HOME">
<a href="./index.html"><img class="icon" src="./images/home.png" alt="">
Home
</a>
</li>
<li class="icons" title="resume">
<a href="download=""><img class="icon" src="./images/Resume.png" alt="">
Get Resume
</a>
</li>
<li class="icons" title="ABOUT ME">
<a href="#about"><img class="icon" src="./images/about.png" alt="Todo List">
About
</a>
</li>
<li class="icons" title="CONTACT ME">
<a href="#contacts"><img class="icon" src="./images/contact-book.png" alt="">
Contacts
</a>
</li>
</ul>
</nav>
<div class="info">
<div class="head-info">
<h1></h1>
<h2>Front-End Developer</h2>
<h3>Objective</h3>
<p>As a Front-End Developer, to be responsible for producing high quality solutions for company customers; bringing growing understanding of Modern HTML, JavaScript, and CSS, and passionate ability to learn and develope while working in the team of experts under a skillful and talented management.
</div>
<a class="btn" href="#first">VIEW PROJECTS</a>
</div>
<div id="projects" class="projects">
<div id="first-div" class="one">
<div id="first" class="image-container">
<a href="./projects/color-flipper/index.html" target="_blank">
<img src="./images/projects/Color-flipper.png" class="images" alt="Color Flipper">
<div class="overlay"><p>Color Flipper</p></div>
<h4>Color Flipper</h4>
</a>
</div>
<div id="second" class="image-container">
<a href="./projects/Comment/index.html" target="_blank">
<img src="./images/projects/secrets.png" class="images" alt="Secrets">
<div class="overlay"><p>Secrets</p></div>
<h4>Secrets</h4>
</a>
</div>
<div id="third" class="image-container">
<a href="./projects/counter/index.html" target="_blank"
><img src="./images/projects/counter.png" class="images" alt="Counter">
<div class="overlay"><p>Counter</p></div>
<h4>Counter</h4>
</a>
</div>
</div>
<div class="two">
<div id="fourth" class="image-container">
<a href="./projects/Login-page/index.html" target="_blank">
<img src="./images/projects/login.png" class="images" alt="Login">
<div class="overlay"><p>Login Page</p></div>
<h4>Login-Page</h4>
</a>
</div>
</div>
<div class="three">
<div id="fifth" class="image-container">
<a href="./projects/Random Quotes/index.html" target="_blank">
<img src="./images/projects/quotes.png" class="images" alt="Quotes">
<div class="overlay"><p>Random Quotes</p></div>
<h4>Random Quotes</h4>
</a>
</div>
<div id="sixth" class="image-container">
<a href="./projects/responsive-header/index.html" target="_blank">
<img src="./images/projects/header.png" class="images" alt="Movies">
<div class="overlay"><p>Movies</p></div>
<h4>Movies</h4>
</a>
</div>
<div id="seventh" class="image-container">
<a href="./projects/todo-list/index.html" target="_blank">
<img src="./images/projects/todo.png" class="images" alt="">
<div class="overlay"><p>Todo List</p></div>
<h4>Todo-List</h4>
</a>
</div>
</div>
</div>
<div id="about" class="about">
<h3>Summery</h3>
<p>With over 5 years of experience in English translation I have decided to change my career into something more rewarding and futureproof such as web development.
So as of 2019 I have trained online to become a front-end web developer and covered various topics such as responsive web design, vanilla JavaScript web application basics and user friendly UI and UX design.
</p>
<div class="skills">
<h3>Skills</h3>
<div class="skill">
<img src="./images/skills/html.png" alt=""><br>HTML
<img src="./images/skills/css.png" alt=""><br>CSS3
<img src="./images/skills/js.png" alt=""><br>JAVASCRIPT
<img src="./images/skills/git.png" alt=""><br>Git
<img src="./images/skills/figma.png" alt=""><br>Figma
<img src="./images/skills/wordpress.png" alt=""><br>Wordpress
<img src="./images/skills/photoshop.png" alt=""><br>Photoshop
<img src="./images/skills/word.png" alt=""><br>Word
<img src="./images/skills/excel.png" alt=""><br>Excell
<img src="./images/skills/powerpoint.png" alt=""><br>Powerpoint
</div>
</div>
</div>
<div id="contacts" class="contacts">
<h3>Contact Me</h3>
<div id="centrada">
<div class="cube flip-to-top">
<div class="default-state facebook">
<span>Phone</span>
</div>
<div class="active-state facebook">
<span>+98-0990-136-91-46</span>
</div>
</div>
<div class="cube flip-to-top google-plus">
<div class="default-state">
<span>Gmail</span>
</div>
<div class="active-state google-plus">
<span><a>naeimipoor.a#gmail.com</a></span>
</div>
</div>
<div class="cube flip-to-top twitter">
<div class="default-state">
<span>Whatsapp</span>
</div>
<div class="active-state twitter">
<span>+98-990-136-91-46</span>
</div>
</div>
<div class="cube flip-to-top">
<div class="default-state linkedin">
<span>Linkedin</span>
</div>
<div class="active-state linkedin">
<span>Ashkan Naeimipoor</span>
</div>
</div>
</div>
</div>
</div>
<script>
/*NAVBAR JAVASCRIPT-----------------------------------------*/
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-50px";
}
prevScrollpos = currentScrollPos;
}
/*BACK ON TOP BUTTON JAVASCRIPT------------------------------------------------*/
//Get the button:
mybutton = document.getElementById("myBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
</script>
</body>
</html>

Add flex-wrap:wrap on .skill
.skill {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 50px;
flex-wrap: wrap; /*Add Here*/
}

Link click issue with a static click function. How to fix this?

Info
I have a flickity slideshow, that on a 'static click' is going to the next pictures.In addition I have on top of the pictures inside my flickity slideshow a button with some caption and a a href linked to an external website (e.g. https://www.google.it).
Here my issue:
When I click on the link my flickity during the external loading (around 500 ms) is going to the next slide instead of stop working.
What i need is to go to the URL immediately without having my flickity going to the next slide instead.
var flkty = new Flickity(elem, {
cellAlign: 'center',
contain: true,
wrapAround: true,
prevNextButtons: false,
pageDots: false,
autoPlay: false,
});
flkty.on( 'staticClick', function() {
flkty.next()
})
Have a look here ---------→
https://codepen.io/skurodrome/pen/XWXWapo

You Can't open google.com in same slider so please use target="blank" in anchor.Please see example it will work fine.
Change this HTML Code. Code is here :-
var elem = document.querySelector('.main-carousel');
var flkty = new Flickity(elem, {
cellAlign: 'center',
contain: true,
wrapAround: true,
prevNextButtons: false,
pageDots: false,
autoPlay: false,
});
flkty.on( 'staticClick', function() {
flkty.next()
})
body {
background: antiquewhite;
}
/*.is-selected .info {
opacity:1;
display:block;
transition: 0.25s;
transition-timing-function: ease-out;
transform: translateY(0);
opacity: 1;
}
.info{
transform: translateY(130%);
transition-timing-function: ease-in;
//transition: 0.2s;
opacity: 0;
transition: opacity .1s linear;
bottom: 100px;
position: absolute;
left: 50%;
background: #fff;
border-radius: 15px;
text-align: left;
cursor: pointer;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*/
.is-selected .info {
transform: translateY(0);
left:50%;
-webkit-transform: translate(-50%,0px);
transform: translate(-50%,0px);
transition: 0.4s;
transition-timing-function: ease-out;
opacity:1;
display:block;
}
.info{
transform: translateY(130%);
transition-timing-function: ease-in;
opacity: 0;
transition: opacity .3s linear;
transition: 0.5s;
bottom: 20px;
position: absolute;
left: 50%;
-webkit-transform: translate(-50%,80px);
transform: translate(-50%,80px);
background: #fff;
border-radius: 10px;
text-align: left;
cursor: pointer;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.caption {
background: #FAFAFA;
margin: 0;
padding: 10px;
text-align: center;
}
.avatar {
display:block;
opacity:1;
width:60px;
height:60px;
border-radius:50%;
padding: 2px;
background: linear-gradient(to top right, #fb8200, #c43390);
}
.avatar img {
width: 100%;
height: 100%;
background-color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #fff;
}
/*
.avatar {
display:block;
opacity:1;
width:60px;
height:60px;
border-radius:50%;
//background-color:rgba(236, 240, 241,1.0);
//border: 3px solid rgb(236, 240, 241);
display:inline-block;
border: 1px solid #cacaca;
overflow: hidden;
img {
width:100%;
}}
*/
.hide
{
display: none;
height:0;
}
.avatar-caption {
padding: 0 0 0 20px;
}
.front-page-gallery .product-moods .gallery-cell .info a .thumbnail img {
max-width: 100%;
max-height: 100%;
}
img {
height: auto;
max-width: 100%;
display: block;
}
.front-page-gallery .product-moods .gallery-cell .info a h3 {
font-size: .825rem;
}
.front-page-gallery .product-moods .gallery-cell .info a, .front-page-gallery .product-moods .gallery-cell .info h3, .front-page-gallery .product-moods .gallery-cell .info p {
white-space: nowrap;
line-height: 1.2;
}
h1, h2, h3, p, ul {
color: #262626;
letter-spacing: 0;
margin: 0;
font-size: 12px;
line-height: 14px;
}
h1, h2, h3 {
color: #262626;
color: rgba(var(--i1d,38,38,38),1);
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 18px;
color:black;
}
.front-page-gallery .product-moods .gallery-cell .info a .thumbnail {
width: 40px;
height: 40px;
margin-right: 5px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.info a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
padding: .5rem 1.4em .5rem 1.4rem;
text-decoration:none;
}
html,
* {
box-sizing: border-box;
}
html {
font-family: sans-serif;
}
.slide,
.main-carousel {
width: 100%;
height: 287px;
//height: 587px;
}
.carousel-cell { margin-right: 10px; }
.slide {
border-radius:10px;
padding: 1rem;
width: 500px;
color: white;
}
.slide-1 {
background: red;
}
.slide-2 {
background: blue;
background-image: url("https://instagram.ffco2-1.fna.fbcdn.net/v/t51.2885-15/sh0.08/e35/c0.151.1349.1349a/s640x640/97960668_102131031487479_5118500540678732059_n.jpg?_nc_ht=instagram.ffco2-1.fna.fbcdn.net&_nc_cat=103&_nc_ohc=IZgKw1IUOCwAX_WD1KZ&oh=0e2dbbec3a33af0c1905fcfd8bc485bc&oe=5F1585A9");
background-repeat: no-repeat;
background-size: cover;
}
.slide-3 {
background: blue;
background-image: url("https://instagram.ffco2-1.fna.fbcdn.net/v/t51.2885-15/sh0.08/e35/p640x640/95420076_657451761718836_7126794433093464345_n.jpg?_nc_ht=instagram.ffco2-1.fna.fbcdn.net&_nc_cat=100&_nc_ohc=cMN4jjBUawUAX-cMrN7&oh=a83c7fa9be06d83910444d8cf652a1fc&oe=5F13818B");
background-repeat: no-repeat;
background-size: cover;
}
.slide-4 {
background-image: url("https://pbs.twimg.com/media/Bi4fWQoCMAATf5e.jpg");
background-color: black;
background-size: cover;
//background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.slide-5 {
background: purple;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/flickity#2.0.11/dist/flickity.css">
<div class="main-carousel">
<div class="carousel-cell">
<div class="slide slide-1">
1
</div>
</div>
<!--2-->
<div class="carousel-cell" >
<div class="slide slide-2" ></div>
<div class="info">
<a target="_blank" href="https://www.google.com/" class="flickity_link">
<div class="thumbnail">
<div class="avatar">
<img src="https://instagram.ffco2-1.fna.fbcdn.net/v/t51.2885-19/s150x150/61984225_404664133594231_7441499034704936960_n.jpg?_nc_ht=instagram.ffco2-1.fna.fbcdn.net&_nc_ohc=GQqwKdosiZsAX_hOD2p&oh=83248d05fda0a9af488e722739842f15&oe=5F1342F9" alt="tester"></div></div><div class="avatar-caption"><h3>Samutaro</h3><p class="color">Narratives Not Noise</p></div></a></div></div>
<!--3-->
<div class="carousel-cell">
<div class="slide slide-3"></div>
<div class="info">
<a target="_blank" href="https://www.google.it/" class="flickity_link">
<div class="thumbnail">
<div class="avatar">
<img src="https://instagram.ffco2-1.fna.fbcdn.net/v/t51.2885-19/s320x320/45710471_1974274545985110_3650146834896125952_n.jpg?_nc_ht=instagram.ffco2-1.fna.fbcdn.net&_nc_ohc=6YMGwWKDusMAX8AQMU2&oh=9cdbea6cf114306d368ecf2bc50a4628&oe=5F168E4A" alt="tester"></div></div><div class="avatar-caption"><h3>Poptones 1979</h3><p class="secondary">⚡️AFFA</p></div></a></div>
</div>
<div class="carousel-cell">
<div class="slide slide-4">
4
</div>
</div>
<div class="carousel-cell">
<div class="slide slide-5">
5
</div>
</div>
</div>
<script src="https://unpkg.com/flickity#2.0.11/dist/flickity.pkgd.js"></script>

How do I center my buttons on my website?

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.

We Keep Coding

JavaScript is the programming language of the Web.

Navigation Bar Transitions does not work, what is wrong? - javascript

top:-50px; for this navbar in class no active and if click on button class active go to navbar and margin-top:0px you can use a transition to very good style to navbar

Related

After adding bootstrap there is white line between my divs

Block User scroll when full screen menu is open

my whole website pushed to the left in responsive mode how to find the problem?

Link click issue with a static click function. How to fix this?

How do I center my buttons on my website?

Categories

Resources