<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="./resources/css/styles.css">
        <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
        <title>South Villgae Run Club</title>
    </head>
    <body>
        <div class="main">
            <nav>
                <ul><a href="events">Events</a></ul>
                <ul><a href="results">Results</a></ul>
                <ul><a href="partnering restaurants">Partnering Restaurants</a></ul>
            </nav>
            <header>
                <h1>South Village Run Club</h1>
            </header>
            <section class="meet">
                <h2>Meet up. Work out. Celebrate.</h2>
                <p>Come join our vibrant community whose focus is training hard and enjoying local post-workout cuisine - guilt-free!</p>
                <p>South Village Run Club is a free MeetUp group sponsored by <a href="city-shoes">City Shoes</a>.</p>
            </section>
            <section class="gallery">
                <img src="https://static-assets.codecademy.com/Paths/front-end-career-path/responsive-club-website/tunnel-runners.jpg" alt="runners coming out of a tunnel">
                <img src="https://static-assets.codecademy.com/Paths/front-end-career-path/responsive-club-website/meetup-wine.jpg" alt="people drinking wine and eating">
                <img src="https://static-assets.codecademy.com/Paths/front-end-career-path/responsive-club-website/runners-grayscale.jpg" alt="runers in greyscale">
            </section>
            <section class="quote">
                <h2>"I build my weeknight plans around thier events. I can exercise and meet new people every week!"</h2>
                <p>-Bryce R. - financial advisor/frequent runner since 2018</p>
            </section>
            <section class="gallery">
                <img src="https://static-assets.codecademy.com/Paths/front-end-career-path/responsive-club-website/coffeshop.jpg" alt="people at a coffe shop">
                <img src="https://static-assets.codecademy.com/Paths/front-end-career-path/responsive-club-website/marathon-runners.jpg" alt="marathon runners crossing the finish line">
                <img src="https://static-assets.codecademy.com/Paths/front-end-career-path/responsive-club-website/hangouts.jpg" alt="a group of people sitting at a table eating">
            </section>
            <section class="join">
                <h2>Come join the fun!</h2>
            </section>
            <section class="picture">
                <img src="https://static-assets.codecademy.com/Paths/front-end-career-path/responsive-club-website/runners-church.jpg" alt="runners running in fornt of a church">
            </section>
            <section class="time">
                <h2>We meet every evening in the city square at 7PM!</h2>
            </section>
            <footer>
                <ul><a href="events">Events</a></ul>
                <ul><a href="results">Results</a></ul>
                <ul><a href="partnering restaurants">Partnering Restaurants</a></ul>
            </footer>
        </div>
    </body>
</html>
* {
    box-sizing: border-box;
}

body {
    background-color: lightsalmon;
    font-family: Montserrat, sans-serif;
    font-size: 16px;
    margin: 0;
    display: block;
}

nav {
    width: 100%;
    background-color: teal;
    padding-top: 1rem;
    height: 3.45rem;
}

ul {
    display: inline-block;
}

a {
    color: lightsalmon;
    text-decoration: none;
}

header {
    background-color: rgba(0.5, 0.5, 0.5, 0.5);;
    color: coral;
    text-align: center;
    height: 7rem;
    padding-top: 1rem;
    margin-top: 10rem;
    margin-bottom: 15rem;
}

h2 {
    color: yellow;
}

p {
    color: white;
    font-size: 1.2rem;
}

.meet {
    margin-left: 1rem;
}

.gallery {
    display: inline-block;
    margin: 4em auto;
}

.gallery img {
    width: 30%;
    margin: 1.5%;
}

.quote {
    background-color: teal;
    height: 25rem;
    padding: 1rem;
    font-size: 2rem;
}

.quote p {
    color: yellow;
    font-size: 1rem;
    padding-bottom: 3rem;
}

.join h2 {
    text-align: center;
    font-size: 2rem;
}

.picture {
    text-align: center;
    height: auto;
}

.time h2 {
    text-align: center;
    font-size: 2rem;
}

footer {
    background-color: teal;
    color: lightsalmon;
}

@media only screen and (max-width: 1024px) and (max-height: 842px) {
    .gallery img{
        width: 100%
    }

    .picture img {
        width: 50%;
        height: 50%;
    }

}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.