<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta charset="UTF-8">
    <link href="https://fonts.googleapis.com/css?family=Source+Serif+Pro:400,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Muli:400,600,900" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Monoton&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/styles.css">
    <title>CSS Grid Magazine Layout 4</title>
</head>
<body>
    
    <div class="grid">
        <a href="http://res.cloudinary.com/jduquain/q_auto,f_auto/v1540860637/magazine-4_gwlbtn.jpg" class="inspiration" target="_blank">Inspiration</a>
        
        <div class="blackbar"></div>
        
        <div class="forbes">Forbes<span class="four">400</span></div>
        
        <h1 class="main-heading"><span class="momandpop">Mom and Pop&apos;s</span><span class="bff">Best Friend</span></h1>
        <div class="heading-two-wrap">
            <h2 class="tagline">Ben Chestnut and Dan Kurzius have built billion&ndash;dollar fortunes by helping save small businesses the old&ndash;fashioned way: email.</h2>
            <p class="author">By Alex Konrad</p>
        </div>
        <div class="para-wrap">
            <p>Two years ago, Ben Chestnut found a crumpled piece of paper dolor sit amet, consectetur adipisicing elit. Rem modi consequatur adipisci vel asperiores veniam illum similique et enim. Libero rem ratione in veniam quasi, unde sapiente consequuntur natus rerum? Nobis, quae deserunt ducimus doloremque in sint, tenetur pariatur. Maiores, consequuntur, nesciunt! Aliquam atque, perferendis adipisci unde animi ipsa. Officia totam maiores possimus quam delectus mollitia? Amet earum eaque harum eveniet eius, ad tenetur quidem voluptatibus quo minus cupiditate explicabo in molestias distinctio quos expedita. Minima autem nam aliquid beatae laudantium, maiores. Vero deleniti quidem abba&nbsp;at.</p>
            <p>Rem ipsum laborum, debitis veniam dolorum in consequatur iste cupiditate, perferendis vero voluptate ex quam, voluptatum atque! Facere ipsam fuga atque totam ex, perferendis vitae tenetur nihil, impedit itaque aliquid, alias voluptatem veritatis? Deleniti pariatur, neque. Reiciendis nobis commodi quisquam amet porro non. Et beatae vero officia hic reprehenderit, quia architecto, aliquam ullam dolore quaerat accusamus accusantium debitis neque natus delectus deleniti deserunt sint ex nulla, distinctio. Rem, amet&nbsp;velit.</p>
            <p>Aliquam sint impedit expedita amet odio necessitatibus ipsam sapiente aperiam debitis iste cum porro, voluptatem laboriosam ut enim. Earum, aut dignissimos, odit quam quibusdam maiores mollitia ut necessitatibus consequatur voluptatum dolorem ipsum ullam id, a distinctio dolorum eaque consequuntur similique est dicta veritatis impedit. Maiores, consequuntur, nesciunt! Aliquam atque, perferendis adipisci unde animi ipsa. Perspiciatis possimus atque tenetur, quod optio blanditiis fugiat iure labore ea facere dolorum nulla praeset&nbsp;ipsa.</p>
            <p>Repellat, impedit! Et dignissimos debitis maiores repellendus minus! Eius et vitae, quidem cumque ad tempora omnis explicabo sit eaque magnam tenetur modi molestiae eveniet quam ratione quasi deserunt culpa dolore dignissimos molestias autem quia voluptatibus doloribus incidunt? Laborum fugiat veniam voluptas deleniti, corporis labore quaerat cupiditate, repellendus laboriosam molestias sed. Nulla quasi, voluptatibus fugit sit atque voluptate odit assumenda soluta provident incidunt! At maxime eum neque reiciendis esse culpa&nbsp;laudy.</p>
            <p>Sit fugiat earum non dolor quod nesciunt itaque eaque adipisci eius rerum fugit blanditiis possimus doloribus, quas quasi qui doloremque provident saepe molestias architecto at, nobis magni! Minima autem nam aliquid beatae laudantium, maiores! Ipsum, sint quae consequatur! Facilis sit temporibus sunt nemo ea quidem, odit! Animi corporis quos, eveniet cupiditate nostrum ut! Consequatur nemo repellendus beatae doloremque id fugiat tempora necessitatibus dolorem! Assumenda cum maxime nobis error deser&nbsp;maiores!</p>
            <p>Facilis quis impedit, dolorum error assumenda vitae vero minima dolores odio, consequatur maxime omnis nesciunt ullam nulla ratione fuga amet, nisi nihil eaque consequuntur ipsum fugiat. Minima laborum nihil ullam blanditiis corrupti quam aut in odit libero sequi cumque soluta ad eos inventore quo dignissimos eum, eveniet quasi similique eaque repudiandae amet quisquam? Fuga, suscipit at quaerat similique? Quas ullam molestias laboriosam unde esse explicabo nostrum sint ipsa auto&nbsp;hic.</p>    
        </div>
        <div class="borders">
            <div class="border"></div>
            <div class="border"></div>
            <div class="border"></div>
            <div class="border"></div>
        </div>
        <div class="hero"></div>
    </div>
    
    
    <script src="js/script.js"></script>
</body>
</html>
:root {
	box-sizing: border-box;
}

*, ::before, ::after {
	box-sizing: inherit;
	text-decoration: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

body {
    font-family: 'Source Serif Pro', serif;
    max-width: 1280px;
    margin: 0 auto;
    font-size: .8em;
    color: #222;
    padding: 0 1.5em;
}

.inspiration {
    color: #333;
    position: absolute;
    top: 12em;
    left: 5%;
    text-decoration: underline;
    transition: color 300ms ease-out;
}

.inspiration:hover, .inspiration:focus {
    color: #000;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto auto auto auto auto auto;
    grid-gap: 1.5em;
    border-left: 5px double lightgray;
    border-right: 5px double lightgray;
    margin-bottom: 1em;
    position: relative;
}

/********  GRID ITEM 1  ********/
.blackbar {
    width: 95%;
    margin: 1em auto;
    height: 1.5em;
    background-color: #fff;
    border-top: .7em solid black;
    border-bottom: .7em solid black;
    position: relative;
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}

.blackbar::before, .blackbar::after {
    position: absolute;
    content: "";
    background-color: dimgray;
    width: 1px;
    top: -1em;
    bottom: -1em;
}

.blackbar::after {
    right: 0; 
}

/********  GRID ITEM 2  ********/
.forbes {
    font-size: 1.1em;
    font-family: 'Muli', sans-serif;
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    padding: 0 0 6em 0;
    align-self: center;
    justify-self: center;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    color: #000;
}

.four {
    font-family: 'Monoton', cursive;
    display: block;
    font-size: 2.3em;
    color: orange;
    margin-left: -.2em
}

.four::before {
    content: "";
    width: 3.5em;
    background-color: dimgray;
    display: block;
    height: 1px;
    margin-left: -.6em
}

/********  GRID ITEM 3  ********/

.main-heading {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
    font-family: 'Muli', sans-serif;
    font-size: 4em;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: -2px;
    line-height: .75;
    color: #000;
    text-align: center;
}

.momandpop {
    display: block;
    border-bottom: 1px solid lightgray;
    margin-bottom: .3em;
}

.bff {
    display: block;
    border-bottom: 1px solid lightgray;
}

/********  GRID ITEM 4  ********/
.heading-two-wrap {
    grid-column: 1 / 3;
    grid-row: 4 / 5;
    font-family: 'Muli', sans-serif;
}

.tagline {
    font-size: 1em;
    line-height: 1.2;
    color: #000;
    text-align: center;
    width: 80%;
    margin: 0 auto .75em auto;
    color: #a24343;
}

.author {
     text-transform: uppercase;
     color: #000;
     text-align: center;
     font-size: .8em;
     border-bottom: 3px solid #000;
     padding-bottom: 1em;
}


/********  GRID ITEM 5  ********/
.para-wrap {
    grid-column: 1 / 3;
    grid-row: 5 / 6;
    padding: 0 1em 1em 1em;
    column-width: 16em;
    column-rule: 5px double lightgray;
    column-gap: 30px;
}

.para-wrap p:not(:first-of-type) {
    text-indent: 1em;
}

.para-wrap p:first-of-type::first-letter {
    font-family: 'Muli', sans-serif;
    font-weight: 900;
    font-size: 6em;
    background: #2a2a8d;
    line-height: 1;
    color: #fff;
    padding: 0 .1em;
    margin-right: .1em;
    display: block;
    float: left;
}

/********  GRID ITEM 6  ********/

.borders {
    width: 95%;
    margin: 0 auto;
    grid-column: 1 / 3;
    grid-row: 6 / 7;
}

.border {
    width: 100%;
    height: 2px;
    background-color: #6d611c;
}

.border + .border {
    margin-top: 1px;
}

/********  GRID ITEM 7  ********/
.hero {
    grid-column: 3 / 5;
    grid-row: 1 / -1;
    background-image: url('http://res.cloudinary.com/jduquain/q_auto,f_auto/v1540860615/hero-4_sytw0u.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: -100px;
}

@media (max-width: 900px) {
    
    .grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto auto auto auto auto auto auto;
        grid-gap: 1em;

    }
    
    .main-heading {
        font-size: 3em;
    }
    
    .hero {
        grid-column: 1 / 3;
        grid-row: 5 / 7;
        background-size: cover;
        background-position: initial;
        height: 50vw;
    }
    
    .para-wrap {
        grid-column: 1 / 3;
        grid-row: 7 / 8;
        padding: 4em 1em 1em 1em;
        column-width: 20em;
    }
    
    .borders {
        grid-row: 8 / 9;
    }
    
}




View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.