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

              
                <div id="grid-container">
  <!-- START of the navbar   -->
  <nav id="navbar">
    <ul>
      <li class="item-link"><a href="#aboutScreen" class="links">About</a></li>
      <li class="item-link"><a href="#exampleScreen" class="links">Examples</a></li>
      <li class="item-link"><a href="#contactScreen" class="links">Contact</a></li>
    </ul>
    
    <p class="fas fa-bars nav-button"></p>
    
    <p class="logo">
      #logo
    </p>
  </nav>
  <!-- END of the navbar    -->
  
  <!-- START of the menu   -->
  <div id="hiddenMenu">
    <ul>
      <li class="item-link"><a href="#aboutScreen" class="links">About</a></li>
      <li class="item-link"><a href="#exampleScreen" class="links">Examples</a></li>
      <li class="item-link"><a href="#contactScreen" class="links">Contact</a></li>
    </ul>
  </div>
  <!-- END of the menu   -->
  
  <!-- START of Splash Screen  -->
  <div id="splashScreen">
    <span class="text-container">
      <h1 class="very-heading">Dream Engineers</h1>
      <p class="sub-heading">Building the dreams of everyone with determination.</p>
    </span>
  </div>
  <!-- END of Splash Screen   -->
  
  <!-- START of Process Screen   -->
  <div id="aboutScreen">
    <h1 class="heading">
      What do we do?
    </h1>
    
    <div class="process-explanation first">
      <p class="icon-container">
        <span class="fas fa-bullhorn about-icons"></span>
      </p>
      <p class="about-text">
        We broadcast people who deserve to help reach their goals.
      </p>
    </div>
    
    <div class="process-explanation second">
      <p class="about-icon "></p>
      <p class="about-text">
        <p class="icon-container">
        <span class="far fa-handshake about-icons"></span>
      </p>
        We help people realize and materialize their long-term goals.
      </p>
    </div>
    <div class="process-explanation third">
      <p class="about-icon "></p>
      <p class="about-text">
       <p class="icon-container">
        <span class="far fa-lightbulb about-icons"></span>
      </p>
        We inspire people to be the next big dreamer.
      </p>
    </div>
  </div>
  <!-- END of Process Screen   -->
  
  <!-- START of Example Screen   -->
  <div id="exampleScreen">
    <h1 class="heading">Some Inspirations</h1>
    <div class="example-item ex1">
      <div class="img-container">
        <img src="https://source.unsplash.com/sqf34WRue_s/100x100" alt="A man playing music outside." class="img-profile">
        <!-- https://unsplash.com/@marcosalfonso_ -->
      </div>
      John Dodo is just living the ordinary life until he encountered an incident so devastating, it rendered him to be helpless. This does not stop him from reaching his goal to be a better person everyday struggling with new challenges.
    </div>
    <div class="example-item ex2">
      <div class="img-container">
        <img src="https://source.unsplash.com/2mYNBE4SLoc/100x100" alt="A girl standing outside." class="img-profile">
        <!-- https://unsplash.com/@spencerbackman -->
      </div>
      Aunn Pressley is a student from a remote village wherein life is a rough albeit simple community helping each other's members. She eventually recognized as an adept scientist (and in this community, as well) after she return with a result from a longtime study that first came with financial problems.
    </div>
    <div class="example-item ex3">
      <div class="img-container">
        <img src="https://source.unsplash.com/vXQza9AUe40/100x100" alt="A young woman with eyeglasses." class="img-profile">
        <!-- https://unsplash.com/@a2eorigins -->
      </div>
      Sally Mont de Castro is a successful owner of an electronic company that came from a family of engineers and struggles from cyberbullying after one of her photos became viral for memes. Now she is highly sought to be one of the top role models for those people who went through similar challenges and co-founded Dream Engineers as one step further to that goal of helping.
    </div>
    <div class="example-item ex4">
      <div class="img-container">
        <img src="https://source.unsplash.com/100x100?puppy, dog" alt="A dog." class="img-profile"> 
      </div>
      Here's the dog for your inspiration. :)
    </div>
  </div>
  <!-- END of Example Screen    -->
  
  <!-- START of Contact Screen    -->
  <div id="contactScreen">
    <h1 class="heading">Want to help?</h1>
    <form class="contact-form" action="http://freecodecamp.org/email-submit">
      <div class="data">
        <input type="text" class="email" name="name" placeholder="Name" required>
        <input type="text" class="email" name="email" placeholder="Email" required>
        <input type="text" class="email" name="subject" placeholder="Subject" required>
      </div>

      <div class="message">
        <textarea name="message" id="message" placeholder="Message" required></textarea>
        <button class="submit" type="submit">Submit</button>
      </div>
      </form>
  </div>
  <!-- END of Contact Screen    -->
  
  <!-- START of Footer    -->
<div id="footer">
    <div>
      <span class="far fa-copyright footer-icon"></span> 2018
    </div>
</div>
  <!-- END of Footer    -->
</div>
              
            
!

CSS

              
                :root {
  /*  variables for colors  */
  --peach: #f7c69e;
  --darkerpeach: #d3bba7;
  --orange: #eda468;
  --gray: #dbdaea;
  --gray2: #808782;
  
  --overlay: rgba(0, 0, 0, 0.65);
  
  /* default font family, obviously ;p */
  --defaultFontFamily: "Cinzel", sans-serif;
  
  /* margin (for consistency)   */
  --margin: 1.25% 5%;
  --margin2: 20px auto 10px;
  
  /* box-shadow default shading   */
  --box-shadow: 5px 4px 9px black;
}

html, body {
  scroll-behavior: smooth;
  box-sizing: content-box;
  height: 100%;
  
  margin: 0;
  padding: 0;
  
  font-family: var(--defaultFontFamily);
}

/* the grid container and the layout of the page */
#grid-container {
  display: grid;
  grid-template-areas:
    "navbar"
    "nav-menu"
    "splash"
    "process"
    "examples"
    "contact"
    "footer"
    ;
  
  height: inherit;
}

/* first part of the page --- the navbar */
#navbar {
  grid-area: navbar;
  display: flex;
  justify-content: space-between;
  
  position: sticky;
  top: 0;
  
  width: 100%;
  
  background: white;
  border-top: var(--orange) 6px solid;
  color: black;
  z-index: 3;
  
  transition: .3s;
}

#navbar:hover {
  border-top: lightblue 6px solid;
  transition: .3s;
}


#navbar .logo {
  order: 1;
  
  padding: 2%;
}

#navbar li,
#navbar a {
  padding: 7%;
}

#navbar ul {
  display: inline-flex;
  
  padding: 0;
  
  list-style: none;
}

#navbar a,
#navbar a:visited {
  color: black;
  text-decoration: none;
}

#navbar a:hover {
  color: blue;
}

#navbar .nav-button {
  display: none;
  
  margin: auto 0;
  padding: 2%;
  
  cursor: pointer;
  font-size: 1.75em;
  
  transition: .3s;
}

#navbar .nav-button:hover {
  color: lightblue;
  
  transition: .2s;
}

@media screen and (max-width: 850px) {
  #navbar li, #navbar ul {
    display: none;
  }
  
  #navbar .nav-button {
    display: block;
  }
}

/* a part of the first part of the page --- the Menu */
#hiddenMenu {
  grid-area: nav-menu;
  
  display: none;
  
  position: sticky;
}

#hiddenMenu ul {
  margin: 2%;
  padding-left: 2%;
  
  justify-content: center;
  list-style: none;
}

#hiddenMenu li {
  padding: .25%;
}

#hiddenMenu a,
#hiddenMenu a:visited {
  color: black;
  text-decoration: none;
}

@media screen and (min-width: 850px) {
  #hiddenMenu {
    display: none;
  }
}

/* second part of the page --- the splash screen */
#splashScreen {
  grid-area: splash;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  
  align-items: center;
  justify-items: center;
  
  margin-bottom: 28px;
  
  min-height: 95vh;
  
  background: url("https://source.unsplash.com/daily?sky") fixed no-repeat center;
  background-size: cover;
  color: black;
  font-family: "Dancing Script", cursive;
  font-weight: 900;
  text-align: center;
  text-shadow: 0px 0px 15px white;
}

#splashScreen .very-heading {
  margin: 1%;
  
  font-size: 4em;
}

#splashScreen .sub-heading {
  margin: 0;
  
  font-family: var(--defaultFontFamily);
  font-size: 1.5em;
}

/* third part of the page --- the "What do we do?" screen */
#aboutScreen {
  grid-area: process;
  
  display: grid;
  grid-gap: 3%;
  grid-template-rows: repeat(1, .3fr);
  grid-template-areas:
    "header   header   header"
    "p1       p2       p3"
    ;
  
  
  margin: var(--margin);
  margin-top: 5% !important;
}

@media screen and (max-width: 850px) {
  #aboutScreen {
    grid-gap: 3%;
    grid-template-areas:
      "header"
      "p1"
      "p2"
      "p3"
      ;
    
    text-align: center;
  }
}

.heading {
  border-top: var(--gray) 6px solid;
}

@media screen and (max-width: 400px) {
  .heading {
    font-size: 1.5em;
  }
}

#aboutScreen .heading {
  grid-area: header;
  
  margin: var(--margin2);
}

.process-explanation {
  padding: 20px;
  margin-bottom: 30px;
  
  border-top: var(--darkerpeach) 6px solid;
  box-shadow: var(--box-shadow);
}

.icon-container {
  text-align: center;
}

.about-icons {
  position: relative;
  
  padding: .2em;
  
  background: var(--peach);
  border-radius: 50%;
  font-size: 2em;
  text-align: center;
}

#aboutScreen first {
  grid-area: p1;
}

#aboutScreen second {
  grid-area: p2;
}

#aboutScreen third {
  grid-area: p3;
}

/* fourth part of the page --- the examples  */
#exampleScreen {
  grid-area: examples;
  
  display: grid;
  grid-gap: 3%;
  grid-template-areas: 
    "header header header"
    "ex1    ex2    ex3"
    ".      ex4    .";
  
  justify-items: center;
  margin: var(--margin);
  margin-top: 2% !important;
}

@media screen and (max-width: 1050px) {
  #exampleScreen {
    grid-gap: 1%;
    grid-template-areas:
      "header header"
      "ex1    ex2"
      "ex3    ex4"
      ;
  }
}

@media screen and (max-width: 850px) {
  #exampleScreen {
    grid-gap: .5%;
    grid-template-areas:
      "header"
      "ex1"
      "ex2"
      "ex3"
      "ex4"
      ;
  }
}

.example-item {
  margin-bottom: 40px;
  padding: 40px 40px 30px;
  
  width: 80%;
  
  border-top: var(--peach) 6px solid;
  box-shadow: var(--box-shadow);
}

.img-container {
  height: 0px;

  margin-bottom: 70px;

  border-top: var(--peach) 6px solid;
  text-align: center;
}
  
.img-profile {
  position: relative;
  bottom: 60px;
    
  border-radius: 50%;
}

#exampleScreen > .heading {
  grid-area: header;
}

#exampleScreen .ex1 {grid-area: ex1}
#exampleScreen .ex2 {grid-area: ex2}
#exampleScreen .ex3 {grid-area: ex3}
#exampleScreen .ex4 {grid-area: ex4}

/* fifth part of the page --- the contact/links  */
#contactScreen {
  grid-area: contact;
  
  display: grid;
  grid-template-areas:
    "header   header    header"
    "form     form      form"
    ;
  
  justify-items: center;
  
  margin: var(--margin);
  margin-bottom: 5% !important;
}

#contactScreen > * {
  margin: 10px;
}

#contactScreen > .heading {
  grid-area: header;
}

#contactScreen .contact-form {
  grid-area: form;
  
  display: grid;
  grid-gap: 3%;
  grid-template-areas:
    "data message message";
  
  width: 90%;
}

@media screen and (max-width: 700px) {
  #contactScreen .contact-form {
    grid-template-areas:
      "data"
      "message"
      ;
  }
}
  

.contact-form .data {
  grid-area: data;
  
  display: grid;
  grid-gap: 4%;
  grid-template-rows: repeat(3, 1fr);
}

.contact-form input, 
.contact-form textarea,
.submit {
  padding: .5em;
  
  border: black 1px solid;
  border-radius: 4px;
  color: black;
  font-family: 'Cinzel';
  font-size: 1.2em;
}

@media screen and (max-width: 700px) {
  .contact-form input, 
  .contact-form textarea,
  .submit {
    font-size: 1em;
  }
}

@media screen and (max-width: 400px) {
  .contact-form input, 
  .contact-form textarea,
  .submit {
    padding: .4em;
    
  }
}

.contact-form .message {
  grid-area: message;
  
  display: grid;
  grid-gap: 2%;
  grid-template-rows: .7fr;
  
  width: 100%;
}

.message textarea {
  min-height: 200px;
  
  resize: none;
}

.submit {
  background: transparent;
  cursor: pointer;
}

.submit:hover {
  background: #efefef;
}

/* the final part of the page --- the footer */
#footer {
  grid-area: footer;
  
  display: flex;
  
  align-items: center;
  justify-content: space-between;
  
  padding: 2%;
  
  height: 10vh;
  
  background: #efefef;
  font-family: "Cinzel";
}

@media screen and (max-width: 700px) {
  html {
    font-size: 90%;
  }
}
              
            
!

JS

              
                $(document).ready(function() {

  $( ".nav-button" ).click(function() {
    $( "#hiddenMenu" ).toggle(0);
    }
  );

});
              
            
!
999px

Console