HTML CSS JS - Sample Blog

https://dash.generalassemb.ly/projects/jeffs-blog-3

by Jonathan Placa

HTML

<!DOCTYPE html>
<link href="/normalize.css" rel="stylesheet">
<body>
    <header>
        <img src="/assets/jeff.png">
         <h1>Jeff's Blog</h1>

        <ul>
            <li><a href="#">About Me</a>

            </li>
            <li><a href="#">Best Poems</a>

            </li>
            <li><a href="#">Worst Poems</a>

            </li>
        </ul>
        </header>
    <article>
         <h2>VHS umami pop-up trust fund</h2>

        <p>Marfa church-key kitsch bicycle rights, 8-bit mixtape cardigan gentrify Echo Park. Street art swag brunch, next level roof party Schlitz hella organic keffiyeh selfies. You probably haven't heard of them polaroid hashtag +1, meggings biodiesel Portland High Life cray tumblr retro.</p>
        <button>Like</button>
    </article>
    <article>
         <h2>Sartorial synth Echo Park, roof party</h2>

        <p>chambray you probably haven't heard of them pour-over viral selvage umami skateboard VHS post-ironic selfies. Wes Anderson gentrify fanny pack twee, bicycle rights bitters blog keffiyeh plaid flannel. Tonx irony cliche sustainable mlkshk bitters. Four loko leggings chambray Vice.</p>
        <button>Like</button>
    </article>
    <article>
         <h2>Forage food truck keytar master cleanse</h2>

        <p>ethical thundercats sustainable locavore quinoa Neutra. Aesthetic Cosby sweater single-origin coffee, bicycle rights organic lo-fi street art american apparel ennui four loko ethnic Brooklyn small batch. Forage YOLO polaroid</p>
        <button>Like</button>
    </article>

CSS

header {
        text-align: center;
        background: url('http://dash.ga.co/assets/jeff-bg.png');
        background-size: cover;
        color: white;
    }
    a {
        color: white;
    }
    h1 {
        font-size: 70px;
    }
    img {
        margin: 40px 0px 0px 0px;
        border: 7px solid white;
        border-radius: 20px;
    }
    ul {
        padding: 10px;
        /* RGBA() is similar to the HEX color, but also enables you to add transprency (the last parameter - 0.5 in our case)*/
        background: rgba(0, 0, 0, 0.5);
    }
    li {
        display: inline;
        padding: 0px 10px 0px 10px;
    }
    article {
        max-width: 500px;
        padding: 20px;
        /*Margin: 0 autho; is a trick used by CSS pros to keep the margins aligned, despite screen size changes. */
        margin: 0 auto;
    }
    /* The following CSS syntax sets a condition - in this case, we are checking to see if the prower is smaller than 500px, when it is the condition (background: red) becomes true*/
    @media (max-width: 500px) {
        h1 {
            font-size: 36px;
        }
        li {
            display: block;
            padding: 5px;
        }
        body {
            background: red;
        }
    }

JavaScript

$("button").on("click", function () {
     alert("clicked!")
 });