Um Código por gustavosalvador212

Abrir no Editor Publique Seu Código

Recomendado

2 December 2024

Site de portfólio HTML com menu lateral

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>

Um Código por gustavosalvador212

Recomendado

Um código por slowarray902

Um código por lebdev

Site de portfólio HTML com menu lateral

HTML

CSS

JS

Recomendado

Um código por slowarray902

Um código por lebdev

Site de portfólio HTML com menu lateral

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS