Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>Login</title>
- <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
- <style>
- body{
- background: #14214d;
- }
- .left{
- margin-left: 200px;
- margin-top: 200px;
- width: 500px;
- height: 400px;
- background: #44c7f5;
- float: left;
- color: white;
- font-family: Arial, Helvetica, sans-serif;
- padding-left: 50px;
- padding-top: 100px;
- }
- .left h1{
- font-size: 40px;
- }
- .left input[type=radio] {
- border: 0px;
- width: 30px;
- height: 2em;
- border: none;
- outline: none;
- }
- .left span{
- font-size: 30px;
- margin-top: 0px;
- }
- .right{
- padding-left: 50px;
- padding-top: 100px;
- margin-top: 200px;
- width: 500px;
- height: 400px;
- background: #ffffff;
- float: left;
- }
- .right h1{
- color: #44c7f5;
- font-family: Arial, Helvetica, sans-serif;
- }
- .right input[type=text]{
- width: 300px;
- padding: 20px;
- border-left: transparent;
- border-right: transparent;
- border-top: transparent;
- border-bottom: 1px solid #8a8686;
- }
- .btn-login{
- margin-top: 100px;
- background: transparent;
- border: none;
- padding: 15px 30px;
- border-radius: 20px;
- border: 2px solid aqua;
- color: aqua;
- float: left;
- }
- .btn-login:hover{
- border: 2px solid black;
- color: black;
- }
- .or-login{
- margin-top: 115px;
- margin-left:80px;
- margin-right:30px;
- font-size: 20px;
- color: grey;
- float: left
- }
- .social-media{
- margin-top: 110px;
- }
- </style>
- </head>
- <body>
- <div class="left">
- <h1>Login Static Form</h1>
- <input type="radio"> <span>Pilihan 1</span>
- <br>
- <input type="radio"> <span>Pilihan 1</span>
- <br>
- <input type="radio"> <span>Pilihan 1</span>
- </div>
- <div class="right">
- <h1>Login</h1>
- <input type="text" placeholder="Email">
- <br>
- <input type="text" placeholder="Password">
- <br>
- <button class="btn-login">LOGIN</button>
- <div class="or-login">Or Login with </div>
- <div class="social-media">
- <i class="fab fa-facebook" style="color: blue;font-size: 35px"></i>
- <i class="fab fa-twitter-square" style="color: aqua;font-size: 35px"></i>
- <i class="fab fa-google-plus" style="color: red;font-size: 35px"></i>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement