Benutzer:Nöth: Unterschied zwischen den Versionen
Aus Stadtsprachen
Nöth (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung Markierung: Zurückgesetzt |
Nöth (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung Markierung: Manuelle Zurücksetzung |
||
| Zeile 2: | Zeile 2: | ||
<html> | <html> | ||
<style> | <style> | ||
/* Custom CSS to match Tailwind styles */ | |||
.mix-blend-multiply { | .mix-blend-multiply { | ||
mix-blend-mode: multiply; | mix-blend-mode: multiply; | ||
} | |||
.min-h-96 { | |||
min-height: 24rem; | |||
} | } | ||
| Zeile 37: | Zeile 42: | ||
<section class="hero-section bg-light"> | <section class="hero-section bg-light"> | ||
<!-- image - start --> | <!-- image - start --> | ||
<img src="https://stadtsprachen.kallimachos.de/images/thumb/7/7d/Orte.png/1600px-Orte.png?20210422225226" loading="lazy" alt=" | <img src="https://stadtsprachen.kallimachos.de/images/thumb/7/7d/Orte.png/1600px-Orte.png?20210422225226" loading="lazy" alt="Photo by Fakurian Design" class="position-absolute h-100 w-100" style="object-fit: cover; object-position: center; inset: 0;" /> | ||
<!-- image - end --> | <!-- image - end --> | ||
| Zeile 43: | Zeile 48: | ||
<div class="position-absolute h-100 w-100 bg-dark mix-blend-multiply" style="inset: 0;"></div> | <div class="position-absolute h-100 w-100 bg-dark mix-blend-multiply" style="inset: 0;"></div> | ||
<!-- overlay - end --> | <!-- overlay - end --> | ||
<!-- text start --> | |||
<div class="position-relative d-flex flex-column align-items-center p-4"> | |||
<p class="text-center text-white font-weight-bold" style="font-size: 3rem;">Historische Stadtsprachen vor Ort</p> | |||
<p class="text-center text-white mb-4 mb-md-5" style="font-size: 2.5rem;">Eine stadtsprachgeschichtliche Wissensplattform</h1> | |||
<div class="d-flex flex-column flex-sm-row w-100 justify-content-sm-center"> | |||
<a href="#" class="btn bg-indigo-500 text-white font-weight-semibold mb-2 mb-sm-0 mr-sm-2 px-4 py-2 ring-indigo-300 hover-indigo-600">Start now</a> | |||
<a href="#" class="btn btn-light text-secondary font-weight-semibold px-4 py-2 ring-indigo-300">Take tour</a> | |||
</div> | |||
</div> | |||
<!-- text end --> | |||
</section> | </section> | ||
</div> | </div> | ||
</body> | </body> | ||
</html> | </html> | ||
