summaryrefslogtreecommitdiffstats
path: root/webroot/code/demo.html
diff options
context:
space:
mode:
authorMichael Francis <edude03@gmail.com>2011-05-28 13:28:16 -0400
committerMichael Francis <edude03@gmail.com>2011-05-28 13:28:16 -0400
commit2389d66da849798f8d4ec5f10e3b07c11da49185 (patch)
treee22556d12982395b469a23420c662662e3e064cc /webroot/code/demo.html
downloadotakuhub-2389d66da849798f8d4ec5f10e3b07c11da49185.tar.xz
Initial Commit
Diffstat (limited to 'webroot/code/demo.html')
-rwxr-xr-xwebroot/code/demo.html592
1 files changed, 592 insertions, 0 deletions
diff --git a/webroot/code/demo.html b/webroot/code/demo.html
new file mode 100755
index 0000000..5313039
--- /dev/null
+++ b/webroot/code/demo.html
@@ -0,0 +1,592 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+<title>960 Grid System &mdash; Demo</title>
+<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
+<link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
+<link rel="stylesheet" type="text/css" media="all" href="css/960.css" />
+<style type="text/css" media="all">
+
+body
+{
+ background: #123;
+ border-top: 5px solid #000;
+ color: #333;
+ font-size: 11px;
+ padding: 20px 0 40px;
+}
+
+a
+{
+ color: #fff;
+ text-decoration: none;
+}
+
+a:hover
+{
+ text-decoration: underline;
+}
+
+h1
+{
+ font-family: Georgia, serif;
+ font-weight: normal;
+ text-align: center;
+}
+
+h2
+{
+ padding: 20px 0 0;
+ text-align: center;
+}
+
+p
+{
+ border: 1px solid #666;
+ overflow: hidden;
+ padding: 10px 0;
+ text-align: center;
+}
+
+.container_12
+{
+ background: #fff url(img/12_col.gif) repeat-y;
+ margin-bottom: 20px;
+}
+
+.container_16
+{
+ background: #fff url(img/16_col.gif) repeat-y;
+}
+
+</style>
+</head>
+<body>
+<h1>
+ <a href="http://960.gs/">960 Grid System</a>
+</h1>
+<div class="container_12">
+ <h2>
+ 12 Column Grid
+ </h2>
+ <div class="grid_12">
+ <p>
+ 940px
+ </p>
+ </div>
+ <!-- end .grid_12 -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_1">
+ <p>
+ 60px
+ </p>
+ </div>
+ <!-- end .grid_1 -->
+ <div class="grid_11">
+ <p>
+ 860px
+ </p>
+ </div>
+ <!-- end .grid_11 -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_2">
+ <p>
+ 140px
+ </p>
+ </div>
+ <!-- end .grid_2 -->
+ <div class="grid_10">
+ <p>
+ 780px
+ </p>
+ </div>
+ <!-- end .grid_10 -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_3">
+ <p>
+ 220px
+ </p>
+ </div>
+ <!-- end .grid_3 -->
+ <div class="grid_9">
+ <p>
+ 700px
+ </p>
+ </div>
+ <!-- end .grid_9 -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_4">
+ <p>
+ 300px
+ </p>
+ </div>
+ <!-- end .grid_4 -->
+ <div class="grid_8">
+ <p>
+ 620px
+ </p>
+ </div>
+ <!-- end .grid_8 -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_5">
+ <p>
+ 380px
+ </p>
+ </div>
+ <!-- end .grid_5 -->
+ <div class="grid_7">
+ <p>
+ 540px
+ </p>
+ </div>
+ <!-- end .grid_7 -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_6">
+ <p>
+ 460px
+ </p>
+ </div>
+ <!-- end .grid_6 -->
+ <div class="grid_6">
+ <p>
+ 460px
+ </p>
+ </div>
+ <!-- end .grid_6 -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_1 suffix_11">
+ <p>
+ 60px
+ </p>
+ </div>
+ <!-- end .grid_1.suffix_11 -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_1 prefix_1 suffix_10">
+ <p>
+ 60px
+ </p>
+ </div>
+ <!-- end .grid_1.prefix_1.suffix_10 -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_1 prefix_2 suffix_9">
+ <p>
+ 60px
+ </p>
+ </div>
+ <!-- end .grid_1.prefix_2.suffix_9 -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_1 prefix_3 suffix_8">
+ <p>
+ 60px
+ </p>
+ </div>
+ <!-- end .grid_1.prefix_3.suffix_8 -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_1 prefix_4 suffix_7">
+ <p>
+ 60px
+ </p>
+ </div>
+ <!-- end .grid_1.prefix_4.suffix_7 -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_1 prefix_5 suffix_6">
+ <p>
+ 60px
+ </p>
+ </div>
+ <!-- end .grid_1.prefix_5.suffix_6 -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_1 prefix_6 suffix_5">
+ <p>
+ 60px
+ </p>
+ </div>
+ <!-- end .grid_1.prefix_6.suffix_5 -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_1 prefix_7 suffix_4">
+ <p>
+ 60px
+ </p>
+ </div>
+ <!-- end .grid_1.prefix_7.suffix_4 -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_1 prefix_8 suffix_3">
+ <p>
+ 60px
+ </p>
+ </div>
+ <!-- end .grid_1.prefix_8.suffix_3 -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_1 prefix_9 suffix_2">
+ <p>
+ 60px
+ </p>
+ </div>
+ <!-- end .grid_1.prefix_9.suffix_2 -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_1 prefix_10 suffix_1">
+ <p>
+ 60px
+ </p>
+ </div>
+ <!-- end .grid_1.prefix_10.suffix_1 -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_1 prefix_11">
+ <p>
+ 60px
+ </p>
+ </div>
+ <!-- end .grid_1.prefix_11 -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_6">
+ <div class="grid_1 alpha">
+ <p>
+ 60px
+ </p>
+ </div>
+ <!-- end .grid_1.alpha -->
+ <div class="grid_5 omega">
+ <p>
+ 380px
+ </p>
+ </div>
+ <!-- end .grid_5.omega -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_3 alpha">
+ <p>
+ 220px
+ </p>
+ </div>
+ <!-- end .grid_3.alpha -->
+ <div class="grid_3 omega">
+ <p>
+ 220px
+ </p>
+ </div>
+ <!-- end .grid_3.omega -->
+ <div class="clear">&nbsp;</div>
+ </div>
+ <!-- end .grid_6 -->
+ <div class="grid_6">
+ <div class="grid_3 alpha">
+ <p>
+ 220px
+ </p>
+ </div>
+ <!-- end .grid_3.alpha -->
+ <div class="grid_3 omega">
+ <p>
+ 220px
+ </p>
+ </div>
+ <!-- end .grid_3.omega -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_1 alpha">
+ <p>
+ 60px
+ </p>
+ </div>
+ <!-- end .grid_1.alpha -->
+ <div class="grid_5 omega">
+ <p>
+ 380px
+ </p>
+ </div>
+ <!-- end .grid_5.omega -->
+ <div class="clear">&nbsp;</div>
+ </div>
+ <!-- end .grid_6 -->
+ <div class="clear">&nbsp;</div>
+</div>
+<!-- end .container_12 -->
+<div class="container_16">
+ <h2>
+ 16 Column Grid
+ </h2>
+ <div class="grid_16">
+ <p>
+ 940px
+ </p>
+ </div>
+ <!-- end .grid_16 -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_1">
+ <p>
+ 40px
+ </p>
+ </div>
+ <!-- end .grid_1 -->
+ <div class="grid_15">
+ <p>
+ 880px
+ </p>
+ </div>
+ <!-- end .grid_15 -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_2">
+ <p>
+ 100px
+ </p>
+ </div>
+ <!-- end .grid_2 -->
+ <div class="grid_14">
+ <p>
+ 820px
+ </p>
+ </div>
+ <!-- end .grid_14 -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_3">
+ <p>
+ 160px
+ </p>
+ </div>
+ <!-- end .grid_3 -->
+ <div class="grid_13">
+ <p>
+ 760px
+ </p>
+ </div>
+ <!-- end .grid_13 -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_4">
+ <p>
+ 220px
+ </p>
+ </div>
+ <!-- end .grid_4 -->
+ <div class="grid_12">
+ <p>
+ 700px
+ </p>
+ </div>
+ <!-- end .grid_12 -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_5">
+ <p>
+ 280px
+ </p>
+ </div>
+ <!-- end .grid_5 -->
+ <div class="grid_11">
+ <p>
+ 640px
+ </p>
+ </div>
+ <!-- end .grid_11 -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_6">
+ <p>
+ 340px
+ </p>
+ </div>
+ <!-- end .grid_6 -->
+ <div class="grid_10">
+ <p>
+ 580px
+ </p>
+ </div>
+ <!-- end .grid_10 -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_7">
+ <p>
+ 400px
+ </p>
+ </div>
+ <!-- end .grid_7 -->
+ <div class="grid_9">
+ <p>
+ 520px
+ </p>
+ </div>
+ <!-- end .grid_9 -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_8">
+ <p>
+ 460px
+ </p>
+ </div>
+ <!-- end .grid_8 -->
+ <div class="grid_8">
+ <p>
+ 460px
+ </p>
+ </div>
+ <!-- end .grid_8 -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_1 suffix_15">
+ <p>
+ 40px
+ </p>
+ </div>
+ <!-- end .grid_1.suffix_15 -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_1 prefix_1 suffix_14">
+ <p>
+ 40px
+ </p>
+ </div>
+ <!-- end .grid_1.prefix_1.suffix_14 -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_1 prefix_2 suffix_13">
+ <p>
+ 40px
+ </p>
+ </div>
+ <!-- end .grid_1.prefix_2.suffix_13 -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_1 prefix_3 suffix_12">
+ <p>
+ 40px
+ </p>
+ </div>
+ <!-- end .grid_1.prefix_3.suffix_12 -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_1 prefix_4 suffix_11">
+ <p>
+ 40px
+ </p>
+ </div>
+ <!-- end .grid_1.prefix_4.suffix_11 -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_1 prefix_5 suffix_10">
+ <p>
+ 40px
+ </p>
+ </div>
+ <!-- end .grid_1.prefix_5.suffix_10 -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_1 prefix_6 suffix_9">
+ <p>
+ 40px
+ </p>
+ </div>
+ <!-- end .grid_1.prefix_6.suffix_9 -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_1 prefix_7 suffix_8">
+ <p>
+ 40px
+ </p>
+ </div>
+ <!-- end .grid_1.prefix_7.suffix_8 -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_1 prefix_8 suffix_7">
+ <p>
+ 40px
+ </p>
+ </div>
+ <!-- end .grid_1.prefix_8.suffix_7 -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_1 prefix_9 suffix_6">
+ <p>
+ 40px
+ </p>
+ </div>
+ <!-- end .grid_1.prefix_9.suffix_6 -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_1 prefix_10 suffix_5">
+ <p>
+ 40px
+ </p>
+ </div>
+ <!-- end .grid_1.prefix_10.suffix_5 -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_1 prefix_11 suffix_4">
+ <p>
+ 40px
+ </p>
+ </div>
+ <!-- end .grid_1.prefix_11.suffix_4 -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_1 prefix_12 suffix_3">
+ <p>
+ 40px
+ </p>
+ </div>
+ <!-- end .grid_1.prefix_12.suffix_3 -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_1 prefix_13 suffix_2">
+ <p>
+ 40px
+ </p>
+ </div>
+ <!-- end .grid_1.prefix_13.suffix_2 -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_1 prefix_14 suffix_1">
+ <p>
+ 40px
+ </p>
+ </div>
+ <!-- end .grid_1.prefix_14.suffix_1 -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_1 prefix_15">
+ <p>
+ 40px
+ </p>
+ </div>
+ <!-- end .grid_1.prefix_15 -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_8">
+ <div class="grid_1 alpha">
+ <p>
+ 40px
+ </p>
+ </div>
+ <!-- end .grid_1.alpha -->
+ <div class="grid_7 omega">
+ <p>
+ 400px
+ </p>
+ </div>
+ <!-- end .grid_7.omega -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_4 alpha">
+ <p>
+ 220px
+ </p>
+ </div>
+ <!-- end .grid_4.alpha -->
+ <div class="grid_4 omega">
+ <p>
+ 220px
+ </p>
+ </div>
+ <!-- end .grid_4.omega -->
+ <div class="clear">&nbsp;</div>
+ </div>
+ <!-- end .grid_8 -->
+ <div class="grid_8">
+ <div class="grid_4 alpha">
+ <p>
+ 220px
+ </p>
+ </div>
+ <!-- end .grid_4.alpha -->
+ <div class="grid_4 omega">
+ <p>
+ 220px
+ </p>
+ </div>
+ <!-- end .grid_4.omega -->
+ <div class="clear">&nbsp;</div>
+ <div class="grid_1 alpha">
+ <p>
+ 40px
+ </p>
+ </div>
+ <!-- end .grid_1.alpha -->
+ <div class="grid_7 omega">
+ <p>
+ 400px
+ </p>
+ </div>
+ <!-- end .grid_7.omega -->
+ <div class="clear">&nbsp;</div>
+ </div>
+ <!-- end .grid_8 -->
+ <div class="clear">&nbsp;</div>
+</div>
+<!-- end .container_16 -->
+</body>
+</html> \ No newline at end of file
generated by cgit v1.2.3 (git 2.46.0) at 2025-06-29 06:12:44 +0000