source: tapas/web/resources/css/library/bluetrip/examples/index.html @ 376

Last change on this file since 376 was 376, checked in by rboipsl, 12 years ago

Creation projet tapas
File size: 11.6 KB
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
4
5<head>
6       
7<!--
8==============================================
9|       WELCOME TO THE SOURCE CODE!          |
10==============================================
11|                                            |
12|        AUTHOR: Mike Crittenden             |
13|     EMAIL: mike@capsizedesigns.com         |
14|============================================|
15-->
16
17        <title>BlueTripCSS Typography - A Fusion of Blueprint and Tripoli</title>
18        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
19       
20        <link rel="stylesheet" href="../css/screen.css" type="text/css" media="screen, projection" />
21        <link rel="stylesheet" href="../css/print.css" type="text/css" media="print" /> 
22               
23        <!--[if IE]>
24                <link rel="stylesheet" href="../css/ie.css" type="text/css" media="screen, projection" />
25        <![endif]-->
26       
27        <link rel="stylesheet" href="../css/style.css" type="text/css" media="screen, projection" />
28
29</head>
30
31<body>
32        <div class="container showgrid">
33                        <div class="span-11 colborder">
34                        <h1>Level 1 heading</h1>
35                        <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
36                        <h1 class="fancy">Level 1 heading class="fancy"</h1>
37                        <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
38                        <h1 class="thin">Level 1 heading class="thin"</h1>
39                        <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
40                        <h1 class="caps">Level 1 heading class="caps"</h1>
41                        <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
42                        <h2>Level 02 Heading</h2>
43                        <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
44                        <h2 class="fancy">Level 2 heading class="fancy"</h2>
45                        <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
46                        <h2 class="thin">Level 2 heading class="thin"</h2>
47                        <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
48                        <h2 class="caps">Level 2 heading class="caps"</h2>
49                        <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
50                        <h3>Level 03 Heading</h3>
51                        <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
52                        <h3 class="fancy">Level 3 heading class="fancy"</h3>
53                        <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
54                        <h3 class="thin">Level 3 heading class="thin"</h3>
55                        <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
56                        <h3 class="caps">Level 3 heading class="caps"</h3>
57                        <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
58                        <h4>Level 04 Heading</h4>
59                        <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
60                        <h4 class="fancy">Level 4 heading class="fancy"</h4>
61                        <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
62                        <h4 class="thin">Level 4 heading class="thin"</h4>
63                        <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
64                        <h4 class="caps">Level 4 heading class="caps"</h4>
65                        <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
66                        <h5>Level 05 Heading</h5>
67                        <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
68                        <h5 class="fancy">Level 5 heading class="fancy"</h5>
69                        <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
70                        <h5 class="thin">Level 5 heading class="thin"</h5>
71                        <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
72                        <h5 class="caps">Level 5 heading class="caps"</h5>
73                        <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
74                        <h6>Level 06 Heading</h6>
75                        <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
76                        <h6 class="fancy">Level 6 heading class="fancy"</h6>
77                        <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
78                        <h6 class="thin">Level 6 heading class="thin"</h6>
79                        <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
80                        <h6 class="caps">Level 6 heading class="caps"</h6>
81                        <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. </p>
82                        <blockquote><p>Paragraph inside Blockquote: Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Sed scelerisque sagittis lorem.</p></blockquote>
83                        </div><div class="span-12 last">
84                        <address>Address: Example address 224, Sweden</address>
85                        <pre><strong>Preformated:</strong>Testing one row
86                                 and another</pre>
87                        <p>
88                        I am <a href="?abc123">the a tag</a> example<br />
89
90                        I am <abbr title="test">the abbr tag</abbr> example<br />
91
92                        I am <acronym>the acronym tag</acronym> example<br />
93                        I am <b>the b tag</b> example<br />
94                        I am <big>the big tag</big> example<br />
95
96                        I am <cite>the cite tag</cite> example<br />
97
98                        I am <code>the code tag</code> example<br />
99                        I am <del>the del tag</del> example<br />
100                        I am <dfn>the dfn tag</dfn> example<br />
101
102                        I am <em>the em tag</em> example<br />
103
104                        I am <i>the i tag</i> example<br />
105                        I am <ins>the ins tag</ins> example<br />
106
107                        I am <kbd>the kbd tag</kbd> example<br />
108
109                        I am <q>the q tag <q>inside</q> a q tag</q> example<br />
110                        I am <samp>the samp tag</samp> example<br />
111
112                        I am <small>the small tag</small> example<br />
113                        I am <span>the span tag</span> example<br />
114                        I am <strong>the strong tag</strong> example<br />
115
116                        I am <sub>the sub tag</sub> example<br />
117                        I am <sup>the sup tag</sup> example<br />
118                        I am <tt>the tt tag</tt> example<br />
119                        I am <var>the var tag</var> example<br />
120
121                        I am the <span class="small">small class</span> example<br />
122                        I am the <span class="large">large class</span> example<br />
123                        I am the <span class="quiet">quiet class</span> example<br />
124                        I am the <span class="highlight">highlight class</span> example<br />
125                        </p>
126                        <hr />
127                        <ul>
128                                <li>Unordered list 01</li>
129                                <li>Unordered list 02</li>
130                                <li>Unordered list 03
131                                        <ul>
132
133                                                <li>Unordered list inside list level 2</li>
134
135                                                <li>Unordered list inside list level 2
136                                                        <ul>
137                                                                <li>Unordered list inside list level 3</li>
138                                                                <li>Unordered list inside list level 3</li>
139                                                        </ul>
140                                                </li>
141
142                                        </ul>
143                                </li>
144
145                        </ul>
146                        <ol>
147                                <li>Ordered list 01</li>
148                                <li>Ordered list 02</li>
149                                <li>Ordered list 03
150                                        <ol>
151                                                <li>Ordered list inside list level 2</li>
152
153                                                <li>Ordered list inside list level 2
154                                                        <ol>
155
156                                                                <li>Ordered list inside list level 3</li>
157                                                                <li>Ordered list inside list level 3</li>
158                                                        </ol>
159                                                </li>
160                                        </ol>
161                                </li>
162
163                        </ol>
164                        <dl>
165                                <dt>Description list title 01</dt>
166
167                                <dd>Description list description 01</dd>
168                                <dt>Description list title 02</dt>
169                                <dd>Description list description 02</dd>
170                                <dd>Description list description 03</dd>
171
172                        </dl>
173                        <table>
174                                <caption>Table Caption</caption>
175
176                                <thead>
177                                        <tr>
178                                                <th>Table head th</th>
179                                                <td>Table head td</td>
180                                        </tr>
181
182                                </thead>
183                                <tfoot>
184                                        <tr>
185
186                                                <th>Table foot th</th>
187                                                <td>Table foot td</td>
188                                        </tr>
189                                </tfoot>
190
191                                <tbody>
192                                        <tr>
193                                                <th>Table body th</th>
194
195                                                <td>Table body td</td>
196                                        </tr>
197                                        <tr>
198                                                <td>Table body td</td>
199
200                                                <td>Table body td</td>
201                                        </tr>
202                                </tbody>
203
204                        </table>
205                        <form action="index.html#">
206                        <fieldset>
207                        <legend>Form legend</legend>
208                        <div><label for="f1">Text input:</label><br /><input type="text"  id="f1" value="input text" /></div>
209                        <div><label for="f2">Radio input:</label><br /><input type="radio"  id="f2" /></div>
210
211                        <div><label for="f3">Checkbox input:</label><br /><input type="checkbox"  id="f3" /></div>
212                        <div><label for="f4">Select field:</label><br /><select id="f4"><option>Option 01</option><option>Option 02</option></select></div>
213
214                        <div><label for="f5">Textarea:</label><br /><textarea id="f5" cols="30" rows="5" >Textarea text</textarea></div>
215                        <div><label for="f6">Input Button:</label> <br /><input type="button" id="f6" value="button text" /></div>
216                        <div><label>Button Elements: <span class="small quiet"> Can use &lt;button&gt; tag or &lt;a class="button"&gt;</span></label><br />
217                        <button class="button positive">
218                        <img src="../img/icons/tick.png" alt=""/> Save
219                        </button>
220
221                        <a class="button" href="index.html#">
222                          <img src="../img/icons/key.png" alt=""/> Change Password
223                        </a>
224
225                        <a href="index.html#" class="button negative">
226                          <img src="../img/icons/cross.png" alt=""/> Cancel
227                        </a></div>
228
229                        </fieldset>
230
231                        </form>
232                        I am <a href="something.doc">a word document</a> link, so readers know that I'm not a normal link.<br />
233                        I am <a href="something.pdf">a pdf document</a> link, so readers know that I'm not a normal link.<br />
234                        I am <a href="http://www.something.com">an external website</a> link, so readers know that I'm not a normal link.<br />
235                        I am <a href="something.rss">an rss feed</a> link, so readers know that I'm not a normal link.<br />
236                        I am <a href="something.xls">an excel spreadsheet</a> link, so readers know that I'm not a normal link.<br />
237                        I am <a href="aim:something">an AIM screenname</a> link, so readers know that I'm not a normal link.<br />
238                        I am <a href="mailto:something">an email address</a> link, so readers know that I'm not a normal link.<br />
239                        I am <a href="http://yourwebsite.com">an internal link</a>. Change the stylesheet's "http://yourwebsite.com" to your domain name so I don't look like an external link.
240                        <br /><br />
241                        <p class="success"><img src="../img/icons/tick.png" alt=""/> This is a paragraph with class="success" and <a href="http://www.something.com">a link</a>.</p>
242                        <p class="error"><img src="../img/icons/cross.png" alt=""/> This is a paragraph with class="error" and <a href="http://www.something.com">a link</a>.</p>
243                        <p class="notice"><img src="../img/icons/key.png" alt=""/> This is a paragraph with class="notice" and <a href="http://www.something.com">a link</a>.</p>
244                        </div>
245            <div class="span-24 last center">
246              <p>
247                    <a href="http://validator.w3.org/check?uri=referer" class="noicon">
248                        <img src="http://www.w3.org/Icons/valid-xhtml10"
249                        alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
250                    <a href="http://jigsaw.w3.org/css-validator/" class="noicon">
251                        <img src="http://jigsaw.w3.org/css-validator/images/vcss"
252                         alt="Valid CSS!" />
253                    </a>
254                </p>
255
256            </div>
257 
258                       
259        </div> <!-- end .container -->
260       
261</body>
262</html>
Note: See TracBrowser for help on using the repository browser.