SHARE
TWEET

Login Form

wildanfuady Dec 8th, 2019 176 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <title>Login</title>
  5.     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
  6.     <style>
  7.     body{
  8.         background: #14214d;
  9.     }
  10.     .left{
  11.         margin-left: 200px;
  12.         margin-top: 200px;
  13.         width: 500px;
  14.         height: 400px;
  15.         background: #44c7f5;
  16.         float: left;
  17.         color: white;
  18.         font-family: Arial, Helvetica, sans-serif;
  19.         padding-left: 50px;
  20.         padding-top: 100px;
  21.     }
  22.     .left h1{
  23.         font-size: 40px;
  24.     }
  25.     .left input[type=radio] {
  26.         border: 0px;
  27.         width: 30px;
  28.         height: 2em;
  29.         border: none;
  30.         outline: none;
  31.     }
  32.     .left span{
  33.         font-size: 30px;
  34.         margin-top: 0px;
  35.     }
  36.     .right{
  37.         padding-left: 50px;
  38.         padding-top: 100px;
  39.         margin-top: 200px;
  40.         width: 500px;
  41.         height: 400px;
  42.         background: #ffffff;
  43.         float: left;
  44.     }
  45.     .right h1{
  46.         color: #44c7f5;
  47.         font-family: Arial, Helvetica, sans-serif;
  48.     }
  49.     .right input[type=text]{
  50.         width: 300px;
  51.         padding: 20px;
  52.         border-left: transparent;
  53.         border-right: transparent;
  54.         border-top: transparent;
  55.         border-bottom: 1px solid #8a8686;
  56.     }
  57.     .btn-login{
  58.         margin-top: 100px;
  59.         background: transparent;
  60.         border: none;
  61.         padding: 15px 30px;
  62.         border-radius: 20px;
  63.         border: 2px solid aqua;
  64.         color: aqua;
  65.         float: left;
  66.     }
  67.     .btn-login:hover{
  68.         border: 2px solid black;
  69.         color: black;
  70.     }
  71.     .or-login{
  72.          margin-top: 115px;
  73.          margin-left:80px;
  74.          margin-right:30px;
  75.          font-size: 20px;
  76.          color: grey;
  77.          float: left
  78.     }
  79.     .social-media{
  80.         margin-top: 110px;
  81.     }
  82.     </style>
  83. </head>
  84. <body>
  85.     <div class="left">
  86.         <h1>Login Static Form</h1>
  87.         <input type="radio"> <span>Pilihan 1</span>
  88.         <br>
  89.         <input type="radio"> <span>Pilihan 1</span>
  90.         <br>
  91.         <input type="radio"> <span>Pilihan 1</span>
  92.     </div>
  93.     <div class="right">
  94.         <h1>Login</h1>
  95.         <input type="text" placeholder="Email">
  96.         <br>
  97.         <input type="text" placeholder="Password">
  98.         <br>
  99.         <button class="btn-login">LOGIN</button>
  100.         <div class="or-login">Or Login with </div>
  101.         <div class="social-media">
  102.             <i class="fab fa-facebook" style="color: blue;font-size: 35px"></i>
  103.             <i class="fab fa-twitter-square" style="color: aqua;font-size: 35px"></i>
  104.             <i class="fab fa-google-plus" style="color: red;font-size: 35px"></i>
  105.         </div>
  106.     </div>
  107. </body>
  108. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top