• ;
  • A Coding Boy
  • Blog
  • Videos
  • Projects
  • Home
HTML AND CSS
LOGIN PAGE
WEBSITE DESGIN
API PROJECTS
CARD DESGIN
JAVASCRIPTS GAMES
JAVASCRIPT PROJECTS
JAVA PROJECTS
PYTHON PROJECTS
demo post
only for demo nasa prospect
only for demo the gonnies
most popular
how to create parallax website
how to create a beautiful card
how to create a netflix login page
how to create flipping ui card
how to create image generator website
Create a Quiz App with Timer using HTML CSS & JavaScript
In the Quiz Box, there is a header with a title on the left side and a timer box on the right side. This timer starts decrement from 15 to 0 sec and there is also shown a timeline indicator that is sliding from the left to right side according to the timer. If the user selects an option between 15 to 0 sec, the timer will be stopped and all available options will be disabled.
If the user selected option is correct, the selected option color, background color changed to green and there is also shown the tick icon to inform the user that the selected answer is correct. If the user selects an option that is incorrect, the selected option color, background color changed to red and there is shown the cross icon to inform the user that the selected option is incorrect and the correct option will be automatically selected.
Quiz game Game in JavaScript [Source Codes]
To create this Quiz Game in JavaScript. First, you need to create three Files: HTML, CSS & JavaScript File. After creating these files, you have to paste the given codes into your file.
Remember, If you copy-paste the codes, then you won’t get images that are used in this game, and also you won’t get source codes of demo 2 of this game. If you want these, you can easily download the source files of this memory card game from the bottom download button.
First, paste the following codes into your index.html file.
Plain text
Copy to clipboard
Open in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Awesome Quiz App | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<!-- FontAweome CDN Link for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<!-- start Quiz button -->
<div class="start_btn"><button>Start Quiz</button></div>
<!-- Info Box -->
<div class="info_box">
<div class="info-title"><span>Some Rules of this Quiz</span></div>
<div class="info-list">
<div class="info">1. You will have only <span>15 seconds</span> per each question.</div>
<div class="info">2. Once you select your answer, it can't be undone.</div>
<div class="info">3. You can't select any option once time goes off.</div>
<div class="info">4. You can't exit from the Quiz while you're playing.</div>
<div class="info">5. You'll get points on the basis of your correct answers.</div>
</div>
<div class="buttons">
<button class="quit">Exit Quiz</button>
<button class="restart">Continue</button>
</div>
</div>
<!-- Quiz Box -->
<div class="quiz_box">
<header>
<div class="title">Awesome Quiz Application</div>
<div class="timer">
<div class="time_left_txt">Time Left</div>
<div class="timer_sec">15</div>
</div>
<div class="time_line"></div>
</header>
<section>
<div class="que_text">
<!-- Here I've inserted question from JavaScript -->
</div>
<div class="option_list">
<!-- Here I've inserted options from JavaScript -->
</div>
</section>
<!-- footer of Quiz Box -->
<footer>
<div class="total_que">
<!-- Here I've inserted Question Count Number from JavaScript -->
</div>
<button class="next_btn">Next Que</button>
</footer>
</div>
<!-- Result Box -->
<div class="result_box">
<div class="icon">
<i class="fas fa-crown"></i>
</div>
<div class="complete_text">You've completed the Quiz!</div>
<div class="score_text">
<!-- Here I've inserted Score Result from JavaScript -->
</div>
<div class="buttons">
<button class="restart">Replay Quiz</button>
<button class="quit">Quit Quiz</button>
</div>
</div>
<!-- Inside this JavaScript file I've inserted Questions and Options only -->
<script src="js/questions.js"></script>
<!-- Inside this JavaScript file I've coded all Quiz Codes -->
<script src="js/script.js"></script>
</body>
</html>
</html>
<!DOCTYPE html> <!-- Created By CodingNepal - www.codingnepalweb.com --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Awesome Quiz App | CodingNepal</title> <link rel="stylesheet" href="style.css"> <!-- FontAweome CDN Link for Icons --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/> </head> <body> <!-- start Quiz button --> <div class="start_btn"><button>Start Quiz</button></div> <!-- Info Box --> <div class="info_box"> <div class="info-title"><span>Some Rules of this Quiz</span></div> <div class="info-list"> <div class="info">1. You will have only <span>15 seconds</span> per each question.</div> <div class="info">2. Once you select your answer, it can't be undone.</div> <div class="info">3. You can't select any option once time goes off.</div> <div class="info">4. You can't exit from the Quiz while you're playing.</div> <div class="info">5. You'll get points on the basis of your correct answers.</div> </div> <div class="buttons"> <button class="quit">Exit Quiz</button> <button class="restart">Continue</button> </div> </div> <!-- Quiz Box --> <div class="quiz_box"> <header> <div class="title">Awesome Quiz Application</div> <div class="timer"> <div class="time_left_txt">Time Left</div> <div class="timer_sec">15</div> </div> <div class="time_line"></div> </header> <section> <div class="que_text"> <!-- Here I've inserted question from JavaScript --> </div> <div class="option_list"> <!-- Here I've inserted options from JavaScript --> </div> </section> <!-- footer of Quiz Box --> <footer> <div class="total_que"> <!-- Here I've inserted Question Count Number from JavaScript --> </div> <button class="next_btn">Next Que</button> </footer> </div> <!-- Result Box --> <div class="result_box"> <div class="icon"> <i class="fas fa-crown"></i> </div> <div class="complete_text">You've completed the Quiz!</div> <div class="score_text"> <!-- Here I've inserted Score Result from JavaScript --> </div> <div class="buttons"> <button class="restart">Replay Quiz</button> <button class="quit">Quit Quiz</button> </div> </div> <!-- Inside this JavaScript file I've inserted Questions and Options only --> <script src="js/questions.js"></script> <!-- Inside this JavaScript file I've coded all Quiz Codes --> <script src="js/script.js"></script> </body> </html> </html>
Second, paste the following codes into your style.css file
Plain text
Copy to clipboard
Open in new window
EnlighterJS 3 Syntax Highlighter
/* importing google fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
background: #007bff;
}
::selection{
color: #fff;
background: #007bff;
}
.start_btn,
.info_box,
.quiz_box,
.result_box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.info_box.activeInfo,
.quiz_box.activeQuiz,
.result_box.activeResult{
opacity: 1;
z-index: 5;
pointer-events: auto;
transform: translate(-50%, -50%) scale(1);
}
.start_btn button{
font-size: 25px;
font-weight: 500;
color: #007bff;
padding: 15px 30px;
outline: none;
border: none;
border-radius: 5px;
background: #fff;
cursor: pointer;
}
.info_box{
width: 540px;
background: #fff;
border-radius: 5px;
transform: translate(-50%, -50%) scale(0.9);
opacity: 0;
pointer-events: none;
transition: all 0.3s ease;
}
.info_box .info-title{
height: 60px;
width: 100%;
border-bottom: 1px solid lightgrey;
display: flex;
align-items: center;
padding: 0 30px;
border-radius: 5px 5px 0 0;
font-size: 20px;
font-weight: 600;
}
.info_box .info-list{
padding: 15px 30px;
}
.info_box .info-list .info{
margin: 5px 0;
font-size: 17px;
}
.info_box .info-list .info span{
font-weight: 600;
color: #007bff;
}
.info_box .buttons{
height: 60px;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0 30px;
border-top: 1px solid lightgrey;
}
.info_box .buttons button{
margin: 0 5px;
height: 40px;
width: 100px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
border: none;
outline: none;
border-radius: 5px;
border: 1px solid #007bff;
transition: all 0.3s ease;
}
.quiz_box{
width: 550px;
background: #fff;
border-radius: 5px;
transform: translate(-50%, -50%) scale(0.9);
opacity: 0;
pointer-events: none;
transition: all 0.3s ease;
}
.quiz_box header{
position: relative;
z-index: 2;
height: 70px;
padding: 0 30px;
background: #fff;
border-radius: 5px 5px 0 0;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0px 3px 5px 1px rgba(0,0,0,0.1);
}
.quiz_box header .title{
font-size: 20px;
font-weight: 600;
}
.quiz_box header .timer{
color: #004085;
background: #cce5ff;
border: 1px solid #b8daff;
height: 45px;
padding: 0 8px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: space-between;
width: 145px;
}
.quiz_box header .timer .time_left_txt{
font-weight: 400;
font-size: 17px;
user-select: none;
}
.quiz_box header .timer .timer_sec{
font-size: 18px;
font-weight: 500;
height: 30px;
width: 45px;
color: #fff;
border-radius: 5px;
line-height: 30px;
text-align: center;
background: #343a40;
border: 1px solid #343a40;
user-select: none;
}
.quiz_box header .time_line{
position: absolute;
bottom: 0px;
left: 0px;
height: 3px;
background: #007bff;
}
section{
padding: 25px 30px 20px 30px;
background: #fff;
}
section .que_text{
font-size: 25px;
font-weight: 600;
}
section .option_list{
padding: 20px 0px;
display: block;
}
section .option_list .option{
background: aliceblue;
border: 1px solid #84c5fe;
border-radius: 5px;
padding: 8px 15px;
font-size: 17px;
margin-bottom: 15px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: space-between;
}
section .option_list .option:last-child{
margin-bottom: 0px;
}
section .option_list .option:hover{
color: #004085;
background: #cce5ff;
border: 1px solid #b8daff;
}
section .option_list .option.correct{
color: #155724;
background: #d4edda;
border: 1px solid #c3e6cb;
}
section .option_list .option.incorrect{
color: #721c24;
background: #f8d7da;
border: 1px solid #f5c6cb;
}
section .option_list .option.disabled{
pointer-events: none;
}
section .option_list .option .icon{
height: 26px;
width: 26px;
border: 2px solid transparent;
border-radius: 50%;
text-align: center;
font-size: 13px;
pointer-events: none;
transition: all 0.3s ease;
line-height: 24px;
}
.option_list .option .icon.tick{
color: #23903c;
border-color: #23903c;
background: #d4edda;
}
.option_list .option .icon.cross{
color: #a42834;
background: #f8d7da;
border-color: #a42834;
}
footer{
height: 60px;
padding: 0 30px;
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid lightgrey;
}
footer .total_que span{
display: flex;
user-select: none;
}
footer .total_que span p{
font-weight: 500;
padding: 0 5px;
}
footer .total_que span p:first-child{
padding-left: 0px;
}
footer button{
height: 40px;
padding: 0 13px;
font-size: 18px;
font-weight: 400;
cursor: pointer;
border: none;
outline: none;
color: #fff;
border-radius: 5px;
background: #007bff;
border: 1px solid #007bff;
line-height: 10px;
opacity: 0;
pointer-events: none;
transform: scale(0.95);
transition: all 0.3s ease;
}
footer button:hover{
background: #0263ca;
}
footer button.show{
opacity: 1;
pointer-events: auto;
transform: scale(1);
}
.result_box{
background: #fff;
border-radius: 5px;
display: flex;
padding: 25px 30px;
width: 450px;
align-items: center;
flex-direction: column;
justify-content: center;
transform: translate(-50%, -50%) scale(0.9);
opacity: 0;
pointer-events: none;
transition: all 0.3s ease;
}
.result_box .icon{
font-size: 100px;
color: #007bff;
margin-bottom: 10px;
}
.result_box .complete_text{
font-size: 20px;
font-weight: 500;
}
.result_box .score_text span{
display: flex;
margin: 10px 0;
font-size: 18px;
font-weight: 500;
}
.result_box .score_text span p{
padding: 0 4px;
font-weight: 600;
}
.result_box .buttons{
display: flex;
margin: 20px 0;
}
.result_box .buttons button{
margin: 0 10px;
height: 45px;
padding: 0 20px;
font-size: 18px;
font-weight: 500;
cursor: pointer;
border: none;
outline: none;
border-radius: 5px;
border: 1px solid #007bff;
transition: all 0.3s ease;
}
.buttons button.restart{
color: #fff;
background: #007bff;
}
.buttons button.restart:hover{
background: #0263ca;
}
.buttons button.quit{
color: #007bff;
background: #fff;
}
.buttons button.quit:hover{
color: #fff;
background: #007bff;
}
/* importing google fonts */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body{ background: #007bff; } ::selection{ color: #fff; background: #007bff; } .start_btn, .info_box, .quiz_box, .result_box{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .info_box.activeInfo, .quiz_box.activeQuiz, .result_box.activeResult{ opacity: 1; z-index: 5; pointer-events: auto; transform: translate(-50%, -50%) scale(1); } .start_btn button{ font-size: 25px; font-weight: 500; color: #007bff; padding: 15px 30px; outline: none; border: none; border-radius: 5px; background: #fff; cursor: pointer; } .info_box{ width: 540px; background: #fff; border-radius: 5px; transform: translate(-50%, -50%) scale(0.9); opacity: 0; pointer-events: none; transition: all 0.3s ease; } .info_box .info-title{ height: 60px; width: 100%; border-bottom: 1px solid lightgrey; display: flex; align-items: center; padding: 0 30px; border-radius: 5px 5px 0 0; font-size: 20px; font-weight: 600; } .info_box .info-list{ padding: 15px 30px; } .info_box .info-list .info{ margin: 5px 0; font-size: 17px; } .info_box .info-list .info span{ font-weight: 600; color: #007bff; } .info_box .buttons{ height: 60px; display: flex; align-items: center; justify-content: flex-end; padding: 0 30px; border-top: 1px solid lightgrey; } .info_box .buttons button{ margin: 0 5px; height: 40px; width: 100px; font-size: 16px; font-weight: 500; cursor: pointer; border: none; outline: none; border-radius: 5px; border: 1px solid #007bff; transition: all 0.3s ease; } .quiz_box{ width: 550px; background: #fff; border-radius: 5px; transform: translate(-50%, -50%) scale(0.9); opacity: 0; pointer-events: none; transition: all 0.3s ease; } .quiz_box header{ position: relative; z-index: 2; height: 70px; padding: 0 30px; background: #fff; border-radius: 5px 5px 0 0; display: flex; align-items: center; justify-content: space-between; box-shadow: 0px 3px 5px 1px rgba(0,0,0,0.1); } .quiz_box header .title{ font-size: 20px; font-weight: 600; } .quiz_box header .timer{ color: #004085; background: #cce5ff; border: 1px solid #b8daff; height: 45px; padding: 0 8px; border-radius: 5px; display: flex; align-items: center; justify-content: space-between; width: 145px; } .quiz_box header .timer .time_left_txt{ font-weight: 400; font-size: 17px; user-select: none; } .quiz_box header .timer .timer_sec{ font-size: 18px; font-weight: 500; height: 30px; width: 45px; color: #fff; border-radius: 5px; line-height: 30px; text-align: center; background: #343a40; border: 1px solid #343a40; user-select: none; } .quiz_box header .time_line{ position: absolute; bottom: 0px; left: 0px; height: 3px; background: #007bff; } section{ padding: 25px 30px 20px 30px; background: #fff; } section .que_text{ font-size: 25px; font-weight: 600; } section .option_list{ padding: 20px 0px; display: block; } section .option_list .option{ background: aliceblue; border: 1px solid #84c5fe; border-radius: 5px; padding: 8px 15px; font-size: 17px; margin-bottom: 15px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: space-between; } section .option_list .option:last-child{ margin-bottom: 0px; } section .option_list .option:hover{ color: #004085; background: #cce5ff; border: 1px solid #b8daff; } section .option_list .option.correct{ color: #155724; background: #d4edda; border: 1px solid #c3e6cb; } section .option_list .option.incorrect{ color: #721c24; background: #f8d7da; border: 1px solid #f5c6cb; } section .option_list .option.disabled{ pointer-events: none; } section .option_list .option .icon{ height: 26px; width: 26px; border: 2px solid transparent; border-radius: 50%; text-align: center; font-size: 13px; pointer-events: none; transition: all 0.3s ease; line-height: 24px; } .option_list .option .icon.tick{ color: #23903c; border-color: #23903c; background: #d4edda; } .option_list .option .icon.cross{ color: #a42834; background: #f8d7da; border-color: #a42834; } footer{ height: 60px; padding: 0 30px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid lightgrey; } footer .total_que span{ display: flex; user-select: none; } footer .total_que span p{ font-weight: 500; padding: 0 5px; } footer .total_que span p:first-child{ padding-left: 0px; } footer button{ height: 40px; padding: 0 13px; font-size: 18px; font-weight: 400; cursor: pointer; border: none; outline: none; color: #fff; border-radius: 5px; background: #007bff; border: 1px solid #007bff; line-height: 10px; opacity: 0; pointer-events: none; transform: scale(0.95); transition: all 0.3s ease; } footer button:hover{ background: #0263ca; } footer button.show{ opacity: 1; pointer-events: auto; transform: scale(1); } .result_box{ background: #fff; border-radius: 5px; display: flex; padding: 25px 30px; width: 450px; align-items: center; flex-direction: column; justify-content: center; transform: translate(-50%, -50%) scale(0.9); opacity: 0; pointer-events: none; transition: all 0.3s ease; } .result_box .icon{ font-size: 100px; color: #007bff; margin-bottom: 10px; } .result_box .complete_text{ font-size: 20px; font-weight: 500; } .result_box .score_text span{ display: flex; margin: 10px 0; font-size: 18px; font-weight: 500; } .result_box .score_text span p{ padding: 0 4px; font-weight: 600; } .result_box .buttons{ display: flex; margin: 20px 0; } .result_box .buttons button{ margin: 0 10px; height: 45px; padding: 0 20px; font-size: 18px; font-weight: 500; cursor: pointer; border: none; outline: none; border-radius: 5px; border: 1px solid #007bff; transition: all 0.3s ease; } .buttons button.restart{ color: #fff; background: #007bff; } .buttons button.restart:hover{ background: #0263ca; } .buttons button.quit{ color: #007bff; background: #fff; } .buttons button.quit:hover{ color: #fff; background: #007bff; }
Last, paste the following codes into your script.js file.
Plain text
Copy to clipboard
Open in new window
EnlighterJS 3 Syntax Highlighter
// creating an array and passing the number, questions, options, and answers
let questions = [
{
numb: 1,
question: "What does HTML stand for?",
answer: "Hyper Text Markup Language",
options: [
"Hyper Text Preprocessor",
"Hyper Text Markup Language",
"Hyper Text Multiple Language",
"Hyper Tool Multi Language"
]
},
{
numb: 2,
question: "What does CSS stand for?",
answer: "Cascading Style Sheet",
options: [
"Common Style Sheet",
"Colorful Style Sheet",
"Computer Style Sheet",
"Cascading Style Sheet"
]
},
{
numb: 3,
question: "What does PHP stand for?",
answer: "Hypertext Preprocessor",
options: [
"Hypertext Preprocessor",
"Hypertext Programming",
"Hypertext Preprogramming",
"Hometext Preprocessor"
]
},
{
numb: 4,
question: "What does SQL stand for?",
answer: "Structured Query Language",
options: [
"Stylish Question Language",
"Stylesheet Query Language",
"Statement Question Language",
"Structured Query Language"
]
},
{
numb: 5,
question: "What does XML stand for?",
answer: "eXtensible Markup Language",
options: [
"eXtensible Markup Language",
"eXecutable Multiple Language",
"eXTra Multi-Program Language",
"eXamine Multiple Language"
]
},
// you can uncomment the below codes and make duplicate as more as you want to add question
// but remember you need to give the numb value serialize like 1,2,3,5,6,7,8,9.....
// {
// numb: 6,
// question: "Your Question is Here",
// answer: "Correct answer of the question is here",
// options: [
// "Option 1",
// "option 2",
// "option 3",
// "option 4"
// ]
// },
];
// creating an array and passing the number, questions, options, and answers let questions = [ { numb: 1, question: "What does HTML stand for?", answer: "Hyper Text Markup Language", options: [ "Hyper Text Preprocessor", "Hyper Text Markup Language", "Hyper Text Multiple Language", "Hyper Tool Multi Language" ] }, { numb: 2, question: "What does CSS stand for?", answer: "Cascading Style Sheet", options: [ "Common Style Sheet", "Colorful Style Sheet", "Computer Style Sheet", "Cascading Style Sheet" ] }, { numb: 3, question: "What does PHP stand for?", answer: "Hypertext Preprocessor", options: [ "Hypertext Preprocessor", "Hypertext Programming", "Hypertext Preprogramming", "Hometext Preprocessor" ] }, { numb: 4, question: "What does SQL stand for?", answer: "Structured Query Language", options: [ "Stylish Question Language", "Stylesheet Query Language", "Statement Question Language", "Structured Query Language" ] }, { numb: 5, question: "What does XML stand for?", answer: "eXtensible Markup Language", options: [ "eXtensible Markup Language", "eXecutable Multiple Language", "eXTra Multi-Program Language", "eXamine Multiple Language" ] }, // you can uncomment the below codes and make duplicate as more as you want to add question // but remember you need to give the numb value serialize like 1,2,3,5,6,7,8,9..... // { // numb: 6, // question: "Your Question is Here", // answer: "Correct answer of the question is here", // options: [ // "Option 1", // "option 2", // "option 3", // "option 4" // ] // }, ];
That’s all, now you’ve successfully created a Create a Quiz App with Timer using HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.
live demo
Download files
Info
Home
Projects
Blogs
Videos
About us
Follow us for more!
© 2023 All Rights Reserved A Coding Boy

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Glassmorphism Login Form | CodingNepal</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper"> <form action="#"> <h2>Login</h2> <div class="input-field"> <input type="text" required> <label>Enter your email</label> </div> <div class="input-field"> <input type="password" required> <label>Enter your password</label> </div> <div class="forget"> <label for="remember"> <input type="checkbox" id="remember"> <p>Remember me</p> </label> <a href="#">Forgot password?</a> </div> <button type="submit">Log In</button> <div class="register"> <p>Don't have an account? <a href="#">Register</a></p> </div> </form> </div> </body> </html>

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Open Sans", sans-serif; } body { display: flex; align-items: center; justify-content: center; min-height: 100vh; width: 100%; padding: 0 10px; } body::before { content: ""; position: absolute; width: 100%; height: 100%; background: url("https://www.codingnepalweb.com/demos/create-glassmorphism-login-form-html-css/hero-bg.jpg"), #000; background-position: center; background-size: cover; } .wrapper { width: 400px; border-radius: 8px; padding: 30px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.5); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); } form { display: flex; flex-direction: column; } h2 { font-size: 2rem; margin-bottom: 20px; color: #fff; } .input-field { position: relative; border-bottom: 2px solid #ccc; margin: 15px 0; } .input-field label { position: absolute; top: 50%; left: 0; transform: translateY(-50%); color: #fff; font-size: 16px; pointer-events: none; transition: 0.15s ease; } .input-field input { width: 100%; height: 40px; background: transparent; border: none; outline: none; font-size: 16px; color: #fff; } .input-field input:focus~label, .input-field input:valid~label { font-size: 0.8rem; top: 10px; transform: translateY(-120%); } .forget { display: flex; align-items: center; justify-content: space-between; margin: 25px 0 35px 0; color: #fff; } #remember { accent-color: #fff; } .forget label { display: flex; align-items: center; } .forget label p { margin-left: 8px; } .wrapper a { color: #efefef; text-decoration: none; } .wrapper a:hover { text-decoration: underline; } button { background: #fff; color: #000; font-weight: 600; border: none; padding: 12px 20px; cursor: pointer; border-radius: 3px; font-size: 16px; border: 2px solid transparent; transition: 0.3s ease; } button:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, 0.15); } .register { text-align: center; margin-top: 30px; color: #fff;}