shot1 and shot2 added
This commit is contained in:
ben7sys
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