index.html

<!DOCTYPE html>
<html>
    <head>
        <title>BlockServer | Home</title>
        <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.deep_orange-red.min.css" />
        <script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 
    </head>

    <body>
    <!-- Uses a transparent header that draws on top of the layout's background -->
<style>
.demo-layout-transparent {
  background: url('img/redstone-1680x1050.jpg') center / cover;
}
.demo-layout-transparent .mdl-layout__header,
.demo-layout-transparent .mdl-layout__drawer-button {
  /* This background is dark, so we set text to white. Use 87% black instead if
     your background is light. */
  color: white;
}
</style>

<div class="demo-layout-transparent mdl-layout mdl-js-layout">
  <header class="mdl-layout__header mdl-layout__header--transparent">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title"><img src="">BlockServerProject</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="">Home</a>
        <a class="mdl-navigation__link" href="">Contact Us</a>
        <a class="mdl-navigation__link" href="">GitHub</a>
        <a class="mdl-navigation__link" href="">Download</a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title"><img border="3px"src="https://avatars0.githubusercontent.com/u/7635840?v=3&s=32" />BlockServerProject</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Home</a>
      <a class="mdl-navigation__link" href="">Contact Us</a>
      <a class="mdl-navigation__link" href="">GitHub</a>
      <a class="mdl-navigation__link" href="">Download</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
  </main>
  
  <!-- Wide card with share menu button -->
<style>
.demo-card-wide.mdl-card {
  width: 512px;
}
.demo-card-wide > .mdl-card__title {
  color: #fff;
  height: 176px;
  background: url('img/article-image-welcome.jpg') center / cover;
}
.demo-card-wide > .mdl-card__menu {
  color: #fff;
}
</style>


    <div class="demo-card-wide mdl-card mdl-shadow--2dp">
  <div class="mdl-card__title">
    <h2 class="mdl-card__title-text">Welcome</h2>
  </div>
  <div class="mdl-card__supporting-text">
    Welcome to BlockServer! BlockServer is an open source platform for Minecraft server software. It is very extensible and open source. This repository contains the core which is needed to run and load the extra modules which allow players to connect to the server.
    
The BlockServer Project develops modules to support both PC and PE connections. Currently PC is lower priority as our goal is to support PE first. Right now BlockServer is in-dev, but if you still want to get BlockServer feel free to.
  </div>
  <div class="mdl-card__actions mdl-card--border">
    <a href="https://github.com/BlockServerProject/BlockServer" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
      GitHub
    </a>
    <img src="https://travis-ci.org/BlockServerProject/BlockServer.svg?branch=master" />
  </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>

    </body>
</html>