tools.html

<div class="col-lg-4 col-md-6">
  <h5>
    <a href="https://coolors.co/app" target="_blank">Coolors</a>
  </h5>
  <p>
    Coolors is a great little web app that shows you five colours alongside each other, with a random colour generator to start
    you off and simple, intuitive tools to adjust them from there.
  </p>
  <p>
    <a href="https://coolors.co/ffffff-34a5da-2e93c1-ff435a-212529" target="_blank">Here are CodeUp's colours</a> to get you started.
  </p>
</div>

<div class="col-lg-4 col-md-6">
  <h5>
    <a href="https://codepen.io" target="_blank"><span class="fab fa-codepen"></span> CodePen</a>
  </h5>
  <p>
    CodePen is a development environment for front-end designers and developers. You can use it to quickly test snippets of code
    without having to set up all the files, folders and links on your own machine. You can share your 'pens' with others
    to show them your ideas and can even search all the code that has been written by others.
  </p>
</div>

<div class="col-lg-4 col-md-6">
  <h5>
    <a href="https://fontawesome.com/" target="_blank"><span class="fab fa-font-awesome"></span> Font Awesome</a>
  </h5>
  <p>
    Font Awesome is a font and icon toolkit based on CSS and Less which takes 2 minutes to add to a site and 2 minutes to learn.
    All the icons on this site are thanks to Font Awesome.
  </p>
</div>

<div class="col-lg-4 col-md-6">
  <h5>
    <a href="https://fonts.google.com/" target="_blank"><span class="fab fa-google"></span> Google Fonts</a>
  </h5>
  <p>
    Google Fonts provides a massive list of fonts for any website. It includes a layout editor, an emulator (to test your code
    without the hassle of transferring it to a phone/tablet), intelligent suggestions as you type, performance profilers
    and much more.
  </p>
</div>