intitial
This commit is contained in:
Clemens Hering
107
valtrix-web/.gitea/workflows/deploy.yaml
Normal file
107
valtrix-web/.gitea/workflows/deploy.yaml
Normal file
@@ -0,0 +1,107 @@
|
|||||||
|
name: Build and Deploy Container
|
||||||
|
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches:
|
||||||
|
- main
|
||||||
|
- develop
|
||||||
|
|
||||||
|
env: # global: unkritische, strukturgebende Variablen
|
||||||
|
TARGET_HOST: host.containers.internal
|
||||||
|
TARGET_USER: traefik
|
||||||
|
APP_DIR: /home/traefik/valtrix-web
|
||||||
|
CONTAINER_NAME: valtrix-web
|
||||||
|
QUADLET_FILE: ./deploy/valtrix-web.container
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
build_and_deploy:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
env: # Job-spezifisch: Secrets und sensible Werte
|
||||||
|
SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
|
||||||
|
SSH_KNOWN_HOSTS: ${{ secrets.SSH_KNOWN_HOSTS }}
|
||||||
|
|
||||||
|
steps:
|
||||||
|
- name: Pre-clean Git global config (avoid https→ssh rewrite)
|
||||||
|
shell: bash
|
||||||
|
run: |
|
||||||
|
set -euo pipefail
|
||||||
|
echo "Cleaning up global git config"
|
||||||
|
git config --global --unset-all core.sshCommand || true
|
||||||
|
for key in $(git config --global --get-regexp '^url\\..*\\.insteadof$' 2>/dev/null | awk '{print $1}'); do
|
||||||
|
if echo "$key" | grep -qi 'gitea\\.smb-corp\\.de'; then
|
||||||
|
git config --global --unset-all "$key" || true
|
||||||
|
fi
|
||||||
|
done
|
||||||
|
|
||||||
|
- name: Setup SSH for git/scp
|
||||||
|
shell: bash
|
||||||
|
run: |
|
||||||
|
install -m 700 -d ~/.ssh
|
||||||
|
printf "%s\n" "$SSH_PRIVATE_KEY" > ~/.ssh/id_ed25519
|
||||||
|
chmod 600 ~/.ssh/id_ed25519
|
||||||
|
printf "%s\n" "$SSH_KNOWN_HOSTS" > ~/.ssh/known_hosts || true
|
||||||
|
chmod 644 ~/.ssh/known_hosts
|
||||||
|
# Ensure host keys exist
|
||||||
|
(ssh-keygen -F "$TARGET_HOST" >/dev/null || ssh-keyscan -H "$TARGET_HOST" >> ~/.ssh/known_hosts) || true
|
||||||
|
(ssh-keygen -F gitea.smb-corp.de >/dev/null || ssh-keyscan -H gitea.smb-corp.de >> ~/.ssh/known_hosts) || true
|
||||||
|
|
||||||
|
- name: Checkout Repository
|
||||||
|
uses: actions/checkout@v4
|
||||||
|
|
||||||
|
- name: Copy repository to target host (atomic replace)
|
||||||
|
shell: bash
|
||||||
|
run: |
|
||||||
|
set -euo pipefail
|
||||||
|
TMP_DIR="$APP_DIR.tmp.$(date +%s)"
|
||||||
|
ssh -i ~/.ssh/id_ed25519 $TARGET_USER@$TARGET_HOST "mkdir -p '$TMP_DIR'"
|
||||||
|
scp -r -i ~/.ssh/id_ed25519 ./* $TARGET_USER@$TARGET_HOST:$TMP_DIR/
|
||||||
|
ssh -i ~/.ssh/id_ed25519 $TARGET_USER@$TARGET_HOST "
|
||||||
|
set -euo pipefail;
|
||||||
|
if [ -d '$APP_DIR' ]; then rm -rf '$APP_DIR'; fi;
|
||||||
|
mv '$TMP_DIR' '$APP_DIR'
|
||||||
|
"
|
||||||
|
|
||||||
|
- name: Build container on target host
|
||||||
|
shell: bash
|
||||||
|
run: |
|
||||||
|
ssh -i ~/.ssh/id_ed25519 $TARGET_USER@$TARGET_HOST "
|
||||||
|
set -euo pipefail
|
||||||
|
export APP_DIR='$APP_DIR' CONTAINER_NAME='$CONTAINER_NAME'
|
||||||
|
cd \"\$APP_DIR\"
|
||||||
|
echo 'Building container: '\$CONTAINER_NAME 'in' \$APP_DIR
|
||||||
|
podman build -t \$CONTAINER_NAME:latest .
|
||||||
|
"
|
||||||
|
|
||||||
|
- name: Backup existing Quadlet file
|
||||||
|
shell: bash
|
||||||
|
run: |
|
||||||
|
ssh -i ~/.ssh/id_ed25519 $TARGET_USER@$TARGET_HOST "
|
||||||
|
set -euo pipefail
|
||||||
|
export CONTAINER_NAME='$CONTAINER_NAME'
|
||||||
|
QFILE=~/.config/containers/systemd/\$CONTAINER_NAME.container
|
||||||
|
test -f \"\$QFILE\" && cp \"\$QFILE\" \"\$QFILE.bak\" || true
|
||||||
|
"
|
||||||
|
|
||||||
|
- name: Replace Quadlet file and restart service
|
||||||
|
shell: bash
|
||||||
|
run: |
|
||||||
|
scp -i ~/.ssh/id_ed25519 "$QUADLET_FILE" $TARGET_USER@$TARGET_HOST:~/.config/containers/systemd/
|
||||||
|
ssh -i ~/.ssh/id_ed25519 $TARGET_USER@$TARGET_HOST "
|
||||||
|
set -euo pipefail
|
||||||
|
export CONTAINER_NAME='$CONTAINER_NAME'
|
||||||
|
systemctl --user daemon-reload
|
||||||
|
systemctl --user restart \$CONTAINER_NAME.service
|
||||||
|
echo 'Service restarted: '\$CONTAINER_NAME
|
||||||
|
"
|
||||||
|
|
||||||
|
- name: Verify deployment
|
||||||
|
shell: bash
|
||||||
|
run: |
|
||||||
|
ssh -i ~/.ssh/id_ed25519 $TARGET_USER@$TARGET_HOST "
|
||||||
|
set -euo pipefail
|
||||||
|
export CONTAINER_NAME='$CONTAINER_NAME'
|
||||||
|
echo 'Running containers:'
|
||||||
|
podman ps --filter \"name=\$CONTAINER_NAME\" --format \"table {{.Names}}\t{{.Image}}\t{{.Status}}\"
|
||||||
|
echo '--- Last 20 log lines ---'
|
||||||
|
podman logs \$CONTAINER_NAME --tail 20 || echo 'No logs available'
|
||||||
|
"
|
||||||
20
valtrix-web/Caddyfile
Normal file
20
valtrix-web/Caddyfile
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
:80 {
|
||||||
|
# Set the root directory for the static site
|
||||||
|
root * /usr/share/caddy
|
||||||
|
|
||||||
|
# Enable file server
|
||||||
|
file_server
|
||||||
|
|
||||||
|
# Enable compression (gzip/zstd)
|
||||||
|
encode gzip zstd
|
||||||
|
|
||||||
|
# Security headers (optional but recommended)
|
||||||
|
header {
|
||||||
|
# Enable HSTS
|
||||||
|
Strict-Transport-Security "max-age=31536000;"
|
||||||
|
# Disable MIME sniffing
|
||||||
|
X-Content-Type-Options "nosniff"
|
||||||
|
# XSS protection
|
||||||
|
X-XSS-Protection "1; mode=block"
|
||||||
|
}
|
||||||
|
}
|
||||||
34
valtrix-web/Dockerfile
Normal file
34
valtrix-web/Dockerfile
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
# Stage 1: Builder
|
||||||
|
# We use a lightweight Wolfi image to gather the files.
|
||||||
|
# In a real build process, this might involve 'npm run build', but for static files,
|
||||||
|
# we just copy them. Using a stage here allows for future extensibility.
|
||||||
|
FROM cgr.dev/chainguard/wolfi-base AS builder
|
||||||
|
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
# Copy all files to the builder stage
|
||||||
|
COPY . .
|
||||||
|
|
||||||
|
# Stage 2: Final
|
||||||
|
# Use the official Wolfi base image and install Caddy manually
|
||||||
|
# since the pre-built Caddy image requires authentication or is restricted.
|
||||||
|
FROM cgr.dev/chainguard/wolfi-base:latest
|
||||||
|
|
||||||
|
# Install Caddy
|
||||||
|
RUN apk update && apk add caddy
|
||||||
|
|
||||||
|
# Copy the Caddyfile
|
||||||
|
COPY Caddyfile /etc/caddy/Caddyfile
|
||||||
|
|
||||||
|
# Copy the static site content from the builder stage
|
||||||
|
COPY --from=builder /app /usr/share/caddy
|
||||||
|
|
||||||
|
# Expose ports
|
||||||
|
# 80 for HTTP
|
||||||
|
# 443 for HTTPS (and HTTP/3 over UDP)
|
||||||
|
EXPOSE 80
|
||||||
|
EXPOSE 443
|
||||||
|
EXPOSE 443/udp
|
||||||
|
|
||||||
|
# Run Caddy
|
||||||
|
CMD ["caddy", "run", "--config", "/etc/caddy/Caddyfile", "--adapter", "caddyfile"]
|
||||||
96
valtrix-web/datenschutz-en.html
Normal file
96
valtrix-web/datenschutz-en.html
Normal file
@@ -0,0 +1,96 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Privacy Policy - Valtrix</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header id="header">
|
||||||
|
<div class="container header-content">
|
||||||
|
<a href="index-en.html" class="logo">Valtrix<span class="dot">.</span></a>
|
||||||
|
<nav>
|
||||||
|
<ul class="nav-links">
|
||||||
|
<li><a href="index-en.html#about">About Us</a></li>
|
||||||
|
<li><a href="index-en.html#services">Services</a></li>
|
||||||
|
<li><a href="index-en.html#references">References</a></li>
|
||||||
|
<li><a href="index-en.html#contact">Contact</a></li>
|
||||||
|
<li><a href="datenschutz.html" style="opacity: 0.7;">DE</a></li>
|
||||||
|
</ul>
|
||||||
|
<button class="mobile-toggle" aria-label="Open Menu">☰</button>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="container legal-content">
|
||||||
|
<h1>Privacy Policy</h1>
|
||||||
|
|
||||||
|
<h2>1. Data Protection at a Glance</h2>
|
||||||
|
<h3>General Information</h3>
|
||||||
|
<p>The following notes provide a simple overview of what happens to your personal data when you visit this
|
||||||
|
website. Personal data is all data with which you can be personally identified.</p>
|
||||||
|
|
||||||
|
<h2>2. Hosting</h2>
|
||||||
|
<p>We host the content of our website with the following provider:</p>
|
||||||
|
<h3>External Hosting</h3>
|
||||||
|
<p>This website is hosted externally. The personal data collected on this website is stored on the hoster's
|
||||||
|
servers. This may include IP addresses, contact requests, meta and communication data, contract data,
|
||||||
|
contact details, names, website access, and other data generated via a website.</p>
|
||||||
|
|
||||||
|
<h2>3. General Notes and Mandatory Information</h2>
|
||||||
|
<h3>Data Protection</h3>
|
||||||
|
<p>The operators of these pages take the protection of your personal data very seriously. We treat your
|
||||||
|
personal data confidentially and in accordance with the statutory data protection regulations and this
|
||||||
|
privacy policy.</p>
|
||||||
|
|
||||||
|
<h3>Note on the Responsible Body</h3>
|
||||||
|
<p>The responsible body for data processing on this website is:</p>
|
||||||
|
<p>Valtrix GmbH<br>
|
||||||
|
Musterstraße 123<br>
|
||||||
|
10115 Berlin</p>
|
||||||
|
|
||||||
|
<p>Email: info@valtrix.systems</p>
|
||||||
|
|
||||||
|
<h2>4. Data Collection on this Website</h2>
|
||||||
|
<h3>Cookies</h3>
|
||||||
|
<p>Our website does not use cookies.</p>
|
||||||
|
|
||||||
|
<h3>Server Log Files</h3>
|
||||||
|
<p>The provider of the pages automatically collects and stores information in so-called server log files,
|
||||||
|
which your browser automatically transmits to us. These are:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Browser type and browser version</li>
|
||||||
|
<li>Operating system used</li>
|
||||||
|
<li>Referrer URL</li>
|
||||||
|
<li>Hostname of the accessing computer</li>
|
||||||
|
<li>Time of the server request</li>
|
||||||
|
<li>IP address</li>
|
||||||
|
</ul>
|
||||||
|
<p>This data is not merged with other data sources.</p>
|
||||||
|
|
||||||
|
<h3>Contact Inquiries</h3>
|
||||||
|
<p>If you contact us by email, your inquiry including all resulting personal data (name, inquiry) will be
|
||||||
|
stored and processed by us for the purpose of processing your request. We do not pass on this data
|
||||||
|
without your consent.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="container footer-content">
|
||||||
|
<p class="copyright">© 2025 Valtrix. All rights reserved.</p>
|
||||||
|
<div class="footer-links">
|
||||||
|
<a href="impressum-en.html">Imprint</a>
|
||||||
|
<a href="datenschutz-en.html">Privacy Policy</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
96
valtrix-web/datenschutz.html
Normal file
96
valtrix-web/datenschutz.html
Normal file
@@ -0,0 +1,96 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Datenschutzerklärung - Valtrix</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header id="header">
|
||||||
|
<div class="container header-content">
|
||||||
|
<a href="index.html" class="logo">Valtrix<span class="dot">.</span></a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="container legal-content">
|
||||||
|
<h1>Datenschutzerklärung</h1>
|
||||||
|
|
||||||
|
<h2>1. Datenschutz auf einen Blick</h2>
|
||||||
|
<h3>Allgemeine Hinweise</h3>
|
||||||
|
<p>Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit Ihren personenbezogenen Daten
|
||||||
|
passiert, wenn Sie diese Website besuchen. Personenbezogene Daten sind alle Daten, mit denen Sie
|
||||||
|
persönlich identifiziert werden können.</p>
|
||||||
|
|
||||||
|
<h3>Datenerfassung auf dieser Website</h3>
|
||||||
|
<p><strong>Wer ist verantwortlich für die Datenerfassung auf dieser Website?</strong></p>
|
||||||
|
<p>Die Datenverarbeitung auf dieser Website erfolgt durch den Websitebetreiber. Dessen Kontaktdaten können
|
||||||
|
Sie dem Impressum dieser Website entnehmen.</p>
|
||||||
|
|
||||||
|
<p><strong>Wie erfassen wir Ihre Daten?</strong></p>
|
||||||
|
<p>Ihre Daten werden zum einen dadurch erhoben, dass Sie uns diese mitteilen. Hierbei kann es sich z. B. um
|
||||||
|
Daten handeln, die Sie in ein Kontaktformular eingeben oder per E-Mail senden.</p>
|
||||||
|
<p>Andere Daten werden automatisch oder nach Ihrer Einwilligung beim Besuch der Website durch unsere
|
||||||
|
IT-Systeme erfasst. Das sind vor allem technische Daten (z. B. Internetbrowser, Betriebssystem oder
|
||||||
|
Uhrzeit des Seitenaufrufs). Die Erfassung dieser Daten erfolgt automatisch, sobald Sie diese Website
|
||||||
|
betreten.</p>
|
||||||
|
|
||||||
|
<h2>2. Hosting</h2>
|
||||||
|
<p>Wir hosten die Inhalte unserer Website bei einem externen Anbieter (Host). Die personenbezogenen Daten,
|
||||||
|
die auf dieser Website erfasst werden, werden auf den Servern des Hosts gespeichert. Hierbei kann es
|
||||||
|
sich v. a. um IP-Adressen, Kontaktanfragen, Meta- und Kommunikationsdaten, Vertragsdaten, Kontaktdaten,
|
||||||
|
Namen, Websitezugriffe und sonstige Daten, die über eine Website generiert werden, handeln.</p>
|
||||||
|
|
||||||
|
<h2>3. Allgemeine Hinweise und Pflichtinformationen</h2>
|
||||||
|
<h3>Datenschutz</h3>
|
||||||
|
<p>Die Betreiber dieser Seiten nehmen den Schutz Ihrer persönlichen Daten sehr ernst. Wir behandeln Ihre
|
||||||
|
personenbezogenen Daten vertraulich und entsprechend den gesetzlichen Datenschutzvorschriften sowie
|
||||||
|
dieser Datenschutzerklärung.</p>
|
||||||
|
|
||||||
|
<h3>Hinweis zur verantwortlichen Stelle</h3>
|
||||||
|
<p>Die verantwortliche Stelle für die Datenverarbeitung auf dieser Website ist:</p>
|
||||||
|
<p>Valtrix GmbH<br>
|
||||||
|
Musterstraße 123<br>
|
||||||
|
10115 Berlin</p>
|
||||||
|
|
||||||
|
<p>E-Mail: info@valtrix.systems</p>
|
||||||
|
|
||||||
|
<h2>4. Datenerfassung auf dieser Website</h2>
|
||||||
|
<h3>Cookies</h3>
|
||||||
|
<p>Unsere Website verwendet keine Cookies.</p>
|
||||||
|
|
||||||
|
<h3>Server-Log-Dateien</h3>
|
||||||
|
<p>Der Provider der Seiten erhebt und speichert automatisch Informationen in so genannten
|
||||||
|
Server-Log-Dateien, die Ihr Browser automatisch an uns übermittelt. Dies sind:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Browsertyp und Browserversion</li>
|
||||||
|
<li>Verwendetes Betriebssystem</li>
|
||||||
|
<li>Referrer URL</li>
|
||||||
|
<li>Hostname des zugreifenden Rechners</li>
|
||||||
|
<li>Uhrzeit der Serveranfrage</li>
|
||||||
|
<li>IP-Adresse</li>
|
||||||
|
</ul>
|
||||||
|
<p>Eine Zusammenführung dieser Daten mit anderen Datenquellen wird nicht vorgenommen.</p>
|
||||||
|
|
||||||
|
<h3>Kontaktanfragen</h3>
|
||||||
|
<p>Wenn Sie uns per E-Mail kontaktieren, wird Ihre Anfrage inklusive aller daraus hervorgehenden
|
||||||
|
personenbezogenen Daten (Name, Anfrage) zum Zwecke der Bearbeitung Ihres Anliegens bei uns gespeichert
|
||||||
|
und verarbeitet. Diese Daten geben wir nicht ohne Ihre Einwilligung weiter.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="container footer-content">
|
||||||
|
<p class="copyright">© 2025 Valtrix. Alle Rechte vorbehalten.</p>
|
||||||
|
<div class="footer-links">
|
||||||
|
<a href="impressum.html">Impressum</a>
|
||||||
|
<a href="datenschutz.html">Datenschutz</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
35
valtrix-web/deploy/valtrix-web.contaier
Normal file
35
valtrix-web/deploy/valtrix-web.contaier
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
[Unit]
|
||||||
|
Description=Valtrix Web
|
||||||
|
|
||||||
|
[Container]
|
||||||
|
Image=localhost/valtrix-web
|
||||||
|
ContainerName=valtrix-web
|
||||||
|
Network=edge
|
||||||
|
AutoUpdate=registry
|
||||||
|
Environment=TZ=Europe/Berlin
|
||||||
|
|
||||||
|
#Traefik Labels
|
||||||
|
Label="traefik.enable=true"
|
||||||
|
Label="traefik.http.routers.valtrix-web.rule=Host(`web.valtrix.systems`)"
|
||||||
|
Label="traefik.http.services.valtrix-web.loadbalancer.server.port=3010"
|
||||||
|
Label="traefik.http.routers.valtrix-web.entrypoints=websecure"
|
||||||
|
Label="traefik.http.routers.valtrix-web.tls=true"
|
||||||
|
Label="traefik.http.routers.valtrix-web.tls.certresolver=le"
|
||||||
|
|
||||||
|
Label="traefik.http.routers.valtrix-web-http.rule=Host(`web.valtrix.systems`)"
|
||||||
|
Label="traefik.http.routers.valtrix-web-http.entrypoints=web"
|
||||||
|
Label="traefik.http.routers.valtrix-web-http.middlewares=valtrix-web-redirect"
|
||||||
|
Label="traefik.http.middlewares.valtrix-web-redirect.redirectscheme.scheme=https"
|
||||||
|
Label="traefik.http.middlewares.valtrix-web-redirect.redirectscheme.permanent=true"
|
||||||
|
Label="traefik.http.routers.valtrix-web.middlewares=secure-headers@file"
|
||||||
|
|
||||||
|
Label="traefik.http.middlewares.valtrix-web-sec.headers.customResponseHeaders.Content-Security-Policy=default-src 'self'; base-uri 'self'; object-src 'none'; frame-ancestors 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; script-src 'self'; script-src-elem 'self' 'unsafe-inline'; connect-src 'self' wss: https:; font-src 'self' data:; worker-src 'self' blob:;"
|
||||||
|
Label="traefik.http.routers.valtrix-web.middlewares=valtrix-web-sec@docker"
|
||||||
|
Label="traefik.http.routers.valtrix-web.middlewares=auth"
|
||||||
|
Label="traefik.http.middlewares.auth.basicauth.users=smb:$apr1$H6uskkkW$IgXLP6ewTrSuBkTrqE8wj/"
|
||||||
|
|
||||||
|
[Service]
|
||||||
|
Restart=on-failure
|
||||||
|
|
||||||
|
[Install]
|
||||||
|
WantedBy=default.target
|
||||||
73
valtrix-web/impressum-en.html
Normal file
73
valtrix-web/impressum-en.html
Normal file
@@ -0,0 +1,73 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Imprint - Valtrix</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header id="header">
|
||||||
|
<div class="container header-content">
|
||||||
|
<a href="index-en.html" class="logo">Valtrix<span class="dot">.</span></a>
|
||||||
|
<nav>
|
||||||
|
<ul class="nav-links">
|
||||||
|
<li><a href="index-en.html#about">About Us</a></li>
|
||||||
|
<li><a href="index-en.html#services">Services</a></li>
|
||||||
|
<li><a href="index-en.html#references">References</a></li>
|
||||||
|
<li><a href="index-en.html#contact">Contact</a></li>
|
||||||
|
<li><a href="impressum.html" style="opacity: 0.7;">DE</a></li>
|
||||||
|
</ul>
|
||||||
|
<button class="mobile-toggle" aria-label="Open Menu">☰</button>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="container legal-content">
|
||||||
|
<h1>Imprint</h1>
|
||||||
|
|
||||||
|
<h3>Information according to § 5 TMG</h3>
|
||||||
|
<p>Valtrix GmbH<br>
|
||||||
|
Musterstraße 123<br>
|
||||||
|
10115 Berlin</p>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
<h3>Represented by</h3>
|
||||||
|
<p>Max Mustermann</p>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
<h3>Contact</h3>
|
||||||
|
<p>Phone: +49 (0) 123 456789<br>
|
||||||
|
Email: info@valtrix.systems</p>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
<h3>Register Entry</h3>
|
||||||
|
<p>Entry in the Commercial Register.<br>
|
||||||
|
Register Court: District Court Berlin-Charlottenburg<br>
|
||||||
|
Register Number: HRB 123456</p>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
<h3>VAT ID</h3>
|
||||||
|
<p>Sales tax identification number according to § 27 a Sales Tax Law:<br>
|
||||||
|
DE123456789</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="container footer-content">
|
||||||
|
<p class="copyright">© 2025 Valtrix. All rights reserved.</p>
|
||||||
|
<div class="footer-links">
|
||||||
|
<a href="index-en.html">Home</a>
|
||||||
|
<a href="datenschutz-en.html">Privacy Policy</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
59
valtrix-web/impressum.html
Normal file
59
valtrix-web/impressum.html
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Impressum - Valtrix</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header id="header">
|
||||||
|
<div class="container header-content">
|
||||||
|
<a href="index.html" class="logo">Valtrix<span class="dot">.</span></a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="container legal-content">
|
||||||
|
<h1>Impressum</h1>
|
||||||
|
<br>
|
||||||
|
<h3>Angaben gemäß § 5 TMG</h3>
|
||||||
|
<p>Valtrix GmbH<br>
|
||||||
|
Musterstraße 123<br>
|
||||||
|
10115 Berlin</p>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
<h3>Kontakt</h3>
|
||||||
|
<p>Telefon: +49 (0) 123 456789<br>
|
||||||
|
E-Mail: info@valtrix.systems</p>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
<h3>Registereintrag</h3>
|
||||||
|
<p>Eintragung im Handelsregister.<br>
|
||||||
|
Registergericht: Amtsgericht Berlin-Charlottenburg<br>
|
||||||
|
Registernummer: HRB 123456</p>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
<h3>Umsatzsteuer-ID</h3>
|
||||||
|
<p>Umsatzsteuer-Identifikationsnummer gemäß § 27 a Umsatzsteuergesetz:<br>
|
||||||
|
DE123456789</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="container footer-content">
|
||||||
|
<p class="copyright">© 2025 Valtrix. Alle Rechte vorbehalten.</p>
|
||||||
|
<div class="footer-links">
|
||||||
|
<ul>
|
||||||
|
<li><a href="index.html#contact">Kontakt</a></li>
|
||||||
|
<li><a href="datenschutz.html">Datenschutz</a></li>
|
||||||
|
<li><a href="impressum-en.html" style="opacity: 0.7;">EN</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
146
valtrix-web/index-en.html
Normal file
146
valtrix-web/index-en.html
Normal file
@@ -0,0 +1,146 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Valtrix - Security, AI & Cloud Solutions</title>
|
||||||
|
<meta name="description"
|
||||||
|
content="Valtrix offers cutting-edge solutions in IT Security, Artificial Intelligence, and Cloud Computing.">
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- Header -->
|
||||||
|
<header id="header">
|
||||||
|
<div class="container header-content">
|
||||||
|
<a href="index-en.html" class="logo">Valtrix<span class="dot">.</span></a>
|
||||||
|
<nav>
|
||||||
|
<ul class="nav-links">
|
||||||
|
<li><a href="#about">About Us</a></li>
|
||||||
|
<li><a href="#services">Services</a></li>
|
||||||
|
<li><a href="#references">References</a></li>
|
||||||
|
<li><a href="#contact">Contact</a></li>
|
||||||
|
<li><a href="index.html" style="opacity: 0.7;">DE</a></li>
|
||||||
|
</ul>
|
||||||
|
<button class="mobile-toggle" aria-label="Open Menu">☰</button>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<section id="hero">
|
||||||
|
<div class="container hero-content">
|
||||||
|
<h1>Security for the <br><span class="highlight">Digital Future</span></h1>
|
||||||
|
<p>We combine Security, AI, and Cloud into robust solutions for your business.</p>
|
||||||
|
<div class="hero-btns">
|
||||||
|
<a href="#contact" class="btn btn-primary">Get in Touch</a>
|
||||||
|
<a href="#services" class="btn btn-outline">Learn More</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-bg"></div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- About Section -->
|
||||||
|
<section id="about" class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-title">
|
||||||
|
<span>Who We Are</span>
|
||||||
|
<h2>Innovation Meets Security</h2>
|
||||||
|
</div>
|
||||||
|
<div class="about-grid">
|
||||||
|
<div class="about-text">
|
||||||
|
<p>Valtrix stands for technological excellence. In an increasingly complex digital world, we provide
|
||||||
|
the protection and infrastructure you need to grow.</p>
|
||||||
|
<p>Our team of experts combines deep cybersecurity knowledge with state-of-the-art AI approaches and
|
||||||
|
scalable cloud architectures.</p>
|
||||||
|
</div>
|
||||||
|
<div class="about-visual">
|
||||||
|
<!-- Abstract visual placeholder -->
|
||||||
|
<div class="visual-box"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Services Section -->
|
||||||
|
<section id="services" class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-title">
|
||||||
|
<span>Our Services</span>
|
||||||
|
<h2>Holistic IT Solutions</h2>
|
||||||
|
</div>
|
||||||
|
<div class="services-grid">
|
||||||
|
<div class="service-card">
|
||||||
|
<div class="icon">🛡️</div>
|
||||||
|
<h3>Security</h3>
|
||||||
|
<p>Proactive protection for your data and infrastructure. Penetration Testing, Audits, and
|
||||||
|
Secure-by-Design Architecture.</p>
|
||||||
|
</div>
|
||||||
|
<div class="service-card">
|
||||||
|
<div class="icon">🤖</div>
|
||||||
|
<h3>Artificial Intelligence</h3>
|
||||||
|
<p>Tailored AI models and automation solutions that make your processes more efficient.</p>
|
||||||
|
</div>
|
||||||
|
<div class="service-card">
|
||||||
|
<div class="icon">☁️</div>
|
||||||
|
<h3>Cloud Computing</h3>
|
||||||
|
<p>Scalable and secure cloud migrations, management, and optimization for AWS, Azure, and Google
|
||||||
|
Cloud.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- References Section -->
|
||||||
|
<section id="references" class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-title">
|
||||||
|
<span>References</span>
|
||||||
|
<h2>Trust Through Performance</h2>
|
||||||
|
</div>
|
||||||
|
<div class="references-grid">
|
||||||
|
<!-- Placeholders for logos/testimonials -->
|
||||||
|
<div class="ref-item">TechCorp Solutions</div>
|
||||||
|
<div class="ref-item">Global Finance AG</div>
|
||||||
|
<div class="ref-item">SecureNet Systems</div>
|
||||||
|
<div class="ref-item">Future AI Lab</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Contact Section -->
|
||||||
|
<section id="contact" class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-title">
|
||||||
|
<span>Contact</span>
|
||||||
|
<h2>Start Your Project</h2>
|
||||||
|
</div>
|
||||||
|
<div class="contact-wrapper">
|
||||||
|
<div class="contact-info">
|
||||||
|
<h3>Let's Talk</h3>
|
||||||
|
<p>Ready for the next step? Send us an email or give us a call.</p>
|
||||||
|
<a href="mailto:info@valtrix.systems" class="contact-link">info@valtrix.systems</a>
|
||||||
|
<p class="address">Musterstraße 123<br>10115 Berlin<br>Germany</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer>
|
||||||
|
<div class="container footer-content">
|
||||||
|
<div class="footer-logo">Valtrix.</div>
|
||||||
|
<div class="footer-links">
|
||||||
|
<a href="impressum-en.html">Imprint</a>
|
||||||
|
<a href="datenschutz-en.html">Privacy Policy</a>
|
||||||
|
</div>
|
||||||
|
<p class="copyright">© 2025 Valtrix. All rights reserved.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
147
valtrix-web/index.html
Normal file
147
valtrix-web/index.html
Normal file
@@ -0,0 +1,147 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Valtrix - Security, AI & Cloud Solutions</title>
|
||||||
|
<meta name="description"
|
||||||
|
content="Valtrix bietet modernste Lösungen in den Bereichen IT-Sicherheit, Künstliche Intelligenz und Cloud Computing.">
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- Header -->
|
||||||
|
<header id="header">
|
||||||
|
<div class="container header-content">
|
||||||
|
<a href="#" class="logo">Valtrix<span class="dot">.</span></a>
|
||||||
|
<nav>
|
||||||
|
<ul class="nav-links">
|
||||||
|
<li><a href="#about">Über uns</a></li>
|
||||||
|
<li><a href="#services">Leistungen</a></li>
|
||||||
|
<li><a href="#references">Referenzen</a></li>
|
||||||
|
<li><a href="#contact">Kontakt</a></li>
|
||||||
|
<li><a href="index-en.html" style="opacity: 0.7;">EN</a></li>
|
||||||
|
</ul>
|
||||||
|
<button class="mobile-toggle" aria-label="Menü öffnen">☰</button>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<section id="hero">
|
||||||
|
<div class="container hero-content">
|
||||||
|
<h1>Sicherheit für die <br><span class="highlight">Digitale Zukunft</span></h1>
|
||||||
|
<p>Wir verbinden Security, AI und Cloud zu robusten Lösungen für Ihr Unternehmen.</p>
|
||||||
|
<div class="hero-btns">
|
||||||
|
<a href="#contact" class="btn btn-primary">Kontakt aufnehmen</a>
|
||||||
|
<a href="#services" class="btn btn-outline">Mehr erfahren</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-bg"></div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- About Section -->
|
||||||
|
<section id="about" class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-title">
|
||||||
|
<span>Wer wir sind</span>
|
||||||
|
<h2>Innovation trifft Sicherheit</h2>
|
||||||
|
</div>
|
||||||
|
<div class="about-grid">
|
||||||
|
<div class="about-text">
|
||||||
|
<p>Valtrix steht für technologische Exzellenz. In einer immer komplexer werdenden digitalen Welt
|
||||||
|
bieten wir Ihnen den Schutz und die Infrastruktur, die Sie benötigen, um zu wachsen.</p>
|
||||||
|
<p>Unser Team aus Experten vereint tiefgehendes Wissen in Cybersecurity mit modernsten KI-Ansätzen
|
||||||
|
und skalierbaren Cloud-Architekturen.</p>
|
||||||
|
</div>
|
||||||
|
<div class="about-visual">
|
||||||
|
<!-- Abstract visual placeholder -->
|
||||||
|
<div class="visual-box"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Services Section -->
|
||||||
|
<section id="services" class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-title">
|
||||||
|
<span>Unsere Leistungen</span>
|
||||||
|
<h2>Ganzheitliche IT-Lösungen</h2>
|
||||||
|
</div>
|
||||||
|
<div class="services-grid">
|
||||||
|
<div class="service-card">
|
||||||
|
<div class="icon">🛡️</div>
|
||||||
|
<h3>Security</h3>
|
||||||
|
<p>Proaktiver Schutz für Ihre Daten und Infrastruktur. Penetration Testing, Audits und
|
||||||
|
Secure-by-Design Architektur.</p>
|
||||||
|
</div>
|
||||||
|
<div class="service-card">
|
||||||
|
<div class="icon">🤖</div>
|
||||||
|
<h3>Artificial Intelligence</h3>
|
||||||
|
<p>Maßgeschneiderte KI-Modelle und Automatisierungslösungen, die Ihre Prozesse effizienter machen.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="service-card">
|
||||||
|
<div class="icon">☁️</div>
|
||||||
|
<h3>Cloud Computing</h3>
|
||||||
|
<p>Skalierbare und sichere Cloud-Migrationen, Management und Optimierung für AWS, Azure und Google
|
||||||
|
Cloud.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- References Section -->
|
||||||
|
<section id="references" class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-title">
|
||||||
|
<span>Referenzen</span>
|
||||||
|
<h2>Vertrauen durch Leistung</h2>
|
||||||
|
</div>
|
||||||
|
<div class="references-grid">
|
||||||
|
<!-- Placeholders for logos/testimonials -->
|
||||||
|
<div class="ref-item">TechCorp Solutions</div>
|
||||||
|
<div class="ref-item">Global Finance AG</div>
|
||||||
|
<div class="ref-item">SecureNet Systems</div>
|
||||||
|
<div class="ref-item">Future AI Lab</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Contact Section -->
|
||||||
|
<section id="contact" class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-title">
|
||||||
|
<span>Kontakt</span>
|
||||||
|
<h2>Starten Sie Ihr Projekt</h2>
|
||||||
|
</div>
|
||||||
|
<div class="contact-wrapper">
|
||||||
|
<div class="contact-info">
|
||||||
|
<h3>Lassen Sie uns sprechen</h3>
|
||||||
|
<p>Bereit für den nächsten Schritt? Schreiben Sie uns eine E-Mail oder rufen Sie an.</p>
|
||||||
|
<a href="mailto:info@valtrix.systems" class="contact-link">info@valtrix.systems</a>
|
||||||
|
<p class="address">Musterstraße 123<br>10115 Berlin<br>Deutschland</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer>
|
||||||
|
<div class="container footer-content">
|
||||||
|
<div class="footer-logo">Valtrix.</div>
|
||||||
|
<div class="footer-links">
|
||||||
|
<a href="impressum.html">Impressum</a>
|
||||||
|
<a href="datenschutz.html">Datenschutz</a>
|
||||||
|
</div>
|
||||||
|
<p class="copyright">© 2025 Valtrix. Alle Rechte vorbehalten.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
141
valtrix-web/logo_ideas.html
Normal file
141
valtrix-web/logo_ideas.html
Normal file
@@ -0,0 +1,141 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Valtrix Logo Concepts</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
padding-top: 100px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 50px;
|
||||||
|
background: #0a0f1c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-container {
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
padding: 40px;
|
||||||
|
border-radius: 20px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 600px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Concept 1: Minimal */
|
||||||
|
.logo-1 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 800;
|
||||||
|
color: #fff;
|
||||||
|
letter-spacing: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-1 .dot {
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Concept 2: Shield */
|
||||||
|
.logo-2 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 15px;
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-2 svg {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
fill: none;
|
||||||
|
stroke: var(--primary);
|
||||||
|
stroke-width: 2;
|
||||||
|
filter: drop-shadow(0 0 10px rgba(0, 242, 255, 0.4));
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Concept 3: Abstract V */
|
||||||
|
.logo-3 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 15px;
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-box {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
background: linear-gradient(135deg, var(--primary), #3b82f6);
|
||||||
|
border-radius: 12px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: 1.8rem;
|
||||||
|
color: #0a0f1c;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Concept 4: Terminal */
|
||||||
|
.logo-4 {
|
||||||
|
font-family: 'Courier New', monospace;
|
||||||
|
font-size: 2.2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--primary);
|
||||||
|
background: rgba(0, 242, 255, 0.1);
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid rgba(0, 242, 255, 0.3);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h1>Logo Vorschläge</h1>
|
||||||
|
|
||||||
|
<div class="logo-container">
|
||||||
|
<span class="label">1. Modern Minimal (Aktuell)</span>
|
||||||
|
<div class="logo-1">Valtrix<span class="dot">.</span></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="logo-container">
|
||||||
|
<span class="label">2. Cyber Shield (Security Focus)</span>
|
||||||
|
<div class="logo-2">
|
||||||
|
<svg viewBox="0 0 24 24">
|
||||||
|
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
|
||||||
|
</svg>
|
||||||
|
Valtrix
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="logo-container">
|
||||||
|
<span class="label">3. Tech Block (Modern SaaS)</span>
|
||||||
|
<div class="logo-3">
|
||||||
|
<div class="icon-box">V</div>
|
||||||
|
Valtrix
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="logo-container">
|
||||||
|
<span class="label">4. Terminal Code (Dev/Cloud)</span>
|
||||||
|
<div class="logo-4"><Valtrix /></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
27
valtrix-web/script.js
Normal file
27
valtrix-web/script.js
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const mobileToggle = document.querySelector('.mobile-toggle');
|
||||||
|
const navLinks = document.querySelector('.nav-links');
|
||||||
|
|
||||||
|
if (mobileToggle) {
|
||||||
|
mobileToggle.addEventListener('click', () => {
|
||||||
|
navLinks.classList.toggle('active');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Smooth scroll 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'
|
||||||
|
});
|
||||||
|
// Close mobile menu on click
|
||||||
|
if (navLinks.classList.contains('active')) {
|
||||||
|
navLinks.classList.remove('active');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
559
valtrix-web/style.css
Normal file
559
valtrix-web/style.css
Normal file
@@ -0,0 +1,559 @@
|
|||||||
|
/* Valtrix Design System */
|
||||||
|
:root {
|
||||||
|
/* Colors */
|
||||||
|
--bg-dark: #0a0f1c;
|
||||||
|
/* Deep Navy/Black */
|
||||||
|
--bg-card: #111827;
|
||||||
|
/* Slightly lighter for cards */
|
||||||
|
--primary: #00f2ff;
|
||||||
|
/* Cyan/Electric Blue */
|
||||||
|
--secondary: #ffffff;
|
||||||
|
/* White */
|
||||||
|
--text-main: #e5e7eb;
|
||||||
|
/* Light Gray for text */
|
||||||
|
--text-muted: #9ca3af;
|
||||||
|
/* Muted Gray */
|
||||||
|
--accent: #3b82f6;
|
||||||
|
/* Blue accent */
|
||||||
|
|
||||||
|
/* Typography */
|
||||||
|
--font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||||
|
|
||||||
|
/* Spacing */
|
||||||
|
--container-width: 1200px;
|
||||||
|
--header-height: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: var(--font-main);
|
||||||
|
background-color: var(--bg-dark);
|
||||||
|
color: var(--text-main);
|
||||||
|
line-height: 1.6;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
#header {
|
||||||
|
position: fixed;
|
||||||
|
top: 20px;
|
||||||
|
/* Floating effect */
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 90%;
|
||||||
|
max-width: 1200px;
|
||||||
|
height: 70px;
|
||||||
|
background: rgba(10, 15, 28, 0.7);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
-webkit-backdrop-filter: blur(12px);
|
||||||
|
z-index: 1000;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
border-radius: 50px;
|
||||||
|
/* Pill shape */
|
||||||
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-content {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0 30px;
|
||||||
|
/* Inner padding */
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--secondary);
|
||||||
|
letter-spacing: -0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo .dot {
|
||||||
|
color: var(--primary);
|
||||||
|
text-shadow: 0 0 10px var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links {
|
||||||
|
display: flex;
|
||||||
|
gap: 5px;
|
||||||
|
/* Smaller gap for pill items */
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
padding: 5px;
|
||||||
|
border-radius: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links a {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-muted);
|
||||||
|
padding: 8px 20px;
|
||||||
|
border-radius: 20px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove old underline effect */
|
||||||
|
.nav-links a::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links a:hover {
|
||||||
|
color: var(--bg-dark);
|
||||||
|
background: var(--primary);
|
||||||
|
box-shadow: 0 0 15px rgba(0, 242, 255, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hero Section */
|
||||||
|
#hero {
|
||||||
|
min-height: 100vh;
|
||||||
|
min-height: 100dvh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
padding-top: 120px;
|
||||||
|
/* Ensure content clears the floating header */
|
||||||
|
padding-bottom: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
max-width: 1000px;
|
||||||
|
margin: 0 auto;
|
||||||
|
/* Center content */
|
||||||
|
text-align: center;
|
||||||
|
/* Center text */
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#hero h1 {
|
||||||
|
font-size: 5rem;
|
||||||
|
/* Larger */
|
||||||
|
font-weight: 800;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
line-height: 1.1;
|
||||||
|
letter-spacing: -2px;
|
||||||
|
background: linear-gradient(to bottom right, #fff, #9ca3af);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
color: var(--secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
@supports (-webkit-background-clip: text) {
|
||||||
|
#hero h1 {
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight {
|
||||||
|
color: var(--primary);
|
||||||
|
-webkit-text-fill-color: var(--primary);
|
||||||
|
text-shadow: 0 0 40px rgba(0, 242, 255, 0.4);
|
||||||
|
display: block;
|
||||||
|
/* Break line for emphasis */
|
||||||
|
}
|
||||||
|
|
||||||
|
#hero p {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
margin: 0 auto 50px;
|
||||||
|
/* Center and spacing */
|
||||||
|
max-width: 700px;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-btns {
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
justify-content: center;
|
||||||
|
/* Center buttons */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hero Background Animation */
|
||||||
|
.hero-bg {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: radial-gradient(circle at 50% 50%, rgba(0, 242, 255, 0.08) 0%, transparent 60%);
|
||||||
|
z-index: 1;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* About Section */
|
||||||
|
.about-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 80px;
|
||||||
|
/* More breathing room */
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-text p {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 1.15rem;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.visual-box {
|
||||||
|
width: 100%;
|
||||||
|
height: 450px;
|
||||||
|
background: linear-gradient(135deg, var(--bg-card), #1f2937);
|
||||||
|
border-radius: 24px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||||
|
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.visual-box::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -50%;
|
||||||
|
left: -50%;
|
||||||
|
width: 200%;
|
||||||
|
height: 200%;
|
||||||
|
background: conic-gradient(transparent, var(--primary), transparent 30%);
|
||||||
|
animation: rotate 8s linear infinite;
|
||||||
|
/* Slower, smoother animation */
|
||||||
|
opacity: 0.15;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotate {
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Services Section */
|
||||||
|
.services-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||||
|
gap: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card {
|
||||||
|
background: rgba(17, 24, 39, 0.6);
|
||||||
|
/* More transparent */
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
-webkit-backdrop-filter: blur(10px);
|
||||||
|
padding: 48px 40px;
|
||||||
|
border-radius: 20px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||||
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card:hover {
|
||||||
|
transform: translateY(-8px);
|
||||||
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 242, 255, 0.1);
|
||||||
|
border-color: rgba(0, 242, 255, 0.3);
|
||||||
|
background: rgba(17, 24, 39, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card .icon {
|
||||||
|
font-size: 3.5rem;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
display: inline-block;
|
||||||
|
filter: drop-shadow(0 0 10px rgba(0, 242, 255, 0.2));
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card h3 {
|
||||||
|
font-size: 1.6rem;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
color: var(--secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card p {
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 1.05rem;
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* References Section */
|
||||||
|
.references-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||||
|
gap: 30px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ref-item {
|
||||||
|
background: rgba(255, 255, 255, 0.02);
|
||||||
|
padding: 40px 20px;
|
||||||
|
border-radius: 16px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ref-item:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
border-color: rgba(255, 255, 255, 0.1);
|
||||||
|
color: var(--secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Contact Section */
|
||||||
|
.contact-wrapper {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-info {
|
||||||
|
background: linear-gradient(180deg, var(--bg-card), #0f1522);
|
||||||
|
padding: 80px 40px;
|
||||||
|
border-radius: 24px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||||
|
max-width: 700px;
|
||||||
|
width: 100%;
|
||||||
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-link {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 2.5rem;
|
||||||
|
color: var(--primary);
|
||||||
|
margin: 40px 0;
|
||||||
|
font-weight: 700;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-link:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
text-shadow: 0 0 30px rgba(0, 242, 255, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: var(--primary);
|
||||||
|
color: var(--bg-dark);
|
||||||
|
box-shadow: 0 4px 15px rgba(0, 242, 255, 0.3);
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 6px 20px rgba(0, 242, 255, 0.5);
|
||||||
|
background: #fff;
|
||||||
|
/* White on hover for clean look */
|
||||||
|
color: var(--bg-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.address {
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Legal Pages (Datenschutz/Impressum) */
|
||||||
|
.legal-content {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legal-content h1 {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
font-size: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legal-content h2 {
|
||||||
|
text-align: left;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
font-size: 2rem;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legal-content h3 {
|
||||||
|
margin-top: 32px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
color: var(--secondary);
|
||||||
|
font-size: 1.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legal-content p,
|
||||||
|
.legal-content ul {
|
||||||
|
color: var(--text-muted);
|
||||||
|
margin-bottom: 16px;
|
||||||
|
font-size: 1.05rem;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legal-content ul {
|
||||||
|
padding-left: 20px;
|
||||||
|
list-style: disc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legal-content li {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
footer {
|
||||||
|
padding: 80px 0 40px;
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
||||||
|
margin-top: 80px;
|
||||||
|
background: #05080f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-logo {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-links {
|
||||||
|
display: flex;
|
||||||
|
gap: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-links a {
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-links a:hover {
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyright {
|
||||||
|
color: rgba(255, 255, 255, 0.2);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile Responsive */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.section {
|
||||||
|
padding: 60px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header {
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
transform: none;
|
||||||
|
width: 100%;
|
||||||
|
max-width: none;
|
||||||
|
border-radius: 0;
|
||||||
|
border: none;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||||
|
background: rgba(10, 15, 28, 0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links {
|
||||||
|
position: fixed;
|
||||||
|
top: 70px;
|
||||||
|
/* Match header height */
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
background: var(--bg-dark);
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 40px;
|
||||||
|
gap: 15px;
|
||||||
|
text-align: center;
|
||||||
|
transform: translateY(-100%);
|
||||||
|
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
z-index: 999;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
height: auto;
|
||||||
|
justify-content: flex-start;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links a {
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links.active {
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links a {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
/* Larger touch targets */
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
#hero h1 {
|
||||||
|
font-size: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.visual-box {
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-link {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile Toggle Button */
|
||||||
|
.mobile-toggle {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: var(--text-main);
|
||||||
|
font-size: 1.8rem;
|
||||||
|
cursor: pointer;
|
||||||
|
display: none;
|
||||||
|
padding: 5px;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.mobile-toggle {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user