<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet">
<title>Magazine Layout</title>
</head>
<body>
<div class="container">
<div class="page page-1">
<div class="tags">
<div>
<div class="about-author">
<svg id="author-avatar" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg" width="80" height="80">
<title id="avatarTitle">Author Avatar</title>
<desc id="avatarDesc">A cartoon avatar of a smiling purple square on a blue background.
</desc>
<mask id="mask__beam" maskUnits="userSpaceOnUse" x="0" y="0" width="36" height="36">
<rect width="36" height="36" rx="72" fill="white"></rect>
</mask>
<g mask="url(#mask__beam)">
<rect width="36" height="36" fill="#0ebeff"></rect>
<rect x="0" y="0" width="36" height="36" transform="translate(6 6) rotate(192 18 18) scale(1)" fill="#754cac" rx="6"></rect>
<g transform="translate(0 2) rotate(-2 18 18)">
<path d="M13,19 a1,0.75 0 0,0 10,0" fill="white"></path>
<rect x="12" y="14" width="1.5" height="2" rx="1" stroke="none" fill="white"></rect>
<rect x="22" y="14" width="1.5" height="2" rx="1" stroke="none" fill="white"></rect>
</g>
</g>
</svg>
</div>
</div>
</div>
<div>
<div class="text">
<p><span class="first-words">Lorem ipsum </span> dolor sit amet consectetur adipisicing elit.
Facilis
quidem
est minima quam! Laborum odit
quidem
earum perferendis eius laudantium perspiciatis similique deleniti delectus suscipit, cum
corrupti
facere
reprehenderit esse.</p>
<aside>
<p>Quos, ad? Et, iure. Libero dolore atque magni.</p>
</aside>
<p>Animi aut, atque quibusdam similique distinctio enim iure, blanditiis rerum autem illum eum in.
Dolorem quasi
aspernatur nemo deserunt quo, libero dolore atque magni, ullam nihil corrupti et illo earum?</p>
<p>Quos, ad? Et, iure. Officia fuga unde quibusdam nemo modi perspiciatis quisquam consectetur
voluptates, dolore ab
eaque voluptatem corporis placeat consequatur itaque qui asperiores. Consequuntur quas vitae
animi
est ea!</p>
<p>Accusantium nemo labore corrupti laudantium! Quo reprehenderit ea perspiciatis temporibus! Illo
sapiente harum
fuga molestias temporibus iste animi. Velit, tenetur mollitia sit magni nulla quos veniam
molestias
consectetur
aliquam eaque.</p>
<p>Voluptatem, omnis, placeat recusandae iste explicabo accusantium velit laboriosam voluptatum
similique, fugit
culpa enim! Suscipit labore odit porro assumenda, molestiae aperiam laboriosam explicabo nemo
soluta
facere sed
libero magnam. Odio.</p>
</div>
</div>
<div class="headline-container">
<h1>Arcade Life</h1>
<div class="headline-container-section">
<h2>The next generation of arcade gamers top the leaderboard</h2>
<div class="tag featured"><span>featured</span></div>
<div class="tag cat-1"><span>culture</span></div>
<div class="tag cat-2"><span>games</span></div>
</div>
</div>
<div>
<div class="text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis quidem est minima quam! Laborum
odit
quidem
earum perferendis eius laudantium perspiciatis similique deleniti delectus suscipit, cum
corrupti
facere
reprehenderit esse. Sed officia ipsum, soluta quibusdam enim quisquam ea atque nulla sunt
temporibus,
dolorum
veniam dolor aspernatur quod. Praesentium vitae exercitationem quod, inventore eius quidem ea
sit,
nemo
reprehenderit voluptatum officia.</p>
p>Animi aut, atque quibusdam similique distinctio enim iure, blanditiis rerum autem illum eum in.
Dolorem
quasi
aspernatur nemo deserunt quo, libero dolore atque magni, ullam nihil corrupti et illo earum?</p>
<div class='img-holder'><img src="https://assets.codepen.io/t-1/freddy-g-lhy1lY3CyLI-unsplash.jpg" alt="a smiling person in a pink hoodie, standing in front of a bright pink lighted arcade basketball game. " />
</div>
<p>Voluptatem, omnis, placeat recusandae iste explicabo accusantium velit laboriosam voluptatum
similique,
fugit
culpa enim! Suscipit labore odit porro assumenda, molestiae aperiam laboriosam explicabo nemo
soluta
facere sed
libero magnam. Odio.</p>
<p>Quae, cumque blanditiis? Nisi rem ullam, ducimus qui praesentium, temporibus mollitia ex
cupiditate quidem doloribus quas.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum vitae debitis reiciendis nam
molestias,
iure,
recusandae magnam cupiditate ut dolore aliquam nesciunt ipsum sit illum nihil quibusdam mollitia
veritatis
maiores.</p>
</div>
<!-- full size image: https://images.unsplash.com/flagged/photo-1556339911-7ef846e7db43-->
</div>
</div>
<div class="page page-2">
<div class="flex page-2-heading">
<h2>High Scores <br>& <br>High Drama</h2>
<p><span class="first-words">Voluptatem</span> omnis, placeat recusandae iste explicabo accusantium
velit
laboriosam voluptatum similique, fugit
culpa enim! Suscipit labore odit porro assumenda, molestiae aperiam laboriosam explicabo nemo soluta
facere
sed
libero magnam. Odio. </p>
</div>
<div class="text">
<figure><img src="https://assets.codepen.io/t-1/cassidy-james-blaede-1lzJt360gkE-unsplash.jpg" alt="two people playing Guitar Hero Arcade. " style="shape-outside: elipse(30%)" />
<figcaption>Photo by Cassidy James Blaede</figcaption>
</figure>
<p>
Animi aut, atque quibusdam similique distinctio enim iure, blanditiis rerum autem illum eum in.
Dolorem
quasi
aspernatur nemo deserunt quo, libero dolore atque magni, ullam nihil corrupti et illo earum?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis quidem est minima quam! Laborum
odit
quidem
earum perferendis eius laudantium perspiciatis similique deleniti delectus suscipit, cum corrupti
facere
reprehenderit esse.</p>
<p>Voluptatem, omnis, placeat recusandae iste explicabo accusantium velit laboriosam voluptatum
similique,
fugit
culpa enim! Suscipit labore odit porro assumenda, molestiae aperiam laboriosam explicabo nemo soluta
facere sed
libero magnam. Odio.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Id amet ad blanditiis vero delectus
incidunt
tempore
reiciendis eius qui vel placeat reprehenderit, ut, dolore asperiores possimus impedit. Ipsum, culpa
eaque!</p>
<p>Velit vero esse quisquam accusantium? Dolore alias, quaerat quod excepturi officiis ipsa placeat
officia
necessitatibus illo, vero quasi esse aut. Doloremque nesciunt placeat animi saepe tempore
aspernatur,
officia
vitae laudantium!</p>
</div>
</div>
<div class="page page-3">
<div class="flex">
<h2>Leveling Up</h2>
<div class="text">
<p><span class="first-words">Animi aut, atque quibusdam similique distinctio enim iure, blanditiis
rerum
autem illum eum in.</span> <br>Dolorem
quasi
aspernatur nemo deserunt quo, libero dolore atque magni, ullam nihil corrupti et illo earum?</p>
<br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis quidem est minima quam! Laborum
odit
quidem
earum perferendis eius laudantium perspiciatis similique deleniti delectus suscipit, cum
corrupti
facere
reprehenderit esse.</p>
<p>Voluptatem, omnis, placeat recusandae iste explicabo accusantium velit laboriosam voluptatum
similique,
fugit
culpa enim! Suscipit labore odit porro assumenda, molestiae aperiam laboriosam explicabo nemo
soluta
facere sed
libero magnam. Odio.</p>
<p>Animi aut, atque quibusdam similique distinctio enim iure, blanditiis rerum autem illum eum in.
Dolorem
quasi
aspernatur nemo deserunt quo, libero dolore atque magni, ullam nihil corrupti et illo earum?</p>
<p>Voluptatem, omnis, placeat recusandae iste explicabo accusantium velit laboriosam voluptatum
similique,
fugit
culpa enim! Suscipit labore odit porro assumenda, molestiae aperiam laboriosam explicabo nemo
soluta
facere sed
libero magnam. Odio.</p>
<p>Asperiores cum quisquam voluptate adipisci nihil ipsa eum libero recusandae inventore facilis
modi
nulla,
provident ut, ad explicabo magnam unde voluptates commodi.</p>
<p>Consectetur sed, itaque modi fugit asperiores similique maxime voluptatum incidunt labore vero
cumque
provident,
deleniti nam? Molestiae impedit nostrum soluta quo iure, iste, nobis expedita minus ad officia
dolor
saepe.</p>
<aside>
<p>Labore vero cumque provident, deleniti nam, cumque vero.</p>
</aside>
<p>Consectetur sed, itaque modi fugit asperiores similique maxime voluptatum incidunt labore vero
cumque provident, deleniti nam? Molestiae impedit nostrum soluta quo iure, iste, nobis expedita
minus ad officia dolor saepe.</p>
<p>Aperiam est ab harum alias quae rem, cumque vero. Dolore possimus quas eius dolor voluptatibus
cumque velit, ratione aspernatur voluptatem? Nulla voluptatem quaerat placeat error, ipsam alias
dignissimos odit excepturi?</p>
</div>
</div>
<div class='img-holder-page-3 text'>
<figure><img src="https://assets.codepen.io/t-1/nick-jones-QTk3Llc-oKU-unsplash.jpg" alt="a person wearing a bucket hat, sitting on a skee ball machine lane. " />
</figure>
<figure><img src="https://assets.codepen.io/t-1/ersin-mandaliev-C5DC5bJhpRE-unsplash.jpg" alt="a person in black high-heeled boots sitting on an arcade basketball game. " />
</figure>
<figure><img src="https://assets.codepen.io/t-1/nick-jones-g7jhzbd9WFQ-unsplash.jpg" alt="a person in a white t-shirt sitting on a wheel of fortune arcade game. " />
</figure>
</div>
</div>
<!-- full size image: https://images.unsplash.com/flagged/photo-1556491168-3e6ffa3e26b2-->
<!-- full size image: https://images.unsplash.com/photo-1604112900927-e4d6d3ce3a2e -->
<div class="page page-4">
<h2>Game Over?</h2>
<div class="text">
<p>Animi aut, atque quibusdam similique distinctio enim iure, blanditiis rerum autem illum eum in.
Dolorem
quasi
aspernatur nemo deserunt quo, libero dolore atque magni, ullam nihil corrupti et illo earum?</p>
<!-- full size image: https://images.unsplash.com/photo-1533236897111-3e94666b2edf -->
<p>Velit vero esse quisquam accusantium? Dolore alias, quaerat quod excepturi officiis ipsa placeat
officia
necessitatibus illo, vero quasi esse aut. Doloremque nesciunt placeat animi saepe tempore
aspernatur,
officia
vitae laudantium!</p>
.
</p>
<div class='img-holder'>
<aside>
<p>Labore vero cumque provident, deleniti nam, cumque vero.</p>
</aside>
<figure><img src="https://assets.codepen.io/t-1/element5-digital-dwcC-OJ-bRs-unsplash.jpg" alt="three neon-lit skee ball lanes. " />
</figure>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis quidem est minima quam! Laborum
odit
quidem
earum perferendis eius laudantium perspiciatis similique deleniti delectus suscipit, cum
corrupti
facere
reprehenderit esse.</p>
<p>Aperiam est ab harum alias quae rem, cumque vero. Dolore possimus quas eius dolor voluptatibus
cumque
velit,
ratione aspernatur voluptatem? Nulla voluptatem quaerat placeat error, ipsam alias dignissimos
odit
excepturi?
</p>
<p>Consectetur sed, itaque modi fugit asperiores similique maxime voluptatum incidunt labore vero
cumque
provident,
deleniti nam? Molestiae impedit nostrum soluta quo iure, iste, nobis expedita minus ad officia
dolor
saepe
<p>Consectetur sed, itaque modi fugit asperiores similique maxime voluptatum incidunt labore vero
cumque
provident,
deleniti nam? Molestiae impedit nostrum soluta quo iure, iste, nobis expedita minus ad officia
dolor
saepe.
</p>
<p>Aperiam est ab harum alias quae rem, cumque vero. Dolore possimus quas eius dolor voluptatibus
cumque
velit,
ratione aspernatur voluptatem? Nulla voluptatem quaerat placeat error, ipsam alias dignissimos
odit
excepturi?
</p>
</div>
</div>
<footer>
Fotos: Freddy G, Element5 Digital, Nick Jones, Ersin Mandaliev, Nick Jones
<br>
<p class="byline">by Penny Pen</p>
<p class="dateline">June 21, 2021</p>
<br>
</footer>
</div>
</div>
</body>
</body>
</html>@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Quicksand:wght@500&display=swap");
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--pink: rgb(247, 0, 255);
--white: #fffffc;
}
body {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgb(0, 0, 0);
padding-top: 0px;
font-family: "Quicksand", sans-serif;
border-top: 0px;
overflow-x: hidden;
}
.container {
margin-top: 80px;
z-index: -5;
border-radius: 124px 150px 105px 150px;
width: 1200px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: var(--white);
font-family: "Quicksand", sans-serif;
border-top: 0px;
}
.page {
min-width: 1000px;
width: 1000px;
padding: 60px;
}
.about-author {
width: 230px;
height: 230px;
border: 3px solid black;
background-color: black;
border-radius: 50%;
background-color: blueviolet;
display: flex;
align-items: center;
justify-content: center;
padding: 30px;
border: 9px solid black;
}
svg {
transform: scale(3.2);
position: absolute;
}
.tags {
margin-top: -170px;
height: 200px;
background-color: black;
color: var(--white);
width: 150px;
height: 150px;
position: relative;
left: -271px;
top: 19px;
}
.headline-container-section {
min-width: 100%;
display: flex;
background-color: black;
z-index: -5;
border-radius: 150px 0 0 150px;
justify-content: flex-start;
align-items: center;
}
.headline-container {
/* background-color: black; */
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
justify-content: space-between;
/* border-radius: 0 150px 150px 0; */
height: 240px;
padding: 6em;
margin-left: -5em;
margin-right: -5em;
}
.headline-container h2 {
background-color: black;
height: 200px;
width: 300px;
display: flex;
align-items: center;
padding-left: 30px;
border-radius: 150px 0 0 150px;
z-index: -5;
}
.headline-container h2:after {
content: "";
background-color: black;
height: 200px;
width: 500px;
position: relative;
top: 0px;
left: 0px;
z-index: 50;
}
.text {
float: none;
margin: 50px;
text-align: justify;
position: relative;
}
.page-1 .text aside {
shape-outside: circle(50%);
float: right;
background-color: rgb(247, 0, 255);
position: relative;
top: -50%;
margin: 16px;
height: 160px;
width: 160px;
display: flex;
justify-content: center;
align-items: center;
padding: 1em;
text-align: center;
border-radius: 50%;
border: 10px solid black;
}
.page-3 .text aside {
shape-outside: circle(50%);
/* float: right; */
background-color: rgb(247, 0, 255);
top: 0%;
float: right;
left: 0%;
margin: 16px;
height: 160px;
width: 160px;
display: flex;
justify-content: center;
align-items: center;
padding: 1em;
text-align: center;
border-radius: 50%;
border: 10px solid black;
}
/* .page-1 .text aside::after {
content: '';
width: 212px;
height: 10em;
background-color: black;
z-index: -5;
left: 50%;
position: absolute;
} */
.text img {
margin: 1em;
margin-top: -1em;
margin-right: 3em;
width: 200px;
float: left;
object-fit: cover;
border-radius: 50%;
width: 400px;
height: 400px;
border: 15px solid black;
}
.page-1 .img-holder {
position: relative;
}
.page-1 .img-holder::after {
content: "";
width: 398px;
height: 920px;
background-color: black;
z-index: -5;
left: 17px;
top: calc(138% + 10em);
position: absolute;
border-radius: 0 0 10% 10%;
}
.page-2 h2 {
position: relative;
text-align: center;
left: 13%;
font-size: 3em;
width: 400px;
margin-top: -45px;
}
.flex {
display: flex;
}
.page-2-heading p {
margin-left: 13em;
margin-right: 2em;
text-align: justify;
}
.page-2-heading h2 {
width: 400px;
}
.page-2 .text {
float: none;
}
.page-1 img {
shape-outside: ellipse(580px 601px at 17% 136%);
}
.page-2 img {
shape-outside: ellipse(257px 300px at 55% 30%);
}
h1 {
font-family: "Press Start 2P", cursive;
font-size: 100px;
font-weight: 200;
color: var(--white);
/* text-transform: uppercase; */
text-shadow: -0.2rem -0.2rem 1rem var(--pink), 0.2rem 0.2rem 1rem var(--pink),
0 0 2rem var(--pink), 0 0 4rem var(--pink), 0 0 6rem var(--pink),
0 0 8rem var(--pink), 0 0 10rem var(--pink);
margin-left: -120px;
margin-right: 60px;
}
h1::selection {
background-color: var(--neon-border-color);
color: var(--neon-text-color);
}
h1::selection {
background-color: var(--neon-border-color);
color: var(--neon-text-color);
}
h2 {
color: white;
font-family: "Press Start 2P", cursive;
text-align: right;
}
.first-words {
font-size: 2em;
font-weight: bolder;
}
.tag {
border: 2px solid rgb(0, 13, 128);
font-weight: bolder;
font-size: 1.5em;
width: 90px;
height: 90px;
border-radius: 50%;
background-color: var(--pink);
border: 5px solid black;
color: black;
position: relative;
display: flex;
align-items: center;
justify-content: center;
top: 0%;
}
.featured {
width: 130px;
height: 130px;
}
.page-3 h2 {
writing-mode: vertical-rl;
text-orientation: upright;
background-color: black;
height: 1200px;
width: 550px;
display: flex;
align-items: center;
padding: 10px;
font-size: 50px;
border-radius: 150px 150px 0 168px;
margin-left: -50px;
}
.img-holder-page-3 {
position: relative;
width: 900px;
height: 300px;
display: flex;
margin-top: -266px;
margin-left: -50px;
margin-right: 0em;
padding: 0;
background-color: black;
border-radius: 0 150px 150px 150px;
}
.img-holder-page-3:after {
content: "";
width: 91px;
height: 183px;
background-color: rgb(0, 0, 0);
position: absolute;
top: -77px;
left: 168px;
z-index: -10;
}
.img-holder-page-3:before {
content: "";
width: 154px;
height: 150px;
background-color: var(--white);
position: absolute;
top: -149px;
left: 192px;
border-radius: 50%;
z-index: -5;
}
.img-holder-page-3 img {
width: 300px;
height: 300px;
display: flex;
margin: 0;
padding: 0;
}
.page-4 h2 {
color: black;
font-size: 60px;
}
.page-4 img {
margin-left: -400px;
margin-bottom: -60px;
height: 800px;
width: 800px;
}
.page-4 {
margin-bottom: 0;
padding-bottom: 0;
}
.page-4 .text {
margin-bottom: 0;
padding-bottom: 0;
}
.page-4 img {
margin-top: 20px;
/* shape-outside: ellipse(130px 140px at 20% 20%); */
}
.page-4 .text aside {
shape-outside: circle(50%);
/* float: right; */
background-color: rgb(247, 0, 255);
position: absolute;
top: 119px;
left: 20%;
margin: 16px;
height: 250px;
width: 250px;
display: flex;
justify-content: center;
align-items: center;
padding: 1em;
text-align: center;
border-radius: 50%;
border: 10px solid black;
}
.page-2 {
margin-top: 60px;
}
footer {
width: 1040px;
padding: 5px;
/* border: 10px solid black; */
margin-top: 60px;
border-radius: 0 36px 2920px 0;
height: 100px;
background-color: var(--pink);
font-size: 16px;
}
footer a {
color: black;
}
footer a:hover {
color: black;
opacity: 50%;
cursor: pointer;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.