fd-html-und-css-orussmann-1/index.html at main · mi-classroom/fd-html-und-css-orussmann-1 · 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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome</title>
    <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=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="./styles/variables.css">
    <link rel="stylesheet" href="./styles/reset.css">
    <link rel="stylesheet" href="./styles/base.css">
    <link rel="stylesheet" href="./styles/header.css">
    <link rel="stylesheet" href="./styles/button.css">
    <link rel="stylesheet" href="./styles/components.css">
    <script src="./components/MainHeader.js" defer></script>
    <script src="./components/TextBlock.js" defer></script>
    <script src="./components/DiscoverCard.js" defer></script>
    <script src="./components/SlideShow.js" defer></script>
    <script src="./components/InfoCard.js" defer></script>
    <script src="./components/InfoCardSlider.js" defer></script>
</head>

<body>
    <header>
        <main-header>
            <h1 slot="heading-1" class="heading-1">Discover the work of Lucas Cranach</h1>
            <img slot="image" class="image" src="./assets/images/01-hero-image/image.jpg"
                alt="Maria with baby Jesus and Angels sitting outdoor">
        </main-header>
    </header>
    <main>
        <div class="introduction">
            <text-block>
                <p class="paragraph" slot="paragraph">
                    Das Cranach Digital Archive (CDA) ist ein internationales Forschungsprojekt, das sich der
                    Dokumentation
                    und
                    Erforschung der Werke von Lucas Cranach d. Ä. (1472–1553) und seiner Werkstatt widmet. Es bietet
                    eine
                    umfassende digitale Sammlung hochauflösender Bilder, wissenschaftlicher Analysen und historischer
                    Dokumente
                    zu seinen Gemälden. Ziel ist es, Kunsthistorikern, Restauratoren und der Öffentlichkeit einen
                    zentralen
                    Zugang zu detaillierten Informationen über Cranachs Werke zu ermöglichen und den Austausch
                    wissenschaftlicher Erkenntnisse zu fördern.
                </p>
            </text-block>
        </div>
        <div class="devider"></div>
        <section class="discover-section">
            <discover-card>
                <h2 slot="header-2">Gemälde, Archivalien und Literatur</h2>
                <img slot="image"
                    src="./assets/images/misc/1112px-Lucas_Cranach_-_Der_Jungbrunnen_(Gemäldegalerie_Berlin).jpg"
                    alt="A big pool outside with a fountain in the middle and many nude people playing in and around the pool">
                <button slot="button">Entdecken</button>
            </discover-card>
        </section>
        <div class="devider"></div>
        <section class="slide-show-section">
            <slide-show>
                <!-- TODO: Make adaptive -> switch to list attribute -->
                <img slot="image-1" class="top" data-image="1" src="./assets/images/04-slide-show/01-image.jpg" alt="">
                <img slot="image-2" class="oneBehind" data-image="2" src="./assets/images/04-slide-show/02-image.jpg"
                    alt="">
                <img slot="image-3" class="twoBehind" data-image="3" src="./assets/images/04-slide-show/03-image.jpg"
                    alt="">
                <h2 slot="heading-2">Lucas Cranach</h2>
                <p slot="paragraph">
                    Lucas Cranach der Ältere verkörpert die Ideale eines Mannes im Zeitalter der Renaissance, der neben
                    seiner
                    Tätigkeit als Maler, Grafiker und Buchdrucker auch als Politiker und Unternehmer tätig war.
                </p>
                <a slot="button-left" class="button-left" data-button="left"><img src="./assets/images/arrow-left.svg"
                        alt=""></a>
                <a slot="button-right" class="button-right" data-button="right"><img
                        src="./assets/images/arrow-right.svg" alt=""></a>
                <a href="" slot="more-info-link" data-link-show-more>mehr erfahren</a>
            </slide-show>
        </section>
        <div class="devider"></div>
        <section class="info-section">
            <info-card-slider>
                <info-card>
                    <img slot="image" src="./assets/images/05-info-columns/01-image.jpg" alt="Lucas Cranach Portrait">
                    <h2 slot="title">Lucas Cranach d. Ä.</h2>
                    <p slot="description">Berühmter Maler der deutschen Renaissance, bekannt für seine Porträts und
                        religiösen Werke.</p>
                    <a href="" slot="link-text">mehr erfahren</a>
                </info-card>
                <info-card>
                    <img slot="image" src="./assets/images/05-info-columns/02-image.jpg" alt="Werkstatt Cranach">
                    <h2 slot="title">Cranach Werkstatt</h2>
                    <p slot="description">Die Werkstatt produzierte zahlreiche Gemälde und Grafiken, oft mit Hilfe von
                        Schülern und Söhnen.</p>
                    <a href="" slot="link-text">mehr erfahren</a>
                </info-card>
                <info-card>
                    <img slot="image" src="./assets/images/05-info-columns/03-image.jpg" alt="Cranach Signatur">
                    <h2 slot="title">Signatur & Symbolik</h2>
                    <p slot="description">Die berühmte geflügelte Schlange ist das Markenzeichen Cranachs und findet
                        sich
                        auf vielen Werken.</p>
                    <a slot="link-text" href="">mehr erfahren</a>
                </info-card>
            </info-card-slider>
        </section>
        <div class="devider"></div>
        <div class="video-info-section">
            <img src="./assets/images/06-video-col-text-col/image.png" alt="">
            <p>Im Oktober 2009 starteten acht Museen in Europa und den USA gemeinsam mit der Stiftung Museum Kunstpalast
                Düsseldorf und der TH Köln ein Forschungsprojekt zur digitalen Erschließung der Gemälde von Lucas
                Cranach d. Ä., seinen Söhnen und der Werkstatt. Gefördert von der Andrew W. Mellon Foundation
                (2009-2019), zielte es darauf ab, Kunstgeschichte, Kunsttechnologie und Informatik zu verbinden. Die
                Werke wurden interdisziplinär untersucht und über die Plattform CDA frei zugänglich gemacht. Das Projekt
                diente der Digitalisierung, Erforschung und Vermittlung neuer Erkenntnisse und unterschied sich von
                klassischen Werkverzeichnissen durch seinen breiteren Ansatz und interdisziplinäre Methodik
            </p>
            <a href="">mehr erfahren</a>
            <div class="statistics">
                <div class="statistics-block">
                    <p>2.570</p>
                    <p>Gemälde</p>
                </div>
                <div class="statistics-block">
                    <p>1.110</p>
                    <p>pdf-Dokumente</p>
                </div>
                <div class="statistics-block">
                    <p>4.365</p>
                    <p>Literatur Nachweise</p>
                </div>
                <div class="statistics-block">
                    <p>1.340</p>
                    <p>Archiv-dokumente</p>
                </div>
                <div class="statistics-block">
                    <p>1.660</p>
                    <p>Infrarot-reflekto-gramme</p>
                </div>
                <div class="statistics-block">
                    <p>25.050</p>
                    <p>hoch-auflösende Abbildungen</p>
                </div>
                <div class="statistics-block">
                    <p>9.400</p>
                    <p>Textseiten in DE / EN</p>
                </div>
                <div class="statistics-block">
                    <p>800</p>
                    <p>Röntgen-aufnahmen</p>
                </div>
            </div>
        </div>
        <div class="devider"></div>
        <div class="video-section">
            <img src="./assets/images/08-text-col-video-col/image.png" alt="">
            <p>Erfahren Sie mehr über Lucas Cranach den Älteren und seine Werkstatt mit: <br /><b>Lucas Cranach der
                    Ältere und seine Werkstatt - eine Spurensuche</b>
            </p>
        </div>
        <div class="devider"></div>
        <section class="partners-section">
            <h2>Unsere Partner</h2>
            <p>Eine Initiative des Kunstpalasts, Düsseldorf und der Technischen Hochschule Köln in Zusammenarbeit mit
                über 360 Museen, Forschungseinrichtungen und Kirchengemgemeinden in 35 Ländern.
            </p>
            <a href="">mehr erfahren</a>
            <div class="partners-logos">
                <img class="deutsche-forschungsgemeinschaft-logo" src="./assets/images/09-partner-section/image-01.jpg" alt="Deutsche Forschungsgemeinschaft Logo">
                <img class="ernst-von-siemens-kunststiftung-logo" src="./assets/images/09-partner-section/image-02.jpg" alt="Ernst von Siemens Kunststiftung Logo">
                <img class="leibniz-gemeinschaft-logo" src="./assets/images/09-partner-section/image-03.jpg" alt="Leibniz Gemeinschaft Logo">
                <img class="mellon-foundation-logo" src="./assets/images/09-partner-section/image-04.jpg" alt="Mellon Foundation Logo">
            </div>
        </section>
    </main>
    <footer class="homepage-footer">
        <section class="newsletter-section">
            <h2>Newsletter</h2>
            <p>Bleiben Sie mit unserem Newsletter auf dem Laufenden</p>
            <input type="email" name="newsletter" id="newsletter" placeholder="E-Mail">
        </section>
        <section class="info-section">
            <section class="general-info-section">
                <h2>Allgemeines</h2>
                <p>Impressum</p>
                <p>Leitfaden</p>
                <p>Nutzungsbedingungen</p>
                <p>FAQ</p>
            </section>
            <section class="discover-more-section">
                <h2>Entdecken</h2>
                <p>Archivalien</p>
                <p>Lucas Cranach</p>
                <p>Luther</p>
                <p>Über uns</p>
                <p>Aktuelles</p>
                <p>Forschung</p>
            </section>
            <section class="contact-section">
                <h2>Kontakt</h2>
                <p>Haben Sie Fragen oder Anregungen? Kontaktieren Sie uns ganz einfach über folgenden Link:</p>
                <a href="">Zum Kontaktformular</a>
            </section>
        </section>
    </footer>
</body>

</html>