Product page home

index.html

<div class="main">
  <header id="header" class="header">
    <div class="logo">
      <img id="header-img" src="https://2rbfd03pmmcu3pkvqf1xl71z-wpengine.netdna-ssl.com/wp-content/uploads/2017/01/logo.png" alt="CW logo"> <span>courseWare</span>
    </div>
    
    <nav id="nav-bar">
      <ul>
        <li>
          <a class="nav-link" href="#courses">Courses</a>
        </li>
        <li>
          <a class="nav-link" href="#pricing">Pricing</a>
        </li>
        <li>
          <a class="nav-link" href="#devops">DevOps</a>
        </li>
        <li>
          <a class="nav-link" href="#contact">Contact</a>
        </li>
      </ul>
    </nav>
  </header>
  
  <section class="hero">
    <h3>Course Ware</h3>
    <p>unlimited learning</p>
  </section>
  
  <section class="course" id="courses">
    <div class="cards">
      <div class="img_wrapper img-1"></div>
      <div class="info_wrapper">
        <h3>FrontEnd Developement</h3>
        <p>Get the basics of frontend web development and more, we take you deep into the design process, responsive rendering and much more</p>
        <div class="btn_wrapper">
          <button class="btn">Take Course</button>
        </div>
      </div>
    </div>
    <div class="cards">
      <div class="img_wrapper img-2"></div>
      <div class="info_wrapper">
        <h3>BackEnd Developement</h3>
        <p>Wake to the world of backend development, query database, validate forms, dynamic page rendering and server communications.</p>
        <div class="btn_wrapper">
          <button class="btn">Take Course</button>
        </div>
      </div>
    </div>
    <div class="cards">
      <div class="img_wrapper img-3"></div>
      <div class="info_wrapper">
        <h3>Dev Ops</h3>
        <p>Get detail lectures and hands-on practice with our devops courseware as we take you through the devops cycle. Everything you need to know is here.</p>
        <div class="btn_wrapper">
          <button class="btn">Take Course</button>
        </div>
      </div>
    </div>
  </section>
  
  <section class="pricing" id="pricing">
    <div class="cards">
      <div class="img_wrapper img-1_price small"></div>
      <div class="info_wrapper">
        <h2>FrontEnd</h2>
        <h3>$200.00</h3>
        <p>Exclusive packages inclusive and slack channel access</p>
        <div class="btn_wrapper">
          <button class="btn">Buy</button>
        </div>
      </div>
    </div>
    <div class="cards">
      <div class="img_wrapper img-2_price small"></div>
      <div class="info_wrapper">
        <h2>BackEnd</h2>
        <h3>$560.00</h3>
        <p>Exclusive packages inclusive + Mentorship premium package</p>
        <div class="btn_wrapper">
          <button class="btn">Buy</button>
        </div>
      </div>
    </div>
    <div class="cards">
      <div class="img_wrapper img-3_price small"></div>
      <div class="info_wrapper">
        <h2>DevOps</h2>
        <h3>$1000.00</h3>
        <p>Exclusive packages inclusive + Mentorship + Open-Source Projects</p>
        <div class="btn_wrapper">
          <button class="btn">Buy</button>
        </div>
      </div>
    </div>
  </section>
  
  <section class="sample-video" id="devops">
    <iframe id="video" width="560" height="315" src="https://www.youtube-nocookie.com/embed/Kyx2PsuwomE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    <div class="info">
      <p>Ready to start your <span>DevOps</span> journey?</p>
      <p><button class="btn">Get Course</button></p>
    </div>
  </section>
  
  <section class="contact_us" id="contact">
    <h3>Get in touch with us</h3>
    <form action="https://www.freecodecamp.com/email-submit" id="form">
      <input type="text" required name="name" placeholder="John Doe">
      <input type="email" id="email" required name="email" placeholder="[email protected]">
      <textarea name="textarea" id="textarea" placeholder="Enter your message"></textarea>
      <input type="submit" id="submit" class="submit" href="https://www.freecodecamp.com/email-submit">
    </form>
  </section>
  
  <footer>
    Designed by <span class="footer_info"> Fayvor George</span>. Copyright&copy; 2018
  </footer>
</div>