2016-10-12 16:18:02 +00:00
<!DOCTYPE html>
< html >
< head >
2016-11-11 11:18:27 +00:00
<!-- Live demo styled as of 20161111 -->
< link rel = "stylesheet" href = "https://cdn.rawgit.com/Chalarangelo/mini.css/f429b1037c42505081454ef8aff2409fffb62e74/dist/mini-default.min.css" >
<!-- Local stylesheet -->
<!-- <link rel="stylesheet" href="../../dist/mini - default.min.css"> -->
2016-10-12 16:18:02 +00:00
< 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" >
2016-10-25 17:49:43 +00:00
< link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" >
2016-10-21 14:26:20 +00:00
< style >
2016-11-02 11:17:25 +00:00
#header-logo {
display: inline; height: 28px; width: 28px; margin-top: 2px; background: #558b2f; border-radius: 1px;
margin-left: -3px; padding: 2px;
}
2016-10-21 14:26:20 +00:00
#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; }
2016-10-21 14:50:43 +00:00
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
2016-11-11 10:39:39 +00:00
.box-colored.red { background: #b71c1c; }
2016-10-21 14:26:20 +00:00
< / style >
2016-10-12 16:18:02 +00:00
< / head >
< body >
2016-11-02 11:17:25 +00:00
< 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 >
2016-10-21 20:42:36 +00:00
< div class = "container" style = "height: 320px; background: -webkit-linear-gradient(#455a64,#263238); background: linear-gradient(#455a64,#263238); box-shadow: 0 1px 3px rgba(0,0,0,0.35);" >
2016-10-21 14:26:20 +00:00
< div class = "row" >
2016-10-24 13:43:27 +00:00
< div class = "col-sm" >
2016-10-21 14:26:20 +00:00
< 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 >
2016-11-11 11:18:27 +00:00
<!-- Insert your page content here -->
< main > < div class = "container" >
2016-11-02 11:17:25 +00:00
< div class = "row" style = "padding-top: 20px;" >
2016-10-24 13:43:27 +00:00
< div class = "col-sm-12 col-md" >
2016-10-21 14:26:20 +00:00
< div class = "box-centered" >
< h2 > Minimal< / h2 >
< i class = "fa fa-compress fa-4x" aria-hidden = "true" > < / i >
< br > < br >
< p > < strong > mini.css< / strong > is one of the lightest front-end frameworks on the web: about 5KB gzipped. This helps your websites load faster, while still looking great!< / p >
< / div >
< / div >
2016-10-24 13:43:27 +00:00
< div class = "col-sm-12 col-md" >
2016-10-21 14:26:20 +00:00
< div class = "box-centered" >
< h2 > Reponsive< / h2 >
< i class = "fa fa-mobile fa-4x" aria-hidden = "true" > < / i >
< br > < br >
< p > < strong > mini.css< / strong > is built in such a way that it will look great on most devices and especially phones and tablets. This allows you to easily tailor your websites to different users!< / p >
< / div >
< / div >
2016-10-24 13:43:27 +00:00
< div class = "col-sm-12 col-md" >
2016-10-21 14:26:20 +00:00
< div class = "box-centered" >
< h2 > Style-agnostic< / h2 >
< i class = "fa fa-paint-brush fa-4x" aria-hidden = "true" > < / i >
< br > < br >
< p > < strong > mini.css< / strong > gives you the power of customization, using its fully moddable flavors. This will give you control over how your websites look and allow great designs to stand out!< / p >
< / div >
< / div >
< / div >
2016-11-11 11:18:27 +00:00
< / div > < / main >
<!-- End of page content -->
2016-11-02 19:16:35 +00:00
< 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 >
2016-10-12 16:18:02 +00:00
< / body >
< / html >
