Now using bootstrap on the animal page.
[toast/alpenzoo.git] / animals / templates / animals / detail.html
1 <?xml version="1.0" encoding="UTF-8"?>
2 <!DOCTYPE html>
3 <html xmlns="http://www.w3.org/1999/xhtml"
4         xmlns:py="http://genshi.edgewall.org/"
5         xmlns:xi="http://www.w3.org/2001/XInclude"
6         lang="de">
7   <head>
8     <meta charset="utf-8"/>
9     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
10     <meta name="viewport" content="width=device-width, initial-scale=1"/>
11     <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
12     <meta name="description" content="" />
13     <meta name="author" content="" />
14     <link rel="icon" href="${static('favicon.ico')}" />
15
16     <title>${animal.name_german}</title>
17
18     <!-- Bootstrap core CSS -->
19     <link href="${static('bootstrap/css/bootstrap.min.css')}" rel="stylesheet"/>
20
21     <!-- Custom styles for this template -->
22     <link href="${static('animals/animals.css')}" rel="stylesheet"/>
23
24   </head>
25
26   <body>
27
28     <div class="container">
29       <div class="header clearfix">
30         <nav>
31           <ul class="nav nav-pills pull-right">
32             <li role="presentation" class="active"><a href="#">Alpenzoo</a></li>
33             <li role="presentation"><a href="#">Tiere</a></li>
34             <li role="presentation"><a href="#">Spiele</a></li>
35           </ul>
36         </nav>
37         <h3 class="text-muted">Alpenzoo</h3>
38       </div>
39
40       <div class="jumbotron">
41         <h1>${animal.name_german}</h1>
42         <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
43         <p>
44                         <a class="btn btn-lg btn-success" href="#" role="button">Vorlesen</a>
45                         <a class="btn btn-lg btn-success" href="#" role="button">Tiergeräusch</a>
46                 </p>
47       </div>
48
49       <div class="row marketing">
50         <div class="col-md-6">
51           <h4>${animal.name_german} Eckdaten</h4>
52                         <ul>
53               <li>Größe: ${animal.size_cm} cm</li>
54                         </ul>
55
56           <h4>Beschreibung</h4>
57           <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
58
59           <h4>Geschichte des Geheges</h4>
60           <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
61         </div>
62
63         <div class="col-md-6">
64           <h4>Kochrezept</h4>
65           <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
66
67           <h4>Gefährlichkeit für mich</h4>
68           <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
69
70           <h4>Gefährdung durch mich</h4>
71           <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
72         </div>
73       </div>
74
75       <footer class="footer">
76         <p>&copy; Sabine, Georg, Gregor, Philipp 2015</p>
77       </footer>
78
79     </div> <!-- /container -->
80
81   </body>
82 </html>