diff options
Diffstat (limited to 'build/pgo/blueprint/sample.html')
| -rw-r--r-- | build/pgo/blueprint/sample.html | 227 |
1 files changed, 227 insertions, 0 deletions
diff --git a/build/pgo/blueprint/sample.html b/build/pgo/blueprint/sample.html new file mode 100644 index 0000000000..8ae603717b --- /dev/null +++ b/build/pgo/blueprint/sample.html @@ -0,0 +1,227 @@ +<!-- This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this + - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> + +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> + +<html lang="en"> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>Blueprint Sample Page</title> + + <!-- Framework CSS --> + <link + rel="stylesheet" + href="screen.css" + type="text/css" + media="screen, projection" + /> + <link rel="stylesheet" href="print.css" type="text/css" media="print" /> + <!--[if IE + ]><link + rel="stylesheet" + href="ie.css" + type="text/css" + media="screen, projection" + /><![endif]--> + + <!-- Import fancy-type plugin for the sample page. --> + <link + rel="stylesheet" + href="fancytype-screen.css" + type="text/css" + media="screen, projection" + /> + </head> + + <body> + <div class="container"> + <h1>A simple sample page</h1> + <hr /> + <h2 class="alt"> + This sample page demonstrates a tiny fraction of what you get with + Blueprint. + </h2> + <hr /> + + <div class="span-7 colborder"> + <h6>Here's a box</h6> + <p> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip. + </p> + </div> + + <div class="span-8 colborder"> + <h6>And another box</h6> + <p> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat laboris nisi ut aliquip. + </p> + </div> + + <div class="span-7 last"> + <h6>This box is aligned with the sidebar</h6> + <p> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip. + </p> + </div> + <hr /> + <hr class="space" /> + + <div class="span-15 prepend-1 colborder"> + <p> + <img src="test.jpg" class="top pull-1" alt="test" />Lorem ipsum dolor + sit amet, <em>consectetuer adipiscing elit</em>. Nunc congue ipsum + vestibulum libero. Aenean vitae justo. Nam eget tellus. Etiam + convallis, est eu lobortis mattis, lectus tellus tempus felis, a + ultricies erat ipsum at metus. + </p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + <a href="#">Morbi et risus</a>. Aliquam nisl. Nulla facilisi. Cras + accumsan vestibulum ante. Vestibulum sed tortor. Praesent + <span class="caps">SMALL CAPS</span> tempus fringilla elit. Ut elit + diam, sagittis in, nonummy in, gravida non, nunc. Ut orci. Class + aptent taciti sociosqu ad litora torquent per conubia nostra, per + inceptos hymenaeos. Nam egestas, orci eu imperdiet malesuada, nisl + purus fringilla odio, quis commodo est orci vitae justo. Aliquam + placerat odio tincidunt nulla. Cras in libero. Aenean rutrum, magna + non tristique posuere, erat odio eleifend nisl, non convallis est + tortor blandit ligula. Nulla id augue. + </p> + <p> + Nullam mattis, odio ut tempus facilisis, metus nisl facilisis metus, + auctor consectetuer felis ligula nec mauris. Vestibulum odio erat, + fermentum at, commodo vitae, ultrices et, urna. Mauris vulputate, mi + pulvinar sagittis condimentum, sem nulla aliquam velit, sed imperdiet + mi purus eu magna. Nulla varius metus ut eros. Aenean aliquet magna + eget orci. Class aptent taciti sociosqu ad litora. + </p> + <p> + Vivamus euismod. Cum sociis natoque penatibus et magnis dis parturient + montes, nascetur ridiculus mus. Suspendisse vel nibh ut turpis dictum + sagittis. Aliquam vel velit a elit auctor sollicitudin. Nam vel dui + vel neque lacinia pretium. Quisque nunc erat, venenatis id, volutpat + ut, scelerisque sed, diam. Mauris ante. Pellentesque habitant morbi + tristique senectus et netus et malesuada fames ac turpis egestas. + Donec mattis. Morbi dignissim sollicitudin libero. Nulla lorem. + </p> + <blockquote> + <p> + Integer cursus ornare mauris. Praesent nisl arcu, imperdiet eu, + ornare id, scelerisque ut, nunc. Praesent sagittis erat sed velit + tempus imperdiet. Ut tristique, ante in interdum hendrerit, erat + enim faucibus felis, quis rutrum mauris lorem quis sem. Vestibulum + ligula nisi, mattis nec, posuere et, blandit eu, ligula. Nam + suscipit placerat odio. Class aptent taciti sociosqu ad litora + torquent per conubia nostra, per inceptos hymenaeos. Pellentesque + tortor libero, venenatis vitae, rhoncus eu, placerat ut, mi. Nulla + nulla. + </p> + </blockquote> + <p> + Maecenas vel metus quis magna pharetra fermentum. + <em>Integer sit amet tortor</em>. Maecenas porttitor, pede sed gravida + auctor, nulla augue aliquet elit, at pretium urna orci ut metus. + Aliquam in dolor. Vestibulum ante ipsum primis in faucibus orci luctus + et ultrices posuere cubilia Curae; Sed aliquam, tellus id ornare + posuere, quam nunc accumsan turpis, at convallis tellus orci et nisl. + Phasellus congue neque a lorem. + </p> + + <hr /> + <div class="span-7 colborder"> + <h6>This is a nested column</h6> + <p> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. + </p> + </div> + <div class="span-7 last"> + <h6>This is another nested column</h6> + <p> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. + </p> + </div> + </div> + <div class="span-7 last"> + <h3>A <span class="alt">Simple</span> Sidebar</h3> + + <p> + Vestibulum ante ipsum primis in faucibus orci luctus et ultrices + posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede + sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem + nisi vel augue. + </p> + <p> + Mauris a lectus. Aliquam erat volutpat. Phasellus ultrices mi a + sapien. Nunc rutrum egestas lorem. Duis ac sem sagittis elit tincidunt + gravida. Mauris a lectus. Aliquam erat volutpat. Phasellus ultrices mi + a sapien. Nunc rutrum egestas lorem. Duis ac sem sagittis elit + tincidunt gravida. + </p> + <p class="quiet"> + Vestibulum ante ipsum primis in faucibus orci luctus et ultrices + posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede + sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem + nisi vel augue. + </p> + + <h5>Incremental leading</h5> + <p class="incr"> + Vestibulum ante ipsum primis in faucibus orci luctus vestibulum ante + ipsum primis in faucibus orci luctus et ultrices posuere cubilia + Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet + vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. + sed aliquet vehicula, lectus tellus. + </p> + <p class="incr"> + Vestibulum ante ipsum primis in faucibus orci luctus et ultrices + posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede + sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem + nisi vel augue. sed aliquet vehicula, lectus tellus pulvinar neque, + non cursus sem nisi vel augue. ipsum primis in faucibus orci luctus et + ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris + venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, + non cursus sem nisi vel augue. sed aliquet vehicula, lectus tellus + pulvinar neque, non cursus sem nisi vel augue. + </p> + </div> + + <hr /> + <h2 class="alt"> + You may pick and choose amongst these and many more features, so be + bold. + </h2> + <hr /> + + <p> + <a href="http://validator.w3.org/check?uri=referer"> + <img + src="valid.png" + alt="Valid HTML 4.01 Strict" + height="31" + width="88" + class="top" + /></a> + </p> + </div> + </body> +</html> |