Selam Türk Hack Team,
Uzun zaman oldu, biraz nostalji yaşamak istedim. Emekliye ayrılan efsane grafiker RAUN’a selam olsun diyerek ufak bi index yaptım.
RAUN-Profil
Kodu aşağıya bırakıyorum, isteyen alsın, isteyen değiştirsin.
Uzun zaman oldu, biraz nostalji yaşamak istedim. Emekliye ayrılan efsane grafiker RAUN’a selam olsun diyerek ufak bi index yaptım.
RAUN-Profil
Kodu aşağıya bırakıyorum, isteyen alsın, isteyen değiştirsin.
HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TurkHackTeam | RAUN’a Selam</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap');
* {
margin: 0; padding: 0; box-sizing: border-box;
}
body {
background: url('https://i.hizliresim.com/qb0G6Q.png') no-repeat center center fixed;
background-size: cover;
font-family: 'Orbitron', sans-serif;
color: #00ffe5;
overflow: hidden;
}
.matrix {
position: absolute;
width: 100%;
height: 100%;
background: url('https://i.pinimg.com/originals/6f/f1/8c/6ff18ce316e56ebdbf0d686d6d6d39d3.gif') repeat;
opacity: 0.05;
z-index: 0;
pointer-events: none;
}
.signature-raun {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
font-size: 20px;
font-weight: bold;
color: #ffcc00;
z-index: 2;
text-align: center;
animation: glow 2s infinite;
}
@keyframes glow {
0%, 100% { text-shadow: 0 0 8px #ffeb3b; }
50% { text-shadow: 0 0 20px #fff176; }
}
.signature-you {
position: absolute;
bottom: 20px;
right: 30px;
font-size: 14px;
font-style: italic;
color: #ffffffb3;
z-index: 2;
}
.music-box {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 3;
}
iframe {
border-radius: 10px;
box-shadow: 0 0 15px #00ffe540;
border: none;
width: 220px;
height: 125px;
}
.quote-container {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40%;
max-width: 600px;
padding: 20px;
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(5px);
border: 1px solid #00ffe5;
border-radius: 15px;
box-shadow: 0 0 20px #00ffe580;
z-index: 2;
}
.quote-left {
left: 30px;
text-align: left;
}
.quote-right {
right: 30px;
text-align: right;
}
.quote-container p {
font-size: 16px;
color: #ffffffc9;
line-height: 1.6em;
}
/* 🇹🇷 Türk Bayrağı Logosu Sağ Üstte */
.logo-turkey {
position: absolute;
top: 20px;
right: 20px;
width: 130px;
opacity: 0.95;
z-index: 4;
filter: drop-shadow(0 0 8px #ff0011aa);
animation: flag-glow 5s infinite alternate ease-in-out;
}
@keyframes flag-glow {
0% { filter: drop-shadow(0 0 8px #ff001180); }
100% { filter: drop-shadow(0 0 18px #ff0011); }
}
@media (max-width: 768px) {
.quote-container {
width: 80%;
left: 50% !important;
right: auto !important;
transform: translate(-50%, -50%);
text-align: center !important;
}
.signature-raun {
font-size: 16px;
}
.signature-you {
font-size: 12px;
}
.logo-turkey {
width: 90px;
top: 15px;
right: 10px;
}
}
</style>
</head>
<body>
<!-- Matrix Efekti -->
<div class="matrix"></div>
<!-- RAUN Anısı -->
<div class="signature-raun">Efsane Grafiker RAUN Anısına</div>
<!-- Türkçe Atatürk Sözü -->
<div class="quote-container quote-left">
<p>
Her Türk ferdinin son nefesi, Türk milletinin nefesinin sönmeyeceğini, onun ebedi olduğunu göstermelidir.<br/>
Yüksek Türk! Senin için yükseklik hududu yoktur.
</p>
</div>
<!-- İngilizcesi -->
<div class="quote-container quote-right">
<p>
Every Turkish individual’s last breath must show the world that the breath of the Turkish nation shall never cease, that it is eternal.<br/>
Noble Turk! There is no limit to your greatness.
</p>
</div>
<!-- Senin İmza -->
<div class="signature-you">Richard Jackson</div>
<!-- YouTube Müzik -->
<div class="music-box">
<iframe
src="https://www.youtube.com/embed/EZL_YWEgo24?autoplay=0&controls=1&loop=1&playlist=EZL_YWEgo24"
allow="autoplay; encrypted-media"
allowfullscreen>
</iframe>
</div>
<!-- Türk Bayrağı ve Türkiye Logosu -->
<img class="logo-turkey" src="https://logoeps.com/wp-content/uploads/2013/07/ataturk-text-vector-logo.png" alt="Türk Bayrağı">
</body>
</html>— Richard Jackson
