Cloud Computing Course
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

193 lines
2.7 KiB

3 years ago
  1. body {
  2. font-family: 'Montserrat', sans-serif;
  3. text-rendering : optimizeLegibility;
  4. -webkit-font-smoothing : antialiased;
  5. }
  6. #login-bg.container-fluid {
  7. padding: 0;
  8. height: 100%;
  9. position: absolute;
  10. }
  11. /* Background image an color divs*/
  12. .bg-img , .bg-color {
  13. min-width: 50%;
  14. vertical-align: top;
  15. padding: 0;
  16. margin-left: 0;
  17. height: 100%;
  18. background-color: #CAF0D3;
  19. display: inline-block;
  20. overflow: hidden;
  21. }
  22. .bg-color {
  23. margin-left: -5px;
  24. }
  25. .bg-img {
  26. background-image: url(/static/bg-image.jpeg);
  27. background-size: cover;
  28. }
  29. #login{
  30. padding-top: 10%;
  31. text-align: center;
  32. text-transform: uppercase;
  33. }
  34. .login {
  35. width: 100%;
  36. height: 500px;
  37. background-color: #fff;
  38. padding: 15px;
  39. padding-top: 30px;
  40. }
  41. .login h1 {
  42. margin-top: 30px;
  43. font-weight: bold;
  44. font-size: 60px;
  45. letter-spacing: 3px;
  46. }
  47. .login form {
  48. max-width: 420px;
  49. margin: 30px auto;
  50. }
  51. .login .btn {
  52. border-radius: 50px;
  53. text-transform: uppercase;
  54. font-weight: bold;
  55. letter-spacing: 2px;
  56. font-size: 20px;
  57. padding: 14px;
  58. background-color: #00B72E;
  59. }
  60. .form-group input {
  61. font-size: 20px;
  62. font-weight: lighter;
  63. border: none;
  64. background-color: #F0F0F0;
  65. color: #465347!important;
  66. padding: 26px 30px;
  67. border-radius: 50px;
  68. transition : 0.2s;
  69. }
  70. /* Form check styles*/
  71. .form-check {
  72. padding: 0;
  73. text-align: left;
  74. }
  75. .form-check label {
  76. vertical-align: top;
  77. padding-top: 5px;
  78. padding-left: 5px;
  79. font-size: 15px;
  80. color: #606060;
  81. font-size: 14px;
  82. }
  83. .forgot-password {
  84. text-align: right;
  85. float: right;
  86. font-weight: bold;
  87. }
  88. .forgot-password a {
  89. color: #00B72E;
  90. opacity: 0.6;
  91. }
  92. .forgot-password a:hover {
  93. opacity: 1;
  94. }
  95. /* Switch styles */
  96. .switch {
  97. position: relative;
  98. display: inline-block;
  99. width: 60px;
  100. height: 30px;
  101. }
  102. /* Hide default HTML checkbox */
  103. .switch input {display:none;}
  104. /* The slider */
  105. .slider {
  106. position: absolute;
  107. cursor: pointer;
  108. top: 0;
  109. left: 0;
  110. right: 0;
  111. bottom: 0;
  112. background-color: #F0F0F0;
  113. -webkit-transition: .4s;
  114. transition: .4s;
  115. border-radius: 30px;
  116. }
  117. .slider:before {
  118. position: absolute;
  119. content: "";
  120. height: 22px;
  121. width: 22px;
  122. left: 4px;
  123. bottom: 4px;
  124. background-color: white;
  125. -webkit-transition: .4s;
  126. transition: .4s;
  127. border-radius: 50%;
  128. }
  129. input:checked + .slider {
  130. background-color: #00B72E;
  131. }
  132. input:focus + .slider {
  133. box-shadow: 0 0 1px #00B72E;
  134. }
  135. input:checked + .slider:before {
  136. -webkit-transform: translateX(30px);
  137. -ms-transform: translateX(30px);
  138. transform: translateX(30px);
  139. }
  140. /* Media queries */
  141. @media(max-width: 500px) {
  142. .bg-img , .bg-color {
  143. min-width: 100%;
  144. height: 50%;
  145. margin: 0;
  146. }
  147. .forgot-password {
  148. text-align: right;
  149. float: left;
  150. padding: 20px 0;
  151. }
  152. #login {
  153. padding-top: 50px;
  154. }
  155. }