Um código por hunganh

Abrir no Editor Publique Seu Código

Recomendado

16 November 2024

Como criar uma barra lateral de grade em CSS

5 December 2025

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CyberHack - Unleash Your Potential</title>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">
    <style>
        body, html {
            margin: 0;
            padding: 0;
            font-family: 'Share Tech Mono', monospace;
            background-color: #000;
            color: #0f0;
            line-height: 1.6;
            overflow-x: hidden;
        }
        .container {
            width: 80%;
            margin: auto;
            overflow: hidden;
        }
        header {
            background: rgba(0, 0, 0, 0.8);
            padding: 1rem 0;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
        }
        header nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        header ul {
            display: flex;
            list-style: none;
        }
        header ul li {
            padding: 0 1rem;
        }
        header ul li a {
            color: #0f0;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        header ul li a:hover {
            color: #00ff00;
            text-shadow: 0 0 10px #00ff00;
        }
        .banner {
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 0 20px;
            position: relative;
            overflow: hidden;
        }
        .banner canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
        }
        .banner-content {
            position: relative;
            z-index: 1;
        }
        .banner h1 {
            font-family: 'Orbitron', sans-serif;
            font-size: 4rem;
            margin-bottom: 20px;
            text-shadow: 0 0 10px #0f0, 0 0 20px #0f0, 0 0 30px #0f0;
            animation: glowText 2s ease-in-out infinite alternate;
        }
        .banner p {
            font-size: 1.5rem;
            margin-bottom: 20px;
            text-shadow: 0 0 5px #0f0;
        }
        .btn {
            display: inline-block;
            color: #000;
            background: #0f0;
            padding: 10px 30px;
            border: none;
            cursor: pointer;
            font-size: 1.2rem;
            text-decoration: none;
            transition: all 0.3s ease;
            font-family: 'Orbitron', sans-serif;
            text-transform: uppercase;
            letter-spacing: 2px;
            position: relative;
            overflow: hidden;
        }
        .btn:hover {
            background: #00ff00;
            box-shadow: 0 0 20px #00ff00;
        }
        .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(120deg, transparent, rgba(255,255,255,0.3), transparent);
            transition: all 0.6s;
        }
        .btn:hover::before {
            left: 100%;
        }
        .section {
            padding: 100px 0;
            text-align: center;
            position: relative;
        }
        .section h2 {
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            margin-bottom: 20px;
            text-shadow: 0 0 10px #0f0;
        }
        .features {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }
        .feature {
            flex: 1;
            padding: 20px;
            margin: 10px;
            background: rgba(0, 255, 0, 0.1);
            border: 1px solid #0f0;
            border-radius: 10px;
            transition: all 0.3s ease;
        }
        .feature:hover {
            transform: translateY(-10px);
            box-shadow: 0 0 20px #0f0;
        }
        .feature h3 {
            font-family: 'Orbitron', sans-serif;
            font-size: 1.5rem;
            margin-bottom: 10px;
        }
        footer {
            background: rgba(0, 0, 0, 0.8);
            color: #0f0;
            text-align: center;
            padding: 20px;
            position: relative;
        }
        @keyframes glowText {
            from {
                text-shadow: 0 0 5px #0f0, 0 0 10px #0f0, 0 0 15px #0f0;
            }
            to {
                text-shadow: 0 0 10px #0f0, 0 0 20px #0f0, 0 0 30px #0f0;
            }
        }
        @media (max-width: 768px) {
            .banner h1 {
                font-size: 2.5rem;
            }
            .banner p {
                font-size: 1rem;
            }
            .feature {
                flex-basis: 100%;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <nav>
                <h1 style="font-family: 'Orbitron', sans-serif;">CyberHack</h1>
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#services">Services</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

<section class="banner" id="home">
        <canvas id="matrixCanvas"></canvas>
        <div class="banner-content">
            <h1>Welcome to CyberHack</h1>
            <p>Unleash your potential in the world of ethical hacking</p>
            <a href="#contact" class="btn">Get Started</a>
        </div>
    </section>

<section class="section" id="about">
        <div class="container">
            <h2>About Us</h2>
            <p>CyberHack is a leading platform for aspiring ethical hackers. We provide cutting-edge training and resources to help you master the art of cybersecurity.</p>
        </div>
    </section>

<section class="section" id="services">
        <div class="container">
            <h2>Our Services</h2>
            <div class="features">
                <div class="feature">
                    <h3>Penetration Testing</h3>
                    <p>Learn how to identify and exploit vulnerabilities in systems and networks.</p>
                </div>
                <div class="feature">
                    <h3>Cryptography</h3>
                    <p>Master the art of secure communication and data protection.</p>
                </div>
                <div class="feature">
                    <h3>Network Security</h3>
                    <p>Discover techniques to safeguard networks from various cyber threats.</p>
                </div>
            </div>
        </div>
    </section>

<section class="section" id="contact">
        <div class="container">
            <h2>Contact Us</h2>
            <p>Ready to start your journey? Get in touch with us today!</p>
            <a href="mailto:info@cyberhack.com" class="btn">Contact Now</a>
        </div>
    </section>

<footer>
        <p>© 2023 CyberHack. All rights reserved.</p>
    </footer>

canvas.width = canvas.parentElement.offsetWidth;
        canvas.height = canvas.parentElement.offsetHeight;

const katakana = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
        const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        const nums = '0123456789';
        const alphabet = katakana + latin + nums;

const fontSize = 16;
        const columns = canvas.width / fontSize;
        const rainDrops = Array.from({ length: columns }).fill(1);

function drawMatrix() {
            ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = '#0F0';
            ctx.font = fontSize + 'px monospace';

rainDrops.forEach((y, i) => {
                const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length));
                const x = i * fontSize;
                const speed = Math.random() * 2 + 1;
                ctx.fillText(text, x, y * fontSize);

if (y * fontSize > canvas.height && Math.random() > 0.975) {
                    rainDrops[i] = 0;
                }
                rainDrops[i] += speed;
            });
        }

function animate() {
            drawMatrix();
            requestAnimationFrame(animate);
        }

animate();

window.addEventListener('resize', () => {
            canvas.width = canvas.parentElement.offsetWidth;
            canvas.height = canvas.parentElement.offsetHeight;
        });

// Smooth scrolling for navigation links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>

Um código por hunganh

Recomendado

Como criar uma barra lateral de grade em CSS

Desenhe um escalador

Um Código de alejandrob.f2012

HTML

CSS

JS

Recomendado

Como criar uma barra lateral de grade em CSS

Desenhe um escalador

Um Código de alejandrob.f2012

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS