← Back to branch summary

~johnsca/charms/trusty/cloudfoundry/reconciler-ui

« back to all changes in this revision

Viewing changes to reconciler/ui/static/semantic/examples/homepage.html

  • Committer: Whit Morriss
  • Date: 2014-10-13 06:50:17 UTC
  • Revision ID: whit.morriss@canonical.com-20141013065017-0feo2ku3yllymkol
reorg reconciler

Show diffs side-by-side

added added

removed removed

Lines of Context:
reconciler/ui/static/semantic/examples/homepage.html
 
1
<!DOCTYPE html>
 
2
<html>
 
3
<head>
 
4
  <!-- Standard Meta -->
 
5
  <meta charset="utf-8" />
 
6
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 
7
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
 
8
 
 
9
  <!-- Site Properities -->
 
10
  <title>Homepage Example - Semantic</title>
 
11
 
 
12
  <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700' rel='stylesheet' type='text/css'>
 
13
 
 
14
  <link rel="stylesheet" type="text/css" href="../packaged/css/semantic.css">
 
15
  <link rel="stylesheet" type="text/css" href="homepage.css">
 
16
 
 
17
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
 
18
  <script src="../packaged/javascript/semantic.js"></script>
 
19
  <script src="homepage.js"></script>
 
20
 
 
21
</head>
 
22
<body id="home">
 
23
  <div class="ui inverted page grid masthead segment">
 
24
    <div class="column">
 
25
      <div class="inverted secondary pointing ui menu">
 
26
        <div class="header item">Cat University</div>
 
27
        <div class="right menu">
 
28
          <div class="ui top right pointing mobile dropdown link item">
 
29
            Menu
 
30
            <i class="dropdown icon"></i>
 
31
            <div class="menu">
 
32
              <a class="item">Classes</a>
 
33
              <a class="item">Cocktail Hours</a>
 
34
              <a class="item">Community</a>
 
35
            </div>
 
36
          </div>
 
37
          <div class="ui dropdown link item">
 
38
            Courses
 
39
            <i class="dropdown icon"></i>
 
40
            <div class="menu">
 
41
              <a class="item">Petting</a>
 
42
              <a class="item">Feeding</a>
 
43
              <a class="item">Mind Reading</a>
 
44
            </div>
 
45
          </div>
 
46
          <a class="item">Library</a>
 
47
          <a class="item">Community</a>
 
48
        </div>
 
49
      </div>
 
50
      <img src="images/cat.png" class="ui medium image">
 
51
      <div class="ui hidden transition information">
 
52
        <h1 class="ui inverted header">
 
53
          Your Cat is Dumb
 
54
        </h1>
 
55
        <p>At least he won't reach his highest potential unless you enroll him in Cat University's 2013 class.</p>
 
56
        <div class="large basic inverted animated fade ui button">
 
57
          <div class="visible content">Come to ICU 2013</div>
 
58
          <div class="hidden content">Register Now</div>
 
59
        </div>
 
60
      </div>
 
61
    </div>
 
62
  </div>
 
63
  <div class="ui page grid overview segment">
 
64
    <div class="ui two wide column"></div>
 
65
    <div class="twelve wide column">
 
66
      <div class="ui three column center aligned stackable divided grid">
 
67
        <div class="column">
 
68
          <div class="ui icon header">
 
69
            <i class="circular book link icon"></i>
 
70
            Courses 
 
71
          </div>
 
72
          <p>Take your kitty to a cat-ducation course and learn how to treat her well.</p>
 
73
          <p><a class="ui teal right labeled icon button" href="#">Learn <i class="right long arrow icon"></i></a></p>
 
74
        </div>
 
75
        <div class="column">
 
76
          <div class="ui icon header">
 
77
            <i class="circular code link icon"></i>
 
78
            Library
 
79
          </div>
 
80
          <p>Dig through our cat library to found out amazing things you can do with your kitty.</p>
 
81
          <p><a class="ui teal right labeled icon button" href="#">Research <i class="right long arrow icon"></i></a></p>
 
82
        </div>
 
83
        <div class="column">
 
84
          <div class="ui icon header">
 
85
            <i class="circular user link icon"></i>
 
86
            Community
 
87
          </div>
 
88
          <p>Get feedback on your cat from a community of loving pet owners on our online bulletin board system.</p>
 
89
          <p><a class="ui teal right labeled icon button" href="#">Share <i class="right long arrow icon"></i></a></p>
 
90
        </div>
 
91
      </div>
 
92
    </div>
 
93
  </div>
 
94
 
 
95
  <div class="ui inverted page grid stackable relaxed feature segment">
 
96
    <div class="row">
 
97
      <div class="column">
 
98
        <h1 class="center aligned ui header">
 
99
          Cat Tips Right In Your Inbox
 
100
        </h1>
 
101
      </div>
 
102
    </div>
 
103
    <div class="row">
 
104
      <div class="ten wide column">
 
105
        <h2 class="ui header">How to Win Your Cats Attention</h2>
 
106
        <p>Getting your cat to notice you is a large part of being a pet owner. Although I have a lot of patience for writing things about cats, perhaps this might be enough body copy to make this section of text look filled out.</p>
 
107
        <p>This and other tips can be found in our newsletter, amazing right?</p>
 
108
        <div class="ui basic inverted animated button button">
 
109
          <div class="visible content">Read More</div>
 
110
          <div class="hidden content"><i class="right arrow icon"></i></div>
 
111
        </div>
 
112
        <div class="ui inverted section divider"></div>
 
113
        <h3 class="ui header">More articles</h3>
 
114
        <div class="ui inverted animated selection list">
 
115
          <div class="item">
 
116
            How to win in a fight with a cat
 
117
            <div class="right floated">Jan 20, 2023</div>
 
118
          </div>
 
119
          <div class="item">
 
120
            A Supposedly Fun Cat Toy I will Never Buy Again
 
121
            <div class="right floated">Jan 1, 2023</div>
 
122
          </div>
 
123
          <div class="item">
 
124
            Much ado about yarn
 
125
            <div class="right floated">Dec 20, 2022</div>
 
126
          </div>
 
127
        </div>
 
128
      </div>
 
129
      <div class="six wide column">
 
130
        <div class="ui secondary form segment">
 
131
          <h3 class="ui header">Get Our Amazing Newsletter Bi-Daily</h3>
 
132
          <p>Sign up and get spammed with cats every day. We have no unsubscribe button!</p>
 
133
          <div class="field">
 
134
            <div class="ui left icon action input">
 
135
              <i class="user icon"></i>
 
136
              <input name="email" type="text" placeholder="name@email.com">
 
137
              <div class="ui teal submit button">Sign up</div>
 
138
            </div>
 
139
          </div>
 
140
          <div class="ui error message"></div>
 
141
        </div>
 
142
      </div>
 
143
    </div>
 
144
  </div>
 
145
 
 
146
  <div class="ui page grid stackable segment">
 
147
    <div class="row">
 
148
      <div class="column">
 
149
        <h1 class="center aligned ui header">
 
150
          Many Companies Rely on Our Cat Knowledge
 
151
        </h1>
 
152
        <div class="ui horizontal divider"><i class="heart icon"></i></div>
 
153
      </div>
 
154
    </div>
 
155
    <div class="center four column aligned row">
 
156
      <div class="column">
 
157
        <div class="ui text shape">
 
158
          <div class="sides">
 
159
            <div class="active side">
 
160
              <i class="huge circular github icon"></i>
 
161
            </div>
 
162
            <div class="side">
 
163
              <i class="huge circular facebook icon"></i>
 
164
            </div>
 
165
            <div class="side">
 
166
              <i class="huge circular maxcdn icon"></i>
 
167
            </div>
 
168
            <div class="side">
 
169
              <i class="huge circular pinterest icon"></i>
 
170
            </div>
 
171
            <div class="side">
 
172
              <i class="huge circular weibo icon"></i>
 
173
            </div>
 
174
            <div class="side">
 
175
              <i class="huge circular flickr icon"></i>
 
176
            </div>
 
177
          </div>
 
178
        </div>
 
179
      </div>
 
180
      <div class="column">
 
181
        <div class="ui text shape">
 
182
          <div class="sides">
 
183
            <div class="side">
 
184
              <i class="huge circular github icon"></i>
 
185
            </div>
 
186
            <div class="side">
 
187
              <i class="huge circular facebook icon"></i>
 
188
            </div>
 
189
            <div class="active side">
 
190
              <i class="huge circular maxcdn icon"></i>
 
191
            </div>
 
192
            <div class="side">
 
193
              <i class="huge circular pinterest icon"></i>
 
194
            </div>
 
195
            <div class="side">
 
196
              <i class="huge circular weibo icon"></i>
 
197
            </div>
 
198
            <div class="side">
 
199
              <i class="huge circular flickr icon"></i>
 
200
            </div>
 
201
          </div>
 
202
        </div>
 
203
      </div>
 
204
      <div class="column">
 
205
        <div class="ui text shape">
 
206
          <div class="sides">
 
207
            <div class="side">
 
208
              <i class="huge circular github icon"></i>
 
209
            </div>
 
210
            <div class="side">
 
211
              <i class="huge circular facebook icon"></i>
 
212
            </div>
 
213
            <div class="side">
 
214
              <i class="huge circular maxcdn icon"></i>
 
215
            </div>
 
216
            <div class="side">
 
217
              <i class="huge circular pinterest icon"></i>
 
218
            </div>
 
219
            <div class="active side">
 
220
              <i class="huge circular weibo icon"></i>
 
221
            </div>
 
222
            <div class="side">
 
223
              <i class="huge circular flickr icon"></i>
 
224
            </div>
 
225
          </div>
 
226
        </div>
 
227
      </div>
 
228
      <div class="column">
 
229
        <div class="ui text shape">
 
230
          <div class="sides">
 
231
            <div class="side">
 
232
              <i class="huge circular github icon"></i>
 
233
            </div>
 
234
            <div class="side">
 
235
              <i class="huge circular facebook icon"></i>
 
236
            </div>
 
237
            <div class="side">
 
238
              <i class="huge circular maxcdn icon"></i>
 
239
            </div>
 
240
            <div class="side">
 
241
              <i class="huge circular pinterest icon"></i>
 
242
            </div>
 
243
            <div class="side">
 
244
              <i class="huge circular weibo icon"></i>
 
245
            </div>
 
246
            <div class="active side">
 
247
              <i class="huge circular flickr icon"></i>
 
248
            </div>
 
249
          </div>
 
250
        </div>
 
251
      </div>
 
252
    </div>
 
253
  </div>
 
254
  <div class="ui inverted teal page grid segment">
 
255
    <div class="ten wide column">
 
256
      <div class="ui three column stackable grid">
 
257
        <div class="column">
 
258
          <div class="ui header">Courses</div>
 
259
          <div class="ui inverted link list">
 
260
            <a class="item">Registration</a>
 
261
            <a class="item">Course Calendar</a>
 
262
            <a class="item">Professors</a>
 
263
          </div>
 
264
        </div>
 
265
        <div class="column">
 
266
          <div class="ui header">Library</div>
 
267
          <div class="ui inverted link list">
 
268
            <a class="item">A-Z</a>
 
269
            <a class="item">Most Popular</a>
 
270
            <a class="item">Recently Changed</a>
 
271
          </div>
 
272
        </div>
 
273
        <div class="column">
 
274
          <div class="ui header">Community</div>
 
275
          <div class="ui inverted link list">
 
276
            <a class="item">BBS</a>
 
277
            <a class="item">Careers</a>
 
278
            <a class="item">Privacy Policy</a>
 
279
          </div>
 
280
        </div>
 
281
      </div>
 
282
    </div>
 
283
    <div class="six wide right floated aligned column">
 
284
      <h3 class="ui header">Contact Us</h3>
 
285
      <addr>
 
286
        237 Catberry Road <br>
 
287
        Milton Keynes, London <br>
 
288
      </addr>
 
289
      <p>(404) 867-5309</p>
 
290
    </div>
 
291
  </div>
 
292
</body>
 
293
 
 
294
</html>