consolidate headers in html examples
[opensuse:themes.git] / bento / index.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3
4 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5 <head>
6   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
7   
8   <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="All" charset="utf-8" />
9   
10   <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
11   <script src="js/script.js" type="text/javascript" charset="utf-8"></script>
12   <script src="js/global-navigation.js" type="text/javascript" charset="utf-8"></script>
13   
14   <!-- wiki javascript -->
15   <script src="js_local/wiki.script.js" type="text/javascript" charset="utf-8"></script>
16   
17   
18   <title>openSUSE.org - Mockup</title>
19   
20 </head>
21
22 <body>
23   
24   <!-- Start: Header -->
25   <div id="header">
26     <div id="header-content" class="container_12">
27       <a id="header-logo" href="#home"><img src="images/header-logo.png" width="46" height="26" alt="Header Logo" /></a>
28       <ul id="global-navigation">
29         <li><a href="http://opensuse.org/sitemap/">Downloads</a></li>
30         <li><a href="http://opensuse.org/sitemap/">Support</a></li>
31         <li><a href="http://opensuse.org/sitemap/">Community</a></li>
32         <li><a href="http://opensuse.org/sitemap/">Development</a></li>
33       </ul>
34       <form id="global-search-form" action="" method="post" accept-charset="utf-8">
35         <input type="text" name="q" value="search" id="search" />
36         <input type="submit" value="Search" class="hidden" accesskey="" />
37       </form>
38     </div>
39   </div>
40   <!-- End: Header -->
41
42   <div id="subheader" class="container_16">
43     <div id="breadcrump" class="grid_12 alpha">
44       <a href="#" title=""><img src="images/home_grey.png" width="16" height="16" alt="Home" /> Home</a> > <a href="#" title="">Breadcrump</a> > <a href="#" title="">Breadcrump</a> > <a href="#" title="">Breadcrump</a>
45     </div>
46     
47     <div id="login-wrapper" class="grid_4 omega">
48       <a href="#signup-page">Sign up</a> | <a id="login-trigger" href="#login">Login</a>
49       
50       <div id="login-form">
51         <form action="index-extended_submit" method="get" accept-charset="utf-8">
52           
53           <p><label class="inlined" for="username">Username</label><input type="text" class="inline-text" name="username" value="" id="username" /></p>
54           <p><label class="inlined" for="password">Password</label><input type="password" class="inline-text" name="password" value="" id="password" /></p>
55           
56           <p><input type="submit" value="Login" /></p>
57           <p class="slim-footer"><a id="close-login" href="#cancel">Cancel</a></p>
58         </form>
59       </div>
60     </div>
61     
62     <!-- disables for a while -->
63     <div id="local-user-actions" class="grid_4 omega" style="display: none;">
64       
65       <ul id="pt-personal">
66         <!-- Begin Personal links (Login, etc.) xx-->
67         <!-- Example Content based on mediawiki -->
68         <li><a href="#">UserName</a></li>
69         <li><a class="new" href="#">Talk</a></li>
70         <li><a href="#">Preferences</a></li>
71         <li><a href="#">Watchlist</a></li>
72         <li><a href="#">Contributions</a></li>
73         <li><a href="#">Log out</a></li>
74         <!-- End Personal links (Login, etc.) -->
75       </ul>
76     </div>
77     <!-- /disables for a while -->    
78   </div>
79
80   <!-- Start: Main Content Area -->
81   <div id="content" class="container_16 content-wrapper">
82     
83     <div class="column grid_4 alpha">
84
85       <div class=" box box-shadow navigation">
86         <h2 class="box-header">Example Pages</h2>
87         <ul class="navigation">
88           <li><a href="blank.html">Blank-Template</a></li>
89           <li><a href="extended.html">All Box-Types [Fixed]</a></li>
90           <li><a href="extended.fluid.html">All Box-Types [Fluid]</a></li>
91         </ul>
92
93         <h2 class="box-subheader">References</h2>
94
95         <ul class="navigation">
96
97           <li><a href="http://en.opensuse.org/Boosters_Team/Projects/Integrate_all_Infrastructure_under_one_Umbrella/Styleguide">Style Guide</a></li>
98           <li><a href="http://960.gs/">960gs</a></li>
99           <li><a href="http://en.opensuse.org/Boosters_Team/Projects/Integrate_all_Infrastructure_under_one_Umbrella/Concept">Concept</a></li>
100           <li><a href="http://en.opensuse.org/Boosters_Team/Projects/Integrate_all_Infrastructure_under_one_Umbrella/Design">Concept Graphics</a></li>
101           <li><a href="http://gitorious.org/opensuse/themes">GIT Repository</a></li>
102           <!-- <li><a href="#">Item</a></li> -->
103         </ul>
104           
105          <div class="box-footer">
106          </div>
107       </div>
108       
109       <div class=" box box-shadow navigation">
110          <h2 class="box-header">Other Resources</h2>
111          <ul class="navigation">
112            <li><a href="http://en.opensuse.org/Boosters_Team/Projects/Integrate_all_Infrastructure_under_one_Umbrella">Boosters: Umbrells Project</a></li>
113            <li><a href="http://en.opensuse.org/Boosters_Team">Boosters Team</a></li>
114            <li><a href="http://www.opensuse.org">openSUSE.org</a></li>
115          </ul>
116          <div class="box-footer">
117          </div>
118        </div>
119   
120     </div>
121     
122     <div class="box box-shadow grid_12 clearfix">
123       <!-- box header -->
124       <div class="box-header grid_12">
125         
126       </div>
127       <!-- End: box header -->
128       
129       <div class="grid_12 alpha omega row_25">
130
131         <h1>Welcome to Bento-Theme</h1>
132         
133         <p>Bento is the new Theme of <a href="http://www.opensuse.org" title="openSUSE.org">opensuse.org</a>.</p>
134
135         <div class="grid_6 alpha">
136         <img src="http://en.opensuse.org/images/thumb/8/80/OpenSUSE.org-Mockup.png/300px-OpenSUSE.org-Mockup.png" style="border: 1px solid #ccc; margin: 15px;" class="alignleft box-shadow" />
137         </div>
138         <div class="grid_6 omega">
139   
140           <h2>Examples</h2>
141           <ul>
142             <li><a href="blank.html">Blank-Template</a></li>
143             <li><a href="extended.html">All Box-Types [Fixed]</a></li>
144             <li><a href="extended.fluid.html">All Box-Types [Fluid]</a></li>
145           </ul>
146
147           <h2>References</h2>
148           <ul>
149             <li><a href="http://en.opensuse.org/Boosters_Team/Projects/Integrate_all_Infrastructure_under_one_Umbrella/Styleguide">Style Guide</a></li>
150             <li><a href="http://en.opensuse.org/Boosters_Team/Projects/Integrate_all_Infrastructure_under_one_Umbrella/Concept">Concept</a></li>
151             <li><a href="http://en.opensuse.org/Boosters_Team/Projects/Integrate_all_Infrastructure_under_one_Umbrella/Design">Concept Graphics</a></li>
152             <li><a href="http://gitorious.org/opensuse/themes">GIT Repository</a></li>
153             <!-- <li><a href="#">Item</a></li> -->
154           </ul>
155
156         </div>
157
158       </div>
159     
160       <div class="box-footer grid_12">
161
162       </div>
163     
164     </div>
165     
166     <!-- Note: this clears floating, set in previous elements -->
167     <div class="clear"></div>
168
169   </div>
170   <!-- End: Main Content Area -->
171
172   <!-- Start: Footer -->
173   <div id="footer" class="container_16">
174     <div id="footer-content" class="grid_16 column_4 clear-block">
175       
176       <!-- NOTE: Here I currently use the CSS3 column feature. Which does not work in older Browsers. -->
177       <!-- In practice the Footer-Content look different -->
178       <h3>Title</h3>
179       <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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
180       <h3>Title</h3>
181       <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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
182       <h3>Title</h3>
183       <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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
184       <h3>Title</h3>
185       <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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
186     </div>
187     <div id="footer-legal" class="border-top grid_16">
188       <p>
189         &copy; 2010 Novell, Inc. All rights reserved. Novell is a registered trademark and
190         openSUSE and SUSE are trademarks of Novell, Inc. in the United States and other countries.
191       </p>
192     </div>
193   </div>
194   <!-- End: Footer -->
195   
196   
197 </body>
198 </html>