API tools faq
paste
Guest User

Untitled

a guest
Mar 17th, 2018
291
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.03 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style id="jsbin-css">
  5. body {
  6. font-family: "Helvetica Neue", Helvetica, Arial;
  7. font-size: 14px;
  8. line-height: 20px;
  9. font-weight: 400;
  10. color: #3b3b3b;
  11. -webkit-font-smoothing: antialiased;
  12. font-smoothing: antialiased;
  13. background: #2b2b2b;
  14. }
  15. @media screen and (max-width: 580px) {
  16. body {
  17. font-size: 16px;
  18. line-height: 22px;
  19. }
  20. }
  21.  
  22. .wrapper {
  23. margin: 0 auto;
  24. padding: 40px;
  25. max-width: 800px;
  26. }
  27.  
  28. .table {
  29. margin: 0 0 40px 0;
  30. width: 100%;
  31. box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  32. display: table;
  33. }
  34. @media screen and (max-width: 580px) {
  35. .table {
  36. display: block;
  37. }
  38. }
  39.  
  40. .row {
  41. display: table-row;
  42. background: #f6f6f6;
  43. }
  44. .row:nth-of-type(odd) {
  45. background: #e9e9e9;
  46. }
  47. .row.header {
  48. font-weight: 900;
  49. color: white;
  50. background: #ea6153;
  51. }
  52. .row.green {
  53. background: #27ae60;
  54. }
  55. .row.blue {
  56. background: #2980b9;
  57. }
  58. @media screen and (max-width: 580px) {
  59. .row {
  60. padding: 14px 0 7px;
  61. display: block;
  62. }
  63. .row.header {
  64. padding: 0;
  65. height: 6px;
  66. }
  67. .row.header .cell {
  68. display: none;
  69. }
  70. .row .cell {
  71. margin-bottom: 10px;
  72. }
  73. .row .cell:before {
  74. margin-bottom: 3px;
  75. content: attr(data-title);
  76. min-width: 98px;
  77. font-size: 10px;
  78. line-height: 10px;
  79. font-weight: bold;
  80. text-transform: uppercase;
  81. color: #969696;
  82. display: block;
  83. }
  84. }
  85.  
  86. .cell {
  87. padding: 6px 12px;
  88. display: table-cell;
  89. }
  90. @media screen and (max-width: 580px) {
  91. .cell {
  92. padding: 2px 16px;
  93. display: block;
  94. }
  95. }
  96.  
  97. </style>
  98. </head>
  99. <body >
  100. <div class="wrapper">
  101.  
  102. <div class="table">
  103.  
  104. <div class="row header">
  105. <div class="cell">
  106. imie
  107. </div>
  108. <div class="cell">
  109. wiek
  110. </div>
  111. <div class="cell">
  112. zawod
  113. </div>
  114. <div class="cell">
  115. miasto
  116. </div>
  117. </div>
  118.  
  119. <div class="row">
  120. <div class="cell" data-title="Name">
  121. 12345
  122. </div>
  123. <div class="cell" data-title="Age">
  124. 22
  125. </div>
  126. <div class="cell" data-title="Occupation">
  127. 54321
  128. </div>
  129. <div class="cell" data-title="Location">
  130. Gliwice
  131. </div>
  132. </div>
  133.  
  134. <div class="row">
  135. <div class="cell" data-title="Name">
  136. qwerty
  137. </div>
  138. <div class="cell" data-title="Age">
  139. 30
  140. </div>
  141. <div class="cell" data-title="Occupation">
  142. ytrewq
  143. </div>
  144. <div class="cell" data-title="Location">
  145. Gliwice
  146. </div>
  147. </div>
  148.  
  149. <div class="row">
  150. <div class="cell" data-title="Name">
  151. asdfg
  152. </div>
  153. <div class="cell" data-title="Age">
  154. 28
  155. </div>
  156. <div class="cell" data-title="Occupation">
  157. gfdsa
  158. </div>
  159. <div class="cell" data-title="Location">
  160. Gliwice
  161. </div>
  162. </div>
  163.  
  164. <div class="row">
  165. <div class="cell" data-title="Name">
  166. zxcvbnm
  167. </div>
  168. <div class="cell" data-title="Age">
  169. 26
  170. </div>
  171. <div class="cell" data-title="Occupation">
  172. mnbvcxz
  173. </div>
  174. <div class="cell" data-title="Location">
  175. Gliwice
  176. </div>
  177. </div>
  178.  
  179. </div>
  180.  
  181. <div class="table">
  182.  
  183. <div class="row header green">
  184. <div class="cell">
  185. produkt
  186. </div>
  187. <div class="cell">
  188. cena
  189. </div>
  190. <div class="cell">
  191. ilosc
  192. </div>
  193. <div class="cell">
  194. data
  195. </div>
  196. <div class="cell">
  197. status
  198. </div>
  199. </div>
  200.  
  201. <div class="row">
  202. <div class="cell" data-title="Product">
  203. wololo
  204. </div>
  205. <div class="cell" data-title="Unit Price">
  206. 95 zl
  207. </div>
  208. <div class="cell" data-title="Quantity">
  209. 25
  210. </div>
  211. <div class="cell" data-title="Date Sold">
  212. 16.10.2018
  213. </div>
  214. <div class="cell" data-title="Status">
  215. cos
  216. </div>
  217. </div>
  218.  
  219. <div class="row">
  220. <div class="cell" data-title="Product">
  221. trololo
  222. </div>
  223. <div class="cell" data-title="Unit Price">
  224. 45 zl
  225. </div>
  226. <div class="cell" data-title="Quantity">
  227. 50
  228. </div>
  229. <div class="cell" data-title="Date Sold">
  230. 22.09.2018
  231. </div>
  232. <div class="cell" data-title="Status">
  233. cos
  234. </div>
  235. </div>
  236.  
  237. <div class="row">
  238. <div class="cell" data-title="Product">
  239. blabla
  240. </div>
  241. <div class="cell" data-title="Unit Price">
  242. 15 zl
  243. </div>
  244. <div class="cell" data-title="Quantity">
  245. 200
  246. </div>
  247. <div class="cell" data-title="Date Sold">
  248. 17.06.2018
  249. </div>
  250. <div class="cell" data-title="Status">
  251. cos
  252. </div>
  253. </div>
  254.  
  255. <div class="row">
  256. <div class="cell" data-title="Product">
  257. lololo
  258. </div>
  259. <div class="cell" data-title="Unit Price">
  260. 50 zl
  261. </div>
  262. <div class="cell" data-title="Quantity">
  263. 63
  264. </div>
  265. <div class="cell" data-title="Date Sold">
  266. 01.04.2018
  267. </div>
  268. <div class="cell" data-title="Status">
  269. cos
  270. </div>
  271. </div>
  272.  
  273. </div>
  274.  
  275. <div class="table">
  276.  
  277. <div class="row header blue">
  278. <div class="cell">
  279. nazwa
  280. </div>
  281. <div class="cell">
  282. email
  283. </div>
  284. <div class="cell">
  285. haslo
  286. </div>
  287. <div class="cell">
  288. aktywny
  289. </div>
  290. </div>
  291.  
  292. <div class="row">
  293. <div class="cell" data-title="Username">
  294. hehe
  295. </div>
  296. <div class="cell" data-title="Email">
  297. [email protected]
  298. </div>
  299. <div class="cell" data-title="Password">
  300. *********
  301. </div>
  302. <div class="cell" data-title="Active">
  303. tak
  304. </div>
  305. </div>
  306.  
  307. <div class="row">
  308. <div class="cell" data-title="Username">
  309. haha
  310. </div>
  311. <div class="cell" data-title="Email">
  312. [email protected]
  313. </div>
  314. <div class="cell" data-title="Password">
  315. ***********
  316. </div>
  317. <div class="cell" data-title="Active">
  318. tak
  319. </div>
  320. </div>
  321.  
  322. <div class="row">
  323. <div class="cell" data-title="Username">
  324. hihi
  325. </div>
  326. <div class="cell" data-title="Email">
  327. [email protected]
  328. </div>
  329. <div class="cell" data-title="Password">
  330. **************
  331. </div>
  332. <div class="cell" data-title="Active">
  333. tak
  334. </div>
  335. </div>
  336.  
  337. <div class="row">
  338. <div class="cell" data-title="Username">
  339. huehue
  340. </div>
  341. <div class="cell" data-title="Email">
  342. [email protected]
  343. </div>
  344. <div class="cell" data-title="Password">
  345. **********
  346. </div>
  347. <div class="cell" data-title="Active">
  348. tak
  349. </div>
  350. </div>
  351.  
  352. </div>
  353.  
  354. </div>
  355.  
  356.  
  357. <script id="jsbin-source-css" type="text/css">body
  358. font-family: 'Helvetica Neue', Helvetica, Arial
  359. font-size: 14px
  360. line-height: 20px
  361. font-weight: 400
  362. color: #3b3b3b
  363. -webkit-font-smoothing: antialiased
  364. font-smoothing: antialiased
  365. background: #2b2b2b
  366.  
  367. @media screen and (max-width: 580px)
  368. font-size: 16px
  369. line-height: 22px
  370.  
  371. .wrapper
  372. margin: 0 auto
  373. padding: 40px
  374. max-width: 800px
  375.  
  376. .table
  377. margin: 0 0 40px 0
  378. width: 100%
  379. box-shadow: 0 1px 3px rgba(0,0,0,0.2)
  380. display: table
  381. @media screen and (max-width: 580px)
  382. display: block
  383.  
  384. .row
  385. display: table-row
  386. background: #f6f6f6
  387.  
  388. &:nth-of-type(odd)
  389. background: #e9e9e9
  390.  
  391. &.header
  392. font-weight: 900
  393. color: #ffffff
  394. background: #ea6153
  395.  
  396. &.green
  397. background: #27ae60
  398.  
  399. &.blue
  400. background: #2980b9
  401.  
  402. @media screen and (max-width: 580px)
  403. padding: 14px 0 7px
  404. display: block
  405.  
  406. &.header
  407. padding: 0
  408. height: 6px
  409.  
  410. .cell
  411. display: none
  412.  
  413. .cell
  414. margin-bottom: 10px
  415.  
  416. &:before
  417. margin-bottom: 3px
  418. content: attr(data-title)
  419. min-width: 98px
  420. font-size: 10px
  421. line-height: 10px
  422. font-weight: bold
  423. text-transform: uppercase
  424. color: #969696
  425. display: block
  426.  
  427. .cell
  428. padding: 6px 12px
  429. display: table-cell
  430. @media screen and (max-width: 580px)
  431. padding: 2px 16px
  432. display: block</script>
  433. </body>
  434. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!