Page lock

Bootstrap snippet. Page lock, this snippet was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code.

HTML code

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview selection

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div  class="principal-container">
    <div class="container bootstrap snippet">
        <div class="page page-lock ng-scope">
            <div class="lock-centered clearfix">
                <div class="lock-container">
                    <section class="lock-box">
                        <div class="lock-user ng-binding">John smith</div>
                        <div class="lock-img"><img src="https://bootdey.com/img/Content/User_for_snippets.png" alt=""></div>
                        <div class="lock-pwd">
                            <form class="ng-pristine ng-valid">
                                <div class="form-group">
                                    <input type="password" placeholder="Password" class="form-control">
                                    <a href="#/" class="btn-submit">
                                        <i class="fa fa-arrow-right"></i>
                                    </a>
                                </div>
                            </form>
                        </div>            
                    </section>
                </div>
            </div>
        </div>
    </div>
</div>

CSS code

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview selection

.principal-container {
  background-color:#5bc0de;   
  height:800px;
  width:100% !important;
}

.page-lock .lock-centered {
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
  margin-top: -65px;
}
@media screen and (min-width: 768px) {
  .page-lock .lock-centered {
    margin-top: -75px;
  }
}
.page-lock .lock-container {
  position: relative;
  max-width: 420px;
  margin: 0 auto;
}
.page-lock .lock-box {
  position: absolute;
  left: 0;
  right: 0;
}
.page-lock .lock-box .lock-user {
  background: white;
  width: 50%;
  float: left;
  height: 50px;
  line-height: 50px;
  margin-top: 50px;
  padding: 0 20px;
  -moz-border-radius-topleft: 2px;
  -webkit-border-top-left-radius: 2px;
  border-top-left-radius: 2px;
  -moz-border-radius-bottomleft: 2px;
  -webkit-border-bottom-left-radius: 2px;
  border-bottom-left-radius: 2px;
  color: #1c7ebb;
}
.page-lock .lock-box .lock-img img {
  position: absolute;
  border-radius: 50%;
  left: 40%;
  width: 80px;
  height: 80px;
  border: 6px solid white;
  background: white;
}
@media screen and (min-width: 768px) {
  .page-lock .lock-box .lock-img img {
    left: 33%;
    width: 150px;
    height: 150px;
    border: 10px solid white;
  }
}
.page-lock .lock-box .lock-pwd {
  background: white;
  width: 50%;
  float: right;
  height: 50px;
  line-height: 50px;
  padding: 0 0 0 50px;
  margin-top: 50px;
  -moz-border-radius-topright: 2px;
  -webkit-border-top-right-radius: 2px;
  border-top-right-radius: 2px;
  -moz-border-radius-bottomright: 2px;
  -webkit-border-bottom-right-radius: 2px;
  border-bottom-right-radius: 2px;
  color: #1c7ebb;
}
@media screen and (min-width: 768px) {
  .page-lock .lock-box .lock-pwd {
    padding: 0 0 0 80px;
  }
}
.page-lock .lock-box .lock-pwd input {
  width: 80%;
  height: 50px;
  color: #555555;
  border: 0;
}
.page-lock .lock-box .lock-pwd .btn-submit {
  position: absolute;
  top: 50%;
  right: 20px;
}

                                    

Similar snippets

Bootstrap snippet bs4 blog post with image hover

bs4 blog post with image hover

View

Bootstrap snippet bs4 simple social network post

bs4 simple social network post

View

Bootstrap snippet bs4 ecommerce products

bs4 ecommerce products

View

About this snippet

Creator: Dey Dey

Bootstrap version: 3.3.0

Created: Nov 7th 2014, 14:02

Views: 4.2K

Rated 5/5 based on 3 reviews