Pinnwände (NICHT als Datenbank-Vorlage sondern als HTML-Vorlage nutzbar!)

Bildquelle: Pixabay

Quellcode:

<div class="row">
    <div class="card shadow" style="width: 220px; margin-left:20px; margin-bottom: 20px;">
        <div class="card-img-top"><img src="https://mo1300.bildung.hessen.de/pluginfile.php/7512/mod_label/intro/Altai%20Kutscherla-Fluss.jpg" alt="" role="presentation" class="img-responsive atto_image_button_text-bottom" width="600" height="397">
            <div>
                <div class="card-body">
                    <h4 class="card-title">Fluss</h4>
                    <div class="card-text" style="max-height: 150px; overflow:hidden;">Landschaftsbild</div>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow" style="width: 220px; margin-left:20px; margin-bottom: 20px;">
        <div class="card-img-top"><img src="https://mo1300.bildung.hessen.de/pluginfile.php/7512/mod_label/intro/Apfel-Jakob%20Fischer.jpg" alt="" role="presentation" class="img-responsive atto_image_button_text-bottom" width="600" height="459">
            <div>
                <div class="card-body">
                    <h4 class="card-title">Apfel</h4>
                    <div class="card-text" style="max-height: 150px; overflow:hidden;">Dies ist das Bild einer Frucht.<br></div>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow" style="width: 220px; margin-left:20px; margin-bottom: 20px;">
        <div class="card-img-top"><img src="https://mo1300.bildung.hessen.de/pluginfile.php/7512/mod_label/intro/2016%20Konica%20Auto%20S3%201.jpg" alt="" role="presentation" class="img-responsive atto_image_button_text-bottom" width="600" height="461">
            <div>
                <div class="card-body">
                    <h4 class="card-title">Kamera</h4>
                    <div class="card-text" style="max-height: 150px; overflow:hidden;">Das ist das Bild einer Kamera. <br></div>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow" style="width: 220px; margin-left:20px; margin-bottom: 20px;">
        <div class="card-img-top"><img src="https://mo1300.bildung.hessen.de/pluginfile.php/7512/mod_label/intro/2016%20Konica%20Auto%20S3%201.jpg" alt="" role="presentation" class="img-responsive atto_image_button_text-bottom" width="600" height="461">
            <div>
                <div class="card-body">
                    <h4 class="card-title">Kamera</h4>
                    <div class="card-text" style="max-height: 150px; overflow:hidden;">Das ist das Bild einer Kamera. <br></div>
                </div>
            </div>
        </div>
    </div>


    <div class="card shadow" style="width: 220px; margin-left:20px; margin-bottom: 20px;">
        <div class="card-img-top"><img src="https://mo1300.bildung.hessen.de/pluginfile.php/7512/mod_label/intro/2016%20Konica%20Auto%20S3%201.jpg" alt="" role="presentation" class="img-responsive atto_image_button_text-bottom" width="600" height="461">
            <div>
                <div class="card-body">
                    <h4 class="card-title">Kamera</h4>
                    <div class="card-text" style="max-height: 150px; overflow:hidden;">Das ist das Bild einer Kamera. <br></div>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow" style="width: 220px; margin-left:20px; margin-bottom: 20px;">
        <div class="card-img-top"><img src="https://mo1300.bildung.hessen.de/pluginfile.php/7512/mod_label/intro/2016%20Konica%20Auto%20S3%201.jpg" alt="" role="presentation" class="img-responsive atto_image_button_text-bottom" width="600" height="461">
            <div>
                <div class="card-body">
                    <h4 class="card-title">Kamera</h4>
                    <div class="card-text" style="max-height: 150px; overflow:hidden;">Das ist das Bild einer Kamera. <br></div>
                </div>
            </div>
        </div>
    </div>



</div>
Bildquelle: Pixabay