<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=Playfair+Display:400,400i,700" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<title>Document</title>
</head>
<body>
<div class="grid">
<a href="https://res.cloudinary.com/jduquain/f_auto,q_auto/v1540774478/magazine-1_uovb4l.jpg" class="inspiration" target="_blank">Inspiration</a>
<div class="lines">
<div class="line"></div>
</div>
<img class="hero-image" src="https://res.cloudinary.com/jduquain/image/upload/q_auto,f_auto/v1540473634/hero-1_lzstqn.jpg" />
<img class="small-image" src="https://res.cloudinary.com/jduquain/image/upload/q_auto,f_auto/v1540473677/thor-1_b2ooto.jpg" />
<div class="para-wrap--one">
<p class="para-one">For more than 50 years, consectetur adipisicing elit. Aut perspiciatis quisquam recusandae autem nihil suscipit eum itaque maxime aliquam debitis eaque impedit officia repellat reiciendis facilis, exercitationem quaerat! Necessitatibus fuga tenetur aut cupiditate, at ad, aliquam quidem eos soluta ea reprehenderit voluptas sint deserunt! Eos odit culpa officiis architecto sapiente, deleniti obcaecati ad vero numquam quod, ducimus ea! Consectetur dolores. facere quam iure tempore provident vel. Perspiciatis provident vitae, bota debitis quisquam iure inventore, laborum facere asperiores cumque eligen</p>
<p class="para-two">Ea corporis magnam harum dolor aspernatur temporibus esse aliquid odio? Libero voluptates cum exercitationem, doloremque! Similique fugiat iure quas voluptas laboriosam vel tenetur alias repellendus, soluta ipsam impedit, consequuntur. Provident id incidunt consequatur voluptas dignissimos error, pariatur ratione similique explicabo optio eveniet, molestias impedit debitis nobis officia! Perferendis magni, in id ratione quae voluptates earum! Vero sit beatae odio dolore. facere quam iure tempore provident vel. Perspiciatis provident vitae, debitis quisquam iure inventore, laborum facere asperiores cumque eligendi. Nostrum dolor animi.</p>
<p class="para-three">Possimus recusandae ipsa nulla praesentium nobis doloremque, eveniet nihil sunt deserunt alias fugiat dolores ex adipisci odit ullam inventore vel animi, libero perspiciatis assumenda harum. Recusandae ab eius ipsum dicta excepturi voluptas suscipit, aspernatur odio nesciunt saepe optio, quibusdam alias el reiciendis dolores, nemo doloribus, commodi consen. </p>
<p class="para-four">Quaerat ratione, iusto consequatur saepe excepturi fugiat reprehenderit est quos ullam, iure veritatis qui nobis! Dicta sunt perferendis minima beatae temporibus commodi harum! Nostrum ratione, iusto consequatur saepe excepturi fugiat reprehenderit est quos ullam, iure veritatis qui nobis! Dicta sunt perferendis minima beatae temporibus commodi harum! Nostrum doloremque animi. Doloremque animi. Facere quam iure tempore provident vel. Perspiciatis listos escuche digame volupibusprovident vitae, debitis quisquam iure inventore, laborum facere asperiores cumque eligendi voluptatibus. consequatur le chid saepe excepturi fugiat reprehenderit est quos ullam, iure veritatis qui nobis! Dicta sunt perfer minima. </p>
</div>
<p class="para-five">Sed debitis, corporis non alias tempore provident, saepe. Et nisi sed suscipit blanditiis laudantium repellat perspiciatis iste earum cumque perferendis a atque, consequatur ipsum ea itaque. Voluptates accusamus aspernatur, ratione, iusto consequatur saepe excepturi fugiat reprehenderit ratione, iusto consequatur saepe excepturi fugiat reprehenderit est quos ullam, iure veritatis qui nobis! Dicta sunt perferendis ah bota minima beatae temporibus commodi harum! Nostrum doloremque animi. Gest quos ullam, iure veritatis qui nobis! Dicta sunt perferendis minima beatae temporibus commodi harum! Nostrum dolor animi.</p>
<div class="para-wrap--two">
<p class="para-six">Temporibus aperiam dolores similique iste nobis eveniet officia? Tenetur adipisci enim fuga veritatis reiciendis? Labore, beatae sed eum laborum consequatur voluptate. Sit quis, temporibus non. Inventore asperiores eos beatae, qui fugiat doloribus esse repellat aliquam dicta assumenda quo, voluptatem hic itaque minima saepe quis cum debitis officia remy aut.</p>
<p class="para-seven">Beatae quos nostrum aliquam suscipit perferendis eos quod vero rem facilis, accusamus eligendi neque, ullam quam tenetur qui ratione, iusto consequatur saepe excepturi fugiat reprehenderit est quos ullam, iure veritatis qui nobis! Dicta sunt perferendis minima beatae temporibus commodi harum! Nostrum doloremque animi. Consequatur dolor dolore cum. Fugiat ex ratione voluptate ipsum necessitatibus fugit, voluptas facilis cumque dolor aliquam.</p>
<p class="para-eight">Cumque tempora asperiores voluptas doloribus adipisci quo ex harum dolores molestias nihil, voluptatibus doloremque repellat dolore nam totam, hic reiciendis blanditiis dicta at explicabo itaque aliquid ipsa nostrum quisquam. Batione, iusto consequatur saepe excepturi fugiat reprehenderit est quos ullam, iure veritatis qui nobis! Dicta sunt perferendis minima beatae temporibus commodi harum! Nostrum ah bota ale sur animi.</p>
</div>
<div class="films">
<h4>Filmography</h4>
<div>
<ol>
<li><span class="title">Iron Man (2008)</span></li>
<li><span class="title">The Incredible Hulk</span> (2008)</li>
<li><span class="title">Iron Man 2</span> (2010)</li>
<li><span class="title">Thor</span> (2011)</li>
<li><span class="title">Captain America</span> (2011)</li>
<li><span class="title">Marvel's The Avengers</span> (2012)</li>
<li><span class="title">Iron Man 3</span> (2013)</li>
<li><span class="title">Thor: The Dark World</span> (2013)</li>
<li><span class="title">Captain America: Winter Soldier</span> (2014)</li>
<li><span class="title">Guardians of the Galaxy</span> (2014)</li>
<li><span class="title">Avengers: Age of Ultron</span> (2015)</li>
<li><span class="title">Ant−Man</span> (2015)</li>
<li><span class="title">Captain America: Civil War</span> (2016)</li>
<li><span class="title">Doctor Strange</span> (2016)</li>
<li><span class="title">Guardians of the Galaxy 2</span> (2017)</li>
<li><span class="title">Spiderman: Homecoming</span> (2017)</li>
<li><span class="title">Thor: Ragnarok</span> (2017)</li>
<li><span class="title">Black Panther</span> (2018)</li>
<li><span class="title">Avengers: Infinity War</span> (2018)</li>
<li><span class="title">Ant−Man and the Wasp</span> (2018)</li>
</ol>
</div>
</div>
<div class="lines--light">
<div class="line--light"></div>
</div>
<div class="addy">
<img class="addy-image" src="https://res.cloudinary.com/jduquain/image/upload/q_auto,f_auto/v1540473632/ad-1_weqrsr.jpg" />
<div class="addy-wrap">
<h4>Bostco Connection</h4>
<p>Quaerat facere quam iure tempore provident vel. Perspiciatis provident vitae, debitis quisquam iure inventore, laborum facere asperiores cumque eligendi voluptatib.</p>
</div>
</div>
</div>
</body>
</html>:root {
box-sizing: border-box;
}
*, ::before, ::after {
box-sizing: inherit;
text-decoration: none;
margin: 0;
padding: 0;
}
body {
font-family: 'Playfair Display', serif;
max-width: 1280px;
margin: 0 auto;
font-size: .65em;
background-image: linear-gradient(to bottom, rgba(255,255,255,.4), rgba(255,255,255,.9) 150px), url('https://res.cloudinary.com/jduquain/image/upload/q_auto,f_auto/v1540473632/bg-1_vqnkbu.jpg');
background-repeat: repeat-x;
}
ol {
padding: 0 2em;
}
.grid {
margin: 6em 0;
display: grid;
grid-template-areas:
"..... ....... hero hero hero hero hero ...... ...... .........."
"..... ....... hero hero hero hero hero imgtwo imgtwo lineslight"
"lines ....... hero hero hero hero hero parathree parathree ad"
"..... paraone paraone paraone paraone paratwo paratwo parathree parathree ad"
"..... paraone paraone paraone paraone films films films films .........";
grid-template-columns: repeat(10, 1fr);
grid-template-rows: .75fr .75fr repeat(2, 1fr) .95fr;
grid-gap: 3em;
}
.inspiration {
color: #333;
position: absolute;
top: 3em;
right: 8em;
text-decoration: underline;
}
.inspiration:hover, .inspiration:focus {
color: #000;
}
/****** GRID ITEM 1 *******/
.lines {
width: 3em;
height: 5em;
position: relative;
grid-area: lines;
}
.line, .lines::before, .lines::after {
position: absolute;
content: "";
width: 1em;
height: 7em;
background-color: #bf3838;
}
.lines::before {
left: 100%
}
.lines::after {
left: 50%;
top: 0;
}
.lines--light {
width: 3em;
height: 5em;
position: relative;
}
.line--light, .lines--light::before, .lines--light::after {
position: absolute;
content: "";
width: 1em;
height: 7em;
background-color: #535050;
opacity: .2;
}
.lines--light::before {
left: 100%
}
.lines--light::after {
left: 50%;
top: 0;
}
.para-one::first-letter {
font-size: 12em;
line-height: .7;
}
.para-one {
margin-top: -8em;
}
/****** GRID ITEM 2 *******/
.hero-image {
grid-area: hero;
width: calc(100% + 5em);
transform: translateX(-5em);
height: 100%;
object-fit: cover;
border: 2px solid black;
}
/****** GRID ITEM 3 *******/
.small-image {
grid-area: imgtwo;
width: 100%;
border: 2px solid black;
}
[class^="para-"] {
text-indent: 2em;
}
.para-one {
text-indent: 0;
}
/****** GRID ITEM 4 *******/
.para-wrap--one {
grid-area: paraone;
column-width: 18em;
column-gap: 3em;
}
/****** GRID ITEM 5 *******/
.para-five {
grid-area: paratwo;
}
/****** GRID ITEM 6 *******/
.para-wrap--two {
grid-area: parathree;
}
/****** GRID ITEM 7 *******/
.films {
background-color: goldenrod;
border-radius: 10px 10px 0 0;
column-count: 3;
grid-area: films;
padding: 1em 0;
}
.films h4 {
font-size: 1.2em;
display: inline-block;
background-color: #fff;
padding: .2em 1.5em .5em .4em;
transform: translateY(-1em);
font-weight: 700;
border-radius: 0 0 12px 0;
line-height: 1.8;
}
.films .title {
font-weight: 700;
}
.films li {
padding-top: .25em
}
/****** GRID ITEM 8 *******/
.lines--light {
grid-area: lineslight;
justify-self: end;
align-self: center;
}
/****** GRID ITEM 9 *******/
.addy {
grid-area: ad;
position: relative;
font-family: Arial;
font-size: 1.1em;
}
.addy::before {
content: "";
position: absolute;
width: 2px;
height: 100%;
background-color: gray;
left: -16px;
}
.addy-image {
width: 100%;
border: 1px solid gray;
}
.addy h4 {
margin: .4em 0;
padding-bottom: .5em;
text-transform: uppercase;
line-height: 1;
font-family: Arial;
font-size: .9em;
color: #d68f0d;
position: relative;
}
.addy h4::after {
content: "";
position: absolute;
width: 40%;
height: 1px;
background-color: gray;
left: 0;
bottom: 0;
}
.addy p {
font-size: .85em;
}
@media (max-width: 1280px) {
body {
font-size: .6em;
}
}
@media (max-width: 1100px) {
body {
background-image: linear-gradient(to bottom, rgba(255,255,255,.4), rgba(255,255,255,1) 130px), url('https://res.cloudinary.com/jduquain/image/upload/q_auto,f_auto/v1540473632/bg-1_vqnkbu.jpg');
}
.grid {
margin: 4em 1em;
grid-template-areas:
"..... hero hero hero hero ...... ...... .........."
"lines hero hero hero hero imgtwo imgtwo lineslight"
"..... hero hero hero hero parathree parathree ad"
"paraone paraone paraone paraone paratwo parathree parathree ad"
"paraone paraone paraone paraone paratwo films films films";
grid-template-columns: repeat(8, 1fr);
grid-template-rows: .25fr .75fr repeat(2, 1fr) .95fr;
grid-gap: 2em;
}
.lines--light {
justify-self: center;
align-self: start;
}
}
@media (max-width: 1000px) {
.grid {
grid-template-areas:
"lines ...... ...... ...... ...... lineslight"
"paraone paraone paraone hero hero hero"
"paraone paraone paraone hero hero hero"
"parathree parathree imgtwo imgtwo paratwo paratwo"
"......... films films films ad ad";
grid-template-columns: repeat(6, 1fr);
grid-template-rows: .25fr .5fr .5fr .5fr auto;
}
.hero-image {
transform: none;
width: 100%;
}
.para-wrap--one {
align-self: center;
margin-top: 7em;
}
.para-one::first-letter {
font-size: 8em;
}
.films {
align-self: start;
}
.lines--light {
justify-self: end;
transform: translateX(-50%);
}
.addy::before {
display: none;
}
.addy {
display: flex;
align-items: center;
}
.addy-wrap {
margin-left: 1em;
}
.addy-image {
width: 30%;
}
}
@media (max-width: 850px) {
.grid {
grid-template-areas:
"lines ...... ...... ...... ...... lineslight"
"paraone paraone paraone hero hero hero"
"paraone paraone paraone hero hero hero"
"parathree parathree parathree parathree imgtwo imgtwo"
"films films films films paratwo paratwo"
"...... ...... ad ad ...... ......";
grid-template-rows: .25fr .5fr .5fr .5fr auto auto;
}
.para-wrap--two {
column-width: 20em;
}
.addy {
margin-top: 2em;
}
}
@media (max-width: 650px) {
.grid {
margin: 2em 1em;
grid-template-areas:
"lines ...... ...... ...... ...... lineslight"
"hero hero hero hero hero hero"
"hero hero hero hero hero hero"
"paraone paraone paraone paraone paraone paraone"
"paratwo paratwo paratwo imgtwo imgtwo imgtwo"
"....... parathree parathree parathree parathree ......"
"films films films films ad ad";
grid-template-rows: .15fr .5fr .5fr .5fr auto auto;
}
.hero-image {
width: 100%;
transform: none;
height: 80vw;
}
.lines {
width: 2em;
height: 3.5em;
}
.lines--light {
width: 2em;
height: 3.5em;
}
.line, .lines::before, .lines::after {
position: absolute;
content: "";
width: .7em;
height: 5em;
background-color: #bf3838;
}
.line--light, .lines--light::before, .lines--light::after {
width: .7em;
height: 5em;
}
.addy {
display: block;
}
.addy-wrap {
margin-left: 0;
}
.addy-image {
width: 50%;
}
}
@media (max-width: 550px) {
.grid {
margin: 2em 1em;
grid-template-areas:
"lines ...... ...... ...... ...... lineslight"
"hero hero hero hero hero hero"
"paraone paraone paraone paraone paraone paraone"
"imgtwo imgtwo imgtwo imgtwo imgtwo imgtwo"
"paratwo paratwo paratwo paratwo paratwo paratwo"
"parathree parathree parathree parathree parathree parathree"
"films films films films films films"
"ad ad ad ad ad ad";
grid-template-rows: .15fr .5fr .5fr .25fr auto auto;
}
.hero-image {
height: 100vw;
}
.small-image {
width: 80%;
margin: 0 auto;
}
.para-one {
margin-top: -5em;
}
.addy {
display: flex;
}
.addy-wrap {
margin-left: 1em;
}
.addy-image {
width: 50%;
}
.films li {
font-size: .9em;
}
.para-five {
column-width: 20em;
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.