I have attempted to follow a guide for a scroll reveal website, however i keep running into the issue where my nav menu will not close, it constantly shows, however the code i copied over is the exact same as in the video/documentation. The idea is that when i click a javascript made button it should close my nav then open it.
Would appreciate some help
/*=============== SHOW MENU ===============*/
const navMenu = document.getElementById('nav-menu'),
navToggle = document.getElementById('nav-toggle'),
navClose = document.getElementById('nav-close')
/*===== MENU SHOW =====*/
/* Validate if constant exists */
if(navToggle){
navToggle.addEventListener('click', () =>{
navMenu.classList.add('show-menu')
})
}
/*===== MENU HIDDEN =====*/
/* Validate if constant exists */
if(navClose){
navClose.addEventListener('click', () =>{
navMenu.classList.remove('show-menu')
})
}
/*=============== REMOVE MENU MOBILE ===============*/
const navLink = document.querySelectorAll('.nav__link')
const linkAction = () =>{
const navMenu = document.getElementById('nav-menu')
// When we click on each nav__link, we remove the show-menu class
navMenu.classList.remove('show-menu')
}
navLink.forEach(n => n.addEventListener('click', linkAction))
/*=============== CHANGE BACKGROUND HEADER ===============*/
const scrollHeader = () =>{
const header = document.getElementById('header')
// When the scroll is greater than 50 viewport height, add the scroll-header class to the header tag
this.scrollY >= 50 ? header.classList.add('bg-header')
: header.classList.remove('bg-header')
}
window.addEventListener('scroll', scrollHeader)
/*=============== SHOW SCROLL UP ===============*/
/*=============== SCROLL SECTIONS ACTIVE LINK ===============*/
/*=============== DARK LIGHT THEME ===============*/
/*=============== SCROLL REVEAL ANIMATION ===============*//*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Dancing Script:wght@600&family=Lora:wght@500;600&family=Poppins:wght@400;500&display=swap");
/*=============== VARIABLES CSS ===============*/
:root {
--header-height: 3.5rem;
/*========== Colors ==========*/
/*Color mode HSL(hue, saturation, lightness)*/
--first-color: hsl(19, 64%, 54%);
--first-color-alt: hsl(19, 64%, 52%);
--title-color: hsl(19, 16%, 15%);
--text-color: hsl(19, 16%, 35%);
--text-color-light: hsl(19, 8%, 55%);
--body-color: hsl(19, 100%, 96%);
--container-color: hsl(19, 100%, 97%);
/*========== Font and typography ==========*/
/*.5rem = 8px | 1rem = 16px ...*/
--body-font: "Poppins", sans-serif;
--title-font: "Lora", serif;
--subtitle-font: "Dancing Script", cursive;
--biggest-font-size: 2.25rem;
--h1-font-size: 1.5rem;
--h2-font-size: 1.25rem;
--h3-font-size: 1rem;
--normal-font-size: .938rem;
--small-font-size: .813rem;
--smaller-font-size: .75rem;
/*========== Font weight ==========*/
--font-medium: 500;
--font-semi-bold: 600;
/*========== z index ==========*/
--z-tooltip: 10;
--z-fixed: 100;
}
@media screen and (min-width: 1024px) {
:root {
--biggest-font-size: 4rem;
--h1-font-size: 2.25rem;
--h2-font-size: 1.5rem;
--h3-font-size: 1.25rem;
--normal-font-size: 1rem;
--small-font-size: .875rem;
--smaller-font-size: .813rem;
}
}
/*=============== BASE ===============*/
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--body-font);
font-size: var(--normal-font-size);
background-color: var(--body-color);
color: var(--text-color);
transition: background 0.4s; /* for dark mode animation */
}
h1, h2, h3 {
color: var(--title-color);
font-weight: var(--font-medium);
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
height: auto;
}
/*=============== THEME ===============*/
/*========== Variables Dark theme ==========*/
/*==========
Color changes in some parts of
the website, in light theme
==========*/
/*=============== REUSABLE CSS CLASSES ===============*/
.container {
max-width: 1024px;
margin-inline: 1.5rem;
}
.grid {
display: grid;
gap: 1.5rem;
}
.section {
padding-block: 5rem 1rem;
}
.section__title {
font-size: var(--h1-font-size);
font-family: var(--title-font);
margin-bottom: 1.5rem;
}
.section__subtitle {
display: block;
font-size: var(--h2-font-size);
font-family: var(--subtitle-font);
color: var(--first-color);
margin-bottom: 0.5rem;
}
.section__title,
.section__subtitle {
text-align: center;
}
.main {
overflow: hidden; /* For animation ScrollReveal */
}
/*=============== HEADER & NAV ===============*/
.header {
position: fixed;
width: 100%;
background-color: var(--body-color);
top: 0;
left: 0;
z-index: var(--z-fixed);
transition: box-shadow .3s, background .4s;
}
.nav {
position: relative;
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__logo,
.nav__toggle,
.nav__close{
display: flex;
color: var(--title-color);
}
.nav__logo{
align-items: center;
column-gap: .5rem;
font-family: var(--title-font);
font-size: var(--h3-font-size);
font-weight: var(--font-semi-bold);
transition: color .3s;
}
.nav__logo img{
width: 25px;
}
.nav__logo:hover{
color: var(--first-color);
}
.nav__toggle{
font-size: 1.25rem;
cursor: pointer;
}
@media screen and (max-width: 767px){
.nav__menu{
position: fixed;
top: -100%;
left: 0;
background-color: var(--body-color);
width: 100%;
box-shadow: 0 8px 20px hsla(19, 64%, 24%, .1);
padding-block: 3.5rem;
transition: top .4s;
}
}
.nav__list{
display: flex;
flex-direction: column;
text-align: center;
row-gap: 2rem;
}
.nav__link{
color: var(--title-color);
font-weight: var(--font-medium);
transition: color .4s;
}
.nav__link:hover{
color: var(--first-color);
}
.nav__close{
position: absolute;
top: 1rem;
right: 1.5rem;
font-size: 1.5rem;
cursor: pointer;
}
.nav__img-1,
.nav__img-2{
position: absolute;
opacity: .2;
}
.nav__img-1{
width: 100px;
top: .75rem;
left: -2rem;
transform: rotate(165deg);
}
.nav__img-2{
width: 50px;
right: -1rem;
bottom: 0;
transform: rotate(-30deg);
}
.
/* Show menu */
.show-menu{
top: 0;
}
/* Change background header */
.bg-header{
box-shadow: 0 2px 8px hsla(19, 64%, 24%, .1);
}
/* Active link */
/*=============== HOME ===============*/
.home{
position: relative;
}
.home__container{
row-gap: 3rem;
padding-top: 2rem;
}
.home__img{
width: 300px;
justify-self: center;
}
.home__data{
text-align: center;
}
.home__title{
font-size: var(--biggest-font-size);
font-family: var(--title-font);
margin-bottom: 1rem;
}
.home__title img{
width: 40px;
}
.home__title div{
display: flex;
align-items: center;
justify-content: center;
column-gap: .5rem;
}
.home__description{
padding: 0 1rem;
margin-bottom: 2.5rem;
}
.home__leaf-1,
.home__leaf-2{
position: absolute;
opacity: .2;
}
.home__leaf-1{
width: 80px;
top: 8rem;
left: -1rem;
transform: rotate(90deg);
}
.home__leaf-2{
width: 100px;
right: -2rem;
bottom: 1rem;
transform: rotate(-15deg);
}
/*=============== BUTTON ===============*/
.button{
display: inline-flex;
align-items: center;
column-gap: .5rem;
background-color: var(--first-color);
padding: 1rem 1.5rem;
border-radius: 4rem;
color: #fff;
font-weight: var(--font-medium);
transition: background .3s;
}
.button i{
font-size: 1.5rem;
transition: transform .3s;
}
.button:hover{
background-color: var(--first-color-alt);
}
.button:hover i{
transform: translateX(.25rem);
}
/*=============== ABOUT ===============*/
.about{
position: relative;
}
.about__container{
row-gap: 3rem;
}
.about__data{
text-align: center;
}
.about__title img{
width: 30px;
}
.about__title div{
display: flex;
justify-content: center;
align-items: center;
column-gap: .5rem;
}
.about__img{
width: 300px;
justify-self: center;
}
.about__leaf{
width: 100px;
opacity: .2;
position: absolute;
right: -1.5rem;
bottom: 11rem;
transform: rotate(-15deg);
}
/*=============== POPULAR ===============*/
.popular__container{
padding-top: 4rem;
grid-template-columns: 250px;
justify-content: center;
row-gap: 5.5rem;
}
.popular__card{
position: relative;
background-color: var(--container-color);
padding: 7rem 2rem 1.5rem;
box-shadow: 0 8px 20px hsla(19, 64%, 48%, .08);
border-radius: 1rem;
text-align: center;
}
.popular__img{
width: 220px;
position: absolute;
inset: 0;
top: -2.5rem;
margin: 0 auto;
transition: transform .4s;
}
.popular__name{
font-size: var(--h3-font-size);
font-family: var(--title-font);
margin-bottom: .25rem;
}
.popular__description{
display: block;
font-size: var(--smaller-font-size);
margin-bottom: 1rem;
}
.popular__price{
font-size: var(--h3-font-size);
font-weight: var(--font-medium);
color: var(--first-color);
}
.popular__button{
display: flex;
background-color: var(--first-color);
padding: 6px;
border-radius: 50%;
border: none;
outline: none;
color: #fff;
font-size: 1.25rem;
box-shadow: 0 4px 20px hsla(19, 64%, 20%, .2);
position: absolute;
bottom: 1.25rem;
right: 1.25rem;
cursor: pointer;
transition: background .3s;
}
.popular__button:hover{
background-color: var(--first-color);
}
.popular__card:hover .popular__img{
transform: translateY(-.25rem);
}
/*=============== RECENTLY ===============*/
/*=============== NEWSLETTER ===============*/
/*=============== FOOTER ===============*/
/*=============== SCROLL BAR ===============*/
/*=============== SCROLL UP ===============*/
/* Show Scroll Up*/
/*=============== BREAKPOINTS ===============*/
/* For small devices */
/* For medium devices */
/* For large devices */<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--=============== FAVICON ===============-->
<link rel="icon" type="image/png" href="assets/favicon.png">
<!--=============== REMIXICONS ===============-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet">
<!--=============== CSS ===============-->
<link rel="stylesheet" href="assets/styles.css">
<title>Kaas</title>
</head>
<body>
<!--==================== HEADER ====================-->
<header id="header">
<nav >
<a href="#" >
<img src="assets/logo.png" alt="logo image">
Kaas
</a>
<div id="nav-menu">
<ul >
<li >
<a href="#home" >Home</a>
</li>
<li >
<a href="#about" >About us</a>
</li>
<li >
<a href="#popular" >Popular</a>
</li>
<li >
<a href="#recently" >Recently</a>
</li>
</ul>
<!-- Close button -->
<div id="nav-close">
<i ></i>
</div>
<img src="assets/nav__img-1.png" alt="nav iamge" >
<img src="assets/nav__img-2.png" alt="nav iamge" >
</div>
<div >
<!-- Theme change button -->
<!-- <i id="theme-button"></i> -->
<!-- Toggle button -->
<div id="nav-toggle">
<i ></i>
</div>
</div>
</nav>
</header>
<!--==================== MAIN ====================-->
<main >
<!--==================== HOME ====================-->
<section id="home">
<div >
<img src="assets/home-1.png" alt="home image" >
<div >
<h1 >
Geniet van
<div>
<img src="assets/home-2.png" alt="home image">
Goeie Kaas
</div>
</h1>
<p >
Geniet van lekkere kaas met je hele familie
Of gewoon alleen.
</p>
<a href="#" >
Bestel Hier <i ></i>
</a>
</div>
</div>
<img src="assets/home-leaf-1" alt="home image" >
<img src="assets/home-leaf-2" alt="home image" >
</section>
<!--==================== ABOUT ====================-->
<section id="about">
<div >
<div >
<span >About Us</span>
<h2 >
<div>
Wij Bieden U
<img src="assets/about-kaas-title.png" alt="about image">
</div>
Goede kaas
</h2>
<p >
Kaas die van de echte kaasboer komt,
beter dan de kaas van de supermarkt,
beter dan dit kan het niet.
</p>
</div>
<img src="assets/about-kaas" alt="about image" >
</div>
<img src="assets/home-leaf-1" alt="about image" >
</section>
<!--==================== POPULAR ====================-->
<section id="popular">
<span >De Beste Kaas</span>
<h2 >Populaire Kaas</h2>
<div >
<article >
<img src="assets/popular-kaas-1" alt="popular image" >
<h3 >Kaas 1</h3>
<span >Kaas 1</span>
<span >€5,00-</span>
<button >
<i ></i>
</button>
</article>
<article >
<img src="assets/popular-kaas-2" alt="popular image" >
<h3 >Kaas 2</h3>
<span >Kaas 2</span>
<span >€5,00-</span>
<button >
<i ></i>
</button>
</article>
<article >
<img src="assets/popular-kaas-3" alt="popular image" >
<h3 >Kaas 3</h3>
<span >Kaas 3</span>
<span >€5,00-</span>
<button >
<i ></i>
</button>
</article>
</div>
</section>
<!--==================== RECENTLY ====================-->
<section id="recently">
<div >
<div >
<span >Recent toegevoegd</span>
<h2 >
Kaas 1 <br>
Kaas 2
</h2>
<p >
Bekijk hier de nieuwe producten.
</p>
<a href="#" >
Bestel Hier <i ></i>
</a>
<img src="assets/recently.png" alt="recently image" >
</div>
<img src="assets/recently-2.png" alt="recently image" >
</div>
</section>
<!--==================== NEWSLETTER ====================-->
<section >
</section>
</main>
<!--==================== FOOTER ====================-->
<footer >
</footer>
<!--========== SCROLL UP ==========-->
<!--=============== SCROLLREVEAL ===============-->
<script src=""></script>
<!--=============== MAIN JS ===============-->
<script src="assets/main.js"></script>
</body>
</html>it appears that for some reason the close button will not close the menu it is constantly displaying for me and i truly don't understand why. in the video i watched it simply removes the close menu when clicking the X and when u click the 4 dots it should open the menu. It also appears that the 4 dots are stuck in the bottom left of the nav menu in stead of being in the top right where they're meant to be. Would greatly appreciate some help.
As per request i have inserted the full html/css/javascript into the post. Do keep in mind the project is not fully finished yet
CodePudding user response：
It actually does work. Take a look into your CSS and you'll see that you're using a Media Query in which you're positioning the .nav__menu outside of the screen. The Media Query has a max-width: 767px;, so on everything wider than that, the CSS won't get applied. If you start to resize your screen, you'll see that eventually the hamburger menu will disappear and works just fine when clicking on the button!
@media screen and (max-width: 767px){
.nav__menu{
position: fixed;
top: -100%;
left: 0;
background-color: var(--body-color);
width: 100%;
box-shadow: 0 8px 20px hsla(19, 64%, 24%, .1);
padding-block: 3.5rem;
transition: top .4s;
}
}
CodePudding user response：
I think you need to add toggle function in js. Also, I changed some css code
/*=============== SHOW MENU ===============*/
const navMenu = document.getElementById('nav-menu'),
navToggle = document.getElementById('nav-toggle'),
navClose = document.getElementById('nav-close');
/*===== MENU SHOW =====*/
/* Validate if constant exists */
if(navToggle){
navToggle.addEventListener('click', () =>{
const navs = document.querySelectorAll('.nav__list')
navs.forEach(nav => nav.classList.toggle('Navbar__ToggleShow'));
// const closeMenu = document.getElementById("nav-close");
// closeMenu.classList.toggle("nav-close")
})
}
/*===== MENU HIDDEN =====*/
/* Validate if constant exists */
if(navClose){
navClose.addEventListener('click', () =>{
const navs = document.querySelectorAll('.nav__list')
navs.forEach(nav => nav.classList.remove("Navbar__ToggleShow"));
})
}
/*=============== REMOVE MENU MOBILE ===============*/
const navLink = document.querySelectorAll('.nav__link')
const linkAction = () =>{
const navMenu = document.getElementById('nav-menu')
// When we click on each nav__link, we remove the show-menu class
navMenu.classList.remove('show-menu')
}
navLink.forEach(n => n.addEventListener('click', linkAction))
/*=============== CHANGE BACKGROUND HEADER ===============*/
const scrollHeader = () =>{
const header = document.getElementById('header')
// When the scroll is greater than 50 viewport height, add the scroll-header class to the header tag
this.scrollY >= 50 ? header.classList.add('bg-header')
: header.classList.remove('bg-header')
}
window.addEventListener('scroll', scrollHeader)
/*=============== SHOW SCROLL UP ===============*/
/*=============== SCROLL SECTIONS ACTIVE LINK ===============*/
/*=============== DARK LIGHT THEME ===============*/
/*=============== SCROLL REVEAL ANIMATION ===============*//*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Dancing Script:wght@600&family=Lora:wght@500;600&family=Poppins:wght@400;500&display=swap");
/*=============== VARIABLES CSS ===============*/
:root {
--header-height: 3.5rem;
/*========== Colors ==========*/
/*Color mode HSL(hue, saturation, lightness)*/
--first-color: hsl(19, 64%, 54%);
--first-color-alt: hsl(19, 64%, 52%);
--title-color: hsl(19, 16%, 15%);
--text-color: hsl(19, 16%, 35%);
--text-color-light: hsl(19, 8%, 55%);
--body-color: hsl(19, 100%, 96%);
--container-color: hsl(19, 100%, 97%);
/*========== Font and typography ==========*/
/*.5rem = 8px | 1rem = 16px ...*/
--body-font: "Poppins", sans-serif;
--title-font: "Lora", serif;
--subtitle-font: "Dancing Script", cursive;
--biggest-font-size: 2.25rem;
--h1-font-size: 1.5rem;
--h2-font-size: 1.25rem;
--h3-font-size: 1rem;
--normal-font-size: .938rem;
--small-font-size: .813rem;
--smaller-font-size: .75rem;
/*========== Font weight ==========*/
--font-medium: 500;
--font-semi-bold: 600;
/*========== z index ==========*/
--z-tooltip: 10;
--z-fixed: 100;
}
@media screen and (min-width: 1024px) {
:root {
--biggest-font-size: 4rem;
--h1-font-size: 2.25rem;
--h2-font-size: 1.5rem;
--h3-font-size: 1.25rem;
--normal-font-size: 1rem;
--small-font-size: .875rem;
--smaller-font-size: .813rem;
}
}
/*=============== BASE ===============*/
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--body-font);
font-size: var(--normal-font-size);
background-color: var(--body-color);
color: var(--text-color);
transition: background 0.4s; /* for dark mode animation */
}
h1, h2, h3 {
color: var(--title-color);
font-weight: var(--font-medium);
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
height: auto;
}
/*=============== THEME ===============*/
/*========== Variables Dark theme ==========*/
/*==========
Color changes in some parts of
the website, in light theme
==========*/
/*=============== REUSABLE CSS CLASSES ===============*/
.container {
max-width: 1024px;
margin-inline: 1.5rem;
}
.grid {
display: grid;
gap: 1.5rem;
}
.section {
padding-block: 5rem 1rem;
}
.section__title {
font-size: var(--h1-font-size);
font-family: var(--title-font);
margin-bottom: 1.5rem;
}
.section__subtitle {
display: block;
font-size: var(--h2-font-size);
font-family: var(--subtitle-font);
color: var(--first-color);
margin-bottom: 0.5rem;
}
.section__title,
.section__subtitle {
text-align: center;
}
.main {
overflow: hidden; /* For animation ScrollReveal */
}
/*=============== HEADER & NAV ===============*/
.header {
position: fixed;
width: 100%;
background-color: var(--body-color);
top: 0;
left: 0;
z-index: var(--z-fixed);
transition: box-shadow .3s, background .4s;
}
.nav {
position: relative;
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__logo,
.nav__toggle,
.nav__close{
display: flex;
color: var(--title-color);
}
.nav__logo{
align-items: center;
column-gap: .5rem;
font-family: var(--title-font);
font-size: var(--h3-font-size);
font-weight: var(--font-semi-bold);
transition: color .3s;
}
.nav__logo img{
width: 25px;
}
.nav__logo:hover{
color: var(--first-color);
}
.nav__toggle{
font-size: 1.25rem;
cursor: pointer;
}
@media screen and (max-width: 767px){
.nav__menu{
position: fixed;
top: -100%;
left: 0;
background-color: var(--body-color);
width: 100%;
box-shadow: 0 8px 20px hsla(19, 64%, 24%, .1);
padding-block: 3.5rem;
transition: top .4s;
}
}
.nav__list{
display:none;
}
.nav__link{
color: var(--title-color);
font-weight: var(--font-medium);
transition: color .4s;
}
.nav__link:hover{
color: var(--first-color);
}
.nav__close{
position: absolute;
top: 1rem;
right: 1.5rem;
font-size: 1.5rem;
cursor: pointer;
}
.nav__img-1,
.nav__img-2{
position: absolute;
opacity: .2;
}
.nav__img-1{
width: 100px;
top: .75rem;
left: -2rem;
transform: rotate(165deg);
}
.nav__img-2{
width: 50px;
right: -1rem;
bottom: 0;
transform: rotate(-30deg);
}
.
/* Show menu */
.show-menu{
top: 0;
}
/* Change background header */
.bg-header{
box-shadow: 0 2px 8px hsla(19, 64%, 24%, .1);
}
/* Active link */
/*=============== HOME ===============*/
.home{
position: relative;
}
.home__container{
row-gap: 3rem;
padding-top: 2rem;
}
.home__img{
width: 300px;
justify-self: center;
}
.home__data{
text-align: center;
}
.home__title{
font-size: var(--biggest-font-size);
font-family: var(--title-font);
margin-bottom: 1rem;
}
.home__title img{
width: 40px;
}
.home__title div{
display: flex;
align-items: center;
justify-content: center;
column-gap: .5rem;
}
.home__description{
padding: 0 1rem;
margin-bottom: 2.5rem;
}
.home__leaf-1,
.home__leaf-2{
position: absolute;
opacity: .2;
}
.home__leaf-1{
width: 80px;
top: 8rem;
left: -1rem;
transform: rotate(90deg);
}
.home__leaf-2{
width: 100px;
right: -2rem;
bottom: 1rem;
transform: rotate(-15deg);
}
/*=============== BUTTON ===============*/
.button{
display: inline-flex;
align-items: center;
column-gap: .5rem;
background-color: var(--first-color);
padding: 1rem 1.5rem;
border-radius: 4rem;
color: #fff;
font-weight: var(--font-medium);
transition: background .3s;
}
.button i{
font-size: 1.5rem;
transition: transform .3s;
}
.button:hover{
background-color: var(--first-color-alt);
}
.button:hover i{
transform: translateX(.25rem);
}
/*=============== ABOUT ===============*/
.about{
position: relative;
}
.about__container{
row-gap: 3rem;
}
.about__data{
text-align: center;
}
.about__title img{
width: 30px;
}
.about__title div{
display: flex;
justify-content: center;
align-items: center;
column-gap: .5rem;
}
.about__img{
width: 300px;
justify-self: center;
}
.about__leaf{
width: 100px;
opacity: .2;
position: absolute;
right: -1.5rem;
bottom: 11rem;
transform: rotate(-15deg);
}
/*=============== POPULAR ===============*/
.popular__container{
padding-top: 4rem;
grid-template-columns: 250px;
justify-content: center;
row-gap: 5.5rem;
}
.popular__card{
position: relative;
background-color: var(--container-color);
padding: 7rem 2rem 1.5rem;
box-shadow: 0 8px 20px hsla(19, 64%, 48%, .08);
border-radius: 1rem;
text-align: center;
}
.popular__img{
width: 220px;
position: absolute;
inset: 0;
top: -2.5rem;
margin: 0 auto;
transition: transform .4s;
}
.popular__name{
font-size: var(--h3-font-size);
font-family: var(--title-font);
margin-bottom: .25rem;
}
.popular__description{
display: block;
font-size: var(--smaller-font-size);
margin-bottom: 1rem;
}
.popular__price{
font-size: var(--h3-font-size);
font-weight: var(--font-medium);
color: var(--first-color);
}
.popular__button{
display: flex;
background-color: var(--first-color);
padding: 6px;
border-radius: 50%;
border: none;
outline: none;
color: #fff;
font-size: 1.25rem;
box-shadow: 0 4px 20px hsla(19, 64%, 20%, .2);
position: absolute;
bottom: 1.25rem;
right: 1.25rem;
cursor: pointer;
transition: background .3s;
}
.popular__button:hover{
background-color: var(--first-color);
}
.popular__card:hover .popular__img{
transform: translateY(-.25rem);
}
.Navbar__ToggleShow {
display: flex;
flex-direction: column;
text-align: center;
row-gap: 2rem;
}
/*=============== RECENTLY ===============*/
/*=============== NEWSLETTER ===============*/
/*=============== FOOTER ===============*/
/*=============== SCROLL BAR ===============*/
/*=============== SCROLL UP ===============*/
/* Show Scroll Up*/
/*=============== BREAKPOINTS ===============*/
/* For small devices */
/* For medium devices */
/* For large devices */<!--==================== HEADER ====================-->
<header id="header">
<nav >
<a href="#" >
<img src="assets/logo.png" alt="logo image">
Kaas
</a>
<div id="nav-menu">
<ul >
<li >
<a href="#home" >Home</a>
</li>
<li >
<a href="#about" >About us</a>
</li>
<li >
<a href="#popular" >Popular</a>
</li>
<li >
<a href="#recently" >Recently</a>
</li>
</ul>
<!-- Close button -->
<div id="nav-close" >
<i ></i>
</div>
<img src="assets/nav__img-1.png" alt="nav iamge" >
<img src="assets/nav__img-2.png" alt="nav iamge" >
</div>
<div >
<!-- Theme change button -->
<!-- <i id="theme-button"></i> -->
<!-- Toggle button -->
<div id="nav-toggle">
<i ></i>
</div>
</div>
</nav>
</header>
<!--==================== MAIN ====================-->
<main >
<!--==================== HOME ====================-->
<section id="home">
<div >
<img src="assets/home-1.png" alt="home image" >
<div >
<h1 >
Geniet van
<div>
<img src="assets/home-2.png" alt="home image">
Goeie Kaas
</div>
</h1>
<p >
Geniet van lekkere kaas met je hele familie
Of gewoon alleen.
</p>
<a href="#" >
Bestel Hier <i ></i>
</a>
</div>
</div>
<img src="assets/home-leaf-1" alt="home image" >
<img src="assets/home-leaf-2" alt="home image" >
</section>
<!--==================== ABOUT ====================-->
<section id="about">
<div >
<div >
<span >About Us</span>
<h2 >
<div>
Wij Bieden U
<img src="assets/about-kaas-title.png" alt="about image">
</div>
Goede kaas
</h2>
<p >
Kaas die van de echte kaasboer komt,
beter dan de kaas van de supermarkt,
beter dan dit kan het niet.
</p>
</div>
<img src="assets/about-kaas" alt="about image" >
</div>
<img src="assets/home-leaf-1" alt="about image" >
</section>
<!--==================== POPULAR ====================-->
<section id="popular">
<span >De Beste Kaas</span>
<h2 >Populaire Kaas</h2>
<div >
<article >
<img src="assets/popular-kaas-1" alt="popular image" >
<h3 >Kaas 1</h3>
<span >Kaas 1</span>
<span >€5,00-</span>
<button >
<i ></i>
</button>
</article>
<article >
<img src="assets/popular-kaas-2" alt="popular image" >
<h3 >Kaas 2</h3>
<span >Kaas 2</span>
<span >€5,00-</span>
<button >
<i ></i>
</button>
</article>
<article >
<img src="assets/popular-kaas-3" alt="popular image" >
<h3 >Kaas 3</h3>
<span >Kaas 3</span>
<span >€5,00-</span>
<button >
<i ></i>
</button>
</article>
</div>
</section>
<!--==================== RECENTLY ====================-->
<section id="recently">
<div >
<div >
<span >Recent toegevoegd</span>
<h2 >
Kaas 1 <br>
Kaas 2
</h2>
<p >
Bekijk hier de nieuwe producten.
</p>
<a href="#" >
Bestel Hier <i ></i>
</a>
<img src="assets/recently.png" alt="recently image" >
</div>
<img src="assets/recently-2.png" alt="recently image" >
</div>
</section>
<!--==================== NEWSLETTER ====================-->
<section >
</section>
</main>
<!--==================== FOOTER ====================-->
<footer >
</footer>