HTML/CSS - SoloLearn Learning Stash Online Editor and JavaScript Compiler

html

<!DOCTYPE html>
<html>
    <head>
        <title> My Learning Repository SoloLearn</title>
        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Cabin:700" rel="stylesheet"> 
    </head>
    <body>
        <header>
            <img src="https://assets.pokemon.com/assets/cms2/img/pokedex/full//039.png" alt="asirap" />
            <div id="titlebox">
                 <div id="title">MY REFERENCE STASH</div>
                    <div id="name">Asirap</div>
            </div>
        </header>
        <nav></nav>
        <section>
            <article>
                <section>
                    <h1> Repository for Helpful SoloLearn Codes</h1>
                    <p>
                        SoloLearn currently has no feature of favoriting or saving helpful codes so we can refer to them later. This repository is to contain links to all the great codes I've come accross on Solo Learn for referring back to later. I'll keep adding as I discover more. Quick fyi with credits: I'm not skilled in web development; I'm using a code by <a href="https://www.sololearn.com/Profile/11932555/" traget="_blank"><b>Gordie</b></a>, as my template for this.Also, this idea for favoriting codes was suggested by: <a href="https://www.sololearn.com/Profile/1607351/" target="_blank">Kuba Siekierzynski</a>. <b>Feel free to use this as a template for your own stash, but preserve the credits! </b>
                   </p>
                </section>
                <section>
                    <hr>
                    <h1 align="center"> The Codes </h1>

css

/* Template by Gordie */
/* edited by asirap*/
body {
    font-family: 'Cabin', sans-serif;
    font-weight: 700;
    margin: 0;
    padding: 0;
}
/* gradient trick, courtesy internet .... [Kit] */
hr { 
    height: 3px;
    width: 50%;
    border: 0; 
    background-image: linear-gradient(to right,  rgba(204, 146, 184, 0.05),  rgba(153, 46, 82, 0.75),  rgba(204,146,184, 0.05)); 
}
header {
    height: 50px;
    padding: 10px;
    background-color:  #955566;
;
}
header img {
    width: 50px;
    height: 50px;

BROWSER

Console