 |
At first, make a project folder. I named it Project-02. We need two files here one is index.html and another is stylesheet.css. like the picture:
Copy the code which is blowing. and past it on index.html :
<!DOCTYPE htal>
<htmal>
<head>
<link rel="stylesheet" href="stylesheet.css">
<title>A Simple Login Form</title>
<style>
body{
background-image: url(background.jpg);
background-attachment: fixed;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div class="fromheader same-style">Login</div>
<div class="formbody">
<form>
<!--E-Mail Fild-->
<label class="mylable" for="e-mail">E-Mail Address</label><br>
<input placeholder="Email Address (exampale@exampale.com)" type="text" name="e-mail" class="myfrom" required><br><br>
<label class="mylable" for="password">Password</label><br>
<input maxlength="12" minlength="5" placeholder="Password" type="password" name="password" class="myfrom" required><br>
<p style="text-align: right; margin-right: 5%; color: gray;">Minemum Length: 5 and Maximum Length: 12</p>
<br><input type="submit" name="submit" class="submit" value="Login">
</form>
</div>
<div class="fromfooter same-style">Need to a membersheep? <a class="link" href="#">Sing Up</a></div>
</body>
</htmal>
Now we can see a rendom form.
Now we should add a CSS file which name is stylesheet.css. The CSS code is below:
body{background-color: aqua;}
div.fromheader{
background-color: rgb(184, 250, 250);
color: rgb(105, 97, 97);
border-radius: 8px 8px 0px 0px;
padding: 20px;
text-align: center;
margin-top: 20px;
font-size: 30px;
margin-left: 25%;
margin-right: 25%;
}
div.fromfooter{
background-color: rgb(184, 250, 250);
color: rgb(105, 97, 97);
border-radius: 0px 0px 8px 8px;
padding: 20px;
text-align: center;
font-size: 15px;
margin-bottom: 20px;
margin-left: 25%;
margin-right: 25%;
}
div.formbody{
padding: 20px;
background-color: azure;
margin-left: 25%;
margin-right: 25%;
}
input.myfrom{
padding:12px;
border: 1px solid gray;
border-radius: 4px;
margin-right: 8px;
width: 95%;
}
label.mylable{ font-size: 22px;}
input.submit{
font-size: 22px;
background-color: green;
color: white;
border-radius: 8px;
padding: 10px;
width: 95%;
margin-right: 8px;
}
a.link{color: rgb(31, 30, 30);}
a.link:hover{color: rgb(20, 204, 112);}
And add a line ih HTML to connect css into html file on the <head> tag.
<link rel="stylesheet" href="stylesheet.css">
After adding CSS and CSS link on HTML we can see a wonderful login form.
Download Scour Code
){kind=link}
0 Comments
Thanks for your important comments. If this is your problem I will try to sloved this.