Women && Tech

<header class="border header-interview">
  <div class="wrapper-sm">
    <h2>Interviewee Name</h2>
    <p class="intro">Intro paragraph.</p>
    <p class="italic">Optional footnote to add extra info.</p>

    <?php // Don't update. Using the same info as in Interview Credits. ?>
    <p class="author">An interview with <a href="<?php echo $interviewer_url; ?>"><?php echo $interviewer; ?></a></p>

    <?php // Don't update. Using the info from PHP variables at the top of the page. ?>
    <ul class="social-share">
      <li>
        <a href="http://www.facebook.com/sharer.php?u=http://womenandtech.com/interview/<?php echo $interviewee_url;?>/" title="Share on Facebook">
          <i class="fa fa-facebook" aria-hidden="true"></i>
          <span class="screen-readers">Post the interview on Facebook</span>
        </a>
      </li>
      <li>
        <a href="http://twitter.com/share?text=Women and Tech Interviews <?php echo $interviewee_name; ?>&url=http://womenandtech.com/interview/<?php echo $interviewee_url; ?>/" title="Share on Twitter">
          <i class="fa fa-twitter" aria-hidden="true"></i>
          <span class="screen-readers">Tweet the interview</span>
        </a>
      </li>
      <li>
        <a href="mailto:?subject=Women and Tech Interviews <?php echo $interviewee_name; ?>&body=Women and Tech Interviews <?php echo $interviewee_name; ?> http://womenandtech.com/interview/<?php echo $interviewee_url; ?>/" title="Email the interview">
          <i class="fa fa-envelope" aria-hidden="true"></i>
          <span class="screen-readers">Email interview</span>
        </a>
      </li>
    </ul>
  </div>
</header>

<footer class="no-border footer-secondary">
  <div class="wrapper-sm">
    <!-- ADD CONTENT HERE -->
    <h2>Heading 2</h2>
    <p>Paragraph text with a <a href="#">link</a>.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum corrupti eius labore cumque expedita dicta tenetur ut, accusantium, eaque eum, veritatis quam quae officiis assumenda? Voluptatum placeat eaque.</p>
  </div>
</footer>

<footer class="border credits">
  <ul>
    <li>
      Interview by <a href="<?php echo $interviewer_url; ?>"><?php echo $interviewer; ?></a>
      <?php if ($interviewer2): echo 'and <a href="'.$interviewer_url2 .'">'.$interviewer2.'</a>';endif; ?>
    </li>
    <li>
      Photography by <a href="<?php echo $photos_url; ?>"><?php echo $photos; ?></a>
      <?php if ($photos2): echo 'and <a href="'.$photos_url2 .'">'.$photos2.'</a>';endif; ?>
    </li>
    <li>
      Editing by <a href="<?php echo $editor_url; ?>"><?php echo $editor; ?></a>
      <?php if ($editor2): echo 'and <a href="'.$editor_url2 .'">'.$editor2.'</a>';endif; ?>
    </li>
    <li>
      Art Direction by <a href="<?php echo $ad_url; ?>"><?php echo $ad; ?></a>
      <?php if ($ad2): echo 'and <a href="'.$ad_url2 .'">'.$ad2.'</a>';endif; ?>
    </li>
    <li>
      Design by <a href="<?php echo $design_url; ?>"><?php echo $design; ?></a>
      <?php if ($design2): echo 'and <a href="'.$design_url2 .'">'.$design2.'</a>';endif; ?>
    </li>
    <li>
      Development by <a href="<?php echo $dev_url; ?>"><?php echo $dev; ?></a>
      <?php if ($dev2): echo 'and <a href="'.$dev_url2 .'">'.$dev2.'</a>';endif; ?>
    </li>
    <li>
      Transcriptions by <a href="<?php echo $transcribe_url; ?>"><?php echo $transcribe; ?></a>
      <?php if ($transcribe2): echo 'and <a href="'.$transcribe_url2 .'">'.$transcribe2.'</a>';endif; ?>
    </li>
  </ul>
  <?php // Global site credits
  include($path_inc."site-credits.php");
  ?>
</footer>

<div class="border img-side-by-side">
  <figure>
    <img src="<?php echo $path_img; ?>left-biying-miao.jpg" alt="Biying Miao">
  </figure>
  <figure>
    <img src="<?php echo $path_img; ?>right-biying-miao.jpg" alt="Biying Miao">
    <figcaption>
      Optional caption goes here. <a href="#">Links</a> can also be included.
    </figcaption>
  </figure>
</div>

<!-- // Single Image - Portrait -->
<div class="border img-portrait">
  <figure>
    <img src="<?php echo $path_img; ?>portrait-biying-miao.jpg" alt="Biying Miao">
    <figcaption>
      Optional caption goes here.
    </figcaption>
  </figure>
</div>

<!-- Single Image - Landscape -->
<div class="border img-landscape">
  <figure>
    <img src="<?php echo $path_img; ?>landscape-biying-miao.jpg" alt="Biying Miao">
    <figcaption>
      Optional caption goes here.
    </figcaption>
  </figure>
</div>

<dl class="border">
  <dt class="interview-q">Question?</dt>
  <dd class="interview-a">
    <p>Answer</p>
    <p>Break up long answers with additional paragraphs.</p>
  </dd>
</dl>

<dl class="border">
  <dt class="interview-q">Another question?</dt>
  <dd class="interview-a">
    <p>Answer</p>
  </dd>
</dl>

<aside class="border pull-quote">
  <p>Digital fabrication allows for a physical reality that’s much more transient, dynamic, and customized by the individual.</p>
</aside>

<div class="border signature">
<p>
  with <i class="fa fa-heart-o theme-color" aria-hidden="true" title="love"></i><span class="screen-readers">love</span>
  from <span class="team theme-color">the Women&&Tech team</span>
</p>
</div>

<!-- // Team Listing -->
<aside class="border team-listing">
  <ul>
    <li>
      <p class="name"><a href="#">Cassie Kaiser</a></p>
      <p class="role">Managing Coordinator</p>
    </li>
    <li>
      <p class="name"><a href="#">Ivonne Karamoy</a></p>
      <p class="role">Managing Director</p>
    </li>
    <li>
      <p class="name"><a href="#">Christina Truong</a></p>
      <p class="role">Lead Developer</p>
    </li>
    <li>
      <p class="name"><a href="#">Ray Kao</a></p>
      <p class="role">Tech Lead</p>
    </li>
  </ul>
  <p class="thanks">Special thanks to our founder Cassie McDaniel, past team members and supporters.</p>
</aside>

<aside class="interview-cards wrapper">
  <h2>Latest Interviews</h2>
  <a class="view-all" href="/archive/">view all</a>
  <div class="grid-wrapper">
    <article class="grid-3-1">
      <a href="/interview/aashni-shah/" class="no-underline">
        <img src="<?php echo $path_img; ?>thumbnail-aashni-shah.jpg" alt="Aashni Shah">
        <h3>Aashni Shah</h3>
        <p>with Cassie Kaiser</p>
        <p>Computer Science student, organizer, leader and speaker within the tech community.</p>
      </a>
    </article>
    <article class="grid-3-1">
      <a href="/interview/sara-hicks/" class="no-underline">
        <img src="<?php echo $path_img; ?>thumbnail-sara-hicks.jpg" alt="Sara Hicks">
        <h3>Sara Hicks</h3>
        <p>with Sophie He</p>
        <p>Co-founder and CEO of Reaction Commerce, an open-source ecommerce platform.
          </p>
      </a>
    </article>
    <article class="grid-3-1">
      <a href="/interview/mitchell-baker/" class="no-underline">
        <img src="<?php echo $path_img; ?>thumbnail-mitchell-baker.jpg" alt="Mitchell Baker">
        <h3>Mitchell Baker</h3>
        <p>with Cassie McDaniel</p>
        <p>Founder of the non-profit tech company Mozilla, creator of Firefox and champion of the open web.</p>
      </a>
    </article>
  </div>
</aside>