magic_stylez 0.0.0.13 → 0.0.0.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/.gitignore +2 -1
- data/lib/magic_stylez/engine.rb +3 -6
- data/lib/magic_stylez/version.rb +1 -1
- data/test/dummy/app/assets/javascripts/app.js.coffee +41 -18
- data/test/dummy/app/assets/javascripts/application.js +1 -0
- data/test/dummy/app/assets/javascripts/assets.js.coffee.erb +29 -0
- data/test/dummy/app/assets/javascripts/blank.js +14 -0
- data/test/dummy/app/assets/javascripts/views/app/start.jst.eco +13 -3
- data/test/dummy/app/assets/javascripts/views/effects/shadows.jst.eco +24 -24
- data/test/dummy/app/assets/javascripts/views/elements/buttons.jst.eco +131 -0
- data/test/dummy/app/assets/javascripts/views/elements/circle_diagram.jst.eco +67 -0
- data/test/dummy/app/assets/javascripts/views/elements/inputs.jst.eco +185 -0
- data/test/dummy/app/assets/javascripts/views/{elements → helper}/arrow_infos.jst.eco +5 -5
- data/test/dummy/app/assets/javascripts/views/helper/crossed_text.jst.eco +33 -0
- data/test/dummy/app/assets/javascripts/views/helper/divider.jst.eco +82 -0
- data/test/dummy/app/assets/javascripts/views/helper/three_previews.jst.eco +46 -0
- data/test/dummy/app/assets/javascripts/views/icons/glyphicons.jst.eco +24 -0
- data/test/dummy/app/assets/javascripts/views/icons/icomoon.jst.eco +24 -0
- data/test/dummy/app/assets/javascripts/views/icons/magicons.jst.eco +25 -0
- data/test/dummy/app/assets/javascripts/views/icons/olicons.jst.eco +1774 -0
- data/test/dummy/app/assets/javascripts/views/templates/fixed_header.jst.eco +5 -0
- data/test/dummy/app/assets/javascripts/views/templates/responsive_slidebar.jst.eco +5 -0
- data/test/dummy/app/assets/stylesheets/application.css.scss +80 -31
- data/test/dummy/app/controllers/front_controller.rb +11 -0
- data/test/dummy/app/views/front/_aside.html.erb +27 -28
- data/test/dummy/app/views/front/start.html.erb +13 -3
- data/test/dummy/app/views/front/templates.html.erb +85 -0
- data/test/dummy/app/views/layouts/application.html.erb +0 -2
- data/test/dummy/app/views/layouts/blank.html.erb +17 -0
- data/test/dummy/app/views/templates/_lorem.html.erb +89 -0
- data/test/dummy/app/views/templates/fixed-header.html.erb +53 -0
- data/test/dummy/app/views/templates/responsive-slidebar.html.erb +55 -0
- data/test/dummy/config/application.rb +1 -0
- data/test/dummy/config/routes.rb +7 -0
- data/test/dummy/public/html/fixed-header.html.erb +158 -0
- data/test/dummy/public/html/index.html +173 -0
- data/test/dummy/public/html/responsive-slidebar.html.erb +160 -0
- data/vendor/assets/fonts/magic/icomoon.eot +0 -0
- data/vendor/assets/fonts/magic/icomoon.svg +461 -0
- data/vendor/assets/fonts/magic/icomoon.ttf +0 -0
- data/vendor/assets/fonts/magic/icomoon.woff +0 -0
- data/vendor/assets/images/magic/helper/blank_10.png +0 -0
- data/vendor/assets/images/magic/helper/white_10.png +0 -0
- data/vendor/assets/javascripts/magic/circle_diagram.js.coffee +146 -0
- data/vendor/assets/javascripts/magic/collapse.js.coffee +11 -0
- data/vendor/assets/javascripts/magic/helper.js.coffee +19 -0
- data/vendor/assets/javascripts/magic-min.js.coffee +22 -0
- data/vendor/assets/javascripts/magic-stylez.js.coffee +5 -0
- data/vendor/assets/stylesheets/magic/content/_box.scss +14 -5
- data/vendor/assets/stylesheets/magic/content/_buttons.scss +285 -0
- data/vendor/assets/stylesheets/magic/content/_forms.scss +2 -70
- data/vendor/assets/stylesheets/magic/content/_inputs.scss +149 -0
- data/vendor/assets/stylesheets/magic/content/_navbar.scss +59 -0
- data/vendor/assets/stylesheets/magic/corporate/_fonts.scss +1 -1
- data/vendor/assets/stylesheets/magic/corporate/_typo.scss +8 -1
- data/vendor/assets/stylesheets/magic/corporate/_variables.scss +1 -3
- data/vendor/assets/stylesheets/magic/effects/_noise.scss +36 -0
- data/vendor/assets/stylesheets/magic/effects/_shadows.scss +22 -22
- data/vendor/assets/stylesheets/magic/elements/_circle_diagram.scss +214 -0
- data/vendor/assets/stylesheets/magic/helper/_all.scss +5 -0
- data/vendor/assets/stylesheets/magic/helper/_arrow_hints.scss +28 -0
- data/vendor/assets/stylesheets/magic/helper/_crossed.scss +22 -0
- data/vendor/assets/stylesheets/magic/helper/_divider.scss +48 -0
- data/vendor/assets/stylesheets/magic/helper/_dots.scss +26 -0
- data/vendor/assets/stylesheets/magic/helper/_three_previews.scss +33 -0
- data/vendor/assets/stylesheets/magic/icons/icomoon.scss +1392 -0
- data/vendor/assets/stylesheets/magic/layout/_section.scss +18 -2
- data/vendor/assets/stylesheets/magic/lib/_animation.scss +0 -6
- data/vendor/assets/stylesheets/magic/lib/_helper.scss +92 -0
- data/vendor/assets/stylesheets/magic/{layout → xxx}/_body.scss +0 -0
- data/vendor/assets/stylesheets/magic/{content → xxx}/_header.scss +0 -0
- data/vendor/assets/stylesheets/magic-stylez.scss +18 -79
- metadata +103 -41
- data/test/dummy/app/assets/javascripts/views/elements/icons.jst.eco +0 -9004
- data/test/dummy/public/xindex.html +0 -136
- data/vendor/assets/stylesheets/magic/content/_helper.scss +0 -70
@@ -0,0 +1,67 @@
|
|
1
|
+
<div class="section head">
|
2
|
+
<div class="corset">
|
3
|
+
<h1>CSS Circle-Diagram</h1>
|
4
|
+
</div>
|
5
|
+
</div>
|
6
|
+
|
7
|
+
|
8
|
+
|
9
|
+
<div class="section">
|
10
|
+
<div class="corset tight">
|
11
|
+
|
12
|
+
<div class="row">
|
13
|
+
<div class="col-sm-6">
|
14
|
+
<div class="circle-diagram" data-percent="87">
|
15
|
+
<div class="outer_half_one"></div>
|
16
|
+
<div class="outer_half_two"></div>
|
17
|
+
<div class="inner_half_one"></div>
|
18
|
+
<div class="inner_half_two"></div>
|
19
|
+
<div class="middle_full">87 %</div>
|
20
|
+
</div>
|
21
|
+
</div>
|
22
|
+
<div class="col-sm-6">
|
23
|
+
<div class="circle-diagram dark" data-percent="63">
|
24
|
+
<div class="outer_half_one"></div>
|
25
|
+
<div class="outer_half_two"></div>
|
26
|
+
<div class="inner_half_one"></div>
|
27
|
+
<div class="inner_half_two"></div>
|
28
|
+
<div class="middle_full">63 %</div>
|
29
|
+
</div>
|
30
|
+
</div>
|
31
|
+
</div>
|
32
|
+
<div class="clearfix"></div>
|
33
|
+
|
34
|
+
</div>
|
35
|
+
</div>
|
36
|
+
|
37
|
+
|
38
|
+
<div class="section">
|
39
|
+
<div class="corset tight">
|
40
|
+
|
41
|
+
<div class="row">
|
42
|
+
<div class="col-sm-6">
|
43
|
+
<div class="circle-diagram responsive" data-percent="87">
|
44
|
+
<img src="<%= assetPath("magic/helper/blank_10.png") %>" class="placeholder-pic" />
|
45
|
+
<div class="outer_half_one"></div>
|
46
|
+
<div class="outer_half_two"></div>
|
47
|
+
<div class="inner_half_one"></div>
|
48
|
+
<div class="inner_half_two"></div>
|
49
|
+
<div class="middle_full">87 %</div>
|
50
|
+
</div>
|
51
|
+
</div>
|
52
|
+
<div class="col-sm-6">
|
53
|
+
<div class="circle-diagram dark responsive" data-percent="63">
|
54
|
+
<img src="<%= assetPath("magic/helper/blank_10.png") %>" class="placeholder-pic" />
|
55
|
+
<div class="outer_half_one"></div>
|
56
|
+
<div class="outer_half_two"></div>
|
57
|
+
<div class="inner_half_one"></div>
|
58
|
+
<div class="inner_half_two"></div>
|
59
|
+
<div class="middle_full">63 %</div>
|
60
|
+
</div>
|
61
|
+
</div>
|
62
|
+
</div>
|
63
|
+
<div class="clearfix"></div>
|
64
|
+
|
65
|
+
</div>
|
66
|
+
</div>
|
67
|
+
|
@@ -0,0 +1,185 @@
|
|
1
|
+
<div class="section head">
|
2
|
+
<div class="corset">
|
3
|
+
<h1>Inputs</h1>
|
4
|
+
</div>
|
5
|
+
</div>
|
6
|
+
|
7
|
+
|
8
|
+
|
9
|
+
<div class="section">
|
10
|
+
<div class="corset tight">
|
11
|
+
|
12
|
+
<div class="inpt-splited input-lg press">
|
13
|
+
<span class="icn"><i class="icomoon-mail2"></i></span>
|
14
|
+
<div class="inpt">
|
15
|
+
<input placeholder="E-Mail" type="email" value="">
|
16
|
+
</div>
|
17
|
+
</div>
|
18
|
+
|
19
|
+
<div class="inpt-splited press">
|
20
|
+
<span class="icn"><i class="icomoon-mail2"></i></span>
|
21
|
+
<div class="inpt">
|
22
|
+
<input placeholder="E-Mail" type="email" value="">
|
23
|
+
</div>
|
24
|
+
</div>
|
25
|
+
|
26
|
+
<div class="inpt-splited input-sm press">
|
27
|
+
<span class="icn"><i class="icomoon-mail2"></i></span>
|
28
|
+
<div class="inpt">
|
29
|
+
<input placeholder="E-Mail" type="email" value="">
|
30
|
+
</div>
|
31
|
+
</div>
|
32
|
+
|
33
|
+
<div class="inpt-splited input-xs half press">
|
34
|
+
<span class="icn"><i class="icomoon-mail2"></i></span>
|
35
|
+
<div class="inpt">
|
36
|
+
<input placeholder="E-Mail" type="email" value="">
|
37
|
+
</div>
|
38
|
+
</div>
|
39
|
+
|
40
|
+
</div>
|
41
|
+
</div>
|
42
|
+
|
43
|
+
<div class="section shine-top">
|
44
|
+
<div class="corset">
|
45
|
+
<p class="loud">splited and divided input are nice little helper for inputs that contain an icon</p>
|
46
|
+
<p class="loud"><strong>Be carefull! .inpt-splited & .inpt-divided are always block elements.</strong></p>
|
47
|
+
<pre>
|
48
|
+
<code>
|
49
|
+
<div class="inpt-splited press"><br/> <span class="icn"><i class="icomoon-mail2"></i></span><br/> <div class="inpt"><br/> <input placeholder="E-Mail" type="email" value=""><br/> </div><br/> </div>
|
50
|
+
</code>
|
51
|
+
</pre>
|
52
|
+
<ul class="arrow loud">
|
53
|
+
<li>tag of inner element doesn't matter</li>
|
54
|
+
<li>element conaining icon need class <strong>.icn</strong></li>
|
55
|
+
<li>element conaining input need class <strong>.inpt</strong></li>
|
56
|
+
</ul>
|
57
|
+
</div>
|
58
|
+
</div>
|
59
|
+
|
60
|
+
|
61
|
+
|
62
|
+
<div class="section hard-top">
|
63
|
+
<div class="corset tight">
|
64
|
+
<div class="box">
|
65
|
+
<div class="header">
|
66
|
+
<h3>Some Form</h3>
|
67
|
+
</div>
|
68
|
+
<div class="body">
|
69
|
+
<form action="#" method="get" accept-charset="utf-8" class="form">
|
70
|
+
<div class="row">
|
71
|
+
<div class="col-sm-5 press">
|
72
|
+
<label>Text-Field</label>
|
73
|
+
</div>
|
74
|
+
<div class="col-sm-7 press">
|
75
|
+
<input type="text" class="form-control">
|
76
|
+
</div>
|
77
|
+
</div>
|
78
|
+
<div class="row">
|
79
|
+
<div class="col-sm-5 press">
|
80
|
+
<label>check_switch</label>
|
81
|
+
</div>
|
82
|
+
<div class="col-sm-3 press">
|
83
|
+
<div class="check_switch">
|
84
|
+
<div class="switch_toggle"></div>
|
85
|
+
</div>
|
86
|
+
</div>
|
87
|
+
<div class="col-sm-4 press">
|
88
|
+
<div class="check">
|
89
|
+
<a href="#" class="checka"><i class="icon-ok"></i></a>
|
90
|
+
</div>
|
91
|
+
</div>
|
92
|
+
</div>
|
93
|
+
<div class="row">
|
94
|
+
<div class="col-sm-5 press">
|
95
|
+
<label>Text-Field</label>
|
96
|
+
</div>
|
97
|
+
<div class="col-sm-7 press">
|
98
|
+
<input type="text" class="form-control">
|
99
|
+
</div>
|
100
|
+
</div>
|
101
|
+
<div class="row">
|
102
|
+
<div class="col-sm-5 press">
|
103
|
+
<label>Text-Field</label>
|
104
|
+
</div>
|
105
|
+
<div class="col-sm-7 press">
|
106
|
+
<textarea class="form-control"></textarea>
|
107
|
+
</div>
|
108
|
+
</div>
|
109
|
+
<hr/>
|
110
|
+
<div class="row">
|
111
|
+
<div class="col-sm-4">
|
112
|
+
<button class="btn btn-success btn-splited" type="submit">
|
113
|
+
<span>Continue</span>
|
114
|
+
<span class="icn">→</span>
|
115
|
+
</button>
|
116
|
+
</div>
|
117
|
+
<div class="col-sm-4">
|
118
|
+
<button class="btn btn-default btn-block" type="reset">
|
119
|
+
Reset
|
120
|
+
</button>
|
121
|
+
</div>
|
122
|
+
<div class="col-sm-4 press">
|
123
|
+
|
124
|
+
</div>
|
125
|
+
</div>
|
126
|
+
</form>
|
127
|
+
</div>
|
128
|
+
</div>
|
129
|
+
</div>
|
130
|
+
</div>
|
131
|
+
|
132
|
+
<div class="section shine-top shine-bottom">
|
133
|
+
<div class="corset tight">
|
134
|
+
<div class="row">
|
135
|
+
<div class="col-sm-4">
|
136
|
+
<div class="inpt-splited press">
|
137
|
+
<span class="icn"><i class="icomoon-mail2"></i></span>
|
138
|
+
<div class="inpt">
|
139
|
+
<input placeholder="Email" type="email" value="">
|
140
|
+
</div>
|
141
|
+
</div>
|
142
|
+
</div>
|
143
|
+
<div class="col-sm-4">
|
144
|
+
<div class="inpt-splited press">
|
145
|
+
<span class="icn"><i class="icomoon-lock"></i></span>
|
146
|
+
<div class="inpt">
|
147
|
+
<input placeholder="Password" type="password" value="">
|
148
|
+
</div>
|
149
|
+
</div>
|
150
|
+
</div>
|
151
|
+
<div class="col-sm-4">
|
152
|
+
<button class="btn btn-success btn-splited" type="submit">
|
153
|
+
<span>Continue</span>
|
154
|
+
<span class="icn">→</span>
|
155
|
+
</button>
|
156
|
+
</div>
|
157
|
+
</div>
|
158
|
+
</div>
|
159
|
+
</div>
|
160
|
+
|
161
|
+
<div class="section warning">
|
162
|
+
<div class="corset">
|
163
|
+
<h2>Old style ... will be removed in next versions.</h2>
|
164
|
+
<p>Here is the old style icon-input helper:</p>
|
165
|
+
</div>
|
166
|
+
</div>
|
167
|
+
|
168
|
+
<div class="section">
|
169
|
+
<div class="corset tight">
|
170
|
+
|
171
|
+
|
172
|
+
<div class="icon_field fat mail">
|
173
|
+
<input class="form-control input-lg" id="user_email" name="user[email]" placeholder="E-Mail" type="email" value="">
|
174
|
+
</div>
|
175
|
+
|
176
|
+
<br/>
|
177
|
+
|
178
|
+
<div class="icon_field fat password press">
|
179
|
+
<input class="form-control input-lg" id="user_email" name="user[email]" placeholder="E-Mail" type="email" value="">
|
180
|
+
</div>
|
181
|
+
|
182
|
+
|
183
|
+
</div>
|
184
|
+
</div>
|
185
|
+
|
@@ -1,6 +1,6 @@
|
|
1
1
|
<div class="section head">
|
2
2
|
<div class="corset">
|
3
|
-
<h1>Arrow
|
3
|
+
<h1>Arrow Infos</h1>
|
4
4
|
</div>
|
5
5
|
</div>
|
6
6
|
|
@@ -13,7 +13,7 @@
|
|
13
13
|
<div class="section fat">
|
14
14
|
<div class="corset center_text">
|
15
15
|
|
16
|
-
<button class="btn btn-success help_arrow" data-
|
16
|
+
<button class="btn btn-success help_arrow" data-text=".help_arrow">
|
17
17
|
Some element
|
18
18
|
</button>
|
19
19
|
|
@@ -27,7 +27,7 @@
|
|
27
27
|
<p class="loud"><strong>Be carefull! Arrow and Hint are absolute positioned, so they may overlap other content.</strong></p>
|
28
28
|
<pre>
|
29
29
|
<code>
|
30
|
-
<button class="btn btn-success help_arrow" data-
|
30
|
+
<button class="btn btn-success help_arrow" data-text="Go baby Go!"><br/> Click Me<br/> </button>
|
31
31
|
</code>
|
32
32
|
</pre>
|
33
33
|
|
@@ -38,8 +38,8 @@
|
|
38
38
|
<div class="section fat">
|
39
39
|
<div class="corset">
|
40
40
|
|
41
|
-
<button class="btn btn-default help_arrow" data-
|
42
|
-
.btn.help_arrow[data-
|
41
|
+
<button class="btn btn-default help_arrow" data-text="Here goes your info text.">
|
42
|
+
.btn.help_arrow[data-text='Here goes your info text.']
|
43
43
|
</button>
|
44
44
|
|
45
45
|
</div>
|
@@ -0,0 +1,33 @@
|
|
1
|
+
<div class="section head">
|
2
|
+
<div class="corset">
|
3
|
+
<h1>Crossed Text</h1>
|
4
|
+
</div>
|
5
|
+
</div>
|
6
|
+
|
7
|
+
<div class="section fat">
|
8
|
+
<div class="corset">
|
9
|
+
|
10
|
+
<h2>Write your layouts faster with the <span class="crossed" data-text="power">help</span> of magic_stylez.</h2>
|
11
|
+
|
12
|
+
</div>
|
13
|
+
</div>
|
14
|
+
|
15
|
+
<div class="section head">
|
16
|
+
<div class="corset">
|
17
|
+
<h3>Usage:</h3>
|
18
|
+
</div>
|
19
|
+
</div>
|
20
|
+
|
21
|
+
|
22
|
+
|
23
|
+
|
24
|
+
<div class="section shine-top">
|
25
|
+
<div class="corset">
|
26
|
+
<pre>
|
27
|
+
<code>
|
28
|
+
<span class="crossed" data-text="power">help</span>
|
29
|
+
</code>
|
30
|
+
</pre>
|
31
|
+
<p class="loud"><strong>Absolute psitioned .. needs space!</strong></p>
|
32
|
+
</div>
|
33
|
+
</div>
|
@@ -0,0 +1,82 @@
|
|
1
|
+
<div class="section head">
|
2
|
+
<div class="corset">
|
3
|
+
<h1>Divider</h1>
|
4
|
+
</div>
|
5
|
+
</div>
|
6
|
+
|
7
|
+
<div class="section">
|
8
|
+
<div class="corset center_text">
|
9
|
+
<p class="loud press">Divider are a nice hr-like text divider:</p>
|
10
|
+
|
11
|
+
<div class="divider press">
|
12
|
+
<span class="name">I'm a divider :)</span>
|
13
|
+
</div>
|
14
|
+
|
15
|
+
<p class="loud press">There are many usecases for dividers</p>
|
16
|
+
|
17
|
+
<div class="divider half press">
|
18
|
+
<span class="name">I'm a .half divider</span>
|
19
|
+
</div>
|
20
|
+
|
21
|
+
|
22
|
+
|
23
|
+
</div>
|
24
|
+
</div>
|
25
|
+
|
26
|
+
|
27
|
+
<div class="section head">
|
28
|
+
<div class="corset">
|
29
|
+
<h3>ie. divide Buttons:</h3>
|
30
|
+
</div>
|
31
|
+
</div>
|
32
|
+
|
33
|
+
<div class="section">
|
34
|
+
<div class="corset tight center_text">
|
35
|
+
|
36
|
+
<div class="btn btn-facebook btn-lg btn-divided">
|
37
|
+
<div class="icn">
|
38
|
+
<i class="icomoon-facebook"></i>
|
39
|
+
</div>
|
40
|
+
<div class="text">
|
41
|
+
Sign in with Facebook
|
42
|
+
</div>
|
43
|
+
</div>
|
44
|
+
<br/>
|
45
|
+
<div class="divider">
|
46
|
+
<span>or</span>
|
47
|
+
</div>
|
48
|
+
<br/>
|
49
|
+
<div class="inpt-splited input-lg press">
|
50
|
+
<span class="icn"><i class="icomoon-mail2"></i></span>
|
51
|
+
<div class="inpt">
|
52
|
+
<input placeholder="Email" type="email" value="">
|
53
|
+
</div>
|
54
|
+
</div>
|
55
|
+
|
56
|
+
<div class="inpt-splited input-lg press">
|
57
|
+
<span class="icn"><i class="icomoon-key"></i></span>
|
58
|
+
<div class="inpt">
|
59
|
+
<input placeholder="Password" type="password" value="">
|
60
|
+
</div>
|
61
|
+
</div>
|
62
|
+
|
63
|
+
</div>
|
64
|
+
</div>
|
65
|
+
|
66
|
+
|
67
|
+
<div class="section head">
|
68
|
+
<div class="corset">
|
69
|
+
<h3>Usage:</h3>
|
70
|
+
</div>
|
71
|
+
</div>
|
72
|
+
|
73
|
+
<div class="section shine-top">
|
74
|
+
<div class="corset">
|
75
|
+
<pre>
|
76
|
+
<code>
|
77
|
+
<div class="divider"><br/> <span>or</span><br/> </div>
|
78
|
+
</code>
|
79
|
+
</pre>
|
80
|
+
<p class="loud"><strong>Parent box needs background!</strong></p>
|
81
|
+
</div>
|
82
|
+
</div>
|
@@ -0,0 +1,46 @@
|
|
1
|
+
<div class="section head">
|
2
|
+
<div class="corset">
|
3
|
+
<h1>Three Previews</h1>
|
4
|
+
</div>
|
5
|
+
</div>
|
6
|
+
|
7
|
+
<div class="section flat-bottom">
|
8
|
+
<div class="corset tight">
|
9
|
+
|
10
|
+
<div class="three-previews">
|
11
|
+
|
12
|
+
<div class="preview">
|
13
|
+
<img src="<%= assetPath("magic/bgs/seucide.jpg") %>" />
|
14
|
+
</div>
|
15
|
+
<div class="preview">
|
16
|
+
<img src="<%= assetPath("magic/bgs/hdr_landsberger.jpg") %>" />
|
17
|
+
</div>
|
18
|
+
<div class="preview">
|
19
|
+
<img src="<%= assetPath("magic/bgs/seucide.jpg") %>" />
|
20
|
+
</div>
|
21
|
+
|
22
|
+
</div>
|
23
|
+
|
24
|
+
</div>
|
25
|
+
</div>
|
26
|
+
|
27
|
+
<div class="section shine-top">
|
28
|
+
<div class="corset">
|
29
|
+
<ul class="arrows">
|
30
|
+
<li>Needs surrounding <em>.section.flat-bottom</em></li>
|
31
|
+
<li>Next .section should have class <em>.hard-top</em> or <em>.shine-top</em></li>
|
32
|
+
<li>All Images should have the same dimensions</li>
|
33
|
+
</ul>
|
34
|
+
</div>
|
35
|
+
</div>
|
36
|
+
|
37
|
+
|
38
|
+
<div class="section hard-top">
|
39
|
+
<div class="corset">
|
40
|
+
<pre>
|
41
|
+
<code>
|
42
|
+
<div class="three-previews"><br/> <div class="preview"><br/> <img src="/images/image_1.jpg" /><br/> </div><br/> <div class="preview"><br/> <img src="/images/image_2.jpg" /><br/> </div><br/> <div class="preview"><br/> <img src="/images/image_3.jpg" /><br/> </div><br/> </div>
|
43
|
+
</code>
|
44
|
+
</pre>
|
45
|
+
</div>
|
46
|
+
</div>
|