Design login form using HTML5 and CSS3

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="container-fluid">
        <div class="row justify-content-center align-items-center">
            <div class="col-md-6">
                <div class="h-100vh row justify-content-center align-items-center">
                    <div class="col-md-6 b-right">
                        <form>
                            <div class="input-group">
                                <span class="input-group-addon" id="basic-addon1">
                                    <i class="ion-ios-email-outline"></i>
                                </span>
                                <input type="text" class="form-control" placeholder="Email" aria-label="Username" aria-describedby="basic-addon1">
                            </div>
                            <div class="input-group">
                                <span class="input-group-addon" id="basic-addon2">
                                    <i class="ion-ios-locked-outline"></i>
                                </span>
                                <input type="text" class="form-control" placeholder="Password" aria-label="Username" aria-describedby="basic-addon2">
                            </div>
                            <button class="btn w-100">Login</button>
                        </form>
                    </div>
                    <div class="col-md-5">
                        <div class="text">
                            <h1 class="text-center">POS</h1>
                            <p class="text-center">management system</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>




body {
    background: #ced4da;
    background: -moz-radial-gradient(center, ellipse cover, #f8f9fa 1%, #ced4da 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%, #f8f9fa), color-stop(100%, #426482));
    background: -webkit-radial-gradient(center, ellipse cover, #f8f9fa 1%, #ced4da 100%);
    background: -o-radial-gradient(center, ellipse cover, #f8f9fa 1%, #ced4da 100%);
    background: -ms-radial-gradient(center, ellipse cover, #f8f9fa 1%, #ced4da 100%);
    background: radial-gradient(ellipse at center, #f8f9fa 1%, #ced4da 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ced4da', endColorstr='#1c2b5a',GradientType=1 );
    height: 100vh;
    width: 100%;
}
*{
    border-radius: 0 !important;
    border: none !important;
    
}
input:focus{
    box-shadow: none !important;
}


i{
    font-size: 24px;
}
.input-group{
    margin-bottom: 10px;
}
.input-group span{
    width: 50px;
    text-align: center;
    display: flex;
    justify-content: center;
    background-color: #fff;
    
}

.h-100vh {
    height: 100vh;
}

button{
    margin-top: 5px;
    padding: 12px !important;
    background: #1abc9c;
    color: #fff;
}

p {
    text-transform: uppercase;
}
.b-right{
    border-right : 1px solid #ccc!important;
    padding-right: 50px;
}

.text {
    color: #848484;
}




Comments

Post a Comment