7 - Image Manipulation/index.html

<!--
  Message from Brad:
  Thanks for watching CSS3 in 30 Days! You're awesome.
  Want more fun design & coding courses? Check out my website.

  https://codecollege.ca
  (it's free to start)
-->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Image Manipulation | Code 30 Things in 30 Days with CSS3</title>

    <!-- NORMALIZE CSS -->
    <link rel="stylesheet" href="../_theme-styles/normalize.css">

    <!-- PROJECT THEME CSS -->
    <link rel="stylesheet" href="../_theme-styles/theme.css">

    <!-- FINAL PROJECT CSS (use for reference) -->
    <link rel="stylesheet" href="final.css">

    <!-- SANDBOX CSS (this is your file!) -->
    <link rel="stylesheet" href="sandbox.css">

<link href="https://fonts.googleapis.com/css?family=Bubblegum+Sans|Nova+Mono|Roboto+Condensed" rel="stylesheet">
  </head>
  <body>
    <h1><small>Day #7</small> Image Manipulation</h1>


    <div class="sandbox">
      <h2>Sandbox <small>This is where you play</small></h2>
      <div class="content">

        <p><strong>Instructions:</strong> Use CSS3 filters to manipulate the below images. Refer to the "Final Result" below for help.</p>

        <section>

          <h4>Example #1</h4>

          <img src="https://unsplash.it/500/300?image=1074" alt="" class="grayscale" />

        </section>

        <section>

          <h4>Example #2</h4>

          <img src="https://unsplash.it/500/300?image=1055" alt="" class="blur" />

        </section>

        <section>

          <h4>Example #3</h4>

          <img src="https://unsplash.it/500/300?image=1000" alt="" class="invert"/>

        </section>

        <section>

          <h4>Example #4</h4>

          <img src="https://unsplash.it/500/300?image=1023" alt="" class="sepia"/>

        </section>

      </div>
    </div>

    <div class="final-result">
        <h2>Final Result <small>Use this for reference!</small></h2>
        <div class="content">

          <section>

            <h4>Example #1</h4>

            <img src="https://unsplash.it/500/300?image=1074" alt="" class="final__grayscale" />

          </section>

          <section>

            <h4>Example #2</h4>

            <img src="https://unsplash.it/500/300?image=1055" alt="" class="final__blur" />

          </section>

          <section>

            <h4>Example #3</h4>

            <img src="https://unsplash.it/500/300?image=1000" alt="" class="final__invert"/>

          </section>

          <section>

            <h4>Example #4</h4>

            <img src="https://unsplash.it/500/300?image=1023" alt="" class="final__sepia"/>

          </section>

        </div>
    </div>

    <div class="info">
      <h2>Information <small>About this lesson</small></h2>
      <h3>What are we making?</h3>
      <p>Fun &amp; fancy ways to manipulate images purely with CSS!</p>

      <h3>Where can I use it?</h3>
      <p>In your websites, client projects and applications as a way to do interesting things with images. It's a great way to avoid Photoshop for simple tweaks!</p>

      <h3>How compatible are these styles with major browsers?</h3>
      <p>Check the CSS3 styles from your stylesheet <a href="http://caniuse.com/">on this website.</a> It allows you to see the compatibility of every CSS style with major browser.</p>
    </div>

    <footer>
      <div class="logo">
        <a href="http://codecollege.ca/" id="logo">

          <img src="../_theme-styles/img/bggray.svg" width="60px" id="logo_bg-gray">
          <img src="../_theme-styles/img/bgyellow.svg" width="60px" id="logo_bg-yellow">
          <img src="../_theme-styles/img/codecollegelogo.svg" width="60px" id="logo_codecollege">

          <!-- <img src="../_theme-styles/img/codecollegelogo.png" alt="Learn to Code at CodeCollege.ca" height="60px"> -->

        </a>
      </div>
      <div class="made-by">
        Made by <a href="http://bradhussey.ca/">Brad Hussey</a>
      </div>
      <div class="course">
        <a href="http://codecollege.ca/">Code 30 things in 30 days with CSS3</a>
      </div>
      <div class="copyright">
        &copy;2018 Brightside Studios Inc.
      </div>
    </footer>
  </body>
</html>