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

              
                <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="main.css">
    </head>

    <body>
        <!--Vertical Nav-->
    <nav id="navbar">
        <ul id="nav-list">
            <li id="list-item"><header><b>Bitcoin Documentation</header></p></li>
            <li id="list-item"><a class="nav-link" href="#Introduction_to_Bitcoin">Introduction to Bitcoin</a></li>
            <li id="list-item"><a class="nav-link" href="#Brief_History_of_Bitcoin">Brief History of Bitcoin</a></li>
            <li id="list-item"><a class="nav-link" href="#Why_is_Bitcoin_Important?">Why is Bitcoin Important?</a></li>
            <li id="list-item"><a class="nav-link" href="#How_to_Start_Investing?">How to Start Investing?</a></li>
            <li id="list-item"><a class="nav-link" href="#Learn_Crypto_Development">Learn Crypto Development</a></li>
            <li id="list-item"><a class="nav-link" href="#Examples_of_Crypto_Code">Examples of Crypto Code</a></li>
        </ul>
    </nav>

        <!-- Sections -->

        <div style="margin-left:25%;padding:1px 16px; height: 1000px;">
        <main id="main-doc">
            <div>
                <section class="main-section" id="Introduction_to_Bitcoin">
                    <header>Introduction to Bitcoin</header>
                    <p>As an electronic asset, you can buy bitcoins, own them, and 
                        send them to someone else.  Currently (Sep 2015) there are around 
                        14 million bitcoins that have been created, increasing by 25 bitcoins 
                        every 10 minutes or so, with an agreed limit of 21 million, the last of 
                        which should be created a little before the year 2140.
                    </p>
                    <p>
                        Bitcoins are created as a reward for a process known as mining. 
                        They can be exchanged for other currencies, products, and services.
                    </p>
                </section>
            </div>

            <!--Section 2-->
            <div>
                <section class="main-section" id="Brief_History_of_Bitcoin">
                    <header>Brief History of Bitcoin</header>
                    <p>Bitcoin was invented in 2008 by an unknown person or 
                        group of people using the name Satoshi Nakamoto and 
                        started in 2009 when its source code was released as 
                        open-source software.
                    </p>
                    <p>
                        The value of the first bitcoin transactions were negotiated 
                        by individuals on the bitcoin forum with one notable transaction 
                        of 10,000 BTC used to indirectly purchase two pizzas delivered by 
                        Papa John's.
                    </p>
                </section>
            </div>

            <!--Section 3-->
            <div>
                <section class="main-section" id="Why_is_Bitcoin_Important?">
                    <header>Why is Bitcoin Important?</header>
                    <p>Bitcoin offers an efficient means of transferring money over 
                        the internet and is controlled by a decentralized network with 
                        a transparent set of rules, thus presenting an alternative to 
                        central bank-controlled fiat money. There has been a lot of talk 
                        about how to price Bitcoin and we set out here to explore what 
                        the cryptocurrency's price might look like in the event it 
                        achieves further widespread adoption.
                    </p>
                    <p>
                        The practical consequence of solving this problem is that 
                        Bitcoin gives us, for the first time, a way for one Internet 
                        user to transfer a unique piece of digital property to another 
                        Internet user, such that the transfer is guaranteed to be safe and 
                        secure, everyone knows that the transfer has taken place, and nobody 
                        can challenge the legitimacy of the transfer. The consequences of 
                        this breakthrough are hard to overstate.
                    </p>
                </section>
            </div>

            <!-- Section 4-->
            <div>
                <section class="main-section" id="How_to_Start_Investing?">
                    <header>How to Start Investing?</header>
                    <p>Investing in Bitcoin can seem complicated, 
                        but it is much easier when you break it down into 
                        steps. You don't have to understand computer 
                        programming to realize that banks, businesses, 
                        the bold, and the brash are cashing in on 
                        cryptocurrencies. This guide will help you to 
                        get started, but always remember that Bitcoin 
                        investing carries a high degree of 
                        speculative risk.</p>

                        <p>Good apps to use to start investing today:</p>

                        <ul style="font-size: 15px; font-weight: 100;">
                            <li>Coinbase</li>
                            <li>Crypto-Monkey</li>
                            <li>Coin Lovers</li>
                            <li>BitMaster</li>
                            <li>CoinDragon</li>
                        </ul>
                </section>
            </div>

            <!-- Section 5-->
            <div>
                <section class="main-section" id="Learn_Crypto_Development">
                    <header>Learn Crypto Development</header>
                    <p>If you want to become a bitcoin developer then the first thing 
                        that you need to do is to read the Bitcoin Whitepaper by 
                        Satoshi Nakamoto. That whitepaper is essential 
                        reading for anyone who wants to get into the 
                        blockchain game. Not only did that white paper conceptualize the bitcoin, it also made us see how a byzantine fault tolerant system can function in a decentralized environment.
                        If you are keen on becoming a Bitcoin Developer, 
                        then it is important that you know how the 
                        blockchain works.</p>

                        <p>What's the salary of a blockchain developer in the United States? 
                            ZipRecruiter cites $157,893 for the average yearly wage for 
                            US blockchain developers.</p>
                        
                        <p>Also, in December, LinkedIn revealed its top five emerging careers 
                            and found blockchain developer was number one. ... 
                            While blockchain engineering is the most in-demand skill on 
                            the Hired marketplace, only 12% of survey respondents identified 
                            blockchain as the top technology they want to learn.</p>
                </section>
            </div>

            <!-- Section 6-->
            <!-- Section 5-->
            <div>
                <section class="main-section" id="Examples_of_Crypto_Code">
                    <header>Examples of Crypto Code</header>
                    <p>Don't be intimidated by cryptocurrencies. They are really
                        not that complicated at the end of the day. Anyone can learn 
                        about developing them and eventually become a great developer one day!
                    </p>
                    <p> Here are some samples of the code that goes into cryptocurrencies so that you 
                        get a sense for the look and feel.
                    </p>
                    <div class="source-code">
                    <code>
                        {
                            "status": {
                            "timestamp": "2018-06-02T22:51:28.209Z",
                            "elapsed": 10
                            },
                            "data": {
                            "id": "1e31218a-e44e-4285-820c-8282ee222035",
                            "symbol": "BTC",
                            "name": "Bitcoin",
                            "slug": "bitcoin",
                            "market_data": {}
                            }
                            }
                    </code>
                    </div>

                    <div class="source-code">
                        <code>
                            {
                                "status": {
                                "timestamp": "2018-06-02T22:51:28.209Z",
                                "elapsed": 10
                                },
                                "data": {
                                "id": "1e31218a-e44e-4285-820c-8282ee222035",
                                "symbol": "BTC",
                                "name": "Bitcoin",
                                "slug": "bitcoin",
                                "market_data": {}
                                }
                                }
                        </code>
                        </div>

                        <div class="source-code">
                            <code>
                                {
                                    "status": {
                                    "timestamp": "2018-06-02T22:51:28.209Z",
                                    "elapsed": 10
                                    },
                                    "data": {
                                    "id": "1e31218a-e44e-4285-820c-8282ee222035",
                                    "symbol": "BTC",
                                    "name": "Bitcoin",
                                    "slug": "bitcoin",
                                    "market_data": {}
                                    }
                                    }
                            </code>
                            </div>

                            <div class="source-code">
                                <code>
                                    {
                                        "status": {
                                        "timestamp": "2018-06-02T22:51:28.209Z",
                                        "elapsed": 10
                                        },
                                        "data": {
                                        "id": "1e31218a-e44e-4285-820c-8282ee222035",
                                        "symbol": "BTC",
                                        "name": "Bitcoin",
                                        "slug": "bitcoin",
                                        "market_data": {}
                                        }
                                        }
                                </code>
                                </div>

                                <div class="source-code">
                                    <code>
                                        {
                                            "status": {
                                            "timestamp": "2018-06-02T22:51:28.209Z",
                                            "elapsed": 10
                                            },
                                            "data": {
                                            "id": "1e31218a-e44e-4285-820c-8282ee222035",
                                            "symbol": "BTC",
                                            "name": "Bitcoin",
                                            "slug": "bitcoin",
                                            "market_data": {}
                                            }
                                            }
                                    </code>
                                    </div>

                    
                </section>
            </div>

        </main>
        </div>

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

</html>
              
            
!

CSS

              
                body {
    margin: 0;
} 

#navbar {
    position: fixed;
}

#nav-list  {
    list-style-type: none;
    margin:0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
}

#list-item:first-child{
    border-bottom: 1px solid black;
}

#list-item a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
    border-bottom: 1px solid black;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}

/* Main Text */
header {
    font-size: 25px;
    font-weight: 300;
}

p {
    font-weight:100;
}

/* source code sections*/
.source-code {
    margin-bottom: 25px;
}

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console