Surma
commit
da208f5fd5
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
|
|
@ -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="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
|
||||
<g id="Page-1">
|
||||
<path id="Shape" fill="none" stroke="#FFFFFF" stroke-width="3" d="M0,0h100v100H0V0z"/>
|
||||
<path id="Shape_1_" fill="none" stroke="#FFFFFF" stroke-width="3" d="M100,0L50,100L0,0H100z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 682 B |
Binary file not shown.
|
After Width: | Height: | Size: 133 KiB |
|
|
@ -0,0 +1,19 @@
|
|||
<?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="182px" height="183px" viewBox="0 0 182 183" enable-background="new 0 0 182 183" xml:space="preserve">
|
||||
<g id="Page-1">
|
||||
|
||||
<g id="Line-_x2B_-Line-6" transform="translate(91.000000, 91.500000) rotate(-45.000000) translate(-91.000000, -91.500000) translate(8.000000, 50.000000)">
|
||||
<path id="Line" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="square" stroke-opacity="0.87" d="M82.817,0.184
|
||||
l-82.64,82.64"/>
|
||||
<path id="Line-5" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="square" stroke-opacity="0.87" d="M0.184,0.184
|
||||
l82.64,82.64"/>
|
||||
<path id="Line-5_1_" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="square" stroke-opacity="0.87" d="
|
||||
M83.183,0.184l82.64,82.64"/>
|
||||
<path id="Line_1_" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="square" stroke-opacity="0.87" d="
|
||||
M165.816,0.184l-82.64,82.64"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
|
|
@ -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="183px" height="122px" viewBox="0 0 183 122" enable-background="new 0 0 183 122" xml:space="preserve">
|
||||
<g id="Page-1">
|
||||
<polygon id="Triangle-1" fill="none" stroke="#FFFFFF" stroke-width="3" points="60.7,4 118.4,120 3,120 "/>
|
||||
<polygon id="Triangle-1_1_" fill="none" stroke="#FFFFFF" stroke-width="3" points="122.7,4 180.4,120 65,120 "/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 719 B |
|
|
@ -0,0 +1,157 @@
|
|||
<!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">
|
||||
<a href="/" id="logo"><img src="images/logo.svg"></a>
|
||||
<a href="/" id="title" class="mdl-color-text--white">Your Product Site</a>
|
||||
<div class="menu">
|
||||
<nav class="mdl-navigation">
|
||||
<a href="#about" class="mdl-navigation__link mdl-js-button mdl-js-ripple-effect active">About</a>
|
||||
<a href="#products" class="mdl-navigation__link mdl-js-button mdl-js-ripple-effect">Products</a>
|
||||
<a href="#faqs" class="mdl-navigation__link mdl-js-button mdl-js-ripple-effect">FAQ</a>
|
||||
<a href="#support" class="mdl-navigation__link mdl-js-button mdl-js-ripple-effect">Support</a>
|
||||
<a href="#blog" class="mdl-navigation__link mdl-js-button mdl-js-ripple-effect">Blog</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main class="mdl-layout__content">
|
||||
<section class="mdl-color--primary-contrast extra-spacing" id="about">
|
||||
<div class="mdl-grid">
|
||||
<div class="mdl-cell mdl-cell--3-col mdl-cell--1-col-phone mdl-cell--1-col-tablet title">
|
||||
<strong>About</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--7-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--hide-tablet"></div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="mdl-color--primary-contrast" id="products">
|
||||
<div class="heading products mdl-color-text--white">
|
||||
<img src="images/triangles.svg" class="icon"><br>
|
||||
Products
|
||||
</div>
|
||||
<div class="mdl-grid extra-spacing">
|
||||
<div class="mdl-cell mdl-cell--2-col"></div>
|
||||
<div class="mdl-cell mdl-cell--8-col">
|
||||
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 id="faqs">
|
||||
<div class="mdl-grid mdl-grid--no-spacing">
|
||||
<div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--4-col-phone heading feature-one mdl-color-text--white">
|
||||
Feature
|
||||
</div>
|
||||
<div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--4-col-phone heading feature-two mdl-color-text--white">
|
||||
Feature
|
||||
</div>
|
||||
</div>
|
||||
<div class="heading support mdl-color-text--white">
|
||||
<img src="images/squares.svg" class="icon"><br>
|
||||
Support
|
||||
</div>
|
||||
</section>
|
||||
<section class="mdl-color--primary-contrast extra-spacing" 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">
|
||||
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="#" class="mdl-color-text--white">Contact Us</a>
|
||||
<a href="#" class="mdl-color-text--white">FAQ</a>
|
||||
<a href="#" class="mdl-color-text--white">Support</a>
|
||||
<a href="#" class="mdl-color-text--white">Blog</a>
|
||||
</div>
|
||||
<div class="mdl-mega-footer--bottom-section">
|
||||
<a href="#" class="mdl-color-text--grey-600">Material Design Lite</a>
|
||||
<a href="#" class="mdl-color-text--grey-600">Help</a>
|
||||
<a href="#" class="mdl-color-text--grey-600">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>
|
||||
<script>
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
function setActiveState(link) {
|
||||
removeActiveState();
|
||||
link.classList.add('active');
|
||||
}
|
||||
|
||||
function removeActiveState() {
|
||||
var active = document.getElementsByClassName('mdl-navigation__link active');
|
||||
if (active.length) {
|
||||
active[0].classList.remove('active');
|
||||
}
|
||||
}
|
||||
|
||||
var links = document.getElementsByClassName('mdl-navigation')[0].children;
|
||||
|
||||
for (var i = 0, link; link = links[i]; i++) {
|
||||
if (link.getAttribute('href') === location.hash) {
|
||||
setActiveState(link);
|
||||
}
|
||||
|
||||
link.addEventListener('click', function() {
|
||||
setActiveState(this);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</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,179 @@
|
|||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mdl-layout__header .mdl-navigation__link {
|
||||
line-height: 60px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mdl-layout__header .mdl-navigation__link.active {
|
||||
border-bottom: 4px solid #ec1460;
|
||||
}
|
||||
|
||||
header.mdl-layout__header {
|
||||
padding-top: 30%;
|
||||
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: -40px;
|
||||
margin-left: -35px;
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
header.mdl-layout__header #logo img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
header.mdl-layout__header .menu {
|
||||
width: 100%;
|
||||
background: rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
header.mdl-layout__header #title {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 20px;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
width: 50px;
|
||||
line-height: 20px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.extra-spacing {
|
||||
padding: 7% 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mdl-mega-footer {
|
||||
text-align: center;
|
||||
padding: 0 0 32px;
|
||||
}
|
||||
|
||||
.mdl-mega-footer a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.mdl-mega-footer div {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.mdl-mega-footer--top-section button {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.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: 32px 0 16px;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.mdl-mega-footer .mdl-mega-footer--middle-section a {
|
||||
display: inline-block;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.mdl-mega-footer .mdl-mega-footer--bottom-section {
|
||||
padding: 0 0 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.mdl-mega-footer .mdl-mega-footer--bottom-section a {
|
||||
display: inline-block;
|
||||
padding: 0 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.heading {
|
||||
padding: 5% 0;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.heading .icon {
|
||||
margin-bottom: 10%;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.heading.products {
|
||||
background: url('images/products.jpg') center center no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.heading.feature-one {
|
||||
padding-top: 40%;
|
||||
background: url('images/feature_one.jpg') center center no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.heading.feature-two {
|
||||
padding-top: 40%;
|
||||
background: url('images/feature_two.jpg') center center no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
#view-source {
|
||||
position: fixed;
|
||||
display: block;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 900;
|
||||
margin: 40px;
|
||||
}
|
||||
|
||||
#about {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#about .title {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@media (max-width: 850px) {
|
||||
header.mdl-layout__header {
|
||||
padding-top: 10%;
|
||||
}
|
||||
header.mdl-layout__header #logo {
|
||||
width: 40px;
|
||||
margin-left: -20px;
|
||||
}
|
||||
header.mdl-layout__header #title {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
.mdl-layout__header .mdl-navigation__link {
|
||||
line-height: 52px;
|
||||
}
|
||||
#view-source {
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
#about .title {
|
||||
text-align: center;
|
||||
}
|
||||
header.mdl-layout__header {
|
||||
padding-top: 20%;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue