From d7c92226d248221b9089c03a938837ead16f11c4 Mon Sep 17 00:00:00 2001 From: PBT3H24ALE Date: Wed, 12 Nov 2025 18:47:23 +0700 Subject: [PATCH] Add script.js and styles.css --- style.css | 67 ------------- styles.css | 279 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 279 insertions(+), 67 deletions(-) delete mode 100644 style.css create mode 100644 styles.css diff --git a/style.css b/style.css deleted file mode 100644 index 5da03de..0000000 --- a/style.css +++ /dev/null @@ -1,67 +0,0 @@ -/* beispiel */ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - font-family: Arial, sans-serif; - line-height: 1.6; - background-color: #f4f4f4; - color: #333; - padding: 20px; -} - -header { - background-color: #4CAF50; - color: white; - padding: 20px 0; - text-align: center; -} - -nav ul { - list-style: none; - display: flex; - justify-content: center; - gap: 15px; -} - -nav a { - color: white; - text-decoration: none; - font-weight: bold; -} - -nav a:hover { - text-decoration: underline; -} - -main { - margin: 20px auto; - max-width: 800px; - background-color: white; - padding: 20px; - border-radius: 8px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -} - -button { - padding: 10px 20px; - background-color: #4CAF50; - color: white; - border: none; - border-radius: 5px; - cursor: pointer; - font-size: 16px; -} - -button:hover { - background-color: #45a049; -} - -footer { - text-align: center; - margin-top: 20px; - color: #555; -} diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..e8b8819 --- /dev/null +++ b/styles.css @@ -0,0 +1,279 @@ +/* beispiel */ +* { + 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; +}