<body>
    <header id="header">
      <img id="header-img" src="https://drive.google.com/uc?export=view&id=1Q0BhKqeQmGJ4P9VjPD0Y0CZEHh-qyG8m">
          <h1>Top Websites</h1>
      <nav id="nav-bar">
        
          
        
        <ul class="nav-links">
         <li><a class="nav-link" href="#about">About</a></li>
         <li><a class="nav-link" href="#features">Features</a></li>
         <li><a class="nav-link" href="#pricing">Pricing</a></li>
      </nav>
    </header>
    
    <div class="section" id="about">
      <h2 class="section-title"> About</h2>
      <div class="bullet">
        <span class="icon"><i class="fa fa-2x fa-signal" aria-hidden="true"></i></span>
        <h3> Industry leading</h3>
        <p>Top Websites is the indsustry leading website maker. Our websites offer the greatest visibility and they are a surefire way to stand out and elevate your business to another level.</p>
      </div>
      
      <div class="bullet">
        <span class="icon"><i class="fa fa-2x fa-users" aria-hidden="true"></i></span>
        <h3> Millions of users</h3>
        <p> We aren't just talk either. Our products are used by hundreds of clients and over ten million users.</p>
      </div>
      
      <div class="bullet">
        <span class="icon"><i class="fa fa-2x fa-smile" aria-hidden="true"></i></span>
        <h3>Happy customers</h3>
        <p>Our customers are one of the happiest on the market and we are proud of it. We offer a 30 day money back guarantee so you can try us out without risk.</p>
      </div>
       
      <div class="bullet">
        <span class="icon"><i class="fa fa-2x fa-heart" aria-hidden="true"></i></span>
        <h3> On your side</h3>
        <p> We know that making a website isn't easy. Thats why we offer the best product for everything related to making your very own website. If it feels like too much, don't worry, we are always happy to help.</p>
      </div>
      

    </div>
    
   <div class="section form-section">
     <h2 class="section-title"> Get started with the best in the industry </h2>
   <form id="form" action="https://www.freecodecamp.com/email-submit">
     <input 
        name="email"
        id="email"
        type="email"
        placeholder="Please enter your email for more information"
        required
      />
     <input id="submit" type="submit" value="Go!" class="btn" />
     </form>
   </div>
      
<!-- VIDEO START-->
    <div class="section video-section">
    
      <iframe id="video" height="315" src="https://www.youtube.com/embed/2Uj1A9AguFs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
      
<!-- FEATURES START-->
    <div class="section" id="features">
      <h2 class="section-title">Features</h2>
      <div class="features">
      <div class="features-desc standard">
        <h3 class="feature-title"> Standard </h3>
        <ul class="features-ul">
          <li> Our experts help you design the page </li>
          <li> One domain name included </li>
          <li> WordPress tips and videos for website and logo design</li>
          <li> Access to thousands of free WordPress themes and plugins</li>
          <li> 24/7 customer support</li>
        </ul>
      </div>
      
      <div class="features-desc premium">
        <h3 class="feature-title"> Premium </h3>
        <ul class="features-ul">
          <li> All benefits from Standard</li>
          <li> Our experts design the best page for you </li>
          <li> Fully customised website for your business </li>
          <li> SEO tools and effective optimization for guaranteed traffic </li>
          <li> Premium quality WordPress themes only for our customers</li>
          <li> Your personal support technician</li>
        </ul>
      </div>
      </div>
      </div>
      
<!-- PRICING START-->
      <div class="section pricing-section" id="pricing">
        <h2 class="section-title"> Pricing</h2>
        <div class="pricing-table">
          <div class="pricing-table-title">
          <h4>Standard</h4>
          </div>
          <div class="pricing-table-price">
            <p>599€</p>
          </div>
          <input id="submit" type="submit" value="Select" class="btn select-btn" />
        </div>
        <div class="pricing-table">
          <div class="pricing-table-title">
            <h4>Premium</h4>
          </div>
          <div class="pricing-table-price">
            <p>899€</p>
          </div>
          <input id="submit" type="submit" value="Select" class="btn select-btn" />
          
        </div>
      </div>
      
      <div id="footer">
        <p>Made by <a href="https://arttupyykonen.com/">Arttu</p>
      </div>
       
  </body>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
@import "https://fonts.googleapis.com/css?family=Lato:400,700";

body
{
  background-color: #eee;
  font-family: 'Lato', sans-serif;
  margin: 0; 
}

header {
  display: flex;
  position: fixed;
  width: 100%;
  top: 0; 
  background-color: #eee;
  height: 5em;
}

#header-img {
  height: 100%;
}

header h1 {
  font-size: 2em;
}

@media (max-width: 900px){
  header h1 {
  font-size: 1.5em;
}
  #header-img {
  height: 60%;
}
}

@media (max-width: 600px){
  header {
    flex-wrap: wrap;
    height: 3em;
  }
  header h1 {
  font-size: 1em;
}
  #header-img {
  height: 100%;
}
}

.nav-links li a{
  text-decoration: none;
}

nav > ul {
  width: 55vw;
  list-style-type: none;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.section {
  width: 60%;
  margin: auto;
  padding: 3em 0 0 0;
  font-size: 1.1em;
}

@media (max-width: 650px){
  .section {
    width: 100%;
  }
  .features {
  width: 100%;
}
}

.section-title {
  text-align: center;
}

.bullet{
  justify-content: center;
  padding: 1em 1em 0em 1em;
}

.icon {
  align-items: center;
  justify-content: center;
  color: #309AD9;
  padding-right: 10px;
}

.bullet h3 {
  display: inline-block;
}

.bullet p {
  line-height: 1.5;
}

.form-section {
  text-align: center;
}

.btn{
  border-radius: 0;
  border-width: 1px;
  width: 50px;
  height: 25px;
}

.select-btn {
  background-color: #2a9df4;
  width: auto;
}


.video-section {
  display: flex;
  justify-content: center;
  padding-top: 4em;
}
  .video-section iframe {
  max-width: 560px;
  width: 100%;
}

.features {
  display: flex;
  width: 100%;
}
@media (max-width: 1000px){
  .features {
  width: 150%;
  margin-left: -25%;
}
}

@media (max-width: 650px){
  .features {
  flex-direction: column;
  }
}

.features-desc {
  line-height: 1.5em;
  width: 45%;
  margin: 0 auto;
}

.feature-title {
  text-align: center;
}

.features-ul li{
  margin-bottom: 0.5em;
  text-align: justify;
}


.pricing-section {
  text-align: center;
}

.pricing-table {
  display: inline-block;
  width: 40%;
  height: 10em;
  border: 1px solid #2a9df4;
  margin-bottom: 0.5em;
}

@media (max-width: 650px){
  .pricing-table{
    width: 75%;
  }
}

.pricing-table-title{
  background-color: #2a9df4;
  padding: 0.1em
    
}

.pricing-table-price {
  font-weight: 900;
  he
}



#footer {
  text-align: center;
  margin-bottom: -1em;
  margin-top: 2em;
  font-size: 0.8em;
  background-color: #BEBEBE;
  padding: 3px;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.