Erstelle modernen Onepager für Versicherungsfachmann Andreas Guttenberger
- Responsive HTML/CSS Onepager ohne Framework - Hero-Section mit Portrait und AXA-Logo - Service-Karten und Kontaktbereich - Vollständige Favicon-Suite für alle Geräte - Web App Manifest für PWA-Support
This commit is contained in:
BIN
android-chrome-192x192.png
Normal file
BIN
android-chrome-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
BIN
android-chrome-512x512.png
Normal file
BIN
android-chrome-512x512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
apple-touch-icon.png
Normal file
BIN
apple-touch-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
BIN
favicon-16x16.png
Normal file
BIN
favicon-16x16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 506 B |
BIN
favicon-32x32.png
Normal file
BIN
favicon-32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
favicon.ico
Normal file
BIN
favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
5
favicon.svg
Normal file
5
favicon.svg
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||||
|
<rect width="100" height="100" fill="#213683"/>
|
||||||
|
<path d="M62 49.4L100 0h-5.6L57 49.4h5.8" fill="#da2825"/>
|
||||||
|
<path d="M76.4 71c1.2 3.4 2.2 7 3.4 10.4.8 2.1 2 6.4 3.3 8.2h-9.4c0-2.7-1-5.2-1.8-7.7-.6-1.8-1-3.6-1.7-5.4l-.2-.7-.2-.6-.2-.4-.1-.5-.1-.3v-.1h-15l-2.4 3.3v.1l.1.3.2.4.2.6.2.7c.5 1.4.9 2.7 1.3 4.1 1 3.1 1 3.3 2.7 6.3h-9c-.2-1.9-.6-3.1-1.1-4.9-1.5 1.6-2.6 2.9-3.5 4.9h-7c-.4-2.1-.5-3-1.3-5.1-1.6 2.1-2.2 2.6-3.3 5.1h-7c3.1-2.8 5.6-6.4 8.2-9.7l-8.2-11.8h-14.8v.1l-.3.3-.2.3-.3.4-.3.5-.4.6-.5.5c-1.3 1.8-2.7 3.5-4 5.3-1.9 2.5-4.2 5-5.6 7.8H0v-1l.2-.2h.1v-.1l.2-.2.1-.2c.4-.4.7-.9 1.1-1.3 1.1-1.3 2.1-2.6 3.1-4 2.9-3.7 5.8-7.4 8.6-11.2 3.9-5.5 9.4-11.2 12-17.3h7.7c.2 4.1 1.3 6.2 2.4 10 .7 2.1 1.3 4.2 1.9 6.2l.2.7.3 1.2.2.5.1.4.1.4.1.3v.1l2.6-3.3c-1.3-5.8-3.3-11.8-6-16.1h9c-.1 2 .7 3.4 1.1 5.3.5 1.7.9 3.5 1.5 5.2 1.1-1.5 2.4-3 3.6-4.6 1.3-1.9 3.4-3.5 3.6-5.9h7.5c-4.4 4.1-8.6 10.4-12.5 15.1.4 1.3.8 2.7 1.2 4.1 2.4-3.1 4.8-6.2 7.1-9.3 2.2-3.1 5.2-6.4 6.7-9.9h7.3v.3l.1.9.2.9.1.7zm-11.1-11.5c-1.9 3.4-4.9 6.9-7.4 10h10c-.5-1.6-1-3.2-1.5-4.8l-.2-.8-.2-.7-.2-.6-.1-.4-.2-1.1v-1.5l-.1-.1v-.1zm-38.3 0c-1 1.9-2.5 3.8-3.9 5.5-.7 1-.9 1.5-2.3 2.9l-.3.5-.3.4-.3.3-.2.2-.2.2v.1h10c-.5-1.5-1-3.3-1.5-4.8l-.2-.8-.2-.7-.2-.6-.1-.4-.2-1.1v-1l-.1-.6v-.1zm15 23.3l2.7-3.8c-.7-1.6-1.2-3.3-1.8-5l-2.7 3.5 1.8 5.3" fill="#fff"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
18
generate-favicons.js
Normal file
18
generate-favicons.js
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
const fs = require('fs');
|
||||||
|
const https = require('https');
|
||||||
|
|
||||||
|
// Einfaches Script um SVG in verschiedene PNG-Größen zu konvertieren
|
||||||
|
// Nutzt einen Online-Service (RealFaviconGenerator API Alternative)
|
||||||
|
|
||||||
|
const sizes = [16, 32, 180, 192, 512];
|
||||||
|
const svgContent = fs.readFileSync('favicon.svg', 'utf8');
|
||||||
|
|
||||||
|
console.log('Favicons müssen manuell erstellt werden.');
|
||||||
|
console.log('Optionen:');
|
||||||
|
console.log('1. Online: https://realfavicongenerator.net/');
|
||||||
|
console.log('2. Online: https://favicon.io/');
|
||||||
|
console.log('3. Lokal mit ImageMagick installieren:');
|
||||||
|
console.log(' sudo apt install imagemagick');
|
||||||
|
console.log(' oder: sudo dnf install ImageMagick');
|
||||||
|
console.log('');
|
||||||
|
console.log('SVG-Favicon wurde bereits erstellt und wird von modernen Browsern unterstützt!');
|
||||||
BIN
img/Andreas_Guttenberger.jpg
Normal file
BIN
img/Andreas_Guttenberger.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
25
img/axa_logo.svg
Normal file
25
img/axa_logo.svg
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
version="1.0"
|
||||||
|
width="881.82532"
|
||||||
|
height="883.32587"
|
||||||
|
id="svg2"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs4" />
|
||||||
|
<path
|
||||||
|
d="M -7.9492187e-7,1.8244629e-6 V 883.32586 H 881.82527 V 1.8244629e-6 Z"
|
||||||
|
id="path2886"
|
||||||
|
style="fill:#213683;fill-opacity:1;fill-rule:nonzero;stroke:none" />
|
||||||
|
<path
|
||||||
|
d="M 546.70167,436.1609 881.82527,1.8244629e-6 h -49.5182 L 495.68287,436.1609 h 51.0188"
|
||||||
|
id="path2898"
|
||||||
|
style="fill:#da2825;fill-opacity:1;fill-rule:evenodd;stroke:none" />
|
||||||
|
<path
|
||||||
|
d="m 673.74857,627.23139 c 10.8039,30.09443 19.6489,61.58938 30.011,92.03395 6.7275,18.73191 17.2564,56.91266 29.5109,72.02657 h -83.0306 c 0.075,-23.74209 -9.2868,-45.55847 -15.5057,-68.0251 -5.3937,-15.6391 -9.3118,-31.65334 -15.0056,-47.51752 l -1.5005,-6.00222 -1.5006,-5.00184 -1.5005,-4.00148 -1.0004,-4.00148 -1.0004,-2.50092 -0.5001,-1.50055 v -0.50019 h -132.0488 l -21.0077,29.51089 0.5002,0.50018 0.5002,2.50093 1.5005,4.00147 1.5006,5.00185 2.0007,6.00221 c 3.9681,11.9294 7.5194,24.25061 11.5043,36.01329 8.6531,27.67687 8.7615,29.20244 23.5086,55.52048 h -79.5293 c -1.7006,-16.78119 -5.0769,-26.97662 -10.0037,-43.01587 -13.1882,14.13021 -22.6,25.20096 -30.5113,43.01587 h -62.02284 c -3.25954,-18.3401 -4.70173,-26.9266 -11.50424,-45.01661 -13.73007,18.75692 -19.19042,22.82509 -29.51089,45.01661 h -61.52269 c 27.24338,-24.88418 49.44323,-56.80429 72.02657,-86.03174 L 272.60056,652.24061 H 141.55221 v 0.50019 l -3.0011,3.00111 -2.00074,3.0011 -2.50092,3.50129 -3.00111,4.00148 -3.50129,5.00185 -4.00148,4.50166 c -11.25415,15.8225 -23.79211,30.69465 -35.01292,46.51716 -16.84788,22.04146 -36.713542,44.50808 -49.518262,69.02546 H -7.9492187e-7 V 766.28268 L 1.5005482,764.78213 h 0.50018 v -0.50019 l 2.00074,-2.00073 1.00037,-1.50056 c 3.49296,-3.60133 5.8855098,-8.05297 9.5035098,-11.50424 9.36178,-11.51258 18.440131,-23.25024 27.510151,-35.01292 25.842861,-32.67038 51.068831,-65.68256 76.028041,-99.03653 34.57942,-48.45121 82.57213,-98.41964 106.03912,-152.55628 h 67.52491 c 1.42552,35.81321 11.80435,54.25335 21.00775,88.03248 5.78546,18.31509 11.21247,36.73855 17.00627,55.02029 l 2.00074,6.00222 3.0011,11.00406 1.50056,4.00147 1.00037,4.00148 1.00037,3.00111 1.00037,2.50092 0.50018,1.50055 v 0.50019 l 23.00849,-29.0107 C 349.55394,576.2876 334.86519,505.70322 311.61495,462.67068 h 79.02912 c -0.8253,17.67319 6.0773,30.33619 10.0037,47.01735 4.6767,15.25563 8.1697,30.9114 13.0048,46.01697 10.1288,-13.47997 21.2829,-26.9266 31.5116,-40.51494 11.5877,-16.49776 30.3863,-31.04479 32.0119,-52.51938 h 66.0243 c -38.6226,35.99662 -75.6696,91.95893 -110.0406,133.54927 3.8264,11.88772 6.7859,24.14224 10.5039,36.01328 21.1661,-27.2934 42.3323,-54.73686 63.0232,-82.53044 19.4239,-26.9266 45.967,-56.57087 59.0218,-87.03211 h 64.5238 v 3.00111 l 0.5002,7.50277 1.5005,8.00295 1.0004,6.00221 z m -98.0362,-101.53746 c -16.8229,30.13612 -43.5744,60.47231 -65.024,88.03248 h 88.0325 c -4.2766,-13.9885 -9.045,-28.4605 -13.505,-42.51569 l -2.0007,-7.00258 -2.0008,-6.00221 -1.5005,-5.00185 -1.0004,-4.00148 -1.5005,-10.00369 v -13.00479 l -0.5002,-1.00037 v -0.50019 z m -338.12473,0 c -9.12837,16.36437 -22.24987,33.94586 -34.01255,48.5179 -6.32733,8.72822 -13.48831,16.91457 -20.00738,25.50941 l -3.0011,4.00148 -2.50093,3.50129 -2.50092,2.50092 -1.50055,2.00074 -1.50056,1.50055 v 0.50019 h 88.03248 c -4.6934,-13.58835 -9.15338,-28.70226 -13.50498,-42.51569 l -2.00074,-7.00258 -2.00074,-6.00221 -1.50055,-5.00185 -1.00037,-4.00148 -1.50056,-10.00369 -0.50018,-8.50313 v -5.50203 l -0.50019,-0.50019 z m 132.5489,205.57584 24.00883,-33.51237 c -5.8855,-14.41365 -10.7873,-29.18576 -15.5057,-44.01623 l -23.50867,30.51125 15.00554,47.01735"
|
||||||
|
id="path2902"
|
||||||
|
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.9 KiB |
144
index.html
Normal file
144
index.html
Normal file
@@ -0,0 +1,144 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="description" content="Andreas Guttenberger - Ihr Versicherungsfachmann (IHK) in Kallmünz. Persönliche Beratung für alle Versicherungsfragen.">
|
||||||
|
<title>Andreas Guttenberger - Versicherungsfachmann (IHK)</title>
|
||||||
|
|
||||||
|
<!-- Favicons -->
|
||||||
|
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
|
||||||
|
<link rel="manifest" href="site.webmanifest">
|
||||||
|
<meta name="theme-color" content="#213683">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<header class="hero">
|
||||||
|
<div class="container">
|
||||||
|
<div class="hero-content">
|
||||||
|
<div class="hero-image">
|
||||||
|
<img src="img/Andreas_Guttenberger.jpg" alt="Andreas Guttenberger" class="portrait">
|
||||||
|
</div>
|
||||||
|
<div class="hero-text">
|
||||||
|
<img src="img/axa_logo.svg" alt="AXA" class="logo">
|
||||||
|
<h1>Andreas Guttenberger</h1>
|
||||||
|
<p class="subtitle">Versicherungsfachmann (IHK)</p>
|
||||||
|
<p class="tagline">Ihre persönliche Beratung für alle Versicherungsfragen</p>
|
||||||
|
<div class="cta-buttons">
|
||||||
|
<a href="#kontakt" class="btn btn-primary">Kontakt aufnehmen</a>
|
||||||
|
<a href="tel:+4915174483560" class="btn btn-secondary">Jetzt anrufen</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Services Section -->
|
||||||
|
<section class="services">
|
||||||
|
<div class="container">
|
||||||
|
<h2>Meine Leistungen</h2>
|
||||||
|
<div class="services-grid">
|
||||||
|
<div class="service-card">
|
||||||
|
<div class="icon">🏠</div>
|
||||||
|
<h3>Privatkunden</h3>
|
||||||
|
<p>Individuelle Absicherung für Sie und Ihre Familie - von Kranken- bis Lebensversicherung</p>
|
||||||
|
</div>
|
||||||
|
<div class="service-card">
|
||||||
|
<div class="icon">🏢</div>
|
||||||
|
<h3>Gewerbekunden</h3>
|
||||||
|
<p>Maßgeschneiderte Lösungen für Ihr Unternehmen und Ihre betrieblichen Risiken</p>
|
||||||
|
</div>
|
||||||
|
<div class="service-card">
|
||||||
|
<div class="icon">💼</div>
|
||||||
|
<h3>Altersvorsorge</h3>
|
||||||
|
<p>Sichere Planung Ihrer finanziellen Zukunft mit passenden Vorsorgelösungen</p>
|
||||||
|
</div>
|
||||||
|
<div class="service-card">
|
||||||
|
<div class="icon">🤝</div>
|
||||||
|
<h3>Beratung vor Ort</h3>
|
||||||
|
<p>Persönliche Betreuung in Kallmünz und Umgebung - kompetent und zuverlässig</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- About Section -->
|
||||||
|
<section class="about">
|
||||||
|
<div class="container">
|
||||||
|
<h2>Warum ich?</h2>
|
||||||
|
<div class="about-content">
|
||||||
|
<div class="about-item">
|
||||||
|
<h3>✓ Kompetenz</h3>
|
||||||
|
<p>Als geprüfter Versicherungsfachmann (IHK) verfüge ich über fundiertes Fachwissen</p>
|
||||||
|
</div>
|
||||||
|
<div class="about-item">
|
||||||
|
<h3>✓ Nähe</h3>
|
||||||
|
<p>Persönlicher Ansprechpartner in Ihrer Region mit schneller Erreichbarkeit</p>
|
||||||
|
</div>
|
||||||
|
<div class="about-item">
|
||||||
|
<h3>✓ AXA Partner</h3>
|
||||||
|
<p>Starke Produkte eines der führenden Versicherungsunternehmen weltweit</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Contact Section -->
|
||||||
|
<section id="kontakt" class="contact">
|
||||||
|
<div class="container">
|
||||||
|
<h2>Kontakt</h2>
|
||||||
|
<div class="contact-grid">
|
||||||
|
<div class="contact-info">
|
||||||
|
<h3>Andreas Guttenberger</h3>
|
||||||
|
<p class="contact-title">Versicherungsfachmann (IHK)</p>
|
||||||
|
|
||||||
|
<div class="contact-item">
|
||||||
|
<strong>📍 Adresse</strong>
|
||||||
|
<p>Am Fallgatter 6<br>93183 Kallmünz / Traidendorf</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="contact-item">
|
||||||
|
<strong>📧 E-Mail</strong>
|
||||||
|
<p><a href="mailto:andreas.guttenberger@axa.de">andreas.guttenberger@axa.de</a></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="contact-item">
|
||||||
|
<strong>📞 Telefon</strong>
|
||||||
|
<p>
|
||||||
|
Festnetz: <a href="tel:+4994717184">+49 9471 7184</a><br>
|
||||||
|
Mobil: <a href="tel:+4915174483560">+49 151 74483560</a><br>
|
||||||
|
Fax: +49 9471 8795
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="contact-cta">
|
||||||
|
<h3>Vereinbaren Sie einen Termin</h3>
|
||||||
|
<p>Gerne berate ich Sie persönlich zu Ihren Versicherungsfragen. Kontaktieren Sie mich für ein unverbindliches Gespräch.</p>
|
||||||
|
<div class="contact-buttons">
|
||||||
|
<a href="mailto:andreas.guttenberger@axa.de" class="btn btn-primary">E-Mail schreiben</a>
|
||||||
|
<a href="tel:+4915174483560" class="btn btn-secondary">Anrufen</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="container">
|
||||||
|
<p>© 2026 Andreas Guttenberger - Versicherungsfachmann (IHK)</p>
|
||||||
|
<p class="legal">
|
||||||
|
<a href="https://www.axa-betreuer.de/martin_goetz/ueber-uns/filialen-und-team#overlayNotification-XTOOZB" target="_blank" rel="noopener">Informationen gemäß Versicherungsvermittlungsverordnung</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
40
script.js
Normal file
40
script.js
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
// Smooth scrolling for anchor links
|
||||||
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||||
|
anchor.addEventListener('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
const target = document.querySelector(this.getAttribute('href'));
|
||||||
|
if (target) {
|
||||||
|
target.scrollIntoView({
|
||||||
|
behavior: 'smooth',
|
||||||
|
block: 'start'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add animation on scroll
|
||||||
|
const observerOptions = {
|
||||||
|
threshold: 0.1,
|
||||||
|
rootMargin: '0px 0px -50px 0px'
|
||||||
|
};
|
||||||
|
|
||||||
|
const observer = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
entry.target.style.opacity = '1';
|
||||||
|
entry.target.style.transform = 'translateY(0)';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, observerOptions);
|
||||||
|
|
||||||
|
// Observe service cards and about items
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const animatedElements = document.querySelectorAll('.service-card, .about-item');
|
||||||
|
|
||||||
|
animatedElements.forEach(el => {
|
||||||
|
el.style.opacity = '0';
|
||||||
|
el.style.transform = 'translateY(20px)';
|
||||||
|
el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
|
||||||
|
observer.observe(el);
|
||||||
|
});
|
||||||
|
});
|
||||||
20
site.webmanifest
Normal file
20
site.webmanifest
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"name": "Andreas Guttenberger",
|
||||||
|
"short_name": "A. Guttenberger",
|
||||||
|
"description": "Versicherungsfachmann (IHK) - AXA",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "/android-chrome-192x192.png",
|
||||||
|
"sizes": "192x192",
|
||||||
|
"type": "image/png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "/android-chrome-512x512.png",
|
||||||
|
"sizes": "512x512",
|
||||||
|
"type": "image/png"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"theme_color": "#213683",
|
||||||
|
"background_color": "#213683",
|
||||||
|
"display": "standalone"
|
||||||
|
}
|
||||||
447
style.css
Normal file
447
style.css
Normal file
@@ -0,0 +1,447 @@
|
|||||||
|
/* Reset & Base Styles */
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--primary-color: #00008f;
|
||||||
|
--secondary-color: #0047bb;
|
||||||
|
--accent-color: #ff1721;
|
||||||
|
--text-dark: #1a1a1a;
|
||||||
|
--text-light: #555;
|
||||||
|
--bg-light: #f8f9fa;
|
||||||
|
--white: #ffffff;
|
||||||
|
--shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||||
|
--shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: var(--text-dark);
|
||||||
|
background-color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hero Section */
|
||||||
|
.hero {
|
||||||
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||||||
|
color: var(--white);
|
||||||
|
padding: 80px 20px;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 60px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-image {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portrait {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 400px;
|
||||||
|
border-radius: 20px;
|
||||||
|
box-shadow: var(--shadow-lg);
|
||||||
|
border: 8px solid rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-text {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
height: 60px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
filter: brightness(0) invert(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero h1 {
|
||||||
|
font-size: 3rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 300;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tagline {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
opacity: 0.85;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 15px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 15px 35px;
|
||||||
|
border-radius: 50px;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1rem;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background-color: var(--white);
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
background-color: transparent;
|
||||||
|
border-color: var(--white);
|
||||||
|
color: var(--white);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: var(--shadow-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--white);
|
||||||
|
border: 2px solid var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover {
|
||||||
|
background-color: var(--white);
|
||||||
|
color: var(--primary-color);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Services Section */
|
||||||
|
.services {
|
||||||
|
padding: 80px 20px;
|
||||||
|
background-color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.services h2 {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 2.5rem;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.services-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
gap: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card {
|
||||||
|
background: var(--white);
|
||||||
|
padding: 40px 30px;
|
||||||
|
border-radius: 15px;
|
||||||
|
text-align: center;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
border: 2px solid #e0e0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card:hover {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
box-shadow: var(--shadow-lg);
|
||||||
|
border-color: var(--secondary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card .icon {
|
||||||
|
font-size: 3rem;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card h3 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card p {
|
||||||
|
color: var(--text-light);
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* About Section */
|
||||||
|
.about {
|
||||||
|
padding: 80px 20px;
|
||||||
|
background-color: var(--bg-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.about h2 {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 2.5rem;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-content {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
|
gap: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-item {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-item h3 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-item p {
|
||||||
|
color: var(--text-light);
|
||||||
|
font-size: 1.1rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Contact Section */
|
||||||
|
.contact {
|
||||||
|
padding: 80px 20px;
|
||||||
|
background-color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact h2 {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 2.5rem;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 60px;
|
||||||
|
max-width: 1000px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-info h3 {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
color: var(--primary-color);
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-title {
|
||||||
|
color: var(--text-light);
|
||||||
|
font-size: 1.1rem;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-item {
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-item strong {
|
||||||
|
display: block;
|
||||||
|
color: var(--primary-color);
|
||||||
|
font-size: 1.1rem;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-item p {
|
||||||
|
color: var(--text-light);
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-item a {
|
||||||
|
color: var(--secondary-color);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-item a:hover {
|
||||||
|
color: var(--primary-color);
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-cta {
|
||||||
|
background: var(--bg-light);
|
||||||
|
padding: 40px;
|
||||||
|
border-radius: 15px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-cta h3 {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
color: var(--primary-color);
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-cta p {
|
||||||
|
color: var(--text-light);
|
||||||
|
font-size: 1.1rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-buttons {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-buttons .btn {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-buttons .btn-primary {
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-buttons .btn-primary:hover {
|
||||||
|
background-color: var(--secondary-color);
|
||||||
|
border-color: var(--secondary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-buttons .btn-secondary {
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--primary-color);
|
||||||
|
border: 2px solid var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-buttons .btn-secondary:hover {
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
.footer {
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
color: var(--white);
|
||||||
|
padding: 40px 20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer p {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .legal {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer a {
|
||||||
|
color: var(--white);
|
||||||
|
text-decoration: underline;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer a:hover {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Design */
|
||||||
|
@media (max-width: 968px) {
|
||||||
|
.hero-content {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 40px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-text {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero h1 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-buttons {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.hero {
|
||||||
|
padding: 60px 20px;
|
||||||
|
min-height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero h1 {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tagline {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.services,
|
||||||
|
.about,
|
||||||
|
.contact {
|
||||||
|
padding: 60px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.services h2,
|
||||||
|
.about h2,
|
||||||
|
.contact h2 {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.services-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-content {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.btn {
|
||||||
|
padding: 12px 25px;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-buttons {
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-buttons .btn {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portrait {
|
||||||
|
max-width: 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user