Elements shifting when screen is resized

Elements shifting when screen is resized - javascript

I'm currently having some problems with the positioning of the elements on my page. When full screen the elements are centred and don't overlap.
However, when the screen is resized the elements shift to the left and start overlapping
I was wondering how to go about fixing this?
Heres my code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./styles.css">
<script src="https://kit.fontawesome.com/8711e0b6fa.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="content-wrapper">
<header>
[My Coily Story]
<ul>
<li>Home</li>
<li>Scenes</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
</div>
<div class="collage"></div>
<audio id="player" src="1.mp3"></audio>
<div class="player" >
<div class="control">
<i class="fas fa-play" id="playbtn"></i>
</div>
<div class="info">
Kathleen Cleaver - Natural Hair
<div class="bar">
<div id="progress"></div>
</div>
</div>
<div id="current">0:00</div>
</div>
<div class="start">
<a href="./Page/index.html">
<span></span>
<span></span>
<span></span>
<span></span>
Start
</a>
</div>
</body>
<script type="text/javascript" src="./main.js"></script>
</html>
CSS
#font-face {
font-family: 'arcade';
src: url(fonts/ARCADECLASSIC.TTF);
font-weight: 100;
font-style: Regular;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
letter-spacing: 1px;
transition: all 0.35s linear;
}
body {
background-color: black;
padding: 0;
margin: 0;
height: 100vh;
width: 100vh;
display: flex;
min-height: 100vh;
align-items: center;
justify-content: center;
scroll-behavior: none;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 1.875rem 6.25rem;
display: flex;
justify-content: space-between;
align-items: center;
font-family: Poppins, sans-serif;
z-index: 10000;
}
header .logo {
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 1.563rem;
text-transform: uppercase;
letter-spacing: 0.313rem;
font-family: Poppins, sans-serif;
}
.logo:hover{
pointer-events: none;
border: none;
box-shadow: none;
background: transparent;
}
header ul{
display: flex;
justify-content: center;
align-items: center;
font-family: Poppins, sans-serif;
font-size: 1.1rem;
text-transform: none;
}
header ul li {
list-style: none;
margin-left: 1.25rem;
font-family: Poppins, sans-serif;
font-size: 1.1rem;
text-transform: none;
}
header ul li a {
text-decoration: none;
padding: 0.375rem 0.938rem;
color: #fff;
border-radius: 1.25rem;
font-family: Poppins, sans-serif;
font-size: 1.1rem;
text-transform: none;
position: sticky;
}
header ul li a:hover,
header ul li a.active {
background: #fff;
color: #2b1055;
font-family: Poppins, sans-serif;
font-size: 1.1rem;
text-transform: none;
position: sticky;
border: none;
box-shadow: none;
transition-delay: 0s;
}
.collage {
background: url(./Images/1.gif);
position: absolute;
background-size: 100%;
background-repeat: no-repeat;
height: 61%;
width: 55%;
border: solid 8px;
border-color: white;
align-items: center;
min-width: 55%;
max-width: 55%;
justify-content: center;
top: 20%;
left: 27%;
margin-top: -50px;
margin-left: -50px;
}
.player {
width: 55%;
background-color: black;
display: grid;
grid-template-columns: 48px 1fr 48px;
color: white;
grid-gap: 16px;
position: relative;
border-radius: 50px;
height: 60px;
position: relative;
top: 33%;
left: 65%;
align-items: center;
justify-content: center;
margin-top: -50px;
margin-left: -50px;
}
.control, #current {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding-block: 16px;
}
#playbtn {
font-size: 24px;
color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
cursor: pointer;
}
#playbtn:hover {
-webkit-text-fill-color: white;
}
.info {
display: flex;
justify-content: center;
align-items: center;
font-size: 21px;
white-space: nowrap;
}
#current {
text-align: right;
}
.bar {
--space: -4px;
background-color: #24242424;
overflow: hidden;
left: var(--space);
right: var(--space);
top: var(--space);
bottom: var(--space);
position: absolute;
border-radius: 64px;
z-index: -2;
}
#progress {
display: block;
width: var(--progress, 0%);
background-color: white;
transition: all 1s linear;
height: 100%;
}
a {
z-index: 10000;
position: relative;
display: inline-block;
padding: 15px 30px;
color: #d4337e;
font-family: arcade;
text-transform: uppercase;
letter-spacing: 4px;
text-decoration: none;
font-size: 60px;
overflow: hidden;
transition: 0.2s;
position: relative;
}
.start {
position: relative;
top: 42%;
left: 31%;
align-items: center;
justify-content: center;
height: 60px;
width: 55%;
margin-top: -50px;
margin-left: -50px;
}
a:hover {
color: #ffffff;
background: #d4337e;
box-shadow: 0 0 10px #d4337e, 0 0 40px #d4337e, 0 0 80px #d4337e;
transition-delay: 1s;
}
a span {
position: absolute;
display: block;
}
a span:nth-child(1) {
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg,transparent,#d4337e);
}
a:hover span:nth-child(1) {
left: 100%;
transition: 1s;
}
a span:nth-child(3) {
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background: linear-gradient(270deg,transparent,#d4337e);
}
a:hover span:nth-child(3) {
right: 100%;
transition: 1s;
transition-delay: 0.5s;
}
a span:nth-child(2) {
top: -100%;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg,transparent,#d4337e);
}
a:hover span:nth-child(2) {
top: 100%;
transition: 1s;
transition-delay: 0.25s;
}
a span:nth-child(4) {
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg,transparent,#d4337e);
}
a:hover span:nth-child(4) {
bottom: 100%;
transition: 1s;
transition-delay: 0.75s;
}
JS
var player = document.getElementById("player");
let progress = document.getElementById("progress");
let playbtn = document.getElementById("playbtn");
var playpause = function () {
if (player.paused) {
player.play();
} else {
player.pause();
}
}
playbtn.addEventListener("click", playpause);
player.onplay = function () {
playbtn.classList.remove("fa-play");
playbtn.classList.add("fa-pause");
}
player.onpause = function () {
playbtn.classList.add("fa-play");
playbtn.classList.remove("fa-pause");
}
player.ontimeupdate = function () {
let ct = player.currentTime;
current.innerHTML = timeFormat(ct);
///progress
let duration = player.duration;
prog = Math.floor((ct * 100) / duration);
progress.style.setProperty("--progress",prog + "%");
}
function timeFormat(ct) {
minutes = Math.floor(ct / 60);
seconds = Math.floor(ct % 60);
if (seconds < 10) {
seconds = "0"+seconds;
}
return minutes + ":" + seconds;
}
Any help is appreciated.

From what i see you plan your element positioning on display relative or absolute.
on the other hand you should build your layout with flexbox

Related

Is there a way to make a script element only activate under specific conditions?

I have a HTML page that works on both desktop and mobile. It has a button that when pressed scrolls to the top of the page. But I only want it to appear when in desktop mode. It's hidden until you scroll down the page, and then becomes clickable.
This is my code:
index.html:
<html>
<head>
<title>Home</title>
<link rel="icon" type="image/x-icon" href="./images/favicon.png">
<link rel="stylesheet" media="screen and (min-width: 1294px)" href="main.css">
<link rel="stylesheet" media="screen and (max-width: 1294px)" href="mobile.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="header">
<img src="./images/logo.png" title="Aeron" alt="logo" class="header-logo">
<div class="desktop-nav">
<ul class="desktop-nav-links">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
<li>About Us</li>
<li>Recipes</li>
<li>Progress</li>
<li>PC Setup Designer</li>
<li>Gallery</li>
</ul>
</div>
<div class="mobile-nav">
<span class="menu-button" onclick="openNav()">☰</span>
<div id="mobile-nav-panel" class="mobile-nav-panel">
×
<ul class="mobile-nav-link-list">
<li class="mobile-nav-link">Home</li>
<hr>
<li class="mobile-nav-link">Portfolio</li>
<hr>
<li class="mobile-nav-link">Contact</li>
<hr>
<li class="mobile-nav-link">About Us</li>
<hr>
<li class="mobile-nav-link">Recipes</li>
<hr>
<li class="mobile-nav-link">Progress</li>
<hr>
<li class="mobile-nav-link">PC Setup Designer</li>
<hr>
<li class="mobile-nav-link">Gallery</li>
<hr>
<li class="mobile-nav-link"></li>
</ul>
</div>
</div>
</div>
<h1 class="heading">Welcome to Aeron</h1>
<div style="height:100%"></div>
<footer>
<img src="./images/logo.png" title="Aeron" alt="logo" class="footer-logo">
<p class="copyright">Copyright © 2022 Aeron Corporation</p>
<div class="footer-links">
About Us
<p>|</p>
Policy
<p>|</p>
Contact Us
</div>
</footer>
<button onclick="topFunction()" id="return" title="Return To Top">^</button>
<script>
let mybutton = document.getElementById("return");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
}
function openNav() {
document.getElementById("mobile-nav-panel").style.width = "100%";
}
function closeNav() {
document.getElementById("mobile-nav-panel").style.width = "0";
}
</script>
</body>
</html>
main.css:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500&display=swap');
* {
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
}
body {
background: linear-gradient( to right,#ff0000,#0000ff);
margin: 0;
}
p {
color:#ffffff;
font-size:20px;
padding: 10px;
}
.heading {
margin: 20px;
font-size: 50px;
text-align: center;
color: black;
}
a {
text-decoration: none;
}
.favcolorcontainer {
border: 2px solid black;
border-radius: 4px;
width: auto;
padding: 5px;
background: white;
display: inline-flex;
}
.colorpicker {
border:none;
background: white;
display: inline-flex;
}
.favcolor {
font-family: verdana;
margin-top: 3px;
}
.slideshow-container {
display: block;
width: 80%;
position: relative;
margin: 10px;
margin-left: auto;
margin-right: auto;
}
.mySlides {
display: none;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: #a6a6a650;
}
.slide-name {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.slide-number {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.progress-bar {
width: 100%;
border: none;
border-radius: 100px;
background-color: #FFFFFF;
padding: 3px;
}
.progress-tag {
color: #DDDDDD;
margin-left: 10px;
}
.fill-html {
width: 75%;
background-color: #FA3200;
border-radius: 100px;
}
.fill-css {
width: 60%;
background-color: #0000C8;
border-radius: 100px;
}
.fill-js {
width: 10%;
background-color: #C80000;
border-radius: 100px;
}
.fill-php {
width: 3%;
background-color: #00C832;
border-radius: 100px;
}
.fill-rwpd {
width: 100%;
background-color: #450099;
border-radius: 100px;
}
#return {
display: none;
position: fixed;
bottom: 30px;
right: 35px;
z-index: 99;
border: none;
outline: none;
background-color: #0000d1;
color: white;
cursor: pointer;
border-radius: 100px;
font-size: 45px;
width: 60px;
height: 60px;
}
#return:hover {
background-color: #0101bb;
}
.progress-container {
padding: 10px;
}
.header-logo {
margin: 10px;
float: left;
width: 150px;
}
.header {
background-color: #303030;
overflow: hidden;
width: 100%;
}
.desktop-nav-links {
float: right;
margin-right: 20px;
}
.desktop-nav-links a {
margin: 20px 25px 0;
padding: 0 0 20px;
display: block;
color: white;
}
.desktop-nav-links a:hover {
color: #b4b4b4;
transition: 0.2s all ease;
}
.desktop-nav-links li {
float: left;
list-style: none;
}
.menu-button {
display: none;
}
.copyright {
color: #b4b4b4;
font-size: 15px;
}
footer {
background: #303030;
padding: 25px 0;
text-align: center;
bottom: 0;
width: 100%;
height: auto;
display: block;
}
.hyperlink {
display: inline-block;
position: relative;
color: #b4b4b4;
}
.hyperlink:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 15px;
left: 0;
background-color: #b4b4b4;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hyperlink:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}
.recipe-container {
margin: 0px;
padding: 10px;
display: grid;
grid-template-columns: auto auto auto;
justify-content: center;
}
.recipe-window {
margin: 10px;
padding: 10px;
border: 1px solid #ffffff;
background-color: #ffffff;
word-break: break-word;
width: min-content;
border-radius: 10px;
}
.recipe-title {
color: black;
margin-top: 5px;
padding: 0px;
font-size: 25px;
}
:root {
color-scheme: dark;
}
.footer-links {
display: flex;
justify-content: center;
align-items: center;
}
.footer-links p {
margin: 0;
}
.footer-links a {
color: #ffffff;
}
.footer-links a:hover {
color: #b4b4b4;
}
.about {
text-align: center;
padding: 0 300px;
}
.mobile-nav {
display: none;
}
.footer-logo {
width: 150px;
}
mobile.css:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500&display=swap');
* {
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
}
body {
background: linear-gradient( to right,#ff0000,#0000ff);
margin: 0;
}
p {
color:#ffffff;
font-size:20px;
padding: 10px;
}
.heading {
margin: 20px;
font-size: 30px;
text-align: center;
color: black;
}
a {
text-decoration: none;
}
.slideshow-container {
display: block;
width: 80%;
position: relative;
margin: 10px;
margin-left: auto;
margin-right: auto;
}
.mySlides {
display: none;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: #a6a6a650;
}
.slide-name {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.slide-number {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.progress-bar {
width: 100%;
border: none;
border-radius: 100px;
background-color: #FFFFFF;
padding: 3px;
}
.progress-tag {
color: #DDDDDD;
margin-left: 10px;
}
.fill-html {
width: 75%;
background-color: #FA3200;
border-radius: 100px;
}
.fill-css {
width: 60%;
background-color: #0000C8;
border-radius: 100px;
}
.fill-js {
width: 10%;
background-color: #C80000;
border-radius: 100px;
}
.fill-php {
width: 3%;
background-color: #00C832;
border-radius: 100px;
}
.fill-rwpd {
width: 100%;
background-color: #450099;
border-radius: 100px;
}
#return {
display: none;
position: fixed;
bottom: 30px;
right: 35px;
z-index: 99;
border: none;
outline: none;
background-color: #0000d1;
color: white;
cursor: pointer;
border-radius: 100px;
font-size: 45px;
width: 60px;
height: 60px;
}
#return:hover {
background-color: #0101bb;
}
.progress-container {
padding: 10px;
}
.header-logo {
margin: 10px;
float: left;
width: 150px;
}
.header {
background-color: #303030;
overflow: hidden;
width: 100%;
}
.desktop-nav {
display: none;
}
.menu-button {
display: block;
margin: 30px 15px;
font-size:25px;
cursor:pointer;
color:white;
float: right;
}
.copyright {
color: #b4b4b4;
font-size: 15px;
}
footer {
background: #303030;
padding: 25px 0;
text-align: center;
bottom: 0;
width: 100%;
height: auto;
display: block;
}
.hyperlink {
display: inline-block;
position: relative;
color: #b4b4b4;
}
.hyperlink:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 15px;
left: 0;
background-color: #b4b4b4;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hyperlink:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.recipe-container {
margin: 0px;
padding: 10px;
display: grid;
grid-template-columns: auto auto auto;
justify-content: center;
}
.recipe-window {
margin: 10px;
padding: 10px;
border: 1px solid #ffffff;
background-color: #ffffff;
word-break: break-word;
width: min-content;
border-radius: 10px;
}
.recipe-title {
color: black;
margin-top: 5px;
padding: 0px;
font-size: 25px;
}
:root {
color-scheme: dark;
}
.footer-links {
display: flex;
justify-content: center;
align-items: center;
font-size: 15px;
}
.footer-links p {
margin: 0;
}
.footer-links a {
color: #ffffff;
}
.footer-links a:hover {
color: #b4b4b4;
}
.about {
text-align: center;
padding: 0 300px;
}
.mobile-nav {
float: right;
margin-right: 20px;
}
.mobile-nav-panel {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.mobile-nav a {
margin: 20px 0 0 0;
padding: 0 0 20px;
color: white;
font-size: 20px;
}
.mobile-nav-panel .closebtn {
position: absolute;
top: 0px;
right: 25px;
font-size: 50px;
}
.mobile-nav-link-list {
margin-right: 25px;
padding-top: 50px;
font-size: 1px;
list-style: none;
text-align: right;
}
.mobile-nav-link {
padding: 25px 0;
font-size: 1px;
}
.footer-logo {
width: 125px;
}
This is the result (bottom-right corner):
Is there any way to do this?
Thanks

Add this to mobile.css and the button will be gone, visually.
#return {
opacity: 0;
pointer-events: none;
}
Otherwise you would have to compare against window.width to get the equivalent of media query (or actually viewport width, see this answer)
Another option, if you're using bootstrap is to check against visibility of the "width" classes. see this answer.

How to hide the navbar on scroll on a horizontal scrolling website?

I'm coding this website and I can not find the solution. It is so frustrating having a user scrolling through the website with the navbar following them.
Yet, I can not find the solution to the problem.
I've managed to apply the solution to a vertical scrolling website, however on the horizontal scrolling one, it does not work.
The idea is that the navbar hides / shows up on scroll left / right.
So, here's the HTML:
<header id="navbar">
<ul class="nav-links hidden">
<li>Home</li>
<li>About</li>
<li>Careers</li>
<li>Order Now</li>
</ul>
</header>
<section class="outer-wrapper">
<div class="wrapper">
<div class="slide one">
<video muted loop autoplay>
<source src="videos/2.mp4" />
</video>
<div class="one-content">
<h3>
<span id="art">art</span>
<span id="is">is</span>
<span id="where">where</span>
<span id="the">the</span>
<span id="work">work</span>
<span id="meets">meets</span>
<span id="love">love.</span>
</h3>
<img src="images/hands.png" id="hands" />
</div>
</div>
</div>
</section>
<script src="js/app.js"text/javascript"></script>
There are no errors in the HTML code.
Here's the CSS code:
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
}
body {
background-color: var(--clr-black);
color: var(--clr-white);
font-family: var(--ff-main);
font-size: 1.1rem;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
transition: 0.6s;
padding: 22px 100px;
z-index: 100000;
/* border-bottom: 1px solid var(--clr-orange); */
}
.nav-links {
position: absolute;
top: 0;
left: 0;
border-right: 1px solid var(--clr-green);
border-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
height: 100vh;
max-width: 3%;
text-align: center;
}
.nav-links li {
transform: rotate(-90deg);
margin-bottom: 3rem;
}
.nav-links a{
font-family: var(--ff-main);
text-transform: uppercase;
font-weight: 400 !important;
letter-spacing: 0.243rem;
font-size: 12px;
text-decoration: none;
color: inherit;
}
.slide {
width: 100vw;
height: 100vh;
}
.wrapper {
position: relative;
display: flex;
flex-direction: row;
width: 400vw;
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
z-index: 0;
}
.one {
position: relative;
background: var(--clr-black);
z-index: 2;
}
.one video {
position: absolute;
z-index: 0;
opacity: 0.8;
width: 100vw;
object-fit: cover;
filter: contrast(100%) saturate(100%) hue-rotate(111deg);
}
.one-content {
position: relative;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
margin-left: 11rem;
}
.one-content #art {
position: absolute;
top: 6rem;
left: 3rem;
font-size: 11rem;
font-weight: 900;
text-transform: uppercase;
}
.one-content #is {
position: absolute;
top: 15rem;
left: 33rem;
font-size: 6rem;
font-weight: 100;
text-transform: uppercase;
}
.one-content #where {
position: absolute;
top: 22rem;
left: 43rem;
font-size: 6rem;
font-weight: 600;
text-transform: uppercase;
}
.one-content #the {
position: absolute;
top: 33rem;
left: 11rem;
font-size: 3rem;
font-weight: 300;
text-transform: uppercase;
}
.one-content #work {
position: absolute;
top: 33rem;
left: 22rem;
font-size: 9rem;
font-weight: 700;
text-transform: uppercase;
}
.one-content #meets {
position: absolute;
top: 40rem;
left: 56rem;
font-size: 2rem;
font-weight: 200;
text-transform: uppercase;
}
.one-content #love {
position: absolute;
top: 47rem;
left: 50rem;
font-size: 11rem;
font-weight: 900;
text-transform: uppercase;
}
.one-content #hands {
opacity: 1;
position: absolute;
top: 0rem;
right: -25rem;
width: 50rem;
}
.wrapper {
position: relative;
display: flex;
flex-direction: row;
width: 400vw;
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
z-index: 0;
}
.outer-wrapper {
width: 100vh;
height: 100vw;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
overflow-y: scroll;
overflow-x: hidden;
position: relative;
scrollbar-width: none;
}
I believe there may be some incorrect styling in the CSS code.
However,
Here's the JavaScript code:
var prevScPos = window.pageXOffset;
window.addEventListener('scroll', function() {
var curScPos = window.pageXOffset;
if (prevScPos > curScPos) {
document.getElementById("navbar").style.left = "0";
} else {
document.getElementById("navbar").style.left = "-60px";
}
prevScPos = curScPos;
})
Any help is appreciated.
Thanks in advance.

You need to change the scroll event to wheel..
window.addEventListener('wheel', function() { ...
var prevScPos = window.pageXOffset;
window.addEventListener('wheel', function() {
var curScPos = window.pageXOffset;
if (prevScPos > curScPos) {
document.getElementById("navbar").style.left = "0";
} else {
document.getElementById("navbar").style.left = "-60px";
}
prevScPos = curScPos;
})
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
}
body {
background-color: var(--clr-black);
color: var(--clr-white);
font-family: var(--ff-main);
font-size: 1.1rem;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
transition: 0.6s;
padding: 22px 100px;
z-index: 100000;
/* border-bottom: 1px solid var(--clr-orange); */
}
.nav-links {
position: absolute;
top: 0;
left: 0;
border-right: 1px solid var(--clr-green);
border-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
height: 100vh;
max-width: 3%;
text-align: center;
}
.nav-links li {
transform: rotate(-90deg);
margin-bottom: 3rem;
}
.nav-links a{
font-family: var(--ff-main);
text-transform: uppercase;
font-weight: 400 !important;
letter-spacing: 0.243rem;
font-size: 12px;
text-decoration: none;
color: inherit;
}
.slide {
width: 100vw;
height: 100vh;
}
.wrapper {
position: relative;
display: flex;
flex-direction: row;
width: 400vw;
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
z-index: 0;
}
.one {
position: relative;
background: var(--clr-black);
z-index: 2;
}
.one video {
position: absolute;
z-index: 0;
opacity: 0.8;
width: 100vw;
object-fit: cover;
filter: contrast(100%) saturate(100%) hue-rotate(111deg);
}
.one-content {
position: relative;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
margin-left: 11rem;
}
.one-content #art {
position: absolute;
top: 6rem;
left: 3rem;
font-size: 11rem;
font-weight: 900;
text-transform: uppercase;
}
.one-content #is {
position: absolute;
top: 15rem;
left: 33rem;
font-size: 6rem;
font-weight: 100;
text-transform: uppercase;
}
.one-content #where {
position: absolute;
top: 22rem;
left: 43rem;
font-size: 6rem;
font-weight: 600;
text-transform: uppercase;
}
.one-content #the {
position: absolute;
top: 33rem;
left: 11rem;
font-size: 3rem;
font-weight: 300;
text-transform: uppercase;
}
.one-content #work {
position: absolute;
top: 33rem;
left: 22rem;
font-size: 9rem;
font-weight: 700;
text-transform: uppercase;
}
.one-content #meets {
position: absolute;
top: 40rem;
left: 56rem;
font-size: 2rem;
font-weight: 200;
text-transform: uppercase;
}
.one-content #love {
position: absolute;
top: 47rem;
left: 50rem;
font-size: 11rem;
font-weight: 900;
text-transform: uppercase;
}
.one-content #hands {
opacity: 1;
position: absolute;
top: 0rem;
right: -25rem;
width: 50rem;
}
.wrapper {
position: relative;
display: flex;
flex-direction: row;
width: 400vw;
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
z-index: 0;
}
.outer-wrapper {
width: 100vh;
height: 100vw;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
overflow-y: scroll;
overflow-x: hidden;
position: relative;
scrollbar-width: none;
}
#navbar { position:absolute;}
<header id="navbar">
<ul class="nav-links hidden">
<li>Home</li>
<li>About</li>
<li>Careers</li>
<li>Order Now</li>
</ul>
</header>
<section class="outer-wrapper">
<div class="wrapper">
<div class="slide one">
<video muted loop autoplay>
<source src="videos/2.mp4" />
</video>
<div class="one-content">
<h3>
<span id="art">art</span>
<span id="is">is</span>
<span id="where">where</span>
<span id="the">the</span>
<span id="work">work</span>
<span id="meets">meets</span>
<span id="love">love.</span>
</h3>
<img src="images/hands.png" id="hands" />
</div>
</div>
</div>
</section>

Add the following CSS to the element.
.outer-wrapper {
width: 100vh;
height: 100vw;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
overflow-y: scroll;
overflow-x: hidden;
position: relative;
scrollbar-width: none;
}
.outer-wrapper::-webkit-scrollbar{
display: none;
}
For SCSS,
.outer-wrapper {
width: 100vh;
height: 100vw;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
overflow-y: scroll;
overflow-x: hidden;
position: relative;
scrollbar-width: none;
&:-webkit-scrollbar {
display: none;
}
}

One Api request for an image works but a copy of it in another HTML file in the same folder doesnt work

const menu = document.querySelector('#mobile-menu');
const menuLinks = document.querySelector('.navbar__menu');
menu.addEventListener('click', function() {
menu.classList.toggle('is-active');
menuLinks.classList.toggle('active');
});
var req = new XMLHttpRequest();
var url = "https://api.nasa.gov/planetary/apod?api_key=";
var api_key = "Q6LCLptEevXBK9pvwj1GeEsPbM4mmv6ywTmfw0Nc";
req.open("GET", url + api_key);
req.send();
req.addEventListener("load", function() {
if (req.status == 200 && req.readyState == 4) {
var response = JSON.parse(req.responseText);
document.getElementById("title").textContent = response.title;
document.getElementById("date").textContent = response.date;
document.getElementById("pic").src = response.hdurl;
document.getElementById("explanation").textContent = response.explanation;
}
})
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Kumbh Sans', sans-serif;
}
.navbar {
background: darkred;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 999;
}
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
margin-right: auto;
margin-left: auto;
padding-right: 50px;
padding-left: 50px;
}
#navbar__logo {
background-color: #ff8177;
background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.fa-gem {
margin-right: 0.5rem;
}
.navbar__menu {
display: flex;
align-items: center;
list-style: none;
text-align: center;
}
.navbar__item {
height: 80px;
}
.navbar__links {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
padding: 0 1rem;
height: 100%;
}
.navbar__btn {
display: flex;
justify-content: center;
align-items: center;
padding: 0 1rem;
width: 100%;
}
.btnclick {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
padding: 10px 20px;
height: 100%;
width: 100%;
border: none;
outline: none;
border-radius: 4px;
background: #f77062;
color: #fff;
}
.button:hover {
background: #4837ff;
transition: all 0.3s ease;
}
.navbar__links:hover {
color: #f77062;
transition: all 0.3s ease;
}
#media screen and (max-width: 960px) {
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0;
}
.navbar__menu {
display: grid;
grid-template-columns: auto;
margin: 0;
width: 100%;
position: absolute;
top: -1000px;
opacity: 1;
transition: all 0.5s ease;
height: 50vh;
z-index: -1;
}
.navbar__menu.active {
background: #131313;
top: 100%;
opacity: 1;
transition: all 0.5s ease;
z-index: 99;
height: 50vh;
font-size: 1.6rem;
}
#navbar__logo {
padding-left: 25px;
}
.navbar__toggle .bar {
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background: #fff;
}
.navbar__item {
width: 100%;
}
.navbar__links {
text-align: center;
padding: 2rem;
width: 100%;
display: table;
}
.navbar__btn {
padding-bottom: 2rem;
}
.button {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
height: 80px;
margin: 0;
}
#mobile-menu {
position: absolute;
top: 20%;
right: 5%;
transform: translate(5%, 20%);
}
.navbar__toggle .bar {
display: block;
cursor: pointer;
}
#mobile-menu.is-active .bar:nth-child(2) {
opacity: 0;
}
#mobile-menu.is-active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
#mobile-menu.is-active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
}
/* Main Content CSS */
.main {
background-color: #131313;
}
.main__container {
display: grid;
grid-template-columns: auto auto;
align-items: Left;
justify-self: Left;
margin: 100px;
height: 90vh;
background-color: #131313;
z-index: 1;
width: 100%;
max-width: 1300px;
padding-right: 0px;
padding-left: 0px;
}
.main__content {
color: #fff;
width: 100%;
}
.main__content h1 {
font-size: 4rem;
background-color: #ff8177;
background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
.main__content h2 {
font-size: 4rem;
margin-top: 10px;
background-color: #ff8177;
background-image: linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
.main__content p {
margin-top: 1rem;
font-size: 2rem;
font-weight: 700;
}
.main__btn {
font-size: 1rem;
background-image: linear-gradient(to top, #f77062 0%, #fe5196 100%);
padding: 14px 32px;
border: none;
border-radius: 4px;
color: #fff;
margin-top: 2rem;
cursor: pointer;
position: relative;
transition: all 0.35s;
outline: none;
}
.main__btn a {
position: relative;
z-index: 2;
color: #fff;
text-decoration: none;
}
.main__btn:after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 0;
height: 100%;
background: #4837ff;
transition: all 0.35s;
border-radius: 4px;
}
.main__btn:hover {
color: #fff;
}
.main__btn:hover:after {
width: 100%;
}
.main__img--container {
text-align: center;
}
#main__img {
height: 80%;
width: 80%;
}
/* Mobile Responsive */
#media screen and (max-width: 768px) {
.main__container {
display: grid;
grid-template-columns: auto;
align-items: center;
justify-self: center;
width: 100%;
margin: 0 auto;
height: 90vh;
}
.main__content {
text-align: center;
margin-bottom: 4rem;
}
.main__content h1 {
font-size: 2.5rem;
margin-top: 2rem;
}
.main__content h2 {
font-size: 3rem;
}
.main__content p {
margin-top: 1rem;
font-size: 1.5rem;
}
}
#media screen and (max-width: 480px) {
.main__content h1 {
font-size: 2rem;
margin-top: 3rem;
}
.main__content h2 {
font-size: 2rem;
}
.main__content p {
margin-top: 2rem;
font-size: 1.5rem;
}
.main__btn {
padding: 12px 36px;
margin: 2.5rem 0;
}
}
/* Services Section */
.services {
background: #131313;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
.services h1 {
background-color: #ff8177;
background-image: linear-gradient( to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
margin-bottom: 5rem;
font-size: 2.5rem;
}
.services__container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.services__card {
margin: 1rem;
height: 525px;
width: 400px;
border-radius: 4px;
background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(17, 17, 17, 0.6) 100%), url('/images/pic3.jpg');
background-size: cover;
position: relative;
color: #fff;
}
.services__card:before {
opacity: 0.2;
}
.services__card:nth-child(2) {
background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(17, 17, 17, 0.9) 100%), url('/images/pic4.jpg');
}
.services__card h2 {
position: absolute;
top: 350px;
left: 30px;
}
.services__card p {
position: absolute;
top: 400px;
left: 30px;
}
.services__card button {
color: #fff;
padding: 10px 20px;
border: none;
outline: none;
border-radius: 4px;
background: #f77062;
position: absolute;
top: 440px;
left: 30px;
font-size: 1rem;
}
.services__card button:hover {
cursor: pointer;
}
.services__card:hover {
transform: scale(1.075);
transition: 0.2s ease-in;
cursor: pointer;
}
#media screen and (max-width: 960px) {
.services {
height: 1600px;
}
.services h1 {
font-size: 2rem;
margin-top: 12rem;
}
}
#media screen and (max-width: 480px) {
.services {
height: 1400px;
}
.services h1 {
font-size: 1.2rem;
}
.services__card {
width: 300px;
}
}
/* Footer CSS */
.footer__container {
background-color: #141414;
padding: 5rem 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#footer__logo {
color: #fff;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.footer__links {
width: 100%;
max-width: 1000px;
display: flex;
justify-content: center;
}
.footer__link--wrapper {
display: flex;
}
.footer__link--items {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 16px;
text-align: left;
width: 160px;
box-sizing: border-box;
}
.footer__link--items h2 {
margin-bottom: 16px;
}
.footer__link--items>h2 {
color: #fff;
}
.footer__link--items a {
color: #fff;
text-decoration: none;
margin-bottom: 0.5rem;
}
.footer__link--items a:hover {
color: #e9e9e9;
transition: 0.3s ease-out;
}
/* Social Icons */
.social__icon--link {
color: #fff;
font-size: 24px;
}
.social__media {
max-width: 1000px;
width: 100%;
}
.social__media--wrap {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
max-width: 1000px;
margin: 40px auto 0 auto;
}
.social__icons {
display: flex;
justify-content: space-between;
align-items: center;
width: 240px;
}
.social__logo {
color: #fff;
justify-self: start;
margin-left: 20px;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
display: flex;
align-items: center;
margin-bottom: 16px;
}
.website__rights {
color: #fff;
}
#media screen and (max-width: 820px) {
.footer__links {
padding-top: 2rem;
}
#footer__logo {
margin-bottom: 2rem;
}
.website__rights {
margin-bottom: 2rem;
}
.footer__link--wrapper {
flex-direction: column;
}
.social__media--wrap {
flex-direction: column;
}
}
#media screen and (max-width: 480px) {
.footer__link--items {
margin: 0;
padding: 10px;
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML CSS Website</title>
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#400;700&display=swap" rel="stylesheet" />
</head>
<body style="background-color:#131313;">
<div class="grid-container">
<nav class="navbar">
<div class="navbar__container">
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span> <span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="navbar__item">
Coming Soon
</li>
<li class="navbar__item">
Coming Soon
</li>
<li class="navbar__item">
Coming Soon
</li>
</ul>
</div>
</nav>
</div>
<div class="main">
<div class="main__container">
<div class="main__content">
<h1>Starfield</h1>
<h2>Explore Images from NASA</h2>
<p>By Nick</p>
</div>
</div>
</div>
<div class="main__content">
<div class="main__container">
<div class="item2">
<h1>NASA Astronomy Picture Of The Day</h1>
<h2 id="title" /h2>
<h3>Date: <span id="date"></span></h3>
<img id="pic" src="" alt="NASA Picture Of The Day" width="30%">
</div>
</div>
<script src="app.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML CSS Website</title>
<link rel="stylesheet" href="styles.css" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc"
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#400;700&display=swap"
rel="stylesheet"
/>
</head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto;
grid-gap: 10px;
padding: 10px;
}
.grid-container > div {
text-align: Left;
padding: 20px 0;
font-size: 30px;
}
</style>
<body style="background-color:#131313;">
<div class="grid-container">
<div class="item1">
<div class="main">
<div class="main__container">
<div class="main__content">
<h1>Starfield</h1>
<h2>Explore Images from NASA</h2>
<p>By Nikunj Patel</p></div>
</div>
</div>
</div>
<div class="main__content">
<div class="main__container">
<div class="item2">
<h1>NASA Astronomy Picture Of The Day</h1>
<h2 id="title"></h2>
<h3>Date: <span id="date"></span></h3>
<img id="pic" src="" alt="NASA Picture Of The Day" width="100%">
<p id="explanation"></p>
</div>
</div>
</div>
<div class="item3">3</div>
<div class="item4">4</div>
</div>
<script src="app.js"></script>
</body>
</html>
So why does the first html produce an image and the second doesnt but both return the Error:
(Both HTMLs use the same CSS and Js files)
"{
"message": "Uncaught TypeError: Cannot set properties of null (setting 'textContent')",
"filename": "https://stacksnippets.net/js",
"lineno": 680,
"colno": 56
}"
i want to use the formatting of this second html file instead of the first and i was surprised no image was produced

How can I get a styled form to be submitted?

So I'm trying to submit an HTML forms but I can't get it to work. I've tried removing some styling to different divs, and also I've tried removing javascirpt files but nothing seems to be the problem. I already checked about 10 posts here on Stackoverflow but none of them could help me. I would really appreciate if someone could help me.
//Nearby Search Overlay
var state_overlay1 = true;
function nearby_search_toggle() {
if (state_overlay1) {
state_overlay1 = false;
document.getElementById("nearby_search").style.height = "100%";
} else {
state_overlay1 = true;
document.getElementById("nearby_search").style.height = "0%";
}
}
//Search Nearby Query
var nearby_query = "¿a dónde quieres ir?";
function update_query(choice) {
document.getElementById("nearby_query_text").innerHTML = choice;
document.getElementById("adqi_button").style.backgroundColor = "#A288E3";
nearby_search_toggle();
}
//Add Address Overlay
var state_overlay2 = true;
function add_address_toggle() {
if (state_overlay2) {
state_overlay2 = false;
document.getElementById("adqi_button").style.zIndex = "0";
document.getElementById("add_address").style.height = "100%";
} else {
state_overlay2 = true;
document.getElementById("adqi_button").style.zIndex = "2";
document.getElementById("add_address").style.height = "0%";
}
}
function add_address(){
}
#font-face {
font-family: biolinum;
src: 'fonts/LinBiolinum_R.ttf';
}
#font-face {
font-family: biolinum;
src: 'fonts/LinBiolinum_RB.ttf';
font-weight: bold;
}
#font-face {
font-family: biolinum;
src: 'fonts/LinBiolinum_RI.ttf';
font-style: italic;
}
body {
background-color: #FCF7F8;
font-size: 62.5%;
height: 100%;
margin: 0px;
}
p {
margin-block-start: 0rem;
margin-block-end: 0rem;
}
h1 {
margin-block-start: 0rem;
margin-block-end: 0rem;
}
.domainhome {
font-family: biolinum;
font-size: 2rem;
text-align: center;
color: #1D263B;
background-color: #FCF7F8;
border: none;
padding-top: 0px;
cursor: pointer;
outline:none;
margin-top: 2rem;
margin-left: 5rem;
}
a:link {
color: #1D263B;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: #1D263B;
background-color: transparent;
text-decoration: none;
}
.flex-container {
display: flex;
flex-shrink: 0;
margin-top: 4rem;
}
.left-bar {
flex-direction: column;
margin-left: 5rem;
}
.right-bar {
flex-direction: column;
margin-left: 5rem;
margin-right: 5rem;
height: 100%;
width: 100%;
}
button {
transition: 0.4s;
}
button:hover {
transform: rotate(-1deg) translate(0px, -8px);
}
.adondequieresir {
font-family: biolinum;
font-size: 1.66rem;
text-align: center;
color: #FCF7F8;
background-color: #1D263B;
border: none;
width: 275px;
height: 75px;
cursor: pointer;
outline:none;
margin-bottom: 3rem;
z-index: 2;
position: relative;
}
.agregarubicacion {
font-family: biolinum;
font-size: 1.33rem;
text-align: center;
color: #FCF7F8;
background-color: #1D263B;
border: none;
width: 275px;
height: 50px;
border-radius: 50px;
cursor: pointer;
outline:none;
margin-bottom: 3rem;
}
.personasunidas {
font-family: biolinum;
font-size: 1.33rem;
text-align: center;
color: #FCF7F8;
background-color: #1D263B;
border: none;
width: 275px;
height: 50px;
border-radius: 50px;
cursor: pointer;
outline:none;
margin-bottom: 3rem;
}
.icons {
float: left;
margin-left: 7px;
margin-right: 10px;
}
#map {
height: 400px;
}
#nearby_search {
transition: 0.4s;
position: fixed;
width: 100%;
height: 0%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 1;
overflow-y: scroll;
transition: 0.4s;
backdrop-filter: blur(6px);
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
#nearby_search::-webkit-scrollbar {
display: none;
}
.adqi_dropdown {
margin-top: 134px;
margin-left: 25rem;
display: flex;
flex-shrink: 0;
flex-direction: column;
}
#add_address {
transition: 0.4s;
position: fixed;
width: 100%;
height: 0%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 1;
overflow-y: scroll;
transition: 0.4s;
backdrop-filter: blur(6px);
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
#add_address::-webkit-scrollbar {
display: none;
}
.square_popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 200px;
width: 500px;
display: flex;
flex-shrink: 0;
flex-direction: column;
background-color: #1D263B;
font-family: biolinum;
font-size: 1.33rem;
color: #FCF7F8;
justify-content: space-evenly;
border-radius: 50px;
}
#cancelar_button {
height: 50px;
width: 25%;
border-radius: 50px;
font-family: biolinum;
font-size: 1.33rem;
color: #FCF7F8;
background-color: #F7B32B;
border: none;
border-radius: 50px;
cursor: pointer;
outline:none;
}
#submit_button {
height: 50px;
width: 55%;
border-radius: 50px;
font-family: biolinum;
font-size: 1.33rem;
color: #FCF7F8;
background-color: #7CD97C;
border: none;
border-radius: 50px;
cursor: pointer;
outline:none;
}
.common_flexbox {
display: flex;
flex-shrink: 0;
justify-content: space-around;
}
#nickname {
position: relative;
margin-left: auto;
margin-right: auto;
border-radius: 50px;
width: 90%;
height: 50px;
font-family: biolinum;
font-size: 1.33rem;
border: none;
background-color: #FCF7F8;
color: #1D263B;
text-align: center;
transition: 0.4s;
}
#nickname:hover {
transform: rotate(-1deg) translate(0px, -8px);
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button class="domainhome"><p>salgamos.com.mx</p></button>
<div class="flex-container">
<div class="left-bar">
<div>
<button onClick="nearby_search_toggle()" class="adondequieresir" id="adqi_button"><p id="nearby_query_text">¿a dónde quieres ir?</p></button>
</div>
<div id="nearby_search">
<div class="adqi_dropdown">
<button class="adondequieresir" onClick="update_query('restaurante')"><p>restaurante</p></button>
<button class="adondequieresir" onClick="update_query('café')"><p>café</p></button>
<button class="adondequieresir" onClick="update_query('bar')"><p>bar</p></button>
<button class="adondequieresir" onClick="update_query('parque')"><p>parque</p></button>
<button class="adondequieresir" onClick="update_query('antro')"><p>antro</p></button>
</div>
</div>
<div>
<button class="agregarubicacion" onClick="add_address_toggle()" id="au_button">
<img class="icons" src="{{url_for('static', filename='icons/noun_pin_button.svg')}}" width="30px" height="30px"/>
<p style="float: left;">¡agrega tu ubicación!</p>
</button>
</div>
<div id="add_address">
<form action="#" onsubmit="add_address();return false" name="get_nickname" method="POST">
<div class="square_popup">
<input type="text" name="nickname" placeholder="¿cuál es tu apodo?" id="nickname" />
<div class="common_flexbox">
<button onClick="add_address_toggle()" id="cancelar_button"><p>Cancelar</p></button>
<button type="submit" id="submit_button" value="Submit"><p>Agregar ubicación</p></button>
</div>
</div>
</form>
</div>
<div>
<button class="personasunidas">
<img class="icons" src="{{url_for('static', filename='icons/noun_user.svg')}}" width="30px" height="30px"/>
<p style="float: left;">(n) personas unidas</p>
</button>
</div>
</div>
</div>
</body>
</html>

Styling is different between pages HTML CSS JS with similar code

I am building a website and I cannot tell a difference between two HTML/CSS/JS files to see what is making my logo, button, and the main text a different style. The first code is the desired look for the website's logo, button, and main text but the second is incorrect. Any help will be appriciated!
My desired HTML style for the logo, buttons, and main text styling is on this page:
<!DOCTYPE html>
<section class="showcase">
<script type="text/javascript">
window.addEventListener('load', () => {
const menuToggle = document.querySelector('.toggle');
const showcase = document.querySelector('.showcase');
menuToggle.addEventListener('click', () => {
menuToggle.classList.toggle('active');
showcase.classList.toggle('active');
})
});
</script>
<header>
<style>
#import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
header
{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 40px 100px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
header .logo
{
color: #fff;
text-transform: uppercase;
cursor: pointer;
}
.toggle
{
position: relative;
width: 60px;
height: 60px;
background: url(https://i.ibb.co/HrfVRcx/menu.png);
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
cursor: pointer;
}
.toggle.active
{
background: url(https://i.ibb.co/rt3HybH/close.png);
background-repeat: no-repeat;
background-size: 25px;
background-position: center;
cursor: pointer;
}
.showcase
{
position: absolute;
right: 0;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #011721;
transition: 0.5s;
z-index: 2;
}
.showcase.active
{
right: 300px;
}
.showcase video
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
}
.text
{
z-index: 10;
}
.text h2
{
font-size: 5em;
font-weight: 800;
color: #fff;
line-height: 1em;
text-transform: uppercase;
}
.menu
{
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.menu ul
{
position: relative;
}
.menu ul li
{
list-style: none;
}
.menu ul li a
{
text-decoration: none;
font-size: 24px;
color: #011721;
}
.menu ul li a:hover
{
color: #03a9f4;
}
#media (max-width: 991px)
{
.showcase,
.showcase header
{
padding: 40px;
}
.text h2
{
font-size: 3em;
}
}
</style>
<h2 class="logo">Sample Logo</h2>
<div class="toggle"></div>
</header>
<div class="overlay">
<div class="text">
<p id='text'>You Can Contact Us Here</p>
<button id='back'>Call</button>
<a href="mailto:><button id='email'>Email</button></a>
</div>
</div>
</section>
<div class="menu">
<ul>
<li>Home</li>
<li>Sign Up</li>
<li>Login</li>
</ul>
</div>
<style>
#text {
font-family: 'Poppins', sans-serif;
font-size: 3em;
font-weight: 800;
color: #fff;
line-height: 2em;
text-transform: uppercase;
font-size: 3em;
margin: 20px 0;
max-width: 700px;
text-align:center;
position: absolute;
left: 50%;
top: 45%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#back
{
display: inline-block;
font-size: 2.5em;
background: #fff;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
justify-content: center;
border: none;
text-align:center;
position: absolute;
left: 50%;
top: 80%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#back:hover
{
letter-spacing: 6px;
}
#email
{
display: inline-block;
font-size: 2.5em;
background: #fff;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
justify-content: center;
border: none;
text-align:center;
position: absolute;
left: 50%;
top: 90%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#email:hover
{
letter-spacing: 6px;
}
</style>
<body>
</body>
</html>
The different styling on the second page for the buttons/logo/main text:
<!DOCTYPE html>
<section class="showcase">
<script type="text/javascript">
window.addEventListener('load', () => {
const menuToggle = document.querySelector('.toggle');
const showcase = document.querySelector('.showcase');
menuToggle.addEventListener('click', () => {
menuToggle.classList.toggle('active');
showcase.classList.toggle('active');
})
});
</script>
<header>
<style>
#form {
font-family: 'Poppins', sans-serif;
font-size: 5em;
font-weight: 800;
color: #fff;
line-height: 2em;
text-transform: uppercase;
font-size: 5em;
margin: 20px 0;
max-width: 700px;
}
#logintext {
font-family: 'Poppins', sans-serif;
font-size: 5em;
font-weight: 800;
color: #fff;
line-height: 1em;
text-transform: uppercase;
font-size: 7em;
margin: 20px 0;
max-width: 700px;
text-align:center;
position: absolute;
left: 50%;
top: 20%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#formGroupExampleInput {
width: 75%;
height: 3%;
background-color:#fff;
border: none;
text-align:center;
position: absolute;
left: 50%;
top: 52.5%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#formGroupExampleInput2 {
width: 75%;
height: 3%;
background-color:#fff;
border: none;
text-align:center;
position: absolute;
left: 50%;
top: 75%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#usernamelabel {
text-align:center;
position: absolute;
left: 50%;
top: 40%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#passwordlabel {
text-align:center;
position: absolute;
left: 50%;
top: 65%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#submit
{
display: inline-block;
font-size: 1em;
background: #fff;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
justify-content: center;
position: absolute;
border: none;
left: 50%;
top: 87.5%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#submit:hover
{
letter-spacing: 6px;
}
#import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 40px 100px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
header .logo {
color: #fff;
text-transform: uppercase;
cursor: pointer;
}
.toggle {
position: relative;
width: 60px;
height: 60px;
background: url(https://i.ibb.co/HrfVRcx/menu.png);
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
cursor: pointer;
}
.toggle.active {
background: url(https://i.ibb.co/rt3HybH/close.png);
background-repeat: no-repeat;
background-size: 25px;
background-position: center;
cursor: pointer;
}
.showcase {
position: absolute;
right: 0;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #011721;
transition: 0.5s;
z-index: 2;
}
.showcase.active {
right: 300px;
}
.showcase video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
}
.text {
z-index: 10;
}
.menu {
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.menu ul {
position: relative;
}
.menu ul li {
list-style: none;
}
.menu ul li a {
text-decoration: none;
font-size: 24px;
color: #011721;
}
.menu ul li a:hover {
color: #03a9f4;
}
#media (max-width: 991px) {
.showcase,
.showcase header {
padding: 40px;
}
}
</style>
<h2 class="logo">Sample Logo</h2>
<div class="toggle"></div>
</header>
<h2 id='logintext'>Login</h2>
<div class="overlay">
<div class="text">
<form id='form' action="/login" method="POST">
<div class="form-group">
<label id='usernamelabel' for="formGroupExampleInput">Username</label>
<input type="text" class="form-control" id="formGroupExampleInput" name="username">
</div>
<div class="form-group">
<label id='passwordlabel' for="formGroupExampleInput2">Password</label>
<input type="password" class="form-control" id="formGroupExampleInput2" name="password">
</div>
<button id='submit' type="submit" class="btn btn-primary">Sign in</button>
</form>
</div>
</div>
</section>
<div class="menu">
<ul>
<li>Home</li>
<li>Sign Up</li>
<li>Login</li>
</ul>
</div>
<html>
<style>
#text {
font-family: 'Poppins', sans-serif;
font-size: 3em;
font-weight: 800;
color: #fff;
line-height: 2em;
text-transform: uppercase;
font-size: 3em;
margin: 20px 0;
max-width: 700px;
text-align:center;
position: absolute;
left: 50%;
top: 45%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#back
{
display: inline-block;
font-size: 2.5em;
background: #fff;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
justify-content: center;
border: none;
text-align:center;
position: absolute;
left: 50%;
top: 80%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#back:hover
{
letter-spacing: 6px;
}
#email
{
display: inline-block;
font-size: 2.5em;
background: #fff;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
justify-content: center;
border: none;
text-align:center;
position: absolute;
left: 50%;
top: 90%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#email:hover
{
letter-spacing: 6px;
}
</style>
<body>
</body>
</html>

In the first example you are missing a open html tag and also missing a closing quote mailto:
<!DOCTYPE html><html>
<section class="showcase">
<script type="text/javascript">
window.addEventListener('load', () => {
const menuToggle = document.querySelector('.toggle');
const showcase = document.querySelector('.showcase');
menuToggle.addEventListener('click', () => {
menuToggle.classList.toggle('active');
showcase.classList.toggle('active');
})
});
</script>
<header>
<style>
#import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
header
{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 40px 100px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
header .logo
{
color: #fff;
text-transform: uppercase;
cursor: pointer;
}
.toggle
{
position: relative;
width: 60px;
height: 60px;
background: url(https://i.ibb.co/HrfVRcx/menu.png);
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
cursor: pointer;
}
.toggle.active
{
background: url(https://i.ibb.co/rt3HybH/close.png);
background-repeat: no-repeat;
background-size: 25px;
background-position: center;
cursor: pointer;
}
.showcase
{
position: absolute;
right: 0;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #011721;
transition: 0.5s;
z-index: 2;
}
.showcase.active
{
right: 300px;
}
.showcase video
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
}
.text
{
z-index: 10;
}
.text h2
{
font-size: 5em;
font-weight: 800;
color: #fff;
line-height: 1em;
text-transform: uppercase;
}
.menu
{
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.menu ul
{
position: relative;
}
.menu ul li
{
list-style: none;
}
.menu ul li a
{
text-decoration: none;
font-size: 24px;
color: #011721;
}
.menu ul li a:hover
{
color: #03a9f4;
}
#media (max-width: 991px)
{
.showcase,
.showcase header
{
padding: 40px;
}
.text h2
{
font-size: 3em;
}
}
</style>
<h2 class="logo">Sample Logo</h2>
<div class="toggle"></div>
</header>
<div class="overlay">
<div class="text">
<p id='text'>You Can Contact Us Here</p>
<button id='back'>Call</button>
<button id='email'>Email</button>
</div>
</div>
</section>
<div class="menu">
<ul>
<li>Home</li>
<li>Sign Up</li>
<li>Login</li>
</ul>
</div>
<style>
#text {
font-family: 'Poppins', sans-serif;
font-size: 3em;
font-weight: 800;
color: #fff;
line-height: 2em;
text-transform: uppercase;
font-size: 3em;
margin: 20px 0;
max-width: 700px;
text-align:center;
position: absolute;
left: 50%;
top: 45%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#back
{
display: inline-block;
font-size: 2.5em;
background: #fff;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
justify-content: center;
border: none;
text-align:center;
position: absolute;
left: 50%;
top: 80%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#back:hover
{
letter-spacing: 6px;
}
#email
{
display: inline-block;
font-size: 2.5em;
background: #fff;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
justify-content: center;
border: none;
text-align:center;
position: absolute;
left: 50%;
top: 90%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#email:hover
{
letter-spacing: 6px;
}
</style>
<body>
</body>
</html>
<!DOCTYPE html>
<section class="showcase">
<script type="text/javascript">
window.addEventListener('load', () => {
const menuToggle = document.querySelector('.toggle');
const showcase = document.querySelector('.showcase');
menuToggle.addEventListener('click', () => {
menuToggle.classList.toggle('active');
showcase.classList.toggle('active');
})
});
</script>
<header>
<style>
#form {
font-family: 'Poppins', sans-serif;
font-size: 5em;
font-weight: 800;
color: #fff;
line-height: 2em;
text-transform: uppercase;
font-size: 5em;
margin: 20px 0;
max-width: 700px;
}
#logintext {
font-family: 'Poppins', sans-serif;
font-size: 5em;
font-weight: 800;
color: #fff;
line-height: 1em;
text-transform: uppercase;
font-size: 7em;
margin: 20px 0;
max-width: 700px;
text-align:center;
position: absolute;
left: 50%;
top: 20%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#formGroupExampleInput {
width: 75%;
height: 3%;
background-color:#fff;
border: none;
text-align:center;
position: absolute;
left: 50%;
top: 52.5%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#formGroupExampleInput2 {
width: 75%;
height: 3%;
background-color:#fff;
border: none;
text-align:center;
position: absolute;
left: 50%;
top: 75%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#usernamelabel {
text-align:center;
position: absolute;
left: 50%;
top: 40%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#passwordlabel {
text-align:center;
position: absolute;
left: 50%;
top: 65%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#submit
{
display: inline-block;
font-size: 1em;
background: #fff;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
justify-content: center;
position: absolute;
border: none;
left: 50%;
top: 87.5%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#submit:hover
{
letter-spacing: 6px;
}
#import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 40px 100px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
header .logo {
color: #fff;
text-transform: uppercase;
cursor: pointer;
}
.toggle {
position: relative;
width: 60px;
height: 60px;
background: url(https://i.ibb.co/HrfVRcx/menu.png);
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
cursor: pointer;
}
.toggle.active {
background: url(https://i.ibb.co/rt3HybH/close.png);
background-repeat: no-repeat;
background-size: 25px;
background-position: center;
cursor: pointer;
}
.showcase {
position: absolute;
right: 0;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #011721;
transition: 0.5s;
z-index: 2;
}
.showcase.active {
right: 300px;
}
.showcase video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
}
.text {
z-index: 10;
}
.menu {
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.menu ul {
position: relative;
}
.menu ul li {
list-style: none;
}
.menu ul li a {
text-decoration: none;
font-size: 24px;
color: #011721;
}
.menu ul li a:hover {
color: #03a9f4;
}
#media (max-width: 991px) {
.showcase,
.showcase header {
padding: 40px;
}
}
</style>
<h2 class="logo">Sample Logo</h2>
<div class="toggle"></div>
</header>
<h2 id='logintext'>Login</h2>
<div class="overlay">
<div class="text">
<form id='form' action="/login" method="POST">
<div class="form-group">
<label id='usernamelabel' for="formGroupExampleInput">Username</label>
<input type="text" class="form-control" id="formGroupExampleInput" name="username">
</div>
<div class="form-group">
<label id='passwordlabel' for="formGroupExampleInput2">Password</label>
<input type="password" class="form-control" id="formGroupExampleInput2" name="password">
</div>
<button id='submit' type="submit" class="btn btn-primary">Sign in</button>
</form>
</div>
</div>
</section>
<div class="menu">
<ul>
<li>Home</li>
<li>Sign Up</li>
<li>Login</li>
</ul>
</div>
<html>
<style>
#text {
font-family: 'Poppins', sans-serif;
font-size: 3em;
font-weight: 800;
color: #fff;
line-height: 2em;
text-transform: uppercase;
font-size: 3em;
margin: 20px 0;
max-width: 700px;
text-align:center;
position: absolute;
left: 50%;
top: 45%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#back
{
display: inline-block;
font-size: 2.5em;
background: #fff;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
justify-content: center;
border: none;
text-align:center;
position: absolute;
left: 50%;
top: 80%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#back:hover
{
letter-spacing: 6px;
}
#email
{
display: inline-block;
font-size: 2.5em;
background: #fff;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
justify-content: center;
border: none;
text-align:center;
position: absolute;
left: 50%;
top: 90%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#email:hover
{
letter-spacing: 6px;
}
</style>
<body>
</body>
</html>

Develop Reference

JavaScript is the programming language of the Web.

Elements shifting when screen is resized - javascript

From what i see you plan your element positioning on display relative or absolute. on the other hand you should build your layout with flexbox

Related

Is there a way to make a script element only activate under specific conditions?

How to hide the navbar on scroll on a horizontal scrolling website?

One Api request for an image works but a copy of it in another HTML file in the same folder doesnt work

How can I get a styled form to be submitted?

Styling is different between pages HTML CSS JS with similar code

Categories

Resources