Created
May 7, 2017 12:52
-
-
Save gus3inov/eca0689177b9856a03273993c81f89ae to your computer and use it in GitHub Desktop.
Form for log in
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| <div class="container"> | |
| <form action=""> | |
| <img src="http://www.iconsfind.com/wp-content/uploads/2015/08/20150831_55e46ad551392.png" alt="" | |
| width="120px" height="120px"/> | |
| <div class="dws-input"> | |
| <input type="text" name="username" placeholder="Enter your login"/> | |
| </div> | |
| <div class="dws-input"> | |
| <input type="password" name="password" placeholder="Enter your password"/> | |
| </div> | |
| <input class="dws-submit" type="submit" name="submit" value="Submit"/> | |
| <br /> | |
| <a href="#">Восстановить пароль</a> | |
| </form> | |
| <div class="social"> | |
| <i class="fa fa-vk" aria-hidden="true"></i> | |
| <i class="fa fa-twitter" aria-hidden="true"></i> | |
| <i class="fa fa-github" aria-hidden="true"></i> | |
| <i class="fa fa-instagram" aria-hidden="true"></i> | |
| <i class="fa fa-facebook" aria-hidden="true"></i> | |
| <i class="fa fa-google-plus" aria-hidden="true"></i> | |
| </div> | |
| </div> | |
| </body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body{ | |
| background-image: url(https://wallpaperbrowse.com/media/images/Background-4.jpg); | |
| } | |
| a{ | |
| color: #fff | |
| } | |
| a:hover{ | |
| text-decoration: none; | |
| } | |
| .container{ | |
| width: 450px; | |
| background-color: rgba(24, 33, 52, 0.7); | |
| text-align: center; | |
| box-shadow: 0 -5px #3adbfd; | |
| border-radius: 0 0 10px 10px; | |
| margin: 100px auto 0 auto; | |
| padding-bottom: 26px; | |
| } | |
| input[type="text"], input[type="password"]{ | |
| width: 300px; | |
| height: 50px; | |
| font-size: 18px; | |
| margin-bottom: 25px; | |
| border-radius: 4px; | |
| padding-left: 40px; | |
| } | |
| .container img{ | |
| margin: -60px 15px 0 0; | |
| border: 4px solid #1a394f; | |
| border-radius: 50%; | |
| margin-bottom: 20px; | |
| box-shadow: 0 -6px #3adbfd | |
| } | |
| .dws-submit{ | |
| padding: 13px 30px; | |
| margin: 5px 0 20px 0; | |
| font-size: 15px; | |
| color: #fff; | |
| background-color: #2ca8c6; | |
| border: none; | |
| border-bottom: 4px solid #6ee9fd; | |
| } | |
| .dws-submit:hover{ | |
| transition: all 0.5s; | |
| background-color: #fff; | |
| color: #2c536c; | |
| } | |
| .dws-input::before{ | |
| font-family: "FontAwesome"; | |
| content: "\f007"; | |
| position: absolute; | |
| font-size: 30px; | |
| padding: 10px 0 0 7px; | |
| color: #2c536c; | |
| } | |
| .dws-input:nth-child(3)::before{ | |
| content: "\f023"; | |
| } | |
| .dws-input:hover::before{ | |
| color: #319ebc; | |
| transition: all 0.3s; | |
| } | |
| .dws-input input:hover{ | |
| box-shadow: 0 0 6px 3px rgba(58, 219, 253, 0.32); | |
| } | |
| .social i{ | |
| color: #fff; | |
| font-size: 25px; | |
| width: 26px; | |
| margin-right: 15px; | |
| margin-top: 25px; | |
| } | |
| .social i:hover{ | |
| background-color: #fff; | |
| color: #1a394f; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment