Create database.html

web_dev/sas_web/database.html

@@ -0,0 +1,91 @@
+<div id="datenbank_html">
+            <style>
+                #datenbank_html {
+                    margin-left: 2%;
+                    width: 96%;
+                }
+                tabledatabase {
+                    width: 100%;
+
+                }
+                .trdatabase {
+                    padding-top: 50px;
+                    padding-bottom: 50px;
+                }
+                .tddatabase {
+                    padding-left: 10px;
+                    padding-right: 10px;
+                    padding-bottom: 10px;
+                    padding-top: 10px;
+                }
+                thumbnail {
+                    display: inline-block;
+                    border: 1px solid black;
+                    width: 20%;
+                }
+
+                img {
+                    max-width: 100%;
+                    height: auto;
+                }
+
+                div.polaroid {
+                    border: 2px solid #e7e7e7;
+                    width: 80%;
+                    background-color: white;
+                    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+                    margin-bottom: 25px;
+                }
+
+                div.container {
+                    text-align: center;
+                    padding: 10px 20px;
+                    font-family: Helvetica, serif;
+                    font-size: 12px;
+                }
+                #description {
+                    text-align: center;
+                }
+            </style>
+                <table class="tabledatabase">
+                <tr class="trdatabase">
+                    <td class="tddatabase", colspan=4>
+                        <p id="description">
+                        Dies ist eine Datenbank mit allen Dokumenten, die die Goethopische Agentur für politische Bildung herausgebracht hat. Jedes der Elemente ist auf das dazugehörige PDF-Dokument verlinkt.
+                        </p>
+                    </td>
+                </tr>
+                <tr class="trdatabase">
+                    <td class="tddatabase", align="left">
+                        <div class="polaroid">
+                            <a class="thumbnail" href="http://www.none.com">
+                                <img src="verfassung.jpg" alt="Verfassung">
+                            </a>
+                            <div class="container">
+                                <p>Die Verfassung von Goethopia</p>
+                            </div>
+                        </div> 
+                    </td>
+                    <td class="tddatabase" align="center">
+                        <div class="polaroid">
+                            <a class="thumbnail" href="http://www.none.com">
+                                <img src="geschaeftsordnung.jpg" alt="Geschaeftsordnung">
+                            </a>
+                            <div class="container">
+                                <p>Die Geschäftsordnung des Parlaments</p>
+                            </div>
+                        </div>  
+                    </td>
+                    <td class="tddatabase" align="right">
+                        <div class="polaroid">
+                            <a class="thumbnail" href="http://www.none.com">
+                                <img src="faq_1.jpg" alt="Informationsblatt 1">
+                            </a>
+                            <div class="container">
+                                <p>Informationsblatt der APB, Ausgabe 1</p>
+                            </div>
+                        </div>  
+                    </td>
+                </tr>
+            </table>
+            </div>