magical-css

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" href="../../../dist/magic.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><link rel="icon" href="//palkerecsenyi.github.io/magic/documentation/media/icon.png" type="image/x-icon" /> <script defer src="https://use.fontawesome.com/releases/v5.0.3/js/all.js"></script> <link rel="stylesheet" href="../../prism.css"> <meta charset="UTF-8"> <title>Magic - Documentation</title> <script> function openNav(){ document.getElementById("nav-mobile").style.width = "100%"; } function closeNav(){ document.getElementById("nav-mobile").style.width = "0"; } </script> <script src="../../navbar.js"></script> </head> <body> <div id="nav-mobile" class="blue animate"> <a href="javascript:void(0)" class="close" onClick="closeNav()">×</a> <a href="https://palkerecsenyi.github.io/magic/">Home</a> <a href="https://palkerecsenyi.github.io/magic/start">Get Started</a> <a href="https://palkerecsenyi.github.io/magic/documentation">Documentation</a> <a href="https://github.com/palkerecsenyi/magic">Github</a> </div> <nav class="blue"> <ul class="nav-left"> <li><a href="/magic" class="nav-brand-text">Magic.CSS</a></li> <li class="nav-mobile-open" onClick="openNav()"><i class="fas fa-bars"></i></li> </ul> <ul class="nav-right"> <li class="nav-item"><a href="https://palkerecsenyi.github.io/magic/">Home</a></li> <li class="nav-item"><a href="https://palkerecsenyi.github.io/magic/start">Get Started</a></li> <li class="nav-item active"><a href="https://palkerecsenyi.github.io/magic/documentation">Documentation</a></li> <li class="nav-item"><a href="https://github.com/palkerecsenyi/magic">Github</a></li> </ul> </nav> <div class="navigation blue"> <div class="links"> <script>addNav(true,"project");</script> </div> </div> <div class="container"> <h1 class="header">Footer <span class="badge red">New!</span></h1> <h2 class="trailer">A simple and versatile footer component using the HTML5 'footer' tag.</h2> <hr class="separator"> </div> <footer class="default"> <div class="body"> <div class="content"> <h1>Example (title)</h1> <p>You can put a short (or long) description of your website here.</p> <p>Any HTML tag is supported.</p> </div> <div class="links"> <ul> <li class="header">Column 1</li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> <ul> <li class="header">Column 2</li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> <ul> <li class="header">Column 3</li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div> </div> <div class="bottom"> <p>Copyright message</p> </div> </footer> <div class="container"> <p>A footer component conists of a <span class="i-code">body</span> section and a <span class="i-code">bottom</span> section. Neither of these are compulsory - you can create a footer without a <span class="i-code">bottom</span> section and a footer without a <span class="i-code">body</span> section.</p> <p>The <span class="i-code">body</span> section contains two further sections: a <span class="i-code">content</span> section to put textual HTML in and a <span class="i-code">links</span> section which contains columnised links.</p> <p>Footers <strong>must</strong> be placed outside of a <code class="language-markup"><div class="container"></code>.</p> <hr class="separator"> <p>The example shown at the top of this page uses the following markup:</p> <pre><code class="language-markup"><footer class="default"> <div class="body"> <div class="content"> <h1>Example (title)</h1> <p>You can put a short (or long) description of your website here.</p> <p>Any HTML tag is supported.</p> </div> <div class="links"> <ul> <li class="header">Column 1</li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> <ul> <li class="header">Column 2</li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> <ul> <li class="header">Column 3</li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div> </div> <div class="bottom"> <p>Copyright message</p> </div> </footer></code></pre> <h2>Colours</h2> <p>Footers can take any <strong>standard</strong> Magic colour. Refer to the <a href="colour.html" class="link lined">colour</a> docs for more info.</p> </div> <footer class="red"> <div class="body"> <div class="content"> <h1>Example (title)</h1> <p>You can put a short (or long) description of your website here.</p> <p>Any HTML tag is supported.</p> </div> <div class="links"></div> </div> <div class="bottom"> <p>Copyright message</p> </div> </footer> <footer class="green"> <div class="body"> <div class="content"> <h1>Example (title)</h1> <p>You can put a short (or long) description of your website here.</p> <p>Any HTML tag is supported.</p> </div> <div class="links"></div> </div> <div class="bottom"> <p>Copyright message</p> </div> </footer> <footer class="yellow"> <div class="body"> <div class="content"> <h1>Example (title)</h1> <p>You can put a short (or long) description of your website here.</p> <p>Any HTML tag is supported.</p> </div> <div class="links"></div> </div> <div class="bottom"> <p>Copyright message</p> </div> </footer> <footer class="blue"> <div class="body"> <div class="content"> <h1>Example (title)</h1> <p>You can put a short (or long) description of your website here.</p> <p>Any HTML tag is supported.</p> </div> <div class="links"></div> </div> <div class="bottom"> <p>Copyright message</p> </div> </footer> <footer class="dark"> <div class="body"> <div class="content"> <h1>Example (title)</h1> <p>You can put a short (or long) description of your website here.</p> <p>Any HTML tag is supported.</p> </div> <div class="links"></div> </div> <div class="bottom"> <p>Copyright message</p> </div> </footer> <footer class="light"> <div class="body"> <div class="content"> <h1>Example (title)</h1> <p>You can put a short (or long) description of your website here.</p> <p>Any HTML tag is supported.</p> </div> <div class="links"></div> </div> <div class="bottom"> <p>Copyright message</p> </div> </footer> <div class="container"> <p>The colour of a footer can be set by giving the <code class="language-markup"><footer></code> tag a standard Magic colour class. The <span class="i-code">bottom</span> section gets its colour automatically. For example:</p> <pre><code class="language-markup"><footer class="default"> ... </footer> <footer class="red"> ... </footer></code></pre> </div> <footer class="blue"> <div class="body"> <div class="content"> <h1>Magic.css</h1> <p>Neat and unique CSS framework for dynamic websites</p> </div> <div class="links"> <ul> <li class="header">Pages</li> <li><a href="/magic">Home</a></li> <li><a href="/magic/start">Start</a></li> <li><a href="https://github.com/palkerecsenyi/magic/">Github</a></li> </ul> </div> </div> <div class="bottom"> <p>© Magic 2018 | Magic.CSS <span class="version"></span><span class="right-float"><a onClick="$('html, body').animate({ scrollTop: 0 }, 'slow');return false;" href="#" class="link"><i class="fas fa-arrow-up"></i> Back to Top</a></span></p> </div> </footer> <script src="../../prism.js"></script> </body> </html>