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


Step 1: Boilerplate HTML

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

<!doctype html>
    <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="//">
    <link rel="stylesheet" href="//">
    <link rel="stylesheet" href="//">
    <script src="//"></script>
     /* Tutorial CSS goes here */
    <!-- Tutorial HTML goes here -->

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 -->
<div id="content-wrapper" class="mui--text-center">
  <!-- Content HTML goes here -->
  <div class="mui-container mui--text-center">
    Made with ♥ by <a href="">MUICSS</a>
<script src="//"></script>
  new WOW().init();

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

 * Body CSS
body {
  height: 100%;

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">
    <tr class="mui--appbar-height">
      <td class="mui--text-title"></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>

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>
<div class="mui--text-display3 row wow zoomInDown"></div>
<button class="mui-btn mui-btn--raised">Get started</button>
<i class="fa fa-university fa-5x mui--text-display3 mui--color-pink-A100 row wow zoomIn" aria-hidden="true"></i>
« Previous Next »