Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <style id="jsbin-css">
- body {
- font-family: "Helvetica Neue", Helvetica, Arial;
- font-size: 14px;
- line-height: 20px;
- font-weight: 400;
- color: #3b3b3b;
- -webkit-font-smoothing: antialiased;
- font-smoothing: antialiased;
- background: #2b2b2b;
- }
- @media screen and (max-width: 580px) {
- body {
- font-size: 16px;
- line-height: 22px;
- }
- }
- .wrapper {
- margin: 0 auto;
- padding: 40px;
- max-width: 800px;
- }
- .table {
- margin: 0 0 40px 0;
- width: 100%;
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
- display: table;
- }
- @media screen and (max-width: 580px) {
- .table {
- display: block;
- }
- }
- .row {
- display: table-row;
- background: #f6f6f6;
- }
- .row:nth-of-type(odd) {
- background: #e9e9e9;
- }
- .row.header {
- font-weight: 900;
- color: white;
- background: #ea6153;
- }
- .row.green {
- background: #27ae60;
- }
- .row.blue {
- background: #2980b9;
- }
- @media screen and (max-width: 580px) {
- .row {
- padding: 14px 0 7px;
- display: block;
- }
- .row.header {
- padding: 0;
- height: 6px;
- }
- .row.header .cell {
- display: none;
- }
- .row .cell {
- margin-bottom: 10px;
- }
- .row .cell:before {
- margin-bottom: 3px;
- content: attr(data-title);
- min-width: 98px;
- font-size: 10px;
- line-height: 10px;
- font-weight: bold;
- text-transform: uppercase;
- color: #969696;
- display: block;
- }
- }
- .cell {
- padding: 6px 12px;
- display: table-cell;
- }
- @media screen and (max-width: 580px) {
- .cell {
- padding: 2px 16px;
- display: block;
- }
- }
- </style>
- </head>
- <body >
- <div class="wrapper">
- <div class="table">
- <div class="row header">
- <div class="cell">
- imie
- </div>
- <div class="cell">
- wiek
- </div>
- <div class="cell">
- zawod
- </div>
- <div class="cell">
- miasto
- </div>
- </div>
- <div class="row">
- <div class="cell" data-title="Name">
- 12345
- </div>
- <div class="cell" data-title="Age">
- 22
- </div>
- <div class="cell" data-title="Occupation">
- 54321
- </div>
- <div class="cell" data-title="Location">
- Gliwice
- </div>
- </div>
- <div class="row">
- <div class="cell" data-title="Name">
- qwerty
- </div>
- <div class="cell" data-title="Age">
- 30
- </div>
- <div class="cell" data-title="Occupation">
- ytrewq
- </div>
- <div class="cell" data-title="Location">
- Gliwice
- </div>
- </div>
- <div class="row">
- <div class="cell" data-title="Name">
- asdfg
- </div>
- <div class="cell" data-title="Age">
- 28
- </div>
- <div class="cell" data-title="Occupation">
- gfdsa
- </div>
- <div class="cell" data-title="Location">
- Gliwice
- </div>
- </div>
- <div class="row">
- <div class="cell" data-title="Name">
- zxcvbnm
- </div>
- <div class="cell" data-title="Age">
- 26
- </div>
- <div class="cell" data-title="Occupation">
- mnbvcxz
- </div>
- <div class="cell" data-title="Location">
- Gliwice
- </div>
- </div>
- </div>
- <div class="table">
- <div class="row header green">
- <div class="cell">
- produkt
- </div>
- <div class="cell">
- cena
- </div>
- <div class="cell">
- ilosc
- </div>
- <div class="cell">
- data
- </div>
- <div class="cell">
- status
- </div>
- </div>
- <div class="row">
- <div class="cell" data-title="Product">
- wololo
- </div>
- <div class="cell" data-title="Unit Price">
- 95 zl
- </div>
- <div class="cell" data-title="Quantity">
- 25
- </div>
- <div class="cell" data-title="Date Sold">
- 16.10.2018
- </div>
- <div class="cell" data-title="Status">
- cos
- </div>
- </div>
- <div class="row">
- <div class="cell" data-title="Product">
- trololo
- </div>
- <div class="cell" data-title="Unit Price">
- 45 zl
- </div>
- <div class="cell" data-title="Quantity">
- 50
- </div>
- <div class="cell" data-title="Date Sold">
- 22.09.2018
- </div>
- <div class="cell" data-title="Status">
- cos
- </div>
- </div>
- <div class="row">
- <div class="cell" data-title="Product">
- blabla
- </div>
- <div class="cell" data-title="Unit Price">
- 15 zl
- </div>
- <div class="cell" data-title="Quantity">
- 200
- </div>
- <div class="cell" data-title="Date Sold">
- 17.06.2018
- </div>
- <div class="cell" data-title="Status">
- cos
- </div>
- </div>
- <div class="row">
- <div class="cell" data-title="Product">
- lololo
- </div>
- <div class="cell" data-title="Unit Price">
- 50 zl
- </div>
- <div class="cell" data-title="Quantity">
- 63
- </div>
- <div class="cell" data-title="Date Sold">
- 01.04.2018
- </div>
- <div class="cell" data-title="Status">
- cos
- </div>
- </div>
- </div>
- <div class="table">
- <div class="row header blue">
- <div class="cell">
- nazwa
- </div>
- <div class="cell">
- email
- </div>
- <div class="cell">
- haslo
- </div>
- <div class="cell">
- aktywny
- </div>
- </div>
- <div class="row">
- <div class="cell" data-title="Username">
- hehe
- </div>
- <div class="cell" data-title="Email">
- hehe@mail.com
- </div>
- <div class="cell" data-title="Password">
- *********
- </div>
- <div class="cell" data-title="Active">
- tak
- </div>
- </div>
- <div class="row">
- <div class="cell" data-title="Username">
- haha
- </div>
- <div class="cell" data-title="Email">
- haha@mail.com
- </div>
- <div class="cell" data-title="Password">
- ***********
- </div>
- <div class="cell" data-title="Active">
- tak
- </div>
- </div>
- <div class="row">
- <div class="cell" data-title="Username">
- hihi
- </div>
- <div class="cell" data-title="Email">
- hihi@mail.com
- </div>
- <div class="cell" data-title="Password">
- **************
- </div>
- <div class="cell" data-title="Active">
- tak
- </div>
- </div>
- <div class="row">
- <div class="cell" data-title="Username">
- huehue
- </div>
- <div class="cell" data-title="Email">
- huehue@mail.com
- </div>
- <div class="cell" data-title="Password">
- **********
- </div>
- <div class="cell" data-title="Active">
- tak
- </div>
- </div>
- </div>
- </div>
- <script id="jsbin-source-css" type="text/css">body
- font-family: 'Helvetica Neue', Helvetica, Arial
- font-size: 14px
- line-height: 20px
- font-weight: 400
- color: #3b3b3b
- -webkit-font-smoothing: antialiased
- font-smoothing: antialiased
- background: #2b2b2b
- @media screen and (max-width: 580px)
- font-size: 16px
- line-height: 22px
- .wrapper
- margin: 0 auto
- padding: 40px
- max-width: 800px
- .table
- margin: 0 0 40px 0
- width: 100%
- box-shadow: 0 1px 3px rgba(0,0,0,0.2)
- display: table
- @media screen and (max-width: 580px)
- display: block
- .row
- display: table-row
- background: #f6f6f6
- &:nth-of-type(odd)
- background: #e9e9e9
- &.header
- font-weight: 900
- color: #ffffff
- background: #ea6153
- &.green
- background: #27ae60
- &.blue
- background: #2980b9
- @media screen and (max-width: 580px)
- padding: 14px 0 7px
- display: block
- &.header
- padding: 0
- height: 6px
- .cell
- display: none
- .cell
- margin-bottom: 10px
- &:before
- margin-bottom: 3px
- content: attr(data-title)
- min-width: 98px
- font-size: 10px
- line-height: 10px
- font-weight: bold
- text-transform: uppercase
- color: #969696
- display: block
- .cell
- padding: 6px 12px
- display: table-cell
- @media screen and (max-width: 580px)
- padding: 2px 16px
- display: block</script>
- </body>
- </html>
Add Comment
Please, Sign In to add comment