{% extends "base.html" %}

{% load static %}

{% load wagtailcore_tags %}

{% block body_class %}helvetica bg-black-10{% endblock %}

{% block content %}
  <header class="sans-serif">
    <div class="cover bg-left bg-center-l" style="background-image: url({% static "img/programming_background.jpg" %})">
      <div class="bg-black-80 pb5 pb6-m pb7-l">
        <div class="tc-l pt4 pt5-m pt6-l pb3">
          <h1 class="f2 f1-l fw2 white-90 mb0 lh-title">Datasketch</h1>
          <h2 class="fw1 f3 white-80 mt3 mb4">A full stack shop for web design, application development, and
            training</h2>
          <a class="f6 no-underline grow dib v-mid bg-blue white br1 ba b--blue ph3 pv2 mb3"
             href="{% slugurl 'blog' %}">Read the blog</a>
          <span class="dib v-mid ph3 white-70 mb3">or</span>
          <a class="f6 no-underline grow dib v-mid white ba b--white br1 ph3 pv2 mb3" href="">Connect with us</a>
        </div>
      </div>
    </div>
  </header>
  <main class="pv4 ph2 tc">
    <h1>Just a man trying to make a buck</h1>
    <article class="mw5 dib bg-white br1 pa3 pa4-ns mv3 mr4-l ba b--black-10 grow shadow-4">
      <div class="tc">
        <img src="http://tachyons.io/img/avatar_1.jpg" class="br-100 h3 w3 dib" title="Photo of a kitty staring at you">
        <h1 class="f4">Training</h1>
        <hr class="mw3 bb bw1 b--black-10">
      </div>
      <p class="lh-copy measure f6 black-70">
        As a college educator I learned what does and does not work for students. I strive to bring each of my students
        along thier learning journey.
      </p>
    </article>
    <article class="mw5 dib bg-white br1 pa3 pa4-ns mv3 mr4-l ba b--black-10 grow shadow-4">
      <div class="tc">
        <img src="http://tachyons.io/img/avatar_1.jpg" class="br-100 h3 w3 dib" title="Photo of a kitty staring at you">
        <h1 class="f4">Websites</h1>
        <hr class="mw3 bb bw1 b--black-10">
      </div>
      <p class="lh-copy measure center f6 black-70">
        Design & Development, eCommerce, Responsive Design. I can deliver you a stunning website.
      </p>
    </article>
    <article class="mw5 dib bg-white br1 pa3 pa4-ns mv3 mr4-l ba b--black-10 grow shadow-4">
      <div class="tc">
        <img src="http://tachyons.io/img/avatar_1.jpg" class="br-100 h3 w3 dib" title="Photo of a kitty staring at you">
        <h1 class="f4">App Development</h1>
        <hr class="mw3 bb bw1 b--black-10">
      </div>
      <p class="lh-copy measure center f6 black-70">
        Quite affectionate and outgoing.
        She loves to get chin scratches and will
        roll around on the floor waiting for you give her more of them.
      </p>
    </article>
  </main>
{% endblock %}
