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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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>
  <head>
    <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Landing Page</title>
      <link rel="stylesheet" href="stylesheet.css" type="text/css">
  <meta name="author" content="name">
  <meta name="description" content="description here">
  <meta name="keywords" content="keywords,here">
   <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.0/css/all.css" integrity="sha384-Mmxa0mLqhmOeaE8vgOSbKacftZcsNYDjQzuCOm6D02luYSzBG8vpaOykv9lFQ51Y" crossorigin="anonymous">
    
  </head>
  <body id="top-page">
    
    <!--NavBar-->
    <header id="header">
      <nav id="nav-bar" class="mainNav navbar navbar-expand-md navbar-light fixed-top navbar-fixed-top">
        <div class="container-fluid">
          <a class="navbar-brand text" href="#">Shopvery<img id="header-img" width="30" height="30" src="https://goo.gl/A7ybqS" /></a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
           
          <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto" id="navbarCollapse">
              <li class="nav-item active">
                <a class="nav-link text"  href="#shopveryslides"> Home </a>
              </li>
              <li class="nav-item active">
                <a class="nav-link text" href="#service"> Product </a>
                </li>
              <li class="nav-item active">
                <a class="nav-link text" href="#contacts"> Contact </a>
                </li>
            </ul>
          </div>
        </div>
      </nav>
          </header>
    
<!--img carousel-->
<div id="shopveryslides" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#shopveryslides" data-slide-to="0" class="active"></li>
    <li data-target="#shopveryslides" data-slide-to="1"></li>
    <li data-target="#shopveryslides" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner text-center">
    <div class="carousel-item active">
      <img class="d-block w-100 lightimg" src="https://goo.gl/bxuuYR" alt="First slide">
      <div class="carousel-caption d-none d-md-block firstcap">
    <h2 class="display-2">SHOPVERY</h2>
    <h5>Shop Deliverer</h5>
        <button class="btn btn-outline-light btn-large">Shop Now</button>
        <button class="btn btn-secondary btn-large">More Info</button>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://goo.gl/3byAJf" alt="Second slide">
       <div class="carousel-caption d-none d-md-block">
    <h4 class="display-2"></h4>
    <h5></h5>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100 lightimg" src="https://goo.gl/VPSdym" alt="Third slide">
       <div class="carousel-caption d-none d-md-block">
    <h4 class="display-4"></h4>
    <h5></h5>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#shopveryslides" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#shopveryslides" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
    
    
  <!--Hero-->
  <section class="masthead">
  <div class="container-fluid">
    <div class="row jumbotron jumbohero">
      
    <div id="hero-title" class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10">
      <h4 class ="display-4">Shopping Made Easy</h4>
        <p class="lead"> Service that makes purchase for you at your favourite local shop at the comfort of your own time and place</p>
    </div>
     
    <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10">
      
        <form class="col-8"> 
          <div class="form-group">
            <label for="email" class="sr-only">Emails</label>
            <input name="email" type="email" class=" form-control" id="email" placeholder="Enter your email" required />
          </div> 
      </form>
       <button type="button" class="button1 btn btn-outline-secondary">Get Started</button>
      
    </div>
    </div>
  </div>
</section>

  <!--Intro-->
  <section class="introsection padding">
    <div class="container-fluid">
      <div class="row text-center intro">
        <div class="col-12">
          <h1 class="display-4">Shop with Ease</h1?
        </div>
        <hr /> 
            <div class="col-12">
              <p class="lead text-pad">We understand that how time is valuable to us all. We are offering those little time to shop for you. Be it anytime and anywhere, we will shop for you in you stead. We offer as well weekly/monthly services such as groceries shopping delivered to your doorstep. </p>
            </div>
        </div>
      </div>
    </div>
  </section>
    
  <!--Services-->
  <div id="service" class="padding">
    <div class="container-fluid ">
        <div class="row text-center">
          <div class="col-12">
          <h2 class="display-3"> How it works
            </h2>
          </div>
          </div>
        </div>
    <div class="container-fluid">
      <div class="row text-center padding">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-5"> <img class="imgwork w-35 lightimg" style="height:200px;" src="https://bit.ly/2THngYe" alt="First slide"> </img>
      </div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-7 align-self-center">
          <p class="lead">Select the items that you want / Or fill in the form and list the items that you want.</p> 
        </div>
    </div>
      <div class="row text-center padding">
         <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-xl-7 align-self-center">
          <p class="lead">Requested items will be sent to us and our shoppers will shop for you. You can track and text to our shoppers if any adjustment need to be made.</p> 
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-xl-5"> <img class="d-block w-100 imgwork" src="https://bit.ly/2Y8rO8v" alt="First slide"> </img>
      </div>
    </div>
    
    <div class="row text-center padding">
         <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
          <p class="lead">Relax and enjoy as your items are being delivered right through your doorstep.</p> 
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"> <img class="d-block w-100 imgwork" src="https://bit.ly/2Jp45xM" alt="First slide"> </img>
      </div>
    </div>
    
    </div>
  </div>
    
  <!--shopnow-->
<section class="signshop padding-shop">
  <div class="container-fluid">
    <div class="row text-center">
      <div class="col-12"> 
      <h4 class="display-4">Shop and become a member </h4>
      </div>
    </div>
    <div class="row text-center">
       <div class="col-12 shopbtn"> 
        <button class="btn btn-outline-dark">Shop Now</button>
        <button class="btn btn-outline-dark">Register</button>
       </div>
    </div>
    <div class="embed-responsive embed-responsive-16by9">
      <iframe id="video" class="embed-responsive-item" src="https://www.youtube.com/embed/mXRfApkMYZU" allowfullscreen></iframe>
    </div>
   </div>

  <form id="form" action="https://www.freecodecamp.com/email-submit" method="POST">
    <div class="container">
    <div class="row">
     <div class="col-8">
          <div class="form-group">
            <label for="email" class="sr-only">Emails</label>
            <input name="email" type="email" class="form-control" id="email" placeholder="Email for FCC" required />
          </div> 
     </div>
    <div class="col-4">
       <input id="submit" type="submit" class="button1 btn btn-outline-secondary" value="Submit FCC"></input>
    </div>
    </div>
    </div>
</form>
  
</section>


<!--links-->
<section id="contacts" class="links padding-links links">
  <div class="container-fluid">
    <div class="row padding-links text-center">
      <div class="col-12">
        <h4> Connect With Us </h4>
      </div>
      <div class="col-12 social padding-links">
        <a href="https://www.facebook.com" target="_blank"><i class="fab fa-facebook"></i></a>
        <a href="https://www.twitter.com" target="_blank"><i class="fab fa-twitter"></i></a>
        <a href="https://www.instagram.com" target="_blank"><i class="fab fa-instagram"></i></a>
        <a href="https://www.youtube.com" target="_blank"><i class="fab fa-youtube"></i></a>
    </div>
  </div> 
</section>

<!--footer-->
<footer class="footer">
  <div class="container-fluid">
    <div class="row padding-footer text-center">
      <div class="col-12 align-self-center">
        <ul class="text-center list-inline" style="list-style:none;">
          <li class="list-inline-item"> <a href="#">Privacy</a></li>
          <li class="list-inline-item"> <a href="#">Terms</a></li>
          <li class="list-inline-item"> <a href="#">Contact</a></li>
        </ul>
      </div>
      
      <div class="col-12">
        <small>&copy; 2018, Created by Cyril Marcus for FCC. </small>
        <small>All contents used primarily for practice purposes and prototyping.</small>
      </div>
      
    </div>
  </div>
 
</footer>
  </body>
</html>
              
            
!

CSS

              
                
@media (max-width: 770px) {
  .nav-link {
  float: right;
  margin: 1vw;
	}
}

div {
  display:block;
  padding: 0 0 0 0;
}

div form{
  display: inline-block !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

div .button1{
  vertical-align: top !important;
}
div input{
  vertical-align: top !important;
}


ul li a{
  color: black;
}


nav ul {
    width: 30vw;
    flex-direction: row;
    justify-content: space-around;
}
nav ul li{
  cursor: pointer;
}
.navbar-fixed-top.scrolled {
  background-color: #4f4f4f !important;
  transition: background-color 300ms linear !important;
  padding-top: 0!important;
  color: white !important;
}
.text.scrolled{
  color: #fcf9f9 !important;
}
.navbar-toggler.scrolled{
  border-color: transparent !important;
  padding: 0.5rem 0 0 0 !important;
}
.mainNav{
  background-color: #efefef !important;
}
.navbar{
   padding-top: 2vw !important;
}
#header-img{
  margin:0 0 3% 5%;
}
#videos{
  padding: vw !important;
}
#form{
  padding: 1vw;
}
.lightimg{
  filter: brightness(70%);
}
.shopbtn{
  padding: 1vw;
}
.jumbohero{
  display: flex;
  justify-content: space-around;
}
.padding{
  padding: 4vw 6vw 4vw 6vw;
}

/*fonts icons */
.fab{
  margin: 0 2vw 0 2vw;
  font-size: 4vw;
}
.fa-facebook{
  color: #3C5A99;
}
.fa-twitter{
  color: #38A1F3;
}
.fa-instagram{
  color: #231F20;
}
.fa-youtube{
  color:#ED3833;
}
/*fonts icons */

.text-pad{
  margin: 0 10vw 0 10vw;
}

#service{
  background-color: #fcfbf4 !important;
}

.links{
  background-color: #e5f2ff !important;
}

.padding-shop{
  margin: 10vw;
}
.padding-links{
  padding: 0.5vw;
}

.footer{
  background-color: #b7b7b7;
}

hr{
   margin-left: 140px;
   margin-right: 140px;
   border-top: 2px solid #b4b4b4 !important;
}
              
            
!

JS

              
                $(document).ready(function() {
  $('.navbar-collapse ul li a').click(function(){
  $('.navbar-toggler:visible').click(); /*  <---- close navbar after scroll */
    }); 
	
 $('a[href*="#"]:not([href="#"])').click((e) => { /*  <---- smooth scroll */
    const target = $(e.target.hash);
    if (target.length) {
      $('html, body').animate({
        scrollTop: target.offset().top - 50
      }, 1000);
      return false;
    }
  });
});


/*  <---- when scrolled, navbar responses in resizing */
$(function () { 
  $(document).scroll(function () {
    var $nav = $(".navbar-fixed-top, .text, .navbar-toggler");
    $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
  });
});
              
            
!
999px

Console