document.write('
Data hosted with ♥ by Pastebin.com - Download Raw - See Original
  1. @import url(\'https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&family=Roboto&display=swap\');
  2. *{
  3.     margin: 0;
  4.     padding: 0;
  5.     box-sizing: border-box;
  6. }
  7.  
  8. body{
  9.     min-height: 100vh;
  10.     background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(images/night.jpg);
  11.     font-family: \'Poppins\', sans-serif;
  12.     display: flex;
  13.     align-items: center;
  14.     justify-content: center;
  15.     padding: 30px;
  16. }
  17.  
  18. header{
  19.     width: 100%;
  20.     height: 10vh;
  21.     display: flex;
  22.     align-items: center;
  23.     justify-content: space-between;
  24. }
  25.  
  26. .logo{
  27.     width: 100%;
  28.     height: 10vh;
  29.     background-color: midnightblue;
  30.     display: flex;
  31.     align-items: center;
  32.     justify-content: center;
  33.     color: #fff;
  34.     clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  35.     padding: 10px;
  36.     line-height: 1.3rem;
  37.     border-top-left-radius: 10px;
  38.     border-top-right-radius: 10px;
  39.  
  40. }
  41.  
  42. .logo li p{
  43.     width: 130px;
  44.     margin-left: 10px;
  45.     font-size: 20px;
  46. }
  47.  
  48. .logo .fas{
  49.     padding-right: 1rem;
  50.     font-size: 70 px;
  51. }
  52.  
  53. .container{
  54.     position: relative;
  55.     max-width: 430px;
  56.     width: 100%;
  57.     background-color: rgb(255, 255, 255);
  58.     box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  59.     border-radius: 10px;
  60.     overflow: hidden;
  61. }
  62.  
  63. .container .forms{
  64.     display: flex;
  65.     align-items: center;
  66.     width: 200%;
  67.     height: 440px;
  68.     transition: height 0.2s ease;
  69. }
  70.  
  71.  
  72. .container .form{
  73.     width: 50%;
  74.     padding: 30px;
  75.     background-color: #fff;
  76.     transition: margin-left 0.18s ease;
  77. }
  78.  
  79. .container.active .login{
  80.     margin-left: -50%;
  81.     opacity: 0;
  82.     transition: margin-left 0.18s ease, opacity 0.15s ease;
  83. }
  84.  
  85. .container .signup{
  86.     opacity: 0;
  87.     transition: opacity 0.09s ease;
  88. }
  89.  
  90. .container.active .signup{
  91.     opacity: 1;
  92.     transition: opacity 0.2s ease;
  93.  
  94. }
  95.  
  96. .container.active .forms{
  97.     height: 599px;
  98.  
  99. }
  100.  
  101. .container .form .title{
  102.     position: relative;
  103.     font-size: 27px;
  104.     font-weight: 600;
  105.  
  106. }
  107.  
  108. .form .title::before{
  109.     content: \'\';
  110.     position: absolute;
  111.     left: 0;
  112.     height: 3px;
  113.     width: 82px;
  114.     background-color: cyan;
  115.     border-radius: 25px;
  116.  
  117. }
  118.  
  119. .form .input-field{
  120.     margin-top: 30px;
  121.     height: 50px;
  122.     width: 100%;
  123.     position: relative;
  124. }
  125.  
  126. .input-field input{
  127.     position: absolute;
  128.     height: 100%;
  129.     width: 100%;
  130.     padding:  0 35px;
  131.     border: none;
  132.     outline: none;
  133.     font-size: 16px;
  134.     border-bottom: 2px solid #ccc;
  135.     border-top: 2px solid transparent;
  136.     transition: all 0.2s ease;
  137. }
  138.  
  139. .input-field input:is(:focus, :valid){
  140.     border-bottom-color: orange;
  141. }
  142.  
  143. .input-field .fas{
  144.     position: absolute;
  145.     top: 50%;
  146.     transform: translateY(-50%);
  147.     color: black;
  148.     font-size: 23px;
  149.     transition: all 0.2s ease;
  150.  
  151. }
  152.  
  153. .input-field input:is(:focus, :valid) ~ .fas{
  154.     color: orange;
  155. }
  156.  
  157. .input-field .fas.icon{
  158.     left: 0;
  159.  
  160. }
  161.  
  162. .input-field .fas.hidePW{
  163.     right: 0;
  164.     cursor: pointer;
  165.     padding: 10px;
  166.  
  167.    
  168. }
  169.  
  170. .form .checkbox-text{
  171.     display: flex;
  172.     align-items: center;
  173.     justify-content: space-between;
  174.     margin-top: 20px;
  175. }
  176.  
  177. .checkbox-text .checkbox-content{
  178.  
  179.     display: flex;
  180.     align-items: center;
  181. }
  182.  
  183. .checkbox-content input{
  184.     accent-color: #4070f4;
  185.     margin: 0 8px -2px 4px;
  186. }
  187.  
  188. .form .text{
  189.  
  190.     color: #333;
  191.     font-size: 14px;
  192. }
  193.  
  194. .form a.text{
  195.     color: blue;
  196.     text-decoration: none;
  197.  
  198. }
  199.  
  200. .form a:hover{
  201.     text-decoration: underline;
  202.    
  203. }
  204.  
  205. .form a:hover{
  206.     text-decoration: underline;
  207. }
  208.  
  209. .form .button{
  210.     margin-top: 35px;
  211.  
  212. }
  213.  
  214. .form .button input{
  215.     border: none;
  216.     background-color: rgb(238, 175, 56);
  217.     letter-spacing: 1px;
  218.     border-radius: 5px;
  219.     font-size: 20px;
  220.     font-weight: 500;
  221.     cursor: pointer;
  222.     transition: all 0.3s ease;
  223. }
  224.  
  225. .button input:hover{
  226.     background-color: orange;
  227. }
  228.  
  229. .form .login-sign{
  230.     margin-top: 30px;
  231.     text-align: center;
  232.  
  233. }
  234.  
');