index.html

<html>
  <head>
      <meta charset="UTF-8">
      <!-- viewport code-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- link to google fonts-->
      <link rel="preconnect" href="https://fonts.gstatic.com">
      <link href="https://fonts.googleapis.com/css2?family=Parisienne&family=Playfair+Display&display=swap" rel="stylesheet">
      <title>My Gratitude List</title>
      <!-- link to font for the hamburger menu -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <!-- link to JavaScript for menu-->
      <script  type="text/javascript" src="js/navigation.js"></script> 
      <!-- link to style-->
      <link rel="stylesheet" href="css/styles.css">
  </head>
  <nav>
      <!-- A navigation menu that collapses into a responsive mobile-friendly menu (such as a
      “hamburger” menu) -->
      <!-- Top Navigation Menu https://www.w3schools.com/howto/howto_js_topnav_responsive.asp -->
    <div class="topnav" id="navigate">
        <a href="index.html" class="active">Home</a>
        <a href="gold_tree.html">Gold Tree</a>
        <a href="dog.html">Dog</a>
        <a href="guest.html">Guest</a>
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">
          <i class="fa fa-bars"></i></a>
    </div>
  </nav>
  <!-- header only used on home page -->
  <header>
    <h1>I'm Grateful for ...</h1>
  </header>
  <div class="content-wrap">
  <!--required Use CSS Grid to rearrange 2 or more content areas on your page as the screen
  changes sizes -->
    <div class="grid-container">
      <article class="grid-item">
        <figure><p><img src="images/the_mill.jpg" alt="The Mill"></p>
          <figcaption><p>Image of The Mill from <a href="https://dimensionmill.org/" target="_blank" rel="noopener noreferrer nofollow">The Mill Website</a> used without permission for this private project.</p></figcaption>
        </figure>
        <p>In September, I committed to participate in <a href="https://www.gener8torupskilling.com/mill-code-school" target="_blank" rel="noopener noreferrer nofollow">The Mill Code School</a>. I didn't have extra time, but I did have extra motivation to learn and participate with an open mind. </p>
        <p>I decided early on that just showing up and smart time management were skills that would help me succeed. Partnering with the leaders at gener8or who genuinely had my best interest in mind gave me even more support and encouragement. I watched over 50 hours of quality online learning modules and practiced using a variety of coding tools.</p>
        <p>I knew at the start we'd be creating our own website, and I decided my topic would be gratitude. I kept my eye open for some content and snapped some pictures while taking in and considering each moment at the time.</p>
        <p>The following pages are the ones I liked the best.</p>
      </article>
      <div class="divider-wrapper">
        <div class="divider div-transparent div-dot"></div>
      </div><!--divider-wrapper end-->
      <aside class="grid-item">
        <p>"Joy is not a constant. It comes to us in moments - often ordinary moments. Sometimes we miss out on the bursts of joy because we're too busy chasing down the extraordinary moments. Other times we're so afraid of the dark we don't dare let ourselves enjoy the light.</p>
        <p>A joyful life is not a floodlight of joy. That would eventually become unbearable. I believe a joyful life is made up of joyful moments gracefully strung together by trust, gratitude and inspiration.""</p>
        <p class="author">Brené Brown</p>
      </aside>
    </div><!-- end grid-container-->
  </div> <!--end content-wrap-->
  <footer>
    <p>Pages written as an assignment for <a href="https://www.gener8torupskilling.com/mill-code-school" target="_blank" rel="noopener noreferrer">The Mill Code School</a> 2020</p>
  </footer>
</html>