-
Notifications
You must be signed in to change notification settings - Fork 10
/
index2.html
executable file
·128 lines (112 loc) · 5.57 KB
/
index2.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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!doctype html>
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9 oldie" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Grids Demo | Codrops</title>
<meta name="description" content="A real world demonstration of how a modular and nestable grid provides dynamic layouts at different viewports." />
<meta name="keywords" content="" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--[if lte IE 7]><style>.support-note .note-ie{display:block;}</style><![endif]-->
</head>
<body>
<div class="container">
<!-- Codrops top bar -->
<div class="codrops-top cf">
<a href="">
<strong>« Previous Demo: </strong>
</a>
<span class="right">
<a href="http://lorempixel.com/">Images by lorempixel.com</a>
<a href="http://tympanus.net/codrops/2013/01/23/dynamic-grids-robust-nestable-and-easy-to-use/">
<strong>Back to the Codrops Article</strong>
</a>
</span>
</div><!--/ Codrops top bar -->
<header class="cf">
<h1>Dynamic Grids In The Real World <span>Resize your browser to see how different layouts are served to different viewports</span></h1>
<nav class="codrops-demos">
<a href="index.html">Demo 1</a>
<a class="current-demo" href="index2.html">Demo 2</a>
</nav>
<div class="support-note">
<span class="note-ie">Sorry, only modern browsers.</span>
</div>
</header>
<div class="main">
<div class="resize"><small><strong>resize me!</strong></small></div>
<div class="row cf">
<div class="mb-gamma col span_12_vpalpha span_3_vpgamma span_3_ie8">
<div class="row cf">
<div class="col span_3_vpalpha span_12_vpgamma span_12_ie8">
<img class="mb-alpha" src="http://lorempixel.com/300/300/people/7">
</div>
<div class="col span_9_vpalpha span_7_vpbeta span_12_vpgamma col-12-ie8">
<h1>Pikaboo!</h1>
</div>
<div class="col span_9_vpalpha span_2_vpbeta span_12_vpgamma col-12-ie8">
<small class="d-iblock mb-alpha"><sub>4 Jan, 2052</sub></small>
</div>
<div class="col span_12_vpalpha span_9_vpbeta span_12_vpgamma col-12-ie8">
<p class="mb-alpha">Each year, Oscar attempts the four hundred mile walk from Newport Beach to Berkeley, California. In the twelve years that he's attempted this, he's never made it farther than UC Irvine.</p>
</div>
</div>
</div>
<div class="mb-gamma col span_12_vpalpha span_3_vpgamma span_3_ie8">
<div class="row cf">
<div class="col span_3_vpalpha push_9_vpalpha span_12_vpgamma pull_push_0_vpgamma span_12_ie8">
<img class="mb-alpha" src="http://lorempixel.com/300/300/people/9">
</div>
<div class="col span_9_vpalpha pull_3_vpalpha span_7_vpbeta span_12_vpgamma pull_push_0_vpgamma col-12-ie8">
<h1>Well Red</h1>
</div>
<div class="col span_9_vpalpha pull_3_vpalpha span_2_vpbeta span_12_vpgamma pull_push_0_vpgamma col-12-ie8">
<small class="d-iblock mb-alpha"><sub>29 Feb, 2052</sub></small>
</div>
<div class="col span_12_vpalpha pull_3_vpbeta span_9_vpbeta span_12_vpgamma pull_push_0_vpgamma col-12-ie8">
<p class="mb-alpha">What is she doing at a beauty pageant? Is she running the lights or something? I'm foolish and I'm funny and I'm needy. Am I needy?</p>
</div>
</div>
</div>
<div class="mb-gamma col span_12_vpalpha span_3_vpgamma span_3_ie8">
<div class="row cf">
<div class="col span_3_vpalpha span_12_vpgamma span_12_ie8">
<img class="mb-alpha" src="http://lorempixel.com/300/300/sports/4">
</div>
<div class="col span_9_vpalpha span_7_vpbeta span_12_vpgamma col-12-ie8">
<h1>Airtime</h1>
</div>
<div class="col span_9_vpalpha span_2_vpbeta span_12_vpgamma col-12-ie8">
<small class="d-iblock mb-alpha"><sub>16 Jul, 2052</sub></small>
</div>
<div class="col span_12_vpalpha span_9_vpbeta span_12_vpgamma col-12-ie8">
<p class="mb-alpha">One of the guys told me to take my head out of my BOTTOM and get back to work…my BOTTOM! Hahahaha. Say something that will terrify me.</p>
</div>
</div>
</div>
<div class="mb-gamma col span_12_vpalpha span_3_vpgamma span_3_ie8">
<div class="row cf">
<div class="col span_3_vpalpha push_9_vpalpha span_12_vpgamma pull_push_0_vpgamma span_12_ie8">
<img class="mb-alpha" src="http://lorempixel.com/300/300/people/5">
</div>
<div class="col span_9_vpalpha pull_3_vpalpha span_7_vpbeta span_12_vpgamma pull_push_0_vpgamma col-12-ie8">
<h1>Trained</h1>
</div>
<div class="col span_9_vpalpha pull_3_vpalpha span_2_vpbeta span_12_vpgamma pull_push_0_vpgamma col-12-ie8">
<small class="d-iblock mb-alpha"><sub>1 Nov, 2052</sub></small>
</div>
<div class="col span_12_vpalpha pull_3_vpbeta span_9_vpbeta span_12_vpgamma pull_push_0_vpgamma col-12-ie8">
<p class="mb-alpha">Everything they do is so dramatic and flamboyant. It just makes me want to set myself on fire. Oh, hi, Mom. I have the afternoon free. Really? Did "nothing" cancel?</p>
</div>
</div>
</div>
</div><!-- .row -->
</div><!-- .main -->
</div><!-- /container -->
</body>
</html>