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

Footer neu layouten

Browse Source
This commit is contained in:
gitea_admin committed 2026-03-22 18:17:33 +01:00
1 parent ce402c693a
commit d9de4ab61f
3 files changed
+137 -22
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

index.html
+7 -2
View File
@@ -201,21 +201,26 @@
</section>
<footer class="section section--light footer" id="kontakt">
<div class="section__content footer__contact">
<div class="section__content footer__inner">
<div class="footer__contact">
<img class="brand brand--bottom" src="./media/logo_unten.svg" alt="Fabienne Foehn" />
<a href="mailto:fabienne@fabiennefoehn.ch">fabienne@fabiennefoehn.ch</a>
<a href="tel:+41786001411">+41 78 600 14 11</a>
</div>
<div class="section__content footer__claim">
<div class="footer__claim">
<h2 class="section-title section-title--claim">Wer losgeht, kommt an.</h2>
<p>Wer nicht losgeht bleibt stehen.</p>
<div class="footer__claim-meta">
<div class="footer__accent" aria-hidden="true">
<img src="./media/striche_blau_unter_wort.svg" alt="" />
<img src="./media/strichlein_rgruen_unter_wort.svg" alt="" />
</div>
<span>© 2026 Naurua GmbH</span>
</div>
</div>
</div>
<img class="footer__wave" src="./media/welle_unten_seite.svg" alt="" aria-hidden="true" />
</footer>
</main>
</div>
media/welle_unten_seite.svg
+62
View File
@@ -0,0 +1,62 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 1699 440" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(5.55556,0,0,5.55556,-5792.88,-21697.5)">
<clipPath id="_clip1">
<path d="M1179.1,3796.55L1337.71,3932.5L1199.81,4093.39L1041.2,3957.44L1179.1,3796.55Z"/>
</clipPath>
<g clip-path="url(#_clip1)">
<g>
<clipPath id="_clip2">
<path d="M1168.69,3808.69L1051.76,3945.12C1046.01,3951.83 1046.79,3961.92 1053.49,3967.67L1187.31,4082.37C1194.02,4088.12 1204.11,4087.34 1209.86,4080.63L1326.79,3944.2C1332.54,3937.5 1331.77,3927.4 1325.06,3921.66L1191.24,3806.96C1184.54,3801.21 1174.44,3801.99 1168.69,3808.69Z"/>
</clipPath>
<g clip-path="url(#_clip2)">
<g>
<clipPath id="_clip3">
<path d="M1179.1,3796.55L1336.95,3931.85L1199.05,4092.73L1041.2,3957.44L1179.1,3796.55Z"/>
</clipPath>
<g clip-path="url(#_clip3)">
<g>
<clipPath id="_clip4">
<path d="M1179.1,3796.55L1336.95,3931.85L1199.05,4092.73L1041.2,3957.44L1179.1,3796.55Z"/>
</clipPath>
<g clip-path="url(#_clip4)">
<path d="M1246.85,3919.19C1246.7,3919.47 1246.55,3919.74 1246.34,3920.12C1246.96,3920.12 1247.21,3920.69 1247.74,3920.77C1248.06,3920.92 1248.02,3921.32 1248.29,3921.51C1248.35,3921.58 1248.41,3921.66 1248.46,3921.74C1248.58,3922.01 1248.77,3922.23 1248.93,3922.48C1248.88,3923 1248.68,3923.52 1248.91,3924.05C1248.82,3924.62 1248.5,3925.18 1248.98,3925.74C1249.16,3925.95 1248.98,3926.21 1248.88,3926.44C1247.98,3928.5 1246.72,3930.29 1244.93,3931.68C1244.82,3931.77 1244.73,3931.89 1244.63,3931.99C1244.23,3932.08 1244.2,3932.53 1243.94,3932.74C1243.92,3932.82 1243.78,3932.91 1243.8,3932.9C1244.71,3932.64 1245.61,3932.33 1246.45,3931.89C1247.91,3931.14 1249.44,3930.56 1251.01,3930.08C1252.63,3929.57 1254.21,3928.94 1255.83,3928.42C1258.29,3927.65 1260.77,3926.95 1263.25,3926.24C1266.83,3925.21 1270.49,3924.48 1274.17,3923.84C1275.92,3923.53 1277.66,3923.24 1279.42,3923.05C1279.89,3923.13 1279.83,3923.44 1279.75,3923.77C1279.71,3923.88 1279.53,3923.89 1279.56,3924.02C1279.6,3924.15 1279.51,3924.02 1279.65,3923.99C1279.72,3924.02 1279.78,3924.06 1279.83,3924.12C1279.91,3924.27 1280.03,3924.37 1280.15,3924.48C1280.28,3924.75 1280.04,3924.98 1280.06,3925.24C1280.06,3925.52 1280.06,3925.8 1280.04,3926.08C1280.01,3926.19 1279.94,3926.24 1279.84,3926.23C1279.75,3926.33 1279.65,3926.43 1279.56,3926.54C1279.15,3927.09 1279.14,3927.28 1279.76,3927.48C1280.11,3927.59 1280.09,3927.87 1280.28,3928.03C1280.63,3928.03 1280.22,3928.71 1280.74,3928.55C1281.07,3928.97 1281.46,3929.35 1281.5,3929.93C1281.21,3930.66 1281.63,3931.48 1281.19,3932.2C1281.15,3932.27 1281.17,3932.44 1281.23,3932.5C1281.75,3933.05 1281.41,3933.59 1281.15,3934.07C1280.35,3935.53 1279.46,3936.9 1278.13,3937.98C1276.83,3939.02 1275.6,3940.14 1274.38,3941.28C1273.9,3941.73 1273.26,3942.03 1272.88,3942.61C1272.76,3942.63 1272.68,3942.69 1272.65,3942.81C1272.62,3942.92 1272.61,3943.02 1272.63,3943.12C1272.69,3943.18 1272.76,3943.2 1272.84,3943.19C1272.97,3943.16 1273.09,3943.11 1273.21,3943.05C1273.42,3942.96 1273.61,3942.83 1273.82,3942.76C1274.48,3942.69 1275.03,3942.29 1275.69,3942.2C1275.79,3942.18 1275.61,3941.99 1275.66,3941.88C1275.73,3941.86 1275.81,3941.84 1275.88,3941.82C1276.88,3941.92 1277.73,3941.54 1278.53,3940.97C1278.91,3940.62 1279.45,3940.69 1279.87,3940.44C1280.08,3940.54 1280.3,3940.55 1280.52,3940.46C1280.68,3940.41 1280.8,3940.31 1280.86,3940.15C1280.9,3940.07 1280.96,3940.04 1281.05,3940.06C1281.15,3940.03 1281.25,3940.01 1281.35,3939.98C1281.75,3940.16 1282.05,3939.87 1282.38,3939.79C1282.52,3939.76 1282.65,3939.74 1282.78,3939.73C1282.91,3939.72 1283.03,3939.68 1283.15,3939.62C1283.31,3939.57 1283.46,3939.5 1283.61,3939.42C1283.72,3939.38 1283.84,3939.33 1283.95,3939.28C1284.02,3939.24 1284.09,3939.2 1284.17,3939.17C1284.28,3939.12 1284.38,3939.07 1284.45,3938.96C1284.95,3938.79 1285.44,3938.6 1285.96,3938.54L1285.94,3938.54C1286.4,3938.36 1286.8,3938.12 1287.38,3938.24C1287.69,3938.3 1288.12,3937.85 1288.49,3937.62C1288.89,3937.81 1289.22,3937.7 1289.51,3937.38L1289.53,3937.39C1290.01,3937.43 1290.45,3937.32 1290.86,3937.06C1290.92,3937.03 1290.96,3936.99 1291.01,3936.96C1291.51,3936.83 1292.07,3936.88 1292.51,3936.54C1292.55,3936.48 1292.59,3936.44 1292.66,3936.42C1292.97,3936.4 1293.29,3936.42 1293.57,3936.25C1293.92,3936.35 1294.12,3936.03 1294.42,3935.96C1295.77,3935.61 1297.07,3935.02 1298.46,3934.89C1299.88,3934.77 1301.1,3933.99 1302.5,3933.79C1302.85,3933.74 1303.21,3933.67 1303.55,3933.51C1304.55,3933.31 1305.54,3933.1 1306.54,3932.91C1307.68,3932.69 1308.76,3932.26 1309.88,3931.97C1310.26,3931.88 1310.64,3931.82 1311.02,3931.76C1311.28,3931.72 1311.51,3931.59 1311.77,3931.56C1314.08,3931.07 1316.38,3930.55 1318.7,3930.09C1321.93,3929.45 1325.16,3928.77 1328.42,3928.27C1328.6,3928.3 1328.6,3928.43 1328.57,3928.58C1328.52,3928.66 1328.47,3928.73 1328.41,3928.8C1328.37,3928.88 1328.31,3928.95 1328.23,3929.01C1328.09,3929.12 1327.94,3929.22 1327.8,3929.32C1327.66,3929.43 1327.5,3929.51 1327.32,3929.55C1327.23,3929.57 1327.15,3929.58 1327.06,3929.58C1326.98,3929.6 1326.89,3929.62 1326.8,3929.64C1326.76,3929.65 1326.71,3929.66 1326.67,3929.67C1326.59,3929.71 1326.5,3929.73 1326.41,3929.76C1325.46,3929.93 1324.51,3930.07 1323.58,3930.31C1323.49,3930.33 1323.41,3930.34 1323.31,3930.35C1323.27,3930.35 1323.22,3930.35 1323.18,3930.35C1323.1,3930.37 1323.02,3930.37 1322.93,3930.38C1322.89,3930.38 1322.85,3930.39 1322.81,3930.39C1322.74,3930.41 1322.66,3930.43 1322.59,3930.45C1322.52,3930.48 1322.44,3930.51 1322.37,3930.52C1322.25,3930.55 1322.13,3930.56 1322.02,3930.57C1321.94,3930.59 1321.87,3930.6 1321.79,3930.62C1321.75,3930.62 1321.71,3930.63 1321.67,3930.64C1321.6,3930.66 1321.53,3930.68 1321.45,3930.7C1321.29,3930.76 1321.13,3930.79 1320.97,3930.81C1320.88,3930.83 1320.8,3930.84 1320.71,3930.85C1320.67,3930.87 1320.63,3930.88 1320.59,3930.89C1320.5,3930.92 1320.42,3930.94 1320.33,3930.97C1319.86,3931.01 1319.43,3931.18 1318.98,3931.28C1318.7,3931.3 1318.45,3931.44 1318.17,3931.48C1317.8,3931.Line truncated
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<g transform="matrix(5.55556,0,0,5.55556,-5792.88,-21697.5)">
<clipPath id="_clip5">
<path d="M1195.09,3812.54L1353.7,3948.49L1215.8,4109.38L1057.19,3973.43L1195.09,3812.54Z"/>
</clipPath>
<g clip-path="url(#_clip5)">
<g>
<clipPath id="_clip6">
<path d="M1184.68,3824.69L1067.75,3961.12C1062,3967.82 1062.78,3977.92 1069.48,3983.66L1203.3,4098.36C1210.01,4104.11 1220.1,4103.33 1225.85,4096.62L1342.79,3960.2C1348.53,3953.49 1347.76,3943.4 1341.05,3937.65L1207.23,3822.95C1200.53,3817.2 1190.43,3817.98 1184.68,3824.69Z"/>
</clipPath>
<g clip-path="url(#_clip6)">
<g>
<clipPath id="_clip7">
<path d="M1195.09,3812.54L1352.94,3947.84L1215.04,4108.72L1057.19,3973.43L1195.09,3812.54Z"/>
</clipPath>
<g clip-path="url(#_clip7)">
<g>
<clipPath id="_clip8">
<path d="M1195.09,3812.54L1352.94,3947.84L1215.04,4108.72L1057.19,3973.43L1195.09,3812.54Z"/>
</clipPath>
<g clip-path="url(#_clip8)">
<path d="M1262.84,3935.18C1262.7,3935.46 1262.55,3935.73 1262.33,3936.12C1262.95,3936.12 1263.2,3936.68 1263.73,3936.76C1264.05,3936.91 1264.01,3937.31 1264.28,3937.5C1264.35,3937.57 1264.4,3937.65 1264.45,3937.73C1264.57,3938 1264.77,3938.22 1264.92,3938.47C1264.87,3938.99 1264.67,3939.51 1264.91,3940.04C1264.82,3940.6 1264.5,3941.17 1264.98,3941.74C1265.16,3941.94 1264.98,3942.2 1264.88,3942.43C1263.97,3944.49 1262.72,3946.29 1260.92,3947.67C1260.81,3947.76 1260.72,3947.88 1260.62,3947.98C1260.22,3948.07 1260.2,3948.52 1259.93,3948.73C1259.91,3948.81 1259.77,3948.9 1259.79,3948.9C1260.7,3948.62 1261.6,3948.32 1262.44,3947.88C1263.9,3947.13 1265.44,3946.55 1267,3946.07C1268.62,3945.57 1270.2,3944.93 1271.82,3944.42C1274.28,3943.65 1276.76,3942.94 1279.24,3942.23C1282.83,3941.21 1286.48,3940.48 1290.16,3939.83C1291.91,3939.53 1293.65,3939.23 1295.42,3939.04C1295.88,3939.12 1295.83,3939.44 1295.74,3939.77C1295.71,3939.88 1295.52,3939.88 1295.56,3940.01C1295.59,3940.15 1295.5,3940.01 1295.64,3939.98C1295.71,3940.01 1295.78,3940.05 1295.83,3940.12C1295.9,3940.26 1296.02,3940.37 1296.14,3940.47C1296.27,3940.74 1296.03,3940.97 1296.05,3941.23C1296.05,3941.52 1296.05,3941.8 1296.03,3942.07C1296.01,3942.18 1295.94,3942.23 1295.83,3942.22C1295.74,3942.33 1295.64,3942.42 1295.56,3942.53C1295.14,3943.08 1295.13,3943.27 1295.76,3943.47C1296.1,3943.58 1296.09,3943.86 1296.27,3944.03C1296.62,3944.02 1296.21,3944.7 1296.73,3944.54C1297.06,3944.96 1297.46,3945.34 1297.48,3945.93C1297.2,3946.66 1297.62,3947.47 1297.19,3948.19C1297.14,3948.26 1297.16,3948.43 1297.22,3948.49C1297.74,3949.05 1297.4,3949.58 1297.14,3950.06C1296.34,3951.52 1295.45,3952.9 1294.12,3953.97C1292.83,3955.01 1291.59,3956.14 1290.38,3957.27C1289.88,3957.73 1289.25,3958.03 1288.87,3958.6C1288.75,3958.62 1288.67,3958.69 1288.63,3958.81C1288.61,3958.91 1288.6,3959.01 1288.62,3959.12C1288.69,3959.17 1288.76,3959.19 1288.83,3959.19C1288.96,3959.15 1289.08,3959.1 1289.2,3959.04C1289.41,3958.96 1289.6,3958.82 1289.82,3958.76C1290.47,3958.68 1291.03,3958.28 1291.68,3958.19C1291.78,3958.18 1291.6,3957.98 1291.65,3957.88C1291.72,3957.85 1291.8,3957.83 1291.87,3957.81C1292.88,3957.92 1293.73,3957.53 1294.53,3956.97C1294.9,3956.62 1295.44,3956.68 1295.86,3956.43C1296.07,3956.53 1296.29,3956.54 1296.51,3956.45C1296.67,3956.41 1296.79,3956.3 1296.85,3956.14C1296.88,3956.06 1296.95,3956.03 1297.04,3956.05C1297.14,3956.03 1297.25,3956 1297.34,3955.97C1297.73,3956.15 1298.04,3955.87 1298.38,3955.78C1298.51,3955.74 1298.64,3955.73 1298.78,3955.73C1298.91,3955.71 1299.03,3955.67 1299.14,3955.61C1299.3,3955.56 1299.45,3955.49 1299.6,3955.41C1299.71,3955.37 1299.83,3955.33 1299.94,3955.27C1300.01,3955.23 1300.08,3955.2 1300.16,3955.16C1300.27,3955.12 1300.37,3955.06 1300.45,3954.95C1300.94,3954.78 1301.43,3954.59 1301.96,3954.53L1301.94,3954.53C1302.39,3954.35 1302.79,3954.1 1303.37,3954.23C1303.68,3954.3 1304.11,3953.84 1304.48,3953.62C1304.88,3953.8 1305.21,3953.69 1305.5,3953.38L1305.52,3953.39C1306,3953.42 1306.44,3953.31 1306.85,3953.05C1306.91,3953.02 1306.96,3952.99 1307.01,3952.95C1307.51,3952.82 1308.06,3952.87 1308.5,3952.53C1308.54,3952.47 1308.59,3952.43 1308.65,3952.41C1308.96,3952.4 1309.28,3952.41 1309.56,3952.24C1309.91,3952.34 1310.12,3952.02 1310.41,3951.95C1311.76,3951.6 1313.06,3951.01 1314.45,3950.89C1315.88,3950.76 1317.1,3949.98 1318.48,3949.78C1318.85,3949.73 1319.2,3949.66 1319.54,3949.51C1320.54,3949.3 1321.54,3949.09 1322.53,3948.91C1323.67,3948.69 1324.76,3948.25 1325.88,3947.96C1326.25,3947.87 1326.63,3947.82 1327.02,3947.74C1327.27,3947.72 1327.51,3947.58 1327.77,3947.55C1330.07,3947.06 1332.38,3946.54 1334.69,3946.08C1337.93,3945.45 1341.15,3944.77 1344.41,3944.26C1344.59,3944.3 1344.6,3944.42 1344.57,3944.57C1344.52,3944.65 1344.46,3944.72 1344.4,3944.79C1344.36,3944.87 1344.3,3944.94 1344.23,3945.01C1344.08,3945.11 1343.93,3945.21 1343.79,3945.31C1343.65,3945.42 1343.5,3945.5 1343.31,3945.54C1343.23,3945.56 1343.15,3945.57 1343.06,3945.58C1342.97,3945.6 1342.88,3945.61 1342.79,3945.62C1342.75,3945.64 1342.71,3945.65 1342.67,3945.66C1342.58,3945.7 1342.49,3945.73 1342.4,3945.74C1341.45,3945.92 1340.5,3946.07 1339.57,3946.3C1339.48,3946.32 1339.4,3946.33 1339.3,3946.34C1339.26,3946.34 1339.22,3946.34 1339.17,3946.35C1339.09,3946.36 1339.01,3946.37 1338.92,3946.37C1338.88,3946.38 1338.85,3946.38 1338.81,3946.39C1338.73,3946.41 1338.65,3946.42 1338.58,3946.44C1338.51,3946.47 1338.43,3946.49 1338.36,3946.52C1338.25,3946.54 1338.12,3946.55 1338.01,3946.57C1337.93,3946.58 1337.86,3946.59 1337.78,3946.6C1337.75,3946.62 1337.7,3946.62 1337.67,3946.63C1337.59,3946.66 1337.52,3946.68 1337.44,3946.7C1337.28,3946.75 1337.12,3946.78 1336.96,3946.8C1336.88,3946.82 1336.79,3946.83 1336.71,3946.85C1336.67,3946.86 1336.62,3946.87 1336.58,3946.88C1336.5,3946.91 1336.41,3946.94 1336.32,3946.96C1335.85,3947 1335.42,3947.18 1334.97,3947.27C1334.69,3947.3 1334.44,3947.43 1334.17,3947.48C1333.79,3947.49 1333.45,3947.64 1333.08Line truncated
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

styles.css
+68 -20
View File
@@ -101,8 +101,7 @@ button {
}
.hero,
.about,
.footer {
.about {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@@ -486,7 +485,19 @@ button {
}
.footer {
padding-bottom: clamp(4.5rem, 9vw, 8rem);
}
.footer__inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
gap: clamp(2rem, 5vw, 5rem);
align-items: end;
min-height: clamp(320px, 31vw, 420px);
padding-top: clamp(3rem, 5vw, 4.5rem);
padding-bottom: clamp(2.5rem, 4vw, 4rem);
}
.footer__contact {
@@ -494,51 +505,72 @@ button {
flex-direction: column;
gap: 1.05rem;
justify-content: end;
padding-top: clamp(3rem, 5vw, 4.5rem);
padding-bottom: clamp(3rem, 5vw, 4.5rem);
align-self: end;
padding: 0;
}
.footer__contact a {
width: fit-content;
color: inherit;
text-decoration: none;
font-size: clamp(1.2rem, 1.6vw, 2rem);
font-size: clamp(1.1rem, 1.75vw, 2rem);
font-weight: var(--font-weight-black);
line-height: 1.05;
}
.footer__claim {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.35rem;
padding-top: clamp(3rem, 5vw, 4.5rem);
padding-bottom: clamp(3rem, 5vw, 4.5rem);
justify-self: end;
align-self: start;
width: min(100%, 36rem);
gap: 0.45rem;
padding: 0;
}
.section-title--claim {
font-size: clamp(3rem, 5vw, 5.4rem);
max-width: 8.2ch;
font-size: clamp(3.35rem, 5.7vw, 5.85rem);
max-width: 7.7ch;
line-height: 0.92;
}
.footer__claim p {
margin: 0;
font-weight: var(--font-weight-bold);
}
.footer__claim-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 1.2rem;
width: 100%;
margin-top: 1.15rem;
}
.footer__claim span {
margin-top: 1.8rem;
font-size: 1rem;
font-weight: var(--font-weight-bold);
}
.footer__accent {
position: absolute;
right: 2.2rem;
bottom: 3.6rem;
width: 230px;
width: clamp(220px, 22vw, 300px);
margin-left: auto;
}
.footer__accent img:last-child {
width: 58%;
margin: -0.8rem 0 0 auto;
width: 78%;
margin: -0.95rem 0 0 auto;
}
.footer__wave {
position: absolute;
right: 0;
bottom: 0;
width: 100%;
height: auto;
pointer-events: none;
}
.contact-flyover {
@@ -795,17 +827,33 @@ button {
}
.footer__claim {
padding-top: 0;
justify-self: start;
width: 100%;
}
.footer__claim h2 {
font-size: clamp(3rem, 16vw, 4.8rem);
}
.footer__inner {
grid-template-columns: 1fr;
align-items: start;
min-height: auto;
padding-bottom: 2rem;
}
.footer__contact {
gap: 0.8rem;
}
.footer__claim-meta {
align-items: flex-start;
}
.footer__accent {
position: static;
width: 180px;
margin-top: 0.5rem;
margin-left: 0;
}
.contact-flyover__panel {