added demo-landingpage
[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   
13   <!-- wiki javascript -->
14   <script src="js_local/wiki.script.js" type="text/javascript" charset="utf-8"></script>
15   
16   
17   <title>openSUSE.org - Mockup</title>
18   
19 </head>
20
21 <body>
22   
23   <!-- Start: Header -->
24   <div id="header">
25     
26     <div id="header-content" class="container_12">
27       
28       <a id="header-logo" href="#home">
29         <img src="images/header-logo.png" width="46" height="26" alt="Header Logo" />
30       </a>
31       
32       <ul id="global-navigation">
33         <li><a href="#">Downloads</a></li>
34         <li><a href="index_support.html">Support</a></li>
35         <li><a href="#">Community</a></li>
36         <li><a href="#">Development</a></li>
37         <li id="global-favorites"><a href="#">Favorites</a></li>
38       </ul>
39       
40
41       <form id="global-search-form" action="" method="post" accept-charset="utf-8">
42         <input type="text" name="q" value="search" id="search" />
43         <input type="submit" value="Search" class="hidden" accesskey="" />
44       </form>
45
46     </div>
47   </div>
48   <!-- End: Header -->
49
50   <div id="subheader" class="container_16">
51     <div id="breadcrump" class="grid_12 alpha">
52       <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>
53     </div>
54     
55     <div id="login-wrapper" class="grid_4 omega">
56       <a href="#signup-page">Sign up</a> | <a id="login-trigger" href="#login">Login</a>
57       
58       <div id="login-form">
59         <form action="index-extended_submit" method="get" accept-charset="utf-8">
60           
61           <p><label class="inlined" for="username">Username</label><input type="text" class="inline-text" name="username" value="" id="username" /></p>
62           <p><label class="inlined" for="password">Password</label><input type="password" class="inline-text" name="password" value="" id="password" /></p>
63           
64           <p><input type="submit" value="Login" /></p>
65           <p class="slim-footer"><a id="close-login" href="#cancel">Cancel</a></p>
66         </form>
67       </div>
68     </div>
69     
70     <!-- disables for a while -->
71     <div id="local-user-actions" class="grid_4 omega" style="display: none;">
72       
73       <ul id="pt-personal">
74         <!-- Begin Personal links (Login, etc.) xx-->
75         <!-- Example Content based on mediawiki -->
76         <li><a href="#">UserName</a></li>
77         <li><a class="new" href="#">Talk</a></li>
78         <li><a href="#">Preferences</a></li>
79         <li><a href="#">Watchlist</a></li>
80         <li><a href="#">Contributions</a></li>
81         <li><a href="#">Log out</a></li>
82         <!-- End Personal links (Login, etc.) -->
83       </ul>
84     </div>
85     <!-- /disables for a while -->    
86   </div>
87
88   <!-- Start: Main Content Area -->
89   <div id="content" class="container_16 content-wrapper">
90     
91     <div class="column grid_4 alpha">
92
93       <div class=" box box-shadow navigation">
94         <h2 class="box-header">Example Pages</h2>
95         <ul class="navigation">
96           <li><a href="blank.html">Blank-Template</a></li>
97           <li><a href="extended.html">All Box-Types [Fixed]</a></li>
98           <li><a href="extended.fluid.html">All Box-Types [Fluid]</a></li>
99         </ul>
100
101         <h2 class="box-subheader">References</h2>
102
103         <ul class="navigation">
104
105           <li><a href="http://en.opensuse.org/Boosters_Team/Projects/Integrate_all_Infrastructure_under_one_Umbrella/Styleguide">Style Guide</a></li>
106           <li><a href="http://960.gs/">960gs</a></li>
107           <li><a href="http://en.opensuse.org/Boosters_Team/Projects/Integrate_all_Infrastructure_under_one_Umbrella/Concept">Concept</a></li>
108           <li><a href="http://en.opensuse.org/Boosters_Team/Projects/Integrate_all_Infrastructure_under_one_Umbrella/Design">Concept Graphics</a></li>
109           <li><a href="http://gitorious.org/opensuse/themes">GIT Repository</a></li>
110           <!-- <li><a href="#">Item</a></li> -->
111         </ul>
112           
113          <div class="box-footer">
114          </div>
115       </div>
116       
117       
118       <div class=" box box-shadow navigation">
119          <h2 class="box-header">Example Pages</h2>
120          <ul class="navigation">
121            <li><a href="http://en.opensuse.org/Boosters_Team/Projects/Integrate_all_Infrastructure_under_one_Umbrella">Boosters: Umbrells Project</a></li>
122            <li><a href="http://en.opensuse.org/Boosters_Team">Boosters Team</a></li>
123            <li><a href="http://www.opensuse.org">openSUSE.org</a></li>
124          </ul>
125          <div class="box-footer">
126          </div>
127        </div>
128   
129     </div>
130     
131     <div id="some-content" class="box box-shadow grid_12 clearfix">
132       <!-- box header -->
133       <div class="box-header grid_12">
134         
135         <ul>
136           <!-- <li><a class="selected" href="#">Item</a></li>
137           <li><a class="new" href="#">Item</a></li>
138           <li><a href="#">Item</a></li>
139           <li><a href="#">Item</a></li> -->
140         </ul>
141         
142       </div>
143       <!-- End: box header -->
144       
145       <div class="grid_12 alpha omega row_30">
146
147         <h1>Welcome to Bento-Theme</h1>
148         
149         <p>Bento is the new Theme of <a href="http://www.opensuse.org" title="openSUSE.org">opensuse.org</a>.</p>
150
151         <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" />
152         <h2>Examples</h2>
153         <ul>
154           <li><a href="blank.html">Blank-Template</a></li>
155           <li><a href="extended.html">All Box-Types [Fixed]</a></li>
156           <li><a href="extended.fluid.html">All Box-Types [Fluid]</a></li>
157         </ul>
158
159         <h2>References</h2>
160         <ul>
161           <li><a href="http://en.opensuse.org/Boosters_Team/Projects/Integrate_all_Infrastructure_under_one_Umbrella/Styleguide">Style Guide</a></li>
162           <li><a href="http://en.opensuse.org/Boosters_Team/Projects/Integrate_all_Infrastructure_under_one_Umbrella/Concept">Concept</a></li>
163           <li><a href="http://en.opensuse.org/Boosters_Team/Projects/Integrate_all_Infrastructure_under_one_Umbrella/Design">Concept Graphics</a></li>
164           <li><a href="http://gitorious.org/opensuse/themes">GIT Repository</a></li>
165           <!-- <li><a href="#">Item</a></li> -->
166         </ul>
167
168
169       </div>
170     
171       <div class="box-footer grid_12">
172         
173         <ul>
174           <li><a class="selected" href="#">Item</a></li>
175           <li><a class="new" href="#">Item</a></li>
176           <li><a href="#">Item</a></li>
177           <li><a href="#">Item</a></li>
178         </ul>
179       </div>
180     
181     </div>
182
183     <!-- sibling-content: well, next sibling content. -->
184     <div class="container_16 sibling_p4 clearfix">
185
186       <!-- Box Start -->
187       <div class="grid_6 alpha box box-shadow row_10">
188         <h3>Title</h3>
189         <p>Some Content</p>
190       </div>
191       <!-- Box End -->
192       
193       <!-- Box Start -->
194       <div class="grid_6 box box-shadow omega clearfix row_10">
195         <h3>Title</h3>
196         <p>Some Content</p>
197       </div>
198       <!-- Box End -->
199             
200     </div>
201     <!--  End of sibling-content -->
202
203     <!-- sibling-content: well, next sibling content. -->
204     <div class="container_16 sibling_p4">
205       
206       <div class="grid_4 box box-shadow alpha row_15">
207         <div class="box-header"></div>
208         
209         <h3>Title</h3>
210         <p>Some Content</p>
211                 
212         <div class="box-footer">
213           
214         </div>
215       </div>
216
217       <div class="grid_4 box box-shadow row_15">
218         <h3>Title</h3>
219         <p>Some Content</p>
220       </div>
221
222       <div class="grid_4 box box-shadow omega clearfix row_15">
223         <h3>Title</h3>
224         <p>Some Content</p>
225       </div>
226       
227     </div>
228     <!--  End of sibling-content -->
229     
230     <!-- Note: this clears floating, set in previous elements -->
231     <div class="clear"></div>
232
233   </div>
234   <!-- End: Main Content Area -->
235
236   <!-- Start: Footer -->
237   <div id="footer" class="container_16">
238     <div id="footer-content" class="grid_16 column_4 clear-block">
239       
240       <!-- NOTE: Here I currently use the CSS3 column feature. Which does not work in older Browsers. -->
241       <!-- In practice the Footer-Content look different -->
242       <h3>Title</h3>
243       <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>
244       <h3>Title</h3>
245       <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>
246       <h3>Title</h3>
247       <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>
248       <h3>Title</h3>
249       <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>
250     </div>
251     <div id="footer-legal" class="border-top grid_16">
252       <p>
253         &copy; 2010 Novell, Inc. All rights reserved. Novell is a registered trademark and
254         openSUSE and SUSE are trademarks of Novell, Inc. in the United States and other countries.
255       </p>
256     </div>
257   </div>
258   <!-- End: Footer -->
259   
260   
261 </body>
262 </html>