Open in app

Sign in

Write

Sign in

Sign in form

Mohd Hashim
4 min readNov 22, 2022

--

result

html & Css.

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8">

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

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

<title>form1</title>

<! — Latest compiled and minified CSS →

<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity=”sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u” crossorigin=”anonymous”>

<! — Optional theme →

<! — <link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity=”sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp” crossorigin=”anonymous”> →

<! — Latest compiled and minified JavaScript →

<script src=”https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity=”sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa” crossorigin=”anonymous”></script>

<link rel=”stylesheet” href=”path/to/font-awesome/css/font-awesome.min.css”>

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity=”sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==” crossorigin=”anonymous” referrerpolicy=”no-referrer” />

</head>

<body>

<div class=”form-bg”>

<div class=”container”>

<div class=”row”>

<div class=”col-md-4 col-md-offset-4">

<div class=”form-container”>

<div class=”form-icon”><i class=”fa fa-user”></i></div>

<h3 class=”title”>Login</h3>

<form class=”form-horizontal”>

<div class=”form-group”>

<label>email</label>

<input class=”form-control” type=”email” placeholder=”email address”>

</div>

<div class=”form-group”>

<label>password</label>

<input class=”form-control” type=”password” placeholder=”password”>

</div>

<button type=”button” class=”btn btn-default”>Login</button>

</form>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

STYLE.CSS

<!- -style- ->

.demo{ background: #F2F2F2; }

.form-container{

background: #ecf0f3;

font-family: ‘Nunito’, sans-serif;

padding: 40px;

margin: auto;

border-radius: 20px;

box-shadow: 14px 14px 20px #cbced1, -14px -14px 20px white;

}

.form-container .form-icon{

color: #ac40ab;

font-size: 55px;

text-align: center;

line-height: 100px;

width: 100px;

height:100px;

margin: 0 auto 15px;

border-radius: 50px;

box-shadow: 7px 7px 10px #cbced1, -7px -7px 10px #fff;

}

.form-container .title{

color: #ac40ab;

font-size: 25px;

font-weight: 700;

text-transform: uppercase;

letter-spacing: 1px;

text-align: center;

margin: 0 0 20px;

}

.form-container .form-horizontal .form-group{ margin: 0 0 25px 0; }

.form-container .form-horizontal .form-group label{

font-size: 15px;

font-weight: 600;

text-transform: uppercase;

}

.form-container .form-horizontal .form-control{

color: #333;

background: #ecf0f3;

font-size: 15px;

height: 50px;

padding: 20px;

letter-spacing: 1px;

border: none;

border-radius: 50px;

box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px #fff;

display: inline-block;

transition: all 0.3s ease 0s;

}

.form-container .form-horizontal .form-control:focus{

box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px #fff;

outline: none;

}

.form-container .form-horizontal .form-control::placeholder{

color: #808080;

font-size: 14px;

}

.form-container .form-horizontal .btn{

color: #000;

background-color: #ac40ab;

font-size: 15px;

font-weight: bold;

text-transform: uppercase;

width: 100%;

padding: 12px 15px 11px;

border-radius: 20px;

box-shadow: 6px 6px 6px #cbced1, -6px -6px 6px #fff;

border: none;

transition: all 0.5s ease 0s;

}

.form-container .form-horizontal .btn:hover,

.form-container .form-horizontal .btn:focus{

color: #fff;

letter-spacing: 3px;

box-shadow: none;

outline: none;

}

you can use easily copy this code and use it

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>form1</title>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> -->

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

   <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <div class="form-bg mt-5">
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-md-offset-4">
                    <div class="form-container">
                        <div class="form-icon"><i class="fa fa-user"></i></div>
                        <h3 class="title">Login</h3>
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label>email</label>
                                <input class="form-control" type="email" placeholder="email address">
                            </div>
                            <div class="form-group">
                                <label>password</label>
                                <input class="form-control" type="password" placeholder="password">
                            </div>
                            <button type="button" class="btn btn-default">Login</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

<style>
        .demo{ background: #F2F2F2; }
.form-container{
    background: #ecf0f3;
    font-family: 'Nunito', sans-serif;
    padding: 40px;
    margin: auto;
    border-radius: 20px;
    box-shadow: 14px 14px 20px #cbced1, -14px -14px 20px white;
}
.form-container .form-icon{
    color: #ac40ab;
    font-size: 55px;
    text-align: center;
    line-height: 100px;
    width: 100px;
    height:100px;
    margin: 0 auto 15px;
    border-radius: 50px;
    box-shadow: 7px 7px 10px #cbced1, -7px -7px 10px #fff;
}
.form-container .title{
    color: #ac40ab;
    font-size: 25px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    margin: 0 0 20px;
}
.form-container .form-horizontal .form-group{ margin: 0 0 25px 0; }
.form-container .form-horizontal .form-group label{
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
}
.form-container .form-horizontal .form-control{
    color: #333;
    background: #ecf0f3;
    font-size: 15px;
    height: 50px;
    padding: 20px;
    letter-spacing: 1px;
    border: none;
    border-radius: 50px;
    box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px #fff;
    display: inline-block;
    transition: all 0.3s ease 0s;
}
.form-container .form-horizontal .form-control:focus{
    box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px #fff;
    outline: none;
}
.form-container .form-horizontal .form-control::placeholder{
    color: #808080;
    font-size: 14px;
}
.form-container .form-horizontal .btn{
    color: #000;
    background-color: #ac40ab;
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    width: 100%;
    padding: 12px 15px 11px;
    border-radius: 20px;
    box-shadow: 6px 6px 6px #cbced1, -6px -6px 6px #fff;
    border: none;
    transition: all 0.5s ease 0s;
}
.form-container .form-horizontal .btn:hover,
.form-container .form-horizontal .btn:focus{
    color: #fff;
    letter-spacing: 3px;
    box-shadow: none;
    outline: none;
}
    </style>

--

--

Mohd Hashim
Mohd Hashim

Written by Mohd Hashim

0 Followers
1 Following

No responses yet

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams