Skip to content

Commit 54e9ae9

Browse files
solygambassolygambas
committed
add magazine layout
1 parent 5ffe6c3 commit 54e9ae9

File tree

3 files changed

+185
-0
lines changed

3 files changed

+185
-0
lines changed

‎98-magazine layout/index.html

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!-- Based on Creating a Magazine Layout with CSS by Kevin Powell (2021)
2+
see: https://www.youtube.com/watch?v=QJz81yva7r0 -->
3+
4+
<!DOCTYPE html>
5+
<html lang="en">
6+
<head>
7+
<meta charset="UTF-8" />
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
9+
<link rel="stylesheet" href="style.css" />
10+
<title>Magazine Layout</title>
11+
</head>
12+
<body>
13+
<main>
14+
<article>
15+
<img
16+
src="https://images.unsplash.com/photo-1611824204322-24963b44d68b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=650&q=80"
17+
alt="woman wearing sunglasses"
18+
class="article-main-image"
19+
/>
20+
<h1>Dagny Taggart</h1>
21+
<p class="lead">
22+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae,
23+
veniam.
24+
</p>
25+
<div class="article-body flow">
26+
<p>
27+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestiae
28+
modi ab recusandae aliquid perspiciatis unde dolorum id natus velit
29+
vel, facere excepturi similique nemo enim quasi nam, expedita
30+
inventore? Repellat aspernatur ducimus facilis nemo omnis sunt unde,
31+
vel doloribus error enim id deleniti saepe placeat.
32+
</p>
33+
<p>
34+
Voluptatem ipsum tempora vel quisquam cumque natus nesciunt vitae
35+
ipsam in inventore, earum eligendi impedit. Sunt quis veniam numquam
36+
vitae, magnam, debitis reiciendis in voluptas porro voluptatum, est
37+
consequuntur illo! Assumenda saepe aliquid eos fugiat rerum
38+
similique sequi illo velit amet officia voluptas, sed ducimus.
39+
</p>
40+
<p>
41+
Quasi necessitatibus mollitia quisquam officiis molestiae fugiat
42+
officia cumque tempora accusamus adipisci quia, suscipit earum rerum
43+
illo, fugit architecto fuga eius error labore! Ducimus voluptate
44+
quae aliquid obcaecati beatae exercitationem quaerat molestiae quos,
45+
atque dolorum id quo sint vero sit reiciendis cumque consectetur
46+
molestias temporibus.
47+
</p>
48+
<blockquote>
49+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis,
50+
blanditiis.
51+
</blockquote>
52+
<p>
53+
Molestiae magnam similique dolorum vero libero doloribus neque,
54+
voluptas natus sunt facere ipsa cupiditate placeat necessitatibus
55+
cum perferendis ducimus deserunt architecto nesciunt, illum ab
56+
aliquid minus dignissimos dolore voluptatibus? Perferendis,
57+
incidunt! Repellendus numquam nobis quidem totam dolor aliquid.
58+
Placeat rerum eveniet doloribus asperiores quis iusto!
59+
</p>
60+
</div>
61+
</article>
62+
</main>
63+
</body>
64+
</html>

‎98-magazine layout/style.css

+120
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Heebo:wght@100..900&family=Oswald:wght@300..700&&display=swap");
2+
3+
*,
4+
*::before,
5+
*::after {
6+
box-sizing: border-box;
7+
}
8+
9+
:root {
10+
--ff-body: "Heebo", sans-serif;
11+
--ff-heading: "Oswald", sans-serif;
12+
13+
--clr-primary-400: hsl(60 100% 50%);
14+
--clr-neutral-900: hsl(0 0% 0%);
15+
--clr-neutral-100: hsl(0 0% 100%);
16+
17+
--fs-xl: clamp(3rem, 1rem + 10vw, 6rem);
18+
--fs-600: 2rem;
19+
--fs-500: 1.5rem;
20+
--fs-400: 1.125rem;
21+
}
22+
23+
body,
24+
h1,
25+
h2,
26+
h3,
27+
p,
28+
blockquote {
29+
margin: 0;
30+
padding: 0;
31+
}
32+
33+
body {
34+
font-family: var(--ff-body);
35+
font-size: var(--fs-400);
36+
line-height: 1.6;
37+
}
38+
39+
img {
40+
display: block;
41+
max-width: 100%;
42+
}
43+
44+
h1,
45+
blockquote {
46+
font-family: var(--ff-heading);
47+
font-weight: 900;
48+
}
49+
50+
h1 {
51+
font-size: var(--fs-xl);
52+
line-height: 1;
53+
text-transform: uppercase;
54+
}
55+
56+
blockquote {
57+
font-size: var(--fs-600);
58+
line-height: 1.2;
59+
text-align: center;
60+
margin-bottom: 1em;
61+
}
62+
63+
blockquote::before {
64+
content: open-quote;
65+
}
66+
67+
blockquote::after {
68+
content: close-quote;
69+
}
70+
71+
article {
72+
display: grid;
73+
}
74+
75+
article > *:not(img) {
76+
padding: 0 2rem;
77+
}
78+
79+
.lead {
80+
font-size: var(--fs-500);
81+
max-width: 40ch;
82+
padding: 1rem 2rem;
83+
}
84+
85+
.flow > * + * {
86+
margin-top: 1em;
87+
}
88+
89+
.article-body {
90+
columns: 2 30ch;
91+
gap: 4rem;
92+
max-width: 100ch;
93+
}
94+
95+
.article-body > p:first-child::first-letter {
96+
font-size: 4em;
97+
float: left;
98+
line-height: 1;
99+
margin: -5px 5px -10px -5px;
100+
}
101+
102+
.article-body > p:first-child::first-line {
103+
font-weight: 500;
104+
}
105+
106+
@media (min-width: 50em) {
107+
article {
108+
grid-template-columns: min(40%, 40rem) 1fr;
109+
}
110+
111+
article > img {
112+
grid-row: 1 / 4;
113+
height: 100%;
114+
object-fit: cover;
115+
}
116+
117+
article > *:not(img) {
118+
grid-column: 2 / -1;
119+
}
120+
}

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,7 @@
103103
| 95 | [Headphones Product Page](https://github.com/solygambas/html-css-fifty-projects/tree/master/95-headphones%20product%20page) | [Live Demo](https://codepen.io/solygambas/full/KKaLmEr) |
104104
| 96 | [Cloud Hosting Service](https://github.com/solygambas/html-css-fifty-projects/tree/master/96-cloud%20hosting%20service) | [Live Demo](https://codepen.io/solygambas/full/oNBrXYr) |
105105
| 97 | [Terminal Style Landing Page](https://github.com/solygambas/html-css-fifty-projects/tree/master/97-terminal%20style%20landing%20page) | [Live Demo](https://codepen.io/solygambas/full/BaWvXLG) |
106+
| 98 | [Magazine Layout](https://github.com/solygambas/html-css-fifty-projects/tree/master/98-magazine%20layout) | [Live Demo](https://codepen.io/solygambas/full/OJpGMyj) |
106107

107108
This repository is mostly based on 2 courses by Brad Traversy (2020):
108109

0 commit comments

Comments
 (0)