Facebook
From Enez Düzenli, 1 Month ago, written in HTML5.
Embed
Download Paste or View Raw
Hits: 184
  1. <!DOCTYPE html>
  2. &lt;html lang="en"&gt;
  3. &lt;head&gt;
  4.     &lt;title&gt;Kullanıcı Giriş &lt;/title&gt;
  5.  
  6.     &lt;link rel="preconnect" href="https://fonts.gstatic.com"&gt;
  7.     &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"&gt;
  8.     >
  9.     &lt;!--Stylesheet--&gt;
  10.     &lt;style media="screen"&gt;
  11.       *,
  12. *:before,
  13. *:after{
  14.     padding: 0;
  15.     margin: 0;
  16.     box-sizing: border-box;
  17. }
  18. body{
  19.     background-color: #2b2d42;
  20. }
  21. .background{
  22.     width: 430px;
  23.     height: 520px;
  24.     position: absolute;
  25.     transform: translate(-50%,-50%);
  26.     left: 50%;
  27.     top: 50%;
  28. }
  29. .background .shape{
  30.     height: 200px;
  31.     width: 200px;
  32.     position: absolute;
  33.     border-radius: 50%;
  34. }
  35. .shape:first-child{
  36.     background: linear-gradient(
  37.         #edf2f4,
  38.         #ef233c
  39.     );
  40.     left: -80px;
  41.     top: -80px;
  42. }
  43. .shape:last-child{
  44.     background: linear-gradient(
  45.         to right,
  46.         #edf2f4,
  47.         #d90429
  48.     );
  49.     right: -30px;
  50.     bottom: -80px;
  51. }
  52. form{
  53.     height: 700px;
  54.     width: 400px;
  55.     background-color: rgba(255,255,255,0.13);
  56.     position: absolute;
  57.     transform: translate(-50%,-50%);
  58.     top: 50%;
  59.     left: 50%;
  60.     border-radius: 10px;
  61.     backdrop-filter: blur(10px);
  62.     border: 2px solid rgba(255,255,255,0.1);
  63.     box-shadow: 0 0 40px rgba(8,7,16,0.6);
  64.     padding: 50px 35px;
  65. }
  66. form *{
  67.     font-family: 'Poppins',sans-serif;
  68.     color: #ffffff;
  69.     letter-spacing: 0.5px;
  70.     outline: none;
  71.     border: none;
  72. }
  73. form h3{
  74.     font-size: 25px;
  75.     font-weight: 500;
  76.     line-height: 42px;
  77.     text-align: center;
  78. }
  79.  
  80. label{
  81.     display: block;
  82.     margin-top: 30px;
  83.     font-size: 18px;
  84.     font-weight: 500;
  85. }
  86. input{
  87.     display: block;
  88.     height: 50px;
  89.     width: 100%;
  90.     background-color: rgba(255,255,255,0.07);
  91.     border-radius: 3px;
  92.     padding: 0 10px;
  93.     margin-top: 8px;
  94.     font-size: 14px;
  95.     font-weight: 100;
  96. }
  97. ::placeholder{
  98.     color: #e5e5e5;
  99. }
  100. button{
  101.     margin-top: 50px;
  102.     width: 100%;
  103.     background-color: #ffffff;
  104.     color: #080710;
  105.     padding: 15px 0;
  106.     font-size: 18px;
  107.     font-weight: 600;
  108.     border-radius: 5px;
  109.     cursor: pointer;
  110. }
  111. .social{
  112.   margin-top: 30px;
  113.   display: flex;
  114. }
  115.  
  116.     &lt;/style&gt;
  117. &lt;/head&gt;
  118. &lt;body&gt;
  119.     <div class="background">
  120.         <div class="shape"></div>
  121.         <div class="shape"></div>
  122.         <div class="card"></div>
  123.     </div>
  124.     &lt;form&gt;
  125.         <div>
  126.             <label
  127.                
  128.                 &lt;form acti method="post" &gt;
  129.                        <h3> Kullanıcı Giriş Ekranı </h3>
  130.                     <div class="mb-3">
  131.                     <label for="exampleInputEmail1" class="form-label">Ad Soyad</label>
  132.                     &lt;input type="text" class="form-control is-invalid" id="exampleInputEmail1" name="adsoyad"&gt;
  133.                    
  134.                     </div>
  135.    
  136.                     <div class="mb-3">
  137.                     <label for="exampleInputPassword1" class="form-label">Email </label>
  138.                     &lt;input type="email" class="form-control is-invalid" id="exampleInputPassword1" name="email"&gt;
  139.                    
  140.                     </div>
  141.    
  142.                     <div class="mb-3">
  143.                     <label for="exampleInputPassword1" class="form-label">Şifre</label>
  144.                     &lt;input type="password" class="form-control is-invalid" id="exampleInputPassword1" name="parola"&gt;
  145.                    
  146.                     </div>
  147.    
  148.                     <button type="submit" name="kaydet" class="btn btn-primary">Kayıt Ol</button>
  149.             &lt;/form&gt;
  150.    
  151.             </div>
  152.         </div>
  153.     &lt;/form&gt;
  154. &lt;/body&gt;
  155. &lt;/html&gt;
  156.  
  157.