Greetings, visitors, and thank you for stopping by the TechTutorial Blog. Creating a login/registration form that works well across devices is something I’ll be discussing in this post. In addition, you’ll learn how to play video in the background using HTML and CSS. The jquery toggle property is also covered. The goal of this lesson is to teach you how to use jQuery to toggle between two div elements. If you already know some HTML and CSS, you can advance in your education.
Here’s an example of a responsive login and registration form with a video background using HTML and CSS:
HTML Code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Login and Registration Form</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<div class=”container”>
<video autoplay muted loop id=”myVideo”>
<source src=”video.mp4″ type=”video/mp4″>
</video>
<div class=”form-container”>
<div class=”form-btn”>
<span>Login</span>
<span>Register</span>
<hr id=”indicator”>
</div>
<form id=”login” class=”input-group”>
<input type=”text” class=”input-field” placeholder=”Username” required>
<input type=”password” class=”input-field” placeholder=”Password” required>
<button type=”submit” class=”submit-btn”>Login</button>
</form>
<form id=”register” class=”input-group”>
<input type=”text” class=”input-field” placeholder=”Username” required>
<input type=”email” class=”input-field” placeholder=”Email” required>
<input type=”password” class=”input-field” placeholder=”Password” required>
<button type=”submit” class=”submit-btn”>Register</button>
</form>
</div>
</div>
<script src=”app.js”></script>
</body>
</html>
CSS Code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
background-color: #ccc;
}
.container {
position: relative;
height: 100vh;
overflow: hidden;
}
#myVideo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
min-width: 100%;
min-height: 100%;
}
.form-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
max-width: 400px;
padding: 20px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 5px;
text-align: center;
}
.form-btn {
display: inline-block;
margin-bottom: 20px;
}
.form-btn span {
padding: 10px 20px;
cursor: pointer;
}
.form-btn span:nth-child(1) {
background-color: #fff;
color: #000;
border-radius: 5px 0 0 5px;
}
.form-btn span:nth-child(2) {
background-color: #000;
color: #fff;
border-radius: 0 5px 5px 0;
}
#indicator {
height: 3px;
margin-top: 5px;
background-color: #000;
transition: all 0.3s ease;
}
.input-group {
display: none;
}
.input-field {
display: block;
width: 100%;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
border: none;
}
.submit-btn {
display: block;
width:
Download Any Jobs Application Form For 500 + |
Download Jobs Application Form For Every Jobs |
Resume Templates Top 20 in MS Word – CV Format |
Disclaimer Confirm everything before applying for a job or giving an advance to a similar officer. We are not responsible for any damage or loss.
