diff --git a/static/img/fotos/datentraeger.jpeg b/static/img/fotos/datentraeger.jpeg new file mode 100644 index 0000000..16b9510 Binary files /dev/null and b/static/img/fotos/datentraeger.jpeg differ diff --git a/static/img/fotos/laptop_matte.jpeg b/static/img/fotos/laptop_matte.jpeg new file mode 100644 index 0000000..02b7e3e Binary files /dev/null and b/static/img/fotos/laptop_matte.jpeg differ diff --git a/static/img/icons/computer.svg b/static/img/icons/computer.svg new file mode 100644 index 0000000..473723d --- /dev/null +++ b/static/img/icons/computer.svg @@ -0,0 +1,19 @@ + + + + + + +? + + + + + + diff --git a/static/img/icons/daten.svg b/static/img/icons/daten.svg deleted file mode 100644 index c915d43..0000000 --- a/static/img/icons/daten.svg +++ /dev/null @@ -1,83 +0,0 @@ - - - - - - - - - - image/svg+xml - - - - - - - - - - diff --git a/static/img/icons/facebook.svg b/static/img/icons/facebook.svg new file mode 100644 index 0000000..e2e1def --- /dev/null +++ b/static/img/icons/facebook.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + diff --git a/static/img/icons/fb.png b/static/img/icons/fb.png deleted file mode 100644 index fde3175..0000000 Binary files a/static/img/icons/fb.png and /dev/null differ diff --git a/static/img/icons/harddrive.svg b/static/img/icons/harddrive.svg new file mode 100644 index 0000000..8381631 --- /dev/null +++ b/static/img/icons/harddrive.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/img/icons/hilfe.svg b/static/img/icons/hilfe.svg deleted file mode 100644 index 3182402..0000000 --- a/static/img/icons/hilfe.svg +++ /dev/null @@ -1,77 +0,0 @@ - - - - - - - - - - image/svg+xml - - - - - - - - - - - diff --git a/static/img/icons/instagram.svg b/static/img/icons/instagram.svg new file mode 100644 index 0000000..4ce33d4 --- /dev/null +++ b/static/img/icons/instagram.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/icons/laptop.svg b/static/img/icons/laptop.svg deleted file mode 100644 index f592a5d..0000000 --- a/static/img/icons/laptop.svg +++ /dev/null @@ -1,101 +0,0 @@ - - - - - - - - - - image/svg+xml - - - - - - - - - - - - diff --git a/static/img/icons/mail.svg b/static/img/icons/mail.svg new file mode 100644 index 0000000..06a6357 --- /dev/null +++ b/static/img/icons/mail.svg @@ -0,0 +1,16 @@ + + + + + + +? + + + + + diff --git a/static/img/icons/questionmark.svg b/static/img/icons/questionmark.svg new file mode 100644 index 0000000..042855e --- /dev/null +++ b/static/img/icons/questionmark.svg @@ -0,0 +1,20 @@ + + + + + + +? + + + + + diff --git a/static/img/icons/screwdriver.svg b/static/img/icons/screwdriver.svg new file mode 100644 index 0000000..f2a51a8 --- /dev/null +++ b/static/img/icons/screwdriver.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + diff --git a/static/img/icons/telephone.svg b/static/img/icons/telephone.svg new file mode 100644 index 0000000..12bbaf5 --- /dev/null +++ b/static/img/icons/telephone.svg @@ -0,0 +1,16 @@ + + + + + + +? + + diff --git a/static/img/icons/wrench.svg b/static/img/icons/wrench.svg deleted file mode 100644 index cd3020a..0000000 --- a/static/img/icons/wrench.svg +++ /dev/null @@ -1,73 +0,0 @@ - - - - - - - - - - image/svg+xml - - - - - - - - - diff --git a/static/img/icons/youtube.svg b/static/img/icons/youtube.svg new file mode 100644 index 0000000..83bba3e --- /dev/null +++ b/static/img/icons/youtube.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/static/styles.css b/static/styles.css index 3e89897..3835366 100644 --- a/static/styles.css +++ b/static/styles.css @@ -13,8 +13,9 @@ body { flex-direction: column; margin: 0; min-height: 100%; - font-size: 20px; + font-size: 1.25em; font-family: Lato, Roboto, Noto, sans-serif; + text-align: justify; } header, main, footer { @@ -27,6 +28,18 @@ main { flex-grow: 1; } +.header-contact { + background: #DD8033; +} + +.header-nav, footer { + background: #65bb50; +} + +.header-contact { + width: 100%; +} + .header-content, .main-content, .footer-content { max-width: 1000px; width: 100%; @@ -37,7 +50,7 @@ main { flex-direction: row; align-items: center; margin: 0 auto; - padding: 5px 8px; + padding: 0.2em 0.3em; } .header-nav .header-content { @@ -74,7 +87,6 @@ main { .header-nav { width: 100%; - background-color: #65bb50; position: sticky; z-index: 100; top: 0; @@ -83,7 +95,12 @@ main { .header-contact { width: 100%; - background-color: #DD8033; +} + +.text-icon { + height: 1em; + width: auto; + vertical-align: middle; } a { @@ -130,7 +147,7 @@ h1, h2, h3, h4 { } .overview > * { - width: 24%; + width: 22%; } .service-link { @@ -140,12 +157,14 @@ h1, h2, h3, h4 { .service-icon { width: 100%; + height: auto; } .service-name { font-weight: bold; font-size: 1.2em; margin-bottom: 0.4em; + margin-top: 0.9em; } .service:hover > .service-inner { @@ -172,8 +191,37 @@ section:nth-child(even) { margin-top: 0; } +.split-section { + display: flex; + flex-direction: row; + gap: 1.5em; +} + +.split-section-text { + width: 70%; +} + +.split-section-text > *:first-child { + margin-top: 0; +} + +.split-section-text > *:last-child { + margin-bottom: 0; +} + +.split-section-img { + width: 30%; + display: flex; + flex-direction: column; + justify-content: center; +} + +.split-section-img img { + width: 100%; + height: auto; +} + footer { - background: #65bb50; padding: 2em 0.5em; box-shadow: 0px -3px 3px rgba(0, 0, 0, 0.15); } @@ -200,6 +248,16 @@ footer h2 { border-left: 0.2em solid #F5F5F5; } +.social-media { + display: inline-flex; + margin: 0 0.2em; +} + +.social-icon { + height: 3em; + width: auto; +} + .credits { font-size: 0.85em; } @@ -213,22 +271,48 @@ footer h2 { flex-direction: column; align-items: start; } + .header-nav .header-content { gap: initial; } + .header-contact .header-content { gap: initial; } + .overview { display: grid; grid-template-columns: 1fr 1fr; } + + .split-section { + flex-direction: column; + gap: 2em; + } + + .split-section-text { + width: auto; + } + + .split-section-img { + height: 11em; + width: auto; + flex-direction: row; + } + + .split-section-img img { + height: 100%; + width: auto; + } + .footer-content { flex-direction: column; } + .footer-content > * { width: initial; } + .overview > * { width: initial; } diff --git a/templates/_base.html b/templates/_base.html index 2c096f4..3a31437 100644 --- a/templates/_base.html +++ b/templates/_base.html @@ -12,8 +12,14 @@
- 📞 +43 664 1240214 - 📧 office@computerschaf.at + + + +43 664 1240214 + + + + office@computerschaf.at +
@@ -42,8 +48,10 @@

Kontakt

- đź“ž +43 664 1240214
- 📧 office@computerschaf.at
+ + +43 664 1240214
+ + office@computerschaf.at
Adresse (nur nach RĂĽcksprache):
UlmenstraĂźe 65
@@ -51,13 +59,13 @@

Soziale Medien

@@ -70,7 +78,7 @@
Webdesign von Gabriel Huber
- Logo von Theresa Grossalber + Icons von Theresa Grossalber
diff --git a/templates/index.html b/templates/index.html index 59245e0..3f8f206 100644 --- a/templates/index.html +++ b/templates/index.html @@ -10,7 +10,7 @@
- + Hilfe & Beratung @@ -19,7 +19,7 @@
- + Reparatur @@ -28,7 +28,7 @@
- + Datenrettung @@ -37,7 +37,7 @@
- + Verleih @@ -58,24 +58,31 @@

Reparatur

-

- Egal ob ein DVD-Laufwerk sich nicht mehr öffnet, ein Lüfter laute Geräusche macht oder - der Computer gar nicht mehr hochfährt – ich übernehme für Sie die Diagnose des Problems - und erarbeite eine Lösung. Die Erstdiagnose erfolgt direkt bei Ihnen vor Ort – oftmals - kann ich Ihren Rechner direkt reparieren und Sie können diesen dann innerhalb kurzer - Zeit wieder verwenden. -

-

- Sollte das Problem spezifische Ersatzteile, ein nicht-mobiles Werkzeug oder eine - detailliertere Diagnose benötigen, nehme ich Ihr Gerät mit und repariere es - baldmöglichst – beachten Sie hierbei auch die Möglichkeit ein Leihgerät in Anspruch zu - nehmen. Je nach Vereinbarung sende ich Ihnen das Gerät nach erfolgter Reparatur - postalisch zu oder bringe es Ihnen persönlich vorbei. -

-

- Selbstverständlich gilt: Wenn sich eine vereinbarte Reparatur als nicht umsetzbar - herausstellt, ist diese auch nicht zu zahlen. -

+
+
+

+ Egal ob ein DVD-Laufwerk sich nicht mehr öffnet, ein Lüfter laute Geräusche macht oder + der Computer gar nicht mehr hochfährt – ich übernehme für Sie die Diagnose des Problems + und erarbeite eine Lösung. Die Erstdiagnose erfolgt direkt bei Ihnen vor Ort – oftmals + kann ich Ihren Rechner direkt reparieren und Sie können diesen dann innerhalb kurzer + Zeit wieder verwenden. +

+

+ Sollte das Problem spezifische Ersatzteile, ein nicht-mobiles Werkzeug oder eine + detailliertere Diagnose benötigen, nehme ich Ihr Gerät mit und repariere es + baldmöglichst – beachten Sie hierbei auch die Möglichkeit ein Leihgerät in Anspruch zu + nehmen. Je nach Vereinbarung sende ich Ihnen das Gerät nach erfolgter Reparatur + postalisch zu oder bringe es Ihnen persönlich vorbei. +

+

+ Selbstverständlich gilt: Wenn sich eine vereinbarte Reparatur als nicht umsetzbar + herausstellt, ist diese auch nicht zu zahlen. +

+
+
+ +
+