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

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

<!-------------------NAVIGATION---------------------->
  <nav id="navbar">
 
    <header class="navheader">English Verb Tenses</header>
    
    <ul class="nav-list"> 
      <li class="intro"><a class="nav-link" href="#Introduction">Introduction</a></li>
    
      <li>
       <ul class="present">
        <li><a class="nav-link" href="#Present_Simple">Present Simple</a></li>
        <li><a class="nav-link" href="#Present_Continuous">Present Continuous</a></li>
        <li><a class="nav-link" href="#Present_Perfect">Present Perfect</a></li>
        <li><a class="nav-link" href="#Present_Perfect_Continuous">Present Perfect Continuous</a></li>
        </ul>
      </li>
    
      <li> 
       <ul class="past">
        <li><a class="nav-link" href="#Past_Simple">Past Simple</a></li>
        <li><a class="nav-link" href="#Past_Continuous">Past Continuous</a></li>
        <li><a class="nav-link" href="#Past_Perfect">Past Perfect</a></li>
        <li><a class="nav-link" href="#Past_Perfect_Continuous">Past Perfect Continuous</a></li>
        </ul>
      </li>
    
      <li>
       <ul class="future">
        <li><a class="nav-link" href="#Future_Simple">Future Simple</a></li>
        <li><a class="nav-link" href="#Future_Continuous">Future Continuous</a></li>
        <li><a class="nav-link" href="#Future_Perfect">Future Perfect</a></li>
        <li><a class="nav-link" href="#Future_Perfect_Continuous">Future Perfect Continuous</a></li>
        </ul>
      </li>          
    </ul>    
  </nav>
<!------------------MAIN-------------------------->
<main id="main-doc">
  <article>
    <h1>English Verb Tenses</h1>
    <section id="Introduction" class="main-section">
      <header>Introduction</header>
      <p>English verbs come in three tenses: past, present, and future. The past is used to describe things that have already happened (e.g., earlier in the day, yesterday, last week, three years ago). The present tense is used to describe things that are happening right now, or things that are continuous. The future tense describes things that have yet to happen (e.g., later, tomorrow, next week, next year, three years from now).</p>
    </section>
      <!----------------------------------------------->    
    <section id="Present_Simple" class="main-section">
      <header>Present Simple</header>
      <p>The present simple is a verb tense with two main uses:</p>
      <ul>
        <li>We use the present simple tense when an action is happening right now, or when it happens regularly (or unceasingly, which is why it’s sometimes called present indefinite).</li>       
      </ul>
      <p class="example">I feel great! Pauline loves pie. I’m sorry to hear that you’re sick.</p>
      <ul>
        <li>We also use the present simple to talk about habitual actions or occurrences.</li>
      </ul>
      <p class="example">Pauline practices the piano every day. Ms. Jackson travels during the summer. Hamsters run all night.</p>
    </section>
      <!-----------------------------------------------> 
    <section id="Present_Continuous" class="main-section">
      <header>Present Continuous</header>
      <p>The present continuous verb tense indicates that an action or condition is happening now, frequently, and may continue into the future.</p>
      <p>The present continuous formula: <code>to be [am, is, are] + verb [present participle]</code></p>
      <p class="example">Aunt Christine is warming up the car while Scott looks for his new leather coat. They are eating at Scott’s favorite restaurant today, Polly’s Pancake Diner.</p>
    </section>
     <!----------------------------------------------->    
    <section id="Present_Perfect" class="main-section">
      <header>Present Perfect</header>
      <p>The present perfect tense refers to an action or state that either occurred at an indefinite time in the past (e.g., we have talked before) or began in the past and continued to the present time (e.g., he has grown impatient over the last hour).</p>
      <p>The present perfect formula: <code>have/has + the past participle.</code></p>
      <p>The important thing to remember about the present perfect is that you can’t use it when you are being specific about when it happened.</p>
      <p><span class="correct">Correct</span>I have discovered the fountain of youth!</p>
      <p><span class="incorrect">Incorrect</span>I have discovered the fountain of youth yesterday!</p>      
    </section>
    <!-----------------------------------------------> 
    <section id="Present_Perfect_Continuous" class="main-section">
      <header>Present Perfect Continuous</header>
      <p>The present perfect continuous tense (also known as the present perfect progressive tense) shows that something started in the past and is continuing at the present time.</p>
      <p>The present perfect continuous formula: <code>has/have been + the present participle (root + -ing).</code></p>
      <p class="example">I have been eating a lot of pizza today (and I still am eating pizza).</p>
      <p class="example">He has been living in Medellin for 3 years (and he still lives there).</p>
    </section>
    <!-----------------------------------------------> 
    <section id="Past_Simple" class="main-section">
      <header>Past Simple</header>
      <p>The simple past is a verb tense that is used to talk about things that happened or existed before now. The simple past tense shows that you are talking about something that has already happened; it emphasizes that the action is finished.</p>
      <p class="example">I jumped out of an airplane last night.</p>
      <p class="example">I was cool when I was young (but not now).</p>
      <p>The past simple formula:
        <ul>
          <li><code>For regular verbs, add -ed to the root form of the verb (or just -d if the root form already ends in an e)</code>
            <ul class="sublist">
              <li>Jump<i class="fas fa-arrow-right"></i>Jumped</li>
              <li>Play<i class="fas fa-arrow-right"></i>Played</li>
              <li>Kiss<i class="fas fa-arrow-right"></i>Kissed</li>
            </ul>
          </li>
          <li><code>For irregular verbs, things get more complicated. These you'll just have to memorize!</code>
            <ul class="sublist">
              <li>Go<i class="fas fa-arrow-right"></i>Went</li>
              <li>Am<i class="fas fa-arrow-right"></i>Was</li>
              <li>See<i class="fas fa-arrow-right"></i>Saw</li>
            </ul>
          </li>
        </ul>
      </p>      
    </section>
    <!-----------------------------------------------> 
    <section id="Past_Continuous" class="main-section">
      <header>Past Continuous</header>
      <p>The past continuous tense, also known as the past progressive tense, refers to a continuing action or state that was happening at some point in the past.</p>
      <p>The past continuous formula: <code>the past tense of to be (i.e., was/were) + the verb’s present participle (-ing word).</code></p>
      <p>There are many situations in which this verb tense might be used in a sentence. For example, it is often used to describe conditions that existed in the past.</p>
      <p class="example">The sun was shining every day that summer.</p>
      <p>It can also be used to describe something that was happening continuously in the past when another action interrupted it.</p>
      <p class="example">The audience was applauding until he fell off the stage.</p>
    </section>
    <!-----------------------------------------------> 
    <section id="Past_Perfect" class="main-section">
      <header>Past Perfect</header>
      <p>The past perfect, also called the pluperfect, is a verb tense used to talk about actions that were completed before some point in the past.</p>
      <p class="example">I had just finished my meal when the cops came bursting through the door.</p>
      <p>The past perfect formula: <code>had + [past participle].</code> It doesn’t matter if the subject is singular or plural; the formula doesn’t change.</p>
      <p class="example">They had lived in the city for a long time before the fire occured.</p>
    </section>
    <!-----------------------------------------------> 
    <section id="Past_Perfect_Continuous" class="main-section">
      <header>Past Perfect Continuous</header>
      <p>The past perfect continuous tense (also known as the past perfect progressive tense) shows that an action that started in the past continued up until another time in the past.</p>
      <p>The past perfect continuous formula: <code>had been + the verb’s present participle (root + -ing).</code></p>
      <p class="example">Martha had been walking three miles a day before she broke her leg.</p>
      <p class="example">He had been drinking milk out the carton when Mom walked into the kitchen.</p>
    </section>
    <!-----------------------------------------------> 
    <section id="Future_Simple" class="main-section">
      <header>Future Simple</header>
      <p>The simple future is a verb tense that’s used to talk about things that haven’t happened yet. Use the simple future to talk about an action or condition that will begin and end in the future. </p>
      <p class="example">This year, Jen will read War and Peace. It will be hard, but she’s determined to do it.</p>
      <p>The formula for the simple future: <code>will + [root form of verb].</code></p>
      <p>To make the simple future negative, the formula is <code>will + not + [root form].</code></p>
      <div class="watch-out">
        <p><span class="incorrect">Watch Out!</span></p>
        <p>When used in a contraction the form changes. Take the following example:</p>
      
        <p><span class="original">Original:</span> I will not go to the movies later.</p>
      <p><span class="incorrect">Incorrect</span>I willn't go to the movies later.</p>
      <p><span class="correct">Correct</span>I won't go to the movies later.</p> 
        </div>
    </section>
    <!-----------------------------------------------> 
    <section id="Future_Continuous" class="main-section">
      <header>Future Continuous</header>
      <p>The future continuous tense, sometimes also referred to as the future progressive tense, is a verb tense that indicates that something will occur in the future and continue for an expected length of time.</p>
      <p>It is formed using the construction: <code>will + be + the present participle (the root verb + -ing).</code></p>
      <p class="example">At five o’clock, I will be meeting with the management about my raise.</p>
      <p class="example">Michael will be running a marathon this Saturday.</p>
    </section>
    <!-----------------------------------------------> 
    <section id="Future_Perfect" class="main-section">
      <header>Future Perfect</header>
      <p>The future perfect is a verb tense used for actions that will be completed before some other point in the future.</p>
      <p class="example">The parade will have ended by the time Chester gets out of bed.</p> 
      <p class="example">At eight o’clock I will have left.</p>
      <p>The formula for the future perfect tense is: <code>will have + [past participle].</code> It doesn’t matter if the subject of your sentence is singular or plural. The formula doesn’t change.</p>
    </section>
    <!-----------------------------------------------> 
    <section id="Future_Perfect_Continuous" class="main-section">
      <header>Future Perfect Continuous</header>
      <p>The future perfect continuous, also sometimes called the future perfect progressive, is a verb tense that describes actions that will continue up until a point in the future.</p>
      <p>The future perfect continuous formula is: <code>will + have + been + the verb’s present participle (verb root + -ing).</code></p> 
      <p class="example">In November, I will have been working at my company for three years.</p>
      <p class="example">When I turn thirty, I will have been playing piano for twenty-one years.</p>
    </section> 
    
    <footer><p>All information, and most examples, taken from <a target="_blank" href="https://www.grammarly.com/blog/verb-tenses/">Grammarly</a></p></footer>
  </article>
</main>
    
              
            
!

CSS

              
                
html {
  font-size: 100%;
  font-family: 'Lato', 'Roboto', sans-serif;
  scroll-behavior: smooth;
}

body {
  background: #7DB4B5;
}

* {
  margin: 0;
  padding: 0; 
  box-sizing: border-box;
}

header {         /****GLOBAL HEADER STYLE****/
  font-family: 'Roboto';
}

/************NAVIGATION (MOBILE VIEW)**********************/

#navbar {
  position: fixed;
  width: 100%;
  border: 6px solid black;
  border-radius: 23px;
  z-index: 10;
}

.navheader {
  text-align: center;
  font-size: 120%;
  padding: 10px;
  background: #680148;
  color: white;
  border-radius: 15px 15px 0 0;
}

.nav-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 0.2fr 1fr;
  grid-template-areas:
    "intro intro intro"
    "pres past fut";
  grid-gap: 5px; 
  font-size: 70%;
  text-align: center;  
  padding: 15px 5px 5px 5px;
  background: white; 
  border-radius: 0 0 15px 15px;
  overflow: auto;
}
/*******NAV-LIST STYLE/GRID*******/
.nav-list > li {
    list-style: none;
  }

.intro {
  grid-area: intro;
  font-size: 120%;
  margin-top: -10px;
  text-decoration: underline;
}
.present {
  grid-area: pres;
  list-style: none;
  line-height: 1.3;
  margin-top: -10px;
}
.past {
  grid-area: past;
  list-style: none;
  line-height: 1.3;
  margin-top: -10px;
}
.future {
  grid-area: fut;
  list-style: none;
  line-height: 1.3;
  margin-top: -10px;
}
/*******ANCHOR STYLE******/
.nav-link {
  color: #680148;
  text-decoration: none;
}
.intro a:hover, .present a:hover, .past a:hover, .future a:hover {
  color: #23B8E5;
}
/******************NAVBOX MEDIA QUERIES***************/
@media (min-width: 767px) {  
  #navbar {
    min-width: 259px;
    max-width: 260px;
    top: 20px;
    left: 20px;
    overflow: hidden;
  }
  
  .nav-list {
    display: block;
    width: 100%; 
    height: 100%;
    font-size: 100%;
    text-align: left;
    border: none;
    overflow: auto;
  }
  
 .navheader {
  font-size: 120%;
}
  
 .present, .past, .future {
    margin: 5px;
    list-style: none;
  }
}

@media (max-height: 442px) {
  .nav-list {
    font-size: 80%;
}
}
/*  #navbar {
    height: 90vh;
  }
}*/
/***************************************************/
/**********************MAIN***************************/
main {
  position: relative;
  top: 220px;
  padding: 10px;
  max-width: 100vw;
  background: #7DB4B5; /***#7DB4B5***/
}
/****************MAIN MEDIA QUERIES***********/
@media (min-width: 323px) {
  main{
    top: 180px;
  }
}

@media (min-width: 767px){
main {
  max-width: 60vw;
  left: 290px;
  top: 0px;
}
}
  
@media (min-width: 1000px) {
  main {
    max-width: 69vw;
  }
}
/***********************************************/
header:not(.navheader) { /***Styling for main content headers**/
  font-size: 2rem;
  margin-left: 10px;
  margin-bottom: 5px;
  text-decoration: underline;
}

h1 {
  text-align: center;
  margin-top: 10px;
  background : #E0EFF1;
  border: 6px solid black;
  border-radius: 20px;
}

p {
  margin: 10px;
}

.main-section {
  padding: 10px;  
  margin: 25px auto;
  background : #E0EFF1;
  border-radius: 20px;
}

.main-section > ul {
  margin-left: 30px;
}

.example {
  font-style: italic;
  margin-left: 45px;
  line-height: 1.3;
}
.example:before {
  content: "Example:";
  margin-right: 20px;
  font-weight: bold;
}

code {  
  background: #680148;
  color: white;
  box-shadow: 0 0 0 2px #680148;
}

.correct {
  color: green;
  margin-left: 25px;
  margin-right: 15px;
}

.incorrect {
  color: red;
  margin-left: 15px;
  margin-right: 15px;
}

.fa-arrow-right {
  margin: 0 5px;
}

.sublist {
  margin-left: 20px;
}

.watch-out {
  position: relative;
  left: 25%;
  width: 50%;
  text-align: center;
  border: solid;
  background: white;
}

.original {
  margin-left: 30px;
  margin-right: 10px;
  color: #680148;
}
/**********FOOTER***************/

footer {
  text-align: center;
}

/*******MOBILE VIEW SCROLLING FIX**********/
.main-section  {
   z-index: 1;
   position: relative;
   border-top: 180px solid transparent;
   margin: -160px 0 0;
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
}

.main-section:before {   
    content: "";
    position: absolute;
    z-index: -1;
    top: -5px;
    right: -6px;
    bottom: 0px;
    left: -6px;
    border: 6px solid black;
    background: transparent;
    border-radius: 20px;
}

/********************SCROLL FIX MEDIA QUERIES************/
@media (min-width: 342px) {
.main-section  { 
   border-top: 160px solid transparent;
   margin: -140px 0 0;
}
}

@media (min-width: 397px) {
.main-section { 
   border-top: 160px solid transparent;
   margin: -140px 0 0;
}
  }
  
@media (min-width: 457px){
.main-section { 
   border-top: 140px solid transparent;
   margin: -120px 0 0;
}
  }
  
@media (min-width: 767px){
.main-section { 
   border-top: 0px solid transparent;
   margin: 20px 0 0;
}
  }

              
            
!

JS

              
                
              
            
!
999px

Console