Responsive Social media login form templates

How to create a social media login form with CSS

Hello friends today in this artical we will learn how to create responsive social media login form templates using bootstrap.

Let your users login and register with one click using their existing social network accounts.

 <div class="main">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="row">

                        <div class="col-md-6 col-12 forget">
                            <div class="form_wrapper">
                                <h1>Forget Password</h1>
                                <div class="form_group">
                                    <input type="text" class="txtbox" placeholder="Enter Your Mail ID" />
                                </div>

                                <div class="form_group">
                                    <input type="button" class="mybtn" value="SEND OTP" />
                                </div>

                                <div class="form_group mt-5">
                                    <p class="pull-left"><a id="gotolog" href="#">Login Screen</a></p>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6 col-12 log">
                            <div class="form_wrapper">
                                <h1>Sign in</h1>
                                <div class="form_group">
                                    <input type="text" class="txtbox" placeholder="Username" />
                                </div>

                                <div class="form_group">
                                    <input type="text" class="txtbox" placeholder="Password" />
                                </div>

                                <div class="form_group">
                                    <input type="button" class="mybtn" value="SUBMIT" />
                                </div>

                                <div class="form_group mt-5">
                                    <p class="pull-left"><input type="checkbox" /> Remember me</p>
                                    <p class="pull-right"><a id="forg" href="#">Forget Password</a></p>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-1 d-none d-md-block">
                            <div class="vertical-divider">
                                <div class="center-element">OR</div>
                            </div>
                        </div>

                        <div class="col-md-5 col-12">
                            <div class="form_wrapper text-center">
                                <h1>Sign With</h1>
                                <a href="#" class="btn btn-default facebook"> <i class="fa fa-facebook modal-icons"></i> Sign In with Facebook </a>
                                <a href="#" class="btn btn-default twitter"> <i class="fa fa-twitter modal-icons"></i> Sign In with Twitter </a>
                                <a href="#" class="btn btn-default gmail"> <i class="fa fa-envelope modal-icons"></i> Sign In with Gmail </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="login.css" />
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />


<style type="text/css">
body {
    font-family: 'Rubik', sans-serif;
	background:url(bg.jpg);
	background-size:cover;
}

.main {
	background:rgba(255, 255, 255, 0.76);
    width: 55%;
    border: 1px solid #f2f2f2;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-family: 'Rubik', sans-serif;
    -webkit-box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.2);
}

    .main h1 {
        font-size: 22px;
        padding-left: 6px;
    }

.txtbox {
    width: 100%;
    height: 40px;
    border: 1px solid #dddddd;
    margin-top: 10px;
    font-size: 14px;
    border-radius: 30px;
    padding-left: 12px;
    font-family: 'Rubik', sans-serif;
}

    .txtbox:focus {
        outline: 0px;
    }

.bbr {
    border: 1px solid #f2f2f2;
}

.mybtn {
    background: #0b474f;
    width: 100%;
    height: 37px;
    border: none;
    color: #fff;
    border-radius: 30px;
    margin-top: 14px;
    width: 120px;
    font-family: 'Rubik', sans-serif;
}

.form_wrapper {
    padding: 40px;
}

.facebook
{
    background:#3b5999;
    width:100%;
    margin-top:7px;
    color:#fff;
    text-align:left;
}

.facebook:hover
{
    color:#fff;
}

.twitter {
    background: #00aced;
    width: 100%;
    margin-top: 7px;
    color: #fff;
    text-align: left;
}

.twitter:hover
{
    color:#fff;
}

.gmail {
    background: #dd4b39;
    width: 100%;
    margin-top: 7px;
    color: #fff;
    text-align: left;
}

.gmail:hover
{
    color:#fff;
}









.vertical-divider {
    position: absolute;
    display: table;
    text-align: center;
    height: 100%;
    width: 100%;
}

.vertical-divider .center-element 
{
    position: relative;
    display: table-cell;
    vertical-align: middle;
}

    .vertical-divider .center-element:before,
    .vertical-divider .center-element:after {
        position: absolute;
        content: "";
        width: 1px;
        left: 50%;
        border-left: 1px solid #b9b9b9;
    }

.vertical-divider .center-element:before 
{
    bottom: 50%;
    top: 0;
    margin-bottom: 20px;
}

.vertical-divider .center-element:after 
{
    top: 50%;
    bottom: 0;
    margin-top: 20px;
}


.form_group p
{
    font-size:13px;
}

.form_group p a
{
    color:#000;
}

.form_group p a:hover
{
    text-decoration:none;
}


.btn-dark 
{
    color: #0b474f !important;
}

.forget
{
    display:none;
}


@media only screen and (max-width: 767px) {
    .main {
        background: rgba(255, 255, 255, 0.76);
        width: 100%;
        border: 1px solid #f2f2f2;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        font-family: 'Rubik', sans-serif;
        -webkit-box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.2);
        -moz-box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.2);
        box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.2);
    }
}


</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#forg").click(function () {
                $(".forget").show();
                $(".log").hide();
            });

            $("#gotolog").click(function () {
                $(".forget").hide();
                $(".log").show();
            });
        });
    </script>

Leave a Reply

avatar
  Subscribe  
Notify of