david/portfolio-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add contact link

Browse Source
This commit is contained in:
David Madl
2026-05-08 22:28:16 +02:00
parent bbd4bfe9ac
commit ac0571a626
5 changed files with 331 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
cta.svg Normal file
View File

@@ -0,0 +1,29 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="28mm"
height="12.5mm"
viewBox="0 0 28 12.5"
version="1.1"
id="svg29846"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs29843" />
<g
id="layer1">
<circle
style="fill:#00adee;fill-opacity:1;stroke-width:0.0555501"
id="path840-6-5"
cx="21.17"
cy="6.1161757"
r="6.0700002" />
<circle
style="fill:#ffffff;fill-opacity:1;stroke-width:0.0326711"
id="path840-7-0-6"
cx="21.17"
cy="6.1161757"
r="3.5699999" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 696 B

128
hero_bg_2.svg Normal file
View File

@@ -0,0 +1,128 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="210mm"
height="600mm"
viewBox="0 0 210 600"
version="1.1"
id="svg13367"
inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
sodipodi:docname="hero_bg_2.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview13369"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="1.7128681"
inkscape:cx="219.80676"
inkscape:cy="273.51784"
inkscape:window-width="2400"
inkscape:window-height="1261"
inkscape:window-x="2391"
inkscape:window-y="-9"
inkscape:window-maximized="1"
inkscape:current-layer="g13905" />
<defs
id="defs13364" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<g
id="g13905"
transform="translate(-4.6826096,0.77377499)">
<rect
style="fill:#00adee;fill-opacity:1;stroke-width:0.13348"
id="rect3266-3-9"
width="550"
height="2.5"
x="-558.88629"
y="24.800598"
transform="rotate(-90)" />
<rect
style="fill:#003b5c;fill-opacity:1;stroke-width:0.0373223"
id="rect3266-7"
width="43"
height="2.5"
x="94.470894"
y="25.416904" />
<circle
style="fill:#003b5c;fill-opacity:1;stroke-width:0.0555501"
id="path840-6"
cx="26.050598"
cy="5.3162251"
r="6.0700002" />
<circle
style="fill:#ffffff;fill-opacity:1;stroke-width:0.0326711"
id="path840-7-0"
cx="26.050598"
cy="5.3162251"
r="3.5699999" />
<circle
style="fill:#00adee;fill-opacity:1;stroke-width:0.0555501"
id="path840-6-5"
cx="26.050598"
cy="114.77202"
r="6.0700002" />
<circle
style="fill:#ffffff;fill-opacity:1;stroke-width:0.0326711"
id="path840-7-0-6"
cx="26.050598"
cy="114.77202"
r="3.5699999" />
<rect
style="fill:#003b5c;fill-opacity:1;stroke-width:0.0373223"
id="rect3266-3"
width="43"
height="2.5"
x="31.155714"
y="4.0662231" />
<circle
style="fill:#003b5c;fill-opacity:1;stroke-width:0.0555501"
id="path840-1"
cx="193.31462"
cy="16.357677"
r="6.0700002" />
<circle
style="fill:#ffffff;fill-opacity:1;stroke-width:0.0326711"
id="path840-7-3"
cx="193.31462"
cy="16.357677"
r="3.5699999" />
<rect
style="fill:#003b5c;fill-opacity:1;stroke-width:0.0373223"
id="rect3266-1"
width="43"
height="2.5"
x="146.7446"
y="15.10769" />
<rect
style="fill:#003b5c;fill-opacity:1;stroke-width:0.0318068"
id="rect3266-9-7"
width="31.23"
height="2.4999993"
x="55.311241"
y="-49.560772"
transform="rotate(45)" />
<rect
style="fill:#003b5c;fill-opacity:1;stroke-width:0.0224908"
id="rect3266-9-7-5"
width="15.615"
height="2.4999993"
x="77.466377"
y="114.44683"
transform="rotate(-45)" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

116
hero_bg_2_plain.svg Normal file
View File

@@ -0,0 +1,116 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="210mm"
height="600mm"
viewBox="0 0 210 600"
version="1.1"
id="svg13367"
inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
sodipodi:docname="hero_bg_2.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview13369"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="1.7128681"
inkscape:cx="219.80676"
inkscape:cy="507.04428"
inkscape:window-width="2400"
inkscape:window-height="1261"
inkscape:window-x="2391"
inkscape:window-y="-9"
inkscape:window-maximized="1"
inkscape:current-layer="g13905" />
<defs
id="defs13364" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<g
id="g13905"
transform="translate(-4.6826096,0.77377499)">
<rect
style="fill:#00adee;fill-opacity:1;stroke-width:0.13348"
id="rect3266-3-9"
width="550"
height="2.5"
x="-558.88629"
y="24.800598"
transform="rotate(-90)" />
<rect
style="fill:#003b5c;fill-opacity:1;stroke-width:0.0373223"
id="rect3266-7"
width="43"
height="2.5"
x="94.470894"
y="25.416904" />
<circle
style="fill:#003b5c;fill-opacity:1;stroke-width:0.0555501"
id="path840-6"
cx="26.050598"
cy="5.3162251"
r="6.0700002" />
<circle
style="fill:#ffffff;fill-opacity:1;stroke-width:0.0326711"
id="path840-7-0"
cx="26.050598"
cy="5.3162251"
r="3.5699999" />
<rect
style="fill:#003b5c;fill-opacity:1;stroke-width:0.0373223"
id="rect3266-3"
width="43"
height="2.5"
x="31.155714"
y="4.0662231" />
<circle
style="fill:#003b5c;fill-opacity:1;stroke-width:0.0555501"
id="path840-1"
cx="193.31462"
cy="16.357677"
r="6.0700002" />
<circle
style="fill:#ffffff;fill-opacity:1;stroke-width:0.0326711"
id="path840-7-3"
cx="193.31462"
cy="16.357677"
r="3.5699999" />
<rect
style="fill:#003b5c;fill-opacity:1;stroke-width:0.0373223"
id="rect3266-1"
width="43"
height="2.5"
x="146.7446"
y="15.10769" />
<rect
style="fill:#003b5c;fill-opacity:1;stroke-width:0.0318068"
id="rect3266-9-7"
width="31.23"
height="2.4999993"
x="55.311241"
y="-49.560772"
transform="rotate(45)" />
<rect
style="fill:#003b5c;fill-opacity:1;stroke-width:0.0224908"
id="rect3266-9-7-5"
width="15.615"
height="2.4999993"
x="77.466377"
y="114.44683"
transform="rotate(-45)" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

9
index.html
View File

@@ -26,9 +26,14 @@
</ul>
</div>
</div>
<div class="body">
<div class="cta">
<!--<p>Lorem ipsum</p>-->
<div class="cta-content">
<h2>Need results?</h2>
<p><svg style="height: 1.5em; vertical-align: -0.4em;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M125.4 128C91.5 128 64 155.5 64 189.4C64 190.3 64 191.1 64.1 192L64 192L64 448C64 483.3 92.7 512 128 512L512 512C547.3 512 576 483.3 576 448L576 192L575.9 192C575.9 191.1 576 190.3 576 189.4C576 155.5 548.5 128 514.6 128L125.4 128zM528 256.3L528 448C528 456.8 520.8 464 512 464L128 464C119.2 464 112 456.8 112 448L112 256.3L266.8 373.7C298.2 397.6 341.7 397.6 373.2 373.7L528 256.3zM112 189.4C112 182 118 176 125.4 176L514.6 176C522 176 528 182 528 189.4C528 193.6 526 197.6 522.7 200.1L344.2 335.5C329.9 346.3 310.1 346.3 295.8 335.5L117.3 200.1C114 197.6 112 193.6 112 189.4z"/></svg> <a href="mailto:todo@example.com">todo@example.com</a></p>
<!--<h2>cta</h2>-->
</div>
</div>
<div class="footer">
<p>Footer</p>
<p>&copy; 2026 David Madl</p>
</div>

55
main.css
View File

@@ -13,8 +13,9 @@ h1, h2, h3, h4, h5, h6 {
/*gap: 20px;*/
padding-top: 5.78vw; /* hor spacing from line to heading top */
margin-top: 2.25vw;
margin-bottom: 0;
background-image: url("https://abanbytes.eu/upload/hero_bg_plain.svg");
background-image: url("https://abanbytes.eu/upload/hero_bg_2_plain.svg");
background-repeat: no-repeat;
background-position: center top;
background-size: 100% auto;
@@ -45,6 +46,7 @@ h1, h2, h3, h4, h5, h6 {
/*align-items: center;
justify-content: center;*/
flex-direction: column;
margin-bottom: 2.25vw; /* bottom distance to cta, in regular mode */
}
.block h2 {
@@ -66,7 +68,8 @@ h1, h2, h3, h4, h5, h6 {
flex-direction: column;
padding-top: 19.29vw;
margin-top: 2.25vw;
margin-bottom: 2.25vw;
margin-bottom: 0;
width: max(100%, calc(15em + 2 * 12.85vw));
}
.block {
@@ -83,14 +86,58 @@ h1, h2, h3, h4, h5, h6 {
}
.block:nth-child(1) {
margin-top:
margin-top: 0;
}
.block:nth-child(3) {
margin-bottom: 4.5vw; /* bottom 2.25vw + distance to cta, in responsive mode */
}
}
div.body, div.footer {
.cta {
margin-left: 0;
margin-top: -0.3vw;
padding-left: 13vw;
}
div.cta {
/*width: 100%;*/
min-height: 5.95vw;
background-image: url("https://abanbytes.eu/upload/cta.svg");
background-repeat: no-repeat;
background-position: left top;
background-size: auto 5.95vw;
}
div.footer {
margin-left: 7.14vw;
margin-right: 7.14vw;
}
div.cta {
margin-right: 7.14vw;
}
.cta {
/* set variables */
--circle-center-y: 2.905vw;
--cta-heading-size: 1.5rem;
--cta-heading-line-height: 1.2;
}
.cta h2 {
margin-top: 0px;
margin-bottom: 0.5rem; /* sensitive to .cta h2 font-size */
font-size: var(--cta-heading-size);
line-height: var(--cta-heading-line-height);
}
.cta p:first-of-type {
margin-top: 0.5rem;
}
div.cta-content {
padding-top: calc(
var(--circle-center-y) -
((var(--cta-heading-size) * var(--cta-heading-line-height)) * 0.5)
);
margin-left: 2.25vw;
}
div.footer {
margin-top: 7.14vw;