Categories
- Accordion (17)
- Common Mistake (19)
- English Writing (275)
- Grammar (55)
- Hover Effects (5)
- Login (14)
- Myanmar Grade 10 (19)
- Other Ways to Say (31)
- Shoping Carts (10)
- sidebar (6)
- Slider (9)
- Speaking (42)
- Synonyms (37)
- Tables (7)
- Transition Words (1)

See the Pen Bootstrap Tumblr Login by Ace Subido (@ace-subido) on CodePen.
<div id="fullBg" />
<div class="container">
<form class="form-signin">
<h1 class="form-signin-heading">Please Login</h1>
<input type="text" class="form-control" name="username" placeholder="Email Address" required="" autofocus="" />
<input type="password" class="form-control" name="password" placeholder="Password" required=""/>
<button class="btn btn-lg btn-primary btn-block" type="submit">Log in</button>
</form>
<p class="text-center sign-up"><strong>Sign up</strong> for a new account</p>
</div>
@import "bourbon";
#fullBg {
z-index: -1;
height: 100%;
width: 100%;
position: absolute;
top: 0px;
background: url('https://31.media.tumblr.com/3b08b64bfe69d670c91c03a5e2fd42b6/tumblr_mv5lnjrRQ51qfj2dqo1_1280.jpg') no-repeat center center fixed;
background-size: cover;
}
.form-signin {
max-width: 280px;
margin: 60px auto 10px;
.form-signin-heading {
text-align: center;
font-weight: bold;
color: #fff;
margin-bottom: 20px;
}
.checkbox {
font-weight: normal;
}
.form-control {
position: relative;
font-size: 16px;
height: auto;
padding: 10px;
@include box-sizing(border-box);
}
input[type="text"] {
margin-bottom: -1px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
border-left: 1px solid transparent;
box-shadow: none;
border-radius: 3px 3px 0px 0px;
&:focus {
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
}
}
input[type="password"] {
z-index: 2;
margin-bottom: 20px;
border-top: none;
border-bottom: 1px solid transparent;
border-right: 1px solid transparent;
border-left: 1px solid transparent;
border-radius: 0px 0px 3px 3px;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
&:focus {
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0px 1px 0px 0px rgba(255,255,255,0.5);
}
}
.btn {
font-weight: bold;
border-radius: 3px;
border: none;
}
}
p.sign-up {
color: #fff;
font-size: 12px;
}
Tag : HTML+Css
Leave a Reply