I have a problem with a transition in JS. What i want is that once the div has opacity 0, js remove it automatically. The problem is that, i have to exit the div area, and then it removes it. That is because i have a mouseleave, but my question is. How can i delete that div without my mouse leaving the div area? Here's the CodePen link:
https://codepen.io/SpeedItaly/pen/PoGPGJZ
function style() {
h4 = document.getElementById("hover_me");
header = document.getElementById("header");
logo = document.getElementById("hover_me1");
logo.addEventListener("mouseover", (e) => {
logo.style.transition = "1200ms ease-in-out opacity"
logo.style.opacity = "0"
});
logo.addEventListener("mouseleave", (e) => {
header.removeChild(logo);
});
menu = document.getElementById("menu");
if (logo.style.opacity == 0) {
menu.style.transition = "1200ms ease-in-out opacity"
menu.style.opacity = "1"
}
}
style();
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
background: #f4f4f4;
font-size: 16px;
font-family: "Inter";
font-weight: 400;
color: #fff;
}
.header {
width: 100%;
height: 100vh;
background: #222831;
}
.logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #222831;
z-index: 99;
cursor: default;
}
.logo>h4 {
font-size: 70px;
}
.menu {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
transform: translate(0%, -50%);
opacity: 0;
}
.menu>li {
display: inline-block;
margin-left: 5px;
margin-right: 5px;
}
.menu>li>a {
text-decoration: none;
font-size: 25px;
text-transform: uppercase;
font-weight: 200;
color: #fff;
}
.menu>li>a:hover {
color: rgba(255, 255, 255, .35);
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<body>
<!-- Start Header -->
<header class="header" id="header">
<!-- Start Logo Container -->
<div class="logo" id="hover_me1">
<h4 class="text_white" id="hover_me">SpeedItaly</h4>
</div>
<!-- End Logo Container -->
<!-- Start Menu -->
<ul class="menu" id="menu">
<li><a class="text_white" href="home.html">Home</a></li>
<li><a class="text_white" href="#">About</a></li>
<li><a class="text_white" href="#">Content</a></li>
</ul>
<!-- End Menu-->
</header>
<!-- End Header -->
You can use the transitionend event instead.
function style() {
h4 = document.getElementById("hover_me");
header = document.getElementById("header");
logo = document.getElementById("hover_me1");
logo.addEventListener("mouseover", (e) => {
logo.style.transition = "1200ms ease-in-out opacity"
logo.style.opacity = "0"
});
logo.addEventListener("transitionend", (e) => {
header.removeChild(logo);
});
menu = document.getElementById("menu");
if (logo.style.opacity == 0) {
menu.style.transition = "1200ms ease-in-out opacity"
menu.style.opacity = "1"
}
}
style();
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
background: #f4f4f4;
font-size: 16px;
font-family: "Inter";
font-weight: 400;
color: #fff;
}
.header {
width: 100%;
height: 100vh;
background: #222831;
}
.logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #222831;
z-index: 99;
cursor: default;
}
.logo>h4 {
font-size: 70px;
}
.menu {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
transform: translate(0%, -50%);
opacity: 0;
}
.menu>li {
display: inline-block;
margin-left: 5px;
margin-right: 5px;
}
.menu>li>a {
text-decoration: none;
font-size: 25px;
text-transform: uppercase;
font-weight: 200;
color: #fff;
}
.menu>li>a:hover {
color: rgba(255, 255, 255, .35);
}
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
</head>
<body>
<!-- Start Header -->
<header class="header" id="header">
<!-- Start Logo Container -->
<div class="logo" id="hover_me1">
<h4 class="text_white" id="hover_me">SpeedItaly</h4>
</div>
<!-- End Logo Container -->
<!-- Start Menu -->
<ul class="menu" id="menu">
<li><a class="text_white" href="home.html">Home</a></li>
<li><a class="text_white" href="#">About</a></li>
<li><a class="text_white" href="#">Content</a></li>
</ul>
<!-- End Menu-->
</header>
<!-- End Header -->
Just use a setTimeout. Specifically, setTimeout(function() {header.removeChild(logo)},1200).
function style() {
h4 = document.getElementById("hover_me");
header = document.getElementById("header");
logo = document.getElementById("hover_me1");
logo.addEventListener("mouseover", (e) => {
logo.style.transition = "1200ms ease-in-out opacity"
logo.style.opacity = "0"
setTimeout(function() {header.removeChild(logo)},1200)
});
menu = document.getElementById("menu");
if (logo.style.opacity == 0) {
menu.style.transition = "1200ms ease-in-out opacity"
menu.style.opacity = "1"
}
}
style();
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
background: #f4f4f4;
font-size: 16px;
font-family: "Inter";
font-weight: 400;
color: #fff;
}
.header {
width: 100%;
height: 100vh;
background: #222831;
}
.logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #222831;
z-index: 99;
cursor: default;
}
.logo>h4 {
font-size: 70px;
}
.menu {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
transform: translate(0%, -50%);
opacity: 0;
}
.menu>li {
display: inline-block;
margin-left: 5px;
margin-right: 5px;
}
.menu>li>a {
text-decoration: none;
font-size: 25px;
text-transform: uppercase;
font-weight: 200;
color: #fff;
}
.menu>li>a:hover {
color: rgba(255, 255, 255, .35);
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<body>
<!-- Start Header -->
<header class="header" id="header">
<!-- Start Logo Container -->
<div class="logo" id="hover_me1">
<h4 class="text_white" id="hover_me">SpeedItaly</h4>
</div>
<!-- End Logo Container -->
<!-- Start Menu -->
<ul class="menu" id="menu">
<li><a class="text_white" href="home.html">Home</a></li>
<li><a class="text_white" href="#">About</a></li>
<li><a class="text_white" href="#">Content</a></li>
</ul>
<!-- End Menu-->
</header>
<!-- End Header -->
You can use the following code to receive your current browser's Transition Events:
const getTransitionEvents = () => {
let t,
el = document.createElement("fakeelement");
let transitions = {
transition: {
Start: "transitionstart",
Run: "transitionrun",
Cancel: "transitioncancel",
End: "transitionend"
},
OTransition: {
Start: "oTransitionStart",
Run: "oTransitionRun",
Cancel: "oTransitionCancel",
End: "oTransitionEnd"
},
MozTransition: {
Start: "transitionstart",
Run: "transitionrun",
Cancel: "transitioncancel",
End: "transitionend"
},
WebkitTransition: {
Start: "webkitTransitionStart",
Run: "webkitTransitionRun",
Cancel: "webkitTransitionCancel",
End: "webkitTransitionEnd"
}
};
for (t in transitions) {
if (el.style[t] !== undefined) {
return transitions[t];
}
}
};
After that you can just bind the return of this function to a variable
const transEvt = getTransitionEvents();
and bind eventListeners to it
document.addEventListener(transEvt.End, (evt) => {
// do some cool stuff when the Transition ends
});
I use this myself, in a #just-for-fun #work-in-progress pen called Simple Image Loop without duplicating slides where I rearrange the slides after the transform transition has ended.
You can listen for the transitionend CSS event, and remove the node in it.
Also, it is very recommended to declare your variables and move CSS declarations into the CSS code, where possible.
function style() {
const h4 = document.getElementById("hover_me");
const header = document.getElementById("header");
const logo = document.getElementById("hover_me1");
const menu = document.getElementById("menu")
logo.addEventListener("mouseover", (e) => {
logo.classList.add("hidden")
logo.addEventListener("transitionend", () => {
logo.remove()
menu.classList.remove("hidden")
})
});
}
style();
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
background: #f4f4f4;
font-size: 16px;
font-family: "Inter";
font-weight: 400;
color: #fff;
}
.header {
width: 100%;
height: 100vh;
background: #222831;
}
.logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #222831;
z-index: 99;
cursor: default;
transition: 1200ms ease-in-out opacity;
}
.logo>h4 {
font-size: 70px;
}
.menu {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
transform: translate(0%, -50%);
transition: 1200ms ease-in-out opacity;
}
.menu>li {
display: inline-block;
margin-left: 5px;
margin-right: 5px;
}
.menu>li>a {
text-decoration: none;
font-size: 25px;
text-transform: uppercase;
font-weight: 200;
color: #fff;
}
.menu>li>a:hover {
color: rgba(255, 255, 255, .35);
}
.hidden{
opacity: 0;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<body>
<!-- Start Header -->
<header class="header" id="header">
<!-- Start Logo Container -->
<div class="logo" id="hover_me1">
<h4 class="text_white" id="hover_me">SpeedItaly</h4>
</div>
<!-- End Logo Container -->
<!-- Start Menu -->
<ul class="menu hidden" id="menu">
<li><a class="text_white" href="home.html">Home</a></li>
<li><a class="text_white" href="#">About</a></li>
<li><a class="text_white" href="#">Content</a></li>
</ul>
<!-- End Menu-->
</header>
<!-- End Header -->
Related
I wanted my menu to close when any of the links were clicked, and the same when I clicked outside the menu area, I tried different ways and was unsuccessful, could you help me?
I tried to use javascript but the result failed, I'm still a beginner so I'm having trouble.
JS
const btnMobile = document.getElementById('btn-mobile');
function toggleMenu(event) {
if (event.type === 'touchstart') event.preventDefault();
const nav = document.getElementById('nav');
nav.classList.toggle('active');
const active = nav.classList.contains('active');
event.currentTarget.setAttribute('aria-expanded', active);
if (active) {
event.currentTarget.setAttribute('aria-label', 'Fechar Menu');
} else {
event.currentTarget.setAttribute('aria-label', 'Abrir Menu');
}
}
btnMobile.addEventListener('click', toggleMenu);
btnMobile.addEventListener('touchstart', toggleMenu);
I looked in various forums and classes, however, for some reason none of the scripts worked.
HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu Mobile</title>
<link rel="stylesheet" href="menu.css">
</head>
<body>
<header id="header">
<a id="logo" href="">Menu</a>
<nav id="nav">
<button aria-label="Abrir Menu" id="btn-mobile" aria-haspopup="true" aria-controls="menu" aria-expanded="false">
<span id="hamburger"></span>
</button>
<ul id="menu" role="menu">
<li>Home</li>
<li>Serviços</li>
<li>Páginas</li>
<li>Projetos</li>
<li>Empresas</li>
<li>Cupcode</li>
<li>Recursos</li>
<li>Contato</li>
</ul>
</nav>
</header>
<script src="menu.js"></script>
</body>
</html>
Something like this should work. It's with JQuery.
I'm a beginner myself so it's maybe a bit too complicated or something else. But that did work for me.
It's not with your class and id names. It's just for you seeing how it can work.
$(document).mouseup(function (e) {
var container = $("#nav-toggle");
if (!container.is(e.target) // if clicked outside
&& container.has(e.target).length === 0)
{
container.hide();
$( "#nav-toggle" ).prop( "checked", false ); //to uncheck
}
});
$('.i').click(function() { // if i is clicked hide all the links
$('#nav-li').hide();
});
$('.nav-toggle').click(function() { // if the hamburger is clicked show them again
$('#nav-li').show();
});
#navbar {
text-align: center;
margin-top: -13px;
z-index: 999;
width: 100%;
font-family: 'Poppins';
position: sticky;
top: 0;
width: 100%;
height: 80px;
background-color: #fff
box-shadow: 10px 10px 20px #fff
}
.logo {
letter-spacing: 1px;
margin-bottom: -10px;
font-weight: bold;
margin-left: 10px;
font-size: 20px;
text-align: left;
font-family: 'Poppins';
padding: 5px;
text-transform: uppercase;
color: #000;
}
.nav-toggle {
display: none;
}
.nav-toggle-label {
position: absolute;
top: 15px;
right: 20px;
height: 30px;
display: flex;
align-items: center;
}
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
display: block;
background: #000;
height: 2px;
width: 2em;
border-radius: 5px;
position: relative;
}
.nav-toggle-label span::before,
.nav-toggle-label span::after {
content: '';
position: absolute;
}
.nav-toggle-label span::before {
bottom: 7px;
}
.nav-toggle-label span::after {
top: 7px;
}
nav {
cursor: pointer;
position: absolute;
text-align: left;
background: var(--background);
width: 100%;
transform: scale(1, 0);
transform-origin: top;
transition: transform 400ms ease-in-out;
}
nav ul {
padding: 0;
height: 220px;
list-style: none;
background-color: #fff;
}
nav li {
margin-bottom: 1em;
margin-left: 1em;
}
nav a {
color: black;
text-decoration: none;
font-size: 1.2rem;
text-transform: uppercase;
opacity: 0;
transition: opacity 150ms ease-in-out;
transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-webkit-transition: all 250ms ease-in-out;
}
.nav-toggle:checked ~ nav {
transform: scale(1, 1);
background-color: #fff;
}
.nav-toggle:checked ~ nav a {
opacity: 1;
transition: opacity 250ms ease-in-out 250ms;
}
.nav-toggle:checked ~ nav ul {
background-color: #fff;
}
.nav-toggle:checked ~ .nav-toggle-label {
display: none;
}
.nav-close-label {
font-size: 28px;
position: absolute;
top: 10px;
right: 24px;
display: none;
}
.nav-toggle:checked ~ .nav-close-label {
display: block;
animation: nav3 1s ease;
}
.fadeInBottom { animation-name: nav3 }
#keyframes nav3 {
from {
opacity: 0;
}
to { opacity: 1 }
}
.background {
background-color: white;
}
.spacer {
height: 2000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="background">
<header id="navbar">
<h1 class="logo">
<div>
Logo
</div>
</h1>
<input label="" type="checkbox" id="nav-toggle" class="nav-toggle">
<nav>
<ul id="nav-li">
<li class="i">Home</li>
<li class="i">Example</li>
<li class="i">Example</li>
<li class="i">Example</li>
<li class="i">Example</li>
</ul>
</nav>
<label for="nav-toggle" class="nav-toggle-label" id="nav-toggle-label">
<span></span>
</label>
<label class="nav-close-label" id="nav-close-label">✕</label>
</header>
<div class="spacer"></div> <!--DONT COPY-->
</div>
this is my html, css and js code below for side bar menu in bootstrap. the problem is is the header toggle and any other icon is not showing on the menu so i can't expand the menu also all the icons i used from box icons are not showing (also i imported https://cdn.jsdelivr.net/npm/boxicons#latest/css/boxicons.min.css) , is there a way to fix this?
thanks in advance
document.addEventListener("DOMContentLoaded", function(event) {
const showNavbar = (toggleId, navId, bodyId, headerId) =>{
const toggle = document.getElementById(toggleId),
nav = document.getElementById(navId),
bodypd = document.getElementById(bodyId),
headerpd = document.getElementById(headerId)
// Validate that all variables exist
if(toggle && nav && bodypd && headerpd){
toggle.addEventListener('click', ()=>{
// show navbar
nav.classList.toggle('show')
// change icon
toggle.classList.toggle('bx-x')
// add padding to body
bodypd.classList.toggle('body-pd')
// add padding to header
headerpd.classList.toggle('body-pd')
})
}
}
showNavbar('header-toggle','nav-bar','body-pd','header')
/*===== LINK ACTIVE =====*/
const linkColor = document.querySelectorAll('.nav_link')
function colorLink(){
if(linkColor){
linkColor.forEach(l=> l.classList.remove('active'))
this.classList.add('active')
}
}
linkColor.forEach(l=> l.addEventListener('click', colorLink))
// Your code to run since DOM is loaded and ready
});
#import url("https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap");
:root {
--header-height: 3rem;
--nav-width: 68px;
--first-color: #4723D9;
--first-color-light: #AFA5D9;
--white-color: #F7F6FB;
--body-font: 'Nunito', sans-serif;
--normal-font-size: 1rem;
--z-fixed: 100
}
*,
::before,
::after {
box-sizing: border-box
}
body {
position: relative;
margin: var(--header-height) 0 0 0;
padding: 0 1rem;
font-family: var(--body-font);
font-size: var(--normal-font-size);
transition: .5s
}
a {
text-decoration: none
}
.header {
width: 100%;
height: var(--header-height);
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1rem;
background-color: var(--white-color);
z-index: var(--z-fixed);
transition: .5s
}
.header_toggle {
color: var(--first-color);
font-size: 1.5rem;
cursor: pointer
}
.header_img {
width: 35px;
height: 35px;
display: flex;
justify-content: center;
border-radius: 50%;
overflow: hidden
}
.header_img img {
width: 40px
}
.l-navbar {
position: fixed;
top: 0;
left: -30%;
width: var(--nav-width);
height: 100vh;
background-color: var(--first-color);
padding: .5rem 1rem 0 0;
transition: .5s;
z-index: var(--z-fixed)
}
.nav {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden
}
.nav_logo,
.nav_link {
display: grid;
grid-template-columns: max-content max-content;
align-items: center;
column-gap: 1rem;
padding: .5rem 0 .5rem 1.5rem
}
.nav_logo {
margin-bottom: 2rem
}
.nav_logo-icon {
font-size: 1.25rem;
color: var(--white-color)
}
.nav_logo-name {
color: var(--white-color);
font-weight: 700
}
.nav_link {
position: relative;
color: var(--first-color-light);
margin-bottom: 1.5rem;
transition: .3s
}
.nav_link:hover {
color: var(--white-color)
}
.nav_icon {
font-size: 1.25rem
}
.show {
left: 0
}
.body-pd {
padding-left: calc(var(--nav-width) + 1rem)
}
.active {
color: var(--white-color)
}
.active::before {
content: '';
position: absolute;
left: 0;
width: 2px;
height: 32px;
background-color: var(--white-color)
}
.height-100 {
height: 100vh
}
#media screen and (min-width: 768px) {
body {
margin: calc(var(--header-height) + 1rem) 0 0 0;
padding-left: calc(var(--nav-width) + 2rem)
}
.header {
height: calc(var(--header-height) + 1rem);
padding: 0 2rem 0 calc(var(--nav-width) + 2rem)
}
.header_img {
width: 40px;
height: 40px
}
.header_img img {
width: 45px
}
.l-navbar {
left: 0;
padding: 1rem 1rem 0 0
}
.show {
width: calc(var(--nav-width) + 156px)
}
.body-pd {
padding-left: calc(var(--nav-width) + 188px)
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link href="/assets/images/logo.png" rel="icon" type="icon"> -->
<link rel="stylesheet" href="assets/css/style.css">
<script src="js/scripts.js"> </script>
<link href='https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css'>
<script src='https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js'></script>
<link href='https://cdn.jsdelivr.net/npm/boxicons#latest/css/boxicons.min.css'>
</head>
<body id="body-pd">
<header class="header" id="header">
<div class="header_toggle"> <i class='bx bx-menu' id="header-toggle"></i> </div>
</header>
<div class="l-navbar" id="nav-bar">
<nav class="nav">
<div> <i class='bx bx-layer nav_logo-icon'></i> <span class="nav_logo-name">BBBootstrap</span>
<div class="nav_list"> <i class='bx bx-grid-alt nav_icon'></i> <span class="nav_name">Dashboard</span> <i class='bx bx-user nav_icon'></i> <span class="nav_name">Users</span> <i class='bx bx-message-square-detail nav_icon'></i> <span class="nav_name">Messages</span> <i class='bx bx-bookmark nav_icon'></i> <span class="nav_name">Bookmark</span> <i class='bx bx-folder nav_icon'></i> <span class="nav_name">Files</span> <i class='bx bx-bar-chart-alt-2 nav_icon'></i> <span class="nav_name">Stats</span> </div>
</div> <i class='bx bx-log-out nav_icon'></i> <span class="nav_name">SignOut</span>
</nav>
</div>
<!--Container Main start-->
<div class="height-100 bg-light">
<h4>Main Components</h4>
</div>
<!--Container Main end-->
You can keep the following code in your head tag. Found this cdn link from there official web page.
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
This worked for me
Change your bootstrap cdn with this
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
And add some css code
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
margin-bottom: 0px;
}
MUST work
I wanted to make a website using fullpage.js and i did a lot of it but i have a few problems with the navigation. I have used autoscroll which undoubtedly makes things a LOT worse since its my first time using fullpage.js. I had have made a navbar at the top, and Which has a few buttons for the navigation. I wanted to scroll to a section of the page if i click it but the regural scrollTo(); and others doesnt work. I also gave navigations: true using fullpage.js. I tried checking what happens when it autoscrolls,
and i managed to get the scrolling working for the home section, but if i scrolled from the second page to the first using the button, if i scroll down, then it goes to the third page.
Is there anyone who knows a little about fullpage.js?
Heres the code
var place = [];
var dest = [];
animationsAndOther();
buttons();
function animationsAndOther() {
const tl = gsap.timeline({ defaults: { ease: "power1.out" } });
// tl.to(".text", { y: "0%", duration: 1, stagger: 0.25 });
tl.to(".slider", { y: "-100%", duration: 1.5, delay: 0 });
tl.to(".intro", { y: "-100%", duration: 1 }, "-=1");
tl.fromTo(
"nav",
{ background: "black", visibility: "hidden", opacity: 0 },
{
// background: "black",
width: "100%",
visibility: "visible",
opacity: 1,
duration: 0.5,
}
);
tl.fromTo(".big-text", { opacity: 0 }, { opacity: 1, duration: 1 }, "-=1");
const cool = new fullpage("#fullpage", {
autoScrolling: true,
navigation: true,
onLeave: (origin, destination, direction) => {
const come = origin.item.id;
dest.push(come);
const header = document.querySelector(".header");
const colors = ["#8d7676", "#2d2c2c", "#1b1b1b"];
const section = destination.item.id;
console.log(section);
place.push(`${section}`);
switch (section) {
case "home":
header.style.background = colors[2];
break;
case "about":
tl.to("nav", {
background: "none",
});
header.style.background = colors[1];
break;
case "Downloads":
tl.to("nav", {
background: "none",
});
header.style.background = colors[0];
default:
break;
}
},
});
}
function buttons() {
const ul = document.querySelector(".nav-links");
const btns = [ul.querySelectorAll("button")][0];
const autoNav = document.querySelector("#fp-nav");
moreHardStuff(btns);
hardStuff(autoNav, dest, btns, place);
}
function hardStuff(autoNav, origin, btns, place) {
const lies = document.querySelectorAll("a");
lies[1].id = "hme";
lies[2].id = "abut";
lies[3].id = "down";
btns.forEach((element) => {
element.addEventListener("click", () => {
// // console.log(origin, place);
// if (dest.includes("about")) {
// lies[2].className = "";
// console.log("working!");
// if (place.includes("home")) {
// lies[2].className = "";
// lies[3].className = "";
// lies[1].className = "active";
// }
// // if ((place[0] = "Downloads")) {
// // lies[3].className = "active";
// // lies[2].className = "";
// // lies[1].className = "";
// // }
// }
place = [];
dest = [];
});
});
}
function moreHardStuff(btns) {
const lies = document.querySelectorAll("a");
btns[0].addEventListener("click", () => {
const div = document.querySelector("#fullpage");
document.body.className = "fp-viewing-0";
div.style =
"height: 100%; position: relative; touch-action: none; transform: translate3d(0px, 0px, 0px); transition: all 700ms ease 0s;";
if (place.includes("about")) {
if (dest.includes("home")) {
lies[1].className = "active";
lies[2].className = "";
lies[3].className = "";
console.log("working!");
place.length = 0;
dest.length = 0;
}
}
});
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
main {
font-family: "Amiri", sans-serif;
}
.landing {
min-height: 100vh;
background: linear-gradient(to bottom, #1b1b1b, #2c2b2b);
background-size: cover;
padding: 0rem 5rem;
}
nav {
display: flex;
align-items: center;
width: 90%;
margin: auto;
justify-content: space-between;
min-height: 10vh;
}
.nav-links {
display: flex;
list-style: none;
}
.nav-links button {
display: inline;
border: none;
background: none;
color: white;
padding: 2.5rem;
font-size: 1.2rem;
}
#logo {
font-family: "Cairo", cursive;
font-weight: lighter;
color: white;
font-size: 2rem;
}
.big-text {
border: none;
background: none;
color: white;
position: absolute;
top: 40%;
left: 52%;
transform: translate(-60%, -39%);
font-size: 3rem;
font-family: "Montserrat", sans-serif;
}
.intro {
background: black;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.slider {
background: rgb(64, 89, 112);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: translateY(100%);
}
.intro-text {
color: rgb(224, 236, 247);
font-family: "Amiri", sans-serif;
font-size: 3rem;
}
.hide {
background: black;
overflow: hidden;
}
.hide span {
transform: translateY(100%);
display: inline-block;
}
#about {
background: linear-gradient(to bottom, #2c2b2b, #583a3aaf);
}
#Downloads {
background: linear-gradient(to bottom, #583a3aaf, #c74848);
}
.header {
position: sticky;
z-index: 10;
transition: all 1s ease;
top: 0px;
background: rgb(64, 89, 112);
/* background: linear-gradient(to left, #405970, #304558); */
}
nav h1 {
margin-left: 2rem;
}
nav h1,
nav button {
flex: 1;
}
#about {
color: white;
align-items: center;
justify-content: center;
padding: 1rem;
}
#about h1 {
margin-top: -15rem;
font-size: 2.7rem;
margin-left: 25rem;
}
#about p {
margin-top: 10rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Hello!</title>
<link rel="stylesheet" href="resources/fullpage.min.css" />
<script src="resources/fullpage.min.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Cairo:wght#700&display=swap"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#1,900&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Amiri&display=swap"
rel="stylesheet"
/>
</head>
<body>
<header class="header">
<nav>
<h1 id="logo">Hello!</h1>
<ul class="nav-links">
<button>Home</button>
<button>About</button>
<button>Downloads</button>
</ul>
</nav>
</header>
<div id="fullpage">
<section id="home" class="section s1">
<main>
<section class="landing">
<button
id="home"
type="submit"
onclick="window.location.href='./projects/index.html' "
class="big-text"
>
Projects!
</button>
</section>
</main>
<div class="intro">
<!-- <div class="intro-text">
<h1 class="hide">
<span class="text">Hello!</span>
</h1>
<h1 class="hide">
<span class="text">How Are You?</span>
</h1>
<h1 class="hide">
<span class="text">Im Fine.</span>
</h1>
</div> -->
</div>
<div class="slider"></div>
</section>
<section id="about" class="section s2">
<h1 class="about">About</h1>
<p></p>
</section>
<section id="Downloads" class="section s3">
Google!
</section>
</div>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"
integrity="sha512-IQLehpLoVS4fNzl7IfH8Iowfm5+RiMGtHykgZJl9AWMgqx0AmJ6cRWcB+GaGVtIsnC4voMfm8f2vwtY+6oPjpQ=="
crossorigin="anonymous"
></script>
<script src="web.js"></script>
</body>
</html>
Below is what I could make out of your question.
I rectified the scroll problem of second and third page as you mentioned above and made the navbar buttons respond to the scrollTo function of fullpage.js
If you aren't familiar with the properties of fullpage.js
visit this
document.body.onload = function() {
document.getElementById('home_btn').click();
}
var place = [];
animationsAndOther();
function animationsAndOther() {
const tl = gsap.timeline({
defaults: {
ease: "power1.out"
}
});
// tl.to(".text", { y: "0%", duration: 1, stagger: 0.25 });
tl.to(".slider", {
y: "-100%",
duration: 1.5,
delay: 0
});
tl.to(".intro", {
y: "-100%",
duration: 1
}, "-=1");
tl.fromTo(
"nav", {
background: "black",
visibility: "hidden",
opacity: 0
}, {
// background: "black",
width: "100%",
visibility: "visible",
opacity: 1,
duration: 0.5,
}
);
tl.fromTo(".big-text", {
opacity: 0
}, {
opacity: 1,
duration: 1
}, "-=1");
}
const cool = new fullpage("#fullpage", {
autoScrolling: true,
navigation: true,
anchors: ['hme', 'abt', 'down'],
navigationTooltips: ['Home', 'About', 'Downloads']
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
main {
font-family: "Amiri", sans-serif;
}
.landing {
min-height: 100vh;
background: linear-gradient(to bottom, #1b1b1b, #2c2b2b);
background-size: cover;
padding: 0rem 5rem;
}
nav {
display: flex;
align-items: center;
width: 90%;
margin: auto;
justify-content: space-between;
min-height: 10vh;
}
.nav-links {
display: flex;
list-style: none;
}
.nav-links a {
float: right;
display: inline;
border: none;
background: none;
color: white;
padding: 2.5rem;
font-size: 1.2rem;
text-decoration: none;
font-family: 'arial';
}
#logo {
font-family: "Cairo", cursive;
font-weight: lighter;
color: white;
font-size: 2rem;
}
.big-text {
border: none;
background: none;
color: white;
position: absolute;
top: 40%;
left: 52%;
transform: translate(-60%, -39%);
font-size: 3rem;
font-family: "Montserrat", sans-serif;
}
.intro {
background: black;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.slider {
background: rgb(64, 89, 112);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: translateY(100%);
}
.intro-text {
color: rgb(224, 236, 247);
font-family: "Amiri", sans-serif;
font-size: 3rem;
}
.hide {
background: black;
overflow: hidden;
}
.hide span {
transform: translateY(100%);
display: inline-block;
}
#about {
background: linear-gradient(to bottom, #2c2b2b, #583a3aaf);
}
#Downloads {
background: linear-gradient(to bottom, #583a3aaf, #c74848);
}
.header {
position: fixed;
z-index: 10;
transition: all 1s ease;
top: 0px;
width: 100%;
background: rgb(64, 89, 112);
/* background: linear-gradient(to left, #405970, #304558); */
}
nav h1 {
margin-left: 2rem;
}
nav h1,
nav a {
flex: 1;
}
#about {
color: white;
align-items: center;
justify-content: center;
padding: 1rem;
}
#about h1 {
margin-top: -15rem;
font-size: 2.7rem;
margin-left: 25rem;
}
#about p {
margin-top: 10rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.css" rel="stylesheet" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Hello!</title>
<link rel="stylesheet" href="resources/fullpage.min.css" />
<script src="resources/fullpage.min.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght#700&display=swap" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#1,900&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Amiri&display=swap" rel="stylesheet" />
</head>
<body>
<header class="header">
<nav>
<h1 id="logo">Hello!</h1>
<ul class="nav-links">
Home
About
Downloads
</ul>
</nav>
</header>
<div id="fullpage">
<section id="home" class="section s1">
<main>
<section class="landing">
<button id="home" type="submit" onclick="window.location.href='./projects/index.html' " class="big-text">
Projects!
</button>
</section>
</main>
<div class="intro">
<div class="intro-text">
<h1 class="hide">
<span class="text">Hello!</span>
</h1>
<h1 class="hide">
<span class="text">How Are You?</span>
</h1>
<h1 class="hide">
<span class="text">Im Fine.</span>
</h1>
</div>
</div>
<div class="slider"></div>
</section>
<section id="about" class="section s2">
<h1 class="about">About</h1>
<p></p>
</section>
<section id="Downloads" class="section s3">
Google!
</section>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js" integrity="sha512-IQLehpLoVS4fNzl7IfH8Iowfm5+RiMGtHykgZJl9AWMgqx0AmJ6cRWcB+GaGVtIsnC4voMfm8f2vwtY+6oPjpQ==" crossorigin="anonymous"></script>
<script src="web.js"></script>
I created a navigation bar it works fine.
It consists of several tabs such as Home, about, services, contact.
But I want to close it when I click on the contents of the web page.
Code:
(function() {
var bodyEl = $('nav'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
})();
var height = $(window).height();
var width = $(window).width();
$(window).resize(function() {
$("nav").removeClass("active-nav");
});
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav {
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 50px;
line-height: 40px;
text-align: center;
background-color: #666;
}
.content {
padding-top: 300px;
height: 1200px;
background-color: lightgrey;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
.fa-bars {
font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<nav>
<a href="#" class="nav-toggle-btn"> <i class="fa fa-bars"></i>
</a>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<h1>This is content</h1>
</div>
How can I close my navigation bar, when I click on the other contents in the web page.
Any help will be appreciated.
Thank you in advance.
The simplest way is to set a "click" event on the "content" area so that whenever anything within it is clicked on, it causes the menu to be hidden again:
$(".content").click(function(e) {
bodyEl.removeClass('active-nav');
});
Demo:
$(function() {
var bodyEl = $('nav'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
$(".content").click(function(e) {
bodyEl.removeClass('active-nav');
});
var height = $(window).height();
var width = $(window).width();
$(window).resize(function() {
$("nav").removeClass("active-nav");
});
});
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav {
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 50px;
line-height: 40px;
text-align: center;
background-color: #666;
}
.content {
padding-top: 300px;
height: 2000px;
background-color: #ccf;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
.fa-bars {
font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<nav>
<a href="#" class="nav-toggle-btn"> <i class="fa fa-bars"></i>
</a>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<h1>This is content</h1>
</div>
P.S. I rearranged the rest of your JavaScript slightly to all be within a "ready" block, I wasn't sure what the logic of it was previously.
P.P.S. Your demo contained jQuery twice. This is both unnecessary and can also lead to unpredictable issues. I've removed the older version in my demo above.
SERBIAN: Jednostavno samo dodaj ovo na kraju svoje skripte:
ENG: Just add this at the end of your script:
$('div').click(function(){
$('nav').removeClass("active-nav");
});
You only have to attach an onclick event handler to document.
var height = $(window).height();
var width = $(window).width();
$(function() {
var bodyEl = $('nav'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
$(document).on('click', function(e) {
if(!$(e.target).closest(bodyEl).length && bodyEl.hasClass('active-nav')) {
bodyEl.removeClass('active-nav');
}
});
});
$(window).resize(function() {
$("nav").removeClass("active-nav");
});
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav{
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width:50px;
line-height: 40px;
text-align:center;
background-color: #666;
}
.content {
padding-top: 300px;
height: 2000px;
background-color: #ccf;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
.fa-bars{
font-size:20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
</script>
<nav>
<i class="fa fa-bars"></i>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<h1>This is content</h1>
</div>
when I click on the menu Icon, sometimes it works but after refreshing 3 or 4 times it stops. not working in Chrome at all. am i missing something. Please help.
$(function () {
const menu = $(".fa-3x");
const list = $(".show");
const main = $("#firstpage");
const last = $("#secondpage");
menu.on("click", _=> {
$(".show").toggleClass("hide");
});
});
Mock-up Site here - codepen
The query selector is wrong. $(".show").toggleClass("hide");
It could be better to use #menulinks to access related lu element.
$("#menulinks").on("click", _=> {
$("#menulinks ul").toggleClass("hide");
});
Demo
/* jshint esversion:6 */
/* global $ */
$(function () {
$("#menulinks").on("click", _=> {
$("#menulinks ul").toggleClass("hide");
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
/* makes the image fill entire screen*/
}
.name,
.scroller {
position: absolute;
left: 50%;
text-align: center;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
/* makes text in perfect mid*/
}
h1 {
font-family: "Inconsolata", monospace;
text-transform: uppercase;
}
.name {
top: 45%;
}
.show {
width: 130px;
background: rgba(3, 4, 32, 0.54);
position: relative;
left: 43px;
visibility: visible;
opacity: 1;
z-index: 4;
transition: 0.3s;
}
.fa-3x:hover,
#arrow:hover {
cursor: pointer;
opacity: 0.75;
}
.hidden li:hover a,
.name,
a:hover {
background: linear-gradient(to right, #215AF6, #F2359D);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-decoration: none;
}
.info {
font-size: 350%;
padding: 0;
margin-bottom: 20px;
letter-spacing: 5px;
}
.description {
letter-spacing: 4px;
word-spacing: 5px;
}
header {
background: linear-gradient(rgba(17, 20, 42, 0.95), rgba(17, 20, 42, 0.95)), url("https://images.pexels.com/photos/399636/pexels-photo-399636.jpeg?w=940&h=650&auto=compress&cs=tinysrgb") center;
background-attachment: fixed;
background-size: cover;
text-transform: uppercase;
height: 100vh;
color: white;
}
#secondpage {
background-size: cover;
height: 100vh;
}
div.scroller {
position: absolute;
top: 95%;
left: 50%;
}
.scrolltext {
font-size: 10px;
letter-spacing: 3px;
padding-top: 0;
}
.material-icons.md-100 {
font-size: 100px;
margin-top: -20px;
}
#menulinks {
text-align: left;
padding: 20px;
}
nav p {
font-size: 65%;
letter-spacing: 4px;
}
li a {
text-decoration: none;
color: white;
padding-left: 10px;
font-size: 90%;
}
ul {
list-style: none;
}
li {
padding: 5px;
}
.hide {
opacity: 0;
visibility: hidden;
}
.show li:hover {
background: rgba(3, 4, 32, 1);
padding-left: 12px;
transition: 0.3s;
}
.dp {
max-width: 400px;
max-height: 200px;
filter: grayscale(100%);
}
#bottom {
max-height: 110px;
max-width: 350px;
overflow: hidden;
margin: 0 auto;
margin-top: 230px;
margin-bottom: 50px;
text-align: center;
}
#summary,
#greeting {
max-width: 400px;
margin: 0 auto;
text-align: center;
margin-top: 20px;
}
#greeting {
letter-spacing: 10px;
word-spacing: 10px;
}
#summarytext,
#span {
line-height: 150%;
font-size: 20px;
}
#span {
margin-top: 30px;
}
.fa-2x {
opacity: 0.1;
}
<html lang="en">
<head>
<title>Brian Profile</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<header id="firstpage">
<nav id="menulinks">
<i class="fas fa-align-justify fa-3x"></i>
<p>menu</p>
<ul class="hide">
<li id="firstopt">About</li>
<li id="secondopt">Experience</li>
<li id="thirdopt">Portfolio</li>
<li id="fourthopt">Contact</li>
</ul>
</nav>
<div class="name">
<h1 class="info">Hello, I'm Brian</h1>
<p class="description">an aspiring web developer</p>
</div>
<div class="scroller">
<p class="scrolltext"> SCROLL DOWN</p>
<i class="material-icons md-100" id="arrow">expand_more</i>
</div>
</header>
<footer id="secondpage">
<div id="bottom">
<p>
<img src="https://dl.dropbox.com/s/3c0xlv56hhb1ed7/2013-07-20%2021.58.43.jpg?=raw1" alt="InstaPic" class="dp"></p>
</div>
<div id="greeting">
<span>HI THERE</span>
<p><i class="far fa-window-minimize fa-2x"></i></p>
</div>
<div id="summary">
<p id="summarytext">
I am a web developer based in London. With a growing Portfolio that is constantly updated, I have a passion for all things 'web'.</p>
<p id="span"><span>For more information visit my Blog.</span>
</p>
</div>
</footer>
<script src="scripts.js"></script>
</body>
</html>