<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Kenyon Holness</title>
    <link rel="stylesheet" href="portfolio.css">
    <style>@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400&display=swap');</style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script  src= "pf.js" type="text/javascript"></script>
  </head>
  <body>

      <nav class = "navbar">
        <ul>
          <li><a id= "Main" href = '#Main'>kenyon holness</a></li>
          <li><a id= "Bio" href = '#Bio'>about</a></li>
          <li><a id= "Contact" href = '#Contact'>contact</a></li>
        </ul>
      </nav>

      <nav class = "tabs">
        <ul>
          <li><a id= "art-tab" href = '#art-tab'>art</a></li> |
          <li><a id= "design-tab" href = '#design-tab'>design</a></li>
        </ul>
      </nav>

      <div id = "artwork" >

        <div id = "tab1">
        <figure style="overflow: hidden;">
          <a href = "#Main">
          <img src="assets/art/fadedthumbnail.jpg" alt="faded" class = "AI" id = "1">
          </a>
        </figure>

        <figure style="overflow: hidden;">
          <a href = "#Main">
          <img src="assets/art/kowloonthumbnail.png" alt="kowloon" class = "AI" id = "2">
          </a>
        </figure>

        <figure style="overflow: hidden;">
          <a href = "#Main">
          <img src="assets/art/whatelsethumbnail.png" alt="whatelse"  class = "AI" id = "3">
          </a>
        </figure>

        <figure style="overflow: hidden;">
          <a href = "#Main">
          <img src="assets/art/hiddenthumbnail.jpg" alt="hidden"  class = "AI" id = "4" >
          </a>
        </figure>

        <figure style="overflow: hidden;">
          <a href = "#Main">
          <video id = "5" width = "420" autoplay muted loop>
          <source src = "assets/art/1.mp4"</video>
          </a>
        </figure>


        <figure style="overflow: hidden;">
          <a href = "#Main">
          <video id = "6" width = "300" autoplay muted loop>
          <source src = "assets/art/2.mp4"</video>
          </a>
        </figure>

        <figure style="overflow: hidden;">
          <a href = "#Main">
          <video id = "7" width = "300" autoplay muted loop>
          <source src = "assets/art/3.mp4"</video>
          </a>
        </figure>

        <figure style="overflow: hidden;">
          <a href = "#Main">
          <video id = "8" width = "300" autoplay muted loop>
          <source src = "assets/art/4.mp4"</video>
          </a>
        </figure>

        <figure style="overflow: hidden;">
          <a href = "#Main">
          <video id = "9" width = "300" autoplay muted loop>
          <source src = "assets/art/5.mp4"</video>
          </a>
        </figure>

        </div>


      </div>

      </div>

    <div id = "designs">
    <!--
    <iframe src="https://xd.adobe.com/view/65a478ae-191f-4b2d-8491-991a539c2d24-30f7/" title="description">MyCity Toronto (2021)</iframe>
    <iframe src="https://xd.adobe.com/view/fa4ad26c-a806-44a8-a296-529c7bf9f13e-af19/" title="description">Humber Carpool App (2021)</iframe>
    -->
      <div id = "tab2">
      <figure>
           <a href ="https://xd.adobe.com/view/65a478ae-191f-4b2d-8491-991a539c2d24-30f7/">
               <img src="assets/design/iPhone X, XS, 11 Pro â€“ 1.png" alt="mycity" width = "320">
           </a>
           <figcaption class = "caption">mycity toronto (2021)</figcaption>
         </figure>

        <figure>
           <a href = "https://xd.adobe.com/view/fa4ad26c-a806-44a8-a296-529c7bf9f13e-af19/">
             <img src="assets/design/humber.png" alt="humber" width = "320">
           </a>
           <figcaption class = "caption">humber transit (2021)</figcaption>
         </figure>
      </div>
    </div>


      <div id = "content">
      </div>

  </body>
</html>
