Scribd
Upload
20 views3 pages

Code For Login Page

This document is an HTML template for a sign-up modal. It includes styling for the layout, input fields for username and password, and buttons for logging in and signing up. The modal is designed to be user-friendly with a visually appealing background and hover effects.

Uploaded by

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

Code For Login Page

This document is an HTML template for a sign-up modal. It includes styling for the layout, input fields for username and password, and buttons for logging in and signing up. The modal is designed to be user-friendly with a visually appealing background and hover effects.

Uploaded by

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

±

<html>
<head>
<title>
SIGN UP
</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
background-color: cyan;
}
input[type=text],input[type=passsword]
{
width:100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid white;
box-sizing: border-box

}
button
{
background-color: aquamarine;
color:white;
padding:14px 20px;
margin:8px 0;
border:none;
cursor: pointer;
width:100%;
}
button:hover
{
opacity:0.8;
}
.imgcontainer
{
text-align:center;
margin: 24px 0 12px 0;
position: relative;
}
img.avatar
{
width:30%;
border-radius:40%;
}
.modal
{
background-color:black;
overflow: auto;
padding-top: 60px;
width:100%;
height:100%;
top:0%;
left: 0%;
z-index:1;
position: fixed;
}
.modal-content
{
background-color:wheat;
margin:5% auto 15% auto;
border:1px solid #888;
width:80%;
}
.container{
padding: 16px;

}
span.pasw{
float:right;
padding-top:16px;
}

</style>
</head>
<body>
<div class="modal">
<form class="modal-content animate">
<div class="imgcontainer">
<img src="images/img_avatar.2png" class="avatar"
</div>
<div class="container">
<label>
USERNAME
</label>
<input type="text" placeholder="USERNAME"/>
<br />
<label>
</html> PASSWORD
</label>
<input type="password" placeholder="PASSWORD" />
<br />
<input type="checkbox" />Remmber me
<button>
LOG IN
</button>
<label>
<p>
FORGOT
<a href="#">password</a>
</p>
</label>
<label>
<p>
No account??
<a href="signup.html">Signup</a>
</p>
</label>
</div>
</form>
</div>
</body>

You might also like