index.html

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

<head>
  <meta charset="utf-8">
  <meta name="description" content="Hyperactive Panda - Portfolio of graphic designer">
  <meta name="keywords" content="hyperactive_panda, hyperactive, panda, portfolio, graphic, designer">
  <meta name="author" content="Hyperactive Panda">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Hyperactive Panda - Portfolio of graphic designer</title>
  <link rel="icon" href="img/core-img/logo.png">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <!-- Bootstrap core CSS -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <!-- Material Design Bootstrap -->
  <link href="css/mdb.min.css" rel="stylesheet">
  <!-- Your custom styles (optional) -->
  <link href="css/style.css" rel="stylesheet">
  <link href="css/parallax.css" rel="stylesheet">
  <link href="css/carousel.css" rel="stylesheet">
  <link href="css/main.css" rel="stylesheet">
  <link rel="stylesheet" href="libs/magnific-popup.css">

  <style>

    html, 
    body,
    header,
    .carousel{
      height: 100vh;
    }
    @media (max-width: 1980px){
      h1.car{
        font-size: 200%;
        }
    }
    @media (max-width: 1200px){
      .maintext{
        font-size: 120%;
      }
      h1, h1.car{
        font-size: 160%;
        }
    }

    @media (max-width: 799px){
      .parallax{
        visibility: hidden;
      }
      html, 
      body,
      header,
      .carousel{
        height: 100vh;
      }
      .container div{
        margin: 0%;
        margin-bottom: 0%;
      }
      footer{
        max-height: 100%;
      }
      h1, h1.car{
        font-size: 120%;
        }
      .maintext{
        font-size: 120%;
      }
    }


  @media (min-width: 800px) and (max-width: 850px){
    html, 
    body,
    header,
    .carousel{
      height: 100vh;
    }
    h1{
      font-size: 160%;
    }
  }
  @media (max-width: 500px){
    .parallax{
       visibility: hidden;
    }
    .maintext{
      font-size: 100%;
    }
  }
  </style>
</head>


<body>


<nav class="navbar fixed-top navbar-expand-lg navbar-dark scrolling-navbar wow fadeInUpBig">

  <div class="container">
    <a href="index.html" class="navbar-brand waves-effect">
      <img src="img/core-img/logo.png" alt="Logo" width="65" height="65">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    
    <div class="collapse navbar-collapse" id="navbarContent">
      <ul class="navbar-nav mr-auto">

        <li class="nav-item active">
          <a href="index.html" class="nav-link waves-effect" title="Home">Home</a>
        </li>

        <li class="nav-item">
          <a href="portfolio.html" class="nav-link waves-effect" title="Portfolio">Portfolio</a>
        </li>

        <li class="nav-item">
          <a href="about.html" class="nav-link waves-effect" title="About">About</a>
        </li>

        <li class="nav-item">
          <a href="contact.html" class="nav-link waves-effect" title="Contact">Contact</a>
        </li>

    </ul>
  </div>
  
    <ul class="navbar-nav nav-flex-icons">

      <li class="nav-item">
        <a href="https://www.instagram.com/_hyperactive_panda/?hl=ru" class="nav-link waves-effect" title="Instagram">
          <i class="fa fa-instagram"></i>
        </a>
      </li>

      <li class="nav-item">
        <a href="https://vk.com/id136692936" class="nav-link waves-effect" title="VK">
          <i class="fa fa-vk"></i>
        </a>
      </li>

      <li class="nav-item">
        <a href="https://www.facebook.com/profile.php?id=100030594551419" class="nav-link waves-effect" title="Facebook">
          <i class="fa fa-facebook"></i>
        </a>
      </li>

    </ul>
  </div>

</nav>


<div id="carousel-ex" class="carousel slide carousel-fade mask rgba-black-strong wow fadeInDown" data-ride="carousel">

  <ol class="carousel-indicators">
    <li class="active" data-target="#carousel-ex" data-slide-to="0"></li>
    <li data-target="#carousel-ex" data-slide-to="1"></li>
    <li data-target="#carousel-ex" data-slide-to="2"></li>
    <li data-target="#carousel-ex" data-slide-to="3"></li>
  </ol>

  <div class="carousel-inner" role="listbox">

    <div class="carousel-item active">
      <div class="view" style="background-image: url('img/bg-img/carousel-horizontal/3.jpg'); background-repeat: no-repeat; 
      background-size: cover; background-position: center center;">
        <div class="mask rgba-black-strong d-flex justify-content-center align-items-center">
          <div class="text-center white-text mx-5 wow fadeIn">
            <h1 class="car mb-1 ml-5 mr-5">
              <strong class="b">&laquo;Make it simple, but significant&raquo; &mdash; Don Draper</strong>
            </h1>
          </div>
        </div>
      </div>
    </div>

    <div class="carousel-item">
      <div class="view" style="background-image: url('img/bg-img/carousel-horizontal/4.jpg'); background-repeat: no-repeat; 
      background-size: cover; background-position: center center;">
        <div class="mask rgba-black-strong d-flex justify-content-center align-items-center">
          <div class="text-center white-text mx-5 wow fadeIn">
            <h1 class="car mb-1 ml-5 mr-5">
              <strong class="b">&laquo;Digital design is like painting, except the paint never dries&raquo; &mdash; Neville Brody</strong>
            </h1>
          </div>
        </div>
      </div>
    </div>

    <div class="carousel-item">
      <div class="view" style="background-image: url('img/bg-img/carousel-horizontal/7.jpg'); background-repeat: no-repeat; 
      background-size: cover; background-position: center center;">
        <div class="mask rgba-black-strong d-flex justify-content-center align-items-center">
          <div class="text-center white-text mx-5 wow fadeIn">
            <h1 class="car mb-1 ml-5 mr-5">
              <strong class="b">&laquo;Graphic design will save the world right after rock and roll does&raquo; &mdash; David Carson</strong>
            </h1>
          </div>
        </div>
      </div>
    </div>

    <div class="carousel-item">
      <div class="view" style="background-image: url('img/bg-img/carousel-horizontal/1.jpg'); background-repeat: no-repeat; 
      background-size: cover; background-position: center center;">
        <div class="mask rgba-black-strong d-flex justify-content-center align-items-center">
          <div class="text-center white-text mx-5 wow fadeIn">
            <h1 class="car mb-1 ml-5 mr-5">
              <strong class="b">&laquo;Creativity is nothing but the way to solve new problems&raquo;</strong>
            </h1>
          </div>
        </div>
      </div>
    </div>

  </div>

    <a href="#carousel-ex" class="carousel-control-prev" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    </a>
    <a href="#carousel-ex" class="carousel-control-next" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
    </a>
</div>


<main class="pb-2 dark-grey-text">

  <div class="container p-4 pt-5">

    <div class="row wow justify-content-center">

      <div class="col-md-5 p-2 text-center">
          <p class="maintext wow fadeInRight">There is only one salvation from the exhausting effects of an endless project: break your routine and do something pretty. 
            Coming up with something new every day can be as beneficial for the creative mind as fruit and vegetables are for bodily health.
            Long-term projects consisting of endless stages, replete with revisions made and brainstorming, can very quickly degrade into inedible decisions and meaningless theorizing. 
            Sometimes a large tablespoon of thick, unrefined creativity can be an excellent remedy to get out of a dead stupor. 
            Creating beautiful things in the order of daily training, you are able to create an archive of small simple ideas that may then grow to a full-fledged project. 
            When you create something magnificent, it does not bring pain and gives satisfaction. 
            Water your mind in little joys and let them remind you of those notepad pages that for the first time brought you a happy and led to graphic design.</p>
      </div>
               
      <div class="col-md-7 wow fadeInRightBig">
            <div class="parallax" id="hero">
                <div class="parallax-option" data-jkit="[parallax:strength=0.8;axis=both]">
                  <div class="parallax-item-1">
                    <img src="img/bg-img/business-card-21.png" class="img-fluid" alt="Animated business cards" >
                  </div>
                </div>
                <div class="parallax-option" data-jkit="[parallax:strength=0.3;axis=both]">
                  <div class="parallax-item-2">
                    <img src="img/bg-img/business-card.png" class="img-fluid" alt="Animated business cards">
                  </div>
                </div>
            </div>
      </div>

    </div>

  </div>

</main>



<footer class="page-footer text-center font-small wow fadeIn">

  <div class="pt-2">
    <a role="button" class="btn btn-outline-white waves-effect scrollup">
      <img src="img/core-img/logo.png" alt="Logo" width="40" height="40">
    </a>
  </div>

  <hr class="my-3">

  <div class="pb-2">

    <a href="https://www.instagram.com/_hyperactive_panda/" class="waves-effect" title="Instagram">
      <i class="fa fa-instagram mr-3"></i>
    </a>

    <a href="https://twitter.com/Blue_Exorcist__" class="waves-effect" title="Twitter">
      <i class="fa fa-twitter mr-3"></i>
    </a>

    <a href="https://www.facebook.com/profile.php?id=100030594551419" class="waves-effect" title="Facebook">
      <i class="fa fa-facebook mr-3"></i>
    </a>

    <a href="https://vk.com/id136692936" class="waves-effect" title="VK">
        <i class="fa fa-vk mr-3"></i>
      </a>
  
    <a href="https://www.youtube.com/channel/UCf6QUdAQisu4OgrwbZxn25g" class="waves-effect" title="Youtube">
      <i class="fa fa-youtube mr-3"></i>
    </a>
  
    <a href="https://www.pinterest.com/hyperactivepanda2000/" class="waves-effect" title="Pinterest">
      <i class="fa fa-pinterest mr-3"></i>
    </a>

  </div>

  <div class="footer-copyright py-1">
    Hyperactive Panda &copy; 2019
  </div>

</footer>



  <!-- SCRIPTS -->
  <!-- JQuery -->

  <script src="js/jquery-3.3.1.min.js"></script>
  <!-- Bootstrap tooltips -->
  <script src="js/popper.min.js"></script>
  <!-- Bootstrap core JavaScript -->
  <script src="js/bootstrap.min.js"></script>
  <!-- MDB core JavaScript -->
  <script src="js/mdb.min.js"></script>

  
  <script src="js/script.js"></script>
  <script src="js/js/jquery.waitforimages.js"></script>   
  <script src="js/js/jquery.jkit.1.2.16.min.js"></script>
  <script src="libs/jquery.magnific-popup.min.js"></script>
  <script src="js/jquery.bootstrap-autohidingnavbar.min.js"></script>
  
  <script> 
    new WOW().init();
  </script>
</body>

</html>