Scribd
Upload
11 views

IS

Uploaded by

ahmedjhuar81
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
11 views

IS

Uploaded by

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

<!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Login form</title>

<link rel="stylesheet" href="stlee.css">

</head>

<body>

<div class="box">

<img src="kedja.jpg" class="image">

<h1>Login here</h1>

<form>

<input type="text" name=""placeholder="enter username">

<input type="password"name=""placeholder="enter password">

<input type="submit"name=""value="loin">

<a href="#">Forget password</a>

</form>

</div>
</body>

</html>

css

body{

margin: 0;

padding: o;

background-image: url(background.jpg);

background-size: cover;

height: 100vh;

font-family: sans-serif;

.box{height: 380px;

width: 320px;

background-color: #000;

position: absolute;

color: #fff;

transform: translate(-50%, -50%);

left: 50%;

top: 50%;

padding: 70px 30px;

border-radius: 10px;

.image{

width: 100px;

height: 100px;
border-radius: 50%;

position: absolute;

top: -50px;

left: calc(50% - 50px);

h1{

margin: 0;

padding:0 0 20px;

text-align: center;

font-size: 25px;

.box input{

width: 100%;

margin-bottom: 20px;

.box input[type="text"],input[type="password"]{

border: none;

border-bottom: 1px solid #fff;

background-color: transparent;

outline: none;

height: 40px;

color: #fff;

font-size: 15px;

.box input[type="submit"] {
border: none;

outline: none;

height: 40px;

background-color: tomato;

color: #fff;

font-size: -40px;

border-radius: 20px;

.box input[type="submit"]:hover{

cursor: pointer;

background-color: #ffc107;

.box a{

text-decoration: none;

font-size: 12px;

line-height: 2opx;

color: darkgray;

.box input a:hover{

color: #ffc107;

}body{

margin: 0;
padding: o;

background-image: url(background.jpg);

background-size: cover;

height: 100vh;

font-family: sans-serif;

.box{height: 380px;

width: 320px;

background-color: #000;

position: absolute;

color: #fff;

transform: translate(-50%, -50%);

left: 50%;

top: 50%;

padding: 70px 30px;

border-radius: 10px;

.image{

width: 100px;

height: 100px;

border-radius: 50%;

position: absolute;

top: -50px;

left: calc(50% - 50px);

}
h1{

margin: 0;

padding:0 0 20px;

text-align: center;

font-size: 25px;

.box input{

width: 100%;

margin-bottom: 20px;

.box input[type="text"],input[type="password"]{

border: none;

border-bottom: 1px solid #fff;

background-color: transparent;

outline: none;

height: 40px;

color: #fff;

font-size: 15px;

.box input[type="submit"] {

border: none;

outline: none;

height: 40px;

background-color: tomato;

color: #fff;
font-size: -40px;

border-radius: 20px;

.box input[type="submit"]:hover{

cursor: pointer;

background-color: #ffc107;

.box a{

text-decoration: none;

font-size: 12px;

line-height: 2opx;

color: darkgray;

.box input a:hover{

color: #ffc107;

You might also like