diff --git a/templates/product/images/feature_one.jpg b/templates/product/images/feature_one.jpg new file mode 100644 index 00000000..d174bd42 Binary files /dev/null and b/templates/product/images/feature_one.jpg differ diff --git a/templates/product/images/feature_two.jpg b/templates/product/images/feature_two.jpg new file mode 100644 index 00000000..17d3d384 Binary files /dev/null and b/templates/product/images/feature_two.jpg differ diff --git a/templates/product/images/logo.svg b/templates/product/images/logo.svg new file mode 100644 index 00000000..36a29f98 --- /dev/null +++ b/templates/product/images/logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + diff --git a/templates/product/images/products.jpg b/templates/product/images/products.jpg new file mode 100644 index 00000000..3a67a168 Binary files /dev/null and b/templates/product/images/products.jpg differ diff --git a/templates/product/images/squares.svg b/templates/product/images/squares.svg new file mode 100644 index 00000000..32b4b28f --- /dev/null +++ b/templates/product/images/squares.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + diff --git a/templates/product/images/top.jpg b/templates/product/images/top.jpg new file mode 100644 index 00000000..ce147cc1 Binary files /dev/null and b/templates/product/images/top.jpg differ diff --git a/templates/product/images/triangles.svg b/templates/product/images/triangles.svg new file mode 100644 index 00000000..bbcc96b6 --- /dev/null +++ b/templates/product/images/triangles.svg @@ -0,0 +1,10 @@ + + + + + + + + + diff --git a/templates/product/index.html b/templates/product/index.html new file mode 100644 index 00000000..31b4b7b1 --- /dev/null +++ b/templates/product/index.html @@ -0,0 +1,157 @@ + + + + + + + + Material Design Lite + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + Your Product Site +
+ +
+
+
+
+
+
+ About +
+
+
+ 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. +
+
+
+
+
+
+
+ Products +
+
+
+
+ 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. +
+
+
+
+
+
+
+ Feature +
+
+ Feature +
+
+
+
+ Support +
+
+
+
+
+
+ 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. +
+
+
+
+ +
+
+ + + + + + + diff --git a/templates/product/material.scss b/templates/product/material.scss new file mode 100644 index 00000000..9f8110ce --- /dev/null +++ b/templates/product/material.scss @@ -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'; diff --git a/templates/product/styles.css b/templates/product/styles.css new file mode 100644 index 00000000..53042817 --- /dev/null +++ b/templates/product/styles.css @@ -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%; + } +}