Edit on
<div class="page">
            <div class="main-content container">
                <div class="span-xs-full">
                    <h1>Siegmeyer 2 Demo</h1>
                    <p class="caption">A SMACSS Boilerplate. Includes responsive grids &amp; typographic rhythm. </p>
                    <p>Don't forget to adjust your cap heights on a per-font basis!</p>
                
                    <p>Consectetur adipisicing elit, alias at autem magna aliquid <a href="#top">quam proident</a> quis aliquam. temporibus minus eius veniam cupidatat ex, voluptas fuga, quos, mollitia incidunt do officia facilis. molestiae consequat excepturi laborum perferendis tempor minim eiusmod minim minus quia&nbsp;sint.</p>
                
                    <p>Quos atque officia quod. <i>Suscipit delectus</i> cupidatat, quia nulla numquam aute cillum proident. Maiores iusto culpa molestias quam id tenetur saepe impedit reiciendis itaque ducimus itaque nostrud. Tempor aliquip, culpa earum itaque sed consequatur minus aliquip reprehenderit nihil veniam tempora do maxime omnis reiciendis elit&nbsp;tempora.</p>
                
                    <ol>
                        <li>Perferendis tempor</li>
                        <li>Minim eiusmod </li>
                        <li>Tempor</li>
                        <li>Minus quia sint</li>
                    </ol>
                
                    <div class="sidebar">
                        <h3>Sidebar</h3>
                        <p>Showing more than one column of content Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias voluptatum nemo nisi animi fugit.</p>
                        <p>Iste placeat sequi laudantium maiores, optio ipsum minus eius autem maxime quam. Quos deserunt, et.</p>
                    </div>
                
                    <h2>Voluptates mollitia quod tempore laboris&nbsp;commodi</h2>
                
                    <p>Proident dolores corrupti consequatur voluptatibus labore commodi quos. <b>Incidunt mollitia</b> tempora assumenda laborum voluptate accusamus dolore optio incididunt. Maiores at duis consequatur corrupti consectetur, aliquam optio commodo accusamus distinctio, necessitatibus&nbsp;nostrum.</p>
                
                    <p>Optio, nesciunt, quo, fugiat, blanditiis at quas excepturi quae maiores vel corrupti voluptate cupiditate nemo! In, eius quidem harum quibusdam ratione non. Iste, deleniti, fugit, voluptas aperiam qui adipisci provident ab accusantium possimus eveniet voluptate&nbsp;consectetur!</p>
                
                    <h2>Repellat optio</h2>
                
                    <h3>Ad perferendis omnis</h3>
                
                    <p>Pariatur animi quis. Dolorem cupiditate <a href="#top">praesentium duis</a> iusto corrupti nobis nostrud, exercitation consequatur. Nulla minim dignissimos reprehenderit voluptatem. Recusandae delectus iure vel asperiores saepe dolorum omnis eu aliquam&nbsp;similique.</p>
                
                    <blockquote><p>Fuga rerum laboris officia cupidatat, excepteur aliquid ut quis facere, cumque harum optio dignissimos. Duis repellat tempore dolor blanditiis alias impedit officiis ut&nbsp;consectetur.</p></blockquote>
                
                    <pre><code>body {
    color: blue;
}</code></pre>
                
                    <h4>Quibusdam illum quo</h4>
                
                    <p>Quos laboris eos, laborum animi. Ea blanditiis ducimus fugiat officia nostrud consectetur recusandae excepteur. Quis qui maiores distinctio facilis saepe&nbsp;eos.</p>
                
                    <h5>Consectetur nobis consequat voluptates&nbsp;eiusmod</h5>
                
                    <p>Iure vel nostrud repellendus. <b>Nostrud</b> autem consequatur, provident officiis qui, mollit exercitation. Veniam minus cillum suscipit aliqua, tenetur. Anim mollitia necessitatibus ad quos consectetur voluptatem do&nbsp;<a href="#top">corporis</a>.</p>
                
                    <ul>
                        <li>Perferendis tempor</li>
                        <li>Minim eiusmod </li>
                        <li>Tempor</li>
                        <li>Minus quia sint</li>
                    </ul>
                
                    <p>Corporis eligendi minim, enim proident reprehenderit iusto. <i>Reprehenderit</i> commodo commodi, repudiandae voluptas saepe sint libero. Praesentium eius distinctio ullamco vero iusto praesentium eligendi animi. Consectetur dolore vero similique dolore, ut labore&nbsp;omnis.</p>
                
                    <h6>Maxime alias anim similique</h6>
                
                    <p>Omnis corporis assumenda nisi ullam dolores culpa repellat. Molestias praesentium necessitatibus minus, reiciendis officiis commodo incidunt. Consectetur nostrud odio numquam&nbsp;tenetur.</p>
                
                    <hr>
                
                    <h1>Heading level 1</h1>
                
                    <h2>Heading level 2</h2>
                
                    <h3>Heading level 3</h3>
                
                    <h4>Heading level 4</h4>
                
                    <h5>Heading level 5</h5>
                
                    <h6>Heading level 6</h6>
                
                    <p>Paragraph with <b>bold</b>, <i>italic</i>, <a href="#top">link</a> and <code>code</code> styles.</p>
                
                    <blockquote><p>Blockquote</p></blockquote>
                
                    <p class="caption">Caption text</p>
                
                    <ol>
                        <li>Ordered list element one</li>
                        <li>Ordered list element two</li>
                        <li>Ordered list element three</li>
                    </ol>
                
                    <ul>
                        <li>Unordered list element one</li>
                        <li>Unordered list element two</li>
                        <li>Unordered list element three</li>
                    </ul>
                </div>
                <div class="clear">
                    <div class="span-md-3 lock-md-right">
                        <h4>Span 3, lock right (medium)</h4>
                        <p>Officia consequatur quaerat atque alias optio <a href="#">quae illum</a></p>
                    </div>
                
                    <aside class="span-md-3">
                        <h4>Span 3 (medium)</h4>
                
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, repellendus unde labore rerum, vitae sequi nemo necessitatibus tempora magni eligendi officia quae illum voluptatum dolorem quidem nam ducimus magnam a!</p>
                    </aside>
                
                    <div class="span-md-6">
                        <h2>Span 6 (medium)</h2>
                
                        <p>Officia consequatur quaerat atque alias optio amet earum, tempore modi!</p>
                
                        <h4>Heading 4</h4>
                        <p>Lorem ipsum dolor sit amet. Illum voluptates, porro cupiditate accusantium.</p>
                
                        <h2>Heading 2</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, repellendus unde labore rerum, vitae sequi nemo necessitatibus tempora magni eligendi officia quae illum voluptatum dolorem quidem nam ducimus magnam a!</p>
                    </div>
                
                    <div class="span-md-6 push-md-3">
                        <h4>Span 6, push 3 (medium)</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis nisi voluptatem vel dolorum facilis, assumenda, quaerat repellendus ratione explicabo nemo dignissimos saepe temporibus natus, autem laudantium perferendis illum, omnis qui.</p>
                    </div>
                
                    <div class="span-xs-full nest-md-6 push-md-3 stack-xs-on stack-md-off">
                        <div class="span-md-6">
                            <h2>Span 6, nested (medium)</h2>
                            <h3>Heading 3</h3>
                            <ul>
                                <li>Officia error quo et illum!</li>
                                <li>Ipsum saepe pariatur atque vel quasi. Nesciunt saepe, a nihil earum vel.</li>
                                <li>Totam expedita, eius, deleniti repudiandae qui beatae dicta veritatis nobis animi asperiores voluptatum!</li>
                            </ul>
                
                            <h2>Heading 2</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus neque, quam, eos omnis aliquam libero. Alias laborum dolore vitae sunt ipsam aliquam, saepe quam suscipit id, beatae dolorum deserunt necessitatibus.</p>
                        </div>
                
                        <div class="pull-md-3 span-md-3 stack-xs-start">
                            <h4>Span 3, pull 3, nested (medium)</h4>
                            <p>Fuga libero voluptatum, ex soluta. Quo harum, magni eaque rerum labore incidunt.</p>
                            <p>Dicta tempora, quod sapiente saepe reprehenderit repellat.</p>
                        </div>
                    </div>
                </div>
                
            </div>

            <footer class="footer">
                <div class="container">
                    HODOR
                </div>
            </footer>
        </div>
body, html {
  background-color: #4b4c57;
  color: #fff;
}

h1,h2,h3,h4,h5,h6,p,a,.caption,li,blockquote p {
  color: #fff;
}

.page {
  padding: 2rem 0;
}
View Compiled
Rerun