<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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"> <div class="col-sm-6 col-md-4 col-md-offset-4"> <div class="account-wall"> <div id="my-tab-content" class="tab-content"> <div class="tab-pane active" id="login"> <img class="profile-img" src="https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/5/005/051/39c/3431f1d.jpg" alt=""> <form class="form-signin" action="" method=""> <input type="text" class="form-control" placeholder="Nom" required autofocus> <input type="password" class="form-control" placeholder="Mot de depasse" required> <input type="submit" class="btn btn-lg btn-default btn-block" value="S'identifier" /> </form> <div id="tabs" data-tabs="tabs"> <p class="text-center"><a href="#select" data-toggle="tab">Sélectionner un compte</a></p> </div> </div> <div class="tab-pane" id="select"> <div id="tabs" data-tabs="tabs"> <div class="media account-select"> <a href="#user1" data-toggle="tab"> <div class="pull-left"> <img class="select-img" src="https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/5/005/051/39c/3431f1d.jpg" alt=""> </div> <div class="media-body"> <h4 class="select-name">Nicolas</h4> </div> </a> </div> <hr /> <div class="media account-select"> <a href="#user2" data-toggle="tab"> <div class="pull-left"> <img class="select-img" src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xfp1/v/t1.0-1/c124.0.352.352/s160x160/1238804_10201881772275460_622377686_n.jpg?oh=d134dad63dd249c572ab3e877ffb9be5&oe=56089C73&__gda__=1439214926_a2d19542e69fa8078ec8b32adbb8691b" alt=""> </div> <div class="media-body"> <h4 class="select-name">Benjamin</h4> </div> </a> </div> <hr /> <div class="media account-select"> <a href="#user3" data-toggle="tab"> <div class="pull-left"> <img class="select-img" src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xtf1/v/t1.0-1/p160x160/10171237_10203953812912174_5167230126994856960_n.jpg?oh=236710a458d2f03b3ab1a20d969ade8d&oe=55CF31E4&__gda__=1438640754_51e9e5f83ec74ab9900c6bd023a41bba" alt=""> </div> <div class="media-body"> <h4 class="select-name">Mathieu</h4> </div> </a> </div> <hr /> <p class="text-center"><a href="#login" data-toggle="tab">Revenir en arrière</a></p> </div> </div> <div class="tab-pane" id="user1"> <img class="profile-img" src="https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/5/005/051/39c/3431f1d.jpg" alt=""> <h3 class="text-center">Nicolas</h3> <form class="form-signin" action="" method=""> <input type="hidden" class="form-control" value="User Name"> <input type="password" class="form-control" placeholder="Password" autofocus required> <input type="submit" class="btn btn-lg btn-default btn-block" value="S'identifier" /> </form> <p class="text-center"><a href="#login" data-toggle="tab">Revenir en arrière</a></p> <p class="text-center"><a href="#select" data-toggle="tab">Sélectionner un autre compte</a></p> </div> <div class="tab-pane" id="user2"> <img class="profile-img" src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xfp1/v/t1.0-1/c124.0.352.352/s160x160/1238804_10201881772275460_622377686_n.jpg?oh=d134dad63dd249c572ab3e877ffb9be5&oe=56089C73&__gda__=1439214926_a2d19542e69fa8078ec8b32adbb8691b" alt=""> <h3 class="text-center">Benjamin</h3> <form class="form-signin" action="" method=""> <input type="hidden" class="form-control" value="User Name"> <input type="password" class="form-control" placeholder="Password" autofocus required> <input type="submit" class="btn btn-lg btn-default btn-block" value="Sign In" /> </form> <p class="text-center"><a href="#login" data-toggle="tab">Revenir en arrière</a></p> <p class="text-center"><a href="#select" data-toggle="tab">Sélectionner un autre compte</a></p> </div> <div class="tab-pane" id="user3"> <img class="profile-img" src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xtf1/v/t1.0-1/p160x160/10171237_10203953812912174_5167230126994856960_n.jpg?oh=236710a458d2f03b3ab1a20d969ade8d&oe=55CF31E4&__gda__=1438640754_51e9e5f83ec74ab9900c6bd023a41bba" alt=""> <h3 class="text-center">Matthieu</h3> <form class="form-signin" action="" method=""> <input type="hidden" class="form-control" value="User Name"> <input type="password" class="form-control" placeholder="Password" autofocus required> <input type="submit" class="btn btn-lg btn-default btn-block" value="S'identifier" /> </form> <p class="text-center"><a href="#login" data-toggle="tab">Revenir en arrière</a></p> <p class="text-center"><a href="#select" data-toggle="tab">Sélectionner un autre compte</a></p> </div> </div> </div> </div> </div> </div>

body{ background-color:#f5f5f5; } .form-signin { max-width: 330px; padding: 15px; margin: 0 auto; } .form-signin .form-control { position: relative; font-size: 16px; height: auto; padding: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .form-signin .form-control:focus { z-index: 2; } .form-signin input[type="text"] { margin-bottom: -1px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .form-signin input[type="password"] { margin-bottom: 10px; border-top-left-radius: 0; border-top-right-radius: 0; } .account-wall { margin-top: 80px; padding: 40px 0px 20px 0px; background-color: #ffffff; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16); } .login-title { color: #555; font-size: 22px; font-weight: 400; display: block; } .profile-img { width: 96px; height: 96px; margin: 0 auto 10px; display: block; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } .select-img { border-radius: 50%; display: block; height: 75px; margin: 0 30px 10px; width: 75px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } .select-name { display: block; margin: 30px 10px 10px; } .logo-img { width: 96px; height: 96px; margin: 0 auto 10px; display: block; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; }