Content Listing as Inventory Sample

Contents

  • Content name
    Category
    Registered
    User

  • Content 1
    Category 1
    05/12/2014
    Christian García
  • Content 2
    Category 2
    08/12/2014
    Christian García
  • Content 3
    Category 2
    16/12/2014
    Christian García
  • Content 4
    Category 3
    21/12/2014
    Christian García
  • Content 5
    Category 3
    25/12/2014
    Christian García
  • Content 6
    Category 1
    28/12/2014
    Christian García
  • Content 7
    Category 4
    02/01/2015
    Christian García
  • Content 8
    Category 1
    09/01/2015
    Christian García
  • Content 9
    Category 4
    12/01/2015
    Christian García
  • Content 10
    Category 3
    12/01/2015
    Christian García
  • Content 11
    Category 5
    14/01/2015
    Christian García
  • Content 12
    Category 5
    20/01/2015
    Christian García
  • Content 13
    Category 1
    02/02/2015
    Christian García
  • Content 14
    Category 6
    10/02/2015
    Christian García
  • Content 15
    Category 2
    20/02/2015
    Christian García
  • Content 16
    Category 1
    06/03/2015
    Christian García
  • Content 17
    Category 3
    02/04/2015
    Christian García
  • Content 18
    Category 4
    10/04/2015
    Christian García
  • Content 19
    Category 6
    12/04/2015
    Christian García
  • Content 20
    Category 3
    14/04/2015
    Christian García

Source: http://codepen.io/christiangh/pen/emqvqz/

Code:

Contents

  • Content name
    Category
    Registered
    User

  • Content 1
    Category 1
    05/12/2014
    Christian García
  • Content 2
    Category 2
    08/12/2014
    Christian García
  • Content 3
    Category 2
    16/12/2014
    Christian García
  • Content 4
    Category 3
    21/12/2014
    Christian García
  • Content 5
    Category 3
    25/12/2014
    Christian García
  • Content 6
    Category 1
    28/12/2014
    Christian García
  • Content 7
    Category 4
    02/01/2015
    Christian García
  • Content 8
    Category 1
    09/01/2015
    Christian García
  • Content 9
    Category 4
    12/01/2015
    Christian García
  • Content 10
    Category 3
    12/01/2015
    Christian García
  • Content 11
    Category 5
    14/01/2015
    Christian García
  • Content 12
    Category 5
    20/01/2015
    Christian García
  • Content 13
    Category 1
    02/02/2015
    Christian García
  • Content 14
    Category 6
    10/02/2015
    Christian García
  • Content 15
    Category 2
    20/02/2015
    Christian García
  • Content 16
    Category 1
    06/03/2015
    Christian García
  • Content 17
    Category 3
    02/04/2015
    Christian García
  • Content 18
    Category 4
    10/04/2015
    Christian García
  • Content 19
    Category 6
    12/04/2015
    Christian García
  • Content 20
    Category 3
    14/04/2015
    Christian García
CSS:
body{position:relative;float:left;width:100%;background-color:#c2b280}#contents{position:relative;width:100%;max-width:1100px;height:auto;margin:0 auto;padding:10px;box-sizing:border-box}#contents_pin{position:absolute;top:15px;left:50%;width:300px;height:130px;margin-left:-150px;z-index:1}#contents_pin #header_pin{position:relative;float:left;width:100%;height:auto;z-index:2}#contents_pin #header_pin .circle_pin{position:relative;margin:0 auto;width:20px;height:20px;border:20px solid #6E6E6E;border-radius:50%}#contents_pin #header_pin .trapezoid_pin{position:relative;margin:-15px auto 0;width:40px;height:0;border-bottom:30px solid #6E6E6E;border-left:40px solid transparent;border-right:40px solid transparent;z-index:2}#contents_pin #body_pin{position:relative;float:left;margin:0 auto;width:100%;height:auto}#contents_pin #body_pin .center_pin{position:relative;margin:0 auto;width:120px;height:60px;background:-webkit-linear-gradient(top,#6E6E6E,#585858);background:-o-linear-gradient(bottom,#6E6E6E,#585858);background:-moz-linear-gradient(bottom,#6E6E6E,#585858);background:linear-gradient(to bottom,#6E6E6E,#585858);box-shadow:8px 30px 13px -10px #000;z-index:1}#contents_pin #body_pin .trangle_left_pin{position:absolute;left:10px;top:0;width:0;height:0;border-bottom:40px solid #C4C7CE;border-left:80px solid transparent;box-shadow:9px 5px 8px -7px #000;z-index:0}#contents_pin #body_pin .trangle_right_pin{position:absolute;right:10px;top:0;width:0;height:0;border-bottom:40px solid #C4C7CE;border-right:80px solid transparent;box-shadow:-4px 5px 13px -9px #000;z-index:3}.screw_pin{position:absolute;width:15px;height:15px;border-radius:50%;background-color:#74777C;text-indent:0;z-index:5}#contents_pin #body_pin .trangle_left_pin .screw_pin{top:15px;right:5px}#contents_pin #body_pin .trangle_right_pin .screw_pin{top:15px;left:5px}#contents_pin #footer_pin{position:relative;float:left;width:100%;height:40px;z-index:2;box-shadow:2px 5px 13px -7px #000}#contents_pin #footer_pin .footer_pin_top{position:relative;width:100%;height:30px;border-radius:30% 30% 0 0;background:-webkit-linear-gradient(top,#585858,#505050);background:-o-linear-gradient(bottom,#585858,#505050);background:-moz-linear-gradient(bottom,#585858,#505050);background:linear-gradient(to bottom,#585858,#505050);z-index:2}#contents_pin #footer_pin .footer_pin_bottom{position:relative;width:100%;height:10px;background-color:#424242;z-index:2}#contents_table{position:relative;float:left;width:100%;height:auto;background-color:#5882FA;margin:50px 0;padding:80px 30px 50px;box-sizing:border-box;border-radius:1em;box-shadow:3px 4px 6px -3px #000}#contents_area{position:relative;float:left;width:100%;height:auto;min-height:1000px;background-color:white;padding:25px 10px 20px;box-sizing:border-box;box-shadow:3px 4px 6px -3px #000}#contents_area #contents_title{position:relative;float:left;width:100%;font-family:arial;font-size:40px;font-weight:bold;text-decoration:underline;margin:25px 0 20px}#content_list{position:relative;float:left;width:100%;height:auto;list-style:none;margin:0;padding:0;border:2px solid #000;border-bottom:1px solid #000;box-sizing:border-box}#content_list li{position:relative;float:left;width:100%;height:auto;list-style:none;margin:0;padding:0;border-bottom:1px solid #000;box-sizing:border-box;font-family:MV Boli,sans-serif}#content_list li:nth-child(2n+1){background-color:#F2F2F2}#content_list li.row_title{background-color:#BDBDBD;font-family:arial;font-weight:bold;border-bottom:2px solid #000}#content_list li .row_1{position:relative;float:left;width:40%;height:auto;min-height:100%;list-style:none;margin:0;padding:7px 5px;border-right:1px solid #000;box-sizing:border-box}#content_list li .row_2{position:relative;float:left;width:20%;height:auto;min-height:100%;list-style:none;margin:0;padding:7px 5px;border-right:1px solid #000;box-sizing:border-box}#content_list li .row_3{position:relative;float:left;width:20%;height:auto;min-height:100%;list-style:none;margin:0;padding:7px 5px;border-right:1px solid #000;box-sizing:border-box}#content_list li .row_4{position:relative;float:left;width:20%;height:auto;min-height:100%;list-style:none;margin:0;padding:7px 5px;box-sizing:border-box}#pagination{position:relative;float:left;display:flex;flex-direction:row;width:100%;padding:0;margin:20px 0}#pagination div{flex:1 1 0;margin:0 10px;font-weight:bold}#pagination #previous_page{text-align:left;color:#A4A4A4}#pagination #current_page{text-align:center}#pagination #next_page{text-align:right;color:#bdbdbd}.link{text-decoration:underline}.link:hover{color:#0404B4;cursor:pointer}@media screen and (max-width:780px){#contents_table{padding:50px 15px 30px}#contents_pin{width:120px;left:50%;margin-left:-60px}#contents_pin #header_pin{position:relative;float:left;width:100%;height:auto;z-index:2}#contents_pin #header_pin .circle_pin{width:14px;height:14px;border:14px solid #6E6E6E}#contents_pin #header_pin .trapezoid_pin{margin:-5px auto 0;width:20px;border-bottom:30px solid #6E6E6E;border-left:20px solid transparent;border-right:20px solid transparent}#contents_pin #body_pin .center_pin{width:60px;height:30px}#contents_pin #body_pin .trangle_left_pin{border-bottom:25px solid #C4C7CE;border-left:30px solid transparent;left:0}#contents_pin #body_pin .trangle_right_pin{border-bottom:25px solid #C4C7CE;border-right:30px solid transparent;right:0}.screw_pin{width:8px;height:8px}#contents_pin #body_pin .trangle_left_pin .screw_pin{top:12px;right:5px}#contents_pin #body_pin .trangle_right_pin .screw_pin{top:12px;left:5px}#contents_pin #footer_pin{height:30px}#contents_pin #footer_pin .footer_pin_top{height:20px}#contents_area #contents_title{width:100%;text-align:center}#contents_area #content_list li div{width:100%;text-align:center;border-right:none}#content_list .row_title .row_2,#content_list .row_title .row_3,#content_list .row_title .row_4{display:none}#content_list li .row_2,#content_list li .row_3,#content_list li .row_4{color:#BDBDBD}}