<nav>
  <div class="nav-wrapper">
    <div class="row">
      <div class="col s12">
        <a href="https://codepen.io/collection/nbBqgY" target="_blank" class="brand-logo">Materialize <span class="hide-on-small-only">Framework</span>
          <span class="hide-on-small-only" style="font-weight: 100; font-size: 0.4em; opacity:0.5;">
            v1.0.0
          </span>
        </a>
        <ul class="right">
          <li><a href="https://s.codepen.io/j_holtslander/fullpage/pqoQBM" target="_blank"><i class="material-icons">fullscreen</i></a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

<main>
  <div class="container">
    <div class="valign-wrapper">
      <div class="row">
        <div class="col s10 offset-s1">
          <h2>Simple Share Buttons'</h2>
          <p class="flow-text">HTML Share Buttons</p>
          <p>See: Real world usage on <a href="https://jay.holtslander.ca/" target="_blank">my personal website</a></p>
          <a href="#modal1" class="waves-effect waves-light btn modal-trigger">Share <i class="material-icons">share</i></a>
        </div>
      </div>
    </div>
  </div>
</main>


<!-- Modal Structure -->
<div id="modal1" class="modal bottom-sheet">
  <div class="modal-content">
    <h5>HTML Share Buttons</h5>
    <p>Via <a href="https://simplesharebuttons.com/html-share-buttons/" target="_blank">simplesharebuttons.com</a></p>
    
    <div id="share-buttons">

      <!-- Facebook -->
      <a href="http://www.facebook.com/sharer.php?u=https://materializecss.com" target="_blank">
          <img src="https://simplesharebuttons.com/images/somacro/facebook.png" alt="Facebook" />
      </a>

      <!-- Twitter -->
      <a href="https://twitter.com/share?url=https://materializecss.com&amp;text=Materialize%20Framework&amp;hashtags=css" target="_blank">
          <img src="https://simplesharebuttons.com/images/somacro/twitter.png" alt="Twitter" />
      </a>

      <!-- Google+ -->
      <a href="https://plus.google.com/share?url=https://materializecss.com" target="_blank">
          <img src="https://simplesharebuttons.com/images/somacro/google.png" alt="Google" />
      </a>

      <!-- Pinterest -->
      <a href="javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());">
          <img src="https://simplesharebuttons.com/images/somacro/pinterest.png" alt="Pinterest" />
      </a>

      <!-- LinkedIn -->
      <a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=https://materializecss.com" target="_blank">
          <img src="https://simplesharebuttons.com/images/somacro/linkedin.png" alt="LinkedIn" />
      </a>

      <!-- Buffer -->
      <a href="https://bufferapp.com/add?url=https://materializecss.com&amp;text=Simple Share Buttons" target="_blank">
          <img src="https://simplesharebuttons.com/images/somacro/buffer.png" alt="Buffer" />
      </a>

      <!-- Digg -->
      <a href="http://www.digg.com/submit?url=https://materializecss.com" target="_blank">
          <img src="https://simplesharebuttons.com/images/somacro/diggit.png" alt="Digg" />
      </a>

      <!-- Email -->
      <a href="mailto:?Subject=Simple Share Buttons&amp;Body=I%20saw%20this%20and%20thought%20of%20you!%20 https://materializecss.com">
          <img src="https://simplesharebuttons.com/images/somacro/email.png" alt="Email" />
      </a>

      <!-- Print -->
      <a href="javascript:;" onclick="window.print()">
          <img src="https://simplesharebuttons.com/images/somacro/print.png" alt="Print" />
      </a>

      <!-- Reddit -->
      <a href="http://reddit.com/submit?url=https://materializecss.com&amp;title=Materialize Framework" target="_blank">
          <img src="https://simplesharebuttons.com/images/somacro/reddit.png" alt="Reddit" />
      </a>

      <!-- StumbleUpon-->
      <a href="http://www.stumbleupon.com/submit?url=https://materializecss.com&amp;title=Materialize Framework" target="_blank">
          <img src="https://simplesharebuttons.com/images/somacro/stumbleupon.png" alt="StumbleUpon" />
      </a>

      <!-- Tumblr-->
      <a href="http://www.tumblr.com/share/link?url=https://materializecss.com&amp;title=Materialize Framework" target="_blank">
          <img src="https://simplesharebuttons.com/images/somacro/tumblr.png" alt="Tumblr" />
      </a>

      <!-- VK -->
      <a href="http://vkontakte.ru/share.php?url=https://materializecss.com" target="_blank">
          <img src="https://simplesharebuttons.com/images/somacro/vk.png" alt="VK" />
      </a>

      <!-- Yummly -->
      <a href="http://www.yummly.com/urb/verify?url=https://materializecss.com&amp;title=Materialize Framework" target="_blank">
          <img src="https://simplesharebuttons.com/images/somacro/yummly.png" alt="Yummly" />
      </a>

    </div>
    
    
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Cancel</a>
  </div>
</div>

<!-- Gitter Chat Link -->
<div class="fixed-action-btn"><a class="btn-floating btn-large red" href="https://gitter.im/Dogfalo/materialize" target="_blank"><i class="large material-icons">chat</i></a></div>

#share-buttons img {
  width: 48px;
  padding: 5px;
  border: 0;
  box-shadow: 0;
  display: inline;
}
.btn {
  .material-icons {
    position: relative;
    top: 3px;
    line-height: 1.3rem;
  } 
}




























































































.valign-wrapper {height: calc(100vh - 64px);}

$(document).ready(function(){
  $('.modal').modal();
});