Bootstrap Snippet Pinterest like login box using HTML CSS Bootstrap

"Pinterest like login box"
Bootstrap 3.0.0 Snippet by azhagu

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
        <form class="form-signin mg-btm">
        <h3 class="heading-desc">
        <button type="button" class="close pull-right" aria-hidden="true">×</button>
        Login to Bootsnipp</h3>
        <div class="social-box">
            <div class="row mg-btm">
             <div class="col-md-12">
                <a href="#" class="btn btn-primary btn-block">
                  <i class="icon-facebook"></i> ···Login with Facebook
                </a>
            </div>
            </div>
            <div class="row">
            <div class="col-md-12">
                <a href="#" class="btn btn-info btn-block" >
                  <i class="icon-twitter"></i> ···Login with Twitter
                </a>
            </div>
          </div>
        </div>
        <div class="main">  
        
        <input type="text" class="form-control" placeholder="Email" autofocus>
        <input type="password" class="form-control" placeholder="Password">
         
        Are you a business? <a href=""> Get started here</a>
        <span class="clearfix"></span>  
        </div>
        <div class="login-footer">
        <div class="row">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.form-signin {
  max-width: 400px; 
  display:block;
  background-color: #f7f7f7;
  -moz-box-shadow: 0 0 3px 3px #888;
    -webkit-box-shadow: 0 0 3px 3px #888;
    box-shadow: 0 0 3px 3px #888;
  border-radius:2px;
}
.main{
    padding: 38px;
}
.social-box{
  margin: 0 auto;
  padding: 38px;
  border-bottom:1px #ccc solid;
}
.social-box a{
  font-weight:bold;
  font-size:18px;
  padding:8px;
}
.social-box a i{
  font-weight:bold;
  font-size:20px;
}
.heading-desc{
    font-size:20px;
    font-weight:bold;
    padding:38px 38px 0px 38px;
    
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
  margin-bottom: 10px;
}
.form-signin .checkbox {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Questions / Comments:

Posting GuidelinesFormatting

Very nice

Junaid Atari () - 10 years ago - Reply 0

Used that today. Don't know why, but link to css file not working. Added strings:

Maya () - 10 years ago - Reply 0

Perhaps a stupid question, but I am really new to it! How could I implement this form in joomla 3? Is it possible via custom htlm module?