shot1 and shot2 added
This commit is contained in:
ben7sys
291
shot-1/shot-1.html
Normal file
291
shot-1/shot-1.html
Normal file
@@ -0,0 +1,291 @@
|
|||||||
|
<!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="7SYS - Ihr Partner für professionelle IT-Dienstleistungen">
|
||||||
|
<title>7SYS - IT-Dienstleistungen</title>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/inter/3.19.3/inter.css">
|
||||||
|
<style>
|
||||||
|
/* Reset und Basisstile */
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--primary: #1a365d;
|
||||||
|
--primary-light: #2a4a7f;
|
||||||
|
--gray-light: #f5f5f5;
|
||||||
|
--gray: #666;
|
||||||
|
--white: #fff;
|
||||||
|
--max-width: 1200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: var(--gray);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Container */
|
||||||
|
.container {
|
||||||
|
max-width: var(--max-width);
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
header {
|
||||||
|
background: var(--white);
|
||||||
|
padding: 1rem 0;
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
top: 0;
|
||||||
|
z-index: 100;
|
||||||
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-content {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--primary);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hero Section */
|
||||||
|
.hero {
|
||||||
|
background: linear-gradient(rgba(26,54,93,0.9), rgba(26,54,93,0.9)),
|
||||||
|
url('/api/placeholder/1200/600');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
color: var(--white);
|
||||||
|
padding: 6rem 0;
|
||||||
|
margin-top: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero h1 {
|
||||||
|
font-size: 3rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero p {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
background: var(--white);
|
||||||
|
color: var(--primary);
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:hover {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Services Section */
|
||||||
|
.services {
|
||||||
|
padding: 6rem 0;
|
||||||
|
background: var(--gray-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.services-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
gap: 2rem;
|
||||||
|
margin-top: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card {
|
||||||
|
background: var(--white);
|
||||||
|
padding: 2rem;
|
||||||
|
border-radius: 10px;
|
||||||
|
text-align: center;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-icon {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Contact Section */
|
||||||
|
.contact {
|
||||||
|
padding: 6rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
|
gap: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-form {
|
||||||
|
display: grid;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
input, textarea {
|
||||||
|
padding: 0.8rem;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 5px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-btn {
|
||||||
|
background: var(--primary);
|
||||||
|
color: var(--white);
|
||||||
|
border: none;
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-btn:hover {
|
||||||
|
background: var(--primary-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
footer {
|
||||||
|
background: var(--primary);
|
||||||
|
color: var(--white);
|
||||||
|
padding: 2rem 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-links a {
|
||||||
|
color: var(--white);
|
||||||
|
text-decoration: none;
|
||||||
|
margin: 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Design */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.hero h1 {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero p {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.services-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="container header-content">
|
||||||
|
<a href="#" class="logo">7SYS</a>
|
||||||
|
<nav>
|
||||||
|
<a href="#contact" class="btn">Kontakt</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section class="hero">
|
||||||
|
<div class="container hero-content">
|
||||||
|
<h1>Innovative IT-Lösungen für Ihren Erfolg</h1>
|
||||||
|
<p>Wir digitalisieren Ihre Geschäftsprozesse mit zukunftsweisenden Technologien</p>
|
||||||
|
<a href="#contact" class="btn">Jetzt Beratungsgespräch vereinbaren</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="services" id="services">
|
||||||
|
<div class="container">
|
||||||
|
<h2>Unsere Dienstleistungen</h2>
|
||||||
|
<div class="services-grid">
|
||||||
|
<div class="service-card">
|
||||||
|
<img src="/api/placeholder/60/60" alt="Cloud Services" class="service-icon">
|
||||||
|
<h3>Cloud Services</h3>
|
||||||
|
<p>Sichere und skalierbare Cloud-Lösungen für Ihr Unternehmen</p>
|
||||||
|
</div>
|
||||||
|
<div class="service-card">
|
||||||
|
<img src="/api/placeholder/60/60" alt="IT-Sicherheit" class="service-icon">
|
||||||
|
<h3>IT-Sicherheit</h3>
|
||||||
|
<p>Umfassender Schutz Ihrer digitalen Infrastruktur</p>
|
||||||
|
</div>
|
||||||
|
<div class="service-card">
|
||||||
|
<img src="/api/placeholder/60/60" alt="Softwareentwicklung" class="service-icon">
|
||||||
|
<h3>Softwareentwicklung</h3>
|
||||||
|
<p>Maßgeschneiderte Softwarelösungen für Ihre Anforderungen</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="contact" id="contact">
|
||||||
|
<div class="container">
|
||||||
|
<h2>Kontakt</h2>
|
||||||
|
<div class="contact-grid">
|
||||||
|
<div class="contact-info">
|
||||||
|
<h3>So erreichen Sie uns</h3>
|
||||||
|
<p>7SYS GmbH</p>
|
||||||
|
<p>Musterstraße 123</p>
|
||||||
|
<p>12345 Musterstadt</p>
|
||||||
|
<p>Tel: +49 123 456789</p>
|
||||||
|
<p>E-Mail: info@7sys.de</p>
|
||||||
|
</div>
|
||||||
|
<form class="contact-form">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="name">Name</label>
|
||||||
|
<input type="text" id="name" name="name" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="email">E-Mail</label>
|
||||||
|
<input type="email" id="email" name="email" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="message">Nachricht</label>
|
||||||
|
<textarea id="message" name="message" rows="5" required></textarea>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="submit-btn">Nachricht senden</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="container">
|
||||||
|
<div class="footer-links">
|
||||||
|
<a href="#">Impressum</a>
|
||||||
|
<a href="#">Datenschutz</a>
|
||||||
|
</div>
|
||||||
|
<p>© 2024 7SYS GmbH. Alle Rechte vorbehalten.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
48
shot-1/shot-1.md
Normal file
48
shot-1/shot-1.md
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
Erstelle eine moderne, minimalistische One-Page Webseite als digitale Visitenkarte für das IT-Unternehmen 7SYS. Die Seite soll responsive sein und folgende Elemente enthalten:
|
||||||
|
|
||||||
|
1. Header:
|
||||||
|
- Ein schlichtes Logo mit "7SYS"
|
||||||
|
- Eine kurze Headline, die den Fokus auf IT-Dienstleistungen betont
|
||||||
|
|
||||||
|
2. Hero-Section:
|
||||||
|
- Ein professionelles Layout mit einem subtilen Technologie-bezogenen Hintergrundbild
|
||||||
|
- Ein prägnanter Slogan
|
||||||
|
- Ein "Kontakt" Call-to-Action Button
|
||||||
|
|
||||||
|
3. Hauptbereich:
|
||||||
|
- 3-4 Icons mit den wichtigsten Dienstleistungen
|
||||||
|
- Kurze, präzise Beschreibungen der Services
|
||||||
|
- Moderne Farbgebung in Blau- und Grautönen
|
||||||
|
- Ausgewogenes Verhältnis von Whitespace
|
||||||
|
|
||||||
|
4. Kontaktbereich:
|
||||||
|
- Geschäftliche Kontaktdaten
|
||||||
|
- Ein einfaches Kontaktformular
|
||||||
|
- Social Media Icons (falls gewünscht)
|
||||||
|
- Impressum-Link im Footer
|
||||||
|
|
||||||
|
Technische Anforderungen:
|
||||||
|
- Nur HTML und CSS (kein JavaScript erforderlich)
|
||||||
|
- Moderne CSS-Features wie Flexbox/Grid für das Layout
|
||||||
|
- Mobile-First Ansatz
|
||||||
|
- Optimierte Performance
|
||||||
|
- Klare Kommentierung im Code
|
||||||
|
- Semantic HTML
|
||||||
|
|
||||||
|
Design-Richtlinien:
|
||||||
|
- Farben: Hauptsächlich Blautöne (#1a365d für Primärfarbe), kombiniert mit neutralem Grau
|
||||||
|
- Typography: Sans-serif Schriftart (z.B. 'Inter' oder 'Roboto')
|
||||||
|
- Reichlich Whitespace für bessere Lesbarkeit
|
||||||
|
- Subtle Hover-Effekte für interaktive Elemente
|
||||||
|
- Maximale Breite von 1200px für den Content
|
||||||
|
|
||||||
|
Bitte erstelle den kompletten HTML und CSS Code für diese One-Page Webseite. Der Code soll sauber strukturiert und gut kommentiert sein.
|
||||||
|
|
||||||
|
Achte besonders auf:
|
||||||
|
- Schnelle Ladezeit
|
||||||
|
- Gute Lesbarkeit auf allen Geräten
|
||||||
|
- Professionelles, zeitgemäßes Design
|
||||||
|
- SEO-freundliche Struktur
|
||||||
|
- Barrierefreiheit
|
||||||
|
|
||||||
|
Bitte liefere den Code in zwei separaten Blöcken für HTML und CSS, sodass ich ihn einfach kopieren und verwenden kann.
|
||||||
105
shot-2/index.html
Normal file
105
shot-2/index.html
Normal file
@@ -0,0 +1,105 @@
|
|||||||
|
<!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="7SYS - Ihr Partner für innovative IT-Lösungen">
|
||||||
|
<title>7SYS - Innovative IT Solutions</title>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Space+Grotesk:wght@300;400;700&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="styles/main.css">
|
||||||
|
</head>
|
||||||
|
<body class="dark-theme">
|
||||||
|
<div class="stars-background"></div>
|
||||||
|
|
||||||
|
<header class="main-header">
|
||||||
|
<div class="container header-content">
|
||||||
|
<div class="logo">
|
||||||
|
<h1>7SYS</h1>
|
||||||
|
</div>
|
||||||
|
<nav>
|
||||||
|
<button id="theme-toggle" aria-label="Theme umschalten">
|
||||||
|
<span class="theme-toggle-icon"></span>
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="hero">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="hero-title">Zukunft gestalten.<br>Innovation leben.</h2>
|
||||||
|
<p class="hero-subtitle">Ihre Vision. Unsere Expertise. Gemeinsam digital erfolgreich.</p>
|
||||||
|
<a href="#contact" class="cta-button">Kontakt aufnehmen</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="services">
|
||||||
|
<div class="container">
|
||||||
|
<h2>Unsere Leistungen</h2>
|
||||||
|
<div class="services-grid">
|
||||||
|
<div class="service-card">
|
||||||
|
<div class="service-icon">
|
||||||
|
<svg viewBox="0 0 24 24" class="icon"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path></svg>
|
||||||
|
</div>
|
||||||
|
<h3>Cloud Solutions</h3>
|
||||||
|
<p>Skalierbare Cloud-Infrastrukturen für Ihr Wachstum</p>
|
||||||
|
</div>
|
||||||
|
<div class="service-card">
|
||||||
|
<div class="service-icon">
|
||||||
|
<svg viewBox="0 0 24 24" class="icon"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"></path></svg>
|
||||||
|
</div>
|
||||||
|
<h3>Cyber Security</h3>
|
||||||
|
<p>Umfassender Schutz für Ihre digitalen Assets</p>
|
||||||
|
</div>
|
||||||
|
<div class="service-card">
|
||||||
|
<div class="service-icon">
|
||||||
|
<svg viewBox="0 0 24 24" class="icon"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z"></path></svg>
|
||||||
|
</div>
|
||||||
|
<h3>AI Integration</h3>
|
||||||
|
<p>Intelligente Lösungen für die digitale Transformation</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="contact" class="contact">
|
||||||
|
<div class="container">
|
||||||
|
<h2>Kontakt</h2>
|
||||||
|
<div class="contact-content">
|
||||||
|
<form class="contact-form" action="#" method="POST">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="name">Name</label>
|
||||||
|
<input type="text" id="name" name="name" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="email">E-Mail</label>
|
||||||
|
<input type="email" id="email" name="email" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="message">Nachricht</label>
|
||||||
|
<textarea id="message" name="message" required></textarea>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="submit-button">Senden</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="social-links">
|
||||||
|
<a href="#" aria-label="LinkedIn"><svg class="social-icon" viewBox="0 0 24 24"><path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z"></path></svg></a>
|
||||||
|
<a href="#" aria-label="Twitter"><svg class="social-icon" viewBox="0 0 24 24"><path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"></path></svg></a>
|
||||||
|
<a href="#" aria-label="GitHub"><svg class="social-icon" viewBox="0 0 24 24"><path d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2z"></path></svg></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="main-footer">
|
||||||
|
<div class="container">
|
||||||
|
<p>© 2024 7SYS. Alle Rechte vorbehalten.</p>
|
||||||
|
<a href="#" class="footer-link">Impressum</a>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="js/theme.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
57
shot-2/js/theme.js
Normal file
57
shot-2/js/theme.js
Normal file
@@ -0,0 +1,57 @@
|
|||||||
|
// Theme switching functionality
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const themeToggle = document.getElementById('theme-toggle');
|
||||||
|
const body = document.body;
|
||||||
|
const DARK_THEME = 'dark-theme';
|
||||||
|
const LIGHT_THEME = 'light-theme';
|
||||||
|
const THEME_KEY = '7sys-theme-preference';
|
||||||
|
|
||||||
|
// Initialize stars background
|
||||||
|
createStars();
|
||||||
|
|
||||||
|
// Load saved theme preference
|
||||||
|
const savedTheme = localStorage.getItem(THEME_KEY);
|
||||||
|
if (savedTheme) {
|
||||||
|
body.className = savedTheme;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Theme toggle handler
|
||||||
|
themeToggle.addEventListener('click', () => {
|
||||||
|
const newTheme = body.classList.contains(DARK_THEME) ? LIGHT_THEME : DARK_THEME;
|
||||||
|
body.className = newTheme;
|
||||||
|
localStorage.setItem(THEME_KEY, newTheme);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Create animated stars background
|
||||||
|
function createStars() {
|
||||||
|
const starsContainer = document.querySelector('.stars-background');
|
||||||
|
const STARS_COUNT = 50;
|
||||||
|
|
||||||
|
for (let i = 0; i < STARS_COUNT; i++) {
|
||||||
|
const star = document.createElement('div');
|
||||||
|
star.className = 'star';
|
||||||
|
star.style.cssText = `
|
||||||
|
position: absolute;
|
||||||
|
width: ${Math.random() * 3}px;
|
||||||
|
height: ${Math.random() * 3}px;
|
||||||
|
background: ${body.classList.contains(DARK_THEME) ? '#fff' : '#1a365d'};
|
||||||
|
left: ${Math.random() * 100}%;
|
||||||
|
top: ${Math.random() * 100}%;
|
||||||
|
opacity: ${Math.random()};
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: twinkle ${2 + Math.random() * 3}s infinite ease-in-out;
|
||||||
|
`;
|
||||||
|
starsContainer.appendChild(star);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add twinkling animation to stylesheet
|
||||||
|
const style = document.createElement('style');
|
||||||
|
style.textContent = `
|
||||||
|
@keyframes twinkle {
|
||||||
|
0%, 100% { opacity: 0.2; }
|
||||||
|
50% { opacity: 1; }
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
document.head.appendChild(style);
|
||||||
|
});
|
||||||
95
shot-2/shot-2.md
Normal file
95
shot-2/shot-2.md
Normal file
@@ -0,0 +1,95 @@
|
|||||||
|
ich möchte ein space-theme black-grey, und die möglichkeit für den user ein dark & white theme+
|
||||||
|
|
||||||
|
# SHOT-2
|
||||||
|
Erstelle eine moderne, futuristische One-Page Webseite als digitale Visitenkarte für das IT-Unternehmen 7SYS mit Space-Theme und Theme-Switcher. Die Seite soll responsive sein und folgende Elemente enthalten:
|
||||||
|
|
||||||
|
1. Theme-Switcher:
|
||||||
|
- Toggle-Button für Dark/Light Mode
|
||||||
|
- Smooth Transition zwischen den Themes
|
||||||
|
- Persistentes Theme (speichern in localStorage)
|
||||||
|
|
||||||
|
2. Header:
|
||||||
|
- Futuristisches Logo "7SYS"
|
||||||
|
- Ein Theme-Toggle-Button in der Navigation
|
||||||
|
- Subtile Weltraum-Animationen (z.B. floating particles oder twinkling stars im Hintergrund)
|
||||||
|
|
||||||
|
3. Hero-Section:
|
||||||
|
- Space-inspiriertes Layout mit subtilen Sternen/Galaxien im Hintergrund
|
||||||
|
- Futuristischer Slogan
|
||||||
|
- Leuchtender "Kontakt" Call-to-Action Button im Neon-Stil
|
||||||
|
|
||||||
|
4. Hauptbereich:
|
||||||
|
- 3-4 Icons mit Space/Tech-Design für die wichtigsten Dienstleistungen
|
||||||
|
- Holographischer oder Neon-Effekt für Hover-States
|
||||||
|
- Moderne Grid-Layout mit schwebenden Elementen
|
||||||
|
|
||||||
|
5. Kontaktbereich:
|
||||||
|
- Futuristisches Kontaktformular
|
||||||
|
- Pulsierende Social Media Icons
|
||||||
|
- Minimalistischer Footer mit Impressum-Link
|
||||||
|
|
||||||
|
Technische Anforderungen:
|
||||||
|
- HTML, CSS und minimales JavaScript für Theme-Switching
|
||||||
|
- CSS Custom Properties für Theme-Farben
|
||||||
|
- Moderne CSS-Features (Flexbox/Grid, Animations)
|
||||||
|
- Mobile-First Ansatz
|
||||||
|
- Optimierte Performance
|
||||||
|
- Semantic HTML
|
||||||
|
|
||||||
|
Design-Richtlinien:
|
||||||
|
|
||||||
|
Dark Theme (Standard):
|
||||||
|
- Hauptfarbe: Tiefschwarz (#030303)
|
||||||
|
- Akzentfarbe: Neon Blau (#00f3ff)
|
||||||
|
- Text: Hellgrau bis Weiß (#f0f0f0)
|
||||||
|
- Subtile Blautöne für Tiefenwirkung
|
||||||
|
- Sternenfeld-Hintergrund
|
||||||
|
|
||||||
|
Light Theme:
|
||||||
|
- Hauptfarbe: Reines Weiß (#ffffff)
|
||||||
|
- Akzentfarbe: Space Blau (#1a365d)
|
||||||
|
- Text: Dunkelgrau (#333333)
|
||||||
|
- Subtile graue Abstufungen
|
||||||
|
- Dezenter Grid-Hintergrund
|
||||||
|
|
||||||
|
Allgemein:
|
||||||
|
- Futuristische Sans-serif Schriftart (z.B. 'Space Grotesk' oder 'Orbitron' für Überschriften)
|
||||||
|
- Großzügiger Whitespace
|
||||||
|
- Smooth Transitions (0.3s) für alle Hover und Theme-Wechsel
|
||||||
|
- Subtile Parallax-Effekte
|
||||||
|
- Glassmorphism-Elemente
|
||||||
|
|
||||||
|
JavaScript-Funktionen:
|
||||||
|
```javascript
|
||||||
|
// Theme-Switching Logik
|
||||||
|
// Local Storage Verwaltung
|
||||||
|
// Optionale Partikel-Animation
|
||||||
|
```
|
||||||
|
|
||||||
|
CSS-Variablen Struktur:
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
/* Light Theme Variablen */
|
||||||
|
--light-bg: #ffffff;
|
||||||
|
--light-text: #333333;
|
||||||
|
--light-accent: #1a365d;
|
||||||
|
|
||||||
|
/* Dark Theme Variablen */
|
||||||
|
--dark-bg: #030303;
|
||||||
|
--dark-text: #f0f0f0;
|
||||||
|
--dark-accent: #00f3ff;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Bitte erstelle den kompletten Code in drei separaten Blöcken:
|
||||||
|
1. HTML
|
||||||
|
2. CSS (mit Theme-Variationen)
|
||||||
|
3. JavaScript (Theme-Switching)
|
||||||
|
|
||||||
|
Besondere Anforderungen:
|
||||||
|
- Smooth Theme Transitions
|
||||||
|
- Zugängliche Kontrasteverhältnisse in beiden Themes
|
||||||
|
- Performante Animationen
|
||||||
|
- Responsive Design für alle Bildschirmgrößen
|
||||||
|
- SEO-optimierte Struktur
|
||||||
|
- Barrierefreiheit (ARIA-Labels für Theme-Switcher)
|
||||||
453
shot-2/styles/main.css
Normal file
453
shot-2/styles/main.css
Normal file
@@ -0,0 +1,453 @@
|
|||||||
|
:root {
|
||||||
|
/* Light Theme */
|
||||||
|
--light-bg: #ffffff;
|
||||||
|
--light-surface: #f8f9fa;
|
||||||
|
--light-text: #333333;
|
||||||
|
--light-text-secondary: #666666;
|
||||||
|
--light-accent: #1a365d;
|
||||||
|
--light-accent-hover: #2a466d;
|
||||||
|
--light-border: #e0e0e0;
|
||||||
|
|
||||||
|
/* Dark Theme */
|
||||||
|
--dark-bg: #030303;
|
||||||
|
--dark-surface: #121212;
|
||||||
|
--dark-text: #f0f0f0;
|
||||||
|
--dark-text-secondary: #b0b0b0;
|
||||||
|
--dark-accent: #00f3ff;
|
||||||
|
--dark-accent-hover: #33f5ff;
|
||||||
|
--dark-border: #2a2a2a;
|
||||||
|
|
||||||
|
/* Common */
|
||||||
|
--transition-speed: 0.3s;
|
||||||
|
--container-width: 1200px;
|
||||||
|
--space-xs: 0.5rem;
|
||||||
|
--space-sm: 1rem;
|
||||||
|
--space-md: 2rem;
|
||||||
|
--space-lg: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Base Styles */
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Space Grotesk', sans-serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
transition: background-color var(--transition-speed),
|
||||||
|
color var(--transition-speed);
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Theme Styles */
|
||||||
|
body.light-theme {
|
||||||
|
background-color: var(--light-bg);
|
||||||
|
color: var(--light-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme {
|
||||||
|
background-color: var(--dark-bg);
|
||||||
|
color: var(--dark-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Container */
|
||||||
|
.container {
|
||||||
|
max-width: var(--container-width);
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 var(--space-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
.main-header {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
-webkit-backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-content {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: var(--space-sm) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo h1 {
|
||||||
|
font-family: 'Orbitron', sans-serif;
|
||||||
|
font-size: 2rem;
|
||||||
|
background: linear-gradient(45deg, var(--dark-accent), #fff);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Theme Toggle */
|
||||||
|
#theme-toggle {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: relative;
|
||||||
|
transition: transform var(--transition-speed);
|
||||||
|
}
|
||||||
|
|
||||||
|
#theme-toggle:hover {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle-icon {
|
||||||
|
display: block;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.light-theme .theme-toggle-icon {
|
||||||
|
background: #ffd700;
|
||||||
|
box-shadow: 0 0 15px #ffd700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-theme .theme-toggle-icon {
|
||||||
|
background: #c6c6c6;
|
||||||
|
box-shadow: 0 0 15px #c6c6c6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hero Section */
|
||||||
|
.hero {
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
padding: var(--space-lg) 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-title {
|
||||||
|
font-family: 'Orbitron', sans-serif;
|
||||||
|
font-size: clamp(2rem, 5vw, 4rem);
|
||||||
|
margin-bottom: var(--space-md);
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-subtitle {
|
||||||
|
font-size: clamp(1.2rem, 2vw, 1.5rem);
|
||||||
|
margin-bottom: var(--space-lg);
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Stars Background */
|
||||||
|
.stars-background {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-theme .stars-background {
|
||||||
|
background: radial-gradient(circle at center,
|
||||||
|
rgba(0, 243, 255, 0.1) 0%,
|
||||||
|
rgba(3, 3, 3, 1) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.light-theme .stars-background {
|
||||||
|
background: radial-gradient(circle at center,
|
||||||
|
rgba(26, 54, 93, 0.1) 0%,
|
||||||
|
rgba(255, 255, 255, 1) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* CTA Button */
|
||||||
|
.cta-button {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
font-family: 'Orbitron', sans-serif;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 30px;
|
||||||
|
transition: all var(--transition-speed);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-theme .cta-button {
|
||||||
|
background: var(--dark-accent);
|
||||||
|
color: var(--dark-bg);
|
||||||
|
box-shadow: 0 0 20px var(--dark-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.light-theme .cta-button {
|
||||||
|
background: var(--light-accent);
|
||||||
|
color: var(--light-bg);
|
||||||
|
box-shadow: 0 0 20px var(--light-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-button:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Services Section */
|
||||||
|
.services {
|
||||||
|
padding: var(--space-lg) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.services h2 {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: var(--space-lg);
|
||||||
|
font-family: 'Orbitron', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.services-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||||
|
gap: var(--space-md);
|
||||||
|
padding: var(--space-md) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card {
|
||||||
|
padding: var(--space-md);
|
||||||
|
border-radius: 15px;
|
||||||
|
transition: transform var(--transition-speed);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
-webkit-backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-theme .service-card {
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
border: 1px solid var(--dark-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.light-theme .service-card {
|
||||||
|
background: rgba(26, 54, 93, 0.05);
|
||||||
|
border: 1px solid var(--light-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card:hover {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-icon {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
margin-bottom: var(--space-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-icon svg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
fill: none;
|
||||||
|
stroke: currentColor;
|
||||||
|
stroke-width: 2;
|
||||||
|
stroke-linecap: round;
|
||||||
|
stroke-linejoin: round;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-theme .service-icon svg {
|
||||||
|
stroke: var(--dark-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.light-theme .service-icon svg {
|
||||||
|
stroke: var(--light-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Contact Section */
|
||||||
|
.contact {
|
||||||
|
padding: var(--space-lg) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact h2 {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: var(--space-lg);
|
||||||
|
font-family: 'Orbitron', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-form {
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: var(--space-md);
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-theme .contact-form {
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
border: 1px solid var(--dark-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.light-theme .contact-form {
|
||||||
|
background: rgba(26, 54, 93, 0.05);
|
||||||
|
border: 1px solid var(--light-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: var(--space-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: var(--space-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input,
|
||||||
|
.form-group textarea {
|
||||||
|
width: 100%;
|
||||||
|
padding: var(--space-sm);
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid;
|
||||||
|
background: transparent;
|
||||||
|
color: inherit;
|
||||||
|
font-family: inherit;
|
||||||
|
transition: border-color var(--transition-speed);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-theme .form-group input,
|
||||||
|
.dark-theme .form-group textarea {
|
||||||
|
border-color: var(--dark-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.light-theme .form-group input,
|
||||||
|
.light-theme .form-group textarea {
|
||||||
|
border-color: var(--light-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input:focus,
|
||||||
|
.form-group textarea:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group textarea {
|
||||||
|
min-height: 150px;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-button {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding: var(--space-sm);
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-family: 'Orbitron', sans-serif;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all var(--transition-speed);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-theme .submit-button {
|
||||||
|
background: var(--dark-accent);
|
||||||
|
color: var(--dark-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.light-theme .submit-button {
|
||||||
|
background: var(--light-accent);
|
||||||
|
color: var(--light-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-button:hover {
|
||||||
|
transform: scale(1.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Social Links */
|
||||||
|
.social-links {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: var(--space-md);
|
||||||
|
margin-top: var(--space-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icon {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
transition: transform var(--transition-speed);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-theme .social-icon {
|
||||||
|
fill: var(--dark-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.light-theme .social-icon {
|
||||||
|
fill: var(--light-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icon:hover {
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
.main-footer {
|
||||||
|
padding: var(--space-md) 0;
|
||||||
|
text-align: center;
|
||||||
|
border-top: 1px solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-theme .main-footer {
|
||||||
|
border-color: var(--dark-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.light-theme .main-footer {
|
||||||
|
border-color: var(--light-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-link {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
margin-left: var(--space-sm);
|
||||||
|
transition: opacity var(--transition-speed);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-link:hover {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Design */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
:root {
|
||||||
|
--space-lg: 3rem;
|
||||||
|
--space-md: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-title {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-subtitle {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.services-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
:root {
|
||||||
|
--space-lg: 2rem;
|
||||||
|
--space-md: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
padding: 0 var(--space-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-title {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-links {
|
||||||
|
gap: var(--space-sm);
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user