polymer_1.8.1/bower_components/app-layout/app-box/demo/document-scroll.html - infra/third_party/npm_modules - Git at Google

 <!--
 @license
 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->

 <!doctype html>
 <html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black">
   <title>app-box demo using the document scroll</title>

   <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>

   <link rel="import" href="../../../iron-icons/iron-icons.html">
   <link rel="import" href="../../../paper-icon-button/paper-icon-button.html">
   <link rel="import" href="../../app-toolbar/app-toolbar.html">
   <link rel="import" href="../../demo/sample-content.html">
   <link rel="import" href="../../app-scroll-effects/effects/parallax-background.html">
   <link rel="import" href="../app-box.html">

   <style is="custom-style">

     body {
       margin: 0;
       font-family: 'Roboto', 'Noto', sans-serif;
       background-color: #eee;
     }

     app-box {
       height: 640px;
     }

     .second {
       --app-box-background-front-layer: {
         background-image: url(//app-layout-assets.appspot.com/assets/bg2.jpg);
         background-position: bottom;
         padding-bottom: 120px;
         margin-top: -20px;
         height: 100%;
       };
     }

     .third {
       --app-box-background-front-layer: {
         background-image: url(//app-layout-assets.appspot.com/assets/bg3.jpg);
         background-position: bottom;
         padding-bottom: 120px;
         margin-top: -20px;
         height: 100%;
       };
     }

     .fourth {
       --app-box-background-front-layer: {
         background-image: url(//app-layout-assets.appspot.com/assets/bg4.jpg);
         background-position: bottom;
         padding-bottom: 120px;
         margin-top: -20px;
         height: 100%;
       };
     }

     article {
       font-weight: 100;
       max-width: 500px;
       text-align: center;
       margin: 100px auto;
     }
     article h2 {
       font-weight: 100;
       font-size: 50px;
       margin: 5px;
     }
     article p {
       font-size: 18px;
       line-height: 30px;
     }

     article hr {
       width: 100px;
       height: 1px;
       border: none;
       margin: 20px auto;
       background-color: black;
     }

   </style>
 </head>
 <body class="fullbleed" unresolved>

   <section>
     <article>
       <hr />
       <h2>Built for Speed</h2>
       <p>Polymer 1.0 replaces the shadow DOM polyfill with a lightweight shim, uses a new, faster data-binding system, and significantly reduces code size.</p>
     </article>
     <app-box effects="parallax-background">
       <!--
         app-box allows to style the mixin `--app-box-background-front-layer` or create a custom background in the light DOM.
         In this case, we create a custom background by adding the attribute `background` to the `img` in
         the light DOM.
       -->
       <img background src="//app-layout-assets.appspot.com/assets/bg1.jpg" style="width:100%; height: 900px" />
     </app-box>
   </section>

   <section>
     <article>
       <hr />
       <h2>For Modern Browsers</h2>
       <p>Polymer is built from the ground up for modern browsers, using the latest web platform APIs. Polyfills provide support on evergreen browsers for APIs that aren't universal yet.</p>
     </article>
     <!--
       This app-box uses the class `.second` and the mixin `--app-box-background-front-layer` to assign the background image.
     -->
     <app-box class="second" effects="parallax-background"></app-box>
   </section>

   <section>
     <article>
       <hr />
       <h2>Using Web Components</h2>
       <p>Polymer leverages web components, a new set of standards designed to provide reusable components for the web.</p>
     </article>
     <app-box class="third" effects="parallax-background"></app-box>
   </section>

   <section>
     <article>
       <hr />
       <h2>Create your own elements</h2>
       <p>The Polymer library makes it easy to create your own powerful elements. Give your element some markup and properties, and then use it on a site. Polymer provides useful features like templating and data binding to reduce the amount of boilerplate you need to write.</p>
     </article>
     <app-box class="fourth" effects="parallax-background"></app-box>
   </section>

 </body>
 </html>
	<!--
	@license
	Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
	This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
	The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
	The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
	Code distributed by Google as part of the polymer project is also
	subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
	-->

	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<title>app-box demo using the document scroll</title>

	<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>

	<link rel="import" href="../../../iron-icons/iron-icons.html">
	<link rel="import" href="../../../paper-icon-button/paper-icon-button.html">
	<link rel="import" href="../../app-toolbar/app-toolbar.html">
	<link rel="import" href="../../demo/sample-content.html">
	<link rel="import" href="../../app-scroll-effects/effects/parallax-background.html">
	<link rel="import" href="../app-box.html">

	<style is="custom-style">

	body {
	margin: 0;
	font-family: 'Roboto', 'Noto', sans-serif;
	background-color: #eee;
	}

	app-box {
	height: 640px;
	}

	.second {
	--app-box-background-front-layer: {
	background-image: url(//app-layout-assets.appspot.com/assets/bg2.jpg);
	background-position: bottom;
	padding-bottom: 120px;
	margin-top: -20px;
	height: 100%;
	};
	}

	.third {
	--app-box-background-front-layer: {
	background-image: url(//app-layout-assets.appspot.com/assets/bg3.jpg);
	background-position: bottom;
	padding-bottom: 120px;
	margin-top: -20px;
	height: 100%;
	};
	}

	.fourth {
	--app-box-background-front-layer: {
	background-image: url(//app-layout-assets.appspot.com/assets/bg4.jpg);
	background-position: bottom;
	padding-bottom: 120px;
	margin-top: -20px;
	height: 100%;
	};
	}

	article {
	font-weight: 100;
	max-width: 500px;
	text-align: center;
	margin: 100px auto;
	}
	article h2 {
	font-weight: 100;
	font-size: 50px;
	margin: 5px;
	}
	article p {
	font-size: 18px;
	line-height: 30px;
	}

	article hr {
	width: 100px;
	height: 1px;
	border: none;
	margin: 20px auto;
	background-color: black;
	}

	</style>
	</head>
	<body class="fullbleed" unresolved>

	<section>
	<article>
	<hr />
	<h2>Built for Speed</h2>
	<p>Polymer 1.0 replaces the shadow DOM polyfill with a lightweight shim, uses a new, faster data-binding system, and significantly reduces code size.</p>
	</article>
	<app-box effects="parallax-background">
	<!--
	app-box allows to style the mixin `--app-box-background-front-layer` or create a custom background in the light DOM.
	In this case, we create a custom background by adding the attribute `background` to the `img` in
	the light DOM.
	-->
	<img background src="//app-layout-assets.appspot.com/assets/bg1.jpg" style="width:100%; height: 900px" />
	</app-box>
	</section>

	<section>
	<article>
	<hr />
	<h2>For Modern Browsers</h2>
	<p>Polymer is built from the ground up for modern browsers, using the latest web platform APIs. Polyfills provide support on evergreen browsers for APIs that aren't universal yet.</p>
	</article>
	<!--
	This app-box uses the class `.second` and the mixin `--app-box-background-front-layer` to assign the background image.
	-->
	<app-box class="second" effects="parallax-background"></app-box>
	</section>

	<section>
	<article>
	<hr />
	<h2>Using Web Components</h2>
	<p>Polymer leverages web components, a new set of standards designed to provide reusable components for the web.</p>
	</article>
	<app-box class="third" effects="parallax-background"></app-box>
	</section>

	<section>
	<article>
	<hr />
	<h2>Create your own elements</h2>
	<p>The Polymer library makes it easy to create your own powerful elements. Give your element some markup and properties, and then use it on a site. Polymer provides useful features like templating and data binding to reduce the amount of boilerplate you need to write.</p>
	</article>
	<app-box class="fourth" effects="parallax-background"></app-box>
	</section>

	</body>
	</html>