CSS-Grid/11-instructions.html at main · dragoncillos/CSS-Grid · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html lang="en">

<head>
	<title>Instructions</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="stylesheet" href="css/base.css" />
	<style type="text/css">
		section {
			max-width: 60rem;
			margin: 4rem auto 0;
			padding: 2rem;
			background-color: #32343c;
			color: white;

			display: grid;
			gap: 2rem;
		}


		@media screen and (width > 520px) {
			section {
				grid-template-rows: repeat(3, 1fr);
				grid-auto-columns: 1fr;
				grid-auto-flow: column;
			}
		}

		@media screen and (width > 900px) {
			section {
				grid-template-rows: repeat(2, 1fr);
			}
		}

		h3 {
			font-weight: bold;
			text-transform: uppercase;
			color: aqua;
		}

		p {
			padding: 0.4rem 0;
		}

		span {
			font-size: 1.2rem;
		}
	</style>
</head>

<body>
	<section>
		<div>
			<h3>Step 1</h3>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero modi voluptatibus voluptatum quam itaque
				laudantium est.
			</p>
			<span> 👇 </span>
		</div>
		<div>
			<h3>Step 2</h3>
			<p>
				Sint, ipsam maiores tempora eos aspernatur harum exercitationem repudiandae alias ea atque placeat iste.
				Consequuntur necessitatibus.
			</p>
			<span> 👇 </span>
		</div>
		<div>
			<h3>Step 3</h3>
			<p>
				Corrupti nulla quas consectetur? Ut quam blanditiis mollitia incidunt fugit aspernatur accusantium sint,
				nobis.
			</p>
			<span> 👇 </span>
		</div>
		<div>
			<h3>Step 4</h3>
			<p>
				Unde, enim asperiores porro, accusamus odit quisquam.
			</p>
			<span> 👇 </span>
		</div>
		<div>
			<h3>Step 5</h3>
			<p>Nulla quas consectetur? Ut quam blanditiis incidunt fugit aspernatur modi voluptatibus voluptatum.</p>
			<span> 👇 </span>
		</div>
		<div>
			<h3>Step 6</h3>
			<p>
				Enim asperiores porro, accusamus odit quisquam, optio eum eius quis cupiditate fugiat nemo aliquam maxime
				vel laboriosam.
			</p>
			<span> 🎉 </span>
		</div>
	</section>
</body>

</html>