forked from WEB-IMB-WS2526/lab-development-imb
11: Labor und Demos
parent
74590780fc
commit
550e9b828e
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="00_styles_nikolaus.css">
|
||||
<title>Nikolaus-Lied</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1><span class="nikolaus">Nikolaus</span>-Lied</h1>
|
||||
<h2>Lasst uns froh und munter sein</h2>
|
||||
<p>
|
||||
<span class="strophe">
|
||||
Lasst uns froh und munter sein
|
||||
und uns recht von Herzen freun!
|
||||
</span>
|
||||
<span class="refrain">
|
||||
Lustig, lustig, tralalala!
|
||||
Bald ist <span class="nikolaus">Nikolaus</span>-Abend da,
|
||||
bald ist <span class="nikolaus">Nikolaus</span>-Abend da!
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="strophe">
|
||||
Dann stell’ ich den Teller auf,
|
||||
<span class="nikolaus">Nikolaus</span> legt gewiss was drauf.
|
||||
</span>
|
||||
<span class="refrain">
|
||||
Lustig, lustig, tralalala!
|
||||
Bald ist <span class="nikolaus">Nikolaus</span>-Abend da,
|
||||
bald ist <span class="nikolaus">Nikolaus</span>-Abend da!
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="strophe">
|
||||
Wenn ich schlaf’, dann träume ich:
|
||||
Jetzt bringt <span class="nikolaus">Nikolaus</span> was für mich.
|
||||
</span>
|
||||
<span class="refrain">
|
||||
Lustig, lustig, tralalala!
|
||||
Bald ist <span class="nikolaus">Nikolaus</span>-Abend da,
|
||||
bald ist <span class="nikolaus">Nikolaus</span>-Abend da!
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="strophe">
|
||||
Wenn ich aufgestanden bin,
|
||||
lauf’ ich schnell zum Teller hin.
|
||||
</span>
|
||||
<span class="refrain">
|
||||
Lustig, lustig, tralalala!
|
||||
Bald ist <span class="nikolaus">Nikolaus</span>-Abend da,
|
||||
bald ist <span class="nikolaus"><span class="nikolaus">Nikolaus</span></span>-Abend da!
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="strophe">
|
||||
<span class="nikolaus">Nikolaus</span> ist ein guter Mann,
|
||||
dem man nicht genug danken kann.
|
||||
</span>
|
||||
<span class="refrain">
|
||||
Lustig, lustig, tralalala!
|
||||
Bald ist <span class="nikolaus">Nikolaus</span>-Abend da,
|
||||
bald ist <span class="nikolaus">Nikolaus</span>-Abend da!
|
||||
</span>
|
||||
</p>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
h1 {
|
||||
color: goldenrod;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.refrain {
|
||||
font-size: 1.2em;
|
||||
color: green;
|
||||
}
|
||||
|
||||
.strophe{
|
||||
color: darkred;
|
||||
}
|
||||
|
||||
.nikolaus{
|
||||
font-size: 1.3em;
|
||||
font-style: italic;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
h1 .nikolaus{
|
||||
box-shadow: 1px 1px 2px 3px darkgreen;
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link href="01_styles_cascading.css" rel="stylesheet">
|
||||
<title>Kaskaden</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Wie Kaskaden funktionieren</h1>
|
||||
<p>Mit Kaskaden kann man sich zu viele feingranulare <span>Style-Klassen</span> sparen.</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
body {
|
||||
color: blue;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
p {
|
||||
color: cornflowerblue;
|
||||
font-weight: bolder;
|
||||
box-shadow: 2px 2px 5px red;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: large;
|
||||
/* box-shadow: inherit; */
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link href="02_styles_font.css" rel="stylesheet">
|
||||
<!-- <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=Barriecito&family=Noto+Color+Emoji&family=Noto+Emoji:wght@300..700&display=swap"
|
||||
rel="stylesheet"> -->
|
||||
<title>Schriftgrößen in CSS</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Schriftgrößen in CSS</h1>
|
||||
|
||||
<h2 class="absatz-px">Dies ist ein Absatz mit <strong>18px</strong> Schriftgröße.</h2>
|
||||
<p class="absatz-pt">Dies ist ein Absatz mit <strong>12pt</strong> Schriftgröße.</p>
|
||||
<p class="absatz-rem">Dies ist ein Absatz mit <strong>1.5rem</strong> Schriftgröße.</p>
|
||||
<p class="absatz-em">Dies ist ein Absatz mit <strong>1.5em</strong> Schriftgröße.</p>
|
||||
|
||||
<h1>Schriftstile in CSS</h1>
|
||||
<h4>Dies ist eine Überschrift mit <strong>kursiver</strong> Schrift.</h4>
|
||||
<p>Dies ist ein Absatz mit <strong>nicht kursiver</strong> Schrift.</p>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
/* @font-face {
|
||||
font-family: 'Roboto Schrift';
|
||||
src:
|
||||
url('fonts/Roboto-Regular.woff2') format('woff2'),
|
||||
url('fonts/RobotoCondensed-Bold.otf') format('opentype');
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Roboto Schrift', serif;
|
||||
} */
|
||||
|
||||
/*
|
||||
body {
|
||||
font-family: "Arial", serif;
|
||||
} */
|
||||
|
||||
/* body{
|
||||
font-family: Barriecito;
|
||||
} */
|
||||
|
||||
.absatz-px {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.absatz-pt {
|
||||
font-size: 12pt;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
h4 strong {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Relative Schriftgröße mit rem (bezogen auf html-Größe) */
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.absatz-rem {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
/* Relative Schriftgröße mit em (bezogen auf Eltern-Element: body) */
|
||||
body {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.absatz-em {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link href="03_styles_simplebox.css" rel="stylesheet">
|
||||
<title>Gestylte Box</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="simple-box">
|
||||
<h2>Willkommen!</h2>
|
||||
Dies ist eine einfache Box mit einem gestylten <div class="mark"><div></div>-Container.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
.simple-box {
|
||||
background-color: #78abda;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.mark {
|
||||
background-color: #e5f41d;
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link href="04_styles_boxes.css" rel="stylesheet">
|
||||
<title>Gestylte Box</title>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Verschiedene Boxen</h2>
|
||||
<div class="box1">
|
||||
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
||||
</div>
|
||||
<div class="box2">
|
||||
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
||||
</div>
|
||||
<div class="box3">
|
||||
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
||||
</div>
|
||||
<div class="box4">
|
||||
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
||||
</div>
|
||||
<div class="box5">
|
||||
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
.box1 {
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box2 {
|
||||
background-color: pink;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.box3 {
|
||||
background-color: turquoise;
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.box4 {
|
||||
background-color: slateblue;
|
||||
width: 50%;
|
||||
height: 30%;
|
||||
}
|
||||
|
||||
.box5 {
|
||||
background-color: beige;
|
||||
width: 2em;
|
||||
height: 5em;
|
||||
overflow: hidden;
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,43 @@
|
|||
# Übungsblatt 11
|
||||
|
||||
## 1. CSS-Übung: Schrift
|
||||
|
||||
**Aufgabenstellung**: Ergänzen Sie eine vorgegebene HTML-Seite um Schriftart, Farben und Schriftgrößen mit einem CSS-Stylesheet.
|
||||
|
||||
#### Arbeitsschritte
|
||||
1. Erstellen Sie ein CSS-Stylesheet und binden Sie es in diese HTML-Seite ein: [Nachricht](nachricht.html).
|
||||
2. Verwenden Sie die Google Font "Open Sans".
|
||||
3. Setzen Sie die Basis-Schriftgröße (`<html>`) auf `16px`.
|
||||
4. Die Überschriften der ersten und zweiten Ebene sollen die Farbe `#005CA9` haben.
|
||||
5. Text der Klasse `headline` soll eine dunkelgraue Farbe haben und eine kleinere Schriftgröße als die Basis-Schrift haben.
|
||||
6. Text der Klasse `meta` soll eine hellgraue Farbe haben und eine kleinere Schriftgröße als `headline` haben. Außerdem soll der Text kursiv dargestellt werden.
|
||||
7. Text der Klasse `source` soll unterstrichen sein.
|
||||
8. Testen Sie, ob das relative Verhältnis der Schriftgrößen bestehen bleibt, wenn Sie die Basis-Schriftgröße anpassen (z.B. auf `10px`).
|
||||
|
||||
## 2. CSS-Übung: Selektoren
|
||||
|
||||
**Aufgabenstellung**: Untersuchen Sie das folgende HTML-Dokument mit dem zugehörigen CSS-Stylesheet und geben Sie zu jedem Kalendereintrag die *Hintergrundfarbe*, *Schriftfarbe* und *unterstrichen/nicht unterstrichen* an.
|
||||
|
||||
|
||||
|
||||
#### Antworten
|
||||
|
||||
1. Termine:
|
||||
2. 10k-Lauf:
|
||||
3. Elternabend:
|
||||
4. Wocheneinkauf:
|
||||
5. Yoga:
|
||||
6. Handball-Training:
|
||||
7. Mathearbeit:
|
||||
8. Fußball-Training:
|
||||
9. FCB vs. Eintracht:
|
||||
10. Pizza-Tag!:
|
||||
|
||||
## 3. CSS-Übung
|
||||
|
||||
**Aufgabenstellung**: Gestalten Sie das HTML-Formular zu Workshop-Anmeldung aus vorangegangen Übungsblättern individuell nach Ihren Ideen mit CSS.
|
||||
|
||||
#### Arbeitsschritte
|
||||
1. Nehmen Sie folgendes HTML-Formular als Grundlage: [Workshop-Anmeldung](workshop-anmeldung.html). Gerne können Sie dieses erweitern oder anpassen.
|
||||
2. Sie können das folgende CSS-Stylesheet als Ausgangspunkt verwenden (freiwillig): [CSS-Stylesheet](styles_workshop.css). Hier sind ein paar Hilfestellungen zur Gestaltung von Checkbox, Radiobuttons und Select-Box bereits eingefügt (aus der Vorlesung nicht bekannt).
|
||||
3. Ergänzen Sie das Stylesheet und ggf. das HTML-Dokument, so dass ein ansprechendes Design entsteht. (Umfang/Detailgrad und Stil wählen Sie selbst.)
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Tagesschau - Maschinenbau-Bilanz</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<p class="headline">Schlechte Jahresbilanz</p>
|
||||
<h1>Maschinenbauer warnen die Politik</h1>
|
||||
<p class="meta">Stand: 09.12.2025 12:32 Uhr</p>
|
||||
<p class="summary">Der Branchenverband der Maschinenbauer zieht eine schlechte Jahresbilanz 2025. Der VDMA verlangt Reformen. Sonst
|
||||
würden noch mehr Unternehmen abwandern. Vor allem der Mittelstand leidet unter den Standortbedingungen.</p>
|
||||
<p class="meta">Von Axel J, SWR</p>
|
||||
<p>
|
||||
Julia Schnitzler schaut von ihrem Büro auf die Landstraße, die direkt an ihrem Unternehmen entlang führt. Von
|
||||
hier
|
||||
aus gehen die Spezialanlagen des Herstellers Strassburger Filter in alle Welt. Julia Schnitzler ist hier
|
||||
geschäftsführende Gesellschafterin.
|
||||
</p>
|
||||
<p>"Wir sind aufgrund unserer Expertise international führend, aber es wird immer
|
||||
schwerer. Der Standort Deutschland macht uns zu schaffen. Auch international wird das Geschäftsklima immer
|
||||
rauer",
|
||||
fasst die Geschäftsfrau ein ernüchterndes Jahr zusammen. "Unsere Exporte sind um mehr als zehn Prozent
|
||||
zurückgegangen." Die Firma fertigt Filtrationssysteme für die Bereiche Pharma, Chemie und Kosmetik. Die Exporte
|
||||
gehen vor allem nach Südostasien oder auch nach Nordamerika.
|
||||
</p>
|
||||
<h2>Druck durch chinesische Konkurrenz</h2>
|
||||
<p>Im rheinhessischen Westhofen hat der Betrieb 50 Angestellte. Auch im chinesischen
|
||||
Shanghai arbeiten zwei Spezialisten für das deutsche Unternehmen. China war lange ein starker Markt für den
|
||||
deutschen Filterbauer. "Das hat sich geändert: Die Nachfrage ist zurückgegangen. Es gibt immer mehr chinesische
|
||||
Wettbewerber, die in ihrem heimischen Markt bevorzugt werden", sagt Schnitzler. Qualitativ sei man noch ein
|
||||
gutes
|
||||
Stück voraus. Dafür seien die Chinesen bei den Preisen kaum noch zu schlagen. "Chinesische Firmen haben viel
|
||||
niedrigere Energiepreise. Auch deshalb bieten sie Produkte an, die teils bis zu 75 Prozent billiger als unsere
|
||||
Anlagen sind."</p>
|
||||
<p>Die US-Zölle verschärften die Krise. "Dadurch wird alles noch komplizierter - und unsicherer. Viele
|
||||
unserer Kunden warten erstmal ab. Wer weiß schon, was sich morgen wieder ändert." Pläne zur Verlagerung des
|
||||
Betriebes in die USA habe sie nicht. Aber Schnitzler stellt fest: "Es wird einem in den USA aufgrund der neuen
|
||||
Gesetzeslage inzwischen sehr einfach gemacht, eine Niederlassung zu gründen."
|
||||
</p>
|
||||
<p>Daheim setzen der Firma die
|
||||
Standortbedingungen immer mehr zu. Vor allem die fehlenden Fachkräfte sind ein Problem. Beim Thema
|
||||
Bürokratieabbau
|
||||
schüttelt Julia Schnitzler fast schon resigniert den Kopf. "Alle reden davon, aber es wird immer mehr. Ständig
|
||||
gibt
|
||||
es neue Richtlinien", sagt die geschäftsführende Gesellschafterin "Ein Beispiel: Wenn wir ein bestimmtes Bauteil
|
||||
in
|
||||
einen Filter verbauen, ist das für die Verwaltung eine Kleinigkeit. Liefern wir es aber als Ersatzteil separat
|
||||
aus,
|
||||
entsteht ein enormer Dokumentationsaufwand. Das kostet Zeit, bindet Mitarbeiter und wird immer teurer. Dieses
|
||||
Geld
|
||||
fehlt dann woanders."
|
||||
</p>
|
||||
|
||||
<p class="meta"><span class="source">Quelle</span>: www.tagesschau.de, abgerufen am 9.12.2025</p>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
.styled-select {
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.styled-checkbox {
|
||||
appearance: none;
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
border: 1px solid #000000;
|
||||
border-radius: 4px;
|
||||
background-color: #ffffff;
|
||||
|
||||
/* richtet sich mittig zur Textzeile/Nachbarelementen aus */
|
||||
vertical-align: middle;
|
||||
/* dient als Anker für absolute Kinder */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.styled-checkbox:checked {
|
||||
background-color: #000000;
|
||||
border-color: #ffffff;
|
||||
}
|
||||
|
||||
.styled-checkbox:checked::after {
|
||||
/* Häkchen-Symbol */
|
||||
content: "\2713";
|
||||
color: #ffffff;
|
||||
font-size: 1rem;
|
||||
|
||||
|
||||
/* Position relativ zum nächsten positionierten Eltern-Element */
|
||||
position: absolute;
|
||||
/* obere Kante in die Mitte (50%) des Eltern-Elements setzen */
|
||||
top: 50%;
|
||||
/* linke Kante in die Mitte (50%) des Eltern-Elements setzen */
|
||||
left: 50%;
|
||||
/* sich selbst um 50% der eigenen Breite/Höhe zurückschieben → exakt zentriert */
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.styled-radio {
|
||||
appearance: none;
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
border: 1px solid #000;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
|
||||
/* richtet sich mittig zur Textzeile/Nachbarelementen aus */
|
||||
vertical-align: middle;
|
||||
/* dient als Anker für absolute Kinder */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.styled-radio:checked {
|
||||
border-color: #ffffff;
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.styled-radio:checked::after {
|
||||
content: "";
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
background-color: #ffffff;
|
||||
border-radius: 50%;
|
||||
|
||||
/* Position relativ zum nächsten positionierten Eltern-Element */
|
||||
position: absolute;
|
||||
/* obere Kante in die Mitte (50%) des Eltern-Elements setzen */
|
||||
top: 50%;
|
||||
/* linke Kante in die Mitte (50%) des Eltern-Elements setzen */
|
||||
left: 50%;
|
||||
/* sich selbst um 50% der eigenen Breite/Höhe zurückschieben → exakt zentriert */
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 355 KiB |
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="styles_workshop.css">
|
||||
<title>Workshop-Anmeldung</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Workshop-Anmeldung</h1>
|
||||
<form action="https://web-637691723779.europe-west2.run.app/registrierung" method="post">
|
||||
<fieldset>
|
||||
<legend>Persönliche Angaben:</legend>
|
||||
<label for="vorname">Vorname:</label><br>
|
||||
<input type="text" name="vorname" id="vorname" placeholder="Vorname" required><br>
|
||||
|
||||
<label for="nachname">Nachname:</label><br>
|
||||
<input type="text" name="nachname" id="nachname" placeholder="Nachname" required><br>
|
||||
|
||||
<label for="email">E-Mail:</label><br>
|
||||
<input type="email" name="email" id="email" autocomplete="email"><br>
|
||||
|
||||
<label for="telefon">Handynummer:</label><br>
|
||||
<input type="tel" name="telefon" id="telefon" pattern="^01[5-7][0-9]{7,10}$"><br><br>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Kursauswahl:</legend>
|
||||
<label for="kurs">Kurs:</label><br>
|
||||
<input type="text" name="kurs" id="kurs" value="Webentwicklung Basics" readonly disabled><br><br>
|
||||
|
||||
<label for="sessions">Bevorzugte Sessions:</label><br>
|
||||
<select id="sessions" name="sessions" class="styled-select" multiple size="4">
|
||||
<option value="vormittag">Vormittag</option>
|
||||
<option value="nachmittag">Nachmittag</option>
|
||||
<option value="abendsession">Abend</option>
|
||||
<option value="wochenende">Wochenende</option>
|
||||
</select><br>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Zusätzliche Optionen:</legend>
|
||||
<input type="checkbox" id="agb" name="agb" class="styled-checkbox" required>
|
||||
<label for="agb">Ich akzeptiere die Teilnahmebedingungen.</label><br>
|
||||
|
||||
<input type="checkbox" id="newsletter" name="newsletter" value="ja" class="styled-checkbox" >
|
||||
<label for="newsletter">Newsletter abonnieren.</label><br>
|
||||
|
||||
<input type="checkbox" id="equipment" name="equipment" value="ja" class="styled-checkbox" >
|
||||
<label for="equipment">Ich benötige spezielles Equipment.</label><br>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Teilnahmeformat:</legend>
|
||||
Format wählen:<br>
|
||||
<input type="radio" id="online" name="format" value="online" class="styled-radio" required>
|
||||
<label for="online">Online</label><br>
|
||||
|
||||
<input type="radio" id="praesenz" name="format" value="praesenz" class="styled-radio">
|
||||
<label for="praesenz">Präsenz</label><br>
|
||||
</fieldset>
|
||||
<br>
|
||||
<input type="submit" value="Jetzt anmelden">
|
||||
</form>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue