At the Water's Edge

at-the-water-s-edge.markdown

At the Water's Edge

A Pen by iamserda on CodePen.

License.

index.html

<header class="container">
    <h1 class="title">
        Let's start <span>getting a little</span> more fancy!
    </h1>
    <img src="https://images.unsplash.com/photo-1589558928675-a09badc3a9fd?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2768&q=80" alt="elephants family" />
    <p class="photographer"><span>Photo by <a href="https://unsplash.com/@angelabaileyy?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" target="_blank">Angela Bailey</a> on <a href="https://unsplash.com/t/wallpapers?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" target="_blank">Unsplash</a></span>
        <p />
</header>
<main class="container">
    <section class="columns">
        <article class="column">
            <h2>Dolor sit</h2>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
                ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                aliquip ex ea commodo consequat. Duis aute irure dolor in
                reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                pariatur. Excepteur sint occaecat
            </p>
        </article>

        <article class="column col-lg">
            <h2>Consectetur adipiscing</h2>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
                ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                aliquip ex ea commodo consequat. Duis aute irure dolor in
                reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
                culpa qui officia deserunt mollit anim id est laborum.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
                ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                aliquip ex ea commodo consequat. Duis aute irure dolor in
            </p>
        </article>

        <article class="column col-sm">
            <p class="background">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
                ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                aliquip ex ea commodo consequat. Duis aute irure dolor in
                reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                pariatur. Excepteur sint occaecat
            </p>
        </article>
    </section>

    <section class="columns">
        <article class="column col-xl">
            <h2>Deserunt mollit anim id est laborum</h2>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
                ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                aliquip ex ea commodo consequat. Duis aute irure dolor in
                reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
                culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </article>

        <article class="column col-sm">
            <p class="background">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
            </p>
        </article>
    </section>
</main>

style.css

* {
    box-sizing: border-box;
}

html {
    font-size: 16px;
}
html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Helvetica Neue", Ubuntu, "Segoe UI", sans-serif;
    background-color: rgb(255, 255, 255);
    color: rgb(100, 100, 100);
}
header {
    padding-top: 3vh;
}
h2 {
    font-size: 1.125rem;
    color: rgb(0, 99, 180);
    margin: 0;
}
p {
    font-size: 1rem;
}
header > img {
    width: 100%;
    max-height: 200px;
    display: block;
    object-fit: cover;
}
.photographer {
    font-weight: bold;
    font-size: 55%;
}

/* main{
    box-shadow: 0 0 4px rgba(0,0,0,0.8);
} */

.container {
    width: 80%;
    margin: 0 auto;
    font-size: 1.1em;
    min-width: 360px;
    max-width: 960px;
}

.title {
    color: rgb(0, 99, 180);
    margin: 0 auto 1em;
    text-align: center;
    font-family: Ubuntu, sans-serif;
}
.title > span {
    color: rgb(255, 246, 125);
}
.column > h2 {
    font-size: 1.25rem;
}
.column > p {
    font-size: 1.125rem;
    margin: 1em 0;
}
.columns {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    /* align-items: stretch; */
    margin: 2em auto;
}
.column {
    display: flex;
    flex-flow: column nowrap;
    flex: 0 1 auto;
}
.col-sm > .background {
    color: rgb(0, 99, 180);
    background-color: rgb(255, 246, 125);
    font-weight: 500;
    margin: 0;
    padding: 1em;
}

@media (min-width: 769px) {
    .columns {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: stretch;
        margin: 2em 0;
    }
    .column {
        display: flex;
        flex-flow: column nowrap;
        flex: 1 1 auto;
        max-width: 20%;
        min-height: auto;
    }

    .col-sm {
        flex: 1 1 auto;
    }
    .col-lg {
        flex: 3 1 auto;
        max-width: 55%;
    }
    .col-xl {
        flex: 3 1 auto;
        max-width: 77.5%;
    }
    .col-sm > .background {
        height: 100%;
    }
}