SHARE
TWEET

Untitled

a guest Mar 17th, 2018 242 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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.       hehe@mail.com
  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.        haha@mail.com
  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.       hihi@mail.com
  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.       huehue@mail.com
  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>
RAW Paste Data
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
 
Top