Scrolling a little below actual element

user_11598587 0
Viewed 66

I am creating a demo page and it is almost ready. Here is the codepen link of it. https://codepen.io/kamalpancholi/full/wvGMgEK?editors=1100 But I am facing two issues.

[1] When I click on the navbar link, the page scrolls a little below the actual element. Results in some of the actual content goes below header. I am using sticky header.

[2] I don't understand why I need to use so many !important in CSS media queries ? Am I doing something wrong in media queries ? The value provided in media query was never updated until I used !important with it.

Below is the code

@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');

* {margin: 0; padding: 0;}
body{ font-family: 'oswald', sans-serif}
.text-center { text-align: center; }
.text-left { text-align: center; }
.block { display: block; }
.inline { display: inline; }
.bold { font-weight: bold; }
.no-decor-link {
  text-decoration: none;
  color: black;
}
.no-bullets { list-style-type: none; }
.orangered { color: orangered; }
.ubuntu { font-family: 'Ubuntu', sans-serif }
.oswald { font-family: 'Oswald', sans-serif }

#header {
  background-color: #FFDEAD;
  position: sticky;
  top: 0;
  z-index: 2;
}
#logoNtitle {
  display: inline-block;
}
#header-img {
  width: 80px;
  height: auto;
  margin: 1em auto 0.7em 10vw;
}
#header-text{
  position: relative;
  top: -14px;
  font-size: 2em;
  margin-left: 0.8em;
}

#nav-bar {
  float: right;
  position: relative;
  top: 2.3em;
  right: 2em;
  font-family: 'Ubuntu', sans-serif;
}
#nav-bar a{
  padding: 1em 0.5em 1em 0.5em;
}
#main {
  width: 1020px;
  margin: auto;
  background-color: #e6e6e6;
  padding: 0.05px; /* to avoid margin collapsing */
}
#main p {
  margin: 1em;
}
@media(max-width: 1020px) {
  #main { width: 800px; }
  #video {
    width: 500px !important;
    height: 281.25px !important;
  }
  #demo {
    margin: 1em auto 3em !important;
  }
}
@media(max-width: 800px) {
  #main { width: 100%; }
  #features-1 .ico { display: none !important; }
  #features-1 { width: 80% !important; }
  #nav-bar {
    float: none;
    position: initial;
    text-align: center;
    padding-bottom: 1em;
  }
  #logoNtitle {
    display: block;
    width: 320px;
    margin: auto;
  }
  #header-img {
    margin-left: auto;
  }
  #demo {
    margin-top: 1em !important;
    margin-bottom: 1em !important;
  }
  #pricing { margin-bottom: 1.2em; }
  #pricing-content {
    display: initial !important;
    padding: 0.05px;
    margin: 1em auto !important;
  }
  .card {
    width: 300px;
    margin: 1em auto 0.5em;
  }
}
@media(max-width: 550px) {
  #video {
    width: 90vw !important;
    height: 50.625vw !important;
  }
}
#email {
  display: block;
  margin: 1em auto 1em auto;
  border-radius: 3px;
  border: 2px solid black;
  padding: 0.3em 7px 0.3em 7px;
  color: #1b2b34;
  min-width: 15em;
}
#submit {
  display: block;
  margin: auto auto 1em auto;
  background-color: #5fce6a;
  border: none;/*1px solid grey;*/
  padding: 0.5em 1em;
  font-size: 1em;
}
#features-1{
  width: 50%;
  margin: 3em auto 2em;
}
.flex {
  display: flex;
  flex-direction: row;
}
#features-1 .ico {
  display: flex;
  height: 100px;
  width: 90px;
  justify-content: center;
  align-items: center;
  color: orangered;
}
#features-1 .content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100px;
  width: 75vw;
  padding-left: 30px;
  padding-right: 10px;
}

#features-2 {
  margin: auto;
  display: flex;
  flex-direction: column;
}

#features-2 ul {
  list-style-type: none;
  line-height: 2em;
  margin: auto;
}
#features-2 .feature-title {
  font-size: 1.2em;
  margin: 1% auto;
}
#features ul li:before {
  content: '\2713';
  display: inline-block;
  position: relative;
  right: 6px;
  font-weight: bold;
}
#demo {
  margin: 2em auto 3em;
}
#video-title {
  text-align: center;
  padding: 1em;
  font-family: 'ubuntu', sans-serif;
}
#video {
  display: block;
  width: 729px;
  height: 410px;
  margin: auto;
}
#pricing-content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1.3em;
  width: 95%;
  margin: 2em auto;
}
.card {
  border: 2px solid black;
  text-align: center;
}
.card h3 {
  background-color: #BDBBBB;
  padding: 0.5em 1em;
}
.card h2 {
  font-weight: bold;
  line-height: 2em;
}
.card ul {
  line-height: 2em;
  font-family: 'ubuntu';
}
.card button {
  padding: 0.5em 2.3em;
  margin: 1em auto;
  background-color: orangered;
  border: none;
  font-family: 'ubuntu';
  font-weight: bold;
}
.true:before {
  content: '\2713';
  display: inline-block;
  position: relative;
  right: 6px;
  font-weight: bold;
}
.false:before {
  content: '\2717';
  display: inline-block;
  position: relative;
  right: 6px;
  font-weight: bold;
}

footer div {
  background-color: #BDBBBB;
  font-family: 'ubuntu';
  padding: 0.05px;
}

footer ul {
  padding-top: 1.3em;
  padding-bottom: 0.5em;
}
footer li {
  display: inline;
  padding-left: 1em;
  padding-right: 1em;
}
.footer-content p {
  margin-top: 0px !important;
  font-size: 13px;
}
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Product page</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css'><link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<header id="header">
  <div id="logoNtitle">
    <img src="https://www.freepnglogos.com/uploads/eagles-png-logo/eagle-sports-png-logos--0.png" alt="product logo" id="header-img" class="inline">
    <span id="header-text">The Lorem Ipsum</span>
  </div>
  <nav id="nav-bar">
    <div id="links">
      <a href="#features" class="no-decor-link nav-link"><span>Features</span></a>
      <a href="#demo" class="no-decor-link nav-link"><span>Demo</span></a>
      <a href="#pricing" class="no-decor-link nav-link"><span>Pricing</span></a>
      <a href="#contact" class="no-decor-link nav-link"><span>Contact Us!</span></a>
    </div>
  </nav>
</header>

<div id="main">
  <p class="text-center ubuntu pclass"> Provide your email for more information about product </p>
  <form id="form" action="https://www.freecodecamp.com/email-submit">
    <label for="email">
      <input type="email" id="email" name="email" placeholder="Enter your email address">
    </label>
    <input type="submit" value="Submit" id="submit">
  </form>
  <div id="features" class="ubuntu">
    <div id="features-1">
      <div class="flex">
        <div class="ico"><i class="fas fa-air-freshener fa-2x"></i></div>
        <div class="content">
          <h3>Premium quality material</h3>
          <span>Lorem ipsum dolor sit amat, consecite adispicing elit, ipsum dolor sit amat, consecite adispicing elit</span>
        </div>
      </div>
      <div class="flex">
        <div class="ico"><i class="fas fa-shipping-fast fa-2x"></i></div>
        <div class="content">
          <h3>Fast shipping</h3>
          <span>Lorem ipsum amat, dolorem ipsum</span>
        </div>
      </div>
      <div class="flex">
        <div class="ico"><i class="fas fa-user-clock fa-2x"></i></div>
        <div class="content">
          <h3>Timely maintenance updates</h3>
          <span>Lorem ipsum dolor sit amat, consecite adispicing elit</span>
        </div>
      </div>
    </div>
    <div id="features-2">
      <p class="bold feature-title">Why to choose us ?</p>
      <ul>  <!--  use css list-style-type: none; to remove bullets
                  use list-style-image: url(img.png) to use an image as bullet -->
        <li>Lorem ipsum dolor</li>
        <li>sit amet, consectetur adipiscing elit</li>
        <li>Nunc tempor</li>
        <li>dolorem ipsum quia</li>
        <li>Lorem ipsum dolor</li>
        <li>sit amet, consectetur adipiscing elit</li>
        <li>Nunc tempor</li>
        <li>dolorem ipsum quia</li>
      </ul>
    </div>
  </div>
  
  <div id="demo">
    <h2 id="video-title">Here is how it works !!!</h2>
    <div class="video-container">
      <iframe width="729" height="410" id="video" src="https://www.youtube.com/embed/CmzKQ3PSrow" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
  </div>
  
  <div id="pricing">
    <div id="pricing-content">
      <div class="card">
        <h3>Basic Package</h3>
        <h2>$500</h2>
        <ul class="no-bullets">
          <li class="true">Lorem ipsum</li>
          <li class="false">Dolor sit, amat</li>
          <li class="false">Nunc tempor</li>
          <li class="false">dolorem ipsum quia</li>
        </ul>
        <button type="button">Select</button>
      </div>
      <div class="card">
        <h3>Premium Package</h3>
        <h2>$600</h2>
        <ul class="no-bullets">
          <li class="true">Lorem ipsum</li>
          <li class="true">Dolor sit, amat</li>
          <li class="false">Nunc tempor</li>
          <li class="false">dolorem ipsum quia</li>
        </ul>
        <button type="button">Select</button>
      </div>
      <div class="card">
        <h3>Pro Package</h3>
        <h2>$800</h2>
        <ul class="no-bullets">
          <li class="true">Lorem ipsum</li>
          <li class="true">Dolor sit, amat</li>
          <li class="true">Nunc tempor</li>
          <li class="true">dolorem ipsum quia</li>
        </ul>
        <button type="button">Select</button>
      </div>
    </div>
  </div>
  
  <footer id="contact">
    <div class="footer-content">
      <ul class="no-bullets">
        <li><a href="#" class="no-decor-link">Privacy</a></li>
        <li><a href="#" class="no-decor-link">Terms</a></li>
        <li><a href="#" class="no-decor-link">Contact</a></li>
      </ul>
      <p>&copyThe Lorem Ipsum</p>
    </div>
  </footer>
</div>
<!-- partial -->
  <script src='https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js'></script>
</body>
</html>

navbar css html
2 Answers

I've added padding-top: 75px; and padding-top: 40px; to the page anchors to give it the buffer you are looking for.

@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'oswald', sans-serif
}

.text-center,
.text-left {
  text-align: center;
}

.block {
  display: block;
}

.inline {
  display: inline;
}

.bold {
  font-weight: bold;
}

.no-decor-link {
  text-decoration: none;
  color: black;
}

.no-bullets {
  list-style-type: none;
}

.orangered {
  color: orangered;
}

.ubuntu {
  font-family: 'Ubuntu', sans-serif;
}

#features {
  padding-top: 40px;
}

#demo {
  padding-top: 75px;
}

.oswald {
  font-family: 'Oswald', sans-serif
}

#header {
  background-color: #FFDEAD;
  position: sticky;
  top: 0;
  z-index: 2;
}

#logoNtitle {
  display: inline-block;
}

#header-img {
  width: 80px;
  height: auto;
  margin: 1em auto 0.7em 10vw;
}

#header-text {
  position: relative;
  top: -14px;
  font-size: 2em;
  margin-left: 0.8em;
}

#nav-bar {
  float: right;
  position: relative;
  top: 2.3em;
  right: 2em;
  font-family: 'Ubuntu', sans-serif;
}

#nav-bar a {
  padding: 1em 0.5em 1em 0.5em;
}

#main {
  width: 1020px;
  margin: auto;
  background-color: #e6e6e6;
  padding: 0.05px;
  /* to avoid margin collapsing */
}

#main p {
  margin: 1em;
}

@media(max-width: 1020px) {
  #main {
    width: 800px;
  }
  #video {
    width: 500px !important;
    height: 281.25px !important;
  }
  #demo {
    margin: 1em auto 3em !important;
  }
}

@media(max-width: 800px) {
  #main {
    width: 100%;
  }
  #features-1 .ico {
    display: none !important;
  }
  #features-1 {
    width: 80% !important;
  }
  #nav-bar {
    float: none;
    position: initial;
    text-align: center;
    padding-bottom: 1em;
  }
  #logoNtitle {
    display: block;
    width: 320px;
    margin: auto;
  }
  #header-img {
    margin-left: auto;
  }
  #demo {
    margin-top: 1em !important;
    margin-bottom: 1em !important;
  }
  #pricing {
    margin-bottom: 1.2em;
  }
  #pricing-content {
    display: initial !important;
    padding: 0.05px;
    margin: 1em auto !important;
  }
  .card {
    width: 300px;
    margin: 1em auto 0.5em;
  }
}

@media(max-width: 550px) {
  #video {
    width: 90vw !important;
    height: 50.625vw !important;
  }
}

#email {
  display: block;
  margin: 1em auto 1em auto;
  border-radius: 3px;
  border: 2px solid black;
  padding: 0.3em 7px 0.3em 7px;
  color: #1b2b34;
  min-width: 15em;
}

#submit {
  display: block;
  margin: auto auto 1em auto;
  background-color: #5fce6a;
  border: none;
  /*1px solid grey;*/
  padding: 0.5em 1em;
  font-size: 1em;
}

#features-1 {
  width: 50%;
  margin: 3em auto 2em;
}

.flex {
  display: flex;
  flex-direction: row;
}

#features-1 .ico {
  display: flex;
  height: 100px;
  width: 90px;
  justify-content: center;
  align-items: center;
  color: orangered;
}

#features-1 .content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100px;
  width: 75vw;
  padding-left: 30px;
  padding-right: 10px;
}

#features-2 {
  margin: auto;
  display: flex;
  flex-direction: column;
}

#features-2 ul {
  list-style-type: none;
  line-height: 2em;
  margin: auto;
}

#features-2 .feature-title {
  font-size: 1.2em;
  margin: 1% auto;
}

#features ul li:before {
  content: '\2713';
  display: inline-block;
  position: relative;
  right: 6px;
  font-weight: bold;
}

#demo {
  margin: 2em auto 3em;
  padding-top: 75px;
}

#video-title {
  text-align: center;
  padding: 1em;
  font-family: 'ubuntu', sans-serif;
}

#video {
  display: block;
  width: 729px;
  height: 410px;
  margin: auto;
}

#pricing-content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1.3em;
  width: 95%;
  margin: 2em auto;
}

.card {
  border: 2px solid black;
  text-align: center;
}

.card h3 {
  background-color: #BDBBBB;
  padding: 0.5em 1em;
}

.card h2 {
  font-weight: bold;
  line-height: 2em;
}

.card ul {
  line-height: 2em;
  font-family: 'ubuntu';
}

.card button {
  padding: 0.5em 2.3em;
  margin: 1em auto;
  background-color: orangered;
  border: none;
  font-family: 'ubuntu';
  font-weight: bold;
}

.true:before {
  content: '\2713';
  display: inline-block;
  position: relative;
  right: 6px;
  font-weight: bold;
}

.false:before {
  content: '\2717';
  display: inline-block;
  position: relative;
  right: 6px;
  font-weight: bold;
}

footer div {
  background-color: #BDBBBB;
  font-family: 'ubuntu';
  padding: 0.05px;
}

footer ul {
  padding-top: 1.3em;
  padding-bottom: 0.5em;
}

footer li {
  display: inline;
  padding-left: 1em;
  padding-right: 1em;
}

.footer-content p {
  margin-top: 0px !important;
  font-size: 13px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>CodePen - Product page</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css'>
  <link rel="stylesheet" href="./style.css">

</head>

<body>
  <!-- partial:index.partial.html -->
  <header id="header">
    <div id="logoNtitle">
      <img src="https://www.freepnglogos.com/uploads/eagles-png-logo/eagle-sports-png-logos--0.png" alt="product logo" id="header-img" class="inline">
      <span id="header-text">The Lorem Ipsum</span>
    </div>
    <nav id="nav-bar">
      <div id="links">
        <a href="#features" class="no-decor-link nav-link"><span>Features</span></a>
        <a href="#demo" class="no-decor-link nav-link"><span>Demo</span></a>
        <a href="#pricing" class="no-decor-link nav-link"><span>Pricing</span></a>
        <a href="#contact" class="no-decor-link nav-link"><span>Contact Us!</span></a>
      </div>
    </nav>
  </header>

  <div id="main">
    <p class="text-center ubuntu pclass"> Provide your email for more information about product </p>
    <form id="form" action="https://www.freecodecamp.com/email-submit">
      <label for="email">
          <input type="email" id="email" name="email" placeholder="Enter your email address">
        </label>
      <input type="submit" value="Submit" id="submit">
    </form>
    <div id="features" class="ubuntu">
      <div id="features-1">
        <div class="flex">
          <div class="ico"><i class="fas fa-air-freshener fa-2x"></i></div>
          <div class="content">
            <h3>Premium quality material</h3>
            <span>Lorem ipsum dolor sit amat, consecite adispicing elit, ipsum dolor sit amat, consecite adispicing elit</span>
          </div>
        </div>
        <div class="flex">
          <div class="ico"><i class="fas fa-shipping-fast fa-2x"></i></div>
          <div class="content">
            <h3>Fast shipping</h3>
            <span>Lorem ipsum amat, dolorem ipsum</span>
          </div>
        </div>
        <div class="flex">
          <div class="ico"><i class="fas fa-user-clock fa-2x"></i></div>
          <div class="content">
            <h3>Timely maintenance updates</h3>
            <span>Lorem ipsum dolor sit amat, consecite adispicing elit</span>
          </div>
        </div>
      </div>
      <div id="features-2">
        <p class="bold feature-title">Why to choose us ?</p>
        <ul>
          <!--  use css list-style-type: none; to remove bullets
                      use list-style-image: url(img.png) to use an image as bullet -->
          <li>Lorem ipsum dolor</li>
          <li>sit amet, consectetur adipiscing elit</li>
          <li>Nunc tempor</li>
          <li>dolorem ipsum quia</li>
          <li>Lorem ipsum dolor</li>
          <li>sit amet, consectetur adipiscing elit</li>
          <li>Nunc tempor</li>
          <li>dolorem ipsum quia</li>
        </ul>
      </div>
    </div>

    <div id="demo">
      <h2 id="video-title">Here is how it works !!!</h2>
      <div class="video-container">
        <iframe width="729" height="410" id="video" src="https://www.youtube.com/embed/CmzKQ3PSrow" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
    </div>

    <div id="pricing">
      <div id="pricing-content">
        <div class="card">
          <h3>Basic Package</h3>
          <h2>$500</h2>
          <ul class="no-bullets">
            <li class="true">Lorem ipsum</li>
            <li class="false">Dolor sit, amat</li>
            <li class="false">Nunc tempor</li>
            <li class="false">dolorem ipsum quia</li>
          </ul>
          <button type="button">Select</button>
        </div>
        <div class="card">
          <h3>Premium Package</h3>
          <h2>$600</h2>
          <ul class="no-bullets">
            <li class="true">Lorem ipsum</li>
            <li class="true">Dolor sit, amat</li>
            <li class="false">Nunc tempor</li>
            <li class="false">dolorem ipsum quia</li>
          </ul>
          <button type="button">Select</button>
        </div>
        <div class="card">
          <h3>Pro Package</h3>
          <h2>$800</h2>
          <ul class="no-bullets">
            <li class="true">Lorem ipsum</li>
            <li class="true">Dolor sit, amat</li>
            <li class="true">Nunc tempor</li>
            <li class="true">dolorem ipsum quia</li>
          </ul>
          <button type="button">Select</button>
        </div>
      </div>
    </div>

    <footer id="contact">
      <div class="footer-content">
        <ul class="no-bullets">
          <li><a href="#" class="no-decor-link">Privacy</a></li>
          <li><a href="#" class="no-decor-link">Terms</a></li>
          <li><a href="#" class="no-decor-link">Contact</a></li>
        </ul>
        <p>&copyThe Lorem Ipsum</p>
      </div>
    </footer>
  </div>
  <script src='https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js'></script>
</body>

</html>

user_41012100

1. Anchors behind fixed nav

To prevent the anchors starting at the top of the page and therefore being hidden behind your fixed nav, you can add padding to them so that the padding is hidden under the nav instead. Of course this means that you will also have a bigger space in the page itself that you may not want.

To counteract that, you can add a negative value for the margin to pull the top of the element back up.

#features, #demo, #pricing, #contact {
    margin-top: -100px;
    padding-top: 100px;
}

2. Use of !important in all media queries

The reason you found that you had to use !important in your media queries is because you have included the media queries before the default CSS for those elements -this means that the rules in your media queries are being overridden by the CSS underneath them. Just move your media queries to the end and you can remove the !importants.

Working Example:

See example below with both of these changes made:

@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');

* {margin: 0; padding: 0;}
body{ font-family: 'oswald', sans-serif}
.text-center { text-align: center; }
.text-left { text-align: center; }
.block { display: block; }
.inline { display: inline; }
.bold { font-weight: bold; }
.no-decor-link {
  text-decoration: none;
  color: black;
}
.no-bullets { list-style-type: none; }
.orangered { color: orangered; }
.ubuntu { font-family: 'Ubuntu', sans-serif }
.oswald { font-family: 'Oswald', sans-serif }

#header {
  background-color: #FFDEAD;
  position: sticky;
  top: 0;
  z-index: 2;
}
#logoNtitle {
  display: inline-block;
}
#header-img {
  width: 80px;
  height: auto;
  margin: 1em auto 0.7em 10vw;
}
#header-text{
  position: relative;
  top: -14px;
  font-size: 2em;
  margin-left: 0.8em;
}

#nav-bar {
  float: right;
  position: relative;
  top: 2.3em;
  right: 2em;
  font-family: 'Ubuntu', sans-serif;
}
#nav-bar a{
  padding: 1em 0.5em 1em 0.5em;
}
#main {
  width: 1020px;
  margin: auto;
  background-color: #e6e6e6;
  padding: 0.05px; /* to avoid margin collapsing */
}
#main p {
  margin: 1em;
}
#email {
  display: block;
  margin: 1em auto 1em auto;
  border-radius: 3px;
  border: 2px solid black;
  padding: 0.3em 7px 0.3em 7px;
  color: #1b2b34;
  min-width: 15em;
}
#submit {
  display: block;
  margin: auto auto 1em auto;
  background-color: #5fce6a;
  border: none;/*1px solid grey;*/
  padding: 0.5em 1em;
  font-size: 1em;
}
#features-1{
  width: 50%;
  margin: 3em auto 2em;
}
.flex {
  display: flex;
  flex-direction: row;
}
#features-1 .ico {
  display: flex;
  height: 100px;
  width: 90px;
  justify-content: center;
  align-items: center;
  color: orangered;
}
#features-1 .content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100px;
  width: 75vw;
  padding-left: 30px;
  padding-right: 10px;
}

#features-2 {
  margin: auto;
  display: flex;
  flex-direction: column;
}

#features-2 ul {
  list-style-type: none;
  line-height: 2em;
  margin: auto;
}
#features-2 .feature-title {
  font-size: 1.2em;
  margin: 1% auto;
}
#features ul li:before {
  content: '\2713';
  display: inline-block;
  position: relative;
  right: 6px;
  font-weight: bold;
}
#demo {
  margin: 2em auto 2em;
}
#video-title {
  text-align: center;
  padding: 1em;
  font-family: 'ubuntu', sans-serif;
}
#video {
  display: block;
  width: 729px;
  height: 410px;
  margin: auto;
}
#pricing-content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1.3em;
  width: 95%;
  margin: 2em auto;
}
.card {
  border: 2px solid black;
  text-align: center;
}
.card h3 {
  background-color: #BDBBBB;
  padding: 0.5em 1em;
}
.card h2 {
  font-weight: bold;
  line-height: 2em;
}
.card ul {
  line-height: 2em;
  font-family: 'ubuntu';
}
.card button {
  padding: 0.5em 2.3em;
  margin: 1em auto;
  background-color: orangered;
  border: none;
  font-family: 'ubuntu';
  font-weight: bold;
}
.true:before {
  content: '\2713';
  display: inline-block;
  position: relative;
  right: 6px;
  font-weight: bold;
}
.false:before {
  content: '\2717';
  display: inline-block;
  position: relative;
  right: 6px;
  font-weight: bold;
}

footer div {
  background-color: #BDBBBB;
  font-family: 'ubuntu';
  padding: 0.05px;
}

footer ul {
  padding-top: 1.3em;
  padding-bottom: 0.5em;
}
footer li {
  display: inline;
  padding-left: 1em;
  padding-right: 1em;
}
.footer-content p {
  margin-top: 0px;
  font-size: 13px;
}
@media(max-width: 1020px) {
  #main { width: 800px; }
  #video {
    width: 500px;
    height: 281.25px;
  }
  #demo {
    margin: 1em auto 3em;
  }
}
@media(max-width: 800px) {
  #main { width: 100%; }
  #features-1 .ico { display: none; }
  #features-1 { width: 80%; }
  #nav-bar {
    float: none;
    position: initial;
    text-align: center;
    padding-bottom: 1em;
  }
  #logoNtitle {
    display: block;
    width: 320px;
    margin: auto;
  }
  #header-img {
    margin-left: auto;
  }
  #demo {
    margin-top: 1em;
    margin-bottom: 1em;
  }
  #pricing { margin-bottom: 1.2em; }
  #pricing-content {
    display: initial;
    padding: 0.05px;
    margin: 1em auto;
  }
  .card {
    width: 300px;
    margin: 1em auto 0.5em;
  }
}
@media(max-width: 550px) {
  #video {
    width: 90vw;
    height: 50.625vw;
  }
}

#features,
#demo,
#pricing,
#contact{ margin-top:-100px; padding-top:100px;}
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css'><link rel="stylesheet" href="./style.css">

<header id="header">
  <div id="logoNtitle">
    <img src="https://www.freepnglogos.com/uploads/eagles-png-logo/eagle-sports-png-logos--0.png" alt="product logo" id="header-img" class="inline">
    <span id="header-text">The Lorem Ipsum</span>
  </div>
  <nav id="nav-bar">
    <div id="links">
      <a href="#features" class="no-decor-link nav-link"><span>Features</span></a>
      <a href="#demo" class="no-decor-link nav-link"><span>Demo</span></a>
      <a href="#pricing" class="no-decor-link nav-link"><span>Pricing</span></a>
      <a href="#contact" class="no-decor-link nav-link"><span>Contact Us!</span></a>
    </div>
  </nav>
</header>

<div id="main">
  <p class="text-center ubuntu pclass"> Provide your email for more information about product </p>
  <form id="form" action="https://www.freecodecamp.com/email-submit">
    <label for="email">
      <input type="email" id="email" name="email" placeholder="Enter your email address">
    </label>
    <input type="submit" value="Submit" id="submit">
  </form>
  <div id="features" class="ubuntu">
    <div id="features-1">
      <div class="flex">
        <div class="ico"><i class="fas fa-air-freshener fa-2x"></i></div>
        <div class="content">
          <h3>Premium quality material</h3>
          <span>Lorem ipsum dolor sit amat, consecite adispicing elit, ipsum dolor sit amat, consecite adispicing elit</span>
        </div>
      </div>
      <div class="flex">
        <div class="ico"><i class="fas fa-shipping-fast fa-2x"></i></div>
        <div class="content">
          <h3>Fast shipping</h3>
          <span>Lorem ipsum amat, dolorem ipsum</span>
        </div>
      </div>
      <div class="flex">
        <div class="ico"><i class="fas fa-user-clock fa-2x"></i></div>
        <div class="content">
          <h3>Timely maintenance updates</h3>
          <span>Lorem ipsum dolor sit amat, consecite adispicing elit</span>
        </div>
      </div>
    </div>
    <div id="features-2">
      <p class="bold feature-title">Why to choose us ?</p>
      <ul>  <!--  use css list-style-type: none; to remove bullets
                  use list-style-image: url(img.png) to use an image as bullet -->
        <li>Lorem ipsum dolor</li>
        <li>sit amet, consectetur adipiscing elit</li>
        <li>Nunc tempor</li>
        <li>dolorem ipsum quia</li>
        <li>Lorem ipsum dolor</li>
        <li>sit amet, consectetur adipiscing elit</li>
        <li>Nunc tempor</li>
        <li>dolorem ipsum quia</li>
      </ul>
    </div>
  </div>
  
  <div id="demo">
    <h2 id="video-title">Here is how it works !!!</h2>
    <div class="video-container">
      <iframe width="729" height="410" id="video" src="https://www.youtube.com/embed/CmzKQ3PSrow" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
  </div>
  
  <div id="pricing">
    <div id="pricing-content">
      <div class="card">
        <h3>Basic Package</h3>
        <h2>$500</h2>
        <ul class="no-bullets">
          <li class="true">Lorem ipsum</li>
          <li class="false">Dolor sit, amat</li>
          <li class="false">Nunc tempor</li>
          <li class="false">dolorem ipsum quia</li>
        </ul>
        <button type="button">Select</button>
      </div>
      <div class="card">
        <h3>Premium Package</h3>
        <h2>$600</h2>
        <ul class="no-bullets">
          <li class="true">Lorem ipsum</li>
          <li class="true">Dolor sit, amat</li>
          <li class="false">Nunc tempor</li>
          <li class="false">dolorem ipsum quia</li>
        </ul>
        <button type="button">Select</button>
      </div>
      <div class="card">
        <h3>Pro Package</h3>
        <h2>$800</h2>
        <ul class="no-bullets">
          <li class="true">Lorem ipsum</li>
          <li class="true">Dolor sit, amat</li>
          <li class="true">Nunc tempor</li>
          <li class="true">dolorem ipsum quia</li>
        </ul>
        <button type="button">Select</button>
      </div>
    </div>
  </div>
  
  <footer id="contact">
    <div class="footer-content">
      <ul class="no-bullets">
        <li><a href="#" class="no-decor-link">Privacy</a></li>
        <li><a href="#" class="no-decor-link">Terms</a></li>
        <li><a href="#" class="no-decor-link">Contact</a></li>
      </ul>
      <p>&copyThe Lorem Ipsum</p>
    </div>
  </footer>
</div>

user_5148780
Related