Skip to content

Instantly share code, notes, and snippets.

@mrmccormack

mrmccormack/landing-page-fa.html

Created October 28, 2017 00:22
Show Gist options
  • Save mrmccormack/cda8c9779e1ceb6b9cc9016bed0ad6d6 to your computer and use it in GitHub Desktop.
Save mrmccormack/cda8c9779e1ceb6b9cc9016bed0ad6d6 to your computer and use it in GitHub Desktop.
Download ZIP
MUICSS Template with Font Awesome / Animate.js
Raw
landing-page-fa.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>UNTITLED</title>
<script src="https://cdn.muicss.com/mui-0.9.27/extra/mui-combined.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<style>
/**
* Body CSS
*/
html,
body {
height: 100%;
}
html,
body,
table {
width: 100%;
}
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;
}
.muicolor {
color: #FF80AB;
}
/**
* Content CSS
*/
#content-wrapper {
box-sizing: border-box;
min-height: 100%;
margin-bottom: -80px;
padding-bottom: 80px;
}
/**
* Footer CSS
*/
footer {
box-sizing: border-box;
height: 80px;
background-color: #eee;
border-top: 1px solid #e0e0e0;
padding-top: 15px;
}
</style>
</head>
<body>
<header class="mui-appbar mui--z1">
<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>
</header>
<div id="content-wrapper" class="mui--text-center">
<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="muicolor fa fa-university fa-5x mui--text-display3 row wow zoomIn" aria-hidden="true"></i>
</div>
<footer>
<div class="mui-container mui--text-center mui--text-bottom">
Made with ♥ by <a href="https://www.muicss.com">MUICSS</a>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script>
new WOW().init();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment