-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
188 lines (188 loc) · 7.12 KB
/
index.html
File metadata and controls
188 lines (188 loc) · 7.12 KB
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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<link rel="stylesheet" href="/css/style.css">
<title>Grid by Example by Pao</title>
</head>
<body>
<header>
<div class="container text-white p-0">
<div>
<iframe class="twitter-btn" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" title="Twitter Follow Button" src="https://platform.twitter.com/widgets/follow_button.2b2d73daf636805223fb11d48f3e94f7.en-gb.html#dnt=false&id=twitter-widget-0&lang=en-gb&screen_name=rachelandrew&show_count=false&show_screen_name=true&size=l&time=1683305690677" data-screen-name="rachelandrew"></iframe>
</div>
<h1>
<a href="#">Grid by Example</a>
</h1>
<p>
Everything you need to learn CSS Grid Layout
</p>
</div>
<ul class="nav justify-content-evenly">
<li class="nav-item">
<a class="nav-link" href="#">Start Here</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Examples</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Patterns</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Video tutorial</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Resources</a>
</li>
</ul>
</header>
<main class="main container">
<div id="row-1" class="row gap-3">
<div class="col col-8 col-item-1">
<h1>
CSS Gride Layout
</h1>
<p>
This site is a collection of examples, video and other information to help you learn CSS Grid Layout. Developed and maintained by <a href="">Rachel Andrew</a>.
</p>
</div>
<div class="col col-item-2">
<a href="#">
<h2>
The Video Tutorial
</h2>
<p>
A collection of short and to the point videos, demonstrating various parts of the CSS Grid Layout specification.
</p>
</a>
</div>
</div>
<div id="row-2" class="row">
<div class="col row-2-col-item-1">
<a href="#">
<h2>
Get Started Guide
</h2>
<p>
A structured guide to resources that will help you to start learning CSS Grid Layout.
</p>
</a>
</div>
</div>
<div id="row-3" class="row gap-3 flag-new">
<div class="col row-3-col-item-1">
<a href="#">
<h2>
The Examples
</h2>
<p>
Small examples of the CSS Grid Layout specification. Each demonstrates a feature of the specification. Includes new Subgrid examples!
</p>
</a>
</div>
<div class="col row-3-col-item-2">
<a href="#">
<h2>
Patterns
</h2>
<p>
Grab & Go. A set of example patterns with fallbacks for older browsers.
</p>
</a>
</div>
</div>
<div id="row-4" class="row gap-3">
<div class="col col-8 row-4-col-item-1">
<a href="#">
<h2>
Resources
</h2>
<p>
More links to articles, tutorials and conference presentations that will help you learn CSS Grid Layout.
</p>
</a>
</div>
<div class="col row-4-col-item-2">
<a href="#">
<h2>
CSS Layout News
</h2>
<p>
Sign up for a weekly email full of CSS Layout links and resources.
</p>
</a>
</div>
</div>
<div id="row-5" class="row gap-3">
<div class="col col-5 row-5-col-item-1">
<a href="#">
<h2>
Questions?
</h2>
<p>
<strong>Ask me anything</strong> about Grid Layout over at my GitHub Grid AMA.
</p>
</a>
</div>
<div class="col col-4 row-5-col-item-2">
<a href="#">
<h2>
About CSS Grid
</h2>
<p>
What even is this? Do I need to care?
</p>
</a>
</div>
<div class="col row-5-col-item-3">
<a href="#">
<h2>
News
</h2>
<p>
Infrequent updates on this site.
</p>
</a>
</div>
</div>
<div id="row-6" class="row gap-3">
<div class="col row-6-col-item-1">
<a href="#">
<h2>
GridBugs!
</h2>
<p>
If you have found a bug in a browser, or want to see what we have found so far, check out this site.
</p>
</a>
</div>
</div>
</main>
<footer id="footer" class="py-1 mt-1">
<div class="footer-wrapper container">
<div class="footer-item-1">
<p>
This is a project by Rachel Andrew. Take a look at some of the other things I make.
</p>
<ul>
<li>
<a href="#">Perch CMS</a> - the original Really Little CMS. Designed for speed and simple implementation.
</li>
<li>
<a href="#">Notist</a> - slide sharing and much more. Create your public speaking portfolio.
</li>
<li>
<a href="#">The CSS Workshop</a> - learn CSS Layout with me.
</li>
</ul>
<p>
This site is hosted on <a href="#">Netlify</a> , thanks to their free hosting for open source projects.
</p>
</div>
</div>
</footer>
</body>
</html>