<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- ******************************************************** -->
<head>
    <title>About Mr. Richardson</title>
    <style>
    @import url(http://fonts.googleapis.com/css?family=Permanent+Marker);
    @import url(http://fonts.googleapis.com/css?family=Open+Sans);
    
    body {
        background-color: lightsteelblue;
        font-family: "Open Sans", sans-serif;
    }
    
    main.panel {
        width: 900px;
        margin-left: auto;
        margin-right: auto;
        margin-top: -8px;
        background-color:white;
    }
    
    h2 {
        font-family: 'Permanent Marker', sans-serif;
    }    

    header.main {
        height: 350px;
        background-color: #0088cb;
        background-image: url(./pics/banner.png);
        background-position: top;
        background-size: 910px;
        background-repeat: no-repeat;
        background-attachment: fixed;
        font-family: 'Permanent Marker', sans-serif;
        padding: 0.5em;
    }
        
    header.subheading {
        width: 100%;
    }    

    .subheading h2 {
        display: inline;
    }
    
    
    .subheading div {
        display: inline;
        float: right;
        font-size: 1.5em;
        font-weight: bold;
        font-family: 'Permanent Marker', sans-serif;
    }
    
    .bottom-aligner {
        display: inline-block;
        height: 100%;
        vertical-align: bottom;
        width:1px;
    }

    .header-content {
        text-align: left;
        font-size: 60px;
        padding-left: 5px;
    }
    
    img {
        width: 200px;
        border: black solid 0.5px;
    }
    
    .profilepic {
      border-radius: 0.5em;
        background-image: url('./pics/profilepic.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        width: 200px;
        height: 150px;
        
    }
    
    nav {
        background-color: #E7EDF5;
        width:160px;
        display: table-cell;
        padding: 0.5em;
        vertical-align: top;
        text-align: center;
    }
        
    .content {
        display: table-cell;
        padding: 0.5em;
    }
    
    nav.night .button {
      background: linear-gradient(25deg, #24032B, #34789D);
    }
    nav.night .button.inverse {
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      border-image-source: linear-gradient(25deg, #24032B, #34789D);
    }

    .button {
      display: table;
      background-size: 200% 200% !important;
      color: #fff;
      text-transform: uppercase;
      text-decoration: none;
      letter-spacing: 1px;
      padding: 1.3em 1.5em;
      margin: 0.5em auto;
      border-radius: 0.5em;
      -webkit-transition: all 200ms linear;
    }
    
    .button:hover {
      background-size: 110% 110% !important;
      padding: 1.3em 2.1em;
      -webkit-transition: all 200ms linear;
    }
    
    .button.inverse {
      font-weight: bold;
      padding: 1.15em 1.5em;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      border-width: 0.25em;
      border-style: solid;
      border-image-source: linear-gradient(45deg, #fff, #fff);
      border-image-slice: 30%;
      border-image-width: 1;
      border-image-repeat: stretch;
    }
    
    .button.inverse:hover {
      background-size: 100% 100% !important;
      border-image-slice: 3%;
      padding: 1.15em 2.1em;
    }

    a {
        text-decoration: none;
        color: black;
    }
    </style>
    
</head>
<!-- ******************************************************** -->
<body>
    <main class="panel">
        <header id="home" class="main">
            <div class="profilepic"></div>
            <div class="header-content">Mr. Richardson</div>
        </header>
        <nav class="night">
            <a class="button" href="#about">About Me</a>
            <a class="button" href="#interest">Interests</a>
            <a class="button" href="#friends">Friends</a>
            <a class="button" href="#links">Links</a>
        </nav>
        <main class="content">
            <section id="about">
                <header class="subheading">
                    <h2>About Mr. Richardson</h2>
                    <div><a href="#home">&#8679;</a></div>
                </header>
                <p>I am a Information Technology teacher at Sullivan Heights Secondary.  I was born in 1980 and grew up on a farm in a small town call Smeaton, in the state of Victoia in Australia.</p>
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d101550.15776597719!2d143.93394632791805!3d-37.30834639141608!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad12e5bf4f37639%3A0x40579a430a08380!2sSmeaton+VIC+3364%2C+Australia!5e0!3m2!1sen!2s!4v1424651035044" width="100%" height="450" frameborder="0" style="border:0"></iframe>
            </section>
            <section id="interest">
                <header class="subheading">
                    <h2>Interests</h2>
                    <div><a href="#home">&#8679;</a></div>
                </header>
                <ul>
                <li>Programming
                    <ul style="list-style-type:circle;">
                        <li>Java</li>
                        <li>Python</li>
                        <li>HTML / CSS</li>
                        <li>Javascript</li>
                        <li>PHP</li>
                        <li>SQL</li>
                    </ul>
                </li>
                <li>Education</li>
                <li>Cooking</li>
                <li>Hockey</li>
                <li>Aussie Rules Footy<br/>
                    <video width="100%" height="300" controls>
                      <source src="./video/AFL.mp4" type="video/mp4">
                    Your browser does not support the video tag.
                    </video>
                    
                </li>
                </ul>
            </section>
            <section id="friends">
                <header class="subheading">
                    <h2>My Friends</h2>
                    <div><a href="#home">&#8679;</a></div>
                </header>
                <img src="http://www.amctv.com/polls.services/img/data/3691-309x316.jpg" alt="Dave"/>
                <img src="http://content9.flixster.com/question/65/24/02/6524027_std.jpg" alt="Davo"/>
                <img src="http://www.wearysloth.com/Gallery/ActorsF/tve20235-19340505-1224.jpg" alt="David"/>
            </section>
            <section id="links">
                <header class="subheading">
                    <h2>Links</h2>
                    <div><a href="#home">&#8679;</a></div>
                </header>
                <ul>
                    <li><a href="http://learnrich.org">Learn.Rich</a></li>
                    <li><a href="http://twitter.com/learnrich">@learnrich</a></li>                    
                    <li><a href="http://www.google.com">Google</a></li>
                    <li><a href="http://w3schools.com">W3Schools</a></li>
                    <li><a href="mailto://richardson_b@surreyschools.ca">Email Me</a></li>
                </ul>
            </section>
        </main>
    </main>
</body>
</html>