I want to add Full Page Transition to my project to look like Single Page Application, but I'm stuck.
I tried a lot of things with transform: translateX and transition and display: none, but it doesn't work properly as I want..
var firstDiv = document.querySelector('#first'),
secondDiv = document.querySelector('#second'),
transitionBtn = document.querySelector('#transitionBtn');
function myFunction() {
firstDiv.classList.remove('active');
secondDiv.classList.add('active');
}
transitionBtn.addEventListener('click',myFunction);
body {
padding: 0;
margin: 0;
}
#first {
display: flex;
justify-content: center;
align-items: center;
background-color: red;
}
#second {
background-color: blue;
}
.page{
width: 100vw;
height: 100vh;
transform: translateX(100%);
display: none;
transition: ease-in-out 2s all;
}
.page.active {
transform: translateX(0%);
display: flex !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="first" class="page active">
<button id="transitionBtn">Click me to transition</button>
</div>
<div id="second" class="page"></div>
</body>
</html>
var firstDiv = document.querySelector('#first'),
secondDiv = document.querySelector('#second'),
transitionBtn = document.querySelector('#transitionBtn');
function myFunction() {
firstDiv.classList.remove('active');
secondDiv.classList.add('active');
}
transitionBtn.addEventListener('click',myFunction);
body {
padding: 0;
margin: 0;
overflow:hidden;
}
#first {
display: flex;
justify-content: center;
align-items: center;
background-color: red;
}
#second {
background-color: blue;
transform: translateX(-100%);
}
.page{
width: 100vw;
height: 100vh;
transform: translateX(100%);
transition: ease-in-out 2s all;
position:absolute;
}
.page.active {
transform: translateX(0%) !important;
display: flex !important;
}
<div id="first" class="page active">
<button id="transitionBtn">Click me to transition</button>
</div>
<div id="second" class="page"></div>
I suppose you wish have no scroll visible, in order to create exit effect ?! if yes, then "overflow: hidden" on body tag helps =)
Related
I have a problem that my cards rotate, but each card moves to ~5px (X-axis). How can I rotate them without this movement? (Just like rotate it around itself). I've read many specs and watched many videos. Nothing could help me.
Besides, whenever I click on some cards to return them in a previous state, some of them do it for a second or even a third time.
const cards = document.querySelectorAll(".memory-card")
function flip() {
this.classList.toggle("flip")
}
cards.forEach((c) => c.addEventListener("click", flip))
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
background: linear-gradient(50deg, rgb(198, 193, 188), rgb(153, 145, 137), rgb(109, 101, 94));
background-size: 100%;
background-repeat: no-repeat;
height: 100vh;
width: 100vw;
position: fixed;
}
.wrapper {
display: grid;
grid-template: 15vmin/ 20vmin 20vmin 20vmin 20vmin;
justify-content: center;
align-items: center;
padding-top: 8vmin;
margin-left: -2vmin;
perspective: 1000px;
grid-gap: 8vmin 4vmin;
}
/*flip moment*/
.memory-card {
width: calc(25%-10px);
height: calc(14vmin - 2px);
position: relative;
transform: scale(1);
transform-style: preserve-3d;
margin: 2vw;
transition: .5s;
border-radius: 23%;
box-shadow: 1vmin 1vmin 1vmin 2px silver;
transition: transform .5s;
}
.memory-card.flip {
transform: rotateY(180deg);
}
.memory-card:active {
transform: scale(0.94);
transition: .05s;
}
.front {
position: absolute;
width: 19vmin;
height: 19vmin;
border-radius: 15px;
backface-visibility: hidden;
transform: rotateY(180deg);
}
.end {
position: absolute;
width: 19vmin;
height: 19vmin;
border-radius: 15px;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=U TF-8>
<meta http-equiv="X-UA-Compatible">
<meta name="viewport" content="width = device-width, initial-scale = 1.0">
<link rel="stylesheet" href="index.css">
<title> Memory Game </title>
</head>
<body>
<section class="wrapper">
<div class="memory-card">
<img src="https://images.unsplash.com/photo-1484589065579-248aad0d8b13?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=918&q=80" alt="space" class="front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/A_black_image.jpg/1600px-A_black_image.jpg?20201103073518" alt="a black card" class="end">
</div>
<div class="memory-card">
<img src="https://images.unsplash.com/photo-1516339901601-2e1b62dc0c45?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=671&q=80" alt="space" class="front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/A_black_image.jpg/1600px-A_black_image.jpg?20201103073518" alt="a black card" class="end">
</div>
<div class="memory-card">
<img src="https://images.unsplash.com/photo-1444703686981-a3abbc4d4fe3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80" alt="space" class="front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/A_black_image.jpg/1600px-A_black_image.jpg?20201103073518" alt="a black card" class="end">
</div>
</section>
<script src="index.js"></script>
</body>
</html>
Add transform-origin when your cards flip. This property allows you to change the position of transformed elements. Learn more at w3schools:
.memory-card.flip {
transform: rotateY(180deg);
transform-origin: 85% 50%;
}
I have 2 images, which upon hover over I'd like to blur and show text on top. However, currently it appears that the images only blur when the cursor is at its edge but not when the cursor is in the middle. I'd like the image to blur AND show its text. Does anyone have advice on where I might be going wrong?
Also, any advice on how to better position the text within the images would be great. I think my "position" or "display" is off. Thank you!
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<style media="screen">
.study-icons {
width: 300px;
padding-left: 25px;
padding-right: 25px;
cursor: pointer;
/* border: 2px solid blue; */
}
.study-icons:hover {
-webkit-filter: blur(10px);
filter: blur(10px);
}
.study-wrapper {
display: inline-block;
text-align: center;
padding-bottom: 0px;
}
.img__wrap {
position: relative;
height: 255px;
width: 300px;
}
.img__description_layer {
position: absolute;
top: 0;
bottom: 0;
left: 10;
right: 0;
/* background: rgba(36, 62, 206, 0.6); */
color: black;
visibility: hidden;
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
/* transition effect. not necessary */
transition: opacity .2s, visibility .2s;
}
.img__wrap:hover .img__description_layer {
visibility: visible;
opacity: 1;
}
.img__description {
transition: .2s;
transform: translateY(1em);
}
.img__wrap:hover .img__description {
transform: translateY(0);
}
</style>
<body>
<div class="img__wrap">
<div id="image1">
<img class="img__img study-icons" src="assets/studies/image1.png">
<div class="img__description_layer">
<p class="img__description">Sample text here about image1?</p>
</div>
</div>
</div>
<div class="img__wrap">
<div id="image2">
<img class="img__img study-icons" src="assets/studies/image2.png">
<div class="img__description_layer">
<p class="img__description">Sample text here about image2</p>
</div>
</div>
</div>
</body>
</html>
to fix this please assign the hovering to be on the img__wrap
In order to make sure your text centered you have to make the .ing__wrap positioned as relative, then set the .img__description_layer to be like this:
Position:absolute;
Top:50%;
Left:50%;
Transform:translate(-50%,-50%);
So I'm just getting into JavaScript and HTML and what not, and I'm struggling a little. I'n not quite sure how to position the hamburger menu I made to the top right of the website for desktop and for mobile.
Any help is much appreciated!
const menuBtn = document.querySelector('.menu-btn');
let menuOpen = false;
menuBtn.addEventListener('click', () => {
if(!menuOpen) {
menuBtn.classList.add('open');
menuOpen = true;
} else {
menuBtn.classList.remove('open');
menuOpen = false;
}
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #272727;
display: flex;
min-height: 100vh;
}
.menu-btn {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 80px;
height: 80px;
cursor: pointer;
transition: all .5s ease-in-out;
/* border: 3px solid #fff; */
}
.menu-btn__burger {
width: 50px;
height: 6px;
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(255,101,47,.2);
transition: all .5s ease-in-out;
}
.menu-btn__burger::before,
.menu-btn__burger::after {
content: '';
position: absolute;
width: 50px;
height: 6px;
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(255,101,47,.2);
transition: all .5s ease-in-out;
}
.menu-btn__burger::before {
transform: translateY(-16px);
}
.menu-btn__burger::after {
transform: translateY(16px);
}
/* ANIMATION */
.menu-btn.open .menu-btn__burger {
transform: translateX(-50px);
background: transparent;
box-shadow: none;
}
.menu-btn.open .menu-btn__burger::before {
transform: rotate(45deg) translate(35px, -35px);
}
.menu-btn.open .menu-btn__burger::after {
transform: rotate(-45deg) translate(35px, 35px);
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- links -->
<link rel="stylesheet" href="style.css">
<!-- Top of the Page -->
<title>Uni High Aquatics</title>
</head>
<body>
<div class="menu-btn">
<div class="menu-btn__burger"></div>
</div>
<script src="main.js"></script>
</body>
</html>
Reminder, I am quite new and am trying to make a website for my coach to use in the future. I seem to not get the hang of css yet, and I don't believe typing right and left in position will work hahaha. So any help is much needed and apprciated!
just add position: fixed; and top: 0; right: 0 to .menu-btn:
const menuBtn = document.querySelector('.menu-btn');
let menuOpen = false;
menuBtn.addEventListener('click', () => {
if(!menuOpen) {
menuBtn.classList.add('open');
menuOpen = true;
} else {
menuBtn.classList.remove('open');
menuOpen = false;
}
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #272727;
display: flex;
min-height: 100vh;
}
.menu-btn {
position: fixed;
top: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
width: 80px;
height: 80px;
cursor: pointer;
transition: all .5s ease-in-out;
/* border: 3px solid #fff; */
}
.menu-btn__burger {
width: 50px;
height: 6px;
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(255,101,47,.2);
transition: all .5s ease-in-out;
}
.menu-btn__burger::before,
.menu-btn__burger::after {
content: '';
position: absolute;
width: 50px;
height: 6px;
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(255,101,47,.2);
transition: all .5s ease-in-out;
}
.menu-btn__burger::before {
transform: translateY(-16px);
}
.menu-btn__burger::after {
transform: translateY(16px);
}
/* ANIMATION */
.menu-btn.open .menu-btn__burger {
transform: translateX(-50px);
background: transparent;
box-shadow: none;
}
.menu-btn.open .menu-btn__burger::before {
transform: rotate(45deg) translate(35px, -35px);
}
.menu-btn.open .menu-btn__burger::after {
transform: rotate(-45deg) translate(35px, 35px);
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- links -->
<link rel="stylesheet" href="style.css">
<!-- Top of the Page -->
<title>Uni High Aquatics</title>
</head>
<body>
<div class="menu-btn">
<div class="menu-btn__burger"></div>
</div>
<script src="main.js"></script>
</body>
</html>
You want to show the hamburger icon in a nav menu fixed at the top of the page, so there are a few things you need to change
1. Add the navmenu!
Put your menu icon into a nav element at the top of the page:
<nav class="navbar">
<div class="menu-btn">
<div class="menu-btn__burger"></div>
</div>
</nav>
2. Make it fixed to the top of the page when you scroll using position:fixed and top:0:
nav.navbar {
position: fixed;
top: 0;
width: 100%;
height: 80px;
}
3. Position the div for your hamburger icon in the navbar. We use position:absolute to put it exactly where we want it in the nav bar - in this case top right
.menu-btn {
position: absolute;
top: 0;
right: 0;
/* rest of your CSS */
}
4. Prevent the navbar from overlapping the content Because the navbar is fixed, it is not part of the page flow so the other elements "ignore" it and it will overlap with them.
Therefore we need to move the content on the page down so it isn't hidden behind the navbar, We can use that using margin or padding :
body {
padding-top: 100px;
/* Rest of your CSS */
}
Handy References for Positioning: CSS Tricks and Mozilla Docs
Note: I have removed your display: flex; from the body because it messes up the layout for the content - if you keep it in, all the paragraphs are displayed in continuous lines instead of separate lines for example.
Working Snippet:
const menuBtn = document.querySelector('.menu-btn');
let menuOpen = false;
menuBtn.addEventListener('click', () => {
if (!menuOpen) {
menuBtn.classList.add('open');
menuOpen = true;
} else {
menuBtn.classList.remove('open');
menuOpen = false;
}
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
/* display: flex; */
/* remove this or it will mess up your standard text display */
background: #272727;
min-height: 100vh;
position: relative;
/* make space for the navbar - the fixed nav bar is not part of the "flow" so it will overlap the content */
padding-top: 100px;
}
p {
color: white;
}
nav.navbar {
background: #444;
position: fixed;
/* means it will always be stuck to the top of the page */
top: 0;
/* places it at the top */
width: 100%;
height: 80px;
}
.menu-btn {
/* Place the element in the exact position we want - top right corner 0,0 */
position: absolute;
top: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
width: 80px;
height: 80px;
cursor: pointer;
transition: all .5s ease-in-out;
/* border: 3px solid #fff; */
}
.menu-btn__burger {
width: 50px;
height: 6px;
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
transition: all .5s ease-in-out;
}
.menu-btn__burger::before,
.menu-btn__burger::after {
content: '';
position: absolute;
width: 50px;
height: 6px;
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
transition: all .5s ease-in-out;
}
.menu-btn__burger::before {
transform: translateY(-16px);
}
.menu-btn__burger::after {
transform: translateY(16px);
}
/* ANIMATION */
.menu-btn.open .menu-btn__burger {
transform: translateX(-50px);
background: transparent;
box-shadow: none;
}
.menu-btn.open .menu-btn__burger::before {
transform: rotate(45deg) translate(35px, -35px);
}
.menu-btn.open .menu-btn__burger::after {
transform: rotate(-45deg) translate(35px, 35px);
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- links -->
<link rel="stylesheet" href="style.css">
<!-- Top of the Page -->
<title>Uni High Aquatics</title>
</head>
<body>
<nav class="navbar">
<div class="menu-btn">
<div class="menu-btn__burger"></div>
</div>
</nav>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
</body>
</html>
You can do it many way
generally html align from left. if you need to change alignment there is many way..
you can simply do it by adding margin-left : auto; to .menu-btn class
margin-left : auto;
There is other way do it ..
Firstly you need to remove position: relative; because one html element can't hold two position property then add code below to .menu-btn class
.menu-btn{
position: fixed;
top: 0;
right: 0;
}
I've followed a youtube tutorial at [https://www.youtube.com/watch?v=H4MkGzoACpQ] to create a nice responsive Navbar.
The problem is when I try and personalise it and add a logo on the left side of the Nav, it seems to push the other nav links off the navbar when viewed in full screen.
As well as that, when the viewport goes below a certain width, there seems to be a circle visible around the hamburger icon.
Please help me to clean up this Navbar. Many thanks, I'm just a beginner at web design.
Here is a link to what the logo should be also - [https://www.google.com/search?q=rossnowlagh+surf+school+logo&sxsrf=ALeKk00Hg24OG5c7Wefc6jal-JyqLmB18Q:1586961567476&source=lnms&tbm=isch&sa=X&ved=2ahUKEwjxpYHE1OroAhXXiVwKHQi3CEsQ_AUoAXoECAwQAw&biw=1440&bih=789#imgrc=36AEO3-lo_sGxM]
I've included my HTML, CSS and JS code here...
const hamburger = document.querySelector(".hamburger");
const navLinks = document.querySelector(".nav-links");
const links = document.querySelectorAll(".nav-links li");
hamburger.addEventListener("click", () => {
navLinks.classList.toggle("open");
links.forEach(link => {
link.classList.toggle("fade");
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
nav {
height: 12vh;
background: #5b78c7;
}
#nav-logo
{
padding-top: 5px;
margin-left: 20px;
height: 80px;
width: 80px;
}
.nav-links {
display: flex;
list-style: none;
width: 50%;
height: 100%;
justify-content: space-around;
align-items: center;
margin-left: auto;
}
.nav-links li a {
color: white;
text-decoration: none;
font-size: 16px;
}
.landing {
height: 90vh;
display: flex;
justify-content: center;
align-items: center;
}
.landing h1 {
margin: 100px;
font-size: 50px;
color: #ae5fce;
}
#media screen and (max-width: 768px) {
.line {
width: 30px;
height: 3px;
background: white;
margin: 5px;
}
nav {
position: relative;
}
.hamburger {
position: absolute;
cursor: pointer;
right: 5%;
top: 50%;
transform: translate(-5%, -50%);
z-index: 2;
}
.nav-links {
position: fixed;
background: #5b78c7;
height: 100vh;
width: 100%;
flex-direction: column;
clip-path: circle(100px at 90% -10%);
-webkit-clip-path: circle(100px at 90% -10%);
transition: all 1s ease-out;
pointer-events: none;
}
.nav-links.open {
clip-path: circle(1000px at 90% -10%);
-webkit-clip-path: circle(1000px at 90% -10%);
pointer-events: all;
}
.landing {
flex-direction: column;
}
.nav-links li {
opacity: 0;
}
.nav-links li a {
font-size: 25px;
}
.nav-links li:nth-child(1) {
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2) {
transition: all 0.5s ease 0.4s;
}
.nav-links li:nth-child(3) {
transition: all 0.5s ease 0.6s;
}
li.fade {
opacity: 1;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./style.css" />
<title>Rossnowlagh Surf</title>
</head>
<body>
<nav>
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<img id="nav-logo" src="img/rossnowlagh-logo.png">
<ul class="nav-links">
<li>About</li>
<li>Packages</li>
<li>Contact</li>
</ul>
</nav>
<section class="landing">
<img src="./circles.svg" alt="dots" />
<h1>Dots</h1>
</section>
<script src="app.js"></script>
</body>
</html>
What's happening here is that your nav logo is taking up space, and is pushing things off the screen in a way that is breaking the layout.
There are probably a few ways to address this, including using a flexbox and arranging the items for your nav inside it, but I think that the following option is probably going to be the simplest for your task:
#nav-logo
{
padding-top: 5px;
margin-left: 20px;
height: 80px;
width: 80px;
position: absolute; // add this to take the logo out of the layout
z-index: 5; // add this to keep the logo in front of the other content
}
This is my first post - anyways - I was referencing this original ask Welcome screen before website loads (Click to enter) [Splash Screen]
After following the instructions of the second answer where I created two seperate divs I need help figuring out how to use javascript to change the visibility of the splash div when/after the user clicks through the splash.
I have a pretty basic understanding of code and not much else but I'm decent at picking up concepts. Here's what I've got so far:
<!Splash html>
<html>
<head>
<meta charset="utf-8" />
<style>
html, body {
margin: 0;
padding: 0
}
div#splash {
max-width: 100%;
height: 100%;
background-image: url("brightsplash.jpg");
background-repeat: no-repeat;
background-size: cover;
}
div#post-splash {
display: none;}
</style>
<div id="splash">
</div>
<div id="post-splash"></div>
<h1>Taylor Forrest</h1>
<h2>photography</h2>
<h2>About</h2>
<h2>Portfolio</h2>
<h2>Contact</h2>
</html>
Pure CSS (no javascript) alternative with undercover checkbox:
html {
width: 100%;
height: 100%;
background: lavender;
text-align: center;
font-family: arial, sans-serif;
}
input {
display: none;
}
#target {
opacity: 0;
background-color: rosybrown;
background: url('http://i.imgur.com/P9L9jzT.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: -1;
pointer-events: none;
user-select: none;
-webkit-user-select: none;
-webkit-transition: all 2s; /* Safari */
transition: all 2s;
}
#click:checked ~ label > #target {
opacity: 1;
z-index: 200;
cursor: pointer;
pointer-events: auto;
}
#replay {
color: crimson;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
bottom: 20px;
cursor: pointer;
}
#warning {
color: white;
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
}
<input type="checkbox" id="click" checked/>
<label for="click">
<div id=target><h1 id=warning>WELCOME</h1></div>
<span id=replay><small>-replay-</small></span>
</label>
<p>page content</p>
You're code is messy - you're missing tags, missplaced some content etc. I suggest you learn more abouth html and css and use proper IDE with syntax higlighting. Anyway here's the code that will do what you expect. This is still far from perfect.
<html>
<head>
<meta charset="utf-8" />
<style>
html,
body {
margin: 0;
padding: 0
}
#splash {
max-width: 100%;
height: 100%;
background-image: url("brightsplash.jpg");
background-repeat: no-repeat;
background-size: cover;
cursor: pointer;
}
#post-splash {
display: none;
}
</style>
</head>
<body>
<div id="splash">
</div>
<div id="post-splash">
<h1>Taylor Forrest</h1>
<h2>photography</h2>
<h2>About</h2>
<h2>Portfolio</h2>
<h2>Contact</h2>
</div>
<script>
(function() {
var splash = document.getElementById('splash'),
postSplash = document.getElementById('post-splash');
splash.addEventListener('click', function() {
splash.style.display = "none";
postSplash.style.display = "block";
});
})();
</script>
</body>
</html>