Página de destino - Hacking

1807 Andev.web

Abrir no Editor Publique Seu Código

Recomendado

11 March 2025

Formulário de login HTML avançado

22 May 2025

Jogo de cara ou coroa

2 June 2025

Um Código de youssefdahroug2005

HTML

<!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>

Página de destino - Hacking

Recomendado

Formulário de login HTML avançado

Jogo de cara ou coroa

Um Código de youssefdahroug2005

HTML

CSS

JS

Recomendado

Formulário de login HTML avançado

Jogo de cara ou coroa

Um Código de youssefdahroug2005

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS