Advertisement
meowmoriaoi

Flex

Dec 18th, 2019
154
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.17 KB | None | 0 0
  1. /* Spotlight */
  2.  
  3. .spotlight {
  4. -moz-align-items: center;
  5. -webkit-align-items: center;
  6. -ms-align-items: center;
  7. align-items: center;
  8. display: -moz-flex;
  9. display: -webkit-flex;
  10. display: -ms-flex;
  11. display: flex;
  12. }
  13.  
  14. .spotlight .image {
  15. -moz-order: 1;
  16. -webkit-order: 1;
  17. -ms-order: 1;
  18. order: 1;
  19. border-radius: 0;
  20. width: 40%;
  21. }
  22.  
  23. .spotlight .image img {
  24. border-radius: 0;
  25. width: 100%;
  26. }
  27.  
  28. .spotlight .content {
  29. padding: 2em 4em 0.1em 4em ;
  30. -moz-order: 2;
  31. -webkit-order: 2;
  32. -ms-order: 2;
  33. order: 2;
  34. max-width: 48em;
  35. width: 60%;
  36. }
  37.  
  38. .spotlight:nth-child(2n) {
  39. -moz-flex-direction: row-reverse;
  40. -webkit-flex-direction: row-reverse;
  41. -ms-flex-direction: row-reverse;
  42. flex-direction: row-reverse;
  43. }
  44.  
  45. .spotlight:nth-child(1) {
  46. background-color: rgba(0, 0, 0, 0.075);
  47. }
  48.  
  49. .spotlight:nth-child(2) {
  50. background-color: rgba(0, 0, 0, 0.15);
  51. }
  52.  
  53. .spotlight:nth-child(3) {
  54. background-color: rgba(0, 0, 0, 0.225);
  55. }
  56.  
  57. .spotlight:nth-child(4) {
  58. background-color: rgba(0, 0, 0, 0.3);
  59. }
  60.  
  61. .spotlight:nth-child(5) {
  62. background-color: rgba(0, 0, 0, 0.375);
  63. }
  64.  
  65. .spotlight:nth-child(6) {
  66. background-color: rgba(0, 0, 0, 0.45);
  67. }
  68.  
  69. .spotlight:nth-child(7) {
  70. background-color: rgba(0, 0, 0, 0.525);
  71. }
  72.  
  73. .spotlight:nth-child(8) {
  74. background-color: rgba(0, 0, 0, 0.6);
  75. }
  76.  
  77. .spotlight:nth-child(9) {
  78. background-color: rgba(0, 0, 0, 0.675);
  79. }
  80.  
  81. .spotlight:nth-child(10) {
  82. background-color: rgba(0, 0, 0, 0.75);
  83. }
  84.  
  85. @media screen and (max-width: 1280px) {
  86.  
  87. .spotlight .image {
  88. width: 45%;
  89. }
  90.  
  91. .spotlight .content {
  92. width: 55%;
  93. }
  94.  
  95. }
  96.  
  97. @media screen and (max-width: 980px) {
  98.  
  99. .spotlight {
  100. display: block;
  101. }
  102.  
  103. .spotlight br {
  104. display: none;
  105. }
  106.  
  107. .spotlight .image {
  108. width: 100%;
  109. }
  110.  
  111. .spotlight .content {
  112. padding: 4em 3em 2em 3em ;
  113. max-width: none;
  114. text-align: center;
  115. width: 100%;
  116. }
  117.  
  118. }
  119.  
  120. @media screen and (max-width: 736px) {
  121.  
  122. .spotlight .content {
  123. padding: 3em 2em 1em 2em ;
  124. }
  125.  
  126. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement