davidkertzscher/eis-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fortnite Experience: Fortnite-Font auf Ueberschriften/Menuepunkte + Fortnite-Menue-Look (Buttons, Tabs, klickbare Karten)

Browse source
This commit is contained in:
David Kertzscher 2026-07-15 12:56:49 +00:00
parent 4fb978492d
commit 8932a75d7e
4 changed files with 130 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
fortnite-experience/Fortnite.ttf Normal file
View file

Binary file not shown.

27
fortnite-experience/index.html
View file

@ -9,6 +9,11 @@
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=Space+Grotesk:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@font-face {
font-family: "FortniteFont";
src: url("Fortnite.ttf") format("truetype");
font-weight: normal; font-style: normal; font-display: swap;
}
:root {
--bg-main: #060409;
--bg-surface-solid: #120c1c;
@ -21,6 +26,7 @@
--color-cyan: #06b6d4;
--font-sans: "Outfit", sans-serif;
--font-mono: "Space Grotesk", sans-serif;
--font-display: "FortniteFont", "Space Grotesk", sans-serif;
--transition-bounce: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
--transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@ -271,6 +277,27 @@
.menu-card { min-height: auto; }
.app-header { flex-direction: column; gap: 1rem; text-align: center; }
}
/* ===== FORTNITE-MENÜ-LOOK ===== */
.logo, .hero-section h1, .menu-card h3, .menu-number,
.btn, .btn-ghost, .header-badge, .hero-eyebrow {
font-family: var(--font-display);
letter-spacing: .03em;
}
.logo, .hero-section h1, .menu-card h3 {
text-transform: uppercase;
font-weight: 400;
}
.hero-section h1 { font-size: clamp(2.4rem, 6vw, 4rem); line-height: .95; }
.menu-card h3 { font-size: 1.75rem; }
.btn, .btn-ghost {
text-transform: uppercase;
font-weight: 400;
letter-spacing: .06em;
border-radius: 6px;
}
.btn:hover, .menu-card:hover .btn { filter: brightness(1.08); }
.menu-card:hover { outline: 1px solid var(--btn-color); outline-offset: -1px; }
</style>
</head>
<body>

24
fortnite-experience/price_game.html
View file

@ -9,6 +9,11 @@
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=Space+Grotesk:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@font-face {
font-family: "FortniteFont";
src: url("Fortnite.ttf") format("truetype");
font-weight: normal; font-style: normal; font-display: swap;
}
:root {
--bg-main: #060409;
--bg-surface: rgba(18, 12, 28, 0.55);
@ -24,6 +29,7 @@
--color-no: #ef4444;
--font-sans: "Outfit", sans-serif;
--font-mono: "Space Grotesk", sans-serif;
--font-display: "FortniteFont", "Space Grotesk", sans-serif;
--shadow-cyan: 0 0 20px rgba(6, 182, 212, 0.3);
--transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-bounce: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
@ -489,6 +495,24 @@
padding: .5rem .9rem;
}
}
/* ===== FORTNITE-MENÜ-LOOK ===== */
.logo, .skin-name, .btn-home, .btn-next-top, .label,
h1, h2, h3 {
font-family: var(--font-display);
}
.logo, .skin-name, h1, h2 {
text-transform: uppercase;
font-weight: 400;
letter-spacing: .02em;
}
.btn-home, .btn-next-top {
text-transform: uppercase;
font-weight: 400;
letter-spacing: .05em;
}
.btn-home:hover { filter: brightness(1.1); }
.btn-next-top:hover { filter: brightness(1.1); }
</style>
</head>
<body>

80
fortnite-experience/style.css
View file

File diff suppressed because one or more lines are too long