Skip to content

Commit 216cde9

Browse files
rachelandrewrachelandrew
committed
Adding media object example, tidying up other examples
1 parent 4fecef4 commit 216cde9

11 files changed

+561
-7
lines changed

‎css-cookbook/balloon-sq2.jpg‎

34.4 KB
Loading

‎css-cookbook/center--download.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,14 @@
99

1010

1111
<style>
12+
body {
13+
background-color: #fff;
14+
color: #333;
15+
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
16+
padding: 0;
17+
margin: 0;
18+
}
19+
1220
.container {
1321
border: 2px solid rgb(75, 70, 74);
1422
border-radius: .5em;

‎css-cookbook/columns-flexbox--download.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,14 @@
88
<title>CSS Cookbook: columns with flexbox</title>
99

1010
<style>
11+
body {
12+
background-color: #fff;
13+
color: #333;
14+
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
15+
padding: 0;
16+
margin: 0;
17+
}
18+
1119
.container {
1220
border: 2px solid rgb(75, 70, 74);
1321
border-radius: .5em;

‎css-cookbook/columns-flexbox-wrapping--download.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,14 @@
88
<title>CSS Cookbook: columns with flexbox, wrapping</title>
99

1010
<style>
11+
body {
12+
background-color: #fff;
13+
color: #333;
14+
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
15+
padding: 0;
16+
margin: 0;
17+
}
18+
1119
.container {
1220
border: 2px solid rgb(75, 70, 74);
1321
border-radius: .5em;

‎css-cookbook/columns-grid--download.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,14 @@
88
<title>CSS Cookbook: columns with grid</title>
99

1010
<style>
11+
body {
12+
background-color: #fff;
13+
color: #333;
14+
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
15+
padding: 0;
16+
margin: 0;
17+
}
18+
1119
.container {
1220
border: 2px solid rgb(75, 70, 74);
1321
border-radius: .5em;

‎css-cookbook/columns-multicol--download.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,14 @@
1010
<link rel="stylesheet" href="styles.css">
1111

1212
<style>
13+
body {
14+
background-color: #fff;
15+
color: #333;
16+
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
17+
padding: 0;
18+
margin: 0;
19+
}
20+
1321
.container {
1422
border: 2px solid rgb(75, 70, 74);
1523
border-radius: .5em;

‎css-cookbook/media-objects--download.html‎

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
<!doctype html>
2+
3+
<html lang="en">
4+
5+
<head>
6+
<meta charset="utf-8">
7+
<!-- this is an example from the MDN Layout Cookbook -->
8+
<title>CSS Cookbook: media objects</title>
9+
10+
<style>
11+
body {
12+
background-color: #fff;
13+
color: #333;
14+
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
15+
padding: 0;
16+
margin: 0;
17+
}
18+
19+
img {
20+
max-width: 100%;
21+
}
22+
23+
p {
24+
margin: 0 0 1em 0;
25+
}
26+
27+
@media (min-width: 500px) {
28+
.media {
29+
display: grid;
30+
grid-template-columns: fit-content(200px) 1fr;
31+
grid-template-rows: 1fr auto;
32+
grid-template-areas:
33+
"image content"
34+
"image footer";
35+
grid-gap: 20px;
36+
margin-bottom: 4em;
37+
}
38+
39+
.media-flip {
40+
grid-template-columns: 1fr fit-content(250px);
41+
grid-template-areas:
42+
"content image"
43+
"footer image";
44+
}
45+
46+
.media>.media {
47+
grid-column-start: 2;
48+
}
49+
50+
.media-flip>.media {
51+
grid-column-start: 1;
52+
}
53+
54+
.img {
55+
grid-area: image;
56+
}
57+
58+
.content {
59+
grid-area: content;
60+
}
61+
62+
.footer {
63+
grid-area: footer;
64+
}
65+
66+
}
67+
</style>
68+
69+
</head>
70+
71+
<body>
72+
73+
<div class="media">
74+
75+
<div class="img">
76+
<img src="balloon-sq2.jpg" alt="Balloons">
77+
</div>
78+
79+
<div class="content">
80+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet
81+
maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et
82+
aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis
83+
condimentum.</p>
84+
</div>
85+
<div class="footer">
86+
An optional footer goes here.
87+
</div>
88+
</div>
89+
90+
<div class="media">
91+
92+
<div class="img">
93+
<img src="sharp-account_box-24px.svg" width="80px" alt="Account">
94+
</div>
95+
<div class="content">
96+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet
97+
maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et
98+
aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis
99+
condimentum.</p>
100+
</div>
101+
<div class="footer"></div>
102+
</div>
103+
104+
<div class="media media-flip">
105+
106+
<div class="img">
107+
<img src="balloon-sq2.jpg" alt="Balloons">
108+
</div>
109+
110+
<div class="content">
111+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet
112+
maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et
113+
aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis
114+
condimentum.</p>
115+
</div>
116+
<div class="footer">
117+
An optional footer goes here.
118+
</div>
119+
</div>
120+
121+
<div class="media">
122+
123+
<a class="img">
124+
<img src="balloon-sq2.jpg" alt="Balloons">
125+
</a>
126+
127+
<div class="content">
128+
129+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet
130+
maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et
131+
aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis
132+
condimentum.</p>
133+
</div>
134+
135+
<div class="footer"></div>
136+
137+
<div class="media">
138+
139+
<a class="img">
140+
<img src="balloon-sq2.jpg" alt="Balloons">
141+
</a>
142+
143+
<div class="content">
144+
145+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet
146+
maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales
147+
tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor
148+
venenatis condimentum.</p>
149+
</div>
150+
151+
<div class="footer"></div>
152+
153+
</div>
154+
155+
</div>
156+
157+
158+
159+
160+
</html>

0 commit comments

Comments
 (0)