Skip to content

Commit

Permalink
First commit, basic homepage is finished with a few CSS issues to wor…
Browse files Browse the repository at this point in the history 
…k out.
  • Loading branch information
@jamirvin
jamirvin committed Feb 8, 2016
0 parents commit 79fe2a5
Show file tree
Hide file tree
Showing 10 changed files with 431 additions and 0 deletions.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
# MDL-Practice-Website
Binary file added images/corniglia.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/heading1.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/heading2.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/manarola.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/monterosso.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/riomaggiore.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/vernazza.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
296 changes: 296 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,296 @@
<!doctype html>
<html class="roboto_font">
<head>
<title>Cinque Terre</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.blue_grey-deep_purple.min.css" />
<script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script>
<link rel="stylesheet" href="stylesheet.css" />
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>



<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-shadow--4dp">
<header class="mdl-layout__header">
<div class="mdl-layout-icon"></div>
<div class="mdl-layout__header-row">
<span class="mdl-layout__title">Cinque Terre</span>
<div class="mdl-layout-spacer"></div>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#lists">Lists</a>
<a class="mdl-navigation__link" href="#table">Table</a>
<a class="mdl-navigation__link" href="#cards">Cards</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout__title">Cinque Terre</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#lists">Lists</a>
<a class="mdl-navigation__link" href="#table">Table</a>
<a class="mdl-navigation__link" href="#cards">Cards</a>
</nav>
</div>



<main class="mdl-layout__content mdl-color--grey-100">
<a id="top"></a>
<div class="page-content">


<div class="title_section">
<div class="mdl-typography--text-center mdl-typeography--title">
<h1>Cinque Terre, Italy</h1>
<a id="maps_link" class="mdl-typography--text-center mdl-typography--subhead" href="https://www.google.com/maps/@44.1232128,9.7056657,13z">
<span class="nav_text"><i class="maps_icon material-icons" style="color:white">satellite</i> Google Maps</span></a>
</div>
</div>

<div id="lists" class="mdl-grid list_section">
<div class=" mdl-cell mdl-cell--4-col mdl-shadow--4dp">
<h2>List</h2>
<ul class="mdl-list">
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">keyboard_arrow_right</i>
First thing
</span>
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">keyboard_arrow_right</i>
Second thing
</span>
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">keyboard_arrow_right</i>
Third thing
</span>
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">keyboard_arrow_right</i>
Fourth thing
</span>
</li>
</ul>
</div>
<div class=" mdl-cell mdl-cell--4-col mdl-shadow--4dp">
<h2>List</h2>
<ul class="mdl-list">
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">keyboard_arrow_right</i>
First thing
</span>
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">keyboard_arrow_right</i>
Second thing
</span>
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">keyboard_arrow_right</i>
Third thing
</span>
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">keyboard_arrow_right</i>
Fourth thing
</span>
</li>
</ul>
</div>
<div class=" mdl-cell mdl-cell--4-col mdl-shadow--4dp">
<h2>List</h2>
<ul class="mdl-list">
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">keyboard_arrow_right</i>
First thing
</span>
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">keyboard_arrow_right</i>
Second thing
</span>
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">keyboard_arrow_right</i>
Third thing
</span>
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">keyboard_arrow_right</i>
Fourth thing
</span>
</li>
</ul>
</div>
</div>


<div class="table_section" id="table">
<div class="mdl-grid table_grid">
<div class="mdl-cell mdl-cell--12-col table_cell">
<h2 class="white">Table</h2>
<table class="village_table mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--4dp">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Village</th>
<th class="mdl-data-table__cell--non-numeric">Things To Do</th>
<th class="mdl-data-table__cell--non-numeric">Is Cool?</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">Monterosso</th>
<td class="mdl-data-table__cell--non-numeric">Go to the beach, eat Italian food, drink wine.</th>
<td class="mdl-data-table__cell--non-numeric">Yes</th>
<td>1</th>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Vernazza</th>
<td class="mdl-data-table__cell--non-numeric">Go to the rocky shore, eat Italian food, drink wine, hike</th>
<td class="mdl-data-table__cell--non-numeric">Yes</th>
<td>2</th>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Corniglia</th>
<td class="mdl-data-table__cell--non-numeric">Eat gelato, hike in the hills, drink wine.</th>
<td class="mdl-data-table__cell--non-numeric">Yes</th>
<td>3</th>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Manarola</th>
<td class="mdl-data-table__cell--non-numeric">Eat at Trattoria Dal Billy, take beautiful pictures, drink wine.</th>
<td class="mdl-data-table__cell--non-numeric">Yes</th>
<td>4</th>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Riomaggiore</th>
<td class="mdl-data-table__cell--non-numeric">Learn to paddle board, go cliff jumping, drink wine.</th>
<td class="mdl-data-table__cell--non-numeric">Yes</th>
<td>5</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>

<div class="cards_section" id="cards">
<h2>The Villages</h2>
<div class="card-container mdl-grid">

<div class="mdl-cell mdl-cell--4-cell mdl-card mdl-shadow--4dp">
<div class="mdl-card__media">
<img class="card_image" src="images/monterosso.jpg" />
</div>
<div class="mdl-card__title">
<h4 class="mdl-card__title-text">Monterosso</h5>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="card_link mdl-button mdl-js-button mdl-typography--text-uppercase" href="https://en.wikipedia.org/wiki/Monterosso_al_Mare">
<i class="material-icons" style="color:gray">info</i> More Information
</a>
</div>
</div>

<div class="mdl-cell mdl-cell--4-cell mdl-card mdl-shadow--4dp">
<div class="mdl-card__media">
<img class="card_image" src="images/vernazza.jpg" />
</div>
<div class="mdl-card__title">
<h4 class="mdl-card__title-text">Vernazza</h5>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="card_link mdl-button mdl-js-button mdl-typography--text-uppercase" href="https://en.wikipedia.org/wiki/Vernazza">
<i class="material-icons" style="color:gray">info</i> More Information
</a>
</div>
</div>

<div class="mdl-cell mdl-cell--4-cell mdl-card mdl-shadow--4dp">
<div class="mdl-card__media">
<img class="card_image" src="images/corniglia.jpg" />
</div>
<div class="mdl-card__title">
<h4 class="mdl-card__title-text">Corniglia</h5>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="card_link mdl-button mdl-js-button mdl-typography--text-uppercase" href="https://en.wikipedia.org/wiki/corniglia">
<i class="material-icons" style="color:gray">info</i> More Information
</a>
</div>
</div>

<div class="mdl-cell mdl-cell--4-cell mdl-card mdl-shadow--4dp">
<div class="mdl-card__media">
<img class="card_image" src="images/manarola.jpg" />
</div>
<div class="mdl-card__title">
<h4 class="mdl-card__title-text">Manarola</h5>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="card_link mdl-button mdl-js-button mdl-typography--text-uppercase" href="https://en.wikipedia.org/wiki/manarola">
<i class="material-icons" style="color:gray">info</i> More Information
</a>
</div>
</div>

<div class="mdl-cell mdl-cell--4-cell mdl-card mdl-shadow--4dp">
<div class="mdl-card__media">
<img class="card_image" src="images/riomaggiore.jpg" />
</div>
<div class="mdl-card__title">
<h4 class="mdl-card__title-text">Riomaggiore</h5>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="card_link mdl-button mdl-js-button mdl-typography--text-uppercase" href="https://en.wikipedia.org/wiki/riomaggiore">
<i class="material-icons" style="color:gray">info</i> More Information
</a>
</div>
</div>

</div>
</div>

<footer class="mdl-mini-footer">
<div class="mdl-mini-footer__left-section">
<div class="mdl-logo">Cinque Terre</div>
<ul class="mdl-mini-footer__link-list">
<li><a href="https://www.getmdl.io/">Material Design Lite</a></li>
<li><a href="https://github.com/jamirvin/MDL-Practice-Website">Github</a></li>
</ul>
</div>
<div class="mdl-mini-footer__right-section">
<div class="mdl-logo"> </div>
<ul class="mdl-mini-footer__link-list">
<li>
<a href="#top">
Back to Top
<i class="material-icons">expand_less</i>
</a>
</li>
</ul>
</div>
</footer>

</div>
</main>

</div>
</body>
</html>
Loading

0 comments on commit 79fe2a5

Please sign in to comment.