Webleb - UI Elements - Giriş sayfalarının adresi

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>

Giriş sayfalarının adresi

Recommended

text

3D Card Hover Effect

Color Matching Game

HTML

CSS

JS

Recommended

text

3D Card Hover Effect

Color Matching Game

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS