Bearbeiten von „Typo3“

== Vorlagen für Templates ==

* HTML

<code>default.html</code>

<pre>
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TYPO3 Website - {data.title}</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <header class="site-header">
        <div class="container">
            <div class="logo">
                <a href="/">MEIN LOGO</a>
            </div>
            <nav class="main-navigation">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Leistungen</a></li>
                    <li><a href="#">Kontakt</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main class="content-wrapper">
        <section class="breadcrumb">
            <div class="container">
                Sie sind hier: Home > Unterseite
            </div>
        </section>

        <div class="container main-grid">
            <article class="content-main">
                <h1>Überschrift der Seite</h1>
                <p>Hier erscheint der Hauptinhalt aus dem Backend.</p>
            </article>

            <aside class="sidebar">
                <h3>Sidebar</h3>
                <p>Zusatzinfos oder Menüs.</p>
            </aside>
        </div>
    </main>

    <footer class="site-footer">
        <div class="container">
            <p>&copy; 2026 Meine TYPO3 Website</p>
        </div>
    </footer>

</body>
</html>
</pre>

* CSS

<code>style.css</code>

<pre>
* { box-sizing: border-box; }
body { font-family: sans-serif; line-height: 1.6; margin: 0; color: #333; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

header { background: #f4f4f4; padding: 1rem 0; border-bottom: 3px solid #ff8700; }
.logo { font-weight: bold; font-size: 1.5rem; float: left; }
nav { float: right; }
nav ul { list-style: none; padding: 0; margin: 0; display: flex; }
nav li { margin-left: 20px; }

.main-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; padding: 40px 0; }

footer { background: #333; color: #fff; padding: 2rem 0; margin-top: 40px; }
</pre>