Antwort schreiben an Codes

Tritt ein in die faszinierende Welt unseres renommierten Internats St. Adeline, wo Tradition auf Moderne trifft und Freundschaften fürs Leben geschlossen werden. Erlebe den pulsierenden Alltag an unserer Akademie, wo soziale Hierarchien aufbrechen, Liebe und Drama Hand in Hand gehen und jeder Tag neue Überraschungen bereithält.
Das Board befindet sich derzeit im Aufbau. Es gibt noch nicht viel zu sehen, aber es wird mit Hochdruck daran gearbeitet, bald alle Informationen und Einblicke rund um die St. Adeline Academy zur Verfügung zu stellen. Die Fortschritte in den einzelnen Bereichen werden unten im Counter festgehalten - bleib dran!

67%Technik

40%Design

30%Texte

0%Canons

Mit dem Absenden meines Beitrages stimme ich diesen Nutzungsbedingungen zu!

Themenübersicht (Neueste zuerst)

Geschrieben von Principal Hogarth - 08.07.2024 07:43

Test Beitrag - wird später mit einem Code ersetzt

Geschrieben von Sky - 23.05.2024 17:46

<div id="saint_adeline-updates">
<div id="stac_updates-img"><img src="https://st-adeline.de/grafiken/St_Adeline_Header_oR.svg"></div>
<div class="stac_updates-text">Tritt ein in die faszinierende Welt unseres renommierten Internats <b>St. Adeline</b>, wo Tradition auf Moderne trifft und Freundschaften fürs Leben geschlossen werden. Erlebe den pulsierenden Alltag an unserer Akademie, wo soziale Hierarchien aufbrechen, Liebe und Drama Hand in Hand gehen und jeder Tag neue Überraschungen bereithält.
Das Board befindet sich derzeit im Aufbau. Es gibt noch nicht viel zu sehen, aber es wird mit Hochdruck daran gearbeitet, bald alle Informationen und Einblicke rund um die St. Adeline Academy zur Verfügung zu stellen. Die Fortschritte in den einzelnen Bereichen werden unten im Counter festgehalten - bleib dran!
</div>
<div class="stac_updates-counter"><div class="stac_updates-progress"><div class="stac_updates-progressbar" style="--progress: 0%;">0%<span>Technik</span></div></div>
<div class="stac_updates-progress"><div class="stac_updates-progressbar" style="--progress: 7%;">7%<span>Design</span></div></div>
<div class="stac_updates-progress"><div class="stac_updates-progressbar" style="--progress: 20%;">20%<span>Texte</span></div></div>
<div class="stac_updates-progress"><div class="stac_updates-progressbar" style="--progress: 66%;">66%<span>Canons</span></div></div></div>
</div>
<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=Besley:ital,wght@0,400..900;1,400..900&family=Great+Vibes&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://st-adeline.de/code_css/saintadline_updates.css">

du musst immer zwei mal die Prozentzahl anpassen:
<div class="stac_updates-counter"><div class="stac_updates-progress"><div class="stac_updates-progressbar" style="--progress: 0%;">0%<span>Technik</span></div></div>

Geschrieben von Principal Hogarth - 17.05.2024 17:22

<div class="wintersky-sig">
<div class="wintersky-board">
<div class="wintersky-boardname">St. Adeline</div>
<div class="wintersky-boardicon"><a href="LINK" target="_blank"><i class="fas fa-graduation-cap"></i></a></div>
<div class="wintersky-boardfacts">RL | Internat| L3S3V3</div>
<div class="wintersky-boardstatus">coming soon</div>
</div>
</div>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"><style type="text/css">.wintersky-sig{--boardname-color:#fff;--boardicon-background:#000;--boardicon-border:#fff;--boardicon-color:#fff;--boardfacts-color:#fff;--boardstatus-color:#cecece;width:100%;max-width:500px;max-height:250px;display:flex;align-items:center;margin:auto;justify-content:center;gap:20px}.wintersky-board{text-align:center}.wintersky-boardname{font-size:13px;text-transform:uppercase;letter-spacing:1px;color:var(--boardname-color);line-height:16px}.wintersky-boardicon{box-sizing:border-box;width:50px;height:50px;background:var(--boardicon-background);border-radius:100%;border:2px solid var(--boardicon-border);font-size:25px;padding:10px 9px;margin:5px auto}.wintersky-boardicon a:link,.wintersky-boardicon a:visited,.wintersky-boardicon a:active,.wintersky-boardicon a:hover{color:var(--boardicon-color)}.wintersky-boardfacts{text-transform:uppercase;font-size:9px;letter-spacing:1px;text-align:center;color:var(--boardfacts-color)}.wintersky-boardstatus{color:var(--boardstatus-color);font-size:8px;letter-spacing:2px}</style>

Code:
<div class="wintersky-sig">

<div class="wintersky-board">

<div class="wintersky-boardname">St. Adeline</div>

<div class="wintersky-boardicon"><a href="LINK" target="_blank"><i class="fas fa-graduation-cap"></i></a></div>

<div class="wintersky-boardfacts">RL | Internat| L3S3V3</div>

<div class="wintersky-boardstatus">coming soon</div>

</div>

</div>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"><style type="text/css">.wintersky-sig{--boardname-color:#fff;--boardicon-background:#000;--boardicon-border:#fff;--boardicon-color:#fff;--boardfacts-color:#fff;--boardstatus-color:#cecece;width:100%;max-width:500px;max-height:250px;display:flex;align-items:center;margin:auto;justify-content:center;gap:20px}.wintersky-board{text-align:center}.wintersky-boardname{font-size:13px;text-transform:uppercase;letter-spacing:1px;color:var(--boardname-color);line-height:16px}.wintersky-boardicon{box-sizing:border-box;width:50px;height:50px;background:var(--boardicon-background);border-radius:100%;border:2px solid var(--boardicon-border);font-size:25px;padding:10px 9px;margin:5px auto}.wintersky-boardicon a:link,.wintersky-boardicon a:visited,.wintersky-boardicon a:active,.wintersky-boardicon a:hover{color:var(--boardicon-color)}.wintersky-boardfacts{text-transform:uppercase;font-size:9px;letter-spacing:1px;text-align:center;color:var(--boardfacts-color)}.wintersky-boardstatus{color:var(--boardstatus-color);font-size:8px;letter-spacing:2px}</style>

folgendes musst du anpassen (direkt am Anfang vom Style):

Code:
--boardname-color:#fff;--boardicon-background:#000;--boardicon-border:#fff;--boardicon-color:#fff;--boardfacts-color:#fff;--boardstatus-color:#cecece;

Damit definierst du die Farben.