Landing Page

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 Example</title>
    <link href="//cdn.muicss.com/mui-0.10.3/css/mui.min.css" rel="stylesheet" type="text/css" />
    <script src="//cdn.muicss.com/mui-0.10.3/js/mui.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>

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: white;
}

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="#">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">Brand.io</div>
<br>
<br>
<button class="mui-btn mui-btn--raised">Get started</button>
« Previous Next »