style.css 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. *,
  2. *::before,
  3. *::after {
  4. box-sizing: border-box;
  5. }
  6. a {
  7. text-decoration: none;
  8. }
  9. /* THE ALL SITE */
  10. .wrapper {
  11. display: flex;
  12. flex-direction: column;
  13. min-height: 100vh;
  14. }
  15. /* THE ALL SITE */
  16. /* HEADER */
  17. .header {
  18. height: 80px;
  19. display: flex;
  20. justify-content: space-around;
  21. align-items: center;
  22. }
  23. .nav-left {
  24. margin-left: 200px;
  25. }
  26. .nav-right {
  27. margin-right: 200px;
  28. }
  29. li {
  30. display: inline;
  31. }
  32. li > a {
  33. color: #555555;
  34. margin: 0 10px;
  35. font-family: "Open Sans", sans-serif;
  36. }
  37. .link {
  38. position: relative;
  39. }
  40. .active {
  41. color: #5363db;
  42. }
  43. .active:after {
  44. content: "";
  45. display: block;
  46. width: 35px;
  47. height: 1.5px;
  48. background: #5363db;
  49. position: absolute;
  50. top: 100%;
  51. left: 15px;
  52. margin-top: 5px;
  53. }
  54. .logo {
  55. display: flex;
  56. flex-direction: column;
  57. align-items: center;
  58. }
  59. .logo > h1 {
  60. font-family: "Champagne & Limousines", sans-serif;
  61. font-weight: bold;
  62. font-size: 20px;
  63. color: #6a78e0;
  64. padding-top: 5px;
  65. }
  66. /* HEADER */
  67. /* MAIN */
  68. .main {
  69. flex-grow: 1;
  70. }
  71. .content {
  72. position: relative;
  73. }
  74. .main-fon {
  75. width: 100%;
  76. }
  77. .form {
  78. position: absolute;
  79. background: white;
  80. border-radius: 12.5px;
  81. height: auto;
  82. top: 40px;
  83. left: 390px;
  84. display: flex;
  85. flex-direction: column;
  86. }
  87. .form>p{
  88. color: #5363db;
  89. font-family: "Open Sans", sans-serif;
  90. font-size: 25px;
  91. margin: 30px 110px 30px 30px;
  92. }
  93. .form>input{
  94. margin: 0 0 15px 25px;
  95. width: 200px;
  96. height: 30px;
  97. font-size: 14px;
  98. background: #f2f2f2;
  99. border-radius: 8px;
  100. padding-left: 10px;
  101. border: 1px #f2f2f2 solid;
  102. }
  103. input:nth-child(4):after{
  104. content: '56';
  105. background: red;
  106. }
  107. .form-link{
  108. background: #475bf1;
  109. border-radius: 10px;
  110. color: white;
  111. width: 130px;
  112. height: 50px;
  113. text-align: center;
  114. padding-top: 15px;
  115. margin: 15px 0 30px 95px;
  116. font-family: "Open Sans", sans-serif;
  117. }
  118. .form>select{
  119. width: 15px;
  120. left: 205px;
  121. bottom: 115px;
  122. border: 1px #f2f2f2 solid;
  123. background: #f2f2f2;
  124. position: absolute;
  125. }
  126. .text-on-fone{
  127. position: absolute;
  128. top: 80px;
  129. right: 170px;
  130. color: white;
  131. }
  132. .text-on-fone>h1{
  133. font-size: 45px;
  134. text-transform: uppercase;
  135. font-family: "Open Sans", sans-serif;line-height: 1.4;
  136. margin-bottom: 20px;
  137. }
  138. .text-on-fone>p{
  139. font-size: 38px;
  140. font-family: "Freestyle Script";
  141. line-height: 1.2;
  142. }
  143. /* MAIN */
  144. .footer {
  145. background: black;
  146. height: 100px;
  147. }