Advertisement
Guest User

Untitled

a guest
Dec 11th, 2018
59
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.08 KB | None | 0 0
  1. <div role="tabpanel" class="tab" id="raffles">
  2. <div class="fix">
  3. <div class="raffles-page">
  4. <div class="raffle-controls">
  5. <div class="raffle-filters">
  6. <p>All Items</p>
  7. <p>VGO</p>
  8. <p>GFUEL</p>
  9. <p>GIFTS</p>
  10. <p>GAMES</p>
  11. </div>
  12.  
  13. <div class="raffle-search">
  14.  
  15. <input class="raffle-input" placeholder="Search for item..."></input>
  16.  
  17. <select class="price-filter">
  18. <option value="Price High to Low">Price High to Low</option>
  19. <option value="Price Low to High">Price Low to High</option>
  20. </select>
  21.  
  22. <select class="selection-filter">
  23. <option value="All raffles">All raffles</option>
  24. <option value="Active raffles">Active raffles</option>
  25. <option value="Joined raffles">Joined raffles</option>
  26. <option value="Ended raffles">Ended raffles</option>
  27. </select>
  28.  
  29. </div>
  30.  
  31. </div>
  32. <div class="raffles-body">
  33. <div class="raffle">
  34. <div class="raffle-header">
  35. <div class="header-left">
  36. <p style="font-size: 14px;font-weight: 600;">YEEZY BOOST 350 V2</p>
  37. <p style="font-size: 12px;color: #808085 !important;">by Adidas</p>
  38. </div>
  39. <div class="header-right">
  40. <p style="font-size: 14px;font-weight: 600;">$240</p>
  41. <p style="font-size: 12px;color: #808085 !important;">$70</p>
  42. </div>
  43. </div>
  44. <div class="raffle-progress">
  45. <div class="progress-inner">
  46. </div>
  47. </div>
  48.  
  49. <div class="raffle-body">
  50. <div class="raffle-img">
  51. </div>
  52. <div class="raffle-quickjoin">
  53. <p><i class="fas fa-bolt" style="margin-right: 5px;"></i>Insta Join</p>
  54. </div>
  55. </div>
  56.  
  57. </div>
  58. </div>
  59. </div>
  60. </div>
  61. </div>
  62.  
  63.  
  64.  
  65.  
  66. /* Raffles */
  67.  
  68. .raffle-filters {
  69. display: flex;
  70. }
  71.  
  72. .raffle {
  73. width: 24.5%;
  74. border-radius: 5px;
  75. margin-top: 20px;
  76. }
  77.  
  78. .raffle-quickjoin p {
  79. margin-bottom: 10px;
  80. margin-top: 25px;
  81. font-size: 14px;
  82. cursor: pointer;
  83. font-weight: 600;
  84. color: #808085 !important;
  85. }
  86.  
  87. .raffle-quickjoin i {
  88. margin-right: 5px;
  89. font-size: 12px;
  90. }
  91.  
  92. .raffle-progress {
  93. background: #1e1e26;
  94. height: 5px;
  95. }
  96. .raffle-progress .progress-inner {
  97. background: #f95246;
  98. width: 25%;
  99. opacity: 1 !important;
  100. height: 5px;
  101. }
  102.  
  103. .raffle-img {
  104. background-image: url(https://image.goat.com/attachments/product_template_pictures/images/008/707/328/original/152603_00.png.png);
  105. background-color: transparent;
  106. background-repeat: no-repeat;
  107. background-position: center center;
  108. background-size: 300px 300px;
  109. margin: 0 auto;
  110. height: 200px;
  111. width: 300px;
  112. }
  113.  
  114. .raffle-body {
  115. background: #1c1c23;
  116. text-align: center;
  117. padding: 5px;
  118. }
  119.  
  120. .raffles-body {
  121. display: flex;
  122. cursor: pointer;
  123. flex-wrap: wrap;
  124. }
  125.  
  126. .raffle-header {
  127. background: #191920;
  128. padding: 15px;
  129. display: flex;
  130. }
  131.  
  132. .raffle-header p {
  133. margin-bottom: 0px;
  134. }
  135.  
  136. .header-left {
  137. width: 50%;
  138. text-align:left;
  139. }
  140.  
  141. .header-right {
  142. width: 50%;
  143. text-align:right;
  144. }
  145.  
  146. .raffle-filters p {
  147. margin-bottom: 0px;
  148. margin-right: 10px;
  149. color: #808085 !important;
  150. cursor: pointer;
  151. }
  152.  
  153. select.price-filter {
  154. outline: 0px;
  155. background: #1e1e26;
  156. border: 0px;
  157. color: #808085 !important;
  158. padding: 10px 15px;
  159. border-radius: 5px;
  160. }
  161. select.selection-filter {
  162. outline: 0px;
  163. background: #1e1e26;
  164. border: 0px;
  165. color: #808085 !important;
  166. height: 100%;
  167. padding: 10px 15px;
  168. border-radius: 5px;
  169. margin: 0px;
  170. }
  171.  
  172. input.raffle-input {
  173. outline: 0px;
  174. background: #1e1e26;
  175. border: 0px;
  176. height: 100%;
  177. color: #808085 !important;
  178. padding: 10px 15px;
  179. border-radius: 5px;
  180. }
  181.  
  182. .raffle-filters p:hover {
  183. color: #fff !important;
  184. }
  185.  
  186. .raffle-controls {
  187. display: flex;
  188. background: #191920;
  189. justify-content: space-between;
  190. align-items: center;
  191. font-size: 15px;
  192. font-weight: 600;
  193. padding: 15px 30px;
  194. border-radius: 5px;
  195. color: #808085;
  196. width: 100%;
  197. }
  198.  
  199. /* End Raffles */
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement