digimedialoop/dml_frontend
digimedialoop/dml_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

nuxtImg medium

Browse Source
This commit is contained in:
Sabrina Hennrich 2025-05-21 09:01:47 +02:00
parent ddc44f434d
commit 0f8b1ebaad
1 changed files with 40 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
pages/index.vue
View File

@ -1,7 +1,18 @@
<template> <template>
<div class="homePage"> <div class="homePage">
<section class="heroBox" aria-labelledby="hero-heading"> <section class="heroBox" aria-labelledby="hero-heading">
<NuxtImg
provider="strapi"
src="/uploads/medium_DML_Home_Hero_4f27bc7f8e.webp"
class="hero-bg"
sizes="sm:100vw md:100vw lg:100vw"
alt=""
aria-hidden="true"
priority
loading="eager"
preload
fetchpriority="high"
/>
<div class="container-10"> <div class="container-10">
<h1 id="hero-heading">{{ $t('home.heroBox.h1') }}</h1> <h1 id="hero-heading">{{ $t('home.heroBox.h1') }}</h1>
<h2>{{ $t('home.heroBox.h2') }}</h2> <h2>{{ $t('home.heroBox.h2') }}</h2>
@ -9,26 +20,30 @@
</div> </div>
<!-- Nach dem Container: Spiegelwelle unten --> <!-- Nach dem Container: Spiegelwelle unten -->
<svg class="sectionWave wave-bottom" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20" aria-hidden="true"> <svg class="sectionWave wave-bottom" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20" aria-hidden="true">
<path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/> <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
</svg> </svg>
</section> </section>
<section aria-labelledby="solution-title"> <section aria-labelledby="solution-title">
<div class="container-10 webStrategy"> <div class="container-10 webStrategy">
<h2 id="solution-title">{{ $t('home.solution.title') }}</h2> <h2 id="solution-title">{{ $t('home.solution.title') }}</h2>
<h3>{{ $t('home.solution.teaser') }}</h3> <h3>{{ $t('home.solution.teaser') }}</h3>
<p>{{ $t('home.solution.text') }}</p> <p>{{ $t('home.solution.text') }}</p>
<button <button
class="mintBtn" class="mintBtn"
role="button" role="button"
aria-describedby="solution-title" aria-describedby="solution-title"
aria-label="headless CMS Info" @click="navigateToArticle"> aria-label="headless CMS Info" @click="navigateToArticle">
{{ $t('home.solution.buttonText') }} {{ $t('home.solution.buttonText') }}
</button> </button>
</div> </div>
</section> </section>
<section class="targetGroup" aria-labelledby="invitation-title"> <section class="targetGroup" aria-labelledby="invitation-title">
<svg class="sectionWave wave-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20" aria-hidden="true"> <svg class="sectionWave wave-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20" aria-hidden="true">
<path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/> <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
</svg> </svg>
<div class="container-10"> <div class="container-10">
<div class="row"> <div class="row">
@ -190,23 +205,26 @@ const canDoItems = [
<style lang="sass"> <style lang="sass">
.homePage .homePage
.heroBox .heroBox
background-image: url('https://strapi.digimedialoop.de/uploads/DML_Home_Hero_4f27bc7f8e.webp') position: relative
background-repeat: no-repeat
background-size: cover
background-position: right bottom
min-height: 35rem min-height: 35rem
height: 70vh height: 70vh
max-height: 200vw
display: flex display: flex
align-items: center align-items: center
justify-content: center justify-content: center
position: relative overflow: hidden
@media (max-width: $breakPointMD)
background-position: center bottom .hero-bg
position: absolute
inset: 0
width: 100%
height: 100%
object-fit: cover
object-position: center bottom
z-index: 0
.container-10, h1, h2, h3 .container-10, h1, h2, h3
position: relative position: relative
z-index: 1 // über dem Bild z-index: 1
h1 h1
margin-top: 3rem margin-top: 3rem