Now using bootstrap on the animal page.
authorPhilipp Spitzer <philipp@spitzer.priv.at>
Tue, 28 Jul 2015 19:05:43 +0000 (21:05 +0200)
committerPhilipp Spitzer <philipp@spitzer.priv.at>
Tue, 28 Jul 2015 19:05:43 +0000 (21:05 +0200)
animals/static/animals/animals.css [new file with mode: 0644]
animals/static/favicon.ico [new file with mode: 0644]
animals/templates/animals/detail.html

diff --git a/animals/static/animals/animals.css b/animals/static/animals/animals.css
new file mode 100644 (file)
index 0000000..139597f
--- /dev/null
@@ -0,0 +1,2 @@
+
+
diff --git a/animals/static/favicon.ico b/animals/static/favicon.ico
new file mode 100644 (file)
index 0000000..fcbafb8
Binary files /dev/null and b/animals/static/favicon.ico differ
index 04e24ec26f373da2ea64f9a57897c7d0485348a2..36ac41ce0354880be534cd414991b8574ee5c73d 100644 (file)
@@ -2,14 +2,81 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:py="http://genshi.edgewall.org/"
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:py="http://genshi.edgewall.org/"
-       xmlns:xi="http://www.w3.org/2001/XInclude">
-<head>
-<title>Animal</title>
-</head>
-<body>
-<h1>${animal.name_german}</h1>
-<ul>
-    <li>Size: ${animal.size_cm}</li>
-</ul>
-</body>
+       xmlns:xi="http://www.w3.org/2001/XInclude"
+       lang="de">
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
+    <meta name="description" content="" />
+    <meta name="author" content="" />
+    <link rel="icon" href="${static('favicon.ico')}" />
+
+    <title>${animal.name_german}</title>
+
+    <!-- Bootstrap core CSS -->
+    <link href="${static('bootstrap/css/bootstrap.min.css')}" rel="stylesheet"/>
+
+    <!-- Custom styles for this template -->
+    <link href="${static('animals/animals.css')}" rel="stylesheet"/>
+
+  </head>
+
+  <body>
+
+    <div class="container">
+      <div class="header clearfix">
+        <nav>
+          <ul class="nav nav-pills pull-right">
+            <li role="presentation" class="active"><a href="#">Alpenzoo</a></li>
+            <li role="presentation"><a href="#">Tiere</a></li>
+            <li role="presentation"><a href="#">Spiele</a></li>
+          </ul>
+        </nav>
+        <h3 class="text-muted">Alpenzoo</h3>
+      </div>
+
+      <div class="jumbotron">
+        <h1>${animal.name_german}</h1>
+        <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>
+        <p>
+                       <a class="btn btn-lg btn-success" href="#" role="button">Vorlesen</a>
+                       <a class="btn btn-lg btn-success" href="#" role="button">Tiergeräusch</a>
+               </p>
+      </div>
+
+      <div class="row marketing">
+        <div class="col-md-6">
+          <h4>${animal.name_german} Eckdaten</h4>
+                       <ul>
+              <li>Größe: ${animal.size_cm} cm</li>
+                       </ul>
+
+          <h4>Beschreibung</h4>
+          <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
+
+          <h4>Geschichte des Geheges</h4>
+          <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+        </div>
+
+        <div class="col-md-6">
+          <h4>Kochrezept</h4>
+          <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
+
+          <h4>Gefährlichkeit für mich</h4>
+          <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
+
+          <h4>Gefährdung durch mich</h4>
+          <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+        </div>
+      </div>
+
+      <footer class="footer">
+        <p>&copy; Sabine, Georg, Gregor, Philipp 2015</p>
+      </footer>
+
+    </div> <!-- /container -->
+
+  </body>
 </html>
 </html>