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

Turkish Login Page HTML Code Example

Human Scan

Lego Batman DC super heroes

HTML

CSS

JS

Recommended

Turkish Login Page HTML Code Example

Human Scan

Lego Batman DC super heroes

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS