Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit54e9ae9

Browse files
committed
add magazine layout
1 parent5ffe6c3 commit54e9ae9

File tree

3 files changed

+185
-0
lines changed

3 files changed

+185
-0
lines changed

‎98-magazine layout/index.html

Lines changed: 64 additions & 0 deletions
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+
<htmllang="en">
6+
<head>
7+
<metacharset="UTF-8"/>
8+
<metaname="viewport"content="width=device-width, initial-scale=1.0"/>
9+
<linkrel="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+
<pclass="lead">
22+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae,
23+
veniam.
24+
</p>
25+
<divclass="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

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
@importurl("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(60100%50%);
14+
--clr-neutral-900:hsl(00%0%);
15+
--clr-neutral-100:hsl(00%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:02rem;
77+
}
78+
79+
.lead {
80+
font-size:var(--fs-500);
81+
max-width:40ch;
82+
padding:1rem2rem;
83+
}
84+
85+
.flow>*+* {
86+
margin-top:1em;
87+
}
88+
89+
.article-body {
90+
columns:230ch;
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:-5px5px-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

Lines changed: 1 addition & 0 deletions
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)
[8]ページ先頭
©2009-2025 Movatter.jp