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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

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

<body>
  <nav id="navbar">
    <header> <h1><strong> BLUE: </strong> Microphones</h1> </header>
      <img id="logo" class="logo" src="https://www.bluedesigns.com/img/layout/logo-inverted.svg">
  <a class="nav-link" id="blue" href="#blue">BLUE</a>
  <a class="nav-link" id="products" href="#products">Products</a>
  <a class="nav-link" id="yeti" href="#yeti">Yeti</a>
  <a class="nav-link" id="snowball" href="#snowball">Snowball</a>
  <a class="nav-link" id="raspberry" href="#raspberry">Raspberry</a>
  <a class="nav-link" id="mouse" href="#mouse">Mouse</a>
</nav>
<main id="main-doc">
  <code>
  <div>
  <section class="main-section" id="blue">
    <header> <h1>BLUE<h1>
    </header>
      <p>The <em>BLUE </em>company produces mulitple products strongly centered around  microphones, headphones, recording tools, signal processors, and music accessories for audio professionals, musicians and consumers.<em> BLUE</em> Microphones was founded in 1995 by an American session musician, Skipper Wise, and a Latvian recording engineer, Martins Saulespurens. The company's name is an acronym for Baltic Latvian Universal Electronics. The company is headquartered in Westlake Village, California, United States. In 2008, Skipper and Martins sold <em>BLUE</em> Microphones to Transom Capital, a private Equity firm from Southern California. In 2013, The Riverside Company acquired <em>BLUE</em> Microphones from Transom Capital. Intrepid Investment Bankers advised <em>BLUE</em> Microphones in the transaction. In July 2018, Logitech announced plans to acquire Blue Microphones for US$117 million. </p>
  </section>
      </div>
      <hr>
    <div>
  <section class="main-section" id="products">
    <header> <h1>Products</h1>
    </header>
    <p><em>BLUE</em> designs and produces a plethora of products based around recording equipment. Many of their most popular items are the incredible microphones they design. Each one is designed for a specific purpose, but each one is easy to use, protable, and reliable. </p>
    <p> The <em>BLUE</em> corporation produces a vast variety of products based around sound systems and musical equipment. The products are all very well made, and each one is tested and approved before it is packaged and sold. The microphones listed above are the most popular of all of their products. Their headphones are also quite popular, but not nearly as popular as the headphones.
    </p>
    <p> All of <em>BLUE's</em> products are made in the United States and are shipped throughout the nation. They provide microphones and microphone attachments to producers of podcasts, musicians, and podcast recorders. Their products make recording as simple as riding a bike. Each of their products come with diffrent warranties based on where they weere purchased and what product it is, but everyone of them is a great product for any user.
    </p>
  </section>
    </div>
    <hr>
    <div>
    <section class="main-section" id="yeti">
      <header><h1>Yeti</h1>
        <img class="picture" id="yeti_img" src="https://images-na.ssl-images-amazon.com/images/I/31x6BMp-l%2BL.jpg">
        <img class="picture" id="yeti_img" src="https://images-na.ssl-images-amazon.com/images/I/7131%2Bx9eTGL._SY550_.jpg">
        <img class="picture" id="yeti_img" src="https://images-na.ssl-images-amazon.com/images/I/71QZUU-JJjL._SL1500_.jpg">
      </header>
      <p> The Yeti is the most popular of all of the <em>BLUE</em> microphones for its diverse uses and exceptional sound quality. Many podcast users use the Yeti to record their sessions whether they have one person on the show or multiple. One consumer said: <samp>"It's easy to set up, merely connect the included cable into both the microphone and usb port on your PC. The instructions are very clear and briefly describes the different modes the microphone has. What I really like about it is that it also tells you what the different modes are recommended for."</samp>
      </p>
      
      <h3>Settings</h3>
      <var>
      <p>The Yeti is a protable microphone with four different audio settings:
        <ol><li><kbd>stereo mode:</kbd> uses both left and right channels to capture a wide, realistic sound image.</li>
          <li><kbd>cardiod mode:</kbd> records sounds directly in front of the microphone, mostly for one party uses. </li>
          <li><kbd>omnidirectional mode:</kbd> picks up sounds from all directions around the microphone. </li>
          <li><kbd>bidirectional mode:</kbd> allows for dual useage from the front and back of the microphone.</li>
        </ol>
        </var>
      </p>
      </section>
  </div>
  <hr>
  <div>
  <section class="main-section" id="snowball">
    <header><h1>Snowball</h1>
      <img class="picture" id="snowball_img" src="https://images-na.ssl-images-amazon.com/images/I/81R1HMv5VEL._SX425_.jpg">
      <img class="picture" id="snowball_img" src="https://www.adorama.com/images/Large/micbsnwblnbl.jpg">
      <img class="picture" id="snowball_img" src="https://images-na.ssl-images-amazon.com/images/I/61kWi--WofL._SX425_.jpg">
    </header>
    <p> The Snowball is a light-weight portable microphone with a tripod-like style. It has colapsable legs which allow the microphone to be easily carried around and set up. The sleek design is made to represent it's name in that it is small and roung, like a snowball! Another consumer commented: <samp>"The threaded section of the Snowball pivots slightly, so you can adjust it forward or backward."</samp>
    </p>
    
    <h3>Settings</h3>
    <var>
    <p>The Snowball is the most afordable of the four microphones, but it is still a very nice microphone. Like the Yeti, it has three settings:
     <ol> <li>The <kbd>first</kbd> setting is a single directional recording facing directly in fron tof the microphone. It cancels most ambient noise.</li>
        <li> The <kbd>second</kbd> is a dircetional recording, but has ambient noise in the backround. </li>
        <li> The <kbd>third</kbd> is the omnidirectional feature which records all around the microphone and picks up the most ambient noise. </li>
        </ol>
    </var>
    </p>
  </section>
  </div>
  <hr>
  <div>
  <section class="main-section" id="raspberry">
    <header><h1>Raspberry</h1>
      <img class="picture" id="raspberry_img" src="https://images-na.ssl-images-amazon.com/images/I/81BoX9-smBL._SX425_.jpg">
      <img class="picture" id="raspberry_img" src="https://images-na.ssl-images-amazon.com/images/I/41BaV4XjkwL._SL500_AC_SS350_.jpg">
    </header>
    <p>The raspberry is a small compact microphone that works with most mobile devices and headphones. While it does not have different settings like the Yeti or Snowball, it is a very nice retro styled microphone with high sound quality and ease of use.
    </p>
  </section>
    </div>
  <hr>
  <div>
  <section class="main-section" id="mouse">
    <header><h1>Mouse</h1>
      <img class="picture" id="mouse_img" src="https://media.musiciansfriend.com/is/image/MMGS7/Mouse-Microphone/279000000000000-00-500x500.jpg">
      <img class="picture" id="mouse_img" src="https://cdn3.volusion.com/jhgd6.7duqs/v/vspfiles/photos/BLUE-MOUSE-2.jpg?1539168066">
    </header>
    <p>The <em>Blue</em> Mouse Microphone is one of the most versatile and snazzy-looking mics you'll ever lay eyes on. With a unique rotating capsule, the Mouse mic is a cardioid condenser which employs a hand-built single-membrane, large diaphragm capsule. Enclosed within a rotating spherical grille, the capsule can be positioned and adjusted in the smallest of spaces. Perfectly suited for broadcast and voiceover work, you'll find The Mouse equally at home in front of a kick drum, acoustic bass, electric bass amplifier, snare drum and any other sources where accurate reproduction of low frequency transients is desired. The amplifier consists of top-grade components such as polystyrene capacitors, metal film resistors, and hand-wound output transformers. The capsule is shockmounted in both the grille assembly and within the rotating grille armature to eliminate all outside low-end interference.
    </p>
  </section>
  </div>
  <hr>
  </code>
</main>

</body>
              
            
!

CSS

              
                @media only screen and (min-width: 1000px) {
  #nav-bar {
    align-item: stretch;
    justify-content: flex-start;
  }
}
body {
  display: flex;
  font: 18px arial, sans-serif;
  background: #CBD1FF;
}
nav {
  display: flex;
  flex-direction: column;
  border: 2px solid #2B3160;
  position: fixed;
  width: 15%;
}
main {
 padding-left: 20%;
 
}
.logo {
  width: 50%;
}
.picture {
  width: 15%;
  padding-left: 15%;
}

              
            
!

JS

              
                
              
            
!
999px

Console