html-header.html

<main>
  <section id="welcome-section">
    <h1>Welcome</h1>
    <p>Wearing the hat of "Creative Generalist" since 2008. This involves a hands on approach from inception to
      execution of digital products as a researcher, design and development facilitator getting involved in
      conversation
      with designers, developers and product owneres. Always be open to
      learning and growing. </p>
    <p>Firm believer that a product cannot be built in isolation fan of the triad UX, PM, eng</p>
    <p>My latest focus has researching and building accessible digital experiences.</p>
    <p>In my spare time I like to learning new skills through real projects and sharing this knowledge with
      everyone throgh <a href="https://indvstry.com/">articles</a></p>
    <p>I'm curious about everything but mostly about technology. I deepl care about accessibility and privacy.</p>

    <ul>
      <li>Name: Aris Karatarakis</li>
      <li>Location: Athens, Greece</li>
      <li>LinkedIn: Aris Karatarakis</li>
    </ul>
  </section>

  <!-- photo card -->
  <div class="photo">
    <div class="top">
      <button class="like-button" type="button">
        <svg fill="#f15151" class="BWSrD _2T3hc" version="1.1" viewbox="0 0 32 32" width="32" height="32" aria-hidden="false">
          <path d="M17.4 29c-.8.8-2 .8-2.8 0l-12.3-12.8c-3.1-3.1-3.1-8.2 0-11.4 3.1-3.1 8.2-3.1 11.3 0l2.4 2.8 2.3-2.8c3.1-3.1 8.2-3.1 11.3 0 3.1 3.1 3.1 8.2 0 11.4l-12.2 12.8z"></path>
          <span>12</span>
        </svg>
      </button>
      <button class="collect-button" type="button">
        <svg class="_2rdbO _2T3hc" version="1.1" viewbox="0 0 32 32" width="32" height="32" aria-hidden="false">
          <path d="M14 3h4v26h-4zM29 14v4h-26v-4z"></path>
        </svg>
        <span>Collect</span>
      </button>
    </div>
    <div class="bottom">
      <div class="photographer">
        <img class="profile-pic" src="https://images.unsplash.com/profile-1517439422941-5c2fdfe8d883?dpr=1&auto=format&fit=crop&w=64&h=64&q=60&crop=faces&bg=fff"
          alt="">
        <span class="photographer-name">Mark Adriane</span>
      </div>
      <button class="download-image">
        <svg class="Apljk _11dQc" version="1.1" viewbox="0 0 32 32" width="32" height="32" aria-hidden="false">
          <path d="M25.8 15.5l-7.8 7.2v-20.7h-4v20.7l-7.8-7.2-2.7 3 12.5 11.4 12.5-11.4z"></path>
        </svg>
      </button>
    </div>
  </div>
  <!-- skills -->
  <section id="skills">
    <h1>Skills & Interests</h1>
    <h2>Skillset</h2>
    <ul>
      <li>information architecture</li>
      <li>UI Design</li>
      <li>semantic encoding</li>
      <li>XML</li>
      <li>CSS</li>
      <li>Toolkit
        <ul>
          <li>Sketch</li>
          <li>InVision</li>
          <li>Abstract</li>
          <li>InDesign</li>
          <li>Overflow</li>
        </ul>
      </li>
    </ul>
    <!-- Interests -->
    <ul>
      <li>Photography</li>
      <li>Cruising with my board</li>
      <li>Literature (see my reading list on goodreads)</li>
      <li>Social responsibility (see my volunteer work)</li>
    </ul>
    <!-- random facts -->
    <p>you can see what I'm currently up to on twiter</p>
  </section>
  <!-- projects -->
  <section id="projects">
    <h1>Currently working on</h1>
    <ul class="tiles">
      <li>Language Learning App</li>
      <li><a class="project-title" href="https://vivl.io" target="_blank">vivlio</a></li>
      <li>completing fcc Responsive Web Design Projects</li>
    </ul>
  </section>
  <!-- Profile Links -->
  <section id="links">
    <ul>
      <li><a id="profile-link" href="https://github.com/indvstry" target="_blank">my github account</a></li>
      <li>Twitter: <a href="https://twitter.com/INDVSTRY">@indvstry</a></li>
    </ul>
  </section>
  <!-- Favorite Articles -->
  <p>A list and a synopsis of my favorite articles or videos around the web</p>
  <p> youtube inspiration playlist</p>

</main>
<!-- Netlify contact form -->
<form name="contact" method="POST" netlify>
  <p>
    <label>Your Name: <input type="text" name="name" /></label>
  </p>
  <p>
    <label>Your Email: <input type="email" name="email" /></label>
  </p>
  <p>
    <label>Your Role: <select name="role[]" multiple>
        <option value="leader">Leader</option>
        <option value="follower">Follower</option>
      </select></label>
  </p>
  <p>
    <label>Message: <textarea name="message"></textarea></label>
  </p>
  <p>
    <button type="submit">Send</button>
  </p>
</form>