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

              
                </script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"> </script>
<!--- disbaled --->
<link rel="preconnect stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:300,500,700|Space+Mono" media="all" type="text/css">
<div id="outer">
<header id="header">
  <nav id="nav-bar">
    <div class="logo">
      <a href="#outer">
        <img src="https://techedemic.com/wp-content/uploads/2014/08/raspberry-pi-xl.gif" alt="Raspberry Pi logo" id="header-img">
      </a>
    </div>
    <ul style="list-style: none">
      <li><a class="nav-link" href="#about">About</a></li>
      <li><a class="nav-link" href="#specs">Device Specs</a></li>
      <li><a class="nav-link" href="#review">Review</a></li>
      <li><a class="nav-link" href="#buy">Buy Now</a></li>
    </ul>
  </nav>
</header>
<div class="container">
</div>
<h2 class="head-1">
  Join our mailing list
</h2>
  <p class="head-1">
    Keep up to date with all the latest information by joining our mailing list
  </p>
  <form id="form" action="https://www.freecodecamp.com/email-submit"> 
      <input name="email" id="email" type="email" placeholder="Please enter your email..." required>
      <input id="submit" type="submit" value="Submit" class="submition">
    </form>
  <hr id="about" class="break">
<div class="about">
  <h1 class="head-2">How it all started</h1>
  <p class="text-info">
  <img src="https://cdn-shop.adafruit.com/970x728/3775-09.jpg" alt="Raspberry pi Device" id="device" class="pic-1">
  The Raspberry Pi is a series of small single-board computers developed in the United Kingdom by the Raspberry Pi Foundation to promote the teaching of basic computer science in schools and in developing countries. The original model became far more popular than anticipated, selling outside its target market for uses such as robotics. It does not include peripherals (such as keyboards and mice) and cases. However, some accessories have been included in several official and unofficial bundles.
<br>
The organisation behind the Raspberry Pi consists of two arms. The first two models were developed by the Raspberry Pi Foundation. After the Pi Model B was released, the Foundation set up Raspberry Pi Trading, with Eben Upton as CEO, to develop the third model, the B+. Raspberry Pi Trading is responsible for developing the technology while the Foundation is an educational charity to promote the teaching of basic computer science in schools and in developing countries.
<br>
According to the Raspberry Pi Foundation, more than 5 million Raspberry Pis were sold by February 2015, making it the best-selling British computer. By November 2016 they had sold 11 million units, and 12.5m by March 2017, making it the third best-selling "general purpose computer". In July 2017, sales reached nearly 15 million. In March 2018, sales reached 19 million.
<br>
Most Pis are made in a Sony factory in Pencoed, Wales; some are made in China or Japan.
  </p>
  </div>
  <hr class="break" id="specs">
  <div class="specs">
    <h1 class="head-1">
      Raspberry Pi 3 Specifications
    </h1>
    <p>
      <img src="https://cdn-shop.adafruit.com/970x728/3775-04.jpg" alt="Raspberry pi Device" id="device" class="pic-2">
      <strong>SoC:</strong> Broadcom BCM2837
      <br>
      <strong>CPU:</strong> 4× ARM Cortex-A53, 1.2GHz
      <br>
      <strong>GPU:</strong> Broadcom VideoCore IV
      <br>
      <strong>RAM:</strong> 1GB LPDDR2 (900 MHz)
      <br>
      <strong>Networking:</strong> 10/100 Ethernet, 2.4GHz 802.11n wireless
      <br>
      <strong>Bluetooth:</strong> Bluetooth 4.1 Classic, Bluetooth Low Energy
      <br>
      <strong>Storage:</strong> microSD
      <br>
      <strong>GPIO:</strong> 40-pin header, populated
      <br>
      <strong>Ports:</strong> HDMI, 3.5mm analogue audio-video jack, 4× USB 2.0, Ethernet, Camera Serial Interface (CSI), Display Serial Interface (DSI)
    </p>
  </div>
  <hr class="break" id="review">
  <hr class="break">
  <div class="review">
    <iframe id="video" width="560" height="315" src="https://www.youtube-nocookie.com/embed/IwsaWDad6TY?rel=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>
  <hr id="buy" class="break">
  <div class="buy">
    <h1>
      Go ahead and treat yourself
    </h1>
    <p>
      
    </p>
    <img src="https://cdn-shop.adafruit.com/970x728/3775-07.jpg" alt="Raspberry pi Device" id="device-2">
    <p>
       1.4GHz 64-bit quad-core processor, dual-band wireless LAN, Bluetooth 4.2/BLE, faster Ethernet, and Power-over-Ethernet support (with separate PoE HAT)
      <br>
      All that technology in one little credit card sized computer for only $35 bucks, whats not to love?
    </p>
    <h2>
      $35.00
    </h2>
    <button id="buy-now" onclick=" window.open('https://www.adafruit.com/product/3775?src=raspberrypi','_blank')"> Buy Now</button>
  </div>
  <hr class="break">
  <footer>
    <ul style="list-style: none">
      <li><a target="_blank" href="https://www.raspberrypi.org/contact/">Contact</a></li>
    </ul>
    <span> &copy;2018 Raspberry Pi Foundation, All Rights Reserved.</span>
  </footer>
</div>
              
            
!

CSS

              
                * {
  font-family: rubik;
  @media screen and (max-width: 992px) {
  * {
    font-family: roboto;
  }
}
}
body {
  background-color: #eee;
}
#outer {
  position: relative;
}
#nav-bar {
  width: 100%;
}
.container {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  padding-top: 8%;
}
#header-img {
  position:fixed;
  float:left;
  top:-3%;
}
#device {
  height: 25%;
  width: 25%;
}
#device-2 {
  border-radius:25px;
  float:left;
  padding:5px;
  height:15%;
  width:20%;
}
.pic-1 {
  border-radius:25px;
  float:left;
  padding:15px;
}
.pic-2 {
  border-radius:25px;
  float:right;
  padding:5px;
  height:15%;
  width:20%;
}
#header {
  position: fixed;
  top: 0;
  width: 100%;
  min-height: 100px;
  padding: 0px 0px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #eee;
  box-shadow: 2px 2px 5px black;
  @media (max-width: 600px) {
    flex-wrap: wrap;
  }
}
ul {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #eee;
}

li {
    float: left;
}

li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 16px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #13f1d6;
}

.nav-link {
    background-color: #eee;
}
#form {
  text-align: center;
}
.head-1 {
  text-align:center;
}
.head-2 {
  text-align: right;
}
.about {
  background-color: grey;
  padding: 15px;
  width: ;
}
.break {
  border:none;
  padding-top:60px;
}
.specs {
  padding: 10px;
}
.review {
  display: flex;
  justify-content: center;
}
#buy-now {
  padding: 0 20px;
  height: 40px;
  font-size: 1em;
  font-weight: 900;
  border: 3px black solid;
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
}
#buy-now:hover {
  padding: 0 20px;
  height: 40px;
  font-size: 1em;
  font-weight: 900;
  border: 3px black solid;
  border-radius: 2px;
  background: cyan;
  cursor: pointer;
}
.buy {
  border: 4px black solid;
  border-radius: 8px;
  padding-bottom: 45px;
}
footer {
  margin-top: 30px;
  background-color: #ddd;
  padding: 20px;
} 
  ul {
    display: flex;
    justify-content: flex-end;
}   
    li {
      padding: 0 10px;
}
  span {
    margin-top: 5px;
    display: flex;
    justify-content: flex-end;
    font-size: 0.9em;
    color: #000;
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console