-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathgrid.html
More file actions
47 lines (47 loc) · 3.56 KB
/
grid.html
File metadata and controls
47 lines (47 loc) · 3.56 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grid example</title>
<link rel="stylesheet" href="css/grid.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="offset-one-third"></div>
<div class="column-one-third">
<p>Fer Lorem ipsum dolor sit amet, consectetur adipisicing elit. At aut cumque dicta iure maxime molestiae nisi officiis praesentium repudiandae velit! Alias dolores in, iste itaque laboriosam neque omnis provident sunt.</p>
</div>
<div class="column-two-thirds">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At aut cumque dicta iure maxime molestiae nisi officiis praesentium repudiandae velit! Alias dolores in, iste itaque laboriosam neque omnis provident sunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At aut cumque dicta iure maxime molestiae nisi officiis praesentium repudiandae velit! Alias dolores in, iste itaque laboriosam neque omnis provident sunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At aut cumque dicta iure maxime molestiae nisi officiis praesentium repudiandae velit! Alias dolores in, iste itaque laboriosam neque omnis provident sunt.</p>
</div>
</div>
<div class="row">
<div class="column-one-third">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At aut cumque dicta iure maxime molestiae nisi officiis praesentium repudiandae velit! Alias dolores in, iste itaque laboriosam neque omnis provident sunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At aut cumque dicta iure maxime molestiae nisi officiis praesentium repudiandae velit! Alias dolores in, iste itaque laboriosam neque omnis provident sunt.</p>
</div>
<div class="column-one-third">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At aut cumque dicta iure maxime molestiae nisi officiis praesentium repudiandae velit! Alias dolores in, iste itaque laboriosam neque omnis provident sunt.</p>
</div>
<div class="column-one-third">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At aut cumque dicta iure maxime molestiae nisi officiis praesentium repudiandae velit! Alias dolores in, iste itaque laboriosam neque omnis provident sunt.</p>
</div>
</div>
<div class="row">
<div style="border: 1px solid red;" class="column-one-third column-three-thirds-medium">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At aut cumque dicta iure maxime molestiae nisi officiis praesentium repudiandae velit! Alias dolores in, iste itaque laboriosam neque omnis provident sunt.</p>
</div>
<div class="column-one-third">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At aut cumque dicta iure maxime molestiae nisi officiis praesentium repudiandae velit! Alias dolores in, iste itaque laboriosam neque omnis provident sunt.</p>
</div>
<div class="column-one-third">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At aut cumque dicta iure maxime molestiae nisi officiis praesentium repudiandae velit! Alias dolores in, iste itaque laboriosam neque omnis provident sunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At aut cumque dicta iure maxime molestiae nisi officiis praesentium repudiandae velit! Alias dolores in, iste itaque laboriosam neque omnis provident sunt.</p>
</div>
</div>
</div>
</body>
</html>