Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / testing.html @ 98714f8a

History | View | Annotate | Download (6.8 kB)

1

    
2
<!DOCTYPE html>
3
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
4
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
5
<head>
6
  <meta charset="utf-8" />
7

    
8
  <!-- Set the viewport width to device width for mobile -->
9
  <meta name="viewport" content="width=device-width" />
10

    
11
  <title>~okeanos | cyclades</title>
12
  <!-- based on foundation template called Marketing -->
13
  <link rel="stylesheet" href="stylesheets/normalize.css">
14
  <link rel="stylesheet" href="stylesheets/foundation.css">
15
  <link rel="stylesheet" href="stylesheets/athina.css">
16

    
17
  <script src="javascripts/vendor/custom.modernizr.js"></script>
18
</head>
19
<body>
20

    
21
<!-- Navigation -->
22

    
23
  <nav class="top-bar">
24
    <ul class="title-area">
25
      <!-- Title Area -->
26
      <li class="toggle-topbar menu-icon"><a href="#"><span>Not Visible</span></a></li>
27
    </ul>
28
 
29
    <section class="top-bar-section">
30
      <!-- Right Nav Section -->
31
      <ul class="left">
32
        <li class="divider"></li>
33
        <li class="has-dropdown">
34
          <a href="#">Main Item 1</a>
35
          <ul class="dropdown">
36
            <li><label>Section Name</label></li>
37
            <li class="has-dropdown">
38
              <a href="#" class="">Has Dropdown, Level 1</a>
39
              <ul class="dropdown">
40
                <li><a href="#">Dropdown Options</a></li>
41
                <li><a href="#">Dropdown Options</a></li>
42
                <li><a href="#">Level 2</a></li>
43
                <li><a href="#">Subdropdown Option</a></li>
44
                <li><a href="#">Subdropdown Option</a></li>
45
                <li><a href="#">Subdropdown Option</a></li>
46
              </ul>
47
            </li>
48
            <li><a href="#">Dropdown Option</a></li>
49
            <li><a href="#">Dropdown Option</a></li>
50
            <li class="divider"></li>
51
            <li><label>Section Name</label></li>
52
            <li><a href="#">Dropdown Option</a></li>
53
            <li><a href="#">Dropdown Option</a></li>
54
            <li><a href="#">Dropdown Option</a></li>
55
            <li class="divider"></li>
56
            <li><a href="#">See all &rarr;</a></li>
57
          </ul>
58
        </li>
59
        <li class="divider"></li>
60
        <li><a href="#">Main Item 2</a></li>
61
        <li class="divider"></li>
62
        <li class="has-dropdown">
63
          <a href="#">Main Item 3</a>
64
          <ul class="dropdown">
65
            <li><a href="#">Dropdown Option</a></li>
66
            <li><a href="#">Dropdown Option</a></li>
67
            <li><a href="#">Dropdown Option</a></li>
68
            <li class="divider"></li>
69
            <li><a href="#">See all &rarr;</a></li>
70
          </ul>
71
        </li>
72
      </ul>
73
    </section>
74
  </nav>
75
 
76
  <!-- End Top Bar -->
77

    
78
  <div class="row">
79
    <div class="large-12 columns">
80

    
81
    <!-- Content Slider -->
82

    
83
      <div class="row">
84
        <div class="large-12 hide-for-small">
85

    
86
         
87
      </div>
88
    </div>
89

    
90
    <!-- End Content Slider -->
91

    
92
    <!-- Mobile Header -->
93

    
94
      <div class="row">
95
        <div class="large-12 columns show-for-small">
96

    
97
         
98

    
99
        </div>
100
      </div><br>
101

    
102
    <!-- End Mobile Header -->
103

    
104

    
105
      <div class="row">
106
        <div class="large-12 columns">
107
          <div class="row">
108
            <!-- Shows -->
109
            <div class="large-4 small-6 columns">
110

    
111
              <h4>Upcoming Shows</h4><hr>
112

    
113
              <div class="row">
114
                <div class="large-1 column">
115
                  <img src="http://placehold.it/50x50&amp;text=[img]">
116
                </div>
117

    
118
                <div class="large-9 columns">
119
                  <h5><a href="#">Venue Name</a></h5>
120
                  <h6 class="subheader show-for-small">Doors at 00:00pm</h6>
121
                </div>
122
              </div><hr>
123

    
124
              <div class="hide-for-small">
125
                <div class="row">
126
                  <div class="large-1 column">
127
                    <img src="http://placehold.it/50x50&amp;text=[img]">
128
                  </div>
129

    
130
                  <div class="large-9 columns">
131
                    <h5 class="subheader"><a href="#">Venue Name</a></h5>
132
                  </div>
133
                </div><hr>
134

    
135
                <div class="row">
136
                  <div class="large-1 column">
137
                    <img src="http://placehold.it/50x50&amp;text=[img]">
138
                  </div>
139

    
140
                  <div class="large-9 columns">
141
                    <h5 class="subheader"><a href="#">Venue Name</a></h5>
142
                  </div>
143
                </div><hr>
144

    
145
                <div class="row">
146
                  <div class="large-1 column">
147
                    <img src="http://placehold.it/50x50&amp;text=[img]">
148
                  </div>
149

    
150
                  <div class="large-9 columns">
151
                    <h5 class="subheader"><a href="#">Venue Name</a></h5>
152
                  </div>
153
                </div>
154
              </div>
155
            </div>
156
            <!-- End Shows -->
157

    
158

    
159
            <!-- Image -->
160

    
161
            <div class="large-4 small-6 columns">
162
              <img src="http://placehold.it/300x465&amp;text=Image">
163
            </div>
164

    
165
            <!-- End Image -->
166

    
167

    
168
            <!-- Feed -->
169

    
170
            <div class="large-4 small-12 columns">
171

    
172
              <h4>Blog</h4><hr>
173
              <div class="panel">
174
                <h5><a href="#">Post Title 1</a></h5>
175

    
176
                <h6 class="subheader">
177
                  Risus ligula, aliquam nec fermentum vitae, sollicitudin eget urna. Suspendisse ultrices ornare tempor...
178
                </h6>
179

    
180
                <h6><a href="#">Read More »</a></h6>
181
              </div>
182

    
183
              <div class="panel hide-for-small">
184
                <h5><a href="#">Post Title 2 »</a></h5>
185
              </div>
186

    
187
              <div class="panel hide-for-small">
188
                <h5><a href="#">Post Title 3 »</a></h5>
189
              </div>
190

    
191
              <a href="#" class="right">Go To Blog »</a>
192

    
193
            </div>
194

    
195
            <!-- End Feed -->
196

    
197
          </div>
198
        </div>
199
      </div>
200

    
201
    <!-- End Content -->
202

    
203

    
204
    <!-- Footer -->
205

    
206
      <footer class="row">
207
        <div class="large-12 columns"><hr>
208
            <div class="row">
209

    
210
              <div class="large-6 columns">
211
                  <p>&copy; Copyright no one at all. Go to town.</p>
212
              </div>
213

    
214
              <div class="large-6 small-12 columns">
215
                  <ul class="inline-list right">
216
                    <li><a href="#">Link 1</a></li>
217
                    <li><a href="#">Link 2</a></li>
218
                    <li><a href="#">Link 3</a></li>
219
                    <li><a href="#">Link 4</a></li>
220
                  </ul>
221
              </div>
222

    
223
            </div>
224
        </div>
225
      </footer>
226

    
227
    <!-- End Footer -->
228

    
229
    </div>
230
  </div>
231

    
232
  <script>
233
  document.write('<script src=javascripts/vendor/' +
234
  ('__proto__' in {} ? 'zepto' : 'jquery') +
235
  '.js><\/script>')
236
  </script>
237
  <script src="javascripts/foundation.min.js"></script>
238
  <script>
239
    $(document).foundation();
240
  </script>
241
<!-- End Footer -->
242

    
243
</body>
244
</html>