dos
HTML:
copy HTML
<div class="list"> <ul> <li><a href="#"><img src="scripte/img/content/img_m_01.jpg" alt="bild 01"><h3>sommerabend</h3></a></li> <li><a href="#"><img src="scripte/img/content/img_m_02.jpg" alt="bild 02"><h3>blauer horizont</h3></a></li> <li><a href="#"><img src="scripte/img/content/img_m_03.jpg" alt="bild 03"><h3>waldpfad</h3></a></li> <li><a href="#"><img src="scripte/img/content/img_m_04.jpg" alt="bild 04"><h3>stille see</h3></a></li> <li><a href="#"><img src="scripte/img/content/img_m_05.jpg" alt="bild 05"><h3>verlassene straße</h3></a></li> <li><a href="#"><img src="scripte/img/content/img_m_06.jpg" alt="bild 06"><h3>sonnenaufgang</h3></a></li> <li><a href="#"><img src="scripte/img/content/img_m_07.jpg" alt="bild 07"><h3>roter mohn</h3></a></li> <li><a href="#"><img src="scripte/img/content/img_m_08.jpg" alt="bild 08"><h3>felsenküste</h3></a></li> <li><a href="#"><img src="scripte/img/content/img_m_09.jpg" alt="bild 09"><h3>goldene felder</h3></a></li> <li><a href="#"><img src="scripte/img/content/img_m_10.jpg" alt="bild 10"><h3>dunkler wald</h3></a></li> <li><a href="#"><img src="scripte/img/content/img_m_11.jpg" alt="bild 11"><h3>verwunschene gasse</h3></a></li> <li><a href="#"><img src="scripte/img/content/img_m_12.jpg" alt="bild 12"><h3>lichter der stadt</h3></a></li> <li><a href="#"><img src="scripte/img/content/img_m_13.jpg" alt="bild 13"><h3>kalter morgen</h3></a></li> <li><a href="#"><img src="scripte/img/content/img_m_14.jpg" alt="bild 14"><h3>bergpanorama</h3></a></li> <li><a href="#"><img src="scripte/img/content/img_m_15.jpg" alt="bild 15"><h3>wasserfall</h3></a></li> <li><a href="#"><img src="scripte/img/content/img_m_16.jpg" alt="bild 16"><h3>leere straße</h3></a></li> <li><a href="#"><img src="scripte/img/content/img_m_17.jpg" alt="bild 17"><h3>küstenweg</h3></a></li> <li><a href="#"><img src="scripte/img/content/img_m_18.jpg" alt="bild 18"><h3>nebel über feldern</h3></a></li> <li><a href="#"><img src="scripte/img/content/img_m_19.jpg" alt="bild 19"><h3>grüne landschaft</h3></a></li> <li><a href="#"><img src="scripte/img/content/img_m_20.jpg" alt="bild 20"><h3>tiefer canyon</h3></a></li> </ul> </div>'
CSS:
copy CSS
* { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: sans-serif; background-color: #f4f4f4; } .list ul { list-style: none; padding: 2rem; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; max-width: 1400px; } .list li { background-color: #fff; border-radius: 4px; overflow: hidden; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: transform 0.2s ease; } .list li:hover { transform: scale(1.03); } .list a { display: block; text-decoration: none; color: inherit; } .list img { width: 100%; height: 190px; object-fit: cover; display: block; } .list h3 { margin: 0; padding: 1rem; font-size: 1rem; text-align: center; } @media (max-width: 1200px) { .list ul { padding: 2rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; max-width: 1400px; } .list img { height: 190px; } }'
JavaScript:
copy JS
test'
