SaS/web_dev/sas_web/database.html

<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>