google
/
material-design-lite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

First pass at product template.

master
Brian Hall 2015-04-23 15:48:46 -07:00
parent 8c4bdcc89d
commit 348df4f0e5
9 changed files with 84119 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
templates/product/images/feature_one.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 606 KiB

BIN
templates/product/images/feature_two.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 610 KiB

BIN
templates/product/images/products.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

10
templates/product/images/squares.svg Normal file
View File

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="180.333px" height="180px" viewBox="0 0 180.333 180" enable-background="new 0 0 180.333 180" xml:space="preserve">
<line fill="none" stroke="#FFFFFF" stroke-width="2" x1="120" y1="0" x2="120" y2="121.333"/>
<line fill="none" stroke="#FFFFFF" stroke-width="2" x1="180.333" y1="60.667" x2="60.667" y2="60.667"/>
<line fill="none" stroke="#FFFFFF" stroke-width="2" x1="60.667" y1="60.667" x2="60.667" y2="180"/>
<line fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2" x1="120" y1="120.333" x2="0" y2="120.333"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 882 B

BIN
templates/product/images/top.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 152 KiB

83886
templates/product/images/triangles.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 6.2 MiB

131
templates/product/index.html Normal file
View File

@ -0,0 +1,131 @@
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Material Design Lite</title>
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Material Design Lite">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#3372DF">
<!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
<!--
<link rel="canonical" href="http://www.example.com/">
-->
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="material.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body class="mdl-color--primary-dark mdl-base">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header mdl-layout__header--waterfall mdl-layout__header--scroll">
<div class="menu">
<nav class="mdl-navigation">
<a href="#about" class="mdl-navigation__link">About</a>
<a href="#products" class="mdl-navigation__link">Products</a>
<a href="#faqs" class="mdl-navigation__link">FAQ</a>
<a href="#support" class="mdl-navigation__link">Support</a>
<a href="#blog" class="mdl-navigation__link">Blog</a>
</nav>
</div>
</header>
<main class="mdl-layout__content">
<section class="mdl-color--primary-contrast paragraph" id="about">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--3-col mdl-cell--1-col-phone mdl-cell--2-col-tablet" style="text-align: right;">
<strong>Introduction</strong>
</div>
<div class="mdl-cell mdl-cell--1-col mdl-cell--hide-phone mdl-cell--hide-tablet"></div>
<div class="mdl-cell mdl-cell--6-col mdl-cell--3-col-phone mdl-cell--5-col-tablet">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla laoreet quis erat vel bibendum.
Sed id ornare lacus. Cras non nisl in leo luctus condimentum in id ante. Nam at condimentum enim,
non efficitur quam. Sed lacinia massa ipsum. In scelerisque dui ac pellentesque luctus.
</div>
<div class="mdl-cell mdl-cell--2-col mdl-cell--hide-phone mdl-cell--1-col-tablet"></div>
</div>
</section>
<section>
<img src="images/products.png" width="100%">
</section>
<section class="mdl-color--primary-contrast paragraph" id="faqs">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--2-col"></div>
<div class="mdl-cell mdl-cell--8-col" style="text-align: center;">
Donec venenatis pharetra eros non elementum. Curabitur lobortis nunc ac elementum cursus.
Vivamus accumsan tincidunt dui sit amet tincidunt. Donec vel odio at justo tincidunt
malesuada non quis ipsum. Suspendisse dictum mi orci, non rhoncus ex elementum ut.
</div>
<div class="mdl-cell mdl-cell--2-col"></div>
</div>
</section>
<section class="mdl-grid mdl-grid--no-spacing" id="products">
<div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--4-col-phone">
<img src="images/feature_one.png" style="width:100%;">
</div>
<div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--4-col-phone">
<img src="images/feature_two.png" style="width: 100%;">
</div>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col">
&nbsp;
</div>
<div class="mdl-cell mdl-cell--4-col" style="text-align: center;">
<img src="images/squares.svg" width="180"><br>
FEATURE
</div>
<div class="mdl-cell mdl-cell--4-col">
&nbsp;
</div>
</div>
</section>
<section class="mdl-color--primary-contrast paragraph" id="support">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--2-col mdl-cell--hide-phone"></div>
<div class="mdl-cell mdl-cell--8-col mdl-cell--4-col-phone" style="text-align: center;">
Donec venenatis pharetra eros non elementum. Curabitur lobortis nunc ac elementum cursus.
Vivamus accumsan tincidunt dui sit amet tincidunt. Donec vel odio at justo tincidunt
malesuada non quis ipsum. Suspendisse dictum mi orci, non rhoncus ex elementum ut.
</div>
<div class="mdl-cell mdl-cell--2-col mdl-cell--hide-phone"></div>
</div>
</section>
<footer class="mdl-mega-footer mdl-color--primary-dark" id="blog">
<div class="mdl-mega-footer--top-section mdl-color--primary">
<button class="mdl-mega-footer--social-btn"><span class="mdl-icon mdl-icon--track-changes"></span></button>
<button class="mdl-mega-footer--social-btn"><span class="mdl-icon mdl-icon--track-changes"></span></button>
<button class="mdl-mega-footer--social-btn"><span class="mdl-icon mdl-icon--track-changes"></span></button>
</div>
<div class="mdl-mega-footer--middle-section">
<a href="#">Contact Us</a>
<a href="#">FAQ</a>
<a href="#">Support</a>
<a href="#">Blog</a>
</div>
<div class="mdl-mega-footer--bottom-section">
<a href="#">Web Starter Kit</a>
<a href="#">Help</a>
<a href="#">Privacy &amp; Terms</a>
</div>
</footer>
</main>
</div>
<a href="https://github.com/google/material-design-lite/blob/master/templates/product/index.html" target="_blank" id="view-source" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-color--accent mdl-color-text--primary">
<span class="mdl-icon mdl-icon--search"/>
</a>
<script src="/material.min.js"></script>
</body>
</html>

9
templates/product/material.scss Normal file
View File

@ -0,0 +1,9 @@
@import '../../src/_variables.scss';
$color-primary: $palette-grey-800;
$color-primary-dark: $palette-grey-900;
$color-accent: $palette-yellow-A200;
$color-primary-contrast: $color-dark-contrast;
$color-accent-contrast: $color-dark-contrast;
@import '../../src/material-design-lite';

83
templates/product/styles.css Normal file
View File

@ -0,0 +1,83 @@
html, body {
margin: 0;
padding: 0;
}
header.mdl-layout__header {
padding-top: 30%;
max-height: 100%;
padding-left: 0;
background: url('images/top.jpg') center center;
background-size: cover;
position: relative;
}
header.mdl-layout__header #logo {
width: 70px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -35px;
margin-left: -35px;
fill: #fff;
}
header.mdl-layout__header .menu {
width: 100%;
background: rgba(0,0,0,0.2);
}
.paragraph {
padding: 7% 0;
}
.mdl-mega-footer {
text-align: center;
padding: 0 0 32px;
}
.mdl-mega-footer div {
padding: 0 16px;
}
.mdl-mega-footer--top-section:after, .mdl-mega-footer--middle-section:after {
border: none;
margin: 0;
}
.mdl-mega-footer .mdl-mega-footer--top-section {
padding: 16px 0;
}
.mdl-mega-footer .mdl-mega-footer--middle-section {
padding: 16px 0 0;
}
.mdl-mega-footer .mdl-mega-footer--bottom-section {
padding: 0 0 16px;
font-size: 14px;
}
#view-source {
position: fixed;
display: block;
right: 0;
top: 0;
z-index: 900;
margin: 40px;
}
@media (max-width: 850px) {
header.mdl-layout__header {
padding-top: 15%;
}
#view-source {
margin: 10px;
}
}
@media (max-width: 600px) {
header.mdl-layout__header {
padding-top: 20%;
}
}