<!DOCTYPE html>
<html lang="sv">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style_with_grid.css">
    <title> Surf stuff</title>
</head>

<body>
    <div id="container">
        <header>
            <h1>Lorem Ipsum Surf Co</h1>
            <p> Ripper nose open face tide!</p>
        </header>
        <nav>
            <ul>
                <li><a href="">Surf</a></li>
                <li><a href="">Travel</a></li>
                <li><a href="">Contact</a></li>
                <li><a href="">Work</a></li>
            </ul>
        </nav>
        <main>
            <section id="products">
                <article class="promote">
                    <h2>Pearl Tri Fin</h2>
                    <h3 class="date"><time>12 Apr, 2019</time></h3> <img
                        src='https://images.unsplash.com/photo-1531722569936-825d3dd91b15?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ'
                        alt='longboard on a beach'>
                    <p>Salt water clean flow, jumbled pearl tri fin. Set, urll fair-good shoulder high wetsuit tan.
                        Vertical tide switch explosive muscle healthy float aquarium kick out double overhead
                        whitewater. Ripper nose open face tide cranking WCT coil up rock-n-roll technique. Over head
                        board epic fins foam claim sand bar Freddy P.. Air drop a-frame full rote rip tide layback
                        daggers..</p>
                </article>
                <article>
                    <h2>Kook in da wa ripper</h2>
                    <h3 class="date"><time>5 Apr, 2019</time></h3> <img
                        src='https://images.unsplash.com/photo-1520443240718-fce21901db79?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ'
                        alt='surfer in water'>
                    <p>Making it rain power hack forehand hook hack reef rash healthy float. Viscious ride tides
                        courdoroy firing white water urll. Coffee stale fish DOH line-up stall above the lip epic
                        cutties. Late chops fair full mad air reverse rights pitted freshie thick? Wax the stick good
                        hollow spittin' frothed fat. Kook in da wa ripper in the bricks fun board ocean make the drop.
                        Tight section Margaret River barreling <a
                            href="https://www.youtube.com/watch?v=b6hoBp7Hk-A">Pipeline</a> psyching.</p>
                </article>
                <article>
                    <h2>Kelp rocker elevator</h2>
                    <h3 class="date"><time>1 Apr, 2019</time></h3> <img
                        src='https://images.unsplash.com/photo-1501571190884-100604650072?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ'
                        alt='wave breaking'>
                    <p>Kelp rocker elevator drop heavy section <a href="https://vimeo.com/77483068">gnarley</a> a-frame.
                        Turds in the lineup make the drop kook rip tide nice little layback hammer Taj Burrow top turn
                        tossin' pizzas. Loc foam snap tagging full mad air reverse rad, grommet lines turds in the
                        lineup. Dredging backside attack rock-n-roll Pipeline, buy my poster, rain John John Florence
                        standing tall pipeline pit. Salt water forehand hook frontside stomps it, lay day fog tide
                        tossin' pizzas. Rocker Kerrzy, over head indy, fin fair-good.</p>
                </article>
                <article>
                    <h2>Vertical hook down the line</h2>
                    <h3 class="date"><time>3 Apr, 2019</time></h3> <img
                        src='https://images.unsplash.com/photo-1414490929659-9a12b7e31907?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ'
                        alt='surfboard in sunset'>
                    <p>Vertical hook down the line surfing, Pipeline ice cream headaches standing tall spit bottomed out
                        wonky. Channel blonde rigs claim Kerrzy brah cheater5 coil up healthy float. Shallow ice cream
                        headaches claim rail grab making the bottom turn cracking it closeout. Tri fin ride backhand
                        attack round house cutty wobble viscious. Salt water wind swell fired up reef break
                        tomb-stoning.</p>
                </article>
            </section>
            <section id="classes">
                <h2>Classes</h2>
                <table>
                    <tr>
                        <th>Class</th>
                        <th>Price</th>
                        <th>Description</th>
                    </tr>
                    <tr>
                        <td>Salt Water</td>
                        <td>1000</td>
                        <td>Salt water wind swell fired up reef break tomb-stoning.</td>
                    </tr>
                    <tr>
                        <td>Indy Longboard</td>
                        <td>1500</td>
                        <td>Indy longboard late drop loc puff rusty transition ripping.</td>
                    </tr>
                    <tr>
                        <td>Fish set</td>
                        <td>12.50</td>
                        <td>Fish set wave.</td>
                    </tr>
                    <tr>
                        <td>Shaka</td>
                        <td>199.99</td>
                        <td>Twin keel feathering lip stick lay day shaka </td>
                    </tr>
                </table>
            </section>
            <section id="story">
                <h2>Our Story</h2> <img
                    src='https://images.unsplash.com/photo-1500520198921-6d4704f98092?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ'
                    alt='collection of surfboars'>
                <p>Making the section whips one tide tubes inside position clean face Dane Reynolds. Drifting the tail
                    monsters 360 tomb-stoning puff power hack, set wave surfline sets layback daggers. Set wave barny
                    feathered lip J.O.B. poor-fair kook in da wa keyhole channel? Whitewater, combos keyhole pipeline
                    wax the stick psyching whitewater Trestles speed tuck. Swell one wave set feathered lip split the
                    peak cracking it one wave set coil up wobbly duck diving rows of white water, ripper. Round house
                    cutty mellow inside position heavy slice Slates Pipeline big finner late leash!</p>
                <h2>White water</h2>
                <p>White water clamped finner standing tall nutty barnacle inner bar. New school shacks shack John John
                    Florence full rote white wash. Pocket, Trestles waves in the bricks full rotation making it rain.
                    Loose closed out hot glass skegs rail to rail. Top turn glazz socked in shred tube Taj Burrow digs
                    rail, knee high. Socked in pitted critical waves send it. Standing tall channel quiver Jeffreys Bay
                    legend claw hands.</p>
                <h2>Paddle</h2>
                <p>Paddle out rank bro WQS keyhole feathering lip firing speed. Buy my poster stale fish blow tail
                    nuggets of heaven foam, bumpy outer bar out the back. Smash crusty inside claim shred longboard
                    cutties over the reef ending maneuver hit. Shaka free surf wetsuit tan swamped nose pick. Simpo drop
                    knee pigdog bunny chow clipped kook pitted. Shutting down king of the peak carves layback daggers,
                    full rotation shinner barn dog spitting barrels white water wall. Barreling late
                    turning on brutal wind swell point break crumbly lip priority fish. Ridin' the foam ball
                    bottom turn pitter Kelly Slater double overhead fired up, coil up explosive.

                    <h3>Spitting barrels</h3>
                    Pearl, closeouts jumbled fish hot glass,
                    rip tide hot glass hallow muscle. Spitting barrels stomps it Bells tube sandbar
                    barn dog squirt. Foam ball cartwheels shredded frothed tides tides layback daggers. Swamped
                    Snapper
                    Rocks barrels, fair-good tide switch fat make the drop hang 5, beat it kook. Cartwheels air game
                    vertical layback hammer open face chops air reverse.

                </p>

            </section>
        </main>

        <aside id="newsletter">
            <h2>Newsletter</h2>
            <p>Sign up for our newsletter:</p>
            <form action="" method="post">
                <ul>
                    <li> <label for="form-name">Name</label> <input type="text" id="form-name" name="form-name"
                            placeholder="Your name"> </li>
                    <li> <label for="form-email">Email</label> <input type="text" id="form-email" name="form-email"
                            placeholder="Your email"> </li>
                    <li>
                        <h3>Set-up:</h3>
                        <ul>
                            <li><label><input type="radio" name="form-setup" value="quad"> Quad </label></li>
                            <li><label><input type="radio" name="form-setup" value="single"> Singlefin </label></li>
                            <li><label><input type="radio" name="form-setup" value="tri"> Trifin </label></li>
                        </ul>
                    </li>
                    <li> <input type="Submit" name="submit" value="Submit&rarr;"> </li>
                </ul>
            </form>
        </aside>
        <footer>
            <p>Lorem Ipsum Surf Co, 2019. Share the waves – no copyright or rights reserved. </p>
            <p>Images from <a href="https://unsplash.com">unsplash</a>. Text by <a
                    href="http://surfipsum.com">surfipsum</a>.</p>
        </footer>
    </div><!-- end of container -->
</body>

</html>
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet');


body:not(nav){
    font-family: 'Montserrat', sans-serif;
    color:#000708;
    font-size: 100%;
    line-height: 180%;
    text-align: justify;
    border:1px solid #828282;
    align-content: space-between;

}
p::first-letter:not(footer) { font-size: 140%; color: #001021; }

nav {
    overflow: hidden;
    background-color: #001021;
    position: fixed;
    top: 0;
    width: 100%;
  }

nav li {
    float: left;
    display: block;
    text-align: center;
    text-decoration: none;
    margin-right: 5em;
}

nav li a{
    font-weight: bold;
    color: #f2f2f2;
    text-decoration: none;
}
nav a:hover {
  background: #ddd;
  color: black;
}

main:not(#nav), aside{
    margin-right: 10%;
    margin-left: 10%;
    margin-top: 10%;
    margin-bottom: 10%;
}

h1 {
    font-size: 350%;
    color: #001021;
    font-weight: bolder;
    text-decoration: overline;
}
h2{color :#23395b;
    font-stretch: semi-expanded;
    font-size: 180%;
    font-weight: bold;
    margin-top: 40px;
    margin-bottom: 20px;
    }

h3:not(.date){color :#476a6f;
    font-weight: bold;
    font-stretch: expanded;
    font-size: 120%;
    margin-top: 40px;
    margin-bottom: 20px;
}

.date{
    font-weight: normal;
    font-stretch: expanded;
    font-size: 80%;
    line-height: 0%;
    margin-bottom: 15px;
}

header{
    margin-top:90px;
    margin-left: 10%;
    position: center;
    font-stretch: extra-expanded;
}

header p{
    font-size: 200%;
    color: #001021;
    font-weight: bold;
}

img {
    width: 20%;
    height:auto;
    transition: all .2s ease-in-out;
    border-radius: 8px; margin-left: 5%;
    margin-right: 5%;}

img:hover { transform: scale(2); }

img[alt^='longboard']{
    float: left;}

img[alt^='surfer']{
    float: right;
}

img[alt^='wave']{
    float: left;
}

img[alt^='surfboard']{
    float: right;
}
img[alt^='collection']{
    float: left;
}


aside#newsletter ul{
    list-style-type: none;
}
aside#newsletter input[type="Submit"]:not([type="text"]) {
    background: linear-gradient(to bottom, #e2e2e2 0%, #dbdbdb 50%,   #d1d1d1 51%, #fefefe 100%);
    padding: 1em 4em;
    margin:5%;
}

input[type="text"]:not([type=submit]) {
    border: 5px solid rgb(22, 135, 164);
    padding: 15px;
    background: rgba(255,255,255,0.5);
    margin: 10px 0 10px 0;
}

table {
    border-collapse: collapse;
    width: 100%;
    }

th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {background-color: #f2f2f2;}
tr:hover{
    background-color: #040c17;
    color: #d1d1d1
}


footer p{
    font-size: 80%;
    text-align: right;
    color: #0b282c;
    margin-right: 5%;
    line-height: normal;
}
footer p:first-child{
    text-decoration: overline;
}
footer a{
    color: #408994;}
    #container {  display: grid;
        grid-template-rows: [nav-start] 3% [header-start] 10% [products-top-start] 22% [products-bottom-start] 22%
        [classes-start] 18% [story-start] 12% [newsletter-start] 10% [footer-start] 3%;
        grid-template-columns: [article-left] 50% [article-right] 50%;
        grid-template-areas:    "nav nav"    "header header"  "products-top products-top"   "products-bottom products-bottom"
        "classes classes" "story story" "newsletter newsletter-setup" "footer footer";}


    nav { grid-row-start: 1;  grid-row-end: 2;  grid-column-start: 1;  grid-column-end: 3;}

    header{ grid-row: 2 / 3;  grid-column: span 1 / -1;}

    #products{
        grid-row-start: 3;  grid-row-end: 5;  grid-column-start: 1;  grid-column-end: 3;}
    #classes{
        grid-row-start: 5;  grid-row-end: 6;  grid-column-start: 1;  grid-column-end: 3;}

    #story{
        grid-row-start: 6;  grid-row-end: 7;  grid-column-start: 1;  grid-column-end: 3;}

    #newsletter{
        grid-row-start: 7;  grid-row-end: 8;  grid-column-start: 1;  grid-column-end: 3;
    }
    footer{
            grid-row-start: 8;  grid-row-end: 9;  grid-column-start: 1;  grid-column-end: 3;
    }
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.