UNPKG

api-console-assets

Version:

This repo only exists to publish api console components to npm

187 lines (147 loc) 5.44 kB
<!-- @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>