workshop/index.html at master · zenbox/workshop · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!doctype html>
<html lang="de">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0" />
        <title>Titel der Seite - Firmenname</title>
        <link
            rel="stylesheet"
            href="assets/css/style.css" />

        <link
            rel="stylesheet"
            href="assets/css/kampmann-announcement.css" />
    </head>
    <body>
        <header>
            <img
                src="logo.png"
                alt="Logo der Firma" />
        </header>
        <!-- Anzeige -->
        <div id="kampmann-announcement">
            <section>
                <div>
                    <h2>Patienten und Angestellte schützen</h2>
                    <p>mit dem Luftreiniger für die Grippesaison</p>
                    <!-- <img
                    src="https://picsum.photos/id/5/120/250"
                    alt="Abbildung eines Luftreinigers KA 520." /> -->
                </div>
                <div>
                    <div class="kampmann-badge">
                        <p>
                            Mit
                            <abbr title="High Efficiency Particulate Air "
                                >Hepa</abbr
                            >-Filter<br />
                            <small
                                >entfernt 99,995% aller Viren und Keime</small
                            >
                        </p>
                    </div>
                    <button>Jetzt bestellen</button>
                    <footer>
                        <a href="https://www.ka-520.de">www.KA-520.de</a>
                        <img
                            src="assets/figures/kampann-logo.png"
                            alt="Logo der Firma Kampmann" />
                    </footer>
                </div>
            </section>
        </div>
        <!-- /Anzeige -->
        <nav>
            <ul>
                <li><a href="#">link 1</a></li>
                <li><a href="#">link 2</a></li>
                <li><a href="#">link 3</a></li>
                <li><a href="#">link 4</a></li>
                <li><a href="#">link 5</a></li>
            </ul>
        </nav>

        <main>
            <h1 class="red">Das ist der Titel der Seite</h1>
            <article>
                <h2>Das ist dann eine Überschrift für den Inhalt</h2>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Laborum optio expedita, libero dicta iure recusandae earum
                    fugiat nesciunt, sint beatae, tempora nam soluta
                    praesentium. Eveniet dolorum commodi cumque incidunt. Iusto
                    voluptates labore saepe! Architecto repellendus consequuntur
                    pariatur molestias dicta qui tenetur reprehenderit, eveniet
                    quia atque magni neque voluptatibus.
                </p>
                <p>
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                    Iure in quos molestias sit veniam. Perspiciatis, ab possimus
                    unde iusto quam obcaecati fuga asperiores ducimus!
                </p>

                <ul>
                    <li>Erster Listenpunkt</li>
                    <li>Zweiter Listenpunkt</li>
                    <li>Dritter Listenpunkt</li>
                </ul>
            </article>
        </main>

        <aside aria-label="contemporary">
            <p>
                In andere Texte eingebunden -
                <a
                    href="https://kampmann.de"
                    title="taucht bei Mouseover auf"
                    >Zur Webseite der Firma Kampmann</a
                >

                Sind alles Inline-Elemente:
                <strong>Text der wichtig ist</strong>,
                <em>Text der betont werden soll.</em>.
            </p>

            <p>
                Text vor dem Bild
                <img
                    src="https://picsum.photos/id/22/300/100"
                    alt="" />
                Text nach den Bild.
            </p>
        </aside>

        <aside aria-label="illustration">
            <figure>
                <img
                    src="https://picsum.photos/id/22/300/100"
                    alt="" />
                <figcaption>
                    Text zum Bild Lorem ipsum dolor sit amet consectetur
                    adipisicing elit. Quo nemo ratione exercitationem eius dicta
                    autem adipisci eos fuga.
                </figcaption>
            </figure>
        </aside>

        <footer>
            <address>
                &copy; 2026 Meine Firma,
                <a
                    class="red"
                    href="mailto: michael.reichart@gfu.net"
                    >Michael</a
                >
            </address>
        </footer>

        ul>li*3
    </body>
</html>