patterns/expand-card/index.html

<!doctype 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
-->

<html>
<head>

  <title>Expand Card</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">

  <script src="https://unpkg.com/@webcomponents/webcomponentsjs@^2.0.0/webcomponents-loader.js"></script>
  <script type="module">
    import '@polymer/font-roboto/roboto.js';
    import '../../app-toolbar/app-toolbar.js';
  </script>

  <style>

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

    app-toolbar {
      background-color: white;
      box-shadow: 0px 5px 6px -3px rgba(0, 0, 0, 0.4);
    }

    .content {
      padding: 16px 40px;
    }

    .card {
      background-color: white;
      max-width: 720px;
      height: 500px;
      margin: 16px auto;
      box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
    }

    @media (max-width: 600px) {

      .content {
        padding: 0;
      }

      .card {
        margin: 8px;
      }

    }

  </style>

</head>
<body>

  <app-toolbar></app-toolbar>

  <div class="content">
    <div class="card"></div>
  </div>

</body>
</html>