practice.css 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  1. * {
  2. box-sizing: border-box;
  3. }
  4. html {
  5. font-size: 14px;
  6. }
  7. body {
  8. margin: 0;
  9. }
  10. li {
  11. list-style: none;
  12. }
  13. a {
  14. text-decoration: none;
  15. }
  16. .header {
  17. position: relative;
  18. }
  19. .header-container {
  20. width: 100%;
  21. height: 92px;
  22. display: flex;
  23. justify-content: space-between;
  24. position: absolute;
  25. padding: 62px 61px 0 61px;
  26. background-color: black;
  27. }
  28. .header__logo {
  29. height: 100%;
  30. align-items: flex-end;
  31. display: flex;
  32. }
  33. .header__info {
  34. height: 100%;
  35. display: flex;
  36. align-items: flex-end;
  37. }
  38. .header__nav {
  39. height: 100%;
  40. display: flex;
  41. justify-content: flex-start;
  42. align-items: flex-end;
  43. }
  44. .info__list {
  45. display: flex;
  46. justify-content: flex-start;
  47. margin: 0;
  48. padding: 0;
  49. }
  50. .info__list a {
  51. color: rgba(255, 255, 255, 1);
  52. font-size: 14px;
  53. }
  54. .info__list li {
  55. margin-right: 59px;
  56. height: 20px;
  57. }
  58. .info__list li:last-child a {
  59. color: rgba(255, 202, 0, 1);
  60. }
  61. .info__list li:last-child {
  62. margin-right: 0;
  63. width: 105px;
  64. }
  65. .info__list li:nth-child(4) {
  66. border-right: 1px solid rgba(240, 240, 240, 1);
  67. width: 80px;
  68. margin-right: 41px;
  69. }
  70. .nav__email {
  71. display: flex;
  72. align-items: center;
  73. }
  74. .nav__email svg {
  75. margin-right: 15px;
  76. }
  77. .nav__email svg:hover {
  78. cursor: pointer;
  79. transform: scale(2);
  80. transition: 1s;
  81. }
  82. .nav__email a{
  83. color: white;
  84. font-size: 19px;
  85. }
  86. .nav__menu {
  87. margin-left: 150px;
  88. margin-right: 25px;
  89. }
  90. .nav__menu a {
  91. color: white;
  92. }
  93. .menu__btn {
  94. display: block;
  95. position: relative;
  96. }
  97. .menu__btn span {
  98. margin-top: 5px;
  99. }
  100. .menu__btn span,
  101. .menu__btn span::before {
  102. position: absolute;
  103. width: 50px;
  104. height: 1px;
  105. background-color: #ffffff;
  106. }
  107. .menu__btn span::before {
  108. content: '';
  109. display: block;
  110. transform: translateY(10px);
  111. }
  112. .asd {
  113. height: 600px;
  114. width: 100%;
  115. background-color: black;
  116. }
  117. /* .main {
  118. display: flex;
  119. justify-content: center;
  120. } */
  121. .main-title {
  122. height: 100vh;
  123. width: 100%;
  124. background-image: url(../img/Bitmap.png);
  125. background-repeat: no-repeat;
  126. display: flex;
  127. justify-content: center;
  128. }
  129. .main-title__content {
  130. width: 50%;
  131. height: 100%;
  132. display: flex;
  133. align-items: center;
  134. flex-direction: column;
  135. justify-content: center;
  136. }
  137. .welcome {
  138. width: 100%;
  139. font-family: Roboto;
  140. font-size: 18px;
  141. font-style: normal;
  142. font-weight: 300;
  143. line-height: 21px;
  144. margin-bottom: 23px;
  145. color: rgba(255, 255, 255, 1);
  146. display: flex;
  147. justify-content: flex-start
  148. }
  149. .web-production {
  150. font-family: Roboto;
  151. font-size: 64px;
  152. font-style: normal;
  153. font-weight: 700;
  154. line-height: 75px;
  155. margin-bottom: 100px;
  156. color: rgba(255, 255, 255, 1);
  157. }
  158. .discus-btn {
  159. width: 240px;
  160. height: 68px;
  161. display: flex;
  162. background-color: #FFCA00;
  163. align-items: center;
  164. }
  165. /* .discus-btn:hover {
  166. background-color: green;
  167. transition: 1s;
  168. color: yellow;
  169. } */
  170. .discuse-btn__text:hover {
  171. color: yellow;
  172. transition: 1s;
  173. }
  174. .discus-btn__text {
  175. color: rgba(32, 32, 32, 1);
  176. margin: 25px 67px 27px 30px;
  177. }
  178. .dott {
  179. width: 8px;
  180. height: 8px;
  181. background-color: rgba(32, 32, 32, 1);
  182. border-radius: 50%;
  183. }
  184. .main-title__btn {
  185. width: 100%;
  186. display: flex;
  187. justify-content: flex-start;
  188. }