İsterseniz yapayzekadan veya kendiniz editleyebilirsiniz.
Resimde işaratlenen yerden editlenir.
Kod:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8" />
<title>THT</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at top, #151721 0, #020308 60%);
font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
"Segoe UI", sans-serif;
}
.card {
background: #10121a;
border-radius: 24px;
padding: 18px 22px 22px;
width: min(720px, 95vw);
box-shadow:
0 18px 45px rgba(0, 0, 0, 0.75),
0 0 0 1px rgba(255, 255, 255, 0.03);
color: #e5e9ff;
}
/* Üst bar */
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
font-size: 0.8rem;
}
.window-dots {
display: flex;
gap: 6px;
}
.dot {
width: 11px;
height: 11px;
border-radius: 50%;
}
.dot.red { background: #ff5f57; }
.dot.yellow { background: #febc2e; }
.dot.green { background: #28c840; }
.file-pill {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 6px 14px;
border-radius: 999px;
background: linear-gradient(135deg, #4a3bff, #ae48ff);
color: #fdfdff;
box-shadow: 0 8px 20px rgba(79, 64, 240, 0.6);
}
.file-pill span.ext {
padding: 2px 8px;
border-radius: 999px;
background: rgba(14, 14, 40, 0.35);
font-weight: 600;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.file-pill span.name {
font-weight: 500;
}
.follow {
font-size: 0.85rem;
opacity: 0.8;
display: flex;
align-items: center;
gap: 6px;
}
.follow-icon {
width: 16px;
height: 16px;
border-radius: 6px;
background: linear-gradient(135deg, #ff4b5c, #ff8a4a);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
}
/* Kod alanı */
.code-wrapper {
background: radial-gradient(circle at top left, #1a2235, #080915 60%);
border-radius: 18px;
padding: 18px 18px 20px;
font-family: "JetBrains Mono", "Fira Code", Consolas, Monaco, monospace;
font-size: 0.9rem;
overflow: hidden;
position: relative;
}
.code-wrapper::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
background: radial-gradient(circle at top right,
rgba(255, 255, 255, 0.08),
transparent 60%);
opacity: 0.7;
mix-blend-mode: screen;
}
pre {
position: relative;
z-index: 1;
white-space: pre;
overflow-x: auto;
color: #e5e9ff;
}
/* Basit syntax renkleri */
.tok-selector { color: #8be9fd; }
.tok-property { color: #50fa7b; }
.tok-value { color: #ffb86c; }
.tok-number { color: #bd93f9; }
.tok-punctuation { color: #f8f8f2; }
.tok-comment { color: #6c7391; font-style: italic; }
</style>
</head>
<body>
<div class="card">
<div class="card-header">
<div class="window-dots">
<div class="dot red"></div>
<div class="dot yellow"></div>
<div class="dot green"></div>
</div>
<div class="file-pill">
<span class="ext">html</span>
<span class="name">Turk Hack Team Kod Ekranı</span>
</div>
<div class="follow">
Follow For More
<span class="follow-icon">+</span>
</div>
</div>
<div class="code-wrapper">
<pre>
<span class="tok-selector">#ui .love_word</span> <span class="tok-punctuation">{</span>
<span class="tok-property">color</span>: <span class="tok-value">#ea80b0</span><span class="tok-punctuation">;</span>
<span class="tok-property">font-size</span>: <span class="tok-number">1.4rem</span><span class="tok-punctuation">;</span>
<span class="tok-property">transform</span>: <span class="tok-value">translateY</span><span class="tok-punctuation">(</span><span class="tok-number">-100%</span><span class="tok-punctuation">)</span> <span class="tok-value">rotateZ</span><span class="tok-punctuation">(</span><span class="tok-number">-30deg</span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span>
<span class="tok-property">text-shadow</span>: <span class="tok-number">0 0 10px</span> <span class="tok-value">#fff</span><span class="tok-punctuation">;</span>
<span class="tok-property">letter-spacing</span>: <span class="tok-number">2px</span><span class="tok-punctuation">;</span>
<span class="tok-property">white-space</span>: <span class="tok-value">nowrap</span><span class="tok-punctuation">;</span>
<span class="tok-punctuation">}</span>
<span class="tok-selector">#ui .love_horizontal</span> <span class="tok-punctuation">{</span>
<span class="tok-property">animation</span>: <span class="tok-value">horizontal</span> <span class="tok-number">10000ms</span>
<span class="tok-value">infinite alternate ease-in-out</span><span class="tok-punctuation">;</span>
<span class="tok-property">animation-delay</span>: <span class="tok-value">calc</span><span class="tok-punctuation">(</span><span class="tok-value">var</span><span class="tok-punctuation">(</span><span class="tok-value">--i</span><span class="tok-punctuation">)</span> * <span class="tok-number">-300ms</span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span>
<span class="tok-punctuation">}</span>
</pre>
</div>
</div>
</body>
</html>
