First pass at product template.
Brian Hall
parent
8c4bdcc89d
commit
348df4f0e5
Binary file not shown.
|
After Width: | Height: | Size: 606 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 610 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 882 B |
Binary file not shown.
|
After Width: | Height: | Size: 152 KiB |
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 6.2 MiB |
|
|
@ -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&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">
|
||||
|
||||
</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">
|
||||
|
||||
</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 & 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>
|
||||
|
|
@ -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';
|
||||
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue