Skip to content

Instantly share code, notes, and snippets.

@ZachMoreno

ZachMoreno/static-material.html

Created July 21, 2014 17:20
Show Gist options
  • Save ZachMoreno/1cb778ac431f3e25391e to your computer and use it in GitHub Desktop.
Save ZachMoreno/1cb778ac431f3e25391e to your computer and use it in GitHub Desktop.
Download ZIP
Google's Material Design in static form
Raw
static-material.html
<!doctype html>
<html>
<head>
<title>Zach Moreno Beta</title>
<!-- web fonts -->
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,400italic,300italic,100italic,500italic' rel='stylesheet' type='text/css'>
<!-- css -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1 id="logo-type">
<a href="index.html">
Zach Moreno
</a>
</h1>
</header>
<div class="grid">
<div class="row">
<aside class="col-2-12">
<ul id="main-nav">
<li><a href="index.html" class="active">home</a></li>
<li><a href="journal.html">journal</a></li>
<li><a href="health.html">health</a></li>
<li><a href="folio.html">folio</a></li>
<li><a href="about.html">about</a></li>
</ul>
</aside> <!-- end .col-2-12 -->
<main class="col-9-12" id="mainCard">
<h1>Making Internet.</h1>
<div class="row">
<div class="col-3-12">
<h2>Design</h2>
<p>Designing for the Web starts in the real world, then evolves into digital.</p>
</div> <!-- end .col-3-12 -->
<div class="col-3-12">
<h2>Document</h2>
<p>Modular development is key to scalability &amp; maintainability.</p>
</div> <!-- end .col-3-12 -->
<div class="col-3-12">
<h2>Develop</h2>
<p>Code typically involves a learning curve, unless docs are maintained.</p>
</div> <!-- end .col-3-12 -->
<div class="col-3-12">
<h2>Deploy</h2>
<p>Launching an app is a practice that involves many phases.</p>
</div> <!-- end .col-3-12 -->
</div> <!-- end .row -->
<div class="row">
<div class="col-4-12">
<h2>Contribute</h2>
<p>Participating in the larger development community is highly rewarding.</p>
</div> <!-- end .col-4-12 -->
<div class="col-4-12">
<h2>Keep Learning</h2>
<p>The Web is ever-evolving &amp; therefore so must your education.</p>
</div> <!-- end .col-4-12 -->
<div class="col-4-12">
<h2>Stay Relevant</h2>
<p>Engagement is what turns driven individuals into poweful communities.</p>
</div> <!-- end .col-4-12 -->
</div> <!-- end .row -->
</main> <!-- end .col-9-12 -->
<div class="col-1-12" id="fab">
<p>Z</p>
</div>
</div> <!-- end .row -->
</div> <!-- end .grid -->
<footer>
<!-- js -->
<script>
var mainCard = document.getElementById('mainCard');
window.setTimeout(function(){
mainCard.className += mainCard.className ? ' inPlace' : 'inPlace';
}, 0);
</script>
</footer>
</body>
</html>
Raw
style.css
/*=============================================
Grid
http://css-tricks.com/dont-overthink-it-grids/
=============================================*/
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.grid {
clear: both;
padding: 0px;
margin: 0px;
zoom:1; /* For IE 6/7 */
}
.grid:before,
.grid:after {
content: "";
display: table;
}
.grid:after {
clear: both;
}
[class*='col-'] {
float: left;
/*padding-right: 20px;*/
margin: 1% 0 1% 1.4%;
}
.row {
clear: both;
}
.row [class*='col-']:first-child {
margin-left: 0;
}
.grid [class*='col-']:last-of-type {
padding-right: 0;
}
/* column x 100 / number of columns */
.col-1-12 {
/*width: 8.33%;*/
width: 7.05%;
}
.col-2-12,
.col-1-6 {
/*width: 16.66%;*/
width: 15.5%;
}
.col-3-12,
.col-1-4 {
/*width: 25%;*/
width: 23.95%;
}
.col-4-12,
.col-1-3 {
/*width: 33.33%;*/
width: 32.4%;
}
.col-5-12 {
/*width: 41.66%;*/
width: 40.85%;
}
.col-6-12,
.col-1-2 {
/*width: 50%;*/
width: 49.3%;
}
.col-7-12 {
/*width: 58.33%;*/
width: 57.75%;
}
.col-8-12,
.col-2-3 {
/*width: 66.66%;*/
width: 66.2%;
}
.col-9-12,
.col-3-4 {
/*width: 75%;*/
width: 74.65%;
}
.col-10-12,
.col-5-6 {
/*width: 83.33%;*/
width: 83.1%;
}
.col-11-12 {
/*width: 91.66%;*/
width: 91.55%;
}
.col-12-12,
.col-1 {
width: 100%;
}
.module {
padding: 20px;
background: #BCC5D0;
}
/* Opt-in outside padding */
.grid-pad {
padding: 20px 0 20px 20px;
}
.grid-pad [class*='col-']:last-of-type {
padding-right: 20px;
}
.row .offset-1-12 {
margin-left: 8.4%;
}
.row .offset-1-12:first-child {
margin-left: 7.05%;
}
.row .offset-2-12 {
margin-left: 16.66%;
}
.row .offset-2-12:first-child {
margin-left: 15.5%;
}
.row .offset-3-12,
.row .offset-3-12:first-child {
margin-left: 23.95%;
}
.row .offset-4-12,
.row .offset-4-12:first-child {
margin-left: 32.4%;
}
.row .offset-5-12,
.row .offset-5-12:first-child {
margin-left: 40.85%;
}
.row .offset-6-12,
.row .offset-6-12:first-child {
margin-left: 49.3%;
}
.row .offset-7-12,
.row .offset-7-12:first-child {
margin-left: 57.75%;
}
.row .offset-8-12,
.row .offset-8-12:first-child {
margin-left: 66.2%;
}
.row .offset-9-12,
.row .offset-9-12:first-child {
margin-left: 74.65%;
}
.row .offset-10-12,
.row .offset-10-12:first-child {
margin-left: 83.1%;
}
.row .offset-11-12,
.row .offset-11-12:first-child {
margin-left: 91.55%;
}
/*=============================================
Main
=============================================*/
html,
body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
font-family: 'Roboto';
background-color: #eee;
position: relative;
overflow: hidden;
}
header {
height: 160px;
background-color: #1C7FA6;
background: url('homepage-cosmos3.jpg')no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
header h1#logo-type {
position: absolute;
top: 95px;
left: 70px;
font-weight: normal;
font-size: 25px;
}
header h1#logo-type a {
text-decoration: none;
color: white;
}
aside {
}
aside ul#main-nav {
}
aside ul#main-nav li {
list-style-type: none;
margin: 25px 0px 25px 30px;
}
aside ul#main-nav li a {
text-decoration: none;
color: #5e5e5e;
}
aside ul#main-nav li a.active {
color: #3e3e3e;
}
main {
margin-right: 10%;
padding: 10px 20px;
background-color: white;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
margin-top: 100000px !important;
}
main.inPlace {
margin-top: -70px !important;
-webkit-transition: all 1.5s ease;
-moz-transition: all 1.5s ease;
-o-transition: all 1.5s ease;
transition: all 1.5s ease;
}
main h1 {
-webkit-margin-before: 5px;
font-size: 34;
font-weight: normal;
color: #1C7FA6;
}
main h2 {
color: #1C7FA6;
text-align: center;
font-weight: normal;
}
main p {
text-align: center;
}
#fab {
width: 60px;
height: 60px;
background: #56d893;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
margin-top: -30px !important;
margin-left: 40px !important;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#fab:hover {
background-color: #2CC975;
}
#fab p {
text-align: center;
color: white;
font-size: 18px;
font-weight: 700;
padding-top: 0px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment