-
Notifications
You must be signed in to change notification settings - Fork 25
/
Smart-Grid-Demo.html
114 lines (96 loc) · 6.47 KB
/
Smart-Grid-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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Smart CSS Grid</title>
<link rel="stylesheet" href="smart-grid.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:200" rel="stylesheet">
<style>
body {
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
font:14px/1.5 Helvetica,Arial, sans-serif;
}
h1,h2{margin: 5px 0; font-family: 'Montserrat', sans-serif; }
h1{font-size: 48px; line-height:1.18; color:#E01266;}
h2{font-size: 21px; line-height:1.3;}
.center{
text-align: center;
}
p {float:left;}
p img {float:left; margin-right: 10px}
@media only screen and (max-width: 480px) {
.main{ width: 100% }
.one,.two,.three,.four,.five,.six,.seven,.eight,.nine,.ten,.eleven{
grid-column: auto / span 12
}
.one{
grid-column: auto / span 6
}
#test,#test1{
grid-column: auto / span 12; background-color: red; grid-row: auto;
}
}
</style>
</head>
<body>
<div class="main">
<div class="twelve center"><img id="logo" src="smart-grid-logo.svg"> </div>
<div class="twelve center"><h1> SMART GRID </h1> <h2>Minimal Responsive Grid System</h2></div>
<div class="six">
<p>Praesent et ipsum fermentum metus convallis consequat. Suspendisse in quam. Integer viverra consequat nisi. Donec rutrum turpis non eros. Pellentesque mauris. Sed facilisis augue quis enim. Quisque posuere, velit sit amet iaculis venenatis, dui lectus molestie magna, vel fringilla ante nunc eget urna. Nam eget lorem sit amet enim egestas pharetra.
Vivamus cursus. </p>
<p>Suspendisse potenti. Etiam sollicitudin. Vestibulum lacinia erat id neque. Morbi dolor. Nunc justo quam, pulvinar a, sagittis et, malesuada eget, nibh. Suspendisse laoreet risus ac quam. Mauris arcu.
</p>
<p>Morbi nunc. Cras in metus. Vestibulum mattis. Praesent interdum. In hac habitasse platea dictumst. Nunc commodo nisl ut turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec tristique, augue sit amet bibendum ullamcorper, ipsum nisl malesuada arcu, ac aliquet tellus justo eu nisl. Vestibulum nec est.</p>
</div>
<div class="three">
<p><img src="100g.gif" /> Praesent et ipsum fermentum metus convallis consequat. Suspendisse in quam.</p>
<p><img src="100g.gif" /> Praesent et ipsum fermentum metus convallis consequat. Suspendisse in quam. Morbi nunc. Cras in metus. Vestibulum mattis. Praesent interdum. In hac habitasse platea dictumst.</p>
</div>
<div class="three">
<p><img src="100g.gif" /> Praesent et ipsum fermentum metus convallis consequat. Suspendisse in quam.</p>
<p><img src="100g.gif" /> Praesent et ipsum fermentum metus convallis consequat. Suspendisse in quam. Morbi nunc. Cras in metus. Vestibulum mattis. Praesent interdum. In hac habitasse platea dictumst.</p>
</div>
<div class="three">
<p>
<img src="100g.gif" />
Praesent et ipsum fermentum metus convallis consequat. Suspendisse in quam. Integer viverra consequat nisi. Donec rutrum turpis non eros. Pellentesque mauris. Sed facilisis augue quis enim. Quisque posuere, velit sit amet iaculis venenatis, dui lectus molestie magna, vel fringilla ante nunc eget urna. Nam eget lorem sit amet enim egestas pharetra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae
</p>
</div>
<div class="three">
<p>
<img src="100g.gif" />
Praesent et ipsum fermentum metus convallis consequat. Suspendisse in quam. Integer viverra consequat nisi. Donec rutrum turpis non eros. Pellentesque mauris. Sed facilisis augue quis enim. Quisque posuere, velit sit amet iaculis venenatis, dui lectus molestie magna, vel fringilla ante nunc eget urna. Nam eget lorem sit amet enim egestas pharetra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae
</p>
</div>
<div class="three">
<p>
<img src="100g.gif" />
Praesent et ipsum fermentum metus convallis consequat. Suspendisse in quam. Integer viverra consequat nisi. Donec rutrum turpis non eros. Pellentesque mauris. Sed facilisis augue quis enim. Quisque posuere, velit sit amet iaculis venenatis, dui lectus molestie magna, vel fringilla ante nunc eget urna. Nam eget lorem sit amet enim egestas pharetra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae
</p>
</div>
<div class="three">
<p>
<img src="100g.gif" />
Praesent et ipsum fermentum metus convallis consequat. Suspendisse in quam. Integer viverra consequat nisi. Donec rutrum turpis non eros. Pellentesque mauris. Sed facilisis augue quis enim. Quisque posuere, velit sit amet iaculis venenatis, dui lectus molestie magna, vel fringilla ante nunc eget urna. Nam eget lorem sit amet enim egestas pharetra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae
</p>
</div>
<div class="four">
<p>Praesent et ipsum fermentum metus convallis consequat. Suspendisse in quam. Integer viverra consequat nisi. Donec rutrum turpis non eros. Pellentesque mauris. Sed facilisis augue quis enim. Quisque posuere, velit sit amet iaculis venenatis, dui lectus molestie magna, vel fringilla ante nunc eget urna. Nam eget lorem sit amet enim egestas pharetra.
</p>
</div>
<div class="four">
<p>Praesent et ipsum fermentum metus convallis consequat. Suspendisse in quam. Integer viverra consequat nisi. Donec rutrum turpis non eros. Pellentesque mauris. Sed facilisis augue quis enim. Quisque posuere, velit sit amet iaculis venenatis, dui lectus molestie magna, vel fringilla ante nunc eget urna. Nam eget lorem sit amet enim egestas pharetra.
</p>
</div>
<div class="four">
<p>Praesent et ipsum fermentum metus convallis consequat. Suspendisse in quam. Integer viverra consequat nisi. Donec rutrum turpis non eros. Pellentesque mauris. Sed facilisis augue quis enim. Quisque posuere, velit sit amet iaculis venenatis, dui lectus molestie magna, vel fringilla ante nunc eget urna. Nam eget lorem sit amet enim egestas pharetra.
</p>
</div>
<div class="twelve"><h2>Summary</h2>
<p>Smart Grid is CSS fluid responsive layout system with 12 columns and it is only 0.5 KB. Clear syntax. No unnecessary div nesting, meaning you will write less HTML.</p>
</div>
</div>
</body></html>