Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html>  
<html lang="en">
<title>Landing Page</title>
  </head>
  <body>
    <header id="header">
      <img
        id="header-img"
        class="logo"
        src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTsmPt5l81ptb4pO5Y5vco2HS_XGzJnLxB-nw&usqp=CAU"
        alt="logo image"
        width="100"
        height="100"
      />
      <nav id="nav-bar">
        <ul class="nav-links">
          <li><a class="nav-link" href="#main-content">Our Mission</a></li>
          <li><a class="nav-link" href="#hosting-plans">Hosting Plans</a></li>
          <li><a class="nav-link" href="#subscribe-section">Subscribe</a></li>
        </ul>
      </nav>

      <a class="button" href="mailto:enquiries@webhosting.com">Contact</a>  
      
    </header>
    
    <!-- IMAGE -->

    <div id="main-image">
      <img
        class="computer-image"
        src="https://www.interserver.net/webhosting/web/images/welcome.png"
        alt="generic description"
      />
    </div>

    <!-- MAIN -->
    
    <section id="main-content" class="container">
      <div class="featured-wrapper">
        <div class="featured-text">
          <h3>Our Mission</h3>
          <p>
            Our main goal is to provide our customers, small and     large, with the
            highest level of service and support, managed by a team of
            professionals each with over 20 years of experience in the industry.
          </p>
        </div>
      </div>
    </section>
   
    
<!--     LIST ITEMS -->
    
    <div class="list">
      <ul>
        <li>24/7 Support</li>
        <li>Unlimited bandwidth</li>
        <li>Ecofriendly data centres</li>
        <li>Advanced security features</li>
        <li>Server pooling technology</li>
      </ul>
    </div>
   

    <!-- VIDEO -->
    
    <section id="video-section">
      <iframe
        id="video"
        width="565"
        height="321"
        src="https://www.youtube.com/embed/XZmGGAbHqa0"
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen
      ></iframe>
    </section>

    <!-- PRICING BOXES -->

    <section id="hosting-plans">
      <div class="container">
        <div class="heading">
          <h1>Hosting Plans</h1>
        </div>
        <div class="row">
          <div class="card">
            <div class="card-header">
              <h1>BASIC</h1>
            </div>
            <div class="card-body">
              <h3>£9.99 MONTHLY</h3>
              <br />
              <hr />
              <br />
              <ul>
                <li>WEB HOSTING</li>
                <li>DOMAIN REGISTRATION</li>
                <li>BASIC SEO</li>
                <li>RESPONSIVE DESIGN</li>
                <li>ONLINE CONTACT FORM</li>
                <li>SOCIAL MEDIA INTEGRATION</li>
                <li>LANDING PAGE TEMPLATE</li>
              </ul>
              <a href="#" class="btn">Read more</a>
            </div>
          </div>
          <div class="card">
            <div class="card-header">
              <h1>STANDARD</h1>
            </div>
            <div class="card-body">
              <h3>£19.99 MONTHLY</h3>
              <br />
              <hr />
              <br />
              <ul>
                <li>WEB HOSTING</li>
                <li>DOMAIN REGISTRATION</li>
                <li>ADVANCED SEO</li>
                <li>RESPONSIVE DESIGN</li>
                <li>ONLINE CONTACT FORM</li>
                <li>SOCIAL MEDIA INTEGRATION</li>
                <li>UP TO 5 PAGES</li>
                <li>PHOTO GALLERY</li>
                <li>IMAGE OPTIMISATION</li>
              </ul>
              <a href="#" class="btn">Read more</a>
            </div>
          </div>
          <div class="card">
            <div class="card-header">
              <h1>E-COMMERCE</h1>
            </div>
            <div class="card-body">
              <h3>£39.99 MONTHLY</h3>
              <br />
              <hr />
              <br />
              <ul>
                <li>WEB HOSTING</li>
                <li>DOMAIN REGISTRATION</li>
                <li>BASIC SEO</li>
                <li>RESPONSIVE DESIGN</li>
                <li>ONLINE CONTACT FORM</li>
                <li>SOCIAL MEDIA INTEGRATION</li>
                <li>LANDING PAGE TEMPLATE</li>
                <li>IMAGE OPTIMISATION</li>
                <li>PHOTO GALLERY</li>
                <li>ECOMMERCE FUNCTIONALITY</li>
                <li>UP TO 5 EMAILS</li>
              </ul>
              <a href="#" class="btn">Read more</a>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- SUBSCRIBE -->
    <section id="subscribe-section">
      <div class="subscribe-box">
        <div class="subscribe">
          <form
            id="form"
            action="https://www.freecodecamp.com/email-submit"
          >
            <h2>Subscribe to our newsletter</h2>
            <div class="form-control">
              <label for="email">Email</label>
              <input type="email" name="email" id="email" placeholder="Enter email" />
            </div>
            <input
              type="submit"
              id="submit"
              class="submit-button"
              value="Submit"
            />
          </form>
        </div>
      </div>
    </section>
    <hr />

    <!-- FOOTER -->

    <footer>
      <div class="footer-copyright">
        <p>Copyright Web Hosting 2020</p>
      </div>
    </footer>

    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js">
 </script>
  
  </body>
</html>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');

* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  background-color: white;
}

/* HEADER */

li,
a,
button {
  font-family: 'Poppins', Sans-Serif;
  font-weight: 500;
  font-size: 16px;
  color: black;
  text-decoration: none;
}

header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  padding: 10px 10%;
  background-color: white;
  position: fixed;
}

.logo {
  cursor: pointer;
  margin-left: 5px;
}

.nav-links {
  list-style: none;
}

.nav-links li {
  display: inline-block;
  padding: 0px 20px;
}

.nav-links li a {
  transition: all 0.3s ease 0s;
  padding: 0px 40px;
  align-items: center;
}

.nav-links li a a:hover {
  transition: all 0.3s ease 0s;
  color: #0088a9;
}

.button {
  padding: 9px 25px;
  background-color: #ff2d9b;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease 0s;
  margin-right: 5px;
}

button:hover {
  background-color: #6460f5;
}

nav#nav-bar ul {
  display: flex;
  margin-right: 100px;
}

nav#nav-bar ul li {
  /* margin-left: 2rem; */
  margin: 0;
  padding: 0;
  display: flex;
}

/* IMAGE */

.computer-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-top: 150px;
}

.lorem-text {
  text-align: center;
}

/* OUR MISSION */

.featured-wrapper {
  padding-top: 80px;
  font-family: 'Poppins', Sans-Serif;
  text-align: center;
  width: 60%;
  margin: auto;
  text-decoration: none;
}

/* LIST ITEMS */

.list li {
  font-family: "Roboto", Sans-Serif;
  color: #163C7B;
  text-align: center;
  line-height: 36px;
}

/* VIDEO */

#video-section {
  text-align: center;
  padding-top: 80px;
  padding-bottom: 50px;
}

/* PRICING BOXES */

.heading h1 {
  font-family: 'Poppins', Sans-Serif;
  color: rgba(0, 0, 0, 0.76);
  padding-bottom: 50px;
}

.card-header h1 {
  color: #6460f5;
  font-family: 'Poppins', Sans-Serif;
}

.card-body {
  font-family: 'Poppins', Sans-Serif;
}

.card-body li {
  list-style-type: none;
}

.container {
  width: 80%;
  margin: 50px auto;
}
.heading {
  text-align: center;
  font-size: 30px;
  margin-bottom: 50px;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-flow: wrap;
}

.card {
  width: 20%;
  background: #fff;
  border: 3px solid #ff2d9b;
  margin-bottom: 50px;
  transition: 0.3s;
}

.card-header {
  text-align: center;
  padding: 50px 10px;
  background: linear-gradient(#6460f5, #fe2c9a);
  color: #fff;
}

.card-body {
  padding: 30px 20px;
  text-align: center;
  font-size: 18px;
}

.card-body .btn {
  display: block;
  color: #fff;
  text-align: center;
  background: linear-gradient(#6460f5, #fe2c9a);
  margin-top: 30px;
  text-decoration: none;
  padding: 10px 5px;
}

@media screen and (max-width: 1050px) {
  .card {
    width: 40%;
  }
}

@media (max-width: 870px) {
  header {
    display: block; 
    text-align: center;
    
  }
  
  .nav-links li a {
    display: block;
   
    padding-bottom: 20px;
   
  }
  

  
  .logo {
    margin: 10px 0;
  }
  
  .computer-image {
    padding-top: 220px;
  }
  
  .featured-wrapper {
    padding-top: 10px;
  }
}



@media screen and (max-width: 620px) {
  .container {
    width: 100%;
  }

  .heading {
    padding: 20px;
    font-size: 20px;
  }

  .card {
    width: 80%;
  }
}

/* SUBSCRIBE */

.subscribe {
  background-color: white;
   font-family: 'Poppins', Sans-Serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 50px;
  margin: auto;
}

.form-control {
  padding: 20px;
}

.subscribe-box {
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  width: 500px;
  height: 300px;
  margin-bottom: 50px;
}

.form-control label {
  color: black;
  display: block;
  margin-bottom: 5px;
}

.form-control input {
  border: 2px solid #fe2c9a;
  border-radius: 4px;
  display: block;
  width: 100%;
  padding: 10px;
  font-size: 14px;
}

.submit-button {
  border: 2px solid #6460f5;
  border-radius: 4px;
  display: block;
  width: 100%;
  padding: 10px;
  font-size: 14px;
  color: white;
  background-color: #fe2c9a;
  font-family: 'Poppins', Sans-Serif;
}

/* FOOTER */

footer {
  background: #6460f5;
  text-align: center;
  padding: 1rem 0.5rem;
}

footer p {
  background: #6460f5;
  color: white;
  font-family: 'Poppins', Sans-Serif;
}

              
            
!

JS

              
                
              
            
!
999px

Console