2016-11-13 21:12:36 +00:00
<!DOCTYPE html>
< html >
< head >
<!-- Live demo styled as of 20161111 -->
2016-11-22 08:32:05 +00:00
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/f3acf0b06d3784e17b6bf89ed2913e6e53f3c5a0/dist/mini - default.min.css"> -->
2016-11-13 21:12:36 +00:00
<!-- Local stylesheet -->
< link rel = "stylesheet" href = "../../dist/mini-default.min.css" >
< title > mini.css - A minimal Sass-y responsive mobile-first style-agnostic CSS framework< / title >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< meta name = "description" content = "mini.css - A minimal Sass-y responsive mobile-first style-agnostic CSS framework" >
< meta name = "keywords" content = "mini, mini.css, CSS, responsive, framework, mobile first, style agnostic, Sass" >
< meta name = "author" content = "Angelos Chalaris (chalarangelo)" >
< link rel = "icon" type = "image/png" href = "favicon.png" >
< link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" >
< style >
#header-logo {
display: inline; height: 28px; width: 28px; margin-top: 2px; background: #558b2f; border-radius: 1px;
margin-left: -3px; padding: 2px;
}
#top-logo {
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
#top-header {
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
}
#top-version-tag {
padding: 3px 5px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.box-centered { text-align: center; }
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
.box-colored.red { background: #b71c1c; }
.card.fluid.box-centered {
-webkit-box-pack: start;
-webkit-box-align: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-self: auto;
align-self: auto;
}
@media (max-width: 800px) {
.row.cards {
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
flex-direction: column;
}
.card.fluid.box-centered {
width: auto;
}
}
< / style >
< / head >
< body >
< header >
< img class = "logo" src = "mini-logo.svg" id = "header-logo" > < div style = "display: inline; overflow: auto;" >
< a href = "#" class = "button" > Introduction< / a >
< a href = "#" class = "button" > Module Overview< / a >
< a href = "#" class = "button" > Module Demos< / a >
< a href = "#" class = "button" > Flavors< / a >
< a href = "#" class = "button" > Customization< / a >
< a href = "https://github.com/Chalarangelo/mini.css" class = "button" > Github< / a >
< / div >
< / header >
< div class = "container" style = "height: 320px; background: -webkit-linear-gradient(#455a64,#263238); background: linear-gradient(#455a64,#263238); box-shadow: 0 3px 9px rgba(0,0,0,0.26), 0 3px 6px rgba(0,0,0,0.35);" >
< div class = "row" >
< div class = "col-sm" >
< div class = "box-centered" >
< img src = "mini-logo.svg" id = "top-logo" >
< h1 id = "top-header" > < span style = "font-size: 1.35em;" > m< / span > ini< span style = "font-size:0.65em; color: #558b2f;" > .css< / span > < / h1 >
< mark class = "tag tertiary" id = "top-version-tag" > v2.0< / mark >
< / div >
< / div >
< / div >
< / div >
<!-- Insert your page content here -->
< main > < div class = "container" style = "padding-top: 20px;" >
2016-11-21 22:08:27 +00:00
< table class = "striped" >
2016-11-21 21:56:10 +00:00
< caption > Hacker List< / caption >
< thead >
< tr >
< th > Name< / th >
< th > Surname< / th >
< th > Email< / th >
< th > Handle< / th >
< / tr >
< / thead >
< tfoot >
< tr >
< td > Sum< / td >
< td > $180< / td >
< td > Sum< / td >
< td > $180< / td >
< / tr >
< / tfoot >
< tbody >
< tr >
< td data-label = "Name" > John< / td >
< td data-label = "Surname" > Smith< / td >
< td data-label = "Email" > johnsmith@mail.com< / td >
< td data-label = "Handle" > SmithereensJohn< / td >
< / tr >
< tr >
< td data-label = "Name" > Lisa< / td >
< td data-label = "Surname" > Cody< / td >
< td data-label = "Email" > codyl@mail.com< / td >
< td data-label = "Handle" > Codyl< / td >
< / tr >
< tr >
< td data-label = "Name" > Max< / td >
< td data-label = "Surname" > Roberts< / td >
< td data-label = "Email" > terminus@mail.com< / td >
< td data-label = "Handle" > T3rm1nu5< / td >
< / tr >
< tr >
< td data-label = "Name" > Adam< / td >
< td data-label = "Surname" > Leeks< / td >
< td data-label = "Email" > leekt@mail.com< / td >
< td data-label = "Handle" > Leekt< / td >
< / tr >
< / tbody >
< / table >
< br >
< table class = "preset" >
< caption > Hacker List< / caption >
< thead >
< tr >
< th > Name< / th >
< th > Surname< / th >
< th > Email< / th >
< th > Handle< / th >
< / tr >
< / thead >
< tfoot >
< tr >
< td > Sum< / td >
< td > $180< / td >
< td > Sum< / td >
< td > $180< / td >
< / tr >
< / tfoot >
< tbody >
< tr >
< td data-label = "Name" > John< / td >
< td data-label = "Surname" > Smith< / td >
< td data-label = "Email" > johnsmith@mail.com< / td >
< td data-label = "Handle" > SmithereensJohn< / td >
< / tr >
< tr >
< td data-label = "Name" > Lisa< / td >
< td data-label = "Surname" > Cody< / td >
< td data-label = "Email" > codyl@mail.com< / td >
< td data-label = "Handle" > Codyl< / td >
< / tr >
< tr >
< td data-label = "Name" > Max< / td >
< td data-label = "Surname" > Roberts< / td >
< td data-label = "Email" > terminus@mail.com< / td >
< td data-label = "Handle" > T3rm1nu5< / td >
< / tr >
< tr >
< td data-label = "Name" > Adam< / td >
< td data-label = "Surname" > Leeks< / td >
< td data-label = "Email" > leekt@mail.com< / td >
< td data-label = "Handle" > Leekt< / td >
< / tr >
< / tbody >
< / table >
< br >
2016-11-21 22:13:06 +00:00
< table class = "horizontal striped" >
2016-11-21 21:56:10 +00:00
< caption > Hacker List< / caption >
< thead >
< tr >
< th > Name< / th >
< th > Surname< / th >
< th > Email< / th >
< th > Handle< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td data-label = "Name" > John< / td >
< td data-label = "Surname" > Smith< / td >
< td data-label = "Email" > johnsmith@mail.com< / td >
< td data-label = "Handle" > SmithereensJohn< / td >
< / tr >
< tr >
< td data-label = "Name" > Lisa< / td >
< td data-label = "Surname" > Cody< / td >
< td data-label = "Email" > codyl@mail.com< / td >
< td data-label = "Handle" > Codyl< / td >
< / tr >
< tr >
< td data-label = "Name" > Max< / td >
< td data-label = "Surname" > Roberts< / td >
< td data-label = "Email" > terminus@mail.com< / td >
< td data-label = "Handle" > T3rm1nu5< / td >
< / tr >
< tr >
< td data-label = "Name" > Adam< / td >
< td data-label = "Surname" > Leeks< / td >
< td data-label = "Email" > leekt@mail.com< / td >
< td data-label = "Handle" > Leekt< / td >
< / tr >
< tr >
< td data-label = "Name" > John< / td >
< td data-label = "Surname" > Smith< / td >
< td data-label = "Email" > johnsmith@mail.com< / td >
< td data-label = "Handle" > SmithereensJohn< / td >
< / tr >
< tr >
< td data-label = "Name" > Lisa< / td >
< td data-label = "Surname" > Cody< / td >
< td data-label = "Email" > codyl@mail.com< / td >
< td data-label = "Handle" > Codyl< / td >
< / tr >
< tr >
< td data-label = "Name" > Max< / td >
< td data-label = "Surname" > Roberts< / td >
< td data-label = "Email" > terminus@mail.com< / td >
< td data-label = "Handle" > T3rm1nu5< / td >
< / tr >
< tr >
< td data-label = "Name" > Adam< / td >
< td data-label = "Surname" > Leeks< / td >
< td data-label = "Email" > leekt@mail.com< / td >
< td data-label = "Handle" > Leekt< / td >
< / tr >
< tr >
< td data-label = "Name" > John< / td >
< td data-label = "Surname" > Smith< / td >
< td data-label = "Email" > johnsmith@mail.com< / td >
< td data-label = "Handle" > SmithereensJohn< / td >
< / tr >
< tr >
< td data-label = "Name" > Lisa< / td >
< td data-label = "Surname" > Cody< / td >
< td data-label = "Email" > codyl@mail.com< / td >
< td data-label = "Handle" > Codyl< / td >
< / tr >
< tr >
< td data-label = "Name" > Max< / td >
< td data-label = "Surname" > Roberts< / td >
< td data-label = "Email" > terminus@mail.com< / td >
< td data-label = "Handle" > T3rm1nu5< / td >
< / tr >
< tr >
< td data-label = "Name" > Adam< / td >
< td data-label = "Surname" > Leeks< / td >
< td data-label = "Email" > leekt@mail.com< / td >
< td data-label = "Handle" > Leekt< / td >
< / tr >
< tr >
< td data-label = "Name" > John< / td >
< td data-label = "Surname" > Smith< / td >
< td data-label = "Email" > johnsmith@mail.com< / td >
< td data-label = "Handle" > SmithereensJohn< / td >
< / tr >
< tr >
< td data-label = "Name" > Lisa< / td >
< td data-label = "Surname" > Cody< / td >
< td data-label = "Email" > codyl@mail.com< / td >
< td data-label = "Handle" > Codyl< / td >
< / tr >
< tr >
< td data-label = "Name" > Max< / td >
< td data-label = "Surname" > Roberts< / td >
< td data-label = "Email" > terminus@mail.com< / td >
< td data-label = "Handle" > T3rm1nu5< / td >
< / tr >
< tr >
< td data-label = "Name" > Adam< / td >
< td data-label = "Surname" > Leeks< / td >
< td data-label = "Email" > leekt@mail.com< / td >
< td data-label = "Handle" > Leekt< / td >
< / tr >
< / tbody >
< / table >
< br >
< table class = "horizontal preset" >
< caption > Hacker List< / caption >
< thead >
< tr >
< th > Name< / th >
< th > Surname< / th >
< th > Email< / th >
< th > Handle< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td data-label = "Name" > John< / td >
< td data-label = "Surname" > Smith< / td >
< td data-label = "Email" > johnsmith@mail.com< / td >
< td data-label = "Handle" > SmithereensJohn< / td >
< / tr >
< tr >
< td data-label = "Name" > Lisa< / td >
< td data-label = "Surname" > Cody< / td >
< td data-label = "Email" > codyl@mail.com< / td >
< td data-label = "Handle" > Codyl< / td >
< / tr >
< tr >
< td data-label = "Name" > Max< / td >
< td data-label = "Surname" > Roberts< / td >
< td data-label = "Email" > terminus@mail.com< / td >
< td data-label = "Handle" > T3rm1nu5< / td >
< / tr >
< tr >
< td data-label = "Name" > Adam< / td >
< td data-label = "Surname" > Leeks< / td >
< td data-label = "Email" > leekt@mail.com< / td >
< td data-label = "Handle" > Leekt< / td >
< / tr >
< tr >
< td data-label = "Name" > John< / td >
< td data-label = "Surname" > Smith< / td >
< td data-label = "Email" > johnsmith@mail.com< / td >
< td data-label = "Handle" > SmithereensJohn< / td >
< / tr >
< tr >
< td data-label = "Name" > Lisa< / td >
< td data-label = "Surname" > Cody< / td >
< td data-label = "Email" > codyl@mail.com< / td >
< td data-label = "Handle" > Codyl< / td >
< / tr >
< tr >
< td data-label = "Name" > Max< / td >
< td data-label = "Surname" > Roberts< / td >
< td data-label = "Email" > terminus@mail.com< / td >
< td data-label = "Handle" > T3rm1nu5< / td >
< / tr >
< tr >
< td data-label = "Name" > Adam< / td >
< td data-label = "Surname" > Leeks< / td >
< td data-label = "Email" > leekt@mail.com< / td >
< td data-label = "Handle" > Leekt< / td >
< / tr >
< tr >
< td data-label = "Name" > John< / td >
< td data-label = "Surname" > Smith< / td >
< td data-label = "Email" > johnsmith@mail.com< / td >
< td data-label = "Handle" > SmithereensJohn< / td >
< / tr >
< tr >
< td data-label = "Name" > Lisa< / td >
< td data-label = "Surname" > Cody< / td >
< td data-label = "Email" > codyl@mail.com< / td >
< td data-label = "Handle" > Codyl< / td >
< / tr >
< tr >
< td data-label = "Name" > Max< / td >
< td data-label = "Surname" > Roberts< / td >
< td data-label = "Email" > terminus@mail.com< / td >
< td data-label = "Handle" > T3rm1nu5< / td >
< / tr >
< tr >
< td data-label = "Name" > Adam< / td >
< td data-label = "Surname" > Leeks< / td >
< td data-label = "Email" > leekt@mail.com< / td >
< td data-label = "Handle" > Leekt< / td >
< / tr >
< tr >
< td data-label = "Name" > John< / td >
< td data-label = "Surname" > Smith< / td >
< td data-label = "Email" > johnsmith@mail.com< / td >
< td data-label = "Handle" > SmithereensJohn< / td >
< / tr >
< tr >
< td data-label = "Name" > Lisa< / td >
< td data-label = "Surname" > Cody< / td >
< td data-label = "Email" > codyl@mail.com< / td >
< td data-label = "Handle" > Codyl< / td >
< / tr >
< tr >
< td data-label = "Name" > Max< / td >
< td data-label = "Surname" > Roberts< / td >
< td data-label = "Email" > terminus@mail.com< / td >
< td data-label = "Handle" > T3rm1nu5< / td >
< / tr >
< tr >
< td data-label = "Name" > Adam< / td >
< td data-label = "Surname" > Leeks< / td >
< td data-label = "Email" > leekt@mail.com< / td >
< td data-label = "Handle" > Leekt< / td >
< / tr >
< / tbody >
< / table >
2016-11-22 08:32:05 +00:00
< style > . border-fix > td , . border-fix > th { border-top : 0 ; } < / style >
2016-11-21 21:56:10 +00:00
< table class = "preset" >
< caption > Hacker List< / caption >
< tbody >
2016-11-22 08:32:05 +00:00
< tr class = "border-fix" >
2016-11-21 21:56:10 +00:00
< th data-label = "Name" > < / th >
< th data-label = "Surname" > Surname< / td >
< th data-label = "Email" > Email< / td >
< th data-label = "Handle" > Handle< / td >
< / tr >
< tr >
< th data-label = "Name" > John< / th >
< td data-label = "Surname" > Smith< / td >
< td data-label = "Email" > johnsmith@mail.com< / td >
< td data-label = "Handle" > SmithereensJohn< / td >
< / tr >
< tr >
< th data-label = "Name" > Lisa< / th >
< td data-label = "Surname" > Cody< / td >
< td data-label = "Email" > codyl@mail.com< / td >
< td data-label = "Handle" > Codyl< / td >
2016-11-22 08:32:05 +00:00
< / tr >
< tr >
< th data-label = "Name" > Max< / th >
< td data-label = "Surname" > Roberts< / td >
< td data-label = "Email" > terminus@mail.com< / td >
< td data-label = "Handle" > T3rm1nu5< / td >
< / tr >
< tr >
< th data-label = "Name" > Adam< / th >
< td data-label = "Surname" > Leeks< / td >
< td data-label = "Email" > leekt@mail.com< / td >
< td data-label = "Handle" > Leekt< / td >
< / tr >
< / tbody >
< / table >
< table class = "preset" >
< caption > Hacker List< / caption >
< tbody >
< tr class = "border-fix" >
< th data-label = "Name" > John< / th >
< td data-label = "Surname" > Smith< / td >
< td data-label = "Email" > johnsmith@mail.com< / td >
< td data-label = "Handle" > SmithereensJohn< / td >
< / tr >
< tr >
< th data-label = "Name" > Lisa< / th >
< td data-label = "Surname" > Cody< / td >
< td data-label = "Email" > codyl@mail.com< / td >
< td data-label = "Handle" > Codyl< / td >
2016-11-21 21:56:10 +00:00
< / tr >
< tr >
< th data-label = "Name" > Max< / th >
< td data-label = "Surname" > Roberts< / td >
< td data-label = "Email" > terminus@mail.com< / td >
< td data-label = "Handle" > T3rm1nu5< / td >
< / tr >
< tr >
< th data-label = "Name" > Adam< / th >
< td data-label = "Surname" > Leeks< / td >
< td data-label = "Email" > leekt@mail.com< / td >
< td data-label = "Handle" > Leekt< / td >
< / tr >
< / tbody >
< / table >
2016-11-13 21:12:36 +00:00
< / div > < / main >
<!-- End of page content -->
< footer > < strong > mini.css< / strong > was designed and built by < a href = "https://github.com/Chalarangelo" > @Chalarangelo< / a > . It is licensed under the < a href = "https://github.com/Chalarangelo/mini.css/blob/master/LICENSE" > MIT License< / a > . You can view the project's source code on < a href = "https://github.com/Chalarangelo/mini.css" > Github< / a > .< / footer >
< / body >
< / html >