Un code par hunganh

Ouvrir dans l'éditeur Publiez votre code

Recommandé

16 November 2024

Comment créer une barre latérale de grille en CSS

30 March 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>

Un code par hunganh

Recommandé

Comment créer une barre latérale de grille en CSS

Un code par ytr3d3

Un code par ytr3d3

HTML

CSS

JS

Recommandé

Comment créer une barre latérale de grille en CSS

Un code par ytr3d3

Un code par ytr3d3

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS