Login forms are the attractive part of the websites. A beautiful login form attract the user. Good UI is best way for user attraction. From a long time we are providing attractive UI styles to our valued users on a multiple platforms Now we came here on the blog to teach our valued user a good tricks on HTML5 CSS3 UI.
Today here I bring a good of a beautiful and stylish login form which will attract your users. Lets start open with your IDE or Editor.
Step 1:
Write down the following HTML code in index.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta
charset="UTF-8">
<meta
name="viewport" content="width=device-width,
initial-scale=1.0">
<meta
http-equiv="X-UA-Compatible" content="ie=edge">
<link
rel="stylesheet" href="style.css">
<title>JGsofts Login Form</title>
</head>
<body>
<div
class="login-form-wrap">
<div
class="left-section">
<div
class="title">
<h1>JGsofts!</h1>
<p>sign in to your account!</p>
</div>
<div
class="form">
<form
class="" action="index.html" method="post">
<input
type="text" placeholder="Email">
<input
type="text" placeholder="Password">
<span
class="floatleft"><input type="checkbox">
Remember me</span>
<span
class="floatright"><a href="#">Forgot
Password?</a></span>
<input
type="submit" value="Sign In">
</form>
<div
class="create-account">
Don,t have
an Account? <a href="#">Create</a>
</div>
</div>
</div>
<div
class="right-section">
<div
class="welcome-text">
<h1>Welcome Back</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim.</p>
</div>
</div>
</div>
</body>
</html>
|
Step 2:
Write down the following CSS code in style.css
*{
margin: 0;
padding: 0;
box-sizing:
border-box;
font-family:'Poppins';
}
body a{
color: darkorchid;
text-decoration:
none;
}
.login-form-wrap {
display: flex;
justify-content:
center;
align-items:
center;
width: 1000px;
height: 540px;
margin: 0 auto;
overflow:
hidden;
border-radius:
10px;
box-shadow: 0px
0px 47px 0px rgba(0, 0, 0, 0.47);
margin-top:
45px;
background:
#fff;
}
.welcome-text p {
font-size: 13px;
}
.left-section{
width: 450px;
height: 540px;
float:left;
}
.right-section {
width: 550px;
position:
relative;
height: 100vh;
float: right;
background-image: url(img.png);
background-size:
cover;
background-position: 570px 0px;
object-fit:
cover;
}
.welcome-text {
position:
absolute;
max-width:
290px;
text-align:
center;
top: 50%;
right: 50px;
color: #fff;
transform:
translateY(-50%);
}
.title {
text-align:
center;
margin-top:
80px;
color: #292929;
line-height:
30px;
margin-bottom:
30px;
}
.form {
max-width:
260px;
margin: 0 auto;
text-align:
center;
}
.form input[type=text] {
width: 300px;
padding: 14px
12px;
border-radius:
30px;
border: 1px
solid #ddd;
margin-bottom:
15px;
outline: none;
box-shadow: 0px
0px 42px #d4d4d4;
}
span.floatleft {
font-size: 13px;
float: left;
}
span.floatright {
font-size: 13px;
float: right;
}
.form input[type="submit"] {
display:
inline-block;
border: none;
width: 170px;
padding: 11px;
background-color: darkorchid;
color: #fff;
border-radius:
30px;
text-align:
center;
font-weight:
400;
cursor: pointer;
text-transform:
uppercase;
letter-spacing:
2px;
font-size: 12px;
margin: 20px
0px;
transition: 0.3s
all ease-in-out;
}
.form input[type="submit"]:focus {
outline: none;
}
.form input[type="submit"]:hover {
background: #111;
}
.create-account {
font-weight:
500;
font-size: 14px;
color: #424242;
margin-top:
10px;
}
|
Here we are😊. We have done and created our login form. which looks so amazing and attractive. Dear friends please share like and comment our posts if you like it.
Kindly give us suggestions feedbacks so we can improve our services and create a better contents for you. We will be to hear from you.
*For the video tutorials of this work kindly subscribe our YouTube channel following the below link:
Click here to subscribe our YouTube Channel...
Nice
ReplyDeleteLove this design
ReplyDeleteA1 Desgine
ReplyDeleteHi!Design is good.very helpful but could you please attach the background image as well.
ReplyDeleteDear you can change it as per your requirements in the following Tag of CSS code (background-image: url(img.png);)
Delete:
.right-section {
width: 550px;
position: relative;
height: 100vh;
float: right;
background-image: url(img.png);
background-size: cover;
background-position: 570px 0px;
object-fit: cover;
}
nice
ReplyDeleteBawaal cheej h 😍💞bae..
ReplyDeleteSara system hil jaata h
Post a Comment