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é

Formulaire de connexion papier plié

Formulaire de connexion animé

Manchot

HTML

CSS

JS

Recommandé

Formulaire de connexion papier plié

Formulaire de connexion animé

Manchot

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS