Advertisement
Avrelii

Untitled

Feb 19th, 2020
152
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.68 KB | None | 0 0
  1. .page {
  2. font-family: 'Cormorant Garamond';
  3. }
  4.  
  5. .header {
  6. height: 95px;
  7. display: flex;
  8. max-width: 1330px;
  9. min-width: 1280px;
  10. margin: auto;
  11. }
  12.  
  13. .header__link {
  14. margin: auto;
  15. font-size: 28px;
  16. text-decoration: none;
  17. color: #10191E;
  18. }
  19.  
  20. .project {
  21. background-position: center;
  22. background-size: cover;
  23. }
  24.  
  25. .project_beginner {
  26. width: 636px;
  27. height: 430px;
  28. }
  29.  
  30. .project_music-album {
  31. background-image: url(https://code.s3.yandex.net/web-code/album.png);
  32. }
  33.  
  34. .project_design-principles {
  35. background-image: url(https://code.s3.yandex.net/web-code/design.png);
  36. }
  37.  
  38. .flex-row {
  39. display: flex;
  40. justify-content: space-between;
  41. flex-wrap: wrap;
  42. }
  43.  
  44. .list {
  45. list-style: none;
  46. padding: 0;
  47. margin: 0;
  48. }
  49.  
  50. .flex-column {
  51. width: 636px;
  52. height: 557px;
  53. display: flex;
  54. justify-content: space-between;
  55. }
  56.  
  57. .flex-column_reversed {
  58. flex-direction: column-reverse;
  59. }
  60.  
  61. .project_procrastinate {
  62. width: 636px;
  63. height: 557px;
  64. }
  65.  
  66. .project-video {
  67. width: 100%;
  68. height: 100%;
  69. object-fit: cover;
  70. }
  71.  
  72. .project_p5 {
  73. width: 636px;
  74. height: 240px;
  75. }
  76.  
  77. .flex-row_frameworks-inner {
  78. width: 636px;
  79. height: 290px;
  80. }
  81.  
  82. .project_slider {
  83. width: 306px;
  84. height: 290px;
  85. background-image: url(https://code.s3.yandex.net/web-code/slider.gif);
  86. }
  87.  
  88. .project_reactive {
  89. width: 306px;
  90. height: 290px;
  91. background-image: url(https://code.s3.yandex.net/web-code/reactive.gif);
  92. }
  93.  
  94. .flex-row_reversed {
  95. flex-direction: row-reverse;
  96. margin: 60px 0;
  97. }
  98.  
  99. .menu {
  100. display: flex;
  101. justify-content: center;
  102. min-height: 75px;
  103. align-items: center;
  104. flex-wrap: wrap;
  105. max-width: 1330px;
  106. min-width: 1280px;
  107. margin: 40px auto;
  108. }
  109.  
  110. .project_vanilla {
  111. width: 306px;
  112. height: 290px;
  113. }
  114.  
  115. .project_how-to-study {
  116. background-image: url(https://code.s3.yandex.net/web-code/how-to-study.png);
  117. order: 3;
  118. }
  119.  
  120. .project_across-russia {
  121. background-image: url(https://code.s3.yandex.net/web-code/across-russia.png);
  122. order: 2;
  123. flex-basis: 636px;
  124. }
  125.  
  126. .project_mesto {
  127. background-image: url(https://code.s3.yandex.net/web-code/mesto.png);
  128. order: 1;
  129. }
  130.  
  131. .footer {
  132. height: 95px;
  133. display: flex;
  134. justify-content: center;
  135. max-width: 1330px;
  136. min-width: 1280px;
  137. margin: auto;
  138. }
  139.  
  140. .logo {
  141. width: 145px;
  142. height: 25px;
  143. background-image: url(https://pictures.s3.yandex.net/logo_black.png);
  144. background-size: contain;
  145. background-repeat: no-repeat;
  146. background-position: center;
  147. align-self: center;
  148. }
  149.  
  150. .content {
  151. max-width: 1330px;
  152. min-width: 1280px;
  153. margin: auto;
  154. }
  155.  
  156. .menu__link {
  157. font-size: 18px;
  158. text-decoration: none;
  159. color: #10191E;
  160. margin-right: 20px;
  161. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement