Latest Login Page in HTML, CSS and Javascript
what is login page in html
A login page is a web page where users can log in to a website or web application by entering their username and password. It is typically the first page a user sees when they visit a website or web application. The login page is usually designed with HTML and CSS, and often includes interactive elements such as text boxes, password fields, and submit buttons.
<html>
<head>
<title>Latest Login Page</title>
<style>
body {
font-family: sans-serif;
}
.login-container {
width: 400px;
margin: 0 auto;
padding: 15px;
background-color: #f0f0f0;
border-radius: 5px;
}
.input-container {
margin-bottom: 10px;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 14px;
}
input[type="submit"] {
background-color: #2196f3;
color: #fff;
padding: 10px;
font-size: 14px;
border: none;
border-radius: 5px;
width: 100%;
}
input[type="submit"]:hover {
background-color: #0d8aff;
}
.message {
font-size: 12px;
color: #666;
margin-top: 10px;
}
</style>
<script>
function validateForm() {
var x = document.forms["loginForm"]["username"].value;
var y = document.forms["loginForm"]["password"].value;
if (x == "" || y == "") {
alert("Username and Password must be filled out");
return false;
}
}
</script>
</head>
<body>
<div class="login-container">
<h2>Login</h2>
<form name="loginForm" onsubmit="return validateForm()" method="post">
<div class="input-container">
<input type="text" name="username" placeholder="Username" required>
</div>
<div class="input-container">
<input type="password" name="password" placeholder="Password" required>
</div>
<input type="submit" value="Login">
</form>
<div class="message">Don't have an account? <a href="register.html">Register</a></div>
</div>
</body>
</html>
write a code in html for latest registration page with CSS and Javascript
what is registration page in html
Registration page in HTML is a web page on a website that allows users to register for an account. It typically includes an input form with fields such as name, email address, password, etc. The registration page is used to collect user information that can be used in the future for various purposes.
<!DOCTYPE html>
<html>
<head>
<title>Latest Registration Page</title>
<style>
body {
background-color: #F2F2F2;
}
#regForm {
background-color: #FFFFFF;
margin: 100px auto;
padding: 40px;
width: 70%;
min-width: 300px;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
border-radius: 4px;
}
button:hover {
opacity: 0.8;
}
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
img.avatar {
width: 40%;
border-radius: 50%;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
</style>
</head>
<body>
<h2>Latest Registration Form</h2>
<form id="regForm" action="/action_page.php">
<div class="imgcontainer">
<img src="avatar.png" alt="Avatar" class="avatar">
</div>
<div class="container">
<label><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<label><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" name="psw-repeat" required>
<input type="checkbox" checked="checked"> Remember me
<p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>
<div class="clearfix">
<button type="button" class="cancelbtn">Cancel</button>
<button type="submit" class="signupbtn">Sign Up</button>
</div>
</div>
</form>
<script>
// JavaScript for validation of the form
function checkForm(form)
{
if(form.psw.value != "" && form.psw.value == form.psw-repeat.value) {
if(form.psw.value.length < 6) {
alert("Error: Password must contain at least six characters!");
form.psw.focus();
return false;
}
if(form.psw.value == form.uname.value) {
alert("Error: Password must be different from Username!");
form.psw.focus();
return false;
}
re = /[0-9]/;
if(!re.test(form.psw.value)) {
alert("Error: password must contain at least one number (0-9)!");
form.psw.focus();
return false;
}
re = /[a-z]/;
if(!re.test(form.psw.value)) {
alert("Error: password must contain at least one lowercase letter (a-z)!");
form.psw.focus();
return false;
}
re = /[A-Z]/;
if(!re.test(form.psw.value)) {
alert("Error: password must contain at least one uppercase letter (A-Z)!");
form.psw.focus();
return false;
}
} else {
alert("Error: Please check that you've entered and confirmed your password!");
form.psw.focus();
return false;
}
alert("You entered a valid password: " + form.psw.value);
return true;
}
</script>
</body>
</html>
write a code in html for latest dashboard page with CSS and Javascript
what is dashboard page in html
Dashboard page in HTML is a page that is used to provide users with an overview of their data and activities. It usually includes charts, graphs, and other visualizations to help users better understand their data and activities. Dashboards can be used to monitor performance, track trends, and stay on top of key metrics.
<!DOCTYPE html>
<html>
<head>
<title>Latest Dashboard Page</title>
<style>
body {
font-family: Arial, sans-serif;
font-size: 14px;
background-color: #f2f2f2;
}
#dashboard {
width: 1000px;
margin: 0 auto;
}
#dashboard-header {
margin-bottom: 20px;
}
#dashboard-header h1 {
font-size: 20px;
font-weight: bold;
color: #333;
text-align: center;
}
#dashboard-nav {
width: 100%;
margin-bottom: 20px;
}
#dashboard-nav ul {
list-style: none;
margin: 0;
padding: 0;
}
#dashboard-nav li {
float: left;
width: 25%;
text-align: center;
}
#dashboard-nav li a {
display: block;
padding: 10px;
text-decoration: none;
background-color: #ebebeb;
color: #333;
font-weight: bold;
}
#dashboard-nav li a:hover {
background-color: #ccc;
}
#dashboard-content {
clear: both;
}
</style>
<script>
function showContent(id) {
var contentDivs = document.querySelectorAll('#dashboard-content > div');
for (var i = 0; i < contentDivs.length; i++) {
contentDivs[i].style.display = 'none';
}
document.getElementById(id).style.display = 'block';
}
</script>
</head>
<body>
<div id="dashboard">
<div id="dashboard-header">
<h1>Dashboard</h1>
</div>
<div id="dashboard-nav">
<ul>
<li><a href="#" onclick="showContent('dashboard-overview');return false;">Overview</a></li>
<li><a href="#" onclick="showContent('dashboard-stats');return false;">Stats</a></li>
<li><a href="#" onclick="showContent('dashboard-reports');return false;">Reports</a></li>
<li><a href="#" onclick="showContent('dashboard-settings');return false;">Settings</a></li>
</ul>
</div>
<div id="dashboard-content">
<div id="dashboard-overview">
<h2>Overview</h2>
<p>Content here.</p>
</div>
<div id="dashboard-stats" style="display:none;">
<h2>Stats</h2>
<p>Content here.</p>
</div>
<div id="dashboard-reports" style="display:none;">
<h2>Reports</h2>
<p>Content here.</p>
</div>
<div id="dashboard-settings" style="display:none;">
<h2>Settings</h2>
<p>Content here.</p>
</div>
</div>
</div>
</body>
</html>
write a code in html for latest image slider page with CSS and Javascript
what is image slider in html
Image slider is a component of a webpage that cycles through multiple images, usually with a navigation component or a timer set to transition between images automatically. Image sliders are often used to showcase the latest products, portfolio items, and other items that a site may be featuring.
<!DOCTYPE html>
<html>
<head>
<title>Latest Image Slider</title>
<style>
#slider {
position: relative;
overflow: hidden;
margin: 20px auto 0 auto;
border-radius: 4px;
}
#slider ul {
position: relative;
margin: 0;
padding: 0;
height: 200px;
list-style: none;
}
#slider ul li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 500px;
height: 300px;
background: #ccc;
text-align: center;
line-height: 300px;
}
</style>
</head>
<body>
<div id="slider">
<ul>
<li><img src="image1.jpg" alt="" /></li>
<li><img src="image2.jpg" alt="" /></li>
<li><img src="image3.jpg" alt="" /></li>
<li><img src="image4.jpg" alt="" /></li>
</ul>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#slider").each(function() {
var obj = $(this);
$(obj).append("<div class='nav'></div>");
$(obj).find("li").each(function() {
$(obj).find(".nav").append("<span rel='"+$(this).index()+"'></span>");
$(this).addClass("slider"+$(this).index());
});
$(obj).find("span").first().addClass("on");
});
});
function sliderJS (obj, sl) {
var ul = $(sl).find("ul");
var bl = $(sl).find("li.slider"+obj);
var step = $(bl).width();
$(ul).animate({marginLeft: "-"+step*obj}, 500);
}
$(document).on("click", "#slider .nav span", function() {
var sl = $(this).closest("#slider");
$(sl).find("span").removeClass("on");
$(this).addClass("on");
var obj = $(this).attr("rel");
sliderJS(obj, sl);
return false;
});
</script>
</body>
</html>