Code Base Studio
HTML / CSS / JS – Live Preview, Assets & Projekte
Run
Live
Assets
Clear
Import
Export
Light
Code
Zeile 1, Spalte 1
HTML
CSS
JS
Live Preview
Ansicht:
Desktop
Mobile
Normal
Editor-Mode
Bereit
Assets & Projekt-Bauteile
Bauteile fügen Code an der Cursor-Position im aktuellen Tab ein.
Schließen
Projekt-Start
Landingpage – Basic
HTML Layout
Hero, Features und Call-to-Action – ideal für neue Projekte.
Dashboard-Shell
HTML Layout
Sidebar + Topbar + Content mit Grid-Placeholder.
HTML-Bauteile
Hero-Sektion
HTML-Block
Große Überschrift, Subline, Button-Reihe.
3-Spalten Features
HTML-Block
Drei Cards mit Icon, Titel und Beschreibung.
Text + Bild-Section
HTML-Block
Responsive Zweispalter – Text links, Bildplatzhalter rechts.
Pricing-Grid (3 Karten)
HTML-Block
Drei Preis-Karten mit CTA-Button.
Section-Heading
HTML-Block
Überschrift, Subline und Divider.
Textblock
HTML-Block
Absatz mit Unterüberschrift.
CSS-Styling
CSS – Modern Reset + Typo
CSS
Reset und Basis-Typografie, gute Basis für alles.
CSS – Landingpage Styles
CSS
Hero, Feature-Cards, Buttons & Sections im modernen Stil.
CSS – Pricing Cards
CSS
Responsive 3-Karten-Pricing Sektion.
System-Fonts
UI Sans (Standard)
CSS Font-Stack
Modernes UI Sans – gut lesbar, wie GitHub/Ant Design.
Serif – Lesetext
CSS Font-Stack
Serif-Schrift für längere Texte oder edle Headlines.
Monospace – Code Look
CSS Font-Stack
Mono-Schrift für Code-Blocks, Timer oder Zahlen.
Rounded UI
CSS Font-Stack
Rundere, freundlichere System-Schrift.
JS-Bauteile
JS – Counter
JS
Einfacher Klick-Counter.
JS – Mini ToDo
JS
Simple ToDo-Liste im DOM.
JS – Mobile Nav Toggle
JS
Burger-Menu für kleine Screens.
Exportieren
Wähle das gewünschte Format.
Schließen
index.html
JSON (Code Base Studio Projekt)