template-fixed-header+centered-content.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" media="all"  href="assets/css/cascade/production/build-full.min.css" />
        <link rel="stylesheet" type="text/css" media="all"  href="assets/css/site.css" />
        <!--[if lt IE 8]><link rel="stylesheet" href="assets/css/cascade/production/icons-ie7.min.css"><![endif]-->
        <!--[if lt IE 9]><script src="assets/js/shim/iehtmlshiv.js"></script><![endif]-->
        <title>Cascade Framework</title>
        <meta name="description" content="Professional Frontend framework that makes building websites easier than ever.">
        <link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style type="text/css">
        </style>
    </head>
    <body>
        <div class="site-header-fixture">
            <div class="site-header-ghost">
                <div class="col width-fit mobile-width-fit">
                    <div class="cell">
                        <a href="#" class="logo"></a>
                    </div>
                </div>
                <div class="col width-fill mobile-width-fill">
                    <div class="cell">
                        <ul class="col nav">
                            <li class="active"><a href="#">Item one</a></li>
                            <li><a href="#">Item two</a></li>
                            <li><a href="#">Item three</a></li>
                            <li><a href="#">Item four</a></li>
                            <li><a href="#">Item five</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="site-header">
                <div class="col width-fit mobile-width-fit">
                    <div class="cell">
                        <a href="#" class="logo"></a>
                    </div>
                </div>
                <div class="col width-fill mobile-width-fill">
                    <div class="cell">
                        <ul class="col nav">
                            <li class="active"><a href="#">Item one</a></li>
                            <li><a href="#">Item two</a></li>
                            <li><a href="#">Item three</a></li>
                            <li><a href="#">Item four</a></li>
                            <li><a href="#">Item five</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="site-body centered-content">
            <div class="site-center">
                <div class="cell">
                    <div class="col">
                        <div class="cell">
                            <div class="page-header">
                                <h1>Fixed header & centered content</h1>
                            </div>
                        </div>
                    </div>
                    <div class="col content">
                        <div class="col">
                            <div class="cell">
                                <div class="template-header">
                                    <h2>Lorem ipsum</h2>
                                </div>
                                <div class="col leuven">
                                    <div class="cell panel">
                                        <div class="body">
                                            <div class="cell">
                                                <figure class="nuremberg">  
                                                    <img src="assets/img/other/leuven.jpg" alt=""> 
                                                    <figcaption>Leuven</figcaption>  
                                                </figure>  
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt nibh nec ipsum tincidunt mattis. Etiam a lectus sed dui eleifend pharetra ut sed elit. Fusce sagittis libero a nulla convallis nec porttitor purus mollis. Donec at risus metus. Vivamus id dui at sapien condimentum bibendum. Pellentesque ullamcorper convallis justo, sit amet viverra purus vehicula quis. Ut eget urna sit amet lorem sagittis pretium. Nulla luctus pretium neque, eget faucibus eros vehicula quis. Mauris venenatis, arcu eu vestibulum consectetur, enim ipsum porttitor mi, non iaculis nisi ipsum ut risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed laoreet elit eu tortor vulputate sed dignissim orci auctor.
                                </p>
                                <p>
                                    Aliquam erat volutpat. Etiam ac purus nisl, vitae malesuada purus. Vestibulum id egestas velit. Proin vitae quam mi. Integer faucibus, urna ac iaculis fermentum, magna enim auctor nulla, ac elementum turpis tortor eget erat. Duis lobortis sagittis nibh commodo consectetur. Proin ut dui in tellus dapibus molestie. Maecenas est ipsum, suscipit id condimentum in, feugiat ut urna. In congue hendrerit consequat. Nunc libero ligula, luctus vitae laoreet nec, blandit eu nisi. Suspendisse in semper tortor. Fusce tempor turpis eu ligula adipiscing tristique. Praesent suscipit nibh at sapien facilisis molestie. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed venenatis placerat libero, eu ullamcorper tortor venenatis vel. Nulla facilisi.
                                </p>
                                <p>
                                    Aliquam molestie, lorem a tempus suscipit, ipsum felis sodales lorem, ac porta orci sem ac mauris. Proin aliquam metus a nibh ullamcorper volutpat. Donec id turpis quis nisl venenatis commodo. Vivamus et neque urna, in rhoncus augue. Praesent vel lectus ut erat varius imperdiet eget id arcu. Morbi rutrum sollicitudin metus quis congue. Integer facilisis, velit non semper feugiat, urna tellus pulvinar nunc, at convallis tellus libero sit amet risus. Phasellus a sem lectus. Ut lacus tellus, posuere id ornare dapibus, tristique nec dolor. Aenean id quam quis diam ullamcorper facilisis elementum congue elit. Cras eu velit lacus, ac elementum nulla. Aliquam odio justo, sagittis at blandit a, porttitor ac mi. Sed scelerisque tristique nisi, sit amet iaculis augue egestas et. Quisque iaculis luctus nulla, nec tempus dui vehicula eget. Aliquam non augue ipsum.
                                </p>
                                <p>
                                    Mauris neque leo, tristique sed euismod at, mattis sit amet ipsum. Sed et laoreet ipsum. Suspendisse pulvinar, nisi eget volutpat molestie, sapien neque mollis ante, et accumsan elit elit at erat. In hac habitasse platea dictumst. Nulla vulputate facilisis mattis. Aliquam a pharetra felis. Cras nec sagittis urna. Nulla tincidunt egestas ultricies. Suspendisse posuere arcu at dolor imperdiet id rhoncus purus ultrices.
                                </p>
                            </div>
                        </div>
                        <div class="col">
                            <div class="cell">
                                <hr />
                            </div>
                        </div>
                        <div class="col">
                            <div class="cell">
                                <div class="template-header">
                                    <h2>Vestibulum ante</h2>
                                </div>
                                <div class="col leuven">
                                    <div class="cell panel">
                                        <div class="body">
                                            <div class="cell">
                                                <figure class="nuremberg">  
                                                    <img src="assets/img/other/efteling.jpg" alt=""> 
                                                    <figcaption>Efteling</figcaption>  
                                                </figure>  
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <p>
                                    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer turpis libero, condimentum in pellentesque eget, viverra ac neque. Nunc vel quam vel mauris adipiscing varius. Sed tempus, neque a ullamcorper accumsan, mi orci faucibus sapien, vitae auctor urna ligula id libero. Etiam id sem nisi. Duis commodo ultricies purus id vestibulum. Sed ornare nisl eu diam consectetur quis molestie risus facilisis. Cras auctor vulputate libero nec pulvinar. In hac habitasse platea dictumst. Proin dictum pellentesque tincidunt. Proin posuere, libero et viverra volutpat, magna mi eleifend turpis, vel placerat mi sem tempus metus. Quisque semper, diam nec dictum vestibulum, erat felis aliquet orci, in scelerisque leo leo ac augue. Nulla ut neque eros, eu scelerisque purus.
                                </p>
                                <p>
                                    Duis ante massa, pulvinar a suscipit in, ultricies id libero. Curabitur molestie, ante sed sagittis fringilla, neque sem gravida dui, et mattis nunc elit in nulla. Nulla felis nunc, aliquam et rutrum quis, imperdiet non orci. Nulla congue dignissim accumsan. Morbi vitae vehicula sapien. Cras ut est augue. Ut euismod varius mi vel porta. Vestibulum ultrices fringilla magna eget bibendum. Quisque mollis ultricies risus, eget luctus tortor ultricies vel. Aenean scelerisque dolor a enim ullamcorper consequat. Donec a ante dolor.
                                </p>
                                <p>
                                    Praesent sed turpis condimentum quam tincidunt varius. Sed commodo gravida erat, in sagittis purus ultrices quis. Quisque iaculis nisi ut dolor tincidunt sodales. Cras velit nulla, congue a commodo quis, sagittis a velit. Suspendisse eget enim vitae lorem sagittis iaculis. Nulla dapibus turpis id nisl posuere tempor. Mauris eleifend tempor venenatis. Maecenas scelerisque risus vel risus tincidunt ac dictum arcu dignissim. Quisque tempus sollicitudin risus, eget mollis odio adipiscing sit amet. Phasellus commodo convallis aliquam. Suspendisse mattis, erat sit amet vestibulum euismod, mi nisl euismod lectus, eget rutrum lectus ipsum sed dui. Curabitur at urna nisl. Vestibulum et dolor tortor. Morbi vitae tellus odio, sit amet gravida libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc eu tellus libero.
                                </p>
                                <p>
                                    Quisque non nunc et eros rhoncus lacinia in ut libero. Integer ut elit risus. Integer nec nisi odio. Praesent metus mauris, tincidunt eu congue at, egestas et nisl. Nam eget consectetur dui. Sed ac molestie ipsum. Phasellus id dui sem, ac eleifend tellus. Nam tincidunt porttitor arcu eu ultrices. Cras tempus orci eu mauris varius vel dignissim tortor feugiat. Proin laoreet cursus justo id accumsan.
                                </p>
                                <p>
                                    Proin lorem risus, ornare sit amet tristique sit amet, sodales sed massa. Morbi non enim massa, ac accumsan urna. Vestibulum ut metus ut nulla blandit lobortis. Nam viverra enim in lacus malesuada pulvinar. Quisque mollis, nisi ac dictum blandit, lectus felis pulvinar sem, id porttitor erat ipsum rutrum nunc. Suspendisse ut nibh elit, sit amet viverra nisi. Nullam sed leo sem, quis lacinia dolor. Sed et metus sed dui viverra eleifend. Aenean hendrerit elementum justo sed condimentum.
                                </p>
                                <p>
                                    Pellentesque quis erat magna, aliquam imperdiet velit. Nulla cursus tristique nulla, sed scelerisque dui semper ac. Morbi auctor sodales tristique. Aliquam erat volutpat. Aenean faucibus risus tristique nibh feugiat id aliquam dui dignissim. Suspendisse nec ipsum sit amet tellus imperdiet placerat. Nam urna sem, varius a auctor in, dignissim nec ipsum. Donec pellentesque scelerisque orci vel pellentesque. Curabitur rhoncus erat ut velit dignissim pulvinar et ac arcu. Proin ultricies iaculis ipsum a faucibus. Nullam ac nibh diam, eget ornare dolor. Nulla eget orci lectus. Sed sollicitudin erat eu ligula convallis placerat. Phasellus sodales facilisis elit, sit amet vestibulum mi molestie a.
                                </p>
                            </div>
                        </div>


                    </div>
                    <div class="col width-fill">
                        <div class="col">
                            <div class="cell panel">
                                <div class="header">
                                    Login
                                </div>
                                <div class="body">
                                    <div class="cell">
                                        <div class="col">
                                            <div class="cell">
                                                <form>
                                                    <div class="col">
                                                        <div class="col width-1of2">
                                                            <div class="cell">
                                                                <label for="login">Login:</label>
                                                            </div>
                                                        </div>
                                                        <div class="col width-fill">
                                                            <div class="cell">
                                                                <input type="text" id="login" class="text">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col">
                                                        <div class="col width-1of2">
                                                            <div class="cell">
                                                                <label for="password">Password:</label>
                                                            </div>
                                                        </div>
                                                        <div class="col width-fill">
                                                            <div class="cell">
                                                                <input type="password" id="password" class="text">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="cell panel">
                                <div class="header">
                                    Links
                                </div>
                                <div class="body">
                                    <div class="cell menu">
                                        <ul class="left nav links">
                                            <li><a href="#">Item one</a></li>
                                            <li><a href="#">Item two</a></li>
                                            <li><a href="#">Item three</a></li>
                                            <li><a href="#">Item four</a></li>
                                            <li><a href="#">Item five</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="site-center">
            <div class="site-footer">
                <div class="col width-fit">
                    <div class="cell">
                        <a href="#" class="powered-by"></a>
                    </div>
                </div>
                <div class="col width-fill">
                    <div class="cell pipes">
                        <ul class="nav">
                            <li id="active"><a href="#">Item one</a></li>
                            <li><a href="#">Item two</a></li>
                            <li><a href="#">Item three</a></li>
                            <li><a href="#">Item four</a></li>
                            <li><a href="#">Item five</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <script src="assets/js/app.js"></script>
    </body>
</html>