consolidate headers in html examples
[opensuse:themes.git] / bento / blank.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 id="some_other_content" class=" box box-shadow alpha clear-both navigation">
86         <h2 class="box-header">Navigation</h2>
87           <ul class="navigation">
88             <li><a href="#">Item</a></li>
89             <li><a href="#">Item</a></li>
90             <li><a href="#">Item</a></li>
91             <li><a href="#">Item</a></li>
92             <li><a href="#">Item</a></li>
93             <li><a href="#">Item</a></li>
94           </ul>
95       </div>
96
97       <div id="some_other_content" class=" box box-shadow navigation">
98         <h2 class="box-header">Navigation</h2>
99         <ul class="navigation">
100           <li><a href="#">Item</a></li>
101           <li><a href="#">Item</a></li>
102           <li><a href="#">Item</a></li>
103           <li><a href="#">Item</a></li>
104           <li><a href="#">Item</a></li>
105           <li><a href="#">Item</a></li>
106           <li><a href="#">Item</a></li>
107           <li><a href="#">Item</a></li>
108           <li><a href="#">Item</a></li>
109         </ul>
110
111         <h2 class="box-subheader">Navigation</h2>
112
113         <ul class="navigation">
114           <li><a href="#">Item</a></li>
115           <li><a href="#">Item</a></li>
116           <li><a href="#">Item</a></li>
117           <li><a href="#">Item</a></li>
118           <li><a href="#">Item</a></li>
119           <li><a href="#">Item</a></li>
120         </ul>
121           
122           <div class="box-footer">
123           </div>
124       </div>
125   
126     </div>
127     
128     <div id="some-content" class="box box-shadow grid_12 clearfix">
129       <!-- box header -->
130       <div class="box-header grid_12">
131         
132         <ul>
133           <li><a class="selected" href="#">Item</a></li>
134           <li><a class="new" href="#">Item</a></li>
135           <li><a href="#">Item</a></li>
136           <li><a href="#">Item</a></li>
137         </ul>
138         
139       </div>
140       <!-- End: box header -->
141       
142       <div class="grid_12 alpha omega row_30">
143
144         <p>Main Contet</p>
145
146       </div>
147     
148       <div class="box-footer grid_12">
149         
150         <ul>
151           <li><a class="selected" href="#">Item</a></li>
152           <li><a class="new" href="#">Item</a></li>
153           <li><a href="#">Item</a></li>
154           <li><a href="#">Item</a></li>
155         </ul>
156       </div>
157     
158     </div>
159
160     <!-- sibling-content: well, next sibling content. -->
161     <div class="container_16 sibling_p4 clearfix">
162
163       <!-- Box Start -->
164       <div id="some_other_content" class="grid_6 alpha box box-shadow row_10">
165         <h3>Title</h3>
166         <p>Some Content</p>
167       </div>
168       <!-- Box End -->
169       
170       <!-- Box Start -->
171       <div id="some_other_content" class="grid_6 box box-shadow omega clearfix row_10">
172         <h3>Title</h3>
173         <p>Some Content</p>
174       </div>
175       <!-- Box End -->
176             
177     </div>
178     <!--  End of sibling-content -->
179
180     <!-- sibling-content: well, next sibling content. -->
181     <div class="container_16 sibling_p4">
182       
183       <div id="some_other_content" class="grid_4 box box-shadow alpha row_15">
184         <div class="box-header"></div>
185         
186         <h3>Title</h3>
187         <p>Some Content</p>
188                 
189         <div class="box-footer">
190           
191         </div>
192       </div>
193
194       <div id="some_other_content" class="grid_4 box box-shadow row_15">
195         <h3>Title</h3>
196         <p>Some Content</p>
197       </div>
198
199       <div id="some_other_content" class="grid_4 box box-shadow omega clearfix row_15">
200         <h3>Title</h3>
201         <p>Some Content</p>
202       </div>
203       
204     </div>
205     <!--  End of sibling-content -->
206     
207     <!-- Note: this clears floating, set in previous elements -->
208     <div class="clear"></div>
209
210   </div>
211   <!-- End: Main Content Area -->
212
213   <!-- Start: Footer -->
214   <div id="footer" class="container_16">
215     <div id="footer-content" class="grid_16 column_4 clear-block">
216       
217       <!-- NOTE: Here I currently use the CSS3 column feature. Which does not work in older Browsers. -->
218       <!-- In practice the Footer-Content look different -->
219       <h3>Title</h3>
220       <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>
221       <h3>Title</h3>
222       <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>
223       <h3>Title</h3>
224       <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>
225       <h3>Title</h3>
226       <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>
227     </div>
228     <div id="footer-legal" class="border-top grid_16">
229       <p>
230         &copy; 2010 Novell, Inc. All rights reserved. Novell is a registered trademark and
231         openSUSE and SUSE are trademarks of Novell, Inc. in the United States and other countries.
232       </p>
233     </div>
234   </div>
235   <!-- End: Footer -->
236   
237   
238 </body>
239 </html>