fun-facts-app.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=10; IE=11; IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="Dina Blaszczak">

  <title>Dina Blaszczak | Fun Facts App</title>

  <link rel="shortcut icon" href="images/icon.ico" type="image/x-icon" /><!-- Favicon -->
  <link rel="icon" href="images/icon.ico" type="image/x-icon" /><!-- Favicon -->

  <link rel="stylesheet" type="text/css" href="css/normalize.css" /><!-- reset for browsers -->
  <link rel="stylesheet" href="css/font-awesome.min.css" /><!-- mobile stylesheet -->
  <link rel="stylesheet" type="text/css" href="css/styles.min.css" /><!-- index custom stylesheet -->
  <link rel="stylesheet" type="text/css" href="css/project-styles.min.css" /><!-- project custom stylesheet -->
  <link rel="stylesheet" href="css/animations.min.css" /><!-- animations stylesheet -->

  <link rel="stylesheet" media="screen and (max-width: 1024px)" href="css/project_media_small.css" />
  <!-- project mobile stylesheet -->
  <link rel="stylesheet" media="screen and (min-width: 320px) and (max-width: 1024px) and (orientation: landscape)"
    href="css/project_media_small_landscape.css" /><!-- project mobile stylesheet -->

  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400" rel="stylesheet">

</head>

<body>
  <!-- Navigation -->
  <nav class="nav">
    <a href="index.html#header" class="nav__logo__link"><img class="nav__logo" src="images/logo.svg" alt="logo"></a>
    <span class="hamburger__name">menu</span>
    <svg width="35px" height="35px" class="nav__hamburger">
      <path d="M 5 5 L 33 5" class="hamburger"></path>
      <path d="M 5 15 L 33 15" class="hamburger"></path>
      <path d="M 5 25 L 33 25" class="hamburger"></path>
    </svg>
  </nav>
  <div class="nav-menu">
    <div class="nav-menu__cross">
      <svg width="43px" height="35px">
        <path d="M 5 5 L 30 29" class="nav-menu__cross-line"></path>
        <path d="M 5 29 L 30 5" class="nav-menu__cross-line"></path>
      </svg>
    </div>
    <ul class="nav-menu__list">
      <li class="nav-menu__list-item">
        <a href="index.html" class="nav-menu__link">Home</a>
      </li>
      <li class="nav-menu__list-item">
        <a href="index.html#about" class="nav-menu__link">About</a>
      </li>
      <li class="nav-menu__list-item">
        <a href="index.html#portfolio" class="nav-menu__link">Portfolio</a>
      </li>
      <li class="nav-menu__list-item">
        <a href="index.html#contact" class="nav-menu__link">Contact</a>
      </li>
    </ul>
    <hr class="nav-menu__separator">
    <p class="nav-menu__text">Dina Blaszczak is a front-end developer and designer based in Poland.</p>
    <p class="nav-menu__email">
      <a href="mailto:dinablaszczak@outlook.com" class="nav-menu__link--email">dinablaszczak@outlook.com</a>
    </p>
    <div class="nav-menu__social-btn">
      <a href="https://twitter.com/TheMalni" target="_blank"><span class="fa fa-twitter fa-2x"></span></a>
      <a href="https://codepen.io/themalni" target="_blank"><span class="fa fa-codepen fa-2x"></span></a>
      <a href="https://github.com/Themalni" target="_blank"><span class="fa fa-github fa-2x"></span></a>
      <a href="https://youtube.com/user/TheMalni" target="_blank"><span class="fa fa-youtube fa-2x"></span></a>
      <a href="https://www.linkedin.com/in/dina-blaszczak-5b380313a/" target="_blank"><span
          class="fa fa-linkedin-square fa-2x"></span></a>
    </div>
  </div>
  <div class="project__container">
    <!-- Header -->
    <header class="project__header">
      <h2 class="project__title project__title--white">Fun facts about coding<span
          class="contact__title__dot title__dot--white"></span></h2>
      <h3 class="project__description">Little app to display coding related facts</h3>
      <img src="images/fun_facts_1400.jpg" srcset="images/fun_facts_800.jpg 800w,
                    images/fun_facts_1200.jpg 1100w,
                    images/fun_facts_1400.jpg 1400w" sizes="(max-width: 320px) 90vw,
                   (max-width: 640px) 100vw, 60vw" class="project__header__img" alt="header image" />
      <div class="project__buttons-container">
        <a href="https://themalni.github.io/fun-facts-about-coding/" target="_blank" class="project__header__btn">Live
          Demo</a>
        <a href="https://github.com/Themalni/fun-facts-about-coding" target="_blank"
          class="project__header__btn">GitHub</a>
      </div>
    </header>
    <!-- Main -->
    <main class="project__main-container">
      <div class="project__flex">
        <!-- Project Description -->
        <div class="project__flex__item">
          <h2 class="project__flex__title">Project description</h2>
          <p class="project__flex__text">This app is a fun way to share some coding related information with those who
            only start their coding journey.</p>
        </div>
        <div class="project__flex__item">
          <h2 class="project__flex__title">Role</h2>
          <p class="project__flex__text">Design and development of the app.</p>
          <h2 class="project__flex__title">Challenge:</h2>
          <p class="project__flex__text">Making facts being displayed one after another using CSS animations and
            JavaScript array.</p>
          <h2 class="project__flex__title">Skills</h2>
          <p class="project__flex__text">
            <span class="project__flex__skill">Design</span>
            <span class="project__flex__skill">Web development</span>
            <span class="project__flex__skill">Responsive</span>
            <span class="project__flex__skill project__flex__skill--pink">HTML</span>
            <span class="project__flex__skill project__flex__skill--pink">CSS</span>
            <span class="project__flex__skill project__flex__skill--pink">JavaScript</span>
          </p>
        </div>
      </div>
      <a href="vue-career-page.html" class="project__main__btn project__main__btn--previous"><span
          class="project__main__btn__arrow">&larr;</span>Previous</a>
      <a href="character-limiter-app.html" class="project__main__btn project__main__btn--next">Next<span
          class="project__main__btn__arrow">&rarr;</span></a>
    </main>
    <!-- Footer -->
    <footer class="footer">
      <div class="footer__info__container">
        <h2 class="footer__copyright">&copy; Dina Blaszczak 2017</h2>
        <!-- footer navigation -->
        <ul class="footer-menu__list">
          <li class="footer-menu__list-item">
            <a href="index.html#about" class="footer-menu__link">About</a>
          </li>
          <li class="footer-menu__list-item">
            <a href="index.html#portfolio" class="footer-menu__link">Portfolio</a>
          </li>
          <li class="footer-menu__list-item">
            <a href="index.html#contact" class="footer-menu__link">Contact</a>
          </li>
        </ul>
        <!-- footer social buttons -->
        <div class="footer__social-btn">
          <a href="https://twitter.com/TheMalni" target="_blank"><span class="fa fa-twitter fa-2x"></span></a>
          <a href="https://codepen.io/themalni" target="_blank"><span class="fa fa-codepen fa-2x"></span></a>
          <a href="https://github.com/Themalni" target="_blank"><span class="fa fa-github fa-2x"></span></a>
          <a href="https://youtube.com/user/TheMalni" target="_blank"><span class="fa fa-youtube fa-2x"></span></a>
          <a href="https://www.linkedin.com/in/dina-blaszczak-5b380313a/" target="_blank"><span
              class="fa fa-linkedin-square fa-2x"></span></a>
        </div>
      </div>
    </footer>
  </div>

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script type="text/javascript" src="js/inert.min.js"></script><!-- inert js-->
  <script type="text/javascript" src="js/scripts.min.js"></script><!-- Custom JavaScript -->

  <script>
    (function (i, s, o, g, r, a, m) {
    i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
      (i[r].q = i[r].q || []).push(arguments)
    }, i[r].l = 1 * new Date(); a = s.createElement(o),
      m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
    })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

    ga('create', 'UA-29336846-8', 'auto');
    ga('send', 'pageview');

  </script>

</body>

</html>