landing.css 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. #publicStrand{
  2. display: flex;
  3. flex-direction: column;
  4. }
  5. .main-background{
  6. display: flex;
  7. align-items: center;
  8. justify-content: center;
  9. background-image: url("/shared/images/backgroundImg01.jpg");
  10. background-repeat: no-repeat;
  11. background-size: cover;
  12. height: 88vh;
  13. width: 100%;
  14. color: rgb(0, 27, 45);
  15. }
  16. .public-buttons{
  17. position: absolute;
  18. right: 50px;
  19. top: 80px;
  20. }
  21. .public-buttons *{
  22. margin: 10px;
  23. }
  24. .logo-text{
  25. display: flex;
  26. flex-direction: column;
  27. justify-content: center;
  28. align-items: center;
  29. max-width: 50vw;
  30. text-align: center;
  31. }
  32. .logo-text img{
  33. max-height: 25vh;
  34. margin-bottom: 50px;
  35. }
  36. .logo-text p{
  37. font-weight: bold;
  38. font-size: 25px;
  39. }
  40. .more-info{
  41. background: rgb(0, 27, 45);
  42. color: rgb(201, 201, 201);
  43. text-align: center;
  44. padding: 75px;
  45. border-top: 5px solid black;
  46. }
  47. .more-info h1{
  48. color: rgb(255, 99, 107);
  49. margin: 25px;
  50. font-size: 45px;
  51. }
  52. .more-info p{
  53. font-size: 25px;
  54. color: rgb(201, 201, 201);
  55. text-align: justify;
  56. padding: 10px;
  57. }
  58. .more-info li{
  59. font-size: 20px;
  60. color: rgb(201, 201, 201);
  61. text-align: justify;
  62. padding: 10px;
  63. }
  64. .more-info span{
  65. font-weight: bold;
  66. color: rgb(255, 99, 107);
  67. }
  68. #loginStrand{
  69. display: none;
  70. align-items: center;
  71. justify-content: center;
  72. background-image: url("/shared/images/backgroundImg01.jpg");
  73. background-repeat: no-repeat;
  74. background-size: cover;
  75. height: 91.5vh;
  76. }
  77. #loginStrand form{
  78. display: flex;
  79. flex-direction: column;
  80. justify-content: space-between;
  81. align-items: center;
  82. border: 2px solid rgb(201, 201, 201);
  83. background: rgb(240, 252, 255);
  84. color: rgb(255, 99, 107);
  85. padding: 25px;
  86. border-radius: 10px;
  87. }
  88. #loginStrand form > *{
  89. margin: 10px 0;
  90. }
  91. /* #posChoiceStrand{
  92. display: none;
  93. flex-direction: column;
  94. align-items: center;
  95. }
  96. .cards{
  97. display: flex;
  98. justify-content: space-around;
  99. }
  100. .cards > *{
  101. display: flex;
  102. flex-direction: column;
  103. justify-content: space-around;
  104. text-align: center;
  105. width: 300px;
  106. height: 200px;
  107. border-radius: 25px;
  108. border: 2px solid black;
  109. padding: 50px;
  110. cursor: pointer;
  111. margin: 25px;
  112. box-shadow: 0 0 20px black;
  113. }
  114. .cards > *:hover{
  115. box-shadow: 0 0 25px #ff636b;
  116. }
  117. .cards > *:active{
  118. box-shadow: 0 0 10px #ff636b;
  119. }
  120. .cards p{
  121. margin-top: 25px;
  122. font-size: 25px;
  123. font-weight: bold;
  124. }
  125. .cards img{
  126. margin: auto 10px;
  127. } */