A Pen by Rachel Blades

Thumbnail
This awesome code was written by 1bladesforhire, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 1bladesforhire ©
  • HTML
  • CSS
  • JavaScript
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<nav id="navbar">
<header>Technical documentation</header>
<a href="#Javascript_and_Java" class="nav-link">Javascript and Java</a>
<a href="#Song_lyrics" class="nav-link">Song lyrics</a>
<a href="#colors" class="nav-link">colors</a>
<a href="#Ice_cream_flavors" class="nav-link">Ice cream flavors</a>
  <a href="#Fruits" class="nav-link">fruits</a>
</nav>


<main id="main-doc">
  <h1>Weird reqs</h1>
    <section class="main-section" id="Javascript_and_Java" >
        <header>Javascript and Java</header>
        <p>single line comments<code>//this is a comment</code></p>
        <p>multi line comments
            <code>/* you can have many lines/*</code>
        </p>
        <p>return statements
            <code>return String;</code>
        </p>
        <p>objects
            <code>
                function Car(wheels, doors) {
                    this.wheels = wheels,
                    this.doors = doors
                }
            </code>
        </p>
        <p>constructors
            <code>
                let transam = new Car();
            </code>
        </p>
    </section>
    <section class="main-section" id="Song_lyrics">
      <header>Song lyrics</header>
      <p>
      <ul>
        <li>Once</li>
        <li>Twice</li>
        <li>Three</li>
        <li>Times a </li>
        <li>Lady</li>
    </ul></p></section>
    <section class="main-section" id="colors">
      <header>colors</header>
      <p>Blue or green only</p>
    </section>
    <section class="main-section" id="Ice_cream_flavors">
      <header>Ice cream flavors</header>
      <p>All of them</p>
  </section>
   <section class="main-section" id="Fruits">
     <header>Fruits</header>
     <p>Tomtoes are technically fruits.</p>
     <p>I prefer sweet fruits like pineapple.</p>
  </section>
</main>

/*Downloaded from https://www.codeseek.co/1bladesforhire/a-pen-by-rachel-blades-OEbyXd */
    #navbar {
  position: fixed;
  left: 20px;
  display: block;
  width:250px;
  top: 50px;
  
  a{
    float:left;
    width:100%;
    }
}
main{
  float:left;
  margin-left: 270px;
}
@media (max-width: 480px){
  #navbar{
    position: fixed;
    float: none;
    height: 50px;
    overflow-y:scroll;
  }
}


/*Downloaded from https://www.codeseek.co/1bladesforhire/a-pen-by-rachel-blades-OEbyXd */
    

Comments