Guest User

Untitled

a guest
Feb 2nd, 2021
152
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. .vertical-center {
  2. /*Used to align all the things to the center*/
  3. min-height: 100%;
  4. /* Fallback for browsers do NOT support vh unit */
  5. min-height: 100vh;
  6. /* These two lines are counted as one :-) */
  7. display: flex;
  8. align-items: center;
  9. }
  10.  
  11. .error-message {
  12. color: red;
  13. }
  14.  
  15. .container {
  16. max-width: 50%;
  17. }
  18.  
  19. .login-container form {
  20. padding: 10%;
  21. }
  22.  
  23. .login-form {
  24. padding: 5%;
  25.  
  26. box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);
  27. }
  28.  
  29. .login-form h3 {
  30. text-align: center;
  31. color: #333;
  32. }
  33.  
  34. .login-form h6 {
  35. text-align: center;
  36. color: #333;
  37. }
  38.  
  39. .login-form .ForgetPwd {
  40. color: #0062cc;
  41. font-weight: 600;
  42. text-decoration: none;
  43. }
  44. body {
  45. }
  46.  
  47. .profileimage {
  48. max-width: 35px;
  49. max-height: 35px;
  50. }
  51.  
  52. td, th {
  53. text-align:center;
  54. }
  55.  
  56. img {
  57. -webkit-user-drag: none;
  58. -khtml-user-drag: none;
  59. -moz-user-drag: none;
  60. -o-user-drag: none;
  61. user-drag: none;
  62. }
  63.  
  64. .error-message {
  65. color:red;
  66. }
  67. *{
  68. padding: 0;
  69. margin: 0;
  70. box-sizing: border-box;
  71. }
  72.  
  73. body{
  74. font-family: 'Poppins', sans-serif;
  75. overflow: scroll;
  76. }
  77.  
  78. .wave{
  79. position: fixed;
  80. bottom: 0;
  81. left: 0;
  82. height: 100%;
  83. z-index: -1;
  84. }
  85.  
  86. height: 2px;
  87. .container{
  88. width: 100vw;
  89. height: 100vh;
  90. display: grid;
  91. grid-template-columns: repeat(2, 1fr);
  92. grid-gap :7rem;
  93. padding: 0 2rem;
  94. }
  95. .container_main{
  96. width: 100vw;
  97. height: 100vh;
  98. display: grid;
  99. grid-template-columns: repeat(2, 1fr);
  100. grid-gap :7rem;
  101. padding: 0 2rem;
  102. }
  103.  
  104. .container-forgot{
  105. width: 100vw;
  106. display: grid;
  107. grid-template-columns: repeat(2, 1fr);
  108. grid-gap :7rem;
  109. padding: 0 2rem;
  110. }
  111. .img{
  112. display: flex;
  113. justify-content: flex-end;
  114. align-items: center;
  115. }
  116.  
  117. .login-content{
  118. display: flex;
  119. justify-content: flex-start;
  120. align-items: center;
  121. text-align: center;
  122. }
  123.  
  124. .img img{
  125. width: 500px;
  126. }
  127.  
  128. form{
  129. width: 360px;
  130. }
  131.  
  132. .login-content img{
  133. height: 100px;
  134. }
  135.  
  136. .login-content h2{
  137. margin: 15px 0;
  138. color: #333;
  139. text-transform: uppercase;
  140. font-size: 2.9rem;
  141. }
  142.  
  143. .login-content .input-div{
  144. position: relative;
  145. display: grid;
  146. grid-template-columns: 7% 93%;
  147. margin: 25px 0;
  148. padding: 5px 0;
  149. border-bottom: 2px solid #d9d9d9;
  150. }
  151.  
  152. .login-content .input-div.one{
  153. margin-top: 0;
  154. }
  155.  
  156. .i{
  157. color: #d9d9d9;
  158. display: flex;
  159. justify-content: center;
  160. align-items: center;
  161. }
  162.  
  163. .i i{
  164. transition: .3s;
  165. }
  166.  
  167. .input-div > div{
  168. position: relative;
  169. height: 45px;
  170. }
  171.  
  172. .input-div > div > h5{
  173. position: absolute;
  174. left: 10px;
  175. top: 50%;
  176. transform: translateY(-50%);
  177. color: #999;
  178. font-size: 18px;
  179. transition: .3s;
  180. }
  181.  
  182. .input-div:before, .input-div:after{
  183. content: '';
  184. position: absolute;
  185. bottom: -2px;
  186. width: 0%;
  187. height: 2px;
  188. background-color: #38d39f;
  189. transition: .4s;
  190. }
  191.  
  192. .input-div:before{
  193. right: 50%;
  194. }
  195.  
  196. .input-div:after{
  197. left: 50%;
  198. }
  199.  
  200. .input-div.focus:before, .input-div.focus:after{
  201. width: 50%;
  202. }
  203.  
  204. .input-div.focus > div > h5{
  205. top: -5px;
  206. font-size: 15px;
  207. }
  208.  
  209. .input-div.focus > .i > i{
  210. color: #38d39f;
  211. }
  212.  
  213. .input-div > div > input{
  214. position: absolute;
  215. left: 0;
  216. top: 0;
  217. width: 100%;
  218. height: 100%;
  219. border: none;
  220. outline: none;
  221. background: none;
  222. padding: 0.5rem 0.7rem;
  223. font-size: 1.2rem;
  224. color: #555;
  225. font-family: 'poppins', sans-serif;
  226. }
  227.  
  228. .input-div.pass{
  229. margin-bottom: 4px;
  230. }
  231.  
  232. a{
  233. display: block;
  234. text-align: right;
  235. text-decoration: none;
  236. color: #999;
  237. font-size: 0.9rem;
  238. transition: .3s;
  239. }
  240.  
  241. a:hover{
  242. color: #38d39f;
  243. }
  244.  
  245. .btn{
  246. display: block;
  247. width: 100%;
  248. height: 50px;
  249. border-radius: 25px;
  250. outline: none;
  251. border: none;
  252. background-image: linear-gradient(to right, #32be8f, #38d39f, #32be8f);
  253. background-size: 200%;
  254. font-size: 1.2rem;
  255. color: #fff;
  256. font-family: 'Poppins', sans-serif;
  257. text-transform: uppercase;
  258. margin: 1rem 0;
  259. cursor: pointer;
  260. transition: .5s;
  261. }
  262. .btn:hover{
  263. background-position: right;
  264. }
  265.  
  266.  
  267. @media screen and (max-width: 1050px){
  268. .container{
  269. grid-gap: 5rem;
  270. }
  271. }
  272.  
  273. @media screen and (max-width: 1000px){
  274. form{
  275. width: 290px;
  276. }
  277.  
  278. .login-content h2{
  279. font-size: 2.4rem;
  280. margin: 8px 0;
  281. }
  282.  
  283. .img img{
  284. width: 400px;
  285. }
  286. }
  287.  
  288. @media screen and (max-width: 900px){
  289. .container{
  290. grid-template-columns: 1fr;
  291. }
  292.  
  293. .img{
  294. display: none;
  295. }
  296.  
  297. .wave{
  298. display: none;
  299. }
  300.  
  301. .login-content{
  302. justify-content: center;
  303. }
  304. }
RAW Paste Data