Advertisement
Guest User

Untitled

a guest
Jun 16th, 2019
67
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.21 KB | None | 0 0
  1. <style>
  2. @-webkit-keyframes marquee {
  3. 0% {
  4. -webkit-transform: translateX(-50%);
  5. transform: translateX(-50%)
  6. }
  7. to {
  8. -webkit-transform: translateX(50%);
  9. transform: translateX(50%)
  10. }
  11. }
  12.  
  13. @keyframes marquee {
  14. 0% {
  15. -webkit-transform: translateX(-50%);
  16. transform: translateX(-50%)
  17. }
  18. to {
  19. -webkit-transform: translateX(50%);
  20. transform: translateX(50%)
  21. }
  22. }
  23.  
  24. .press-coverage-container {
  25. background-color: #fff;
  26. padding: 0 0 100px;
  27. display: -ms-flexbox;
  28. display: flex;
  29. -ms-flex-direction: column;
  30. flex-direction: column;
  31. -ms-flex-align: center;
  32. align-items: center;
  33. position: relative
  34. }
  35.  
  36. @media screen and (max-width:767px) {
  37. .press-coverage-container {
  38. padding: 40px 0
  39. }
  40. }
  41.  
  42. .press-coverage-header {
  43. display: -ms-flexbox;
  44. display: flex;
  45. -ms-flex-pack: center;
  46. justify-content: center;
  47. height: 65px;
  48. -ms-flex-align: center;
  49. align-items: center;
  50. position: relative
  51. }
  52.  
  53. .press-coverage-header:after {
  54. content: "";
  55. position: absolute;
  56. bottom: 0;
  57. margin: 0 auto;
  58. height: 2px;
  59. width: 40px;
  60. background: #111d2b
  61. }
  62.  
  63. .press-coverage-header-title {
  64. text-transform: uppercase;
  65. color: #929292;
  66. font-size: 24px;
  67. text-align: center;
  68. font-weight: 700
  69. }
  70.  
  71. .press-coverage-list-container {
  72. display: -ms-flexbox;
  73. display: flex;
  74. -ms-flex-direction: row;
  75. flex-direction: row;
  76. -ms-flex-pack: center;
  77. justify-content: center;
  78. -ms-flex-align: center;
  79. align-items: center;
  80. max-width: 1600px;
  81. overflow: hidden
  82. }
  83.  
  84. .press-coverage-list-container:hover .press-coverage-list {
  85. -webkit-animation-play-state: paused;
  86. animation-play-state: paused
  87. }
  88.  
  89. .press-coverage-list {
  90. height: 100px;
  91. margin: 0 auto;
  92. -webkit-transform-origin: center;
  93. -ms-transform-origin: center;
  94. transform-origin: center;
  95. -webkit-animation: marquee 30s cubic-bezier(.01, 0, .59, .78) alternate-reverse infinite;
  96. animation: marquee 30s cubic-bezier(.01, 0, .59, .78) alternate-reverse infinite
  97. }
  98.  
  99. .press-coverage-list, .press-coverage-list-item {
  100. display: -ms-flexbox;
  101. display: flex;
  102. -ms-flex-negative: 0;
  103. flex-shrink: 0
  104. }
  105.  
  106. .press-coverage-list-item {
  107. list-style-type: none;
  108. -ms-flex-pack: center;
  109. justify-content: center;
  110. -ms-flex-positive: 1;
  111. flex-grow: 1;
  112. -ms-flex-align: center;
  113. align-items: center;
  114. max-width: 250px
  115. }
  116.  
  117. .press-coverage-list-item-logo {
  118. width: 60%
  119. }
  120. </style>
  121. <div class="press-coverage-container">
  122. <div class="press-coverage-header">
  123. <span class="press-coverage-header-title">Featured In</span>
  124. </div>
  125. <div class="press-coverage-list-container">
  126.  
  127. <ul class="press-coverage-list">
  128. <li class="press-coverage-list-item">
  129. <a href="#" target="_blank">
  130. <img src="" alt="" class="press-coverage-list-item-logo">
  131. </a>
  132. </li>
  133. <li class="press-coverage-list-item">
  134. <a href="#" target="_blank">
  135. <img src="" alt="" class="press-coverage-list-item-logo">
  136. </a>
  137. </li>
  138. <li class="press-coverage-list-item">
  139. <a href="#" target="_blank">
  140. <img src="" alt="" class="press-coverage-list-item-logo">
  141. </a>
  142. </li>
  143. <li class="press-coverage-list-item">
  144. <a href="#" target="_blank">
  145. <img src="" alt="" class="press-coverage-list-item-logo">
  146. </a>
  147. </li>
  148. <li class="press-coverage-list-item">
  149. <a href="#" target="_blank">
  150. <img src="" alt="" class="press-coverage-list-item-logo">
  151. </a>
  152. </li>
  153. <li class="press-coverage-list-item">
  154. <a href="#" target="_blank">
  155. <img src="" alt="" class="press-coverage-list-item-logo">
  156. </a>
  157. </li>
  158. <li class="press-coverage-list-item">
  159. <a href="#" target="_blank">
  160. <img src="" alt="" class="press-coverage-list-item-logo">
  161. </a>
  162. </li>
  163. <li class="press-coverage-list-item">
  164. <a href="#" target="_blank">
  165. <img src="" alt="" class="press-coverage-list-item-logo">
  166. </a>
  167. </li>
  168. <li class="press-coverage-list-item">
  169. <a href="#" target="_blank">
  170. <img src="" alt="" class="press-coverage-list-item-logo">
  171. </a>
  172. </li>
  173. <li class="press-coverage-list-item">
  174. <a href="#" target="_blank">
  175. <img src="" alt="" class="press-coverage-list-item-logo">
  176. </a>
  177. </li>
  178. <li class="press-coverage-list-item">
  179. <a href="#" target="_blank">
  180. <img src="" alt="" class="press-coverage-list-item-logo">
  181. </a>
  182. </li>
  183. </ul>
  184. </div>
  185. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement