Webleb - Extraits de Code - Adresse des pages de connexion

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>

Adresse des pages de connexion

Recommandé

Un code par mironovbogdan341

Modèle HTML de base avec bouton (espagnol)

EXIZ

HTML

CSS

JS

Recommandé

Un code par mironovbogdan341

Modèle HTML de base avec bouton (espagnol)

EXIZ

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS