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 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

              
                <!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#page-top">Company Name</a>
    <button class="navbar-toggler navbar-toggler-right" 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 my-2 my-lg-0">
        <li class="nav-item">
          <a class="nav-link" href="#about">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#services">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#partners">Partners</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#contact">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<div class="parallax1" id="page-top">
  <div class="heading">
    Company Profile
  </div>
</div>

<section class="section1" id="about">
  <h1>About Us</h1>
  <br>
  <div class="col-md-12 row">
    <div class="col-md-6">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, voluptatem illum molestiae quisquam nulla aspernatur delectus voluptatum quo, doloribus et porro consectetur possimus architecto nesciunt, magnam ipsam! Molestias ipsum explicabo quod,
      culpa doloremque eos delectus voluptate cum expedita. Nihil at qui animi illum impedit deleniti fuga, aspernatur error accusantium fugit ad, sed deserunt vitae? Amet nam quaerat, veritatis enim et itaque velit architecto earum, saepe voluptate debitis
      iure, ab aliquam doloribus. Cum exercitationem eveniet laborum voluptates ipsa eius, soluta commodi. Eos eveniet corporis repellendus, quis ad debitis perferendis veniam sunt molestiae omnis, officia suscipit nesciunt ducimus! Temporibus quis nobis
      asperiores.
    </div>
    <div class="col-md-6">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, voluptatem illum molestiae quisquam nulla aspernatur delectus voluptatum quo, doloribus et porro consectetur possimus architecto nesciunt, magnam ipsam! Molestias ipsum explicabo quod,
      culpa doloremque eos delectus voluptate cum expedita. Nihil at qui animi illum impedit deleniti fuga, aspernatur error accusantium fugit ad, sed deserunt vitae? Amet nam quaerat, veritatis enim et itaque velit architecto earum, saepe voluptate debitis
      iure, ab aliquam doloribus. Cum exercitationem eveniet laborum voluptates ipsa eius, soluta commodi. Eos eveniet corporis repellendus, quis ad debitis perferendis veniam sunt molestiae omnis, officia suscipit nesciunt ducimus! Temporibus quis nobis
      asperiores.
    </div>
  </div>
</section>

<div class="parallax2" id="services">
  <div class="heading-sm">
    <span class="border">
                Description
            </span>
  </div>
</div>

<section class="dark">
  <h2>Description</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae repellat debitis cupiditate. Cupiditate aspernatur rerum voluptas doloribus ut? Odit minima fuga earum temporibus assumenda. Saepe libero, adipisci hic consequatur nisi illo eius neque rem
    ratione! Saepe nisi eos, corporis provident, recusandae delectus, officia vero eius quaerat voluptas error molestiae rem rerum! Odit facilis quos est tempora, aspernatur
  </p>
</section>

<div class="parallax3" id="partners"></div>

<div class="dark">
  <h3 class="text-center">Description here</h3>
  <br>
  <div class="col-md-12 row">
    <div class="col-md-6">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur consequuntur omnis repudiandae magnam animi architecto excepturi exercitationem soluta. Cupiditate, omnis similique, magnam veritatis vitae molestias temporibus esse doloribus asperiores
      exercitationem, iste corrupti earum. Hic saepe non eius amet temporibus at autem officiis suscipit doloribus. Dignissimos odit possimus ex, voluptatum debitis nostrum iusto maxime obcaecati corporis, aut nihil odio mollitia facere dolore voluptas
      natus consectetur porro hic ut est tempora in doloribus, aspernatur accusantium. Perspiciatis ab nemo iusto eveniet distinctio odit voluptatum necessitatibus et neque quidem natus, enim officiis optio voluptate alias inventore dolores sint provident
      sunt nihil, doloribus voluptas dolorum.
    </div>
    <div class="col-md-6">
      quisquam molestias sequi ipsa magnam quasi ad reiciendis libero expedita nemo asperiores nobis ducimus ab aliquid accusantium fugit unde quis cum consequatur? Libero, inventore, perspiciatis explicabo ipsam repellat at quod, iure ullam temporibus autem
      tempore ad odio eveniet debitis amet necessitatibus accusantium earum.
    </div>
  </div>

</div>

<div class="parallax4"></div>

<section class="section1" id="contact-header">
  <h1>Contact Us</h1>
</section>
<div class="parallax5">
  <section id="contact">
    <div class="container">
      <div id="form-content" class="col-lg-8 mx-auto bg-light form">
        <h3>Got Questions?</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At voluptatibus esse voluptate ullam ab consequatur, ex illo sed harum ut labore doloremque ipsum voluptatum tempore? Incidunt magni reiciendis totam? Ducimus?</p>
        <hr>
        <form style="padding: 30px;">
          <div class="control-group">
            <div class="group">
              <div class="form-group floating-label-form-group controls mb-0 pb-2">
                <input class="col-md-12" type="text" required>
                <span class="highlight"></span>
                <span class="bar"></span>
                <label>Name</label>
                <p class="help-block text-danger"></p>
              </div>
            </div>
          </div>
          <div class="control-group">
            <div class="group">
              <div class="form-group floating-label-form-group controls mb-0 pb-2">
                <input class="col-md-12" type="text" required>
                <span class="highlight"></span>
                <span class="bar"></span>
                <label>Email</label>
                <p class="help-block text-danger"></p>
              </div>
            </div>
          </div>
          <div class="control-group">
            <div class="group">
              <div class="form-group floating-label-form-group controls mb-0 pb-2">
                <textarea class="col-md-12" type="textarea" rows="5" required="required"></textarea>
                <span class="highlight"></span>
                <span class="bar"></span>
                <label>Message</label>
                <p class="help-block text-danger"></p>
              </div>
            </div>
          </div>
          <br>
          <div id="success"></div>
          <div class="form-group">
            <button type="submit" class="btn btn-primary col-md-12 btn-xl" id="sendMessageButton">Send
                                Message</button>
          </div>
        </form>
      </div>
    </div>
  </section>
</div>
              
            
!

CSS

              
                /* href Transition */
html {
  scroll-behavior: smooth;
  height: 100%;
}

body,
html {
  height: 100%;
  margin: 0;
  font-family: sans-serif;
  color: #666;
  text-align: center;
}
/* PARALLAX START */
.parallax1 {
  background: url("https://images.pexels.com/photos/1092063/pexels-photo-1092063.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
  min-height: 100%;
}

.parallax2 {
  background: url("https://images.pexels.com/photos/1516704/pexels-photo-1516704.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
  min-height: 80%;
}

.parallax3 {
  background: url("https://images.pexels.com/photos/1105766/pexels-photo-1105766.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
  min-height: 60%;
}

.parallax4 {
  background: url("https://images.pexels.com/photos/116720/pexels-photo-116720.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
  background-position: 0 -231px !important;
  min-height: 80%;
}

.parallax5 {
  background: url("https://images.pexels.com/photos/1661004/pexels-photo-1661004.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
  min-height: 80%;
}

.parallax1,
.parallax2,
.parallax3,
.parallax4,
.parallax5 {
  position: relative;
  opacity: 0.7;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

/* PARALLAX END */

.heading {
  position: absolute;
  color: white;
  font-size: 400%;
  top: 38%;
  width: 100%;
  text-transform: uppercase;
  letter-spacing: 8px;
  text-shadow: 0 0 10px black;
}

.heading-sm {
  position: absolute;
  top: 45%;
  width: 100%;
  color: white;
  font-size: 250%;
  text-transform: uppercase;
  letter-spacing: 5px;
  text-shadow: 0 0 16px black;
  text-align: center;
}

h1,
.heading {
  text-align: center;
}
.border {
  background-color: black;
  padding: 5px;
  text-align: center;
}

.two-col {
  float: left;
  width: 42%;
  padding: 0 4%;
  text-align: left;
}

#contact-header {
  background-color: #323232;
  color: white;
}

section {
  overflow: auto;
  padding: 50px 80px;
}

.section1 {
  padding: 15px 80px;
}

.dark {
  overflow: auto;
  padding: 50px 80px;
  background-color: #323232;
  color: #f2f2f2;
}

.form {
  border-radius: 7px;
  padding: 30px;
}

#form-content {
  transition: 0.5s;
}

#form-content:hover {
  -webkit-box-shadow: 0px 5px 13px 2px rgba(71, 70, 71, 0.76);
  -moz-box-shadow: 0px 5px 13px 2px rgba(71, 70, 71, 0.76);
  box-shadow: 0px 5px 13px 2px rgba(71, 70, 71, 0.76);
}

.group {
  position: relative;
  margin-bottom: 45px;
}

textarea {
  resize: none !important;
}

input,
textarea {
  background: none;
  font-size: 18px;
  padding: 10px 10px 10px 5px;
  display: block;
  width: 300px;
  border: none;
  border-bottom: 1px solid #757575;
}
input:focus,
textarea:focus {
  outline: none;
}

label {
  color: #999;
  font-size: 18px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

/* active state */
input:focus ~ label,
input:valid ~ label {
  top: -20px;
  font-size: 14px;
  color: #5264ae;
}

textarea:focus ~ label,
textarea:valid ~ label {
  top: -20px;
  font-size: 14px;
  color: #5264ae;
}

/* BOTTOM INPUT BARS ================================= */
.bar {
  position: relative;
  display: block;
  width: 100%;
}
.bar:before,
.bar:after {
  content: "";
  height: 2px;
  width: 0;
  bottom: 1px;
  position: absolute;
  background: #03588c;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}
.bar:before {
  left: 50%;
}
.bar:after {
  right: 50%;
}

/* active state */
input:focus ~ .bar:before,
input:focus ~ .bar:after {
  width: 50%;
}

textarea:focus ~ .bar:before,
textarea:focus ~ .bar:after {
  width: 50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
  position: absolute;
  height: 60%;
  width: 100px;
  top: 25%;
  left: 0;
  pointer-events: none;
  opacity: 0.5;
}

/* active state */
input:focus ~ .highlight {
  -webkit-animation: inputHighlighter 0.3s ease;
  -moz-animation: inputHighlighter 0.3s ease;
  animation: inputHighlighter 0.3s ease;
}

textarea:focus ~ .highlight {
  -webkit-animation: inputHighlighter 0.3s ease;
  -moz-animation: inputHighlighter 0.3s ease;
  animation: inputHighlighter 0.3s ease;
}

.fixed-top {
  transition: background-color 500ms;
}

.fixed-top.scrolled {
  background-color: #fff;
  color: black;
}

@media (max-width: 768px) {
  .heading {
    font-size: 250%;
  }

  .heading-sm {
    font-size: 180%;
  }

  .two-col {
    width: 100%;
    padding: 0;
    text-align: center;
  }
  .parallax4 {
    background-attachment: scroll;
    min-height: 21%;
  }
}

              
            
!

JS

              
                $(function() {
  $(document).scroll(function() {
    var $nav = $(".fixed-top");
    //add background to nav when scrolled
    $nav.toggleClass("scrolled", $(this).scrollTop() > $nav.height());

    // $(".heading").css("top", Math.max(180 - 0.2 * window.scrollY, 0) + "px");
    // $(".parallax1").css("opacity", Math.max(1 - 0.004 * window.scrollY, 0));
  });
});

// $(document).on('scroll', function () {
//     // $(".heading").css("top", Math.max(180 - 0.2 * window.scrollY, 0) + "px");
//     $(".parallax1").css("opacity", Math.max(1 - 0.004 * window.scrollY, 0));
// })

              
            
!
999px

Console