Scribd
Upload
2 views4 pages

CA2

This document is an HTML template for a simple login form. It includes styling for the body and login container, with a red background and a centered login box. The form requires a username and password, and features a 'Forgot your password?' link.

Uploaded by

me.aakarshan19
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views4 pages

CA2

This document is an HTML template for a simple login form. It includes styling for the body and login container, with a red background and a centered login box. The form requires a username and password, and features a 'Forgot your password?' link.

Uploaded by

me.aakarshan19
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

<!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CA2 HTML CSS</title>

<html>

<style>

body {

background-color: red;

font-family: Arial;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

.login-container {

background-color: whitesmoke;

padding: 20px;

border: 1px solid whitesmoke;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

width: 300px;

text-align: center;
}

.login-container h2 {

font-size: 24px;

margin-bottom: 20px;

.login-container input[type="text"],

.login-container input[type="password"] {

width: calc(100% - 22px);

padding: 10px;

margin: 10px 0;

border: 1px solid black;

box-sizing: border-box;

.login-container input[type="submit"] {

padding: 10px 20px;

background-color: black;

color: whitesmoke;

border: none;

cursor: pointer;

.login-container input[type="submit"] {

background-color: #555;

.forgot-password {

margin-top: 20px;

font-size: 12px;
color: whitesmoke;

writing-mode: horizontal-tb;

text-orientation: mixed;

</style>

</head>

<body>

<div class="login-container">

<h2>Login Form</h2>

<form>

<input type="text" placeholder="User Name" required>

<input type="password" placeholder="Password" required>

<input type="submit" value="Sign In">

</form>

</div>

<div class="forgot-password">

Forgot your password?

</div>

</body>

</html>
OUTPUT

You might also like