x-app.html

<!--
@license
Copyright (c) 2016 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
-->

<link rel="import" href="bower_components/polymer/polymer.html">

<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">

<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">

<link rel="import" href="bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="bower_components/app-layout/app-toolbar/app-toolbar.html">

<link rel="import" href="bower_components/app-layout/demo/sample-content.html">

<dom-module id="x-app">

  <template>

    <style>

      a {
        text-decoration: none;
        font-size: inherit;
        color: inherit;
      }

      .toolbar {
        @apply(--layout-horizontal);
        @apply(--layout-end-justified);
        background-color: rgba(255, 255, 255, 0.95);
      }

      .tabs {
        height: 100%;
        @apply(--layout-horizontal);
      }

      .tabs > a {
        @apply(--layout-vertical);
        @apply(--layout-center-center);
        margin: 12px 16px 12px;
        border-bottom: 1px solid #222;
      }

      header {
        @apply(--layout-vertical);
        @apply(--layout-center-center);
        height: calc(100vh - 64px);
        padding: 0 16px;
        background-image: url('//app-layout-assets.appspot.com/assets/landing-page/glass_explorer_food_2.png');
        backgrond-repeat: no-repeat;
        background-size: cover;
        color: white;
        text-align: center;
      }

      header > h2 {
        font-size: 56px;
        font-weight: 300;
        margin: 0;
      }

      header > p {
        font-size: 32px;
      }

      section {
        padding: 88px 16px;
      }

      .container {
        @apply(--layout-horizontal);
        max-width: 800px;
        margin: 0 auto;
      }

      .container > * {
        @apply(--layout-flex);
      }

      .container img {
        max-width: 100%;
        max-height: 100%;
      }

      .container h3 {
        font-size: 32px;
        font-weight: 300;
        margin: 24px 0;
      }

      .container p {
        line-height: 1.5;
      }

      @media (max-width: 600px) {
        .container {
          @apply(--layout-vertical);
        }
      }

    </style>

    <app-header-layout>

      <app-header reveals effects="waterfall">

        <app-toolbar class="toolbar">
          <div class="tabs">
            <a href="#about">About</a>
            <a href="#services">Services</a>
            <a href="#contact">Contact</a>
          </div>
        </app-toolbar>

      </app-header>

      <header>
        <h2>Welcome To Our Landing Page</h2>
        <p>Made with App Layout Elements</p>
      </header>

      <section id="about">
        <div class="container">
          <div>
            <img src="//app-layout-assets.appspot.com/assets/landing-page/berries.jpg">
          </div>
          <div>
            <h3>About</h3>
            <p>Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea. Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea.</p>
            <p>Convenire definiebas scriptorem eu cum. Sit dolor dicunt consectetuer no. Convenire definiebas scriptorem eu cum. Sit dolor dicunt consectetuer no.</p>
          </div>
        </div>
      </section>

      <section id="services">
        <div class="container">
          <div>
            <img src="//app-layout-assets.appspot.com/assets/landing-page/tomato.jpg">
          </div>
          <div>
            <h3>Services</h3>
            <p>Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea. Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea.</p>
            <p>Convenire definiebas scriptorem eu cum. Sit dolor dicunt consectetuer no. Convenire definiebas scriptorem eu cum. Sit dolor dicunt consectetuer no.</p>
          </div>
        </div>
      </section>

      <section id="contact">
        <div class="container">
          <div>
            <img src="//app-layout-assets.appspot.com/assets/landing-page/red-onion.jpg">
          </div>
          <div>
            <h3>Contact</h3>
            <p>Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea. Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea.</p>
            <p>Convenire definiebas scriptorem eu cum. Sit dolor dicunt consectetuer no. Convenire definiebas scriptorem eu cum. Sit dolor dicunt consectetuer no.</p>
          </div>
        </div>
      </section>

    </app-header-layout>

  </template>

  <script>

    Polymer({

      is: 'x-app'

    });

  </script>

</dom-module>