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

              
                
<body>
    <div id="main-header">
        <div id="header-text">
            <h1>The ultimate Guide to Cryptocurrency</h1>
        </div>
        <nav id="navbar">
            <header>Crypto Documentation</header>
            <ul>
                <li><a href="#What_Is_Cryptocurrency" class="nav-link">What Is Cryptocurrency</a></li>
                <li><a href="#How_Is_Cryptocurrency_Created" class="nav-link">How Is Cryptocurrency Created</a></li>
                <li><a href="#Creating_Your_Own_Cryptocurrency" class="nav-link">Creating Your Own Cryptocurrency</a></li>
                <li><a href="#Types_Of_Cryptocurrency" class="nav-link">Types Of Cryptocurrency</a></li>
                <li><a href="#How_To_Get_And_Store_Cryptocurrency" class="nav-link">How To Get And Store
                        Cryptocurrency</a></li>
                <li><a href="#Cryptocurrency_Resources" class="nav-link">Cryptocurrency Resources</a></li>
                <li><a href="#References" class="nav-link">References</a></li>
            </ul>
        </nav>
    </div>
    <main id="main-doc">
        <section class="main-section" id="What_Is_Cryptocurrency">
            <header>What Is Cryptocurrency</header>
            <article>
                <p>Cryptocurrency is digitally encrypted money(hence, crypto currency)
                    Cryptocurrency is a decentralized, unfixed currency system that's stored on and validated by the
                    blockchain-versus being regulated by governments
                    or financial institutions.
                </p>
                <p>Bitcoin was the first currency.Since its conception in 2009 which occured
                    in response to the banking crisis and housing market crash hundred of other cryptocurrencies
                    have been created... and have failed.
                </p>
            </article>
        </section>
        <section class="main-section" id="How_Is_Cryptocurrency_Created">
            <header>How Is Cryptocurrency Created</header>
            <article>
                <p>
                    Cryptocurrency is released into the economy through the process
                    of mining.But how do these digital coins become a legitimate Crytocurrencyin the first place?
                </p>
                <p>Crytocurrency creation depends on the three main things</p>
                <ol>
                    <li><span> A community of people who believe in the purpose of the coin and network and who will
                            eventually mine and evangelize it</span>

                    </li>
                    <li>A code to create and encrypt the software and blockchain network on which the currency will
                        operate
                        (which is relatively easy as most cryptocurrencies are based on the open source code of
                        Bitcoin).

                    </li>
                    <li>The confidence of merchants to value and do busines with the currency, further
                        building trust among consumers, investors and the genral public.
                    </li>
                    There is obviously a lot more that goes into creating a Cryptocurrencybut these are the main three
                    elements that lead to
                    its legitimacy and acceptance.Third parties like WalletBuilders also offer to creaTE Cryptocurrency
                    for you.
                </ol>
            </article>
        </section>
        <section class="main-section" id="Creating_Your_Own_Cryptocurrency">

            <header>Creating Your Own Cryptocurrency </header>
            <article>
                <P>Nowadays, a lot of business are creating their own cryptocurrencies- through
                    a crowdfunding process known as initial coin offering(ICO).ICOs are when startups raise money by
                    creating their own digital token
                    that can be spent on current or future products or services.
                </p>
                <p>Companies who participate in ICOs exchange their token for established cryptocurrencies like
                    Bitcoin. some ICO investors keep their tokens for future use or trade them on Cryptocurrency
                    exchanges as they would stock.
                </p>
            </article>
        </section>
        <section class="main-section" id="Types_Of_Cryptocurrency">
            <header>Types Of Cryptocurrency</header>
            <article>
                <p>
                    As of today, there was <span>Over 2,500 active
                        cryptocurrencies
                    </span>
                    most pf which serve as more than a simple payment system.
                    Below we'll review a four of the most popular, listed from oldest to newest
                </p>
                <ol>
                    <li>
                        <h3>Bitcoin</h3>
                        Bitcoin
                        (BTC) is the first and most famous Crytocurrency. It's been around
                        for almost 10 years and has been hailed as the <span><q>digital gold</q></span>
                        of the industry.
                        <p>Today, 1 BTC is <span>is equal to $4,087.63USD</span>
                            .There are currently <code>17,433,963 BTC</code> in the circulation and the macx supply is <code>21million BTC</code>.
                        </p>
                    </li>
                    <li>
                        <h3>Litecoin</h3>
                        Created in the 2011, Litecoin (LTC) was intrioduced as the <q>silver</q> to
                        Bitcoin's <q>gold</q>. It was intended to be used as a lighter, more nimble currency for
                        everyday
                        transactions.Litecoin is replica of Bitcoin just on a much more flexible algorithm.
                        <p>Today, 1 LTC is <span>equal TO $32.42 USD</span>
                            . There are currently<code> 59,665,588 LTC</code> in circulation and the max supply is<code> 84 million LTC</code>
                        </p>
                    </li>
                    <li>
                        <h3>XRP by Ripple</h3>
                        XRP is the cryptocurrency released by Ripple. Founded
                        in 2012, Ripple was formed to expedite and improve cross-border payment
                        transfers and the global payments system as awhole. The company itself is more
                        of a network process IOUs and XRP serves as a currency
                        transfer tool and token against spam - the currency
                        itself holds no real value(meaning you can't buy anything with it).
                        <p>Ripple is designed XRP to function on a unique
                            blockchain that validates its transactions over 200 times faster
                            than Bitcoin. XRP also requires no mining - the only way to attain the currency is to
                            purchase
                            it on a cryptocurrency exchange.</p>
                        <p>Today, 1 XRP is <span>equal to $0.370595USD</span>.
                            There are currently<code> 40,762,365,544 XRP</code> in circulation and
                            the max-supply is 100 billion XRP.
                        </p>
                    </li>
                    <li>
                        <h3>Ether by Etherium</h3>
                        the Etherium network host both a decentralised computer system and payment
                        through its main token Ether(ETH), along with a handful of others. Ether can be traded as a
                        cryptocurrency, but it's more
                        commonly used to pay for transaction fees and services on the etherium network
                        <p>Launched in 2015, Etherium uses blockchain to replace centralized computiing system
                            (like Google, apple and Amazon) that regulate,censor and control
                            user data on applications. A decentralized network gives power
                            back to the user and removes the security risk of a centralized system. along with payment
                            transactiond, Etherium also processes and validates
                            programs and contracts such as insurance payouts. Etherium's average block mining
                            time is 12 seconds.
                        </p>
                        <p>
                            Today, 1 ETH is <span>equal to $ 117.59 USD</span>. Ther are currently 103,925,546 ETH in
                            circulation
                            with no set limitnon it's total coin supply.
                        </p>
                    </li>
                </ol>
            </article>
        </section>
        <section class="main-section" id="How_To_Get_And_Store_Cryptocurrency">
            <header>How To Get And Store Cryptocurrency</header>
            <article>
                Cryptocurrency can either be earned or purchased. You can earn Cryptocurrency, by mining
                it or <span>completing task</span> in exchange for it.
                <p>You can purchase Cryptocurrency
                    in a few different ways . For one you can invest in an ICOs. you can also purchase cryptocurrency
                    from another individual through sites like <span>LocalBitcoins</span>.
                    The easiest (and arguably the most secure) way to buy cryptocurrency,though,
                    is on an exchange like <span>Coinbase</span> or <span>GDAX</span>
                    Cryptocurrency exchanges simply require fiat money to make the purchase , typically from a debit
                    card. You can also seek out
                    <span>Bitcoin ATM</span>, which operate just like your typical bank ATM
                    <p>So, what do you do with your cryptocurrency after you earn or purchase it?</p>

                </p>
                <p>Well, all Crytocurrency technically <em>lives</em>
                    on the blockchain. But individual owners keep track of
                    and manage their cryptocurrency through <b>wallets.</b> </p>
                <p>
                    your wallet stores your private key and public address.Without your private key, you cannot
                    access or verify purchase of your cryptocurrency, so its essentially the most valuable piece of your
                    cryptocurrency
                    ownership

                </p>
                <p>The most popular typr of wallet is a software wallet like <span>Coinspace</span>
                    (Which also serves as an exchange) You could also use a desktop or paper wallet.

                </p>
            </article>
        </section>
        <section class="main-section" id="Cryptocurrency_Resources">
            <header>Cryptocurrency Resources</header>
            <article>
                <p>
                    this guide simply scratches the surface of the cryptocurrency
                    world. If you want to learn more about mining
                    purchasing, or investing in cryptocurrency, checkout out on the
                    Resources below:
                    <ul>
                        <li>
                            <span>Coindesk</span>, a trusted news outlet on cryptocurrencies
                        </li>
                        <li>
                            <span>Coinmarketcap</span>, a live ledger of the current market value of cryptocurrencies
                        </li>
                        <li>The Cryptocurrency Reddit, an online forum discusssing Cryptocurrency news, trends and
                            analysis</li>
                        <li>Online Cryptocurrency courses on Udemy and Cousera</li>
                    </ul>
                </p>
            </article>
        </section>
        <section class="main-section" id="References">
            <header>References</header>
            <article>
                <p>All the content gotten for this project was culled from <a href="" target="_blank">Hubspot</a></p>
            </article>
        </section>
    </main>
    <footer>
        <p>This Documentation is Written by Godspower Iheanacho</p>
    </footer>
</body>









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

<!-- 

Hello Camper!

For now, the test suite only works in Chrome! Please read the README below in the JS Editor before beginning. Feel free to delete this message once you have read it. Good luck and Happy Coding! 

- The freeCodeCamp Team 

-->

              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    
    
}
body{
font-family: 'Open Sans', sans-serif;
    line-height: 1.5;
    color: rgba(26, 25, 25, 0.856);
    width: 100%;
    position: relative;

}
body::-webkit-scrollbar{
    width: 0;
    background: transparent;
}

#header-text{
    background:linear-gradient(360deg, #bbdefbd3, #90caf9c4),
    url(https://images.pexels.com/photos/844124/pexels-photo-844124.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
    display: flex;
    background-size: contain;
    background-position: center;
    text-transform: capitalize;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height:10em;
    text-align: center;
    color:#fff;
    font-size:1.3em;
    text-shadow: 1px 6px 5px rgba(26, 25, 25, 0.856);
    font-family: 'Poppins', sans-serif;
}
#navbar{
    width:100%;
    padding:5px;
    background: rgb(26, 25, 25);
    border-top:solid 1px rgba(255, 255, 255, 0.747);
    color: rgba(255, 255, 255, 0.747);
}
#navbar ul{
    overflow-y: auto;
    overflow-x: hidden;
    height:10rem;
    text-align: center;
    position: relative;
    display:block;

}
#navbar ul::-webkit-scrollbar{
    width: 0px;
    background: transparent;
}
#navbar ul li{
    list-style: none;
    display: block;
    padding:10px;
    border-top:solid 1px rgba(255, 255, 255, 0.747);
    color:#fff;
    transition:all 0.4s ease;
}
#navbar li a{
    color:rgba(255, 255, 255, 0.747);
    text-decoration: none;
    padding:3rem 0;
    transition:all 0.2s ease;


}
#navbar ul li:hover{
    background:rgba(255, 255, 255, 0.747);
    color: rgba(26, 25, 25, 0.856);
    cursor: pointer;
}
#navbar ul li a:hover{
    color:inherit;
}
#main-header header{
    text-align: center;
    margin:1em;
    font-size:1.5em;
}

#main-doc{
    padding:1rem;
    margin-bottom: 6rem;
}
#main-doc header{
    margin:1em;
    text-align: center;
    font-size: 1.5rem;
    font-weight: lighter;
    text-transform: capitalize;
}
.main-section{
    margin:1rem;
}

.main-section ol li{
    margin:2rem;
}
.main-section ul li{
    margin:2rem;
}
.main-section h3{
    margin-bottom:1rem;
}
h3{
    color: rgba(5, 40, 114, 0.829);
}
code{
    font-size: 1.3rem;
    font-weight: bold;
}
span{
    color: rgba(5, 40, 114, 0.829);
    font-weight: bold;
}
#References a{
    color: rgba(5, 40, 114, 0.829);
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;

}
footer{
    background: linear-gradient(360deg, #bbdefbd3, #90caf9c4 );
    font-size: 1.5rem;
    color: #fff;
    text-shadow: 1px 6px 5px rgba(26, 25, 25, 0.856);
    padding: 1rem;
    text-align: center;
}
@media(min-width:800px){
    #main-header{
        position: fixed;
        left: 0;
      min-width:26em;
      width: 36%;
    min-height:100%;
        top:0;
        margin: auto;
        padding: auto;
    
    }
    #navbar{
        margin-top: 0rem;
      height:100vh;
      
    }
    #main-doc{
        margin-left: 28em;
        margin-top: -1rem;
        padding:2rem;

    }
    #navbar ul{
        text-align: start;
        overflow-y: auto;
        overflow-x: hidden;
      height: 50vh
 
    }
    #header-text{
        padding: 2rem;
    }
    
#navbar ul li{
    display:block;
    padding: 12px;
}
.main-section{
    margin:1rem auto;
    width: 80%;
}
article{
    text-align: justify;
}
footer{
    margin-left:17em;
}

}
@media(max-width:400px){
    .main-section ol li{
        margin:1rem;
    }
    footer{
        font-size: 1.2rem;
        text-align: start;
    }
}


              
            
!

JS

              
                // !! IMPORTANT README:

// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place. 

/***********
INSTRUCTIONS:
  - Select the project you would 
    like to complete from the dropdown 
    menu.
  - Click the "RUN TESTS" button to
    run the tests against the blank 
    pen.
  - Click the "TESTS" button to see 
    the individual test cases. 
    (should all be failing at first)
  - Start coding! As you fulfill each
    test case, you will see them go   
    from red to green.
  - As you start to build out your 
    project, when tests are failing, 
    you should get helpful errors 
    along the way!
    ************/

// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!

// Once you have read the above messages, you can delete all comments. 

              
            
!
999px

Console