From deaeb448c9f7319f83e317092458fdd340522811 Mon Sep 17 00:00:00 2001 From: Ilyass Aamiri Date: Wed, 12 Nov 2025 14:58:29 +0100 Subject: [PATCH] =?UTF-8?q?style.css=20gel=C3=B6scht?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style.css | 392 ------------------------------------------------------ 1 file changed, 392 deletions(-) delete mode 100644 style.css diff --git a/style.css b/style.css deleted file mode 100644 index a79fbc8..0000000 --- a/style.css +++ /dev/null @@ -1,392 +0,0 @@ -:root { - --main-color: #667eea; - --main-color-dark: #764ba2; -} - -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - line-height: 1.8; - background-color: #f8f9fa; - color: #333; -} - -.container { - max-width: 1200px; - margin: 0 auto; - padding: 0 20px; -} - -/* Header & Navigation */ -header { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; - padding: 40px 0; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); - position: sticky; - top: 0; - z-index: 100; -} - -header h1 { - font-size: 32px; - margin-bottom: 20px; - font-weight: 700; - letter-spacing: -0.5px; -} - -nav { - display: flex; - justify-content: center; - gap: 30px; - flex-wrap: wrap; -} - -nav a { - color: white; - text-decoration: none; - font-weight: 500; - font-size: 15px; - transition: opacity 0.3s ease; - position: relative; -} - -nav a:hover { - opacity: 0.8; -} - -nav a::after { - content: ''; - position: absolute; - bottom: -5px; - left: 0; - width: 0; - height: 2px; - background-color: white; - transition: width 0.3s ease; -} - -nav a:hover::after { - width: 100%; -} - -/* Main Content */ -main { - padding: 60px 20px; -} - -section { - margin-bottom: 50px; - background: white; - padding: 50px 40px; - border-radius: 12px; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); - animation: fadeIn 0.6s ease; -} - -@keyframes fadeIn { - from { - opacity: 0; - transform: translateY(20px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -section h2 { - font-size: 28px; - margin-bottom: 30px; - color: #667eea; - font-weight: 700; -} - -/* Hero Section */ -#hero { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; - text-align: center; - padding: 80px 40px; -} - -#hero h2 { - color: white; - font-size: 36px; - margin-bottom: 15px; -} - -#hero p { - font-size: 18px; - margin-bottom: 30px; - opacity: 0.95; -} - -/* Services Section */ -#services { - text-align: center; -} - -#services ul { - list-style: none; - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: 20px; - margin-top: 30px; -} - -#services li { - padding: 20px; - background: linear-gradient(135deg, #f5f7ff 0%, #f0f4ff 100%); - border-radius: 8px; - font-weight: 500; - color: #667eea; - transition: all 0.3s ease; - cursor: pointer; -} - -#services li:hover { - transform: translateY(-5px); - box-shadow: 0 8px 20px rgba(102, 126, 234, 0.2); -} - -/* Projects Section */ -#projects { - text-align: center; -} - -.cards { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 30px; - margin-top: 40px; -} - -.card { - background: white; - padding: 30px; - border-radius: 12px; - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); - transition: all 0.3s ease; - text-align: center; - border-top: 4px solid #667eea; -} - -.card:hover { - transform: translateY(-10px); - box-shadow: 0 16px 40px rgba(102, 126, 234, 0.2); -} - -.card h3 { - color: #667eea; - font-size: 20px; - margin-bottom: 15px; - font-weight: 700; -} - -.card p { - color: #666; - font-size: 15px; - margin-bottom: 25px; - line-height: 1.6; -} - -/* Contact Section */ -#contact { - text-align: center; -} - -#contact form { - max-width: 500px; - margin: 30px auto 0; - text-align: left; -} - -label { - display: block; - margin-bottom: 8px; - font-weight: 600; - color: #333; - font-size: 14px; -} - -input[type="text"], -input[type="email"], -textarea { - width: 100%; - padding: 12px 15px; - margin-bottom: 20px; - border: 2px solid #e0e0e0; - border-radius: 8px; - font-family: inherit; - font-size: 14px; - transition: all 0.3s ease; -} - -input[type="text"]:focus, -input[type="email"]:focus, -textarea:focus { - outline: none; - border-color: #667eea; - box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1); -} - -textarea { - resize: vertical; - min-height: 120px; -} - -/* Buttons */ -.btn { - display: inline-block; - padding: 12px 32px; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; - text-decoration: none; - border: none; - border-radius: 8px; - cursor: pointer; - font-size: 15px; - font-weight: 600; - transition: all 0.3s ease; - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); -} - -.btn:hover { - transform: translateY(-2px); - box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); -} - -.btn:active { - transform: translateY(0); -} - -button.btn { - width: 100%; - padding: 14px; - margin-top: 10px; -} - -/* Footer */ -footer { - text-align: center; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; - padding: 30px 20px; - margin-top: 60px; - font-size: 14px; -} - -body.dark-mode { - background-color: #1a1a1a; - color: #e0e0e0; -} - -body.dark-mode section { - background: #2d2d2d; - color: #e0e0e0; -} - -body.dark-mode section h2 { - color: var(--main-color); -} - -body.dark-mode .card { - background: #2d2d2d; - color: #e0e0e0; -} - -body.dark-mode input, -body.dark-mode textarea { - background: #3d3d3d; - color: #e0e0e0; - border-color: #555; -} - -.controls { - margin-top: 20px; - display: flex; - justify-content: center; - align-items: center; - gap: 20px; - flex-wrap: wrap; -} - -.btn-small { - padding: 8px 16px; - background: rgba(255, 255, 255, 0.2); - color: white; - border: 2px solid white; - border-radius: 8px; - cursor: pointer; - font-size: 14px; - font-weight: 600; - transition: all 0.3s ease; -} - -.btn-small:hover { - background: rgba(255, 255, 255, 0.3); - transform: scale(1.05); -} - -.color-picker { - display: flex; - gap: 10px; - align-items: center; -} - -.color-btn { - width: 30px; - height: 30px; - border-radius: 50%; - border: 3px solid rgba(255, 255, 255, 0.3); - cursor: pointer; - transition: all 0.3s ease; -} - -.color-btn:hover { - transform: scale(1.2); - border-color: white; -} - -.color-btn.active { - border-color: white; - box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); -} - -header { - background: linear-gradient(135deg, var(--main-color) 0%, var(--main-color-dark) 100%); -} - -section h2 { - color: var(--main-color); -} - -#hero { - background: linear-gradient(135deg, var(--main-color) 0%, var(--main-color-dark) 100%); -} - -#services li { - color: var(--main-color); -} - -.card { - border-top: 4px solid var(--main-color); -} - -.card h3 { - color: var(--main-color); -} - -.btn { - background: linear-gradient(135deg, var(--main-color) 0%, var(--main-color-dark) 100%); -} - -footer { - background: linear-gradient(135deg, var(--main-color) 0%, var(--main-color-dark) 100%); -} \ No newline at end of file