How can I center the logo and center the menu?

How can I center the logo and center the menu? - javascript

Let's take a look at my first and simple website. I have made the website from the tutorial, but I want to change a few things:
First: the logo "Bukowski" I want to have at center on the white space and (when I shorten the screen and making it bigger all the time at center) ,
Second: I want to have the menu at center, not to the left.
Third: When I make the screen smaller than 996px the black block appears and goes up. I want my menu to collapse below 996px normally but without the black block goes up.
And the forth and last: Take a look please at html code and please tell me what should I add to the
head tags I mead meta-ta
#font-face {
src: url(mistral.ttf);
font-family: mistral;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.logo2 {
font-family: mistral;
font-size: 100px;
margin-left: auto;
margin-right: auto;
}
header {
position: fixed;
width: 100%;
height: 80px;
padding: 0px 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #111;
z-index: 1000;
}
header .logo {
font-family: 'mistral';
color: #fff;
font-size: 40px;
text-decoration: none;
letter-spacing: 2px;
}
header ul {
position: relative;
display: flex;
}
header ul li {
position: relative;
list-style: none;
}
header ul li a {
position: relative;
padding: 5px 10px;
color: #fff;
display: inline-block;
text-decoration: none;
cursor: pointer;
}
header ul li a:hover,
header ul li a.active {
background-color: #205aff;
}
.toggle {
display: none;
}
section {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
min-height: 100vh;
padding: 120px 50px 100px;
text-align: justify;
}
.nag {
text-align: center;
}
section img {
max-width: 400px;
margin-left: 30px;
}
section h2 {
text-align: left;
text-transform: uppercase;
}
section p {
font-size: 18px;
}
section a {
display: inline-block;
padding: 8px 10px;
text-decoration: none;
font-size: 18px;
background: #111;
color: #fff;
margin-top: 20px;
}
section:nth-child(odd) {
position: relative;
justify-content: center;
align-items: center;
background: #111;
color: #fff;
}
#media (max-width: 992px) {
section h2 {
font-size: 1.5em;
text-transform: uppercase;
}
section {
padding: 100px 50px 50px;
flex-direction: column;
justify-content: center;
align-items: center;
display: flex;
}
section img {
margin: 50px 0 0;
max-width: 100%;
}
header ul {
position: absolute;
top: -100%;
left: 0;
width: 100%;
height: calc(100vh - 80px);
padding: 50px 100px;
text-align: center;
overflow: auto;
transition: 0.9s;
background: #111;
flex-direction: column;
opacity: 0;
transform: translateY(-100%);
}
header.active ul {
opacity: 1;
top: 80px;
transform: translateY(0);
}
header ul li a {
margin: 5px 0;
font-size: 24px;
}
.toggle {
display: block;
position: relative;
width: 30px;
height: 30px;
cursor: pointer;
}
.toggle:before {
content: '';
position: absolute;
top: 4px;
width: 100%;
height: 2px;
background: #fff;
z-index: 1;
box-shadow: 0 10px 0 #fff;
transition: 0.5s;
}
.toggle:after {
content: '';
position: absolute;
bottom: 4px;
width: 100%;
height: 2px;
background: #fff;
z-index: 1;
transition: 0.5s;
}
header.active .toggle:before {
top: 14px;
transform: rotate(45deg);
box-shadow: 0 0 0 #fff;
}
header.active .toggle:after {
top: 14px;
transform: rotate(-45deg);
}
}
.nag2 {
font-family: 'mistral';
font-size: 150px;
margin-left: px;
text-align: center;
margin-left: 30px;
}
.nag h2 {
letter-spacing: 30px;
text-decoration: underline;
font-size: 20px;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bukowski</title>
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header id="header">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Service</li>
<li>Portfolio</li>
<li>Team</li>
<li>Contact</li>
</ul>
<div class="toggle" onclick="toggle()"></div>
</header>
<section id="home">
<div>
<div class="nag">
<div class="nag2">Bukowski</div>
<h2>LEATHER WEAR</h2>
</div>
</div>
<img src="fota2.jpg">
</section>
<section id="about">
<div>
<h2>About Us</h2>
<p>Jesteśmy polską firmą odzieżową, zajmującą się dystrybucją, produkcją, oraz projektowaniem odzieży skórzanej i kożuchów . Nasza marka istnieje na rynku od 1992 roku. Firma Bukowski to polska marka dedykowana ludziom ceniącym sobie niebanalny styl,
komfort i wygodę. Oferowane przez nas kolekcje to nawiązanie do nowoczesności zgodne z aktualnymi trendami. Doświadczenie sięgające niemal 30 lat to doskonała gwarancja wysokiej jakości produktów oraz zaufania klienów. Serdecznie zapraszamy do
nabywania produktów w naszych punktach sprzedaży.</p>
</div>
</section>
<section id="services">
<div>
<h2>Our Service</h2>
<p>Wychodząc także naprzeciw oczekiwaniom naszych klientów, poza standardowym asortymentem oferujemy szycie na miarę. W naszych punktach sprzedaży posiadamy wykwalifikowany personel, który może pobrać wymiary od indywidualych klienów. Dzięki temu u
nas każdy klient może znaleźć coś dla siebie. Również oferujemy pomoc w zakresie skracania, zwężania, renowacji bądź wymiany poszczególnych elementów w produktach u nas zakupionych. Dzięki temu możemy przedłużyć użyteczność i żywotność naszych
produktów dzięki czemu możecie Państwo cieszych się naszyi produktami przez długie lata.
</p>
</div>
</section>
<section id="portfolio">
<div>
<h2>Our Recent Work</h2>
<p>Od niemal 30 lat obecności na rynku, nieustannie dokładaliśmy wszelkich starań, aby nasze produkty cechowała najwyższa jakość. Ostatnio jeszcze bardziej poszerzyliśmy nasz asortyment o nowe produkty. Posiadamy ponad sto różnych wzorów w różnych
kolorach i nieustannie pracujemy nad poszerzeniem naszej oferty. W ostatnich latach nasz asortyment zwiąkszył się kilkukrotnie. </p>
</div>
</section>
<section id="team">
<div>
<h2>Our Expert</h2>
<p>Posiadamy wysoce wykwalifikowaną kadrę pracowniczą, która jest jednym z podstawowych gwarantów uzyskania efektywnych wyników naszej firmy. W pierwszej kolejności zapewniamy naszym pracownikom odpowiedni poziom przygotowania w zakresie krojenia,
szycia, a także sprzedaży finalnych produktów w naszych punktach sprzedaży. Nasza kadra jest do Państwa dyspozycji oraz dołoży wszelkich starań, aby nasi klienci mogli cieszyć się z nabytych u nas produktów przez długie lata. Wieloletnie doświadczenie,
które nabyliśmy przez dziesiątki lat istnienia na rynku, pomaga nam wyjść naprzeciw potrzebom najbardziej wymagających klientów.
</p>
</div>
</section>
<section id="contact">
<div>
<h2>Contact Us</h2>
<p>
Siedziba firmy: <br><br> Rogoźnik os. Za Torem 20a<br> 34-471 Ludźmierz<br><br> tel 48 18 265 56 53<br> tel./fax: 48 18 265 53 05<br> kom. 48 603 607 832<br> kom. 48 604 971 789<br> kom. 48 695 069 380<br><br> e-mail: bukowski#interia.eu
</p>
</div>
</section>
<script type="text/javascript">
function toggle() {
var header = document.getElementById("header");
header.classList.toggle('active');
}
</script>
</body>
</html>

Related

How can I place a colored box behind the slideshow?

I tried to do it with the .myslides-colorbox on the html/css. The background always seems to cut of at the edge of the top of the slideshow. I want the slide-show to be over a big box something like this is what I want to do with the slideshow. What do I have to add or place differently to make this happen? The controller represent my slideshow
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n >= x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
*{
margin: 0;
padding: 0;
font-family: sans-serif;
}
.container {
width: 100%;
min-height: 100vh;
/* background-color: red; */
padding-left: 8%;
/* padding-right: 8%; */
box-sizing: border-box;
overflow: hidden;
}
/* Navigation bar section*/
.navbar {
width: 100%;
display: flex;
align-items: center;
}
.logo {
width: 150px;
cursor: pointer;
margin: 30px;
}
#menu-icon {
width: 25px;
cursor: pointer;
}
nav {
flex: 1;
text-align: right;
}
nav ul li {
list-style: none;
display: inline-block;
margin-right: 30px;
}
nav ul li a {
text-decoration: none;
color: #000;
font-size: 20px;
}
nav ul li a:hover {
color:blue
}
.row {
display: flex;
justify-content: space-between;
align-items: center;
margin: 100px 0;
}
.col-1 {
flex-basis: 40%;
position: relative;
margin-left: 50px;
}
.col-1 h2{
font-size: 54px;
}
.col-1 h3{
font-size: 30px;
color: #707070;
font-weight: 100;
margin: 20px 0 10px;
}
.col-1 p {
font-size: 16px;
color: #b7b7b7;
font-weight: 100;
}
.col-1 h4{
margin: 30px 0;
font-size: 20px;
}
button {
width: 140px;
border: 0;
padding: 12px 10px;
outline: none;
color: white;
background: linear-gradient(to right, #fb5283, #ff3527);
border-radius: 6px;
cursor: pointer;
/* transition: width 0.5s; */
}
/* button i {
width: 30px;
display: none;
} */
button:hover {
width: 160px;
background: linear-gradient(to right, #ff3527, #fb5283);
}
.col-1::after {
content: '';
width: 10px;
height: 57%;
background: linear-gradient(#fb5283, #ff3527);
position: absolute;
left: -40px;
top: 8px;
}
.col-2 {
position: relative;
flex-basis: 60%;
display: flex;
align-items: center;
margin-left: 200px;
}
.mySlides-colorBox {
position:sticky;
top: 0;
right: 0;
background: linear-gradient(#fb5283, #ff3527);
/* border-radius: 20px 0 0 20px; */
height: 100%;
width: 80%;
z-index: -1;
transform: translate(15);
}
.mySlides {display:none;}
.box{
width: 800px;
height: 400px;
border: 5px solid blue;
margin: 20px auto;
position: relative;
}
<!DOCTYPE html>
<html lang="en">
<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">
<script src="https://kit.fontawesome.com/15456887b7.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="index.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="navbar">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTU3DPk4gCVZ0g40k0xiOjiwcqGY9MJkY4quA&usqp=CAU" class="logo">
<nav>
<ul>
<li>Home</li>
<li>Auction</li>
<li>Services</li>
<li>Proceedings</li>
<li>Contact</li>
</ul>
</nav>
<i class="fa-solid fa-bars" id="menu-icon"></i>
</div>
<div class="row">
<div class="col-1">
<h2>Come see our wonderful things!</h2>
<h3>Finnspeed Oy on perustettu vuonna 1995. Se on osakeyhtiö, jonka kotipaikka on Järvenpää, ja pääasiallinen toimiala Autoliike. Yhtiön toimitusjohtaja on Keijo Tapani Lehtonen.
Yhtiön Finnspeed Oy liikevaihto oli 46 tuhatta ja tilikauden tulos 13 tuhatta. Liikevaihto nousi 58,6%. Liikevoittoprosentti oli 37%. Tiedot perustuvat yhtiön viimeisimpään tilinpäätökseen vuodelta 2021.</h3>
<p>more info....</p>
<h4>Free entry</h4>
<button type="button">Button <i class="fa-solid fa-gavel"></i></button>
</div>
<div class="col-2">
<div class="image-container">
<img class="mySlides active" src="https://d1yb6h7rvkcay2.cloudfront.net/f6/d7/91/b0/c4/a8/41/a1/a4/da/02/38/c8/de/dd/6c/f6d791b0-c4a8-41a1-a4da-0238c8dedd6c-large::r:0.jpg" style="width:50%">
<img class="mySlides" src="https://d1yb6h7rvkcay2.cloudfront.net/aa/8e/9c/02/aa/1d/48/f4/82/a1/63/f1/fa/c8/bb/52/aa8e9c02-aa1d-48f4-82a1-63f1fac8bb52-large::r:0.jpg" style="width:50%">
<img class="mySlides" src="https://d1yb6h7rvkcay2.cloudfront.net/98/5f/b3/11/a1/b5/49/0e/b4/71/82/1e/a4/c7/18/60/985fb311-a1b5-490e-b471-821ea4c71860-large::r:0.jpg" style="width:50%">
<img class="mySlides" src="https://d1yb6h7rvkcay2.cloudfront.net/1d/03/8b/7c/66/36/45/19/98/b2/17/1a/fc/be/b9/e5/1d038b7c-6636-4519-98b2-171afcbeb9e5-large::r:0.jpg" style="width:50%">
<button class="mySlides-leftButton" onclick="plusDivs(-1)">❮</button>
<button class="mySlides-rightButton" onclick="plusDivs(1)">❯</button>
<div class="mySlides-colorBox"></div>
</div>
</div>
</div>
</div>
<div class="box">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>
</div>
<script src="index.js"></script>
</body>
</html>

my popup should show when score = 6, but i cant make it work

I want to make the popup show when score is equal to 6. and then when you press the button the page should reload. But i can't seem to make it work. i tried the function with the if-statement but it doens't work. so i don't know what to do or how to do it. so i would enjoy it if someone could help me out :)
//Function for the dropdown content
function dropdownTips() {
document.getElementById("mydropdown").classList.toggle("show");
}
window.addEventListener("click", function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdowncontent");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
});
//the game
// Declares global variables
let score = 0,
cardToMatch = null;
// Calls `flipCard` on any click
window.addEventListener("click", flipCard);
// Defines the click listener
function flipCard(event) {
// Identifies the card where the click happened
const card = event.target.closest(".card");
// Ignores irrelevant/invalid clicks
if (!card || card.classList.contains("open")) {
return;
}
// A valid click always opens the card
card.classList.add("open");
// If this is the 1st card of 2, remember it
if (cardToMatch === null) {
cardToMatch = card;
} else {
// If it's the 2nd card, compare types
// If they match...
if (card.dataset.type === cardToMatch.dataset.type) {
// ...Increment score and show it in the DOM
updateScoreDisplay(++score);
}
// If they don't...
else {
// ...Flip both cards back over
setTimeout((first, second) => {
first.classList.remove("open");
second.classList.remove("open");
}, 3000, card, cardToMatch);
// Either way, next click will be the 1st of 2
}
cardToMatch = null;
}
}
function updateScoreDisplay(newScore) {
// Syncs the user-displayed value w/ score
const element = document.querySelector(".score span");
element.textContent = newScore;
}
// popup section
let popup = document.querySelector(".popup");
popup = function() {
if (score === 6) {
popup.style.display ="block";
console.log("hello");
}
}
* {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
}
header {
background-color:#00005e;
height: 50px;
position: relative;
}
header h1 {
color: white;
position: absolute;
top: 10%;
left: 38%;
right: 40%;
width: 355px;
}
/*The 'tips?' button and the drop down content*/
header button {
display: inline-flex;
position:absolute;
align-items: center;
right: 2%;
top: 15%;
bottom: 15%;
padding: 10px 20px;
font-size: 20px;
background-color:white;
color: #00005e;
border-radius: 10px;
cursor: pointer;
border-color: transparent;
}
header button:hover {
opacity: 80%;
}
.dropdowncontent {
display: none;
position: absolute;
right: 0%;
top: 100%;
background-color:#010169;
min-width: 160px;
max-width: 400px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.808);
border-bottom-left-radius: 20px;
z-index: 100;
}
.dropdowncontent li {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.advise{
font-size: 19px;
}
.passwordtips {
font-size: 30px;
left: 20%;
}
.show {
display:block;
}
/*The link in the dropdowncontent*/
a {
text-decoration: underline;
color: white;
}
a:hover {
cursor: pointer;
}
/*The score counter*/
.score {
color: #01016e;
display: flex;
justify-content: center;
margin: 10px;
font-size: 30px;
}
/*The game section*/
.sectionOne {
max-width: 1100px;
height: 550px;
display: flex;
justify-content: space-around;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
border-radius: 7px;
border-color: #00005e;
border-style: solid;
border-width: 5px;
position: relative;
}
/*The sections content*/
.wrapper {
width: 99%;
height: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 183px;
margin-top: 7px;
}
.card{
background-color: #01016e;
color: white;
margin: 10px 10px;
height: 150px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
font-size: 0;
border-radius: 5px;
}
.card h2{
padding: 2px;
transform: scale(-1,1);
}
.card:hover {
cursor: pointer;
}
.open{
animation: flip .5s;
animation-fill-mode: forwards;
transform-style: preserve-3d;
}
#keyframes flip {
from {
background: #00005e;
font-size: 0;
}
to{
background: rgb(20, 73, 185);
font-size:17px;
transform: rotateY( 180deg );
}
}
/* pop up section */
.popup {
position: absolute;
background-color: white;
width: 700px;
height: 500px;
z-index: 100;
right: 50.5vh;
top: 14%;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.808);
border-radius: 8px;
display: none;
}
.congrats {
position: relative;
display: flex;
justify-content: center;
height: 40px;
top: 20%;
color: #00005e;
font-size: 40px;
}
.matches {
position: relative;
height: 40px;
top: 35%;
color: #00005e;
display: flex;
justify-content: center;
font-size: 30px;
}
.playAgain {
position: absolute;
height: 40px;
width: 150px;
top: 65%;
left: 40%;
cursor: pointer;
color: white;
background-color: #00005e;
border-style: none;
font-size: 20px;
border-radius: 5px;
}
/*The 'DID YOU KNOW' over the ticker*/
.facts {
display: flex;
justify-content: space-around;
margin-top: 15px;
font-size: 20px;
color: #00005e;
}
/*The facts ticker*/
.tcontainer {
max-width: 1100px;
margin-top: 20px;
overflow: hidden;
margin-left: auto;
margin-right: auto;
border-radius: 5px;
z-index: 1000;
}
.ticker-wrap {
width: 100%;
padding-left: 100%;
background-color: #00005e;
}
#keyframes ticker {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-100%, 0, 0); }
}
.ticker-move {
display: inline-block;
white-space: nowrap;
padding-right: 100%;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: ticker;
animation-duration: 55s;
}
.ticker-move:hover{
animation-play-state: paused;
}
.ticker-item{
display: inline-block;
padding-top: 5px;
padding-bottom: 2px;
padding-right: 3em;
color: white;
min-height: 40px;
font-size: 25px;
}
/*The pause button for the ticker*/
.pause {
display: flex;
justify-content: center;
margin-top: 10px;
}
.pausebutton {
padding: 5px;
border-radius: 3px;
background-color: #00005e;
color: white;
border-style: none;
cursor: pointer;
}
.pausebutton:hover {
background-color: #3c3b6e;
}
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#700&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<title>The Password Game</title>
</head>
<body>
<header>
<h1>THE PASSWORD GAME</h1>
<div class="dropdown">
<button onclick="dropdownTips()" class="dropbtn">TIPS?</button>
<div class="dropdowncontent" id="mydropdown" >
<ul>
<li class="passwordtips">Tips for making strong passwords: </li>
<li class="advise">1. Use 16 characters or more (use both uppercase and lowercase letters, number and symbols.)</li>
<li class="advise">2. Never use the same password twice.</li>
<li class="advise">3. Use a password manager.</li>
<li class="advise">4. Don't write your passwords down on paper.</li>
<li class="advise">5. Don't share your passwords with others.</li>
<li class="advise">6. Change your password after a breach.</li>
<li class="advise">7. Sign up for data breach notifications. (like haveibeenpwned.com).</li>
<li class="advise">8. Check your accounts regularly for any suspicious activity. </li>
</ul>
</div>
</div>
</header>
<div class="score">Score:<span> 0</span></div>
<section class="sectionOne">
<div class="wrapper" id="card-deck">
<div class="card" data-type="1"><h2>What information should you NEVER use in a password?</h2></div>
<div id="answerSix" class="card" data-type="6"><h2>1 log in</h2></div>
<div id="cardThree" class="card" data-type="3"><h2>When should you ALWAYS change your password?</h2></div>
<div id="anserFive" class="card" data-type="5"><h2>suspicious activity</h2></div>
<div id="cardTwo" class="card" data-type="2"><h2>Who is it okay to tell your password to?</h2></div>
<div id="answerFour" class="card" data-type="4"><h2>16</h2></div>
<div id="answerThree" class="card" data-type="3"><h2>After a data breach</h2></div>
<div id="answerTwo" class="card" data-type="2"><h2>No one</h2></div>
<div id="CardSix" class="card" data-type="6"><h2>For how many log ins is it okay to use the same password?</h2></div>
<div id="cardFour" class="card" data-type="4"><h2>How many characters should you AT LEAST use in a password?</h2></div>
<div class="card" data-card="firstSet" data-type="1"><h2>Name and Birthday</h2></div>
<div id="cardFive" class="card" data-type="5"><h2>What should you regularly look for in your accounts?</h2></div>
</div>
</section>
<section class="popup">
<h3 class="congrats">Congratulations!</h3>
<h3 class="matches">You got 6/6 matches</h3>
<button class="playAgain">Play again?</button>
</section>
<div class="facts">
<h2>DID YOU KNOW?</h2>
</div>
<div class="tcontainer"><div class="ticker-wrap"><div class="ticker-move">
<div class="ticker-item">There is a hacker attack every 39 seconds.</div>
<div class="ticker-item">90% of passwords can be cracked in less than 6 hours.</div>
<div class="ticker-item">80% of hacking related breaches are linked to insufficient passwords.</div>
<div class="ticker-item">59% use their name or birthday in their password.</div>
<div class="ticker-item">6.850.000 passwords are getting hacked each day.</div>
</div></div></div>
<div class="pause">
<p>Hold your mouse over to pause</p>
</div>
<script src="javascript/javascript.js" ></script>
</body>
</html>

you have this code which doesnt run when score is incremented
popup = function() {
if (score === 6) {
popup.style.display ="block";
console.log("hello");
}
}
so i've created a function to check the score like this
let popup = document.querySelector("#popup");
function showPopup() {
if (score === 6) {
popup.style.display ="block";
console.log("hello");
}
}
And call the showPopup function when score is added like this
if (card.dataset.type === cardToMatch.dataset.type) {
// ...Increment score and show it in the DOM
updateScoreDisplay(++score);
showPopup();
}
full code :
//Function for the dropdown content
let popup = document.querySelector("#popup");
function showPopup() {
if (score > 0) {
popup.style.display ="block";
console.log("hello");
}
}
function dropdownTips() {
document.getElementById("mydropdown").classList.toggle("show");
}
window.addEventListener("click", function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdowncontent");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
});
//the game
// Declares global variables
let score = 0,
cardToMatch = null;
// Calls `flipCard` on any click
window.addEventListener("click", flipCard);
// Defines the click listener
function flipCard(event) {
// Identifies the card where the click happened
const card = event.target.closest(".card");
// Ignores irrelevant/invalid clicks
if (!card || card.classList.contains("open")) {
return;
}
// A valid click always opens the card
card.classList.add("open");
// If this is the 1st card of 2, remember it
if (cardToMatch === null) {
cardToMatch = card;
} else {
// If it's the 2nd card, compare types
// If they match...
if (card.dataset.type === cardToMatch.dataset.type) {
// ...Increment score and show it in the DOM
updateScoreDisplay(++score);
showPopup();
}
// If they don't...
else {
// ...Flip both cards back over
setTimeout((first, second) => {
first.classList.remove("open");
second.classList.remove("open");
}, 3000, card, cardToMatch);
// Either way, next click will be the 1st of 2
}
cardToMatch = null;
}
}
function updateScoreDisplay(newScore) {
// Syncs the user-displayed value w/ score
const element = document.querySelector(".score span");
element.textContent = newScore;
}
* {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
}
header {
background-color:#00005e;
height: 50px;
position: relative;
}
header h1 {
color: white;
position: absolute;
top: 10%;
left: 38%;
right: 40%;
width: 355px;
}
/*The 'tips?' button and the drop down content*/
header button {
display: inline-flex;
position:absolute;
align-items: center;
right: 2%;
top: 15%;
bottom: 15%;
padding: 10px 20px;
font-size: 20px;
background-color:white;
color: #00005e;
border-radius: 10px;
cursor: pointer;
border-color: transparent;
}
header button:hover {
opacity: 80%;
}
.dropdowncontent {
display: none;
position: absolute;
right: 0%;
top: 100%;
background-color:#010169;
min-width: 160px;
max-width: 400px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.808);
border-bottom-left-radius: 20px;
z-index: 100;
}
.dropdowncontent li {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.advise{
font-size: 19px;
}
.passwordtips {
font-size: 30px;
left: 20%;
}
.show {
display:block;
}
/*The link in the dropdowncontent*/
a {
text-decoration: underline;
color: white;
}
a:hover {
cursor: pointer;
}
/*The score counter*/
.score {
color: #01016e;
display: flex;
justify-content: center;
margin: 10px;
font-size: 30px;
}
/*The game section*/
.sectionOne {
max-width: 1100px;
height: 550px;
display: flex;
justify-content: space-around;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
border-radius: 7px;
border-color: #00005e;
border-style: solid;
border-width: 5px;
position: relative;
}
/*The sections content*/
.wrapper {
width: 99%;
height: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 183px;
margin-top: 7px;
}
.card{
background-color: #01016e;
color: white;
margin: 10px 10px;
height: 150px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
font-size: 0;
border-radius: 5px;
}
.card h2{
padding: 2px;
transform: scale(-1,1);
}
.card:hover {
cursor: pointer;
}
.open{
animation: flip .5s;
animation-fill-mode: forwards;
transform-style: preserve-3d;
}
#keyframes flip {
from {
background: #00005e;
font-size: 0;
}
to{
background: rgb(20, 73, 185);
font-size:17px;
transform: rotateY( 180deg );
}
}
/* pop up section */
#popup {
position: absolute;
background-color: white;
width: 700px;
height: 500px;
z-index: 100;
right: 50.5vh;
top: 14%;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.808);
border-radius: 8px;
display: none;
}
.congrats {
position: relative;
display: flex;
justify-content: center;
height: 40px;
top: 20%;
color: #00005e;
font-size: 40px;
}
.matches {
position: relative;
height: 40px;
top: 35%;
color: #00005e;
display: flex;
justify-content: center;
font-size: 30px;
}
.playAgain {
position: absolute;
height: 40px;
width: 150px;
top: 65%;
left: 40%;
cursor: pointer;
color: white;
background-color: #00005e;
border-style: none;
font-size: 20px;
border-radius: 5px;
}
/*The 'DID YOU KNOW' over the ticker*/
.facts {
display: flex;
justify-content: space-around;
margin-top: 15px;
font-size: 20px;
color: #00005e;
}
/*The facts ticker*/
.tcontainer {
max-width: 1100px;
margin-top: 20px;
overflow: hidden;
margin-left: auto;
margin-right: auto;
border-radius: 5px;
z-index: 1000;
}
.ticker-wrap {
width: 100%;
padding-left: 100%;
background-color: #00005e;
}
#keyframes ticker {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-100%, 0, 0); }
}
.ticker-move {
display: inline-block;
white-space: nowrap;
padding-right: 100%;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: ticker;
animation-duration: 55s;
}
.ticker-move:hover{
animation-play-state: paused;
}
.ticker-item{
display: inline-block;
padding-top: 5px;
padding-bottom: 2px;
padding-right: 3em;
color: white;
min-height: 40px;
font-size: 25px;
}
/*The pause button for the ticker*/
.pause {
display: flex;
justify-content: center;
margin-top: 10px;
}
.pausebutton {
padding: 5px;
border-radius: 3px;
background-color: #00005e;
color: white;
border-style: none;
cursor: pointer;
}
.pausebutton:hover {
background-color: #3c3b6e;
}
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#700&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<title>ok</title>
</head>
<body>
<header>
<h1>THE PASSWORD GAME</h1>
<div class="dropdown">
<button onclick="dropdownTips()" class="dropbtn">TIPS?</button>
<div class="dropdowncontent" id="mydropdown" >
<ul>
<li class="passwordtips">Tips for making strong passwords: </li>
<li class="advise">1. Use 16 characters or more (use both uppercase and lowercase letters, number and symbols.)</li>
<li class="advise">2. Never use the same password twice.</li>
<li class="advise">3. Use a password manager.</li>
<li class="advise">4. Don't write your passwords down on paper.</li>
<li class="advise">5. Don't share your passwords with others.</li>
<li class="advise">6. Change your password after a breach.</li>
<li class="advise">7. Sign up for data breach notifications. (like haveibeenpwned.com).</li>
<li class="advise">8. Check your accounts regularly for any suspicious activity. </li>
</ul>
</div>
</div>
</header>
<div class="score">Score:<span> 0</span></div>
<section class="sectionOne">
<div class="wrapper" id="card-deck">
<div class="card" data-type="1"><h2>What information should you NEVER use in a password?</h2></div>
<div id="answerSix" class="card" data-type="6"><h2>1 log in</h2></div>
<div id="cardThree" class="card" data-type="3"><h2>When should you ALWAYS change your password?</h2></div>
<div id="anserFive" class="card" data-type="5"><h2>suspicious activity</h2></div>
<div id="cardTwo" class="card" data-type="2"><h2>Who is it okay to tell your password to?</h2></div>
<div id="answerFour" class="card" data-type="4"><h2>16</h2></div>
<div id="answerThree" class="card" data-type="3"><h2>After a data breach</h2></div>
<div id="answerTwo" class="card" data-type="2"><h2>No one</h2></div>
<div id="CardSix" class="card" data-type="6"><h2>For how many log ins is it okay to use the same password?</h2></div>
<div id="cardFour" class="card" data-type="4"><h2>How many characters should you AT LEAST use in a password?</h2></div>
<div class="card" data-card="firstSet" data-type="1"><h2>Name and Birthday</h2></div>
<div id="cardFive" class="card" data-type="5"><h2>What should you regularly look for in your accounts?</h2></div>
</div>
</section>
<section id="popup">
<h3 class="congrats">Congratulations!</h3>
<h3 class="matches">You got 6/6 matches</h3>
<button class="playAgain">Play again?</button>
</section>
<div class="facts">
<h2>DID YOU KNOW?</h2>
</div>
<div class="tcontainer"><div class="ticker-wrap"><div class="ticker-move">
<div class="ticker-item">There is a hacker attack every 39 seconds.</div>
<div class="ticker-item">90% of passwords can be cracked in less than 6 hours.</div>
<div class="ticker-item">80% of hacking related breaches are linked to insufficient passwords.</div>
<div class="ticker-item">59% use their name or birthday in their password.</div>
<div class="ticker-item">6.850.000 passwords are getting hacked each day.</div>
</div></div></div>
<div class="pause">
<p>Hold your mouse over to pause</p>
</div>
</body>
</html>
And i changed the popup section to id instead of class like this
<section id="popup">

This should work:
//Function for the dropdown content
function dropdownTips() {
document.getElementById("mydropdown").classList.toggle("show");
}
window.addEventListener("click", function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdowncontent");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
});
//the game
// Declares global variables
let score = 0,
cardToMatch = null;
// Calls `flipCard` on any click
window.addEventListener("click", flipCard);
// Defines the click listener
function flipCard(event) {
// Identifies the card where the click happened
const card = event.target.closest(".card");
// Ignores irrelevant/invalid clicks
if (!card || card.classList.contains("open")) {
return;
}
// A valid click always opens the card
card.classList.add("open");
// If this is the 1st card of 2, remember it
if (cardToMatch === null) {
cardToMatch = card;
} else {
// If it's the 2nd card, compare types
// If they match...
if (card.dataset.type === cardToMatch.dataset.type) {
// ...Increment score and show it in the DOM
updateScoreDisplay(++score);
}
// If they don't...
else {
// ...Flip both cards back over
setTimeout((first, second) => {
first.classList.remove("open");
second.classList.remove("open");
}, 3000, card, cardToMatch);
// Either way, next click will be the 1st of 2
}
cardToMatch = null;
}
}
function updateScoreDisplay(newScore) {
// Syncs the user-displayed value w/ score
const element = document.querySelector(".score span");
element.textContent = newScore;
}
// popup section
setInterval(function() {if (score==6) {document.getElementById("popup").style.display = "block";}},1000);
* {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
}
header {
background-color:#00005e;
height: 50px;
position: relative;
}
header h1 {
color: white;
position: absolute;
top: 10%;
left: 38%;
right: 40%;
width: 355px;
}
/*The 'tips?' button and the drop down content*/
header button {
display: inline-flex;
position:absolute;
align-items: center;
right: 2%;
top: 15%;
bottom: 15%;
padding: 10px 20px;
font-size: 20px;
background-color:white;
color: #00005e;
border-radius: 10px;
cursor: pointer;
border-color: transparent;
}
header button:hover {
opacity: 80%;
}
.dropdowncontent {
display: none;
position: absolute;
right: 0%;
top: 100%;
background-color:#010169;
min-width: 160px;
max-width: 400px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.808);
border-bottom-left-radius: 20px;
z-index: 100;
}
.dropdowncontent li {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.advise{
font-size: 19px;
}
.passwordtips {
font-size: 30px;
left: 20%;
}
.show {
display:block;
}
/*The link in the dropdowncontent*/
a {
text-decoration: underline;
color: white;
}
a:hover {
cursor: pointer;
}
/*The score counter*/
.score {
color: #01016e;
display: flex;
justify-content: center;
margin: 10px;
font-size: 30px;
}
/*The game section*/
.sectionOne {
max-width: 1100px;
height: 550px;
display: flex;
justify-content: space-around;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
border-radius: 7px;
border-color: #00005e;
border-style: solid;
border-width: 5px;
position: relative;
}
/*The sections content*/
.wrapper {
width: 99%;
height: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 183px;
margin-top: 7px;
}
.card{
background-color: #01016e;
color: white;
margin: 10px 10px;
height: 150px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
font-size: 0;
border-radius: 5px;
}
.card h2{
padding: 2px;
transform: scale(-1,1);
}
.card:hover {
cursor: pointer;
}
.open{
animation: flip .5s;
animation-fill-mode: forwards;
transform-style: preserve-3d;
}
#keyframes flip {
from {
background: #00005e;
font-size: 0;
}
to{
background: rgb(20, 73, 185);
font-size:17px;
transform: rotateY( 180deg );
}
}
/* pop up section */
.popup {
position: absolute;
background-color: white;
width: 700px;
height: 500px;
z-index: 100;
right: 50.5vh;
top: 14%;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.808);
border-radius: 8px;
display: none;
}
.congrats {
position: relative;
display: flex;
justify-content: center;
height: 40px;
top: 20%;
color: #00005e;
font-size: 40px;
}
.matches {
position: relative;
height: 40px;
top: 35%;
color: #00005e;
display: flex;
justify-content: center;
font-size: 30px;
}
.playAgain {
position: absolute;
height: 40px;
width: 150px;
top: 65%;
left: 40%;
cursor: pointer;
color: white;
background-color: #00005e;
border-style: none;
font-size: 20px;
border-radius: 5px;
}
/*The 'DID YOU KNOW' over the ticker*/
.facts {
display: flex;
justify-content: space-around;
margin-top: 15px;
font-size: 20px;
color: #00005e;
}
/*The facts ticker*/
.tcontainer {
max-width: 1100px;
margin-top: 20px;
overflow: hidden;
margin-left: auto;
margin-right: auto;
border-radius: 5px;
z-index: 1000;
}
.ticker-wrap {
width: 100%;
padding-left: 100%;
background-color: #00005e;
}
#keyframes ticker {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-100%, 0, 0); }
}
.ticker-move {
display: inline-block;
white-space: nowrap;
padding-right: 100%;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: ticker;
animation-duration: 55s;
}
.ticker-move:hover{
animation-play-state: paused;
}
.ticker-item{
display: inline-block;
padding-top: 5px;
padding-bottom: 2px;
padding-right: 3em;
color: white;
min-height: 40px;
font-size: 25px;
}
/*The pause button for the ticker*/
.pause {
display: flex;
justify-content: center;
margin-top: 10px;
}
.pausebutton {
padding: 5px;
border-radius: 3px;
background-color: #00005e;
color: white;
border-style: none;
cursor: pointer;
}
.pausebutton:hover {
background-color: #3c3b6e;
}
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#700&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<title>The Password Game</title>
</head>
<body>
<header>
<h1>THE PASSWORD GAME</h1>
<div class="dropdown">
<button onclick="dropdownTips()" class="dropbtn">TIPS?</button>
<div class="dropdowncontent" id="mydropdown" >
<ul>
<li class="passwordtips">Tips for making strong passwords: </li>
<li class="advise">1. Use 16 characters or more (use both uppercase and lowercase letters, number and symbols.)</li>
<li class="advise">2. Never use the same password twice.</li>
<li class="advise">3. Use a password manager.</li>
<li class="advise">4. Don't write your passwords down on paper.</li>
<li class="advise">5. Don't share your passwords with others.</li>
<li class="advise">6. Change your password after a breach.</li>
<li class="advise">7. Sign up for data breach notifications. (like haveibeenpwned.com).</li>
<li class="advise">8. Check your accounts regularly for any suspicious activity. </li>
</ul>
</div>
</div>
</header>
<div class="score">Score:<span> 0</span></div>
<section class="sectionOne">
<div class="wrapper" id="card-deck">
<div class="card" data-type="1"><h2>What information should you NEVER use in a password?</h2></div>
<div id="answerSix" class="card" data-type="6"><h2>1 log in</h2></div>
<div id="cardThree" class="card" data-type="3"><h2>When should you ALWAYS change your password?</h2></div>
<div id="anserFive" class="card" data-type="5"><h2>suspicious activity</h2></div>
<div id="cardTwo" class="card" data-type="2"><h2>Who is it okay to tell your password to?</h2></div>
<div id="answerFour" class="card" data-type="4"><h2>16</h2></div>
<div id="answerThree" class="card" data-type="3"><h2>After a data breach</h2></div>
<div id="answerTwo" class="card" data-type="2"><h2>No one</h2></div>
<div id="CardSix" class="card" data-type="6"><h2>For how many log ins is it okay to use the same password?</h2></div>
<div id="cardFour" class="card" data-type="4"><h2>How many characters should you AT LEAST use in a password?</h2></div>
<div class="card" data-card="firstSet" data-type="1"><h2>Name and Birthday</h2></div>
<div id="cardFive" class="card" data-type="5"><h2>What should you regularly look for in your accounts?</h2></div>
</div>
</section>
<section class="popup" id="popup">
<h3 class="congrats">Congratulations!</h3>
<h3 class="matches">You got 6/6 matches</h3>
<button class="playAgain">Play again?</button>
</section>
<div class="facts">
<h2>DID YOU KNOW?</h2>
</div>
<div class="tcontainer"><div class="ticker-wrap"><div class="ticker-move">
<div class="ticker-item">There is a hacker attack every 39 seconds.</div>
<div class="ticker-item">90% of passwords can be cracked in less than 6 hours.</div>
<div class="ticker-item">80% of hacking related breaches are linked to insufficient passwords.</div>
<div class="ticker-item">59% use their name or birthday in their password.</div>
<div class="ticker-item">6.850.000 passwords are getting hacked each day.</div>
</div></div></div>
<div class="pause">
<p>Hold your mouse over to pause</p>
</div>
<script src="javascript/javascript.js" ></script>
</body>
</html>
The reason why your code wasn't working was because the code you had only checked if the score was 6 at the start of the game. I fixed this by using the function setInterval which checked if the user had finished the game every second.
More Explanations
If you would like to learn more about the setInterval function, visit:
https://www.w3schools.com/jsref/met_win_setinterval.asp

Preloader javascript + css + html

I wanted to add a preloader on my website, but when i add it is put in the body, i want when i reload the page to show the preloader first and after show my page. What can i add, or change? There are my full code. (sorry for my bad english). I hope you understand what i mean and you can try to resolve my problem and give me any advice.
var percent = document.querySelector('.percent');
var progress = document.querySelector('.progress');
var text = document.querySelector ('.text');
var count = 4;
var per = 16;
var loading = setInterval(animate, 50);
function animate() {
if(count == 100 && per == 400) {
percent.classList.add('.text-blink');
text.style.display = 'block';
clearInterval(loading);
} else {
per = per + 4;
count = count + 1;
progress.style.width = per + "px";
percent.textContent = count + "%";
}
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght#1,900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Itim&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Poppins:wght#800&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
font-family: 'Gloria Hallelujah', cursive;
--text-primary: #b6b6b6;
--text-secondary: #ececec;
--bg-primary: #23232e;
--bg-secondary: #141418;
}
body {
font-family: 'Gloria Hallelujah', cursive;
background-color: #363535;
display: flex;
}
.loading {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: visible;
}
.percent {
color: #999;
font-size: 100px;
font-weight: 400;
text-align: center;
margin-bottom: 15px;
}
.text {
position: fixed;
left: 160px;
color: #fdb5ca;
font-size: 15px;
letter-spacing: 1px;
line-height: 21px;
display: none;
}
.text-blink {
animation: blink .7s ease-in-out .1s;
}
#keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: .2;
}
100% {
opacity: 1;
}
}
.progress-bar {
width: 406px;
height: 21px;
background: #111;
border-radius: 13px;
padding: 3px;
box-sizing: border-box;
}
.progress {
width: 200px;
height: 15px;
background: #f60d54;
border-radius: 13px;
}
.main {
margin-left: 5rem; /* 1 rem = 16 px => 5 rem = 80px */
padding: 1rem;
max-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow = hidden;
}
body::-webkit-scrollbar {
width: 0.25rem;
}
body::-webkit-scrollbar-track {
background: #757d77;
}
body::-webkit-scrollbar-thumb {
background: #c2c2c2;
}
.navbar {
width: 5rem;
height: 100vh;
position: fixed;
background-color: #2e2e2e;
}
.navbar-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
margin-top: 225px;
}
.nav-item {
font-size: 30px;
text-align: center;
width: 85%;
padding: 10px
}
ul {
list-style-type: none;
}
li a {
display: block;
text-decoration:0;
color:#b6b8ba;
}
.nav-link {
align-items: center;
height: 3rem;
text-decoration: none;
}
.secnav-item {
font-size: 30px;
text-align: center;
padding: 5px;
width: 85%
}
.secnavbar {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
margin-top: 50px;
}
.imgnav {
margin-top: 10px;
margin-left: 27px;
position: absolute;
}
.copy {
color: white;
position: absolute;
margin-left: 55px;
}
.contact-section {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.contact-info {
position: relative;
color: #fff;
max-width: 500px;
line-height: 95px;
padding-left: 50px;
font-size: 18px;
top: 50px;
}
.contact-info i {
margin-right: 20px;
font-size: 25px;
}
.contact-form {
max-width:700px;
margin-right: 50px;
position: relative;
top: 50px;
left: 100px;
}
.contact-info, .contact-form {
flex: 1;
}
.contact-form h2 {
color: #fff;
text-align: center;
font-size: 35px;
text-transform: uppercase;
margin-bottom: 30px;
font-family: 'Poppins', sans-serif;
}
.contact-form .text-box {
background: #b8b8b8;
color: #fff;
border: none;
width: calc(50% - 10px);
height: 50px;
padding: 12px;
font-size: 15px;
border-radius: 5px;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
margin-bottom: 20px;
opacity: 0.9;
}
.contact-form .text-box:first-child {
margin-right: 15px;
}
.contact-form textarea {
background: #b8b8b8;
color: #fff;
border: none;
width: 100%;
padding: 12px;
font-size: 15px;
min-height: 200px;
max-height: 400px;
resize: vertical;
border-radius: 5px;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
margin-bottom: 20px;
opacity: 0.9;
}
.contact-form .send-btn {
float: right;
background: #261010;
color: #fff;
border: none;
width: 120px;
height: 40px;
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
text-align: center;
letter-spacing: 2px;
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
transition-property: background;
}
.contact-form .send-btn:hover {
background: #ff2a00;
}
#error_message {
padding: 0;
background: #d60000;
margin-bottom: 2px;
text-align: center;
font-size: 15px;
transition: all 0.5s ease;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Constantin Bogdan-Teodor</title>
<link rel="icon" href="https://icon-library.com/images/b-icon/b-icon-7.jpg" type = "image/x-icon">
<link rel="stylesheet" href="contactme.css" type="text/css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Staatliches&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Carter+One&display=swap" rel="stylesheet"
<link href="https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/af8a8677c5.js" crossorigin="anonymous"></script>
<script src="contact.js"></script>
</head>
<body>
<div class="navbar">
<div class="copy">
©
</div>
<div class="imgnav">
<a href="home.html">
<svg id="logos" width="27" height="37" viewBox="0 0 27 37" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.96094 36H0.960938V37H1.96094V36ZM1.96094 1.875V0.875H0.960938V1.875H1.96094ZM21.4609 4.17188L20.8252 4.94381L20.8284 4.94641L21.4609 4.17188ZM22.9141 15.2109L23.7165 15.8077L23.7201 15.8027L22.9141 15.2109ZM19.2109 18.0469L18.8159 17.1282L16.2139 18.2471L18.9416 19.0099L19.2109 18.0469ZM23.5703 21L22.763 21.5903L22.7703 21.6L23.5703 21ZM6.46094 20.0391V19.0391H5.46094V20.0391H6.46094ZM6.46094 32.3203H5.46094V33.3203H6.46094V32.3203ZM18.8359 30.7031L19.5033 31.4479L19.5038 31.4474L18.8359 30.7031ZM6.46094 16.4297H5.46094V17.4297H6.46094V16.4297ZM17.9688 14.9531L17.3305 14.1832L17.3256 14.1874L17.9688 14.9531ZM18.1094 6.86719L17.4915 7.65354L17.4986 7.65897L18.1094 6.86719ZM6.46094 5.57812V4.57812H5.46094V5.57812H6.46094ZM2.96094 36V1.875H0.960938V36H2.96094ZM1.96094 2.875H13.1172V0.875H1.96094V2.875ZM13.1172 2.875C16.707 2.875 19.219 3.62101 20.8252 4.94381L22.0966 3.39994C19.9841 1.66024 16.9336 0.875 13.1172 0.875V2.875ZM20.8284 4.94641C22.4161 6.243 23.2734 8.1903 23.2734 10.9688H25.2734C25.2734 7.7472 24.2558 5.16325 22.0935 3.39734L20.8284 4.94641ZM23.2734 10.9688C23.2734 12.3589 22.8829 13.5637 22.108 14.6191L23.7201 15.8027C24.7578 14.3894 25.2734 12.7661 25.2734 10.9688H23.2734ZM22.1116 14.6142C21.3226 15.6753 20.2364 16.5174 18.8159 17.1282L19.606 18.9655C21.3104 18.2326 22.693 17.1841 23.7165 15.8076L22.1116 14.6142ZM18.9416 19.0099C20.584 19.4692 21.8417 20.3302 22.7631 21.5902L24.3775 20.4098C23.1739 18.7636 21.5253 17.6558 19.4803 17.0838L18.9416 19.0099ZM22.7703 21.6C23.704 22.8449 24.1875 24.3469 24.1875 26.1562H26.1875C26.1875 23.9656 25.5929 22.0301 24.3703 20.4L22.7703 21.6ZM24.1875 26.1562C24.1875 28.9817 23.2838 31.0955 21.5495 32.625L22.8724 34.125C25.1068 32.1545 26.1875 29.4558 26.1875 26.1562H24.1875ZM21.5495 32.625C19.8059 34.1627 17.2688 35 13.7969 35V37C17.5749 37 20.6472 36.0873 22.8724 34.125L21.5495 32.625ZM13.7969 35H1.96094V37H13.7969V35ZM5.46094 20.0391V32.3203H7.46094V20.0391H5.46094ZM6.46094 33.3203H13.8906V31.3203H6.46094V33.3203ZM13.8906 33.3203C16.1558 33.3203 18.0678 32.7343 19.5033 31.4479L18.1686 29.9584C17.1979 30.8282 15.8129 31.3203 13.8906 31.3203V33.3203ZM19.5038 31.4474C20.9693 30.1322 21.6641 28.3421 21.6641 26.2031H19.6641C19.6641 27.8766 19.1401 29.0865 18.168 29.9589L19.5038 31.4474ZM21.6641 26.2031C21.6641 23.9717 21.0535 22.1207 19.6652 20.844C18.2927 19.5819 16.3296 19.0391 13.9609 19.0391V21.0391C16.061 21.0391 17.4495 21.5236 18.3114 22.3162C19.1574 23.0941 19.6641 24.3251 19.6641 26.2031H21.6641ZM13.9609 19.0391H6.46094V21.0391H13.9609V19.0391ZM6.46094 17.4297H13.2578V15.4297H6.46094V17.4297ZM13.2578 17.4297C15.3931 17.4297 17.2135 16.8935 18.6119 15.7188L17.3256 14.1874C16.3803 14.9815 15.06 15.4297 13.2578 15.4297V17.4297ZM18.6069 15.723C20.047 14.5293 20.75 12.8987 20.75 10.9453H18.75C18.75 12.3669 18.2655 13.4082 17.3306 14.1832L18.6069 15.723ZM20.75 10.9453C20.75 8.87908 20.1402 7.17082 18.7202 6.07541L17.4986 7.65897C18.2661 8.25105 18.75 9.26155 18.75 10.9453H20.75ZM18.7272 6.08087C17.3786 5.02127 15.4493 4.57812 13.1172 4.57812V6.57812C15.2538 6.57812 16.6526 6.99435 17.4916 7.65351L18.7272 6.08087ZM13.1172 4.57812H6.46094V6.57812H13.1172V4.57812ZM5.46094 5.57812V16.4297H7.46094V5.57812H5.46094Z" fill="white"/>
</svg>
</a>
</div>
<ul class="navbar-nav">
<li class="nav-item">
<a href="home.html" class="nav-link">
<i class="fas fa-home"></i>
</a>
</li>
<li class="nav-item">
<a href="aboutme.html" class="navbar-link">
<i class="far fa-user"></i>
</a>
</li>
<li class="nav-item">
<a href="stiaica.html" class="navbar-link">
<i class="fas fa-code"></i>
</a>
</li>
<li class="nav-item">
<a href="contactme.html" class="navbar-link">
<i class="fas fa-at"></i>
</a>
</li>
</ul>
<div class="secondnav">
<ul class="secnavbar">
<li class="secnav-item">
<a href="https://www.facebook.com/bogdan.teodor.148/" target="_blank" class="secnavbar-link">
<i class="fab fa-facebook"></i>
</a>
</li>
<li class="secnav-item">
<a href="https://www.instagram.com/bogdanteodor1/" target="_blank" class="secnavbar-link">
<i class="fab fa-instagram"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="main">
<div class="loading">
<div class="percent">100%</div>
<div class="text"></div>
<div class="progress-bar">
<div class="progress"></div>
</div>
</div>
<script src="preloader.js"></script>
<div class="contact-section">
<div class="contact-info">
<div><i class="fas fa-map-marker-alt"></i>Str. Avram Iancu nr16, Ors. Cernavoda, jud. CT</div>
<div><i class="fas fa-envelope"></i>bogdan.constantin0110#gmail.com</div>
<div><i class="fas fa-phone"></i>+40769881692</div>
<div><i class="fas fa-university"></i>Universitatea Tehnica Gheorghe Asachi</div>
</div>
<div class="contact-form">
<h2>Contacteaza-ma</h2>
<div id="error_message"></div>
<form class="contact" onsubmit=" return validation()" method="post">
<input type="text" name="name" class="text-box" id="name" placeholder="Nume complet">
<input type="email" name="email" class="text-box" id="email" placeholder="Email">
<textarea name="message" id="message" rows="5" placeholder="Mesajul tau"></textarea>
<input type="submit" class="send-btn" value="Trimite">
</form>
</div>
</div>
</div>
</body>
</html>

In your code, the preloader has no background and does not fill the entire screen
Solution: Give the preloader a background and stretch it over the whole screen!
At 100 percent, hide the preloader with loadingscreen .style.display = "none";
See code below.
var percent = document.querySelector('.percent');
var progress = document.querySelector('.progress');
var text = document.querySelector ('.text');
var loadingscreen = document.querySelector('.loading');
var count = 4;
var per = 16;
var loading = setInterval(animate, 50);
function animate() {
if(count == 100 && per == 400) {
percent.classList.add('.text-blink');
loadingscreen .style.display = "none";
clearInterval(loading);
} else {
per = per + 4;
count = count + 1;
progress.style.width = per + "px";
percent.textContent = count + "%";
}
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght#1,900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Itim&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Poppins:wght#800&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
font-family: 'Gloria Hallelujah', cursive;
--text-primary: #b6b6b6;
--text-secondary: #ececec;
--bg-primary: #23232e;
--bg-secondary: #141418;
}
body {
font-family: 'Gloria Hallelujah', cursive;
background-color: #363535;
display: flex;
}
.loading {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fff;
z-index: 999999;
overflow: visible;
display:flex;
justify-content:center;
align-items:center;
flex-direction: column;
}
.percent {
color: #999;
font-size: 100px;
font-weight: 400;
text-align: center;
margin-bottom: 15px;
}
.text {
position: fixed;
left: 160px;
color: #fdb5ca;
font-size: 15px;
letter-spacing: 1px;
line-height: 21px;
display: none;
}
.text-blink {
animation: blink .7s ease-in-out .1s;
}
#keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: .2;
}
100% {
opacity: 1;
}
}
.progress-bar {
width: 406px;
height: 21px;
background: #111;
border-radius: 13px;
padding: 3px;
box-sizing: border-box;
}
.progress {
width: 200px;
height: 15px;
background: #f60d54;
border-radius: 13px;
}
.main {
margin-left: 5rem; /* 1 rem = 16 px => 5 rem = 80px */
padding: 1rem;
max-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow = hidden;
}
body::-webkit-scrollbar {
width: 0.25rem;
}
body::-webkit-scrollbar-track {
background: #757d77;
}
body::-webkit-scrollbar-thumb {
background: #c2c2c2;
}
.navbar {
width: 5rem;
height: 100vh;
position: fixed;
background-color: #2e2e2e;
}
.navbar-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
margin-top: 225px;
}
.nav-item {
font-size: 30px;
text-align: center;
width: 85%;
padding: 10px
}
ul {
list-style-type: none;
}
li a {
display: block;
text-decoration:0;
color:#b6b8ba;
}
.nav-link {
align-items: center;
height: 3rem;
text-decoration: none;
}
.secnav-item {
font-size: 30px;
text-align: center;
padding: 5px;
width: 85%
}
.secnavbar {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
margin-top: 50px;
}
.imgnav {
margin-top: 10px;
margin-left: 27px;
position: absolute;
}
.copy {
color: white;
position: absolute;
margin-left: 55px;
}
.contact-section {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.contact-info {
position: relative;
color: #fff;
max-width: 500px;
line-height: 95px;
padding-left: 50px;
font-size: 18px;
top: 50px;
}
.contact-info i {
margin-right: 20px;
font-size: 25px;
}
.contact-form {
max-width:700px;
margin-right: 50px;
position: relative;
top: 50px;
left: 100px;
}
.contact-info, .contact-form {
flex: 1;
}
.contact-form h2 {
color: #fff;
text-align: center;
font-size: 35px;
text-transform: uppercase;
margin-bottom: 30px;
font-family: 'Poppins', sans-serif;
}
.contact-form .text-box {
background: #b8b8b8;
color: #fff;
border: none;
width: calc(50% - 10px);
height: 50px;
padding: 12px;
font-size: 15px;
border-radius: 5px;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
margin-bottom: 20px;
opacity: 0.9;
}
.contact-form .text-box:first-child {
margin-right: 15px;
}
.contact-form textarea {
background: #b8b8b8;
color: #fff;
border: none;
width: 100%;
padding: 12px;
font-size: 15px;
min-height: 200px;
max-height: 400px;
resize: vertical;
border-radius: 5px;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
margin-bottom: 20px;
opacity: 0.9;
}
.contact-form .send-btn {
float: right;
background: #261010;
color: #fff;
border: none;
width: 120px;
height: 40px;
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
text-align: center;
letter-spacing: 2px;
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
transition-property: background;
}
.contact-form .send-btn:hover {
background: #ff2a00;
}
#error_message {
padding: 0;
background: #d60000;
margin-bottom: 2px;
text-align: center;
font-size: 15px;
transition: all 0.5s ease;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Constantin Bogdan-Teodor</title>
<link rel="icon" href="https://icon-library.com/images/b-icon/b-icon-7.jpg" type = "image/x-icon">
<link rel="stylesheet" href="contactme.css" type="text/css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Staatliches&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Carter+One&display=swap" rel="stylesheet"
<link href="https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/af8a8677c5.js" crossorigin="anonymous"></script>
<script src="contact.js"></script>
</head>
<body>
<div class="navbar">
<div class="copy">
©
</div>
<div class="imgnav">
<a href="home.html">
<svg id="logos" width="27" height="37" viewBox="0 0 27 37" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.96094 36H0.960938V37H1.96094V36ZM1.96094 1.875V0.875H0.960938V1.875H1.96094ZM21.4609 4.17188L20.8252 4.94381L20.8284 4.94641L21.4609 4.17188ZM22.9141 15.2109L23.7165 15.8077L23.7201 15.8027L22.9141 15.2109ZM19.2109 18.0469L18.8159 17.1282L16.2139 18.2471L18.9416 19.0099L19.2109 18.0469ZM23.5703 21L22.763 21.5903L22.7703 21.6L23.5703 21ZM6.46094 20.0391V19.0391H5.46094V20.0391H6.46094ZM6.46094 32.3203H5.46094V33.3203H6.46094V32.3203ZM18.8359 30.7031L19.5033 31.4479L19.5038 31.4474L18.8359 30.7031ZM6.46094 16.4297H5.46094V17.4297H6.46094V16.4297ZM17.9688 14.9531L17.3305 14.1832L17.3256 14.1874L17.9688 14.9531ZM18.1094 6.86719L17.4915 7.65354L17.4986 7.65897L18.1094 6.86719ZM6.46094 5.57812V4.57812H5.46094V5.57812H6.46094ZM2.96094 36V1.875H0.960938V36H2.96094ZM1.96094 2.875H13.1172V0.875H1.96094V2.875ZM13.1172 2.875C16.707 2.875 19.219 3.62101 20.8252 4.94381L22.0966 3.39994C19.9841 1.66024 16.9336 0.875 13.1172 0.875V2.875ZM20.8284 4.94641C22.4161 6.243 23.2734 8.1903 23.2734 10.9688H25.2734C25.2734 7.7472 24.2558 5.16325 22.0935 3.39734L20.8284 4.94641ZM23.2734 10.9688C23.2734 12.3589 22.8829 13.5637 22.108 14.6191L23.7201 15.8027C24.7578 14.3894 25.2734 12.7661 25.2734 10.9688H23.2734ZM22.1116 14.6142C21.3226 15.6753 20.2364 16.5174 18.8159 17.1282L19.606 18.9655C21.3104 18.2326 22.693 17.1841 23.7165 15.8076L22.1116 14.6142ZM18.9416 19.0099C20.584 19.4692 21.8417 20.3302 22.7631 21.5902L24.3775 20.4098C23.1739 18.7636 21.5253 17.6558 19.4803 17.0838L18.9416 19.0099ZM22.7703 21.6C23.704 22.8449 24.1875 24.3469 24.1875 26.1562H26.1875C26.1875 23.9656 25.5929 22.0301 24.3703 20.4L22.7703 21.6ZM24.1875 26.1562C24.1875 28.9817 23.2838 31.0955 21.5495 32.625L22.8724 34.125C25.1068 32.1545 26.1875 29.4558 26.1875 26.1562H24.1875ZM21.5495 32.625C19.8059 34.1627 17.2688 35 13.7969 35V37C17.5749 37 20.6472 36.0873 22.8724 34.125L21.5495 32.625ZM13.7969 35H1.96094V37H13.7969V35ZM5.46094 20.0391V32.3203H7.46094V20.0391H5.46094ZM6.46094 33.3203H13.8906V31.3203H6.46094V33.3203ZM13.8906 33.3203C16.1558 33.3203 18.0678 32.7343 19.5033 31.4479L18.1686 29.9584C17.1979 30.8282 15.8129 31.3203 13.8906 31.3203V33.3203ZM19.5038 31.4474C20.9693 30.1322 21.6641 28.3421 21.6641 26.2031H19.6641C19.6641 27.8766 19.1401 29.0865 18.168 29.9589L19.5038 31.4474ZM21.6641 26.2031C21.6641 23.9717 21.0535 22.1207 19.6652 20.844C18.2927 19.5819 16.3296 19.0391 13.9609 19.0391V21.0391C16.061 21.0391 17.4495 21.5236 18.3114 22.3162C19.1574 23.0941 19.6641 24.3251 19.6641 26.2031H21.6641ZM13.9609 19.0391H6.46094V21.0391H13.9609V19.0391ZM6.46094 17.4297H13.2578V15.4297H6.46094V17.4297ZM13.2578 17.4297C15.3931 17.4297 17.2135 16.8935 18.6119 15.7188L17.3256 14.1874C16.3803 14.9815 15.06 15.4297 13.2578 15.4297V17.4297ZM18.6069 15.723C20.047 14.5293 20.75 12.8987 20.75 10.9453H18.75C18.75 12.3669 18.2655 13.4082 17.3306 14.1832L18.6069 15.723ZM20.75 10.9453C20.75 8.87908 20.1402 7.17082 18.7202 6.07541L17.4986 7.65897C18.2661 8.25105 18.75 9.26155 18.75 10.9453H20.75ZM18.7272 6.08087C17.3786 5.02127 15.4493 4.57812 13.1172 4.57812V6.57812C15.2538 6.57812 16.6526 6.99435 17.4916 7.65351L18.7272 6.08087ZM13.1172 4.57812H6.46094V6.57812H13.1172V4.57812ZM5.46094 5.57812V16.4297H7.46094V5.57812H5.46094Z" fill="white"/>
</svg>
</a>
</div>
<ul class="navbar-nav">
<li class="nav-item">
<a href="home.html" class="nav-link">
<i class="fas fa-home"></i>
</a>
</li>
<li class="nav-item">
<a href="aboutme.html" class="navbar-link">
<i class="far fa-user"></i>
</a>
</li>
<li class="nav-item">
<a href="stiaica.html" class="navbar-link">
<i class="fas fa-code"></i>
</a>
</li>
<li class="nav-item">
<a href="contactme.html" class="navbar-link">
<i class="fas fa-at"></i>
</a>
</li>
</ul>
<div class="secondnav">
<ul class="secnavbar">
<li class="secnav-item">
<a href="https://www.facebook.com/bogdan.teodor.148/" target="_blank" class="secnavbar-link">
<i class="fab fa-facebook"></i>
</a>
</li>
<li class="secnav-item">
<a href="https://www.instagram.com/bogdanteodor1/" target="_blank" class="secnavbar-link">
<i class="fab fa-instagram"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="main">
<div class="loading">
<div class="percent">100%</div>
<div class="text"></div>
<div class="progress-bar">
<div class="progress"></div>
</div>
</div>
<script src="preloader.js"></script>
<div class="contact-section">
<div class="contact-info">
<div><i class="fas fa-map-marker-alt"></i>Str. Avram Iancu nr16, Ors. Cernavoda, jud. CT</div>
<div><i class="fas fa-envelope"></i>bogdan.constantin0110#gmail.com</div>
<div><i class="fas fa-phone"></i>+40769881692</div>
<div><i class="fas fa-university"></i>Universitatea Tehnica Gheorghe Asachi</div>
</div>
<div class="contact-form">
<h2>Contacteaza-ma</h2>
<div id="error_message"></div>
<form class="contact" onsubmit=" return validation()" method="post">
<input type="text" name="name" class="text-box" id="name" placeholder="Nume complet">
<input type="email" name="email" class="text-box" id="email" placeholder="Email">
<textarea name="message" id="message" rows="5" placeholder="Mesajul tau"></textarea>
<input type="submit" class="send-btn" value="Trimite">
</form>
</div>
</div>
</div>
</body>
</html>

You are taking a long approach, try this:
Add this <div id="preloader"></div> anywhere inside your body tag
Add this css:
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
overflow: hidden;
background: #fff;
}
#preloader:before {
content: "";
position: fixed;
top: calc(50% - 30px);
left: calc(50% - 30px);
border: 6px solid #f2f2f2;
border-top: 6px solid #00579f;
border-radius: 50%;
width: 60px;
height: 60px;
-webkit-animation: animate-preloader 1s linear infinite;
animation: animate-preloader 1s linear infinite;
}
#search-preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
overflow: hidden;
}
#search-preloader:before {
content: "";
position: fixed;
top: calc(50% - 30px);
left: calc(50% - 30px);
border: 4px solid #f2f2f2;
border-top: 4px solid #00579f;
border-radius: 50%;
width: 40px;
height: 40px;
-webkit-animation: animate-preloader 1s linear infinite;
animation: animate-preloader 1s linear infinite;
}
#-webkit-keyframes animate-preloader {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes animate-preloader {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
And the last thing add this javascript:
window.onload = function () {
document.querySelector("#preloader").style.display = "none";
};
Codepen: https://codepen.io/manaskhandelwal1/pen/WNGgQJV

My JQuery is not working on Chrome, sometimes works on firefox and then stops

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>

I can't get my content to overlay background image

Here's my html and css code. My strategy seemed to work well with the 1st background image, but when I got to the 2nd background image, it no longer worked. I created a stage outside the main content area set the position to relative then a wrapper to include my 2 backgrounds with their position to absolute so I can manually position it. However, once I get to the benefits-section div, it acts like this part is no longer contained in the content-wrapper div. Can anyone spot my problem? I also included an image of what the the website actually looks like completed.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Garcinia Cambogia</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div class="stage">
<div class="bg-wrapper">
<img src='img/flower-background.jpg' id="bg" atl="flower background">
<img src="img/middle-background.jpg" id="bg2" alt="benefits-section background">
</div>
<div class="content-wrapper">
<nav>
<h1>Produce</h1>
<ul>
<li>Home</li>
<li>About the Product</li>
<li>Benefits</li>
<li>Testimonals</li>
<li>Buy</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</nav>
<div class="copy">
<h2>Increase your <br> energy level with <br> <span>Garcinia Cambogia</span></h2>
<img src="img/product.png" alt="Main Product">
<div class="opt-in">
<h2>Try it Out</h2>
<form>
<input type="text" value="Your Name*">
<input type="text" value="Your Email*">
</form>
<div class="order-btn">
<h2>Order Now</h2>
</div>
</div><!-- end of opt-in -->
</div><!-- end of copy -->
<div class="promo-section">
<h1> About Garcinia Cambogia </h1>
<h2> Reduce food intake and promote <span>weight loss fast</span>!</h2>
<p>Effective thermogenic supplements are those that contain key ingredients that create a fat burning 'thermogenic'
environment by working together and in synergy. Some of these ingredients also aid
in reducing appetite and spiking an increase in short-term energy. Dosage of Garcinia cambogia, beginning
from 750 mg to 1,500 mg, takes 2-3 times in individual dose before meals.
</p>
<h2> Other <span>Related</span> Products</h2>
<ul>
<div class="hover08">
<div class="img-wrapper">
<li><img src="img/Rasberry-product.png" alt="Rasberry Product"><a class="search" id="search1" href="#"><img src="img/search-icon.png" alt="search"></a></li>
</div>
<div class="img-wrapper">
<li><img src="img/Garcinia-Cambogia.png" alt="Garcinia"><a class="search" id="search2" href="#"><img src="img/search-icon.png" alt="search"></a></li>
</div>
<div class="img-wrapper">
<li id="mango-ketone"><img src="img/Mango-Ketone.png" alt="Mango Product"><a class="search" id="search3" href="#"><img src="img/search-icon.png" alt="search"></a></li>
</div>
</ul>
</div><!-- end of hover08 -->
</div><!-- end of promo-section -->
<div class="benefits-section clear">
<h1> What are the benefits </h1>
<h2> Obesity is an imbalance between fat intake and energy expenditure.
Now day obesity is a problem of health and mind in many people.</h2>
<p>The rush hours working lifestyle make many people take junk food and fast food more than nutritionists.
The important factor is Generic, it is found that one obese patient has a 40% chance of obesity and both
obese patients have 80% chance of obesity. The chronic diseases that are developed from obesity are
diabetes, high blood pressure, stroke, heart attack, cancer, gout and sleep apnea. So control the weight
is the best way to void health problem.
Control the body weight helps you against the chronic diseases and make good looking. There are many
ways to reduce and control the weight. Using weight control products is not the best way, especially use
potential dangerous diet products without consult from the doctors or the pharmacists. Balance the energy
expenditure and fat intake is an important point. If you eat more you have to exercise more. Other ways
are break bad habits such as alcohol intake, watching T.V. during eating, or ignore vegetables. You have
to realize how much the fat in each menu and should the low cholesterol with high nutrition.</p>
</div>
</div><!-- end of content-wrapper -->
</div><!-- end of stage -->
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
</body>
</html>
#font-face { font-family: 'Lucida Sans Demibold Roman'; src: url('../fonts/Lucida Sans Demibold Roman.ttf'); }
#font-face { font-family: 'Arizonia-Regular'; src: url('../fonts/Arizonia-Regular.ttf'); }.stage { position: relative; max-height: 100%; max-width: 100%; }
.content-wrapper { width: 960px; margin: 0 auto; position: relative; z-index: 2; }
.bg-wrapper { position: absolute; z-index: 1; left: 0; top: 0; min-width: 100% }
#bg { position: relative; top: 0; left:0; min-width: 100%; max-height: 760px; }
#bg2 { position: relative; top: 500px; left: 0; min-width: 100%; max-height: 702px; }
nav h1 { font-size: 69px; font-family: 'Arizonia-Regular'; letter-spacing: 0; text-align: center; color: #e0bd67; margin-bottom: 15px; margin-top: 15px; }
nav ul { list-style-type: none; padding: 0; margin: 0; background-color: #c29f4d; box-shadow: 5px 5px 1px #808279; height: 50px; width: 100%; float: left; margin-bottom: 95px; }
nav ul li { display: inline; padding-right: 40px; padding: 16px 40px 16px 0; margin-top: 0; float: left;}
nav li:first-child { padding-left: 113.04px; }
nav li:last-child { padding-right: 113.04px; }
nav a { text-decoration: none; color: #fff; font-family: 'Lucida Sans Demibold Roman'; font-size: 16px; }
.copy { float: left; }
.copy h2 { font-family: 'Open Sans'; font-size: 34px; color: #fff; font-weight: bold; float: right; text-transform: uppercase; line-height: 34px; margin-bottom: 35px; margin-top: 0;}
.copy img { float: left; margin-top: 55px; }
.copy span { color: #ffd062; }
.opt-in { background-color: #d1aa50; width: 378px; height: 299px; float: right; margin-bottom: 78px; }
.opt-in h2 {float: left; width: 301px; text-align: center; margin: 15px 38.5px; padding-bottom: 20px; border-bottom: 2px solid #fff; }
.opt-in input { width: 296px; height: 40px; background-color: #ecdcb7; margin: 7px 38.5px; padding-left: 5px; }
.order-btn h2 { border-bottom: none; }
.promo-section { float: left; }
.promo-section h1 { font-family: 'Open Sans'; font-size: 36px; text-transform: uppercase; color: #c29f4d; text-align: center; border-bottom: 2px solid #c29f4d; width: 795px; margin: 90px 82.5px 30px 82.5px; padding-bottom: 5px; }
.promo-section h2 { text-align: center; font-size: 26px; color: #8e8e8e; }
.promo-section h2 span { color: #c29f4d; }
.promo-section p { text-align: center; color: #8e8e8e; font-family: 'Open Sans'; font-size: 16px; }
.promo-section ul { list-style-type: none; margin-top: 30px; padding: 0; }
.promo-section ul div li { display: inline; float: left; margin-right: 109.5px }
#mango-ketone { margin-right: 0;}
.img-wrapper { position: relative; float: left; }
.hover08 li img { -webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }
.hover08 li:hover img { -webkit-filter: grayscale(0); filter: grayscale(0); }
.hover08 a.search { position: absolute; top: 0px; right: 0px; opacity: 0; background-color: transparent; filter: alpha(opacity=0); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }
#search1 { top:71px; right: 200px;}
#search2 { top: 92px; right: 190px; }
#search3 { top: 67px; right: 100px; }
.hover08 li:hover a.search { opacity: 1; -webkit-transition-delay: .2s; transition-delay: .2s;}
.benefits-section { margin-top: 30px; float: left; }
.benefits-section h1 { color: #fff;}
.clear { clear: both; }

Develop Reference

JavaScript is the programming language of the Web.

How can I center the logo and center the menu? - javascript

Related

How can I place a colored box behind the slideshow?

my popup should show when score = 6, but i cant make it work

Preloader javascript + css + html

My JQuery is not working on Chrome, sometimes works on firefox and then stops

I can't get my content to overlay background image

Categories

Resources