summaryrefslogtreecommitdiffstats
path: root/build/pgo/blueprint/sample.html
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--build/pgo/blueprint/sample.html227
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>