-
Notifications
You must be signed in to change notification settings - Fork 8
/
Demo.html
93 lines (65 loc) · 4.69 KB
/
Demo.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
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
<!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" />
<title>Box</title>
<style>
.g1,.g2,.g3,.g4,.g5,.g6,.g7,.g8,.g9,.g10,.g11,.g12,
.gp10,.gp12,.gp17,.gp20,.gp25,.gp33,.gp50,.gp67,.gp75,.gp80,.gp83,.gp100
{
padding-left:10px;
border-left: 15px solid #FFFBEA !important;
}
body {background-color:#FFFBEA; font:1em/1.6 Georgia,serif;}
h1{
color:#BA3B0D; text-align: center;
}
.main{width:975px; margin:0 auto;}
.g2,.g3,.g4,.g6,.g12{background-color:transparent; }
.clear{border-bottom:15px solid #FFFBEA}
@media handheld, only screen and (max-width: 480px) {
.main{
width: 100%;
border: 0;
img {
max-width:100%;
height:auto;
}
}
}
</style>
<link href="box.css" media="screen, projection" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="main">
<div class="clear"></div>
<div class="g12"><h1>BOX</h1></div>
<div class="clear"></div>
<div class="g6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nibh magna, tincidunt vitae scelerisque a, tincidunt a risus. Ut placerat, libero id tempus mollis, neque enim volutpat quam, vitae eleifend orci magna nec nisl. Phasellus non odio nisl, a sodales mi. Nunc eget nibh mi. Vivamus nec magna eros. Proin in arcu felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse volutpat vestibulum magna et lobortis.</div>
<div class="g6">Quisque lectus purus, pellentesque et vestibulum sit amet, sollicitudin nec nisi. Integer at risus dui, et sodales nisi. Nulla iaculis imperdiet magna et malesuada. Morbi accumsan lectus et velit porta vel aliquam dolor egestas. Curabitur tincidunt, sapien a elementum aliquam, metus arcu bibendum justo, at blandit tellus sapien vel turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus suscipit orci eget mi volutpat euismod.</div>
<div class="clear"></div>
<div class="g3"><img src="images/cat1.jpg"></div>
<div class="g3"><img src="images/cat2.jpg"></div>
<div class="g3"><img src="images/cat3.jpg"></div>
<div class="g3"><img src="images/cat4.jpg"></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="g8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis lacus in metus tempor fringilla id eu nisi. Quisque lectus purus, pellentesque et vestibulum sit amet, sollicitudin nec nisi. Integer at risus dui, et sodales nisi. Nulla iaculis imperdiet magna et malesuada. Morbi accumsan lectus et velit porta vel aliquam dolor egestas. Curabitur tincidunt, sapien a elementum aliquam, metus arcu bibendum justo, at blandit tellus sapien vel turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus suscipit orci eget mi volutpat euismod. Suspendisse volutpat vestibulum magna et lobortis.</div>
<div class="g4"><img src="images/cat5.jpg"></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. Morbi accumsan lectus et velit porta vel aliquam dolor egestas. Curabitur tincidunt, sapien a elementum aliquam, metus arcu bibendum justo, at blandit tellus sapien vel turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
<div class="clear"> </div>
<div class="g6"><img src="images/cat6.jpg"></div>
<div class="g6"><img src="images/cat7.jpg"></div>
<div class="clear"> </div>
<div class="gp33">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel nulla eu justo porttitor molestie eu sit amet arcu. Sed feugiat molestie ipsum et faucibus.</div>
<div class="gp33">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel nulla eu justo porttitor molestie eu sit amet arcu. Sed feugiat molestie ipsum et faucibus.</div>
<div class="gp33">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel nulla eu justo porttitor molestie eu sit amet arcu. Sed feugiat molestie ipsum et faucibus.</div>
<div class="clear"> </div>
<div class="gp100" style="text-align:center; font-weight:bold">The End</div>
</div>
</body>
</html>