{% extends "base.html" %}

{% load static %}

{% load wagtailcore_tags %}

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

{% block content %}
  <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">
      {% include "header.html" %}
        <div id="hero-text" class="tc-l mt4 mt5-m mt6-l ph3">
          <h1 class="f2 f1-l fw2 white-90 mb0 lh-title">Hire Datasketch</h1>
          <h2 class="fw1 f3 white-80 mt3 mb4">A full stack shop for web design, application development, and training</h2>
          <a href="#connect" class="f6 no-underline grow dib v-mid bg-orange white ba bn ph3 pv2 mb3 br1 tracked">Connect</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 ph3 pv2 mb3 br1" href="{% slugurl 'blog' %}" ">Read our blog</a>
        </div>
    </div>
  </div>
  <main id="services" class="pv4 ph2 tc">
    <h1 class="f2 fw6">Just a man trying to make a buck</h1>
    <div class="flex-ns justify-center-ns">
      <article class="mw5 dib bg-white br1 pa3 pa4-ns mv3 mr4-l ba b--black-10 shadow-4">
        <div class="tc">
          <img src="{% static 'icon/basic_book_pen.svg' %}" class="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 shadow-4">
        <div class="tc">
          <img src="{% static 'icon/basic_webpage_txt.svg' %}" class="h3 w3 dib" title="web-icon">
          <h1 class="f4">Websites</h1>
          <hr class="mw3 bb bw1 b--black-10">
        </div>
        <p class="h3 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 shadow-4">
        <div class="tc">
          <img src="{% static 'icon/basic_settings.svg' %}" class="h3 w3 dib" title="App development icon">
          <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>
    </div>
  </main>
  <div id="connect" class="bg-grad-blue tc pv5 pv6-ns ph2">
    <div class="mw6 center">
      <h1 class="white f2 fw5 mb5">Together we can make great things.</h1>
      <form class=""  action="">
        <input class="input-reset w-100 w-45-ns mb3 pv2 ba br1 b--black-10" type="text" name="fullname"  placeholder="Full Name">
        <input class="input-reset w-100 mb3 pv2 ba br1 b--black-10 mail-icon" type="email" name="email" placeholder="Email">
        <br>
        <textarea class="input-reset w-100 h4 mb3 pv2 ba br1 b--black-10" name="comments" placeholder="Comments"></textarea>
        <br>
        <button class="f5 dim fw5 dib v-mid bg-orange white ba bn ph3 pv2 mb3 br1 tracked">Talk to the developer!</button>
      </form>
    </div>
  </div>
  {% include "footer.html" %}
{% endblock %}
