Webleb - fragmentos de código - Dirección de las páginas de inicio de sesión

HTML

<!DOCTYPE html>

<head>

<title>CyberHack - Digital Defense Academy</title>

<style>

:root {

--primary-color: #00ffff;

--secondary-color: #1a1a2e;

--text-color: #e0e0e0;

}

body, html {

margin: 0;

padding: 0;

font-family: 'Roboto Mono', monospace;

background-color: var(--secondary-color);

color: var(--text-color);

line-height: 1.6;

overflow-x: hidden;

}

.container {

width: 85%;

margin: auto;

overflow: hidden;

}

header {

background: rgba(26, 26, 46, 0.9);

padding: 1rem 0;

position: fixed;

width: 100%;

top: 0;

z-index: 1000;

box-shadow: 0 2px 10px rgba(0, 255, 255, 0.2);

}

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: var(--primary-color);

text-decoration: none;

transition: all 0.3s ease;

position: relative;

}

header ul li a::after {

content: '';

position: absolute;

width: 0;

height: 2px;

bottom: -5px;

left: 0;

background-color: var(--primary-color);

transition: width 0.3s;

}

header ul li a:hover::after {

width: 100%;

}

.banner {

height: 100vh;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

text-align: center;

background: linear-gradient(135deg, rgba(26, 26, 46, 0.9), rgba(0, 0, 0, 0.9));

position: relative;

overflow: hidden;

}

.banner-overlay {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: repeating-linear-gradient(

0deg,

rgba(0, 255, 255, 0.02),

rgba(0, 255, 255, 0.02) 1px,

transparent 1px,

transparent 2px

);

pointer-events: none;

}

.banner-content {

position: relative;

z-index: 10;

}

.banner h1 {

font-family: 'Chakra Petch', sans-serif;

font-size: 4rem;

margin-bottom: 20px;

color: var(--primary-color);

text-transform: uppercase;

letter-spacing: 4px;

}

.btn {

display: inline-block;

background: var(--primary-color);

color: var(--secondary-color);

padding: 12px 35px;

text-decoration: none;

font-weight: bold;

border-radius: 5px;

transition: all 0.4s ease;

position: relative;

overflow: hidden;

}

.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 {

transform: scale(1.05);

box-shadow: 0 0 15px var(--primary-color);

}

.features {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

gap: 20px;

padding: 50px 0;

}

.feature {

background: rgba(0, 255, 255, 0.05);

border: 1px solid rgba(0, 255, 255, 0.2);

padding: 25px;

text-align: center;

transition: all 0.4s ease;

}

.feature:hover {

transform: translateY(-10px);

border-color: var(--primary-color);

}

footer {

background: rgba(26, 26, 46, 0.9);

text-align: center;

padding: 20px;

}

</style>

</head>

<body>

<nav>

<h1 style="font-family: 'Chakra Petch', sans-serif; color: var(--primary-color);">CyberHack</h1>

<ul>

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

<h1>Digital Defense Academy</h1>

<p>Master the Art of Cybersecurity</p>

<a href="#contact" class="btn">Explore Courses</a>

</div>

</section>

<h3>Advanced Penetration Testing</h3>

<p>Next-level vulnerability assessment and ethical hacking techniques</p>

</div>

<h3>Quantum Cryptography</h3>

<p>Cutting-edge encryption and secure communication strategies</p>

</div>

<h3>AI-Powered Security</h3>

<p>Intelligent threat detection and predictive defense mechanisms</p>

</div>

</section>

</footer>

const particlesJS = () => {

const canvas = document.createElement('canvas');

const ctx = canvas.getContext('2d');

document.querySelector('.banner').appendChild(canvas);

canvas.width = window.innerWidth;

canvas.height = document.querySelector('.banner').offsetHeight;

canvas.style.position = 'absolute';

canvas.style.top = '0';

canvas.style.left = '0';

canvas.style.zIndex = '1';

const particles = [];

const particleCount = 100;

class Particle {

constructor() {

this.x = Math.random() * canvas.width;

this.y = Math.random() * canvas.height;

this.radius = Math.random() * 2;

this.color = 'rgba(0, 255, 255, 0.5)';

this.velocityX = (Math.random() - 0.5) * 2;

this.velocityY = (Math.random() - 0.5) * 2;

}

draw() {

ctx.beginPath();

ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);

ctx.fillStyle = this.color;

ctx.fill();

}

update() {

this.x += this.velocityX;

this.y += this.velocityY;

if (this.x < 0 || this.x > canvas.width) this.velocityX *= -1;

if (this.y < 0 || this.y > canvas.height) this.velocityY *= -1;

}

const init = () => {

for (let i = 0; i < particleCount; i++) {

particles.push(new Particle());

}

};

const animate = () => {

ctx.clearRect(0, 0, canvas.width, canvas.height);

particles.forEach(particle => {

particle.update();

particle.draw();

});

requestAnimationFrame(animate);

};

init();

animate();

};

particlesJS();

</script>

</body>

</html>

Dirección de las páginas de inicio de sesión

Recomendado

Un código de Metehan

Llave

Estructura HTML del contenedor de animación CSS

HTML

CSS

JS

Recomendado

Un código de Metehan

Llave

Estructura HTML del contenedor de animación CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS