CSS FORM UYGULAMASI - GİRİŞ FORMU

HTML

  <form action="" method="post">  
   <h2 align="center"> GİRİŞ YAP</h2>  

   <label for="k_adi"> KULLANICI ADI </label>  
   <input type="text" placeholder="Kullanıcı Adınız.." name="k_adi" id="k_adi" />  
   <label for="sifre"> ŞİFRE </label>  
   <input type="password" placeholder="Şifreniz.." name="sifre" id="sifre"    />  

   <a href="">Şifremi Unuttum!</a>  

   <input type="checkbox"  name="remember" id="remember"  /> 
   <label for="remember">Beni Hatırla </label>  

   <button type="submit">GİRİŞ</button>  
 </form> 

CSS

* { box-sizing:border-box; }
  body {
    font-family: calibri;
    background-color:#222; 
  }
  @media (max-width:1200px) { html { font-size:.8rem } }
  @media (max-width:768px) {  html { font-size:.5rem } } 

  form  {
    width:350px; 
    margin:6rem auto;    
    padding: 2rem;
    color:#aaa;
    border:1px solid #ccc;
    border-radius: 1rem;
    box-shadow: 1rem 1rem 2rem #aaa;
  }
  form h2 {color:#fff;margin-bottom:3rem}
  form label { margin-top:1.5rem;font-weight: bold;}
  form input  { 
    margin-top:7px;
    margin-bottom:1rem;
    padding:.7rem 1rem;
    border-radius:5px;
    border:1px solid #ccc
  }
  form input[type=text],form input[type=password]  {
    width:100%; display: block; 
  }
  form input:focus { 
    outline:none;
    border:1px solid orange;
  }
  form button {
    width:100%;
    background: orange;
    color: #fff;
    border:none;
    padding: 1rem;
    cursor:pointer;
    border-radius:5px;
    font-weight:bold;

  }   
  form  a {
    text-decoration:none;
    color: orange;
    display:block;
    margin:2rem 0  
  }