Landing Page with Extras

Example layout with the following features:

  • MUI combined CSS/JS (extra/mui-combined.js)
  • MUI colors CSS (extra/mui-colors.css)
  • Font Awesome
  • Animate.js

Download View in new tab »

Tutorial

Step 1: Boilerplate HTML

First, start with an empty file and paste in the MUI boilerplate HTML:

<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>MUI Landing Page with Extras</title> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> <link rel="stylesheet" href="//cdn.muicss.com/mui-0.10.3/extra/mui-colors.min.css"> <script src="//cdn.muicss.com/mui-0.10.3/extra/mui-combined.min.js"></script> <style>  /* Tutorial CSS goes here */  </style> </head> <body> <!-- Tutorial HTML goes here --> </body> </html>

Step 2: Body Layout

Next, create a header, a main content window and a footer:

<header class="mui-appbar mui--z1"> <!-- Appbar HTML goes here --> </header> <div id="content-wrapper" class="mui--text-center"> <!-- Content HTML goes here --> </div> <footer> <div class="mui-container mui--text-center"> Made with ♥ by <a href="https://www.muicss.com">MUICSS</a> </div> </footer> <script src="//cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script> <script>  new WOW().init(); </script>

And define the CSS for a fixed header and a sticky footer:

/**  * Body CSS  */ html, body {  height: 100%; } html, body, input, textarea, button {  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004); } /**  * Header CSS  */ header {  position: fixed;  top: 0;  right: 0;  left: 0;  z-index: 2; } header ul.mui-list--inline {  margin-bottom: 0; } header a {  color: #fff; } header table {  width: 100%; } /**  * Content CSS  */ #content-wrapper {  min-height: 100%;  /* sticky footer */  box-sizing: border-box;  margin-bottom: -100px;  padding-bottom: 100px; } /**  * Footer CSS  */ footer {  box-sizing: border-box;  height: 100px;  background-color: #eee;  border-top: 1px solid #e0e0e0;  padding-top: 35px; }

Step 3: Appbar

Next, define the content and layout of the appbar:

<div class="mui-container"> <table> <tr class="mui--appbar-height"> <td class="mui--text-title">Brand.io</td> <td class="mui--text-right"> <ul class="mui-list--inline mui--text-body2"> <li><a href="#">About</a></li> <li><a href="#">Pricing</a></li> <li><a href="#"><i class="fa fa-user" aria-hidden="true"></i> Login</a></li> </ul> </td> </tr> </table> </div>

Step 4: Content

Next, add content to the main content window. Since the header is fixed, use the .mui--appbar-height helper to add padding to the top of the main content window:

<div class="mui--appbar-height"></div> <br> <br> <div class="mui--text-display3 row wow zoomInDown">Brand.io</div> <br> <br> <button class="mui-btn mui-btn--raised">Get started</button> <br> <br> <i class="fa fa-university fa-5x mui--text-display3 mui--color-pink-A100 row wow zoomIn" aria-hidden="true"></i>
« Previous Next »