gitea_admin/fabiennefoehn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix hero art layout

Browse Source
This commit is contained in:
Mathias Gläser
2026-03-22 17:02:38 +01:00
parent 81897a3165
commit 21441e8d81
2 changed files with 31 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
index.html
View File

@@ -25,22 +25,22 @@
/> />
<img <img
class="hero__scribble hero__scribble--middle" class="hero__scribble hero__scribble--middle"
src="./media/illu_oben_hintergrund_striche.svg"
alt=""
aria-hidden="true"
/>
<img
class="hero__scribble hero__scribble--bottom"
src="./media/strichlein_rgruen_unter_wort.svg" src="./media/strichlein_rgruen_unter_wort.svg"
alt="" alt=""
aria-hidden="true" aria-hidden="true"
/> />
<img <img
class="hero__scribble hero__scribble--bottom-secondary" class="hero__scribble hero__scribble--bottom"
src="./media/striche_blau_unter_wort.svg" src="./media/striche_blau_unter_wort.svg"
alt="" alt=""
aria-hidden="true" aria-hidden="true"
/> />
<img
class="hero__scribble hero__scribble--bottom-secondary"
src="./media/strichlein_rgruen_unter_wort.svg"
alt=""
aria-hidden="true"
/>
<h1 class="section-title section-title--hero">Von der Idee zur Wirkung</h1> <h1 class="section-title section-title--hero">Von der Idee zur Wirkung</h1>
</div> </div>
<button class="button button--dark" type="button" data-open-contact> <button class="button button--dark" type="button" data-open-contact>

46
styles.css
View File

@@ -123,8 +123,8 @@ button {
.hero__headline-wrap { .hero__headline-wrap {
position: relative; position: relative;
max-width: 32rem; max-width: 32rem;
min-height: 29rem; min-height: 26rem;
padding-top: 7rem; padding-top: 6rem;
} }
.section-title { .section-title {
@@ -139,37 +139,39 @@ button {
position: relative; position: relative;
z-index: 2; z-index: 2;
max-width: 6ch; max-width: 6ch;
font-size: clamp(4rem, 5.3vw, 5.4rem); font-size: clamp(4rem, 5.15vw, 5.2rem);
text-align: center;
} }
.hero__scribble { .hero__scribble {
position: absolute; position: absolute;
pointer-events: none; pointer-events: none;
z-index: 1;
} }
.hero__scribble--top { .hero__scribble--top {
width: clamp(106px, 11vw, 142px); width: clamp(106px, 11vw, 142px);
top: 1.1rem; top: 0.45rem;
right: 0.6rem; right: -0.2rem;
} }
.hero__scribble--middle { .hero__scribble--middle {
width: clamp(208px, 20vw, 268px); width: clamp(210px, 21vw, 278px);
left: 3rem; left: 8.2rem;
top: 10.2rem; top: 8.8rem;
opacity: 1; opacity: 1;
} }
.hero__scribble--bottom { .hero__scribble--bottom {
width: clamp(170px, 18vw, 248px); width: clamp(210px, 20vw, 278px);
left: 10.8rem; left: 13.2rem;
bottom: 2.2rem; bottom: 0.15rem;
} }
.hero__scribble--bottom-secondary { .hero__scribble--bottom-secondary {
width: clamp(184px, 18vw, 250px); width: clamp(190px, 18vw, 248px);
left: 9rem; left: 15rem;
bottom: 2.45rem; bottom: -0.05rem;
} }
.hero__media { .hero__media {
@@ -641,21 +643,21 @@ button {
} }
.hero__scribble--middle { .hero__scribble--middle {
width: 154px; width: 148px;
top: 6.25rem; top: 5.55rem;
left: 2.45rem; left: 5.35rem;
} }
.hero__scribble--bottom { .hero__scribble--bottom {
width: 128px; width: 154px;
left: 5.7rem; left: 8.2rem;
bottom: 0.8rem; bottom: 0.25rem;
} }
.hero__scribble--bottom-secondary { .hero__scribble--bottom-secondary {
width: 132px; width: 132px;
left: 4.8rem; left: 9.5rem;
bottom: 1.1rem; bottom: 0.05rem;
} }
.hero__media { .hero__media {