<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?&family=Inconsolata&family=Montserrat:wght@100;400;500;900&display=swap" rel="stylesheet"> <style> :root { --col: #9eb14d; } .bb_around { max-width: 600px; width: 100%; margin: auto; border-bottom: 0px solid #7ba785; position: relative; } .bb_bgframe { border: 1px solid #000; width: 100%; height: 100%; position: absolute; z-index: 0; } .bb_bg { background-image: url('https://nobel-design.net/ancient/gfx/codes/bb_vorstellung_bg.png'); background-size: cover; font-family: 'Inconsolata', serif; padding: 20px; position: relative; z-index: 100; } .bb_bg2 {background: transparent; width: 90%; margin: auto;} .bb_avas {display: flex; justify-content: center; margin: 120px 10px 10px 10px;} .bb_avas_picgif {width: 120px; height: 120px; padding: 10px;filter: grayscale(100%);} .bb_name1 { color: #fff; text-align: center; padding: 50px 0px 0px 0px; font-size: 50px; font-family: 'Montserrat', sans-serif; font-weight:600; letter-spacing: 4pt; text-transform: uppercase; overflow: hidden; height: 37px; transition: 0.2s ease-out; } .bb_name2 { color: #fff; text-align: center; font-size: 50px; font-family: 'Montserrat', sans-serif; font-weight:600; letter-spacing: 4pt; text-transform: uppercase; height: 20px; line-height: 0px; overflow: hidden; margin: 0px 0 0 -4px; transition: 0.2s ease-out; } .bb_name:hover .bb_name1 { margin: 0 0 0 -2px;} .bb_name:hover .bb_name2 { margin: 0px 0 0 3px;} .bb_subline { font-family: 'Inconsolata', serif; margin: 40px 0px 100px 0px; text-align: center; color: #fff; letter-spacing: 1pt; font-size: 8px; } .bb_text { color: #fff; text-align: justify; font-size: 10px; padding: 40px; line-height: 25px; letter-spacing: 0.5pt; max-height: 300px; /* Scrollhöhe */ overflow-y: auto; } /* Scrollbalken farblich angepasst */ .bb_text::-webkit-scrollbar { width: 6px; } .bb_text::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); } .bb_text::-webkit-scrollbar-thumb { background-color: var(--col); border-radius: 3px; } .bb_text::-webkit-scrollbar-thumb:hover { background-color: #b5c768; } .bb_text b { border-right: 1px solid var(--col); color: var(--col); display: inline-block; padding: 1px 6px 1px 1px; text-transform: uppercase; } .bb_fact { display: flex; justify-content: space-between; padding: 10px 50px 20px 50px; } .bb_fact_call { color: #fff; font-size: 8px; text-transform: uppercase; letter-spacing: 1.5pt; text-align: center; } .bb_fact_response { color: #fff; font-size: 12px; letter-spacing: 1.5pt; text-transform: uppercase; text-align: center; } .bb_corner { margin: 20px; padding: calc(1px + 0px); background-image: conic-gradient(from 90deg at top 1px left 1px, #0000 25%, var(--col) 0), conic-gradient(from -90deg at bottom 1px right 1px, #0000 25%, var(--col) 0); background-position: var(--_p, 0%) var(--_p, 0%), calc(100% - var(--_p, 0%)) calc(100% - var(--_p, 0%)); background-size: 60px 60px; background-repeat: no-repeat; transition: background-position .3s var(--_i,.3s), background-size .3s calc(.3s - var(--_i, .3s)); } .bb_corner:hover { background-size: calc(100% - 0px) calc(100% - 0px); --_p: calc(0px / 2); --_i: 0s; } .bb_end {margin: 40px 0px 0px 40px;} </style> <div class="bb_around"> <div class="bb_bgframe"></div> <div class="bb_bg"> <div class="bb_avas"> <div class="bb_corner"> <img src="https://i.imgur.com/xuBBjfc.jpeg" class="bb_avas_picgif"> </div> </div> <div class="bb_name"> <div class="bb_name1">broken heroes</div> <div class="bb_name2">broken heroes</div> <div class="bb_subline">Welcome to HEI</div> <div class="bb_fact"> <div class="bb_fact_call">rating <div class="bb_fact_response">L3S3V3</div></div> <div class="bb_fact_call">Spielort <div class="bb_fact_response">LA</div></div> <div class="bb_fact_call">inspired by <div class="bb_fact_response">The Boys/GenV</div></div> <div class="bb_fact_call">Spieljahr <div class="bb_fact_response">2027</div></div> </div> </div> <div class="bb_bg2"> <div class="bb_corner"> <div class="bb_text"> <b>Willkommen am Helix Education Institute</b><br><br> Ein Campus hinter hohen Zäunen. Ein Ort, der auf den nächsten Step der Evolution schwört. Ein Zuhause für jene, die anders sind, die „Supes“: Menschen mit Superkräften. <br>Wo einst Freiheit und Forschung herrschten, regieren nun Überwachung, Kontrolle und Angst. Seit dem Tod der beliebten Dekanin Aurelia Morrow hat sich alles verändert. <br>Ihr Nachfolger, Prof. Dr. Simon Vance, führt das Institut mit eiserner Hand. Keycards, Kameras, Zäune – niemand verlässt den Campus ohne die Kenntnis des Dekans. Eltern mussten das Erziehungsrecht an die Schule abtreten. <br>Offiziell: „Zum Schutz der Schüler. Die politische Lage sei zu unberechenbar.“<br><br> RedVial Corp, das Unternehmen, das einst das „Wunder-Serum“ erschuf, hat längst seine Finger im Spiel. <br>Unter dem Campus sollen geheime Labore existieren. Gerüchte sprechen von Experimenten an Schülern. Von verschwundenen Studenten, die nie zurückkehrten. Von „Evaluationen“, nach denen manche nie wieder dieselben waren. <br>Und mittendrin: du. <br>Bist du ein Schüler, der gerade das Potenzial seiner Kräfte entdeckt? <br>Ein Teil von The Vanguard, der Elite der Superhelden? <br>Ein Lehrer, der sich zwischen Loyalität und Menschlichkeit entscheiden muss? <br>Oder gar ein Agent, ein Forscher, ein Aktivist der Unity Front? <br>Du entscheidest, auf welcher Seite du stehst.<br> <br>Eine vielschichtige Welt zwischen Macht, Moral und Mutation. Frei gestaltbare Charaktere mit individuellen Kräften, Zielen & Hintergründen. Dynamische Storyline, beeinflusst durch Spielerentscheidungen. Spannungsfelder zwischen Unterdrückung und Rebellion, Wissenschaft und Menschlichkeit. Intrigen, Geheimnisse und eine Atmosphäre zwischen Akademie-Drama & Dystopie. </div> </div> </div> <div class="bb_end"> <div class="bb_fact"> <div class="bb_fact_call">Link<div class="bb_fact_response"><a href="https://broken-heroes.de/">Broken Heroes</a></div></div> <div class="bb_fact_call">Prinzip <div class="bb_fact_response">Szenentrennung</div></div> <div class="bb_fact_call">Sprache <div class="bb_fact_response">English/Deutsch</div></div> </div> </div> </div> </div>
<center>code by <a href="https://storming-gates.de/member.php?action=profile&uid=4554">brain.death</a></center>
<center>code by <a href="https://storming-gates.de/member.php?action=profile&uid=4554">brain.death</a></center>
