File: /var/www/html/tmpr/..//tmpr/../tmpr/..//tmpr/../tmpr/../brandcreator/gio.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Cyberstruck | Secure Your Digital Future</title>
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Roboto:wght@400;500&display=swap"
rel="stylesheet"
/>
<style>
/* Reset & base */
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Roboto', Arial, sans-serif;
background: #0a0a23;
color: #f4f4f4;
scroll-behavior: smooth;
line-height: 1.6;
}
a {
color: inherit;
text-decoration: none;
}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
outline: 3px solid #00ffe7;
outline-offset: 2px;
}
/* Sticky header */
header {
background: #181848;
padding: 20px 30px;
position: sticky;
top: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
header h1 {
font-family: 'Montserrat', sans-serif;
font-size: 2rem;
letter-spacing: 2px;
color: #00ffe7;
margin: 0;
}
/* Navigation */
nav {
display: flex;
align-items: center;
}
nav ul {
list-style: none;
display: flex;
gap: 24px;
margin: 0;
padding: 0;
}
nav ul li {
position: relative;
}
nav ul li a {
font-weight: 500;
font-size: 1rem;
transition: color 0.2s;
}
nav ul li a:hover,
nav ul li a:focus {
color: #fff;
}
/* Hamburger menu for mobile */
.menu-toggle {
display: none;
flex-direction: column;
justify-content: space-around;
width: 28px;
height: 22px;
cursor: pointer;
}
.menu-toggle span {
display: block;
height: 3px;
background: #00ffe7;
border-radius: 2px;
transition: all 0.3s ease;
}
/* Mobile nav active styles */
nav.active ul {
display: flex;
flex-direction: column;
gap: 16px;
background: #181848;
position: absolute;
top: 64px;
right: 30px;
padding: 20px 30px;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
width: 200px;
}
/* Hero Section */
.hero {
padding: 80px 20px 60px;
text-align: center;
background: linear-gradient(135deg, #181848 60%, #00ffe7 100%);
position: relative;
overflow: hidden;
}
.hero h2 {
font-size: 2.6rem;
margin-bottom: 16px;
color: #fff;
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 1s forwards 0.3s;
}
.hero p {
font-size: 1.2rem;
max-width: 600px;
margin: 0 auto 35px;
color: #e0e0e0;
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 1s forwards 0.6s;
}
.hero button {
background: #00ffe7;
color: #181848;
border: none;
padding: 16px 44px;
font-size: 1.1rem;
font-weight: 700;
border-radius: 30px;
cursor: pointer;
transition: background 0.3s;
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 1s forwards 0.9s;
}
.hero button:hover,
.hero button:focus {
background: #00ccb3;
}
/* Sections */
.section {
padding: 60px 20px;
max-width: 1100px;
margin: 0 auto;
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.section.visible {
opacity: 1;
transform: translateY(0);
}
.section h3 {
font-size: 2rem;
margin-bottom: 28px;
color: #00ffe7;
text-align: center;
}
/* Services */
.services {
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: center;
}
.service-card {
background: #181848;
border-radius: 14px;
padding: 30px 24px;
flex: 1 1 280px;
max-width: 320px;
box-shadow: 0 6px 24px rgba(0,0,0,0.15);
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: default;
}
.service-card:hover,
.service-card:focus-within {
transform: translateY(-8px);
box-shadow: 0 12px 36px rgba(0,255,231,0.4);
}
.service-card h4 {
color: #00ffe7;
margin-bottom: 14px;
font-size: 1.3rem;
}
.service-card p {
color: #c0c0c0;
font-size: 1rem;
}
/* About */
.about p {
max-width: 700px;
margin: 0 auto;
color: #d0d0d0;
font-size: 1.1rem;
line-height: 1.7;
}
/* Contact Form */
.contact-form {
max-width: 440px;
margin: 0 auto;
background: #181848;
border-radius: 12px;
padding: 32px 28px;
box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.contact-form label {
display: block;
margin-bottom: 8px;
color: #00ffe7;
font-weight: 600;
font-size: 1rem;
}
.contact-form input,
.contact-form textarea {
width: 100%;
padding: 12px 14px;
margin-bottom: 22px;
border: none;
border-radius: 6px;
background: #232366;
color: #fff;
font-size: 1rem;
resize: vertical;
transition: background 0.3s;
}
.contact-form input:focus,
.contact-form textarea:focus {
background: #2a2a82;
outline: none;
}
.contact-form button {
background: #00ffe7;
color: #181848;
border: none;
padding: 14px 36px;
border-radius: 28px;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: background 0.3s;
width: 100%;
}
.contact-form button:hover,
.contact-form button:focus {
background: #00ccb3;
}
.form-message {
text-align: center;
margin-top: -12px;
margin-bottom: 18px;
font-weight: 600;
font-size: 1rem;
color: #00ff9d;
display: none;
}
.form-error {
color: #ff4c4c;
display: none;
}
/* Footer */
footer {
background: #181848;
color: #b2e4e0;
text-align: center;
padding: 20px 0;
font-size: 1rem;
margin-top: 60px;
user-select: none;
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive */
@media (max-width: 900px) {
.services {
flex-direction: column;
align-items: center;
}
}
@media (max-width: 600px) {
header {
padding: 15px 20px;
}
nav ul {
display: none;
}
.menu-toggle {
display: flex;
}
}
</style>
</head>
<body>
<header role="banner">
<h1>Cyberstruck</h1>
<nav role="navigation" aria-label="Primary navigation">
<button
class="menu-toggle"
aria-controls="primary-menu"
aria-expanded="false"
aria-label="Toggle navigation menu"
>
<span></span>
<span></span>
<span></span>
</button>
<ul id="primary-menu">
<li><a href="#services">Services</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section class="hero" aria-label="Introduction">
<h2>Cutting-Edge Cybersecurity Solutions</h2>
<p>
Cyberstruck protects your business with next-generation security
services. We defend your data, infrastructure, and reputation - so you
can focus on growth.
</p>
<button type="button" id="hero-cta">Get Started</button>
</section>
<section class="section" id="services" tabindex="-1">
<h3>Our Services</h3>
<div class="services">
<article class="service-card" tabindex="0" aria-labelledby="service1-title">
<h4 id="service1-title">Threat Monitoring</h4>
<p>
24/7 real-time monitoring to detect and neutralize cyber threats
before they impact your business.
</p>
</article>
<article class="service-card" tabindex="0" aria-labelledby="service2-title">
<h4 id="service2-title">Penetration Testing</h4>
<p>
Identify vulnerabilities with comprehensive penetration testing
and actionable security assessments.
</p>
</article>
<article class="service-card" tabindex="0" aria-labelledby="service3-title">
<h4 id="service3-title">Incident Response</h4>
<p>
Rapid response and recovery services to minimize damage and restore
operations after a cyber incident.
</p>
</article>
</div>
</section>
<section class="section about" id="about" tabindex="-1">
<h3>About Cyberstruck</h3>
<p>
Founded by cybersecurity experts, Cyberstruck is dedicated to helping
organizations stay ahead of cyber threats. Our team leverages the
latest technology and industry best practices to deliver robust,
tailored security solutions for businesses of all sizes.
</p>
</section>
<section class="section" id="contact" tabindex="-1" aria-label="Contact form">
<h3>Contact Us</h3>
<form class="contact-form" novalidate>
<label for="name">Name</label>
<input
type="text"
id="name"
name="name"
placeholder="Your full name"
required
aria-required="true"
aria-describedby="name-error"
/>
<div id="name-error" class="form-error" aria-live="polite"></div>
<label for="email">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="your.email@example.com"
required
aria-required="true"
aria-describedby="email-error"
/>
<div id="email-error" class="form-error" aria-live="polite"></div>
<label for="message">Message</label>
<textarea
id="message"
name="message"
rows="4"
placeholder="Write your message here..."
required
aria-required="true"
aria-describedby="message-error"
></textarea>
<div id="message-error" class="form-error" aria-live="polite"></div>
<button type="submit">Send Message</button>
<div class="form-message" role="alert" aria-live="polite"></div>
</form>
</section>
</main>
<footer role="contentinfo">
© 2025 Cyberstruck. All rights reserved.
</footer>
<script>
// Hamburger menu toggle
const menuToggle = document.querySelector('.menu-toggle');
const nav = document.querySelector('nav');
const navMenu = document.getElementById('primary-menu');
menuToggle.addEventListener('click', () => {
const expanded = menuToggle.getAttribute('aria-expanded') === 'true' || false;
menuToggle.setAttribute('aria-expanded', !expanded);
nav.classList.toggle('active');
});
// Close mobile menu when clicking a link
navMenu.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
if (nav.classList.contains('active')) {
nav.classList.remove('active');
menuToggle.setAttribute('aria-expanded', false);
}
});
});
// Smooth scroll for "Get Started" button
const heroCta = document.getElementById('hero-cta');
const contactSection = document.getElementById('contact');
heroCta.addEventListener('click', () => {
contactSection.scrollIntoView({ behavior: 'smooth' });
contactSection.querySelector('input, textarea').focus();
});
// Animate sections on scroll
const sections = document.querySelectorAll('.section');
const observerOptions = {
threshold: 0.15,
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
observer.unobserve(entry.target);
}
});
}, observerOptions);
sections.forEach(section => {
observer.observe(section);
});
// Form validation & submission simulation
const form = document.querySelector('.contact-form');
const formMessage = form.querySelector('.form-message');
function validateEmail(email) {
// Simple email regex
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}
form.addEventListener('submit', (e) => {
e.preventDefault();
// Clear previous errors
formMessage.style.display = 'none';
formMessage.textContent = '';
const errors = form.querySelectorAll('.form-error');
errors.forEach(err => (err.textContent = ''));
let valid = true;
// Validate Name
const nameInput = form.name;
if (nameInput.value.trim().length < 2) {
const errorEl = document.getElementById('name-error');
errorEl.textContent = 'Please enter your name (at least 2 characters).';
valid = false;
}
// Validate Email
const emailInput = form.email;
if (!validateEmail(emailInput.value.trim())) {
const errorEl = document.getElementById('email-error');
errorEl.textContent = 'Please enter a valid email address.';
valid = false;
}
// Validate Message
const messageInput = form.message;
if (messageInput.value.trim().length < 10) {
const errorEl = document.getElementById('message-error');
errorEl.textContent = 'Please enter a message (at least 10 characters).';
valid = false;
}
if (!valid) {
return;
}
// Simulate form submission
formMessage.style.color = '#00ff9d';
formMessage.textContent = 'Sending message...';
formMessage.style.display = 'block';
setTimeout(() => {
formMessage.textContent = 'Thank you for contacting Cyberstruck! We will get back to you soon.';
form.reset();
}, 1500);
});
</script>
</body>
</html>