work.html

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Work &middot; Art Director &middot; Tatiana Mac</title>
    <link rel="stylesheet" href="css/main.css">
    <link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">

    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#0e4bff">
    <meta name="msapplication-TileColor" content="#2d89ef">
    <meta name="theme-color" content="#ffffff">
  </head>
  <body>
    <div class="item" id="warning-msg">
        <h3>Warning! This page is mid-progress. </h3>
        <p>You may notice inaccessible elements, incomplete images, broken links, and unresponsive elements.</p>
      </div>
<div class="container" id="workhero">

    <header>
  		<nav>
        <div class="logo">
          <a href="index.html"><img src="images/tatianamac_logo.svg" alt="Geometric logo with two parallel lines on top and bottom, then a backwards 11 in the middle."/></a>
        </div>
        <div>
         <!--  <ul role="navigation">
            <li></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
          </ul> -->
        </div>
      </nav>
  	</header>
    <div class="wrapperhero">
      <div class="item" id="workintro">
        <h1>An eclectic range of projects&mdash;Sometimes as a designer, writer, illustrator. Always as the insatiably curious challenger.</h1>

        <h2>An abridged overview of my work to date. Full case studies are in development.</h2>
      </div>
      <div class="item" id="worktag">
            <h4>Photo Art Direction</h4>
            <h3>Teocali Brand</h3>
            <p>Concepted, photographed and art directed a seasonal photoshoot for an accessory- and lifestyle-brand.</p>
            <p class="comingsoon">Case Study In Development</p>
      </div>
      <div class="item" id="workimage">
        <img src="images/teocalihero.png" alt="Woman facing right wearing a blue Oaxacan floral scarf around her hair."/>
      </div>
        <!-- <div class="item" id="teocalichair">
            <img src="images/teocali-teaser-chair.jpg" alt="Chair with Mexican woven plastic bag and plant on a wooden chair." />
        </div>
        <div class="item" id="teocalihands">
            <img src="images/teocali-teaser-hands.jpg" alt="Two hands holding black and white plastic woven bags against yellow wall." />
        </div>
        <div class="item" id="teocaliflatlay">
            <img src="images/teocali-teaser-flatlay.jpg" alt="Flatlay of open woven Mexican bag with items scattered; tarot card, red notebook, lipstick, etc." />
        </div> -->
    </div>
  </div>

<div class="container">
    <div class="wrapper">
      <!-- MICROSOFT -->

          <div class="item" id="work-butterfliesimg">
            <img src="images/butterflies-work.svg" alt="Geometric pattern on peach background"/>
          </div>

          <div class="item" id="work-butterfliestag">
            <h4>Branding</h4>
            <h3>Microsoft Azure Developer Tour</h3>
            <p class="comingsoon">Case Study In Development</p>
          </div>

     
          <div class="item" id="work-tbell">
          </div>

          <div class="item" id="work-tbellimg">
            <img src="images/tacobell_illo.svg" alt="8-bit illustration of the classic orange Taco Bell entrance with bell logo."/>
          </div>

          <div class="item" id="work-tbelltag">
            <h4>Interactive</h4>
            <h3>Taco Bell Scrolling Email</h3>

            <p class="comingsoon">Case Study In Development</p>

          </div>

          <div class="item" id="work-lovelust">
          </div>

          <div class="item" id="work-lovelustimg">
            <img src="images/snakes-tee-model.jpg" alt="Man with bun wearing black tee with illustrated snake, making interlaced L's"/>
          </div>

          <div class="item" id="work-lovelusttag">
            <h4>Art &amp; Apparel</h4>
            <h3>Love Lust</h3>

            <a href="https://tictail.com/tatianatmac">Shop My Store</a>
          </div>

    <!-- SKILLSHARE -->
          <div class="item" id="work-skillsharetag">
            <h4>Teaching</h4>
            <h3>Hacking Styleguides for Accessibility</h3>
            <a href="http://goo.gl/EbXVvq" target="_blank">Take My Class</a>
          </div>

          <div class="item" id="work-skillshareimg">
            <img src="images/uxskillshare_img.jpg" alt="Me, a blonde woman, sitting at a school desk with a smirk."/>
          </div>

    <!-- UPCOMING PROJECTS -->
    <!-- SALON DOUX -->
<!--     <div class="item" id="salondouxcopy">
      <h4>Interactive</h4>
      <h3>Salon Doux Site</h3>
        <p>I designed and developed a Squarespace site for a boutique salon based in Seattle.</p>

        <p class="comingsoon">Case Study In Development</p>
      <a href="http://www.salondoux.com/" target="_blank">Visit The Site</a>
    </div>
    <div class="item" id="salondouximg">
    </div>

    <div class="item" id="salondoux">
    </div>


    <div class="item" id="ucxcopy">
      <h4>Interactive</h4>
      <h3>Cisco Unified Communications Site</h3>
        <p>An website that supported a broader integrated campaign by articulating complex communications offerings through animation and interactions.</p>

        <p class="comingsoon">Case Study In Development</p>
      <a href="http://www.salondoux.com/" target="_blank">Visit The Site</a>
    </div>

    <div class="item" id="ucx">
    </div>

    <div class="item" id="ucximg">
    </div>


    <div class="item" id="cupcopy">
      <h4>Interactive</h4>
      <h3>World of Better Learning Blog</h3>
        <p>Cambridge University Press .</p>

        <p class="comingsoon">Case Study In Development</p>
      <a href="http://www.cambridge.com/" target="_blank">Visit The Site</a>
    </div>

    <div class="item" id="cup">
    </div>

    <div class="item" id="cupimg">
    </div> -->

    </div>
  </div>
</div>


  </body>
</html>