sample.html (9676B)
1 <!-- This Source Code Form is subject to the terms of the Mozilla Public 2 - License, v. 2.0. If a copy of the MPL was not distributed with this 3 - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> 4 5 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 6 7 <html lang="en"> 8 <head> 9 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 10 <title>Blueprint Sample Page</title> 11 12 <!-- Framework CSS --> 13 <link 14 rel="stylesheet" 15 href="screen.css" 16 type="text/css" 17 media="screen, projection" 18 /> 19 <link rel="stylesheet" href="print.css" type="text/css" media="print" /> 20 <!--[if IE 21 ]><link 22 rel="stylesheet" 23 href="ie.css" 24 type="text/css" 25 media="screen, projection" 26 /><![endif]--> 27 28 <!-- Import fancy-type plugin for the sample page. --> 29 <link 30 rel="stylesheet" 31 href="fancytype-screen.css" 32 type="text/css" 33 media="screen, projection" 34 /> 35 </head> 36 37 <body> 38 <div class="container"> 39 <h1>A simple sample page</h1> 40 <hr /> 41 <h2 class="alt"> 42 This sample page demonstrates a tiny fraction of what you get with 43 Blueprint. 44 </h2> 45 <hr /> 46 47 <div class="span-7 colborder"> 48 <h6>Here's a box</h6> 49 <p> 50 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 51 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 52 minim veniam, quis nostrud exercitation ullamco laboris nisi ut 53 aliquip. 54 </p> 55 </div> 56 57 <div class="span-8 colborder"> 58 <h6>And another box</h6> 59 <p> 60 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 61 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 62 minim veniam, quis nostrud exercitation ullamco laboris nisi ut 63 aliquip ex ea commodo consequat laboris nisi ut aliquip. 64 </p> 65 </div> 66 67 <div class="span-7 last"> 68 <h6>This box is aligned with the sidebar</h6> 69 <p> 70 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 71 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 72 minim veniam, quis nostrud exercitation ullamco laboris nisi ut 73 aliquip. 74 </p> 75 </div> 76 <hr /> 77 <hr class="space" /> 78 79 <div class="span-15 prepend-1 colborder"> 80 <p> 81 <img src="test.jpg" class="top pull-1" alt="test" />Lorem ipsum dolor 82 sit amet, <em>consectetuer adipiscing elit</em>. Nunc congue ipsum 83 vestibulum libero. Aenean vitae justo. Nam eget tellus. Etiam 84 convallis, est eu lobortis mattis, lectus tellus tempus felis, a 85 ultricies erat ipsum at metus. 86 </p> 87 <p> 88 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 89 <a href="#">Morbi et risus</a>. Aliquam nisl. Nulla facilisi. Cras 90 accumsan vestibulum ante. Vestibulum sed tortor. Praesent 91 <span class="caps">SMALL CAPS</span> tempus fringilla elit. Ut elit 92 diam, sagittis in, nonummy in, gravida non, nunc. Ut orci. Class 93 aptent taciti sociosqu ad litora torquent per conubia nostra, per 94 inceptos hymenaeos. Nam egestas, orci eu imperdiet malesuada, nisl 95 purus fringilla odio, quis commodo est orci vitae justo. Aliquam 96 placerat odio tincidunt nulla. Cras in libero. Aenean rutrum, magna 97 non tristique posuere, erat odio eleifend nisl, non convallis est 98 tortor blandit ligula. Nulla id augue. 99 </p> 100 <p> 101 Nullam mattis, odio ut tempus facilisis, metus nisl facilisis metus, 102 auctor consectetuer felis ligula nec mauris. Vestibulum odio erat, 103 fermentum at, commodo vitae, ultrices et, urna. Mauris vulputate, mi 104 pulvinar sagittis condimentum, sem nulla aliquam velit, sed imperdiet 105 mi purus eu magna. Nulla varius metus ut eros. Aenean aliquet magna 106 eget orci. Class aptent taciti sociosqu ad litora. 107 </p> 108 <p> 109 Vivamus euismod. Cum sociis natoque penatibus et magnis dis parturient 110 montes, nascetur ridiculus mus. Suspendisse vel nibh ut turpis dictum 111 sagittis. Aliquam vel velit a elit auctor sollicitudin. Nam vel dui 112 vel neque lacinia pretium. Quisque nunc erat, venenatis id, volutpat 113 ut, scelerisque sed, diam. Mauris ante. Pellentesque habitant morbi 114 tristique senectus et netus et malesuada fames ac turpis egestas. 115 Donec mattis. Morbi dignissim sollicitudin libero. Nulla lorem. 116 </p> 117 <blockquote> 118 <p> 119 Integer cursus ornare mauris. Praesent nisl arcu, imperdiet eu, 120 ornare id, scelerisque ut, nunc. Praesent sagittis erat sed velit 121 tempus imperdiet. Ut tristique, ante in interdum hendrerit, erat 122 enim faucibus felis, quis rutrum mauris lorem quis sem. Vestibulum 123 ligula nisi, mattis nec, posuere et, blandit eu, ligula. Nam 124 suscipit placerat odio. Class aptent taciti sociosqu ad litora 125 torquent per conubia nostra, per inceptos hymenaeos. Pellentesque 126 tortor libero, venenatis vitae, rhoncus eu, placerat ut, mi. Nulla 127 nulla. 128 </p> 129 </blockquote> 130 <p> 131 Maecenas vel metus quis magna pharetra fermentum. 132 <em>Integer sit amet tortor</em>. Maecenas porttitor, pede sed gravida 133 auctor, nulla augue aliquet elit, at pretium urna orci ut metus. 134 Aliquam in dolor. Vestibulum ante ipsum primis in faucibus orci luctus 135 et ultrices posuere cubilia Curae; Sed aliquam, tellus id ornare 136 posuere, quam nunc accumsan turpis, at convallis tellus orci et nisl. 137 Phasellus congue neque a lorem. 138 </p> 139 140 <hr /> 141 <div class="span-7 colborder"> 142 <h6>This is a nested column</h6> 143 <p> 144 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 145 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 146 ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 147 aliquip ex ea commodo consequat. Duis aute irure dolor in 148 reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 149 pariatur. 150 </p> 151 </div> 152 <div class="span-7 last"> 153 <h6>This is another nested column</h6> 154 <p> 155 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 156 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 157 ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 158 aliquip ex ea commodo consequat. Duis aute irure dolor in 159 reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 160 pariatur. 161 </p> 162 </div> 163 </div> 164 <div class="span-7 last"> 165 <h3>A <span class="alt">Simple</span> Sidebar</h3> 166 167 <p> 168 Vestibulum ante ipsum primis in faucibus orci luctus et ultrices 169 posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede 170 sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem 171 nisi vel augue. 172 </p> 173 <p> 174 Mauris a lectus. Aliquam erat volutpat. Phasellus ultrices mi a 175 sapien. Nunc rutrum egestas lorem. Duis ac sem sagittis elit tincidunt 176 gravida. Mauris a lectus. Aliquam erat volutpat. Phasellus ultrices mi 177 a sapien. Nunc rutrum egestas lorem. Duis ac sem sagittis elit 178 tincidunt gravida. 179 </p> 180 <p class="quiet"> 181 Vestibulum ante ipsum primis in faucibus orci luctus et ultrices 182 posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede 183 sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem 184 nisi vel augue. 185 </p> 186 187 <h5>Incremental leading</h5> 188 <p class="incr"> 189 Vestibulum ante ipsum primis in faucibus orci luctus vestibulum ante 190 ipsum primis in faucibus orci luctus et ultrices posuere cubilia 191 Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet 192 vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. 193 sed aliquet vehicula, lectus tellus. 194 </p> 195 <p class="incr"> 196 Vestibulum ante ipsum primis in faucibus orci luctus et ultrices 197 posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede 198 sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem 199 nisi vel augue. sed aliquet vehicula, lectus tellus pulvinar neque, 200 non cursus sem nisi vel augue. ipsum primis in faucibus orci luctus et 201 ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris 202 venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, 203 non cursus sem nisi vel augue. sed aliquet vehicula, lectus tellus 204 pulvinar neque, non cursus sem nisi vel augue. 205 </p> 206 </div> 207 208 <hr /> 209 <h2 class="alt"> 210 You may pick and choose amongst these and many more features, so be 211 bold. 212 </h2> 213 <hr /> 214 215 <p> 216 <a href="http://validator.w3.org/check?uri=referer"> 217 <img 218 src="valid.png" 219 alt="Valid HTML 4.01 Strict" 220 height="31" 221 width="88" 222 class="top" 223 /></a> 224 </p> 225 </div> 226 </body> 227 </html>