Compare commits

..

16 Commits

Author SHA1 Message Date
821f6dca20 Header logo 40px 2026-02-13 20:18:16 +01:00
e4cd2f3f4f Header favicon 2026-02-13 20:16:33 +01:00
9735260138 Logo 12em, Deshalb entfernt 2026-02-13 20:15:12 +01:00
d998f90de5 Logo aus Feature Box entfernt 2026-02-13 20:13:21 +01:00
73b53e9056 Logo über Video-Calls, Text größer 2026-02-13 20:11:18 +01:00
3421865891 Deshalb orange, Logo zentriert 2026-02-13 20:07:44 +01:00
8d9b9644f8 Deshalb mit Logo zentriert 2026-02-13 20:04:55 +01:00
b03bb909fc Logo 6em 2026-02-13 20:01:01 +01:00
8ad57cec8d Logo größer mit Hintergrund 2026-02-13 19:59:33 +01:00
2177c8e274 Logo in Warum headline 2026-02-13 19:56:40 +01:00
aef0b48cca Fix logo path 2026-02-13 19:53:12 +01:00
4af37485a4 Add logo and warm background 2026-02-13 19:49:50 +01:00
1a08ed0e30 Feature cards dark orange 2026-02-13 19:09:47 +01:00
91fd31fb9f Fix feature card dark mode 2026-02-13 19:08:03 +01:00
d56a6f1760 Dark mode - app colors 2026-02-13 18:40:41 +01:00
30bbcbb3ec Add app favicon 2026-02-13 18:38:33 +01:00
3 changed files with 44 additions and 17 deletions

BIN
favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 920 B

View File

@@ -17,10 +17,11 @@
} }
:root { :root {
--primary: #4F46E5; --primary: #C4A06A;
--primary-dark: #4338ca; --primary-dark: #a88656;
--secondary: #10B981; --secondary: #E86A4A;
--dark: #111827; --secondary-dark: #c45535;
--dark: #18191c;
--light: #F9FAFB; --light: #F9FAFB;
--gray: #6B7280; --gray: #6B7280;
} }
@@ -28,8 +29,8 @@
body { body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
line-height: 1.6; line-height: 1.6;
color: var(--dark); color: #e5e7eb;
background: var(--light); background: #18191c;
} }
.container { .container {
@@ -41,8 +42,14 @@
/* Header */ /* Header */
header { header {
padding: 1.5rem 0; padding: 1.5rem 0;
background: white; background: #5a4020;
box-shadow: 0 1px 3px rgba(0,0,0,0.1); box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.logo-text {
font-size: 1.5rem;
font-weight: 700;
color: #e5e7eb;
} }
.header-content { .header-content {
@@ -69,7 +76,7 @@
} }
nav a { nav a {
color: var(--gray); color: #b9bbbe;
text-decoration: none; text-decoration: none;
margin-left: 2rem; margin-left: 2rem;
transition: color 0.2s; transition: color 0.2s;
@@ -83,7 +90,7 @@
.hero { .hero {
padding: 6rem 0; padding: 6rem 0;
text-align: center; text-align: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, #C4A06A 0%, #E86A4A 100%);
color: white; color: white;
} }
@@ -111,12 +118,12 @@
} }
.btn-primary { .btn-primary {
background: var(--secondary); background: #E86A4A;
color: white; color: white;
} }
.btn-primary:hover { .btn-primary:hover {
background: #059669; background: #c45535;
transform: translateY(-2px); transform: translateY(-2px);
} }
@@ -135,13 +142,25 @@
/* Features */ /* Features */
.features { .features {
padding: 5rem 0; padding: 5rem 0;
background: white; background: #18191c;
}
.feature-card {
padding: 2rem;
border-radius: 1rem;
background: #5a4020;
transition: transform 0.2s;
}
.feature-card p {
color: #b9bbbe;
} }
.features h2 { .features h2 {
text-align: center; text-align: center;
font-size: 2.25rem; font-size: 2.25rem;
margin-bottom: 3rem; margin-bottom: 3rem;
color: #e5e7eb;
} }
.features-grid { .features-grid {
@@ -153,7 +172,7 @@
.feature-card { .feature-card {
padding: 2rem; padding: 2rem;
border-radius: 1rem; border-radius: 1rem;
background: var(--light); background: #3d2814;
transition: transform 0.2s; transition: transform 0.2s;
} }
@@ -178,12 +197,14 @@
/* About */ /* About */
.about { .about {
padding: 5rem 0; padding: 5rem 0;
background: #5a4020;
} }
.about h2 { .about h2 {
text-align: center; text-align: center;
font-size: 2.25rem; font-size: 2.25rem;
margin-bottom: 2rem; margin-bottom: 2rem;
color: #e5e7eb;
} }
.about-content { .about-content {
@@ -192,6 +213,12 @@
text-align: center; text-align: center;
} }
.about p {
font-size: 1.125rem;
color: #b9bbbe;
margin-bottom: 1.5rem;
}
.about p { .about p {
font-size: 1.125rem; font-size: 1.125rem;
color: var(--gray); color: var(--gray);
@@ -236,7 +263,7 @@
<div class="container header-content"> <div class="container header-content">
<div class="logo"> <div class="logo">
<!-- Logo: Ersetze favicon.png durch dein eigenes Logo --> <!-- Logo: Ersetze favicon.png durch dein eigenes Logo -->
<img src="/favicon.png" alt="ConVo Logo"> <img src="logo.png" alt="ConVo" style="height: 40px;">
<span class="logo-text">ConVo</span> <span class="logo-text">ConVo</span>
</div> </div>
<nav> <nav>
@@ -258,7 +285,7 @@
<section class="features" id="features"> <section class="features" id="features">
<div class="container"> <div class="container">
<h2>Warum ConVo?</h2> <h2 style="text-align: center; display: flex; align-items: center; justify-content: center; gap: 0.5em;"><img src="logo.png" alt="ConVo" style="height: 12em; vertical-align: middle; background: #5a4020; padding: 0.2em; border-radius: 0.3em"></h2>
<div class="features-grid"> <div class="features-grid">
<div class="feature-card"> <div class="feature-card">
<div class="feature-icon">💬</div> <div class="feature-icon">💬</div>
@@ -267,7 +294,7 @@
</div> </div>
<div class="feature-card"> <div class="feature-card">
<div class="feature-icon">📹</div> <div class="feature-icon">📹</div>
<h3>Video-Calls</h3> <h3 style="text-align: left; font-size: 1.5em;">Video-Calls</h3>
<p>HD-Videokonferenzen mit Bildschirmfreigabe und Aufnahmefunktion.</p> <p>HD-Videokonferenzen mit Bildschirmfreigabe und Aufnahmefunktion.</p>
</div> </div>
<div class="feature-card"> <div class="feature-card">

BIN
logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB