|
|
| (2 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| <syntaxhighlight lang="html"><!DOCTYPE html>
| | = Das ist eine Testseite = |
| <html lang="de">
| |
| <head>
| |
| <meta charset="UTF-8">
| |
| <title>Mini Demo</title>
| |
| <link rel="stylesheet" href="style.css">
| |
| </head>
| |
| <body>
| |
|
| |
|
| <div class="card">
| | == Hallo Welt! == |
| <h1>Hallo 👋</h1>
| | Dies ist eine Beispiel-Seite. |
| <p id="text">Klick auf den Button!</p>
| |
| <button onclick="changeText()">Klick mich</button>
| |
| </div>
| |
| | |
| <script src="script.js"></script>
| |
| </body>
| |
| </html></syntaxhighlight><syntaxhighlight lang="css">
| |
| body {
| |
| font-family: Arial, sans-serif;
| |
| background: #f0f2f5;
| |
| display: flex;
| |
| justify-content: center;
| |
| align-items: center;
| |
| height: 100vh;
| |
| margin: 0;
| |
| }
| |
| | |
| .card {
| |
| background: white;
| |
| padding: 30px;
| |
| border-radius: 12px;
| |
| box-shadow: 0 5px 20px rgba(0,0,0,0.1);
| |
| text-align: center;
| |
| }
| |
| | |
| button {
| |
| margin-top: 15px;
| |
| padding: 10px 20px;
| |
| border: none;
| |
| background: #4CAF50;
| |
| color: white;
| |
| border-radius: 8px;
| |
| cursor: pointer;
| |
| font-size: 16px;
| |
| }
| |
| | |
| button:hover {
| |
| background: #45a049;
| |
| }
| |
| </syntaxhighlight><syntaxhighlight lang="javascript">
| |
| function changeText() {
| |
| const text = document.getElementById("text");
| |
| text.innerHTML = "Du hast den Button geklickt 🎉";
| |
| }
| |
| </syntaxhighlight>
| |
Latest revision as of 16:29, 12 April 2026
Das ist eine Testseite
Hallo Welt!
Dies ist eine Beispiel-Seite.
