forked from WEB-IMB-WS2526/lab-development-imb
Compare commits
3 Commits
branch-fra
...
main
| Author | SHA1 | Date |
|---|---|---|
 Teena Steger
|
b64906fd37 | |
|
Teena Steger
|
0375f8ac20 | |
|
Teena Steger
|
40a53cf56e |
|
|
@ -0,0 +1,64 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
|
||||
rel="stylesheet">
|
||||
<link rel="stylesheet" href="styles_nachricht.css">
|
||||
<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,30 @@
|
|||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #005CA9;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #005CA9;
|
||||
}
|
||||
|
||||
.headline {
|
||||
font-size: 0.85rem;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.meta {
|
||||
font-style: italic;
|
||||
font-size: 0.7rem;
|
||||
color: darkgrey;
|
||||
}
|
||||
|
||||
.source {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
#amina {
|
||||
color: purple;
|
||||
}
|
||||
|
||||
.eltern {
|
||||
color: yellowgreen;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.kind {
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
#oba {
|
||||
color: yellow;
|
||||
}
|
||||
|
||||
p {
|
||||
color: white;
|
||||
}
|
||||
|
||||
#alle {
|
||||
color: turquoise;
|
||||
}
|
||||
|
||||
#oba {
|
||||
color: violet;
|
||||
}
|
||||
|
||||
p span {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
p span.wichtig {
|
||||
background-color: red;
|
||||
}
|
||||
|
|
@ -0,0 +1,138 @@
|
|||
html {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Sansation", serif;
|
||||
background-color: #020617;
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
form {
|
||||
background-color: #0f172a;
|
||||
border-radius: 15px;
|
||||
border-color: #334155;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border-style: solid;
|
||||
border-color: #475569;
|
||||
border-radius: 15px;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
legend {
|
||||
color: #a78bfa;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 0.8rem;
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
input {
|
||||
font-family: 'Sansation', sans-serif;
|
||||
color: #ffffff;
|
||||
background-color: #1e293b;
|
||||
border-radius: 5px;
|
||||
border-color: #475569;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
height: 2em;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: none;
|
||||
border-color: #7c3aed;
|
||||
box-shadow: 0 0 0 1px #7c3aed;
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
font-family: "Orbitron", sans-serif;
|
||||
color: #64748b;
|
||||
font-size: 1em;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
font-family: "Sansation", serif;
|
||||
font-size: 0.8em;
|
||||
background-color: #9333ea;
|
||||
border-color: #7c3aed;
|
||||
height: 2.5rem;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.styled-select {
|
||||
appearance: none;
|
||||
font-family: 'Sansation', sans-serif;
|
||||
background-color: #1e293b;
|
||||
color: #ffffff;
|
||||
padding: 2px 4px;
|
||||
border: 1px solid #334155;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.styled-checkbox {
|
||||
appearance: none;
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
border: 1px solid #334155;
|
||||
border-radius: 4px;
|
||||
background-color: #1e293b;
|
||||
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.styled-checkbox:checked {
|
||||
background-color: #7c3aed;
|
||||
border-color: #7c3aed;
|
||||
}
|
||||
|
||||
.styled-checkbox:checked::after {
|
||||
content: "\2713";
|
||||
color: #ffffff;
|
||||
font-size: 1rem;
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.styled-radio {
|
||||
appearance: none;
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
border: 1px solid #334155;
|
||||
border-radius: 50%;
|
||||
background-color: #1e293b;
|
||||
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.styled-radio:checked {
|
||||
border-color: #7c3aed;
|
||||
background-color: #7c3aed;
|
||||
}
|
||||
|
||||
.styled-radio:checked::after {
|
||||
content: "";
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
background-color: #ffffff;
|
||||
border-radius: 50%;
|
||||
|
||||
/* WEB-IMB: bisher unbekannt */
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!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="styles_uebung02.css">
|
||||
<title>CSS-Selektoren - Rätsel</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Familien-Kalender</h1>
|
||||
<h2>10. Dezember 2025</h2>
|
||||
<span>Termine</span>
|
||||
<p id="kwame" class="eltern">10k-Lauf, <span class="wichtig">Elternabend</span></p>
|
||||
<p id="amina" class="eltern">Wocheneinkauf, <span>Yoga</span></p>
|
||||
<p id="zuri" class="kind">Handball-Training, Mathearbeit</p>
|
||||
<p id="oba" class="kind">Fußball-Training</p>
|
||||
<p id="alle" class="kind eltern">FCB vs. Eintracht</p>
|
||||
<p id="essen" style="color: brown">Pizza-Tag!</p>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<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=Sansation:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap"
|
||||
rel="stylesheet">
|
||||
<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 class="submit-button" type="submit" value="Jetzt anmelden">
|
||||
</form>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link href="00_styles_simplebox.css" rel="stylesheet">
|
||||
<title>Gestylte Box</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="simple-box">
|
||||
<h2>Willkommen!</h2>
|
||||
Dies ist eine einfache Box.<div class="oben">Container</div><div class="unten">Container</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
.simple-box {
|
||||
background-color: #78abda;
|
||||
font-family: Arial, sans-serif;
|
||||
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
padding: 20px;
|
||||
border: 2px solid #333;
|
||||
border-radius: 10px;
|
||||
margin: 30px;
|
||||
}
|
||||
|
||||
.oben {
|
||||
background-color: #e5f41d;
|
||||
height: 20%;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.unten {
|
||||
background-color: red;
|
||||
height: 20%;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Zentrierung mit CSS</title>
|
||||
<link rel="stylesheet" href="01_styles_centered.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="outer-box">
|
||||
<div class="centered-box">
|
||||
<p>Die Luft ist klar, die Nächte still, ein weißer Schleier deckt das Land. Die Kälte ruht, wie sie es will,
|
||||
und malt mit Frost die Bäume zart.</p>
|
||||
</div>
|
||||
<div class="centered-box">
|
||||
<p>Ein Funken Glanz im Kerzenlicht, die Stille trägt ein sanftes Kleid. Der Winter zeigt sein stilles
|
||||
Gesicht, und schenkt uns Ruhe, tiefe Zeit.</p>
|
||||
</div>
|
||||
<!-- <div class="centered-box">
|
||||
<p>Die Flüsse ruhn in starrem Eis, ein Glitzern liegt auf jedem Zweig.
|
||||
Der Winter hält das Land ganz leis, und schenkt ihm Schönheit ohne Gleich.</p>
|
||||
</div>
|
||||
<div class="centered-box">
|
||||
<p>Ein Vogel zieht durch kalte Luft, sein Lied klingt fern und wunderbar.
|
||||
Der Winter trägt den klaren Duft, und macht die Welt so rein und klar.</p>
|
||||
</div> -->
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
.outer-box {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background-color: #112588;
|
||||
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.centered-box {
|
||||
width: 200px;
|
||||
background-color: #e8f1f2;
|
||||
border: 4px solid #95d4ea;
|
||||
padding: 15px;
|
||||
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link href="02_styles_positioning.css" rel="stylesheet">
|
||||
<title>Absolute Positionierung</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="logo-container"></div>
|
||||
<div class="navbar-container"></div>
|
||||
<div class="content-container"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
.logo-container {
|
||||
background-color: magenta;
|
||||
position: absolute;
|
||||
|
||||
height: 8%;
|
||||
width: 5%;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
|
||||
/* z-index: 1; */
|
||||
}
|
||||
|
||||
.navbar-container {
|
||||
background-color: orange;
|
||||
|
||||
height: 8%;
|
||||
width: 95%;
|
||||
|
||||
position: absolute;
|
||||
top: 0%;
|
||||
left: 5%;
|
||||
|
||||
/* z-index: 0; */
|
||||
}
|
||||
|
||||
.content-container {
|
||||
background-color: cyan;
|
||||
position: absolute;
|
||||
|
||||
height: 92%;
|
||||
width: 100%;
|
||||
|
||||
top: 8%;
|
||||
left: 0%;
|
||||
}
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link href="03_styles_Lieblingsbuecher.css" rel="stylesheet">
|
||||
<title>Meine Lieblingsbücher</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="logo-container">
|
||||
<img src="img/buecher.png" alt="Buecher">
|
||||
</div>
|
||||
|
||||
<nav id="navbar-container">
|
||||
<a href="#fitzek">Sebastian Fitzek</a>
|
||||
<a href="#neuhaus">Nele Neuhaus</a>
|
||||
<a href="#garmus">Bonnie Garmus</a>
|
||||
<a href="#schlink">Bernhard Schlink</a>
|
||||
<a href="#follett">Ken Follett</a>
|
||||
</nav>
|
||||
|
||||
<div class="content-container">
|
||||
<h1>Lieblingsbücher</h1>
|
||||
|
||||
<div id="fitzek" class="buch-element">
|
||||
<a href="https://www.thalia.de/shop/home/artikeldetails/A1071531890" target="_blank">Die
|
||||
Einladung</a>
|
||||
<br>
|
||||
<br>
|
||||
Sebastian Fitzek
|
||||
<br>
|
||||
ca. 400
|
||||
</div>
|
||||
<div id="neuhaus" class="buch-element">
|
||||
<a href="https://www.thalia.de/shop/home/artikeldetails/A1068434145" target="_blank">Monster</a>
|
||||
<br><br>
|
||||
Nele Neuhaus
|
||||
<br>
|
||||
ca. 560
|
||||
</div>
|
||||
<div id="garmus" class="buch-element">
|
||||
<a href="https://www.thalia.de/shop/home/artikeldetails/A1062299989" target="_blank">Eine Frage
|
||||
der Chemie</a><br><br>
|
||||
Bonnie Garmus
|
||||
<br>
|
||||
ca. 464
|
||||
</div>
|
||||
<div id="schlink" class="buch-element">
|
||||
<a href="https://www.thalia.de/shop/home/artikeldetails/A1069244098" target="_blank">Das späte
|
||||
Leben</a><br><br>
|
||||
Bernhard Schlink
|
||||
<br>
|
||||
ca. 240
|
||||
</div>
|
||||
<div id="follett" class="buch-element">
|
||||
<a href="https://www.thalia.de/shop/home/artikeldetails/A1067829823" target="_blank">Die Waffen
|
||||
des Lichts</a><br><br>
|
||||
Ken Follett<br>
|
||||
ca. 880
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#logo-container {
|
||||
background-color: cadetblue;
|
||||
width: 10%;
|
||||
height: 10%;
|
||||
position: absolute;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
/* z-index: 1; */
|
||||
}
|
||||
|
||||
#logo-container img {
|
||||
display: block;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
/* z-index: 1; */
|
||||
}
|
||||
|
||||
#navbar-container {
|
||||
background-color: rgb(155, 207, 209);
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
position: absolute;
|
||||
top: 0%;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
#navbar-container a,
|
||||
#navbar-container a:visited {
|
||||
display: flex;
|
||||
float: left;
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: rgb(4, 60, 116);
|
||||
}
|
||||
|
||||
#navbar-container a:hover {
|
||||
background-color: rgb(225, 236, 236);
|
||||
}
|
||||
|
||||
.content-container {
|
||||
background-color: rgb(229, 228, 222);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
left: 0%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.buch-element {
|
||||
display: block;
|
||||
float: left;
|
||||
background-color: rgb(210, 194, 168);
|
||||
height: 150px;
|
||||
width: 18%;
|
||||
padding: 1.5em 0;
|
||||
margin: 10px 1% 10px 1%;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
|
|
@ -0,0 +1,34 @@
|
|||
# Übungsblatt 12
|
||||
|
||||
## 1. CSS-Übung: Box-Modell
|
||||
|
||||
**Aufgabenstellung**: Setzen Sie diese Skizze in HTML und CSS um. Alle wichtigen Maße und Angaben für Ihren `<div>`-Container sind vorgegeben.
|
||||
|
||||
|
||||
|
||||
## 2. CSS-Übung: Positionierung
|
||||
|
||||
**Aufgabenstellung**: Setzen Sie diese Skizze in HTML und CSS um. Alle wichtigen Maße und Angaben für die verschiedenen `<div>`-Container sind vorgegeben.
|
||||
|
||||
|
||||
|
||||
#### Hinweise
|
||||
1. Sie dürfen `1cm` in `1px` darstellen.
|
||||
2. Die Farben dürfen frei gewählt werden.
|
||||
|
||||
## 3. CSS und Javascript: Adventskalender
|
||||
|
||||
**Aufgabenstellung**: Erstellen Sie einen einfachen Adventskalender in HTML, CSS und Javascript.
|
||||
|
||||
#### Arbeitsschritte
|
||||
1. Erstellen Sie eine HTML-Seite mit der Überschrift "Adventskalender".
|
||||
2. Es sollen 24 Kästchen (Türchen) auf der Webseite in ansprechenden/passenden Farben (Hintergrund und Rahmen) und Format zu sehen sein. Jedes Türchen trägt **in der Mitte** eine Nummer zwischen 1-24 als Inhalt.
|
||||
3. Die Türchen werden so angeordnet, dass jedes Element **links im Container ansetzt** und die folgenden Elemente direkt daneben erscheinen, bis die verfügbare Breite erschöpft ist.
|
||||
4. **Beim Klicken** auf ein Türchen wird zunächst geprüft, ob es überhaupt geöffnet werden darf (Türchen-Nummer mit heutigem Datum vergleichen).
|
||||
5. Falls das Öffnen erlaubt ist, ändert sich die Hintergrundfarbe des Türchens und der Inhalt wird durch dieses Zeichen ausgetauscht: "\u{1F381}".
|
||||
6. Falls das Öffnen noch nicht erlaubt ist, erscheint eine Meldung "Noch schläft das Türchen – wie ein Geschenk unter dem Baum.".
|
||||
|
||||
#### Hinweise
|
||||
1. Die Kästchen dürfen auch dynamisch erzeugt werden (mit Javascript).
|
||||
2. Für die Prüfung können Sie das `Date`-Objekt von Javascript verwenden.
|
||||
3. Um einem DOM-Element dynamisch eine CSS-Klasse hinzufügen können Sie die `classList`-API in Javascript verwenden.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
Loading…
Reference in New Issue