Difference between revisions of "Template:Peking/NavBar"

Line 204: Line 204:
 
     </style>
 
     </style>
 
</head>
 
</head>
−
<body>
+
 
 
<style>
 
<style>
−
     .demo-card-wide.mdl-card {
+
     .demo-layout-transparent {
−
         width: 512px;
+
         background: url('../assets/demos/transparent.jpg') center / cover;
 
     }
 
     }
−
 
+
     .demo-layout-transparent .mdl-layout__header,
−
     .demo-card-wide > .mdl-card__title {
+
     .demo-layout-transparent .mdl-layout__drawer-button {
−
        color: #fff;
+
        /* This background is dark, so we set text to white. Use 87% black instead if
−
        height: 176px;
+
          your background is light. */
−
        background: url('../assets/demos/welcome_card.jpg') center / cover;
+
         color: white;
−
    }
+
−
 
+
−
     .demo-card-wide > .mdl-card__menu {
+
−
         color: #fff;
+
 
     }
 
     }
 
</style>
 
</style>
  
−
<div align="center">
+
<div class="demo-layout-transparent mdl-layout mdl-js-layout">
−
<div class="demo-card-wide mdl-card mdl-shadow--2dp" align="center">
+
    <header class="mdl-layout__header mdl-layout__header--transparent">
−
     <div class="mdl-card__title">
+
        <div class="mdl-layout__header-row">
−
         <h2 class="mdl-card__title-text">Welcome</h2>
+
            <!-- Title -->
 +
            <span class="mdl-layout-title">Title</span>
 +
            <!-- Add spacer, to align navigation to the right -->
 +
            <div class="mdl-layout-spacer"></div>
 +
            <!-- Navigation -->
 +
            <nav class="mdl-navigation">
 +
                <a class="mdl-navigation__link" href="">Link</a>
 +
                <a class="mdl-navigation__link" href="">Link</a>
 +
                <a class="mdl-navigation__link" href="">Link</a>
 +
                <a class="mdl-navigation__link" href="">Link</a>
 +
            </nav>
 +
        </div>
 +
    </header>
 +
     <div class="mdl-layout__drawer">
 +
         <span class="mdl-layout-title">Title</span>
 +
        <nav class="mdl-navigation">
 +
            <a class="mdl-navigation__link" href="">Link</a>
 +
            <a class="mdl-navigation__link" href="">Link</a>
 +
            <a class="mdl-navigation__link" href="">Link</a>
 +
            <a class="mdl-navigation__link" href="">Link</a>
 +
        </nav>
 
     </div>
 
     </div>
−
     <div class="mdl-card__supporting-text">
+
     <main class="mdl-layout__content">
−
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
     </main>
−
        Mauris sagittis pellentesque lacus eleifend lacinia...
+
−
     </div>
+
−
    <div class="mdl-card__actions mdl-card--border">
+
−
        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
+
−
            Get Started
+
−
        </a>
+
−
    </div>
+
−
    <div class="mdl-card__menu">
+
−
        <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
+
−
            <i class="material-icons">share</i>
+
−
        </button>
+
−
    </div>
+
−
</div>
+
 
</div>
 
</div>
  
  
−
</body>
 
 
</html>
 
</html>

Revision as of 02:56, 15 October 2017

Title
Title