<!DOCTYPE html>
<html>
<head>
  <!-- set the encoding of your site -->
  <meta charset="utf-8">
  <!-- set the viewport width and initial-scale on mobile devices  -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HitShop</title>
  <!-- include the site stylesheet -->
  <link media="all" rel="stylesheet" href="css/main.css">
</head>
<body>
  <!-- main container of all the page elements -->
  <div id="wrapper">
    <div class="top-section">
      <!-- header of the page -->
      <header id="header">
        <div class="container">
        <!-- logo of the page -->
          <div class="logo">
            <a href="#"><img src="images/logo.png" height="45" width="177" alt="hitshop"></a>
          </div>
        </div>
      </header>
      <div class="banner">
        <div class="container">
          <h1>Find Traction &amp; Scale Growth</h1>
          <span class="sub-title">with Done-For-You Growth Marketing Starting at Just $499 a Month</span>
        </div>
        <div class="bg-img" style="background-image: url(images/img01.png)">
          <img src="images/img01.png" height="828" width="1600" alt="image description">
        </div>
        <span class="btn-check"></span>
      </div>
    </div>
    <!-- contain main informative part of the site -->
    <main id="main">
      <div class="container">
        <!-- The different ways-->
        <div class="features">
          <div class="two-columns">
            <div class="col">
              <div class="img-block">
                <img src="images/img02.svg" width="196" height="270" alt="image description">
              </div>
              <div class="col-holder">
                <h2>The Old Way</h2>
                <p>Finding effective marketing help can be a huge hassle and full of risks for early-stage businesses. Options <strong class="italic">were</strong> few: hire a freelancer, agency, or in-house marketer.</p>
              </div>
              <div class="icon-block"><span class="icon icon-cross"></span></div>
              <!-- list of the old ways -->
              <ul class="list">
                <li>
                  <div class="wrap">
                    <div class="icon-holder">
                      <img src="images/icon-list.svg" width="28" height="24" alt="image description">
                    </div>
                    <span class="text-holder">Writing and posting job listings</span>
                  </div>
                </li>
                <li>
                  <div class="wrap">
                    <div class="icon-holder">
                      <img src="images/icon-profile.svg" width="32" height="45" alt="image description">
                    </div>
                    <span class="text-holder">Browsing candidate profiles</span>
                  </div>
                </li>
                <li>
                  <div class="wrap">
                    <div class="icon-holder">
                      <img src="images/icon-interview.svg" width="40" height="32" alt="image description">
                    </div>
                    <span class="text-holder">Interviewing candidates</span>
                  </div>
                </li>
                <li>
                  <div class="wrap">
                    <div class="icon-holder">
                      <img src="images/icon-timevalue.svg" width="40" height="36" alt="image description">
                    </div>
                    <span class="text-holder">Lengthy time-to-value</span>
                  </div>
                </li>
                <li>
                  <div class="wrap">
                    <div class="icon-holder">
                      <img src="images/icon-moneybundle.svg" width="40" height="32" alt="image description">
                    </div>
                    <span class="text-holder">$2,000-$12,000 a month</span>
                  </div>
                </li>
                <li>
                  <div class="wrap">
                    <div class="icon-holder">
                      <img src="images/icon-loss.svg" width="40" height="45" alt="image description">
                    </div>
                    <span class="text-holder">Lots of time, $$$, and risk</span>
                  </div>
                </li>
              </ul>
            </div>
            <div class="col green-block">
              <div class="img-block">
                <img src="images/img03.svg" width="196" height="270" alt="image description">
              </div>
              <div class="col-holder">
                <h2>The Hitshop Way</h2>
                <p>A dedicated <strong class="italic">Growth Marketing Manager</strong> trained on proven lean marketing processes, equipped with industry-leading tools, offering full visibility on performance.</p>
              </div>
              <div class="icon-block"><span class="icon icon-check"></span></div>
              <!-- list of the new ways -->
              <ul class="list">
                <li>
                  <div class="wrap">
                    <div class="icon-holder">
                      <img src="images/icon-getstarted.svg" width="30" height="52" alt="image description">
                    </div>
                    <span class="text-holder">Get started in minutes</span>
                  </div>
                </li>
                <li>
                  <div class="wrap">
                    <div class="icon-holder">
                      <img src="images/icon-contract.svg" width="40" height="40" alt="image description">
                    </div>
                    <span class="text-holder">No hiring hassles or long-term contracts</span>
                  </div>
                </li>
                <li>
                  <div class="wrap">
                    <div class="icon-holder">
                      <img src="images/icon-growth.svg" width="50" height="40" alt="image description">
                    </div>
                    <span class="text-holder">A dedicated Growth Marketing Manager</span>
                  </div>
                </li>
                <li>
                  <div class="wrap">
                    <div class="icon-holder">
                      <img src="images/icon-performance.svg" width="40" height="35" alt="image description">
                    </div>
                    <span class="text-holder">Performance tracked on a dashboard</span>
                  </div>
                </li>
                <li>
                  <div class="wrap">
                    <div class="icon-holder">
                      <img src="images/icon-money.svg" width="47" height="36" alt="image description">
                    </div>
                    <span class="text-holder">Starting at just $499 a month</span>
                  </div>
                </li>
                <li>
                  <div class="wrap">
                    <div class="icon-holder">
                      <img src="images/icon-guarantee.svg" width="32" height="45" alt="image description">
                    </div>
                    <span class="text-holder">100% money-back guarantee</span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- channel block -->
      <section class="channel-block">
        <div class="container">
          <div class="heading-holder">
            <h2>Let us test, validate, and scale growth channels for you...</h2>
            <span class="sub-title">...so you can focus on building remarkable product and customer relationships.</span>
          </div>
          <div class="two-columns">
            <div class="text-holder">
              <h3 class="h3">Get to know what works</h3>
              <p>Hire Hitshop to test one channel or multiple. We’ll review performance together every two weeks, and adjust strategy as we go.</p>
            </div>
            <div class="list-holder">
              <!-- strategy lists -->
              <ul class="strategy-list">
                <li>
                  <div class="strategy-holder">
                    <div class="wrap">
                      <div class="icon-holder">
                        <img src="images/icon-socialmedia.svg" width="55" height="32" alt="image description">
                      </div>
                      <strong class="title">Social Media</strong>
                    </div>
                  </div>
                </li>
                <li class="optimization">
                  <div class="strategy-holder">
                    <div class="wrap">
                      <div class="icon-holder">
                        <img src="images/icon-optimization.svg" width="44" height="36" alt="image description">
                      </div>
                      <strong class="title">Conversion Optimization</strong>
                    </div>
                  </div>
                </li>
                <li class="content disable">
                  <div class="strategy-holder">
                    <div class="wrap">
                      <div class="icon-holder">
                        <img src="images/icon-content.svg" width="40" height="36" alt="image description">
                      </div>
                      <strong class="title">Content</strong>
                    </div>
                    <span class="msg">coming soon</span>
                  </div>
                </li>
                <li class="email disable">
                  <div class="strategy-holder">
                    <div class="wrap">
                      <div class="icon-holder">
                        <img src="images/icon-email.svg" width="32" height="34" alt="image description">
                      </div>
                      <strong class="title">Email</strong>
                    </div>
                    <span class="msg">coming soon</span>
                  </div>
                </li>
                <li class="analytics disable">
                  <div class="strategy-holder">
                    <div class="wrap">
                      <div class="icon-holder">
                        <img src="images/icon-analytics.svg" width="43" height="36" alt="image description">
                      </div>
                      <strong class="title">Analytics Setup &mp; Reporting</strong>
                    </div>
                    <span class="msg">coming soon</span>
                  </div>
                </li>
                <li class="advertising disable">
                  <div class="strategy-holder">
                    <div class="wrap">
                      <div class="icon-holder">
                        <img src="images/icon-advertising.svg" width="39" height="30" alt="image description">
                      </div>
                      <strong class="title">paid Advertising</strong>
                    </div>
                    <span class="msg">coming soon</span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div class="two-columns">
            <div class="text-holder">
              <h3 class="h3">Save time and money</h3>
              <p>Scale up growth channels only after they are proven to work, and at a fraction of the cost of hiring elsewhere.</p>
            </div>
            <div class="list-holder feature-wrap">
              <!-- feature list -->
              <ul class="feature-list">
                <li>
                  <div class="featurelist-holder">
                    <div class="wrap">
                      <span class="desc">$499 <em>/mo</em></span>
                      <span class="text">PER CHANNEL</span>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="featurelist-holder">
                    <div class="wrap">
                      <span class="desc">Month <em>to</em><br>Month</span>
                      <span class="text">CANCEL ANYTIME</span>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="featurelist-holder">
                    <div class="wrap">
                      <span class="desc">100% <em>NO-RISK</em></span><span class="text">MONEY-BACK GUARANTEE</span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>
      <section class="session-block">
        <div class="container">
          <div class="session-holder">
            <h3>Get started now with a free growth strategy session.</h3>
            <p>Chat with a Hitshop growth marketing strategist now to get instant feedback on your growth strategy and learn how Hitshop can help.</p>
            <!-- Start free Strategy session button -->
            <div class="btn-holder">
              <a href="#" class="btn-start">START FREE STRATEGY SESSION</a>
            </div>
          </div>
          <div class="img-holder">
            <img src="images/img04.png" height="425" width="550" alt="image description">
          </div>
        </div>
      </section>
    </main>
    <!-- footer of the page -->
    <footer id="footer">
      <div class="container">
        <!-- social Networks -->
        <ul class="social-networks">
          <li><a href="https://facebook.com/hitshophq"><span class="icon-facebook"></span></a></li>
          <li><a href=" https://twitter.com/hitshophq"><span class="icon-twitter"></span></a></li>
          <li><a href="https://angel.co/hitshop" class="follow"><span class="icon-peace"></span>Follow Hitshop</a></li>
        </ul>
        <span class="copyright"><!-- <a href="#" class="terms">Terms</a> --> &copy; <a href="#">Hitshop</a>, 2016.</span>
        <span class="address">Based in San Francisco</span>
      </div>
    </footer>
  </div>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" defer></script>
  <script>window.jQuery || document.write('<script src="js/jquery-1.11.2.min.js" defer><\/script>')</script>
  <script src="js/jquery.main.js" defer></script>
</body>
</html>