forked from vladocar/Box-CSS-Framework
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Grid.html
64 lines (50 loc) · 3.17 KB
/
Grid.html
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="box.css" media="screen, projection" rel="stylesheet" type="text/css" />
<title>Box - Grid</title>
<style>
body {background-color:#333;}
.main{background-color:#fff;width:975px; margin:0 auto;}
.g2,.g3,.g4,.g6,.g12{background-color:#fac0c0; }
.clear{clear:both; border-bottom:15px solid #fff}
@media handheld, only screen and (max-width: 480px) {
.main{
width: 100%;
border: 0;
img {
max-width:100%;
height:auto;
}
}
}
</style>
</head>
<body>
<div class="main">
<div class="clear"></div>
<div class="g2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis lacus in metus tempor fringilla id eu nisi.</div>
<div class="g2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis lacus in metus tempor fringilla id eu nisi.</div>
<div class="g2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis lacus in metus tempor fringilla id eu nisi.</div>
<div class="g2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis lacus in metus tempor fringilla id eu nisi.</div>
<div class="g2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis lacus in metus tempor fringilla id eu nisi.</div>
<div class="g2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis lacus in metus tempor fringilla id eu nisi.</div>
<div class="clear"></div>
<div class="g3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis lacus in metus tempor fringilla id eu nisi.</div>
<div class="g3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis lacus in metus tempor fringilla id eu nisi.</div>
<div class="g3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis lacus in metus tempor fringilla id eu nisi.</div>
<div class="g3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis lacus in metus tempor fringilla id eu nisi.</div>
<div class="clear"></div>
<div class="g4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis lacus in metus tempor fringilla id eu nisi.</div>
<div class="g4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis lacus in metus tempor fringilla id eu nisi.</div>
<div class="g4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis lacus in metus tempor fringilla id eu nisi.</div>
<div class="clear"></div>
<div class="g6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis lacus in metus tempor fringilla id eu nisi.</div>
<div class="g6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis lacus in metus tempor fringilla id eu nisi.</div>
<div class="clear"></div>
<div class="g12">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis lacus in metus tempor fringilla id eu nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis lacus in metus tempor fringilla id eu nisi.</div>
<div class="clear"></div>
</div>
</body>
</html>