[posts/2025/11/nostalgic_memories] Added article
@@ -0,0 +1,52 @@
|
||||
<h<!doctype html>
|
||||
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Die Katze | Tiere</title>
|
||||
<link rel="icon" href="../static/media/icon.png">
|
||||
<link rel="stylesheet" href="../static/css/base.css">
|
||||
</head>
|
||||
|
||||
<body style="background-image: url('../static/media/pics/karo.jpg');">
|
||||
<center>
|
||||
<div class="card bg-dark" style="width: 24rem;">
|
||||
<div class="card-body" style="font-family: 'Comic Sans MS', cursive, sans-serif;color:#ffffff;">
|
||||
<a style="text-decoration:none;" href="mouse.html" class="btn btn-outline-special">← Vorheriges</a>
|
||||
<a style="text-decoration:none;" href="../poems/autmn.html" class="btn btn-outline-special">Nachfolgendes →</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
<div class="card bg-dark" style="width: 24rem;">
|
||||
|
||||
<div class="card-header" style="font-family: 'Comic Sans MS', cursive, sans-serif;color:#ffffff;">
|
||||
<br>
|
||||
<b style="font-size:20pt;">Die Katze</b>
|
||||
<p></p>
|
||||
</div>
|
||||
|
||||
<div class="card-body" style="font-family: 'Comic Sans MS', cursive, sans-serif;color:#ffffff;">
|
||||
<p style="font-size:12pt;">
|
||||
Die Katze läuft,<br>
|
||||
wie auch <a href="dog.html">der Hund</a>, <a href="horse.html">das Pferd</a><br>
|
||||
und <a href="mouse.html">die Maus</a>, auf vier Beinen.<br>
|
||||
<p></p>
|
||||
Sie kann dank ihren großen Augen auch nachts noch einigermaßen sehen.<br>
|
||||
Es gibt auch Großkatzen, wie z. B. den Leopard.
|
||||
<p></p>
|
||||
<img src="../static/media/pics/cat2.jpg" style="width:21rem;">
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card-footer">
|
||||
<center>
|
||||
<form action="../animals_uebersicht.html#cat"><input type="submit" class="btn btn-outline-special" value="← Zurück zur Tierübersicht"></form>
|
||||
<p></p>
|
||||
<form action="../index.html"><input type="submit" class="btn btn-outline-special" value="← Zurück zur Hauptseite"></form>
|
||||
</center>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</center>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,50 @@
|
||||
<!doctype html>
|
||||
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Der Hund | Tiere</title>
|
||||
<link rel="icon" href="../static/media/icon.png">
|
||||
<link rel="stylesheet" href="../static/css/base.css">
|
||||
</head>
|
||||
|
||||
<body style="background-image: url('../static/media/pics/karo.jpg');">
|
||||
<center>
|
||||
<div class="card bg-dark" style="width: 24rem;">
|
||||
<div class="card-body" style="font-family: 'Comic Sans MS', cursive, sans-serif;color:#ffffff;">
|
||||
<a style="text-decoration:none;" href="horse.html" class="btn btn-outline-special">← Vorheriges</a>
|
||||
<a style="text-decoration:none;" href="mouse.html" class="btn btn-outline-special">Nachfolgendes →</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
<div class="card bg-dark" style="width: 24rem;">
|
||||
|
||||
<div class="card-header" style="font-family: 'Comic Sans MS', cursive, sans-serif;color:#ffffff;">
|
||||
<br>
|
||||
<b style="font-size:20pt;">Der Hund</b>
|
||||
<p></p>
|
||||
</div>
|
||||
|
||||
<div class="card-body" style="font-family: 'Comic Sans MS', cursive, sans-serif;color:#ffffff;">
|
||||
<p style="font-size:12pt;">
|
||||
<img src="../static/media/pics/dog2.jpg" style="width: 21rem;">
|
||||
<p></p>
|
||||
Er kann hoch springen, laufen und schwimmen.<br>
|
||||
Der Hund kann auf Kommandos hören und hört so hoffentlich auch auf den Befehl »Platz!«.<br><p></p>
|
||||
Hier noch ein weiteres Bild eines platz-machenden Hundes:<br><p></p>
|
||||
<img src="../static/media/pics/dog3.jpg" style="width: 21rem;">
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card-footer">
|
||||
<center>
|
||||
<form action="../animals_uebersicht.html#dog"><input type="submit" class="btn btn-outline-special" value="← Zurück zur Tierübersicht"></form>
|
||||
<p></p>
|
||||
<form action="../index.html"><input type="submit" class="btn btn-outline-special" value="← Zurück zur Hauptseite"></form>
|
||||
</center>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</center>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,53 @@
|
||||
<!doctype html>
|
||||
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Das Pferd | Tiere</title>
|
||||
<link rel="icon" href="../static/media/icon.png">
|
||||
<link rel="stylesheet" href="../static/css/base.css">
|
||||
</head>
|
||||
|
||||
<body style="background-image: url('../static/media/pics/karo.jpg');">
|
||||
<center>
|
||||
<div class="card bg-dark" style="width: 24rem;">
|
||||
<div class="card-body" style="font-family: 'Comic Sans MS', cursive, sans-serif;color:#ffffff;">
|
||||
<a style="text-decoration:none;" href="../logikgatter/and.html" class="btn btn-outline-special">← Vorheriges</a>
|
||||
<a style="text-decoration:none;" href="dog.html" class="btn btn-outline-special">Nachfolgendes →</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
<div class="card bg-dark" style="width: 24rem;">
|
||||
|
||||
<div class="card-header" style="font-family: 'Comic Sans MS', cursive, sans-serif;color:#ffffff;">
|
||||
<br>
|
||||
<b style="font-size:20pt;">Das Pferd</b><br>
|
||||
<small>von Robin Lulay</small>
|
||||
<p></p>
|
||||
</div>
|
||||
|
||||
<div class="card-body" style="font-family: 'Comic Sans MS', cursive, sans-serif;color:#ffffff;">
|
||||
<p style="font-size:12pt;">
|
||||
<img src="../static/media/pics/horse2.png" style="width: 21rem;">
|
||||
<p></p>
|
||||
Es kann hoch springen, laufen und sogar fliegen. Manchmal kann es auch schwimmen!
|
||||
Das beste daran ist, dass es rechnen wie auch atmen kann.
|
||||
<p></p>
|
||||
Hier noch ein weiteres Bild eines rechnenden Pferdes:
|
||||
<p></p>
|
||||
<img src="../static/media/pics/horse3.jpg" style="width: 21rem;">
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card-footer">
|
||||
<center>
|
||||
<form action="../animals_uebersicht.html"><input type="submit" class="btn btn-outline-special" value="← Zurück zur Tierübersicht"></form>
|
||||
<p></p>
|
||||
<form action="../index.html"><input type="submit" class="btn btn-outline-special" value="← Zurück zur Hauptseite"></form>
|
||||
</center>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</center>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,50 @@
|
||||
<!doctype html>
|
||||
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Die Maus | Tiere</title>
|
||||
<link rel="icon" href="../static/media/icon.png">
|
||||
<link rel="stylesheet" href="../static/css/base.css">
|
||||
</head>
|
||||
|
||||
<body style="background-image: url('../static/media/pics/karo.jpg');">
|
||||
<center>
|
||||
<div class="card bg-dark" style="width: 24rem;">
|
||||
<div class="card-body" style="font-family: 'Comic Sans MS', cursive, sans-serif;color:#ffffff;">
|
||||
<a style="text-decoration:none;" href="dog.html" class="btn btn-outline-special">← Vorheriges</a>
|
||||
<a style="text-decoration:none;" href="cat.html" class="btn btn-outline-special">Nachfolgendes →</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
<div class="card bg-dark" style="width: 24rem;">
|
||||
|
||||
<div class="card-header" style="font-family: 'Comic Sans MS', cursive, sans-serif;color:#ffffff;">
|
||||
<br>
|
||||
<b style="font-size:20pt;">Die Maus</b>
|
||||
<br>
|
||||
<small>Von Robin Lulay</small>
|
||||
<p></p>
|
||||
</div>
|
||||
|
||||
<div class="card-body" style="font-family: 'Comic Sans MS', cursive, sans-serif;color:#ffffff;">
|
||||
<p style="font-size:12pt;">
|
||||
Die Maus ist Nagetiergattung die über 40 Arten umfasst.<br>
|
||||
Sie wird im durschnitt 2 Jahre alt und<br>
|
||||
frisst meistens Insekten in ihrer Umgebung<br>
|
||||
und nicht wie im Klischee Käse.<br>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card-footer">
|
||||
<center>
|
||||
<form action="../animals_uebersicht.html#mouse"><input type="submit" class="btn btn-outline-special" value="← Zurück zur Tierübersicht"></form>
|
||||
<p></p>
|
||||
<form action="../index.html"><input type="submit" class="btn btn-outline-special" value="← Zurück zur Hauptseite"></form>
|
||||
</center>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</center>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,43 @@
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="static/css/base.css">
|
||||
<link rel="stylesheet" href="static/css/index.css">
|
||||
<link rel="icon" href="static/media/icon.png">
|
||||
<title>Tiere | Übersicht</title>
|
||||
</head>
|
||||
|
||||
<body class="bg-dark">
|
||||
|
||||
<div class="header">
|
||||
<form action="index.html#animals"><input type="submit" class="btn btn-outline-special" value="← Zurück"></form>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="row" onclick="location='animals/horse.html'" id="horse">
|
||||
<img class="col-6" src="static/media/pics/pferd.jpg">
|
||||
<div class="col-4 right">
|
||||
<b><a href="animals/horse.html" class="transitioned-link"><h1 style="font-family: 'Comic Sans MS', cursive, sans-serif;">Pferd</h1></a></b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" onclick="location='animals/dog.html'" id="dog">
|
||||
<img class="col-6" src="static/media/pics/hund.jpg">
|
||||
<div class="col-4 left">
|
||||
<b><a href="animals/dog.html" class="transitioned-link"><h1 style="font-family: 'Comic Sans MS', cursive, sans-serif;">Hund</h1></a></b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" onclick="location='animals/mouse.html'" id="mouse">
|
||||
<img class="col-6" src="static/media/pics/mouse.jpg">
|
||||
<div class="col-4 right">
|
||||
<b><a href="animals/mouse.html" class="transitioned-link"><h1 style="font-family: 'Comic Sans MS', cursive, sans-serif;">Maus</h1></b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" onclick="location='animals/cat.html'" id="cat">
|
||||
<img class="col-6" src="static/media/pics/cat.jpg">
|
||||
<div class="col-4 left">
|
||||
<b><a href="animals/cat.html" class="transitioned-link"><h1 style="font-family: 'Comic Sans MS', cursive, sans-serif;">Katze</h1></a></b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
36
static/specials/2025/11/03_-_nostalgic_memories/index.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="static/css/base.css">
|
||||
<link rel="stylesheet" href="static/css/index.css">
|
||||
<link rel="icon" href="static/media/icon.png">
|
||||
<title>Hauptseite</title>
|
||||
</head>
|
||||
|
||||
<body class="bg-dark">
|
||||
|
||||
<div class="header">
|
||||
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="row" onclick="location='animals_uebersicht.html'" id="tiere">
|
||||
<img class="col-6" src="static/media/pics/animal.jpg">
|
||||
<div class="col-4 right">
|
||||
<b><a href="animals_uebersicht.html" class="transitioned-link"><h1 style="font-family: 'Comic Sans MS', cursive, sans-serif;">Tiere</h1></a></b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" onclick="location='poems_uebersicht.html'" id="gedichte">
|
||||
<img class="col-6" src="static/media/pics/poem.jpg">
|
||||
<div class="col-4 left">
|
||||
<b><a href="poems_uebersicht.html" class="transitioned-link"><h1 style="font-family: 'Comic Sans MS', cursive, sans-serif;">Gedichte</h1></a></b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" onclick="location='logikgatter_uebersicht.html'" id="logikgatter">
|
||||
<img class="col-6" src="static/media/pics/gates2.jpg">
|
||||
<div class="col-4 right">
|
||||
<b><a href="logikgatter_uebersicht.html" class="transitioned-link"><h1 style="font-family: 'Comic Sans MS', cursive, sans-serif;">Logikgatter</h1></a></b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,106 @@
|
||||
<!doctype html>
|
||||
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Und-Gatter | Logikgatter</title>
|
||||
<link rel="icon" href="../static/media/icon.png">
|
||||
<link rel="stylesheet" href="../static/css/base.css">
|
||||
<style>
|
||||
table, th, td {
|
||||
border: 1px solid black;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
th, td {
|
||||
padding: 15px;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body style="background-image: url('../static/media/pics/karo.jpg');">
|
||||
<center>
|
||||
<div class="card bg-dark" style="width: 24rem;">
|
||||
<div class="card-body" style="font-family: 'Comic Sans MS', cursive, sans-serif;color:#ffffff;">
|
||||
<a style="text-decoration:none;" href="or.html" class="btn btn-outline-special">← Vorheriges</a>
|
||||
<a style="text-decoration:none;" href="../animals/horse.html" class="btn btn-outline-special">Nachfolgendes →</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
<div class="card bg-dark" style="width: 24rem;">
|
||||
|
||||
<div class="card-header" style="font-family: 'Comic Sans MS', cursive, sans-serif;color:#ffffff;">
|
||||
<br>
|
||||
<b style="font-size:20pt;">AND</b>
|
||||
<br>
|
||||
<small>Das Und-Gatter</small>
|
||||
<p></p>
|
||||
</div>
|
||||
|
||||
<div class="card-body" style="font-family: 'Comic Sans MS', cursive, sans-serif;color:#ffffff;">
|
||||
<p style="font-size:12pt;">
|
||||
Das Und-Gatter,<br>
|
||||
ist ein ein Logikgatter mit mehreren Inputs und einem Output.<br>
|
||||
<p></p>
|
||||
Die Wahrheitstabelle des ANDs:
|
||||
<p></p>
|
||||
<table>
|
||||
<tr>
|
||||
<th width="30%">a</th>
|
||||
<th width="30%">b</th>
|
||||
<th width="40%">a XOR b</th>
|
||||
</tr>
|
||||
<td>False</td>
|
||||
<td>False</td>
|
||||
<td>False</td>
|
||||
<tr>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>False</td>
|
||||
<td>True</td>
|
||||
<td>False</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>True</td>
|
||||
<td>False</td>
|
||||
<td>False</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>True</td>
|
||||
<td>True</td>
|
||||
<td>True</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p></p>
|
||||
Man kann das exklusive Oder also<br>
|
||||
folgendermaßen bezeichnen:<br><p></p>
|
||||
<i>
|
||||
Nur wenn alle Eingaben »Wahr« sind,<br>
|
||||
ist das Ergebnis »Wahr«.<br>
|
||||
In allen anderen Fällen<br>
|
||||
ist das Ergebnis »Falsch«.
|
||||
</i>
|
||||
<br>
|
||||
<p></p>
|
||||
Das AND ist also das Gegenteil vom <a href="xor.html">logischen exklusiven Oder</a>.<br><p></p>
|
||||
Das (deutsche) elektronische<br>Schaltsymbol sieht so aus:<br><p></p>
|
||||
<img src="../static/media/pics/and_schaltzeichen.png">
|
||||
<br><p></p>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card-footer">
|
||||
<center>
|
||||
<form action="../logikgatter_uebersicht.html#and-gate"><input type="submit" class="btn btn-outline-special" value="← Zurück zur Gatterübersicht"></form>
|
||||
<p></p>
|
||||
<form action="../index.html"><input type="submit" class="btn btn-outline-special" value="← Zurück zur Hauptseite"></form>
|
||||
</center>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</center>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,102 @@
|
||||
<!doctype html>
|
||||
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Oder-Gatter | Logikgatter</title>
|
||||
<link rel="icon" href="../static/media/icon.png">
|
||||
<link rel="stylesheet" href="../static/css/base.css">
|
||||
<style>
|
||||
table, th, td {
|
||||
border: 1px solid black;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
th, td {
|
||||
padding: 15px;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body style="background-image: url('../static/media/pics/karo.jpg');">
|
||||
<center>
|
||||
<div class="card bg-dark" style="width: 24rem;">
|
||||
<div class="card-body" style="font-family: 'Comic Sans MS', cursive, sans-serif;color:#ffffff;">
|
||||
<a style="text-decoration:none;" href="xor.html" class="btn btn-outline-special">← Vorheriges</a>
|
||||
<a style="text-decoration:none;" href="and.html" class="btn btn-outline-special">Nachfolgendes →</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
<div class="card bg-dark" style="width: 24rem;">
|
||||
|
||||
<div class="card-header" style="font-family: 'Comic Sans MS', cursive, sans-serif;color:#ffffff;">
|
||||
<br>
|
||||
<b style="font-size:20pt;">OR</b>
|
||||
<br>
|
||||
<small>Das Oder-Gatter</small>
|
||||
<p></p>
|
||||
</div>
|
||||
|
||||
<div class="card-body" style="font-family: 'Comic Sans MS', cursive, sans-serif;color:#ffffff;">
|
||||
<p style="font-size:12pt;">
|
||||
Das Oder-Gatter,<br>
|
||||
ist wie das XOR auch ein Gatter<br>
|
||||
mit zwei Eingängen und einem Ausgang.<br>
|
||||
<p></p>
|
||||
Die Wahrheitstabelle des ORs:
|
||||
<p></p>
|
||||
<table>
|
||||
<tr>
|
||||
<th width="30%">a</th>
|
||||
<th width="30%">b</th>
|
||||
<th width="40%">a XOR b</th>
|
||||
</tr>
|
||||
<td>False</td>
|
||||
<td>False</td>
|
||||
<td>False</td>
|
||||
<tr>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>False</td>
|
||||
<td>True</td>
|
||||
<td>True</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>True</td>
|
||||
<td>False</td>
|
||||
<td>True</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>True</td>
|
||||
<td>True</td>
|
||||
<td>True</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p></p>
|
||||
Man kann das Oder also<br>
|
||||
folgendermaßen bezeichnen:<br><p></p>
|
||||
<i>Falls mindestens einer<br>der beiden Inputs »Wahr« ist,<br>ist das Ergebnis »Wahr«.<br>Nur wenn alle Eingaben »Falsch« sind, ist das Ergebnis »Falsch«.<br></i>
|
||||
<br>
|
||||
<p></p>
|
||||
Das OR sieht dem <a href="xor.html">XOR</a><br>also ähnlich.<br><p></p>
|
||||
Das (deutsche) elektronische<br>Schaltsymbol sieht so aus:<br><p></p>
|
||||
<img src="../static/media/pics/or_schaltzeichen.png">
|
||||
<br><p></p>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card-footer">
|
||||
<center>
|
||||
<form action="../logikgatter_uebersicht.html#or-gate"><input type="submit" class="btn btn-outline-special" value="← Zurück zur Gatterübersicht"></form>
|
||||
<p></p>
|
||||
<form action="../index.html"><input type="submit" class="btn btn-outline-special" value="← Zurück zur Hauptseite"></form>
|
||||
</center>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</center>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,109 @@
|
||||
<!doctype html>
|
||||
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Exklusiv-Oder-Gatter | Logikgatter</title>
|
||||
<link rel="icon" href="../static/media/icon.png">
|
||||
<link rel="stylesheet" href="../static/css/base.css">
|
||||
<style>
|
||||
table, th, td {
|
||||
border: 1px solid black;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
th, td {
|
||||
padding: 15px;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body style="background-image: url('../static/media/pics/karo.jpg');">
|
||||
<center>
|
||||
<div class="card bg-dark" style="width: 24rem;">
|
||||
<div class="card-body" style="font-family: 'Comic Sans MS', cursive, sans-serif;color:#ffffff;">
|
||||
<a style="text-decoration:none;" href="../poems/christmas.html" class="btn btn-outline-special">← Vorheriges</a>
|
||||
<a style="text-decoration:none;" href="or.html" class="btn btn-outline-special">Nachfolgendes →</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
<div class="card bg-dark" style="width: 24rem;">
|
||||
|
||||
<div class="card-header" style="font-family: 'Comic Sans MS', cursive, sans-serif;color:#ffffff;">
|
||||
<br>
|
||||
<b style="font-size:20pt;">XOR</b>
|
||||
<br>
|
||||
<small>das Exklusiv-Oder-Gatter</small>
|
||||
<p></p>
|
||||
</div>
|
||||
|
||||
<div class="card-body" style="font-family: 'Comic Sans MS', cursive, sans-serif;color:#ffffff;">
|
||||
<p style="font-size:12pt;">
|
||||
Das XOR-Gatter, auch exklusives Oder gennant<br>(E<b>X</b>clusive <b>OR</b>),<br>
|
||||
<br>
|
||||
ist ein Gatter mit zwei Eingängen und einem Ausgang.
|
||||
<br>
|
||||
<p></p>
|
||||
Die Wahrheitstabelle des XORs:
|
||||
<p></p>
|
||||
<table style="">
|
||||
<tr>
|
||||
<th width="30%">a</th>
|
||||
<th width="30%">b</th>
|
||||
<th width="40%">a XOR b</th>
|
||||
</tr>
|
||||
<td>False</td>
|
||||
<td>False</td>
|
||||
<td>False</td>
|
||||
<tr>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>False</td>
|
||||
<td>True</td>
|
||||
<td>True</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>True</td>
|
||||
<td>False</td>
|
||||
<td>True</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>True</td>
|
||||
<td>True</td>
|
||||
<td>False</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p></p>
|
||||
Man kann das exklusive Oder also<br>
|
||||
folgendermaßen bezeichnen:<br><p></p>
|
||||
<i>Wenn Einer der beiden Inputs »Wahr« ist,<br>ist das Ergebnis »Wahr«.<br>Falls alle Eingaben »Wahr« sind, ist das Ergebnis »Falsch«.<br>Gleiches gilt für zwei »Falsche« Eingaben.</i>
|
||||
<br>
|
||||
<p></p>
|
||||
Das XOR ähnelt dem <a href="or.html">logischen Oder</a><br>in einigen Punkten also.<br><p></p>
|
||||
Außerdem findet es auch<br>
|
||||
in der Krypthographie Verwendung:<br>
|
||||
Das <a href="https://en.wikipedia.org/wiki/One-time_pad">»One Time Pad« (OTP)«</a><br>
|
||||
ist ein theoretisch sicherer Verschlüsselungsalgorithmus.
|
||||
Es basiert auf der logischen Operation XOR!
|
||||
<p></p>
|
||||
Das (deutsche) elektronische<br>Schaltsymbol sieht so aus:<br><p></p>
|
||||
<img src="../static/media/pics/xor_schaltzeichen.png">
|
||||
<br><p></p>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card-footer">
|
||||
<center>
|
||||
<form action="../logikgatter_uebersicht.html"><input type="submit" class="btn btn-outline-special" value="← Zurück zur Gatterübersicht"></form>
|
||||
<p></p>
|
||||
<form action="../index.html"><input type="submit" class="btn btn-outline-special" value="← Zurück zur Hauptseite"></form>
|
||||
</center>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</center>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,37 @@
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="static/css/base.css">
|
||||
<link rel="stylesheet" href="static/css/index.css">
|
||||
<link rel="icon" href="static/media/icon.png">
|
||||
<title>Logikgatter | Übersicht</title>
|
||||
</head>
|
||||
|
||||
<body class="bg-dark">
|
||||
|
||||
<div class="header">
|
||||
<form action="index.html#logikgatter"><input type="submit" class="btn btn-outline-special" value="← Zurück"></form>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="row" onclick="location='logikgatter/xor.html'">
|
||||
<img class="col-6" src="static/media/pics/xor.jpg" id="xor-gate">
|
||||
<div class="col-4 right">
|
||||
<b><a href="logikgatter/xor.html" class="transitioned-link"><h1 style="font-family: 'Comic Sans MS', cursive, sans-serif;">XOR</h1></a></b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" onclick="location='logikgatter/or.html'">
|
||||
<img class="col-6" src="static/media/pics/or.jpg" id="or-gate">
|
||||
<div class="col-4 left">
|
||||
<b><a href="logikgatter/or.html" class="transitioned-link"><h1 style="font-family: 'Comic Sans MS', cursive, sans-serif;">OR</h1></a></b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" onclick="location='logikgatter/and.html'">
|
||||
<img class="col-6" src="static/media/pics/and.jpg" id="and-gate">
|
||||
<div class="col-4 right">
|
||||
<b><a href="logikgatter/and.html" class="transitioned-link"><h1 style="font-family: 'Comic Sans MS', cursive, sans-serif;">AND</h1></a></b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,52 @@
|
||||
<!doctype html>
|
||||
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Der Herbst | Gedichte</title>
|
||||
<link rel="icon" href="../static/media/icon.png">
|
||||
<link rel="stylesheet" href="../static/css/base.css">
|
||||
</head>
|
||||
|
||||
<body style="background-image: url('../static/media/pics/karo.jpg');">
|
||||
<center>
|
||||
<div class="card bg-dark" style="width: 24rem;">
|
||||
<div class="card-body" style="font-family: 'Comic Sans MS', cursive, sans-serif;color:#ffffff;">
|
||||
<a style="text-decoration:none;" href="../animals/cat.html" class="btn btn-outline-special">← Vorheriges</a>
|
||||
<a style="text-decoration:none;" href="fire.html" class="btn btn-outline-special">Nachfolgendes →</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
<div class="card bg-dark" style="width: 24rem;">
|
||||
|
||||
<div class="card-header" style="font-family: 'Comic Sans MS', cursive, sans-serif;color:#ffffff;">
|
||||
<br>
|
||||
<b style="font-size:20pt;">Der Herbst</b>
|
||||
<br>
|
||||
<small>von Eduard Mörike</small>
|
||||
<p></p>
|
||||
</div>
|
||||
|
||||
<div class="card-body" style="font-family: 'Comic Sans MS', cursive, sans-serif;color:#ffffff;">
|
||||
<p style="font-size:12pt;">
|
||||
Im Nebel ruhet noch die Welt,<br>
|
||||
Noch träumen Wald und Wiesen:<br>
|
||||
Bald siehst du, wenn der Schleier fällt,<br>
|
||||
Den blauen Himmel unverstellt,<br>
|
||||
Herbstkräftig die gedämpfte Welt<br>
|
||||
In warmem Golde fließen.<br>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card-footer">
|
||||
<center>
|
||||
<form action="../poems_uebersicht.html#fire-poem"><input type="submit" class="btn btn-outline-special" value="← Zurück zur Gedichtübersicht"></form>
|
||||
<p></p>
|
||||
<form action="../index.html"><input type="submit" class="btn btn-outline-special" value="← Zurück zur Hauptseite"></form>
|
||||
</center>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</center>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,55 @@
|
||||
<!doctype html>
|
||||
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Weihnachten | Gedichte</title>
|
||||
<link rel="icon" href="../static/media/icon.png">
|
||||
<link rel="stylesheet" href="../static/css/base.css">
|
||||
</head>
|
||||
|
||||
<body style="background-image: url('../static/media/pics/karo.jpg');">
|
||||
<center>
|
||||
<div class="card bg-dark" style="width: 24rem;">
|
||||
<div class="card-body" style="font-family: 'Comic Sans MS', cursive, sans-serif;color:#ffffff;">
|
||||
<a style="text-decoration:none;" href="fire.html" class="btn btn-outline-special">← Vorheriges</a>
|
||||
<a style="text-decoration:none;" href="../logikgatter/xor.html" class="btn btn-outline-special">Nachfolgendes →</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
<div class="card bg-dark" style="width: 24rem;">
|
||||
|
||||
<div class="card-header" style="font-family: 'Comic Sans MS', cursive, sans-serif;color:#ffffff;">
|
||||
<br>
|
||||
<b style="font-size:20pt;">Weihnachten</b>
|
||||
<br>
|
||||
<small>von Joseph von Eichendorff</small>
|
||||
<p></p>
|
||||
</div>
|
||||
|
||||
<div class="card-body" style="font-family: 'Comic Sans MS', cursive, sans-serif;color:#ffffff;">
|
||||
<p style="font-size:12pt;">
|
||||
Markt und Straßen stehn verlassen,<br>Still erleuchtet jedes Haus,<br>
|
||||
Sinnend geh ich durch die Gassen,<br>alles sieht so friedlich aus.<br><br>
|
||||
An den Fenstern haben Frauen<br>Buntes Spielzeug fromm geschmückt<br>
|
||||
Tausend Kindlein stehn und schauen,<br>Sind so wunderstill beglückt.<br><br>
|
||||
Und ich wandre aus den Mauern<br>Bis hinaus ins freie Feld,<br>
|
||||
Hehres Glänzen, heilges Schauern!<br>Wie so weit und still die Welt!<br><br>
|
||||
Sterne hoch die Kreise schlingen,<br>Aus des Schnees Einsamkeit<br>
|
||||
Steigts wie wunderbares Singen –<br>Oh du gnadenreiche Zeit!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card-footer">
|
||||
<center>
|
||||
<form action="../poems_uebersicht.html#fire-poem"><input type="submit" class="btn btn-outline-special" value="← Zurück zur Gedichtübersicht"></form>
|
||||
<p></p>
|
||||
<form action="../index.html"><input type="submit" class="btn btn-outline-special" value="← Zurück zur Hauptseite"></form>
|
||||
</center>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</center>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,74 @@
|
||||
<!doctype html>
|
||||
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Das Feuer | Gedichte</title>
|
||||
<link rel="icon" href="../static/media/icon.png">
|
||||
<link rel="stylesheet" href="../static/css/base.css">
|
||||
</head>
|
||||
|
||||
|
||||
<body style="background-image: url('../static/media/pics/karo.jpg');">
|
||||
<center>
|
||||
<div class="card bg-dark" style="width: 24rem;">
|
||||
<div class="card-body" style="font-family: 'Comic Sans MS', cursive, sans-serif;color:#ffffff;">
|
||||
<a style="text-decoration:none;" href="autmn.html" class="btn btn-outline-special">← Vorheriges</a>
|
||||
<a style="text-decoration:none;" href="mouse.html" class="btn btn-outline-special">Nachfolgendes →</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
<div class="card bg-dark" style="width: 24rem;">
|
||||
|
||||
<div class="card-header" style="font-family: 'Comic Sans MS', cursive, sans-serif;color:#ffffff;">
|
||||
<br>
|
||||
<b style="font-size:20pt;">Das Feuer</b>
|
||||
<br>
|
||||
<small>von James Krüss</small>
|
||||
<p></p>
|
||||
</div>
|
||||
|
||||
<div class="card-body" style="font-family: 'Comic Sans MS', cursive, sans-serif;color:#ffffff;">
|
||||
<p style="font-size:12pt;">
|
||||
Hörst du, wie die Flammen flüstern,<br>
|
||||
knicken, knacken, krachen, knistern,<br>
|
||||
wie das Feuer rauscht und saust,<br>
|
||||
brodelt brutzelt, brennt und braust?<br><br>
|
||||
Siehst du wie die Flammen lecken<br>
|
||||
züngeln und die Zunge blecken,<br>
|
||||
wie das Feuer tanzt und zuckt,<br>
|
||||
trockene Hölzer schlingt und schluckt?<br><br>
|
||||
Riechst du, wie die Flammen rauchen,<br>
|
||||
brenzlig, brutzlig, brandig schmauchen,<br>
|
||||
wie das Feuer rot und schwarz,<br>
|
||||
duftet, schmeckt nach Pech und Harz<br><br>
|
||||
Fühlst du, wie die Flammen schwärmen,<br>
|
||||
Glut aushauchen, wohlig wärmen,<br>
|
||||
wie das Feuer, flackrig - wild,<br>
|
||||
dich in warme Wellen hüllt?<br><br>
|
||||
Hörst du, wie es leiser knackt?<br>
|
||||
Siehst du, wie es matter flackt?<br>
|
||||
Riechst du, wie der Rauch verzieht?<br>
|
||||
Fühlst du, wie die Wärme flieht?<br>
|
||||
Kleiner wird der Feuerbraus:<br>
|
||||
Ein letztes Knistern,<br>
|
||||
ein feines Flüstern,<br>
|
||||
ein schwaches Züngeln,<br>
|
||||
ein dünnes Ringeln,<br>
|
||||
aus
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card-footer">
|
||||
<center>
|
||||
<form action="../poems_uebersicht.html#fire-poem"><input type="submit" class="btn btn-outline-special" value="← Zurück zur Gedichtübersicht"></form>
|
||||
<p></p>
|
||||
<form action="../index.html"><input type="submit" class="btn btn-outline-special" value="← Zurück zur Hauptseite"></form>
|
||||
</center>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</center>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,51 @@
|
||||
<!doctype html>
|
||||
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Die schlaue Maus | Gedichte</title>
|
||||
<link rel="icon" href="../static/media/icon.png">
|
||||
<link rel="stylesheet" href="../static/css/base.css">
|
||||
</head>
|
||||
|
||||
<body style="background-image: url('../static/media/pics/karo.jpg');">
|
||||
<center>
|
||||
<div class="card bg-dark" style="width: 24rem;">
|
||||
<div class="card-body" style="font-family: 'Comic Sans MS', cursive, sans-serif;color:#ffffff;">
|
||||
<a style="text-decoration:none;" href="fire.html" class="btn btn-outline-special">← Vorheriges</a>
|
||||
<a style="text-decoration:none;" href="christmas.html" class="btn btn-outline-special">Nachfolgendes →</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
<div class="card bg-dark" style="width: 24rem;">
|
||||
|
||||
<div class="card-header" style="font-family: 'Comic Sans MS', cursive, sans-serif;color:#ffffff;">
|
||||
<br>
|
||||
<b style="font-size:20pt;">Die schlaue Maus</b>
|
||||
<br>
|
||||
<small>von Robin Lulay</small>
|
||||
<p></p>
|
||||
</div>
|
||||
|
||||
<div class="card-body" style="font-family: 'Comic Sans MS', cursive, sans-serif;color:#ffffff;">
|
||||
<p style="font-size:12pt;">
|
||||
Die kleine schlaue Maus,<br>
|
||||
Sie trickst die Katze aus.<br>
|
||||
Doch die Katze ist nicht dumm,<br>
|
||||
sie macht im Raum gleich bummmmmmm.<br>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card-footer">
|
||||
<center>
|
||||
<form action="../poems_uebersicht.html#mouse-poem"><input type="submit" class="btn btn-outline-special" value="← Zurück zur Übersicht"></form>
|
||||
<p></p>
|
||||
<form action="../index.html"><input type="submit" class="btn btn-outline-special" value="← Zurück zur Hauptseite"></form>
|
||||
</center>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</center>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,43 @@
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="static/css/base.css">
|
||||
<link rel="stylesheet" href="static/css/index.css">
|
||||
<link rel="icon" href="static/media/icon.png">
|
||||
<title>Gedichte | Übersicht</title>
|
||||
</head>
|
||||
|
||||
<body class="bg-dark">
|
||||
|
||||
<div class="header">
|
||||
<form action="index.html#gedichte"><input type="submit" class="btn btn-outline-special" value="← Zurück"></form>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="row" onclick="location='poems/autmn.html'" id="autmn-poem">
|
||||
<img class="col-6" src="static/media/pics/atumn.jpg">
|
||||
<div class="col-4 right">
|
||||
<b><a href="poems/autmn.html" class="transitioned-link"><h1 style="font-family: 'Comic Sans MS', cursive, sans-serif;">Der Herbst</h1></a></b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" onclick="location='poems/fire.html'" id="fire-poem">
|
||||
<img class="col-6" src="static/media/pics/fire.jpg">
|
||||
<div class="col-4 left">
|
||||
<b><a href="poems/fire.html" class="transitioned-link"><h1 style="font-family: 'Comic Sans MS', cursive, sans-serif;">Das Feuer</h1></a></b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" onclick="location='poems/mouse.html'" id="christmas-poem">
|
||||
<img class="col-6" src="static/media/pics/mouse_poem.jpeg">
|
||||
<div class="col-4 right">
|
||||
<b><a href="poems/christmas.html" class="transitioned-link"><h1 style="font-family: 'Comic Sans MS', cursive, sans-serif;">Die schlaue Maus</h1></a></b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" onclick="location='poems/christmas.html'" id="christmas-poem">
|
||||
<img class="col-6" src="static/media/pics/christmas.jpg">
|
||||
<div class="col-4 left">
|
||||
<b><a href="poems/fire.html" class="transitioned-link"><h1 style="font-family: 'Comic Sans MS', cursive, sans-serif;">Weihnachten</h1></a></b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,439 @@
|
||||
@font-face {
|
||||
font-family: 'Nunito';
|
||||
src: url('static/fonts/Nunito-Bold.ttf') format('truetype'),
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 801px) {
|
||||
|
||||
body {margin:25px;}
|
||||
|
||||
div.row {
|
||||
border-radius: 5pt;
|
||||
width: 100%;
|
||||
background-color: #985645;
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
margin-bottom: 25px;
|
||||
transition: opacity 0.9s;
|
||||
}
|
||||
|
||||
div.row:hover {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
div.row > img.col-6 {
|
||||
border-top-left-radius: 5pt;
|
||||
border-top-right-radius: 5pt;
|
||||
border-bottom-right-radius: 5pt;
|
||||
border-bottom-left-radius: 5pt;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
div.row > div.col-4.right {
|
||||
width: 40%;
|
||||
display: inline;
|
||||
float: right;
|
||||
|
||||
margin-top: 15%;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
div.row > div.col-4.left {
|
||||
width: 40%;
|
||||
display: inline;
|
||||
float: left;
|
||||
|
||||
margin-top: 15%;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media only screen and (max-width: 800px) {
|
||||
body {margin:25px;}
|
||||
|
||||
div.row {
|
||||
border-radius: 5pt;
|
||||
width: 100%;
|
||||
background-color: #985645;
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
margin-bottom: 25px;
|
||||
transition: opacity 0.9s;
|
||||
}
|
||||
|
||||
div.row:hover {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
div.row > img.col-6 {
|
||||
border-top-left-radius: 5pt;
|
||||
border-top-right-radius: 5pt;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
div.row > div.col-4.right {
|
||||
text-align: center;
|
||||
padding: 20px 40px;
|
||||
}
|
||||
|
||||
div.row > div.col-4.left {
|
||||
text-align: center;
|
||||
padding: 20px 40px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
::-moz-selection { /* Code für Firefox */
|
||||
background: #ff5533;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: #ff5533;
|
||||
}
|
||||
|
||||
.bg-dark {
|
||||
background-color: #1a2b49;
|
||||
}
|
||||
|
||||
.font-nunito-bold {
|
||||
font-family: 'Nunito';
|
||||
}
|
||||
|
||||
.transitioned-link {
|
||||
transition: color 1s;
|
||||
text-decoration: none;
|
||||
color: #000000;
|
||||
}
|
||||
.transitioned-link:hover {color: #32C759;}
|
||||
|
||||
|
||||
.mb-3 {
|
||||
margin-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
font-weight: 400;
|
||||
color: #212529;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
border-radius: 0.0rem;
|
||||
transition: color 0.30s ease-in-out, background-color 0.30s ease-in-out, border-color 1.0s ease-in-out, box-shadow 0.10s ease-in-out;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.btn {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
color: #212529;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn:focus, .btn.focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.btn.disabled, .btn:disabled {
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.btn:not(:disabled):not(.disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a.btn.disabled,
|
||||
fieldset:disabled a.btn {
|
||||
pointer-events: none;
|
||||
}
|
||||
.btn-outline-special {
|
||||
color: #28a745;
|
||||
border-color: #28a745;
|
||||
}
|
||||
|
||||
.btn-outline-special:hover {
|
||||
color: #fff;
|
||||
background-color: #007bff;
|
||||
border-color: #007bff;
|
||||
}
|
||||
|
||||
.btn-outline-special:focus, .btn-outline-special.focus {
|
||||
}
|
||||
|
||||
.btn-outline-special:not(:disabled):not(.disabled):active, .btn-outline-special:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-outline-special.dropdown-toggle {
|
||||
color: #fff;
|
||||
background-color: #007bff;
|
||||
border-color: #007bff;
|
||||
}
|
||||
|
||||
.btn-outline-special:not(:disabled):not(.disabled):active:focus, .btn-outline-special:not(:disabled):not(.disabled).active:focus,
|
||||
.show > .btn-outline-special.dropdown-toggle:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
|
||||
}
|
||||
|
||||
.bg-dark {
|
||||
background-color: #343a40 !important;
|
||||
}
|
||||
|
||||
a.bg-dark:hover, a.bg-dark:focus,
|
||||
button.bg-dark:hover,
|
||||
button.bg-dark:focus {
|
||||
background-color: #1d2124 !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
word-wrap: break-word;
|
||||
background-color: #fff;
|
||||
background-clip: border-box;
|
||||
border: 1px solid rgba(0, 0, 0, 0.125);
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.card > hr {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.card > .list-group {
|
||||
border-top: inherit;
|
||||
border-bottom: inherit;
|
||||
}
|
||||
|
||||
.card > .list-group:first-child {
|
||||
border-top-width: 0;
|
||||
border-top-left-radius: calc(0.25rem - 1px);
|
||||
border-top-right-radius: calc(0.25rem - 1px);
|
||||
}
|
||||
|
||||
.card > .list-group:last-child {
|
||||
border-bottom-width: 0;
|
||||
border-bottom-right-radius: calc(0.25rem - 1px);
|
||||
border-bottom-left-radius: calc(0.25rem - 1px);
|
||||
}
|
||||
|
||||
.card > .card-header + .list-group,
|
||||
.card > .list-group + .card-footer {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
min-height: 1px;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
margin-top: -0.375rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card-text:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card-link:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.card-link + .card-link {
|
||||
margin-left: 1.25rem;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: 0.75rem 1.25rem;
|
||||
margin-bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
|
||||
.card-header:first-child {
|
||||
border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
padding: 0.75rem 1.25rem;
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
|
||||
.card-footer:last-child {
|
||||
border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);
|
||||
}
|
||||
|
||||
.card-header-tabs {
|
||||
margin-right: -0.625rem;
|
||||
margin-bottom: -0.75rem;
|
||||
margin-left: -0.625rem;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.card-header-pills {
|
||||
margin-right: -0.625rem;
|
||||
margin-left: -0.625rem;
|
||||
}
|
||||
|
||||
.card-img-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 1.25rem;
|
||||
border-radius: calc(0.25rem - 1px);
|
||||
}
|
||||
|
||||
.card-img,
|
||||
.card-img-top,
|
||||
.card-img-bottom {
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card-img,
|
||||
.card-img-top {
|
||||
border-top-left-radius: calc(0.25rem - 1px);
|
||||
border-top-right-radius: calc(0.25rem - 1px);
|
||||
}
|
||||
|
||||
.card-img,
|
||||
.card-img-bottom {
|
||||
border-bottom-right-radius: calc(0.25rem - 1px);
|
||||
border-bottom-left-radius: calc(0.25rem - 1px);
|
||||
}
|
||||
|
||||
.card-deck .card {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.card-deck {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-flow: row wrap;
|
||||
flex-flow: row wrap;
|
||||
margin-right: -15px;
|
||||
margin-left: -15px;
|
||||
}
|
||||
.card-deck .card {
|
||||
-ms-flex: 1 0 0%;
|
||||
flex: 1 0 0%;
|
||||
margin-right: 15px;
|
||||
margin-bottom: 0;
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-group > .card {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.card-group {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-flow: row wrap;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
.card-group > .card {
|
||||
-ms-flex: 1 0 0%;
|
||||
flex: 1 0 0%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.card-group > .card + .card {
|
||||
margin-left: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
.card-group > .card:not(:last-child) {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.card-group > .card:not(:last-child) .card-img-top,
|
||||
.card-group > .card:not(:last-child) .card-header {
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.card-group > .card:not(:last-child) .card-img-bottom,
|
||||
.card-group > .card:not(:last-child) .card-footer {
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.card-group > .card:not(:first-child) {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
.card-group > .card:not(:first-child) .card-img-top,
|
||||
.card-group > .card:not(:first-child) .card-header {
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
.card-group > .card:not(:first-child) .card-img-bottom,
|
||||
.card-group > .card:not(:first-child) .card-footer {
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-columns .card {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.card-columns {
|
||||
-webkit-column-count: 3;
|
||||
-moz-column-count: 3;
|
||||
column-count: 3;
|
||||
-webkit-column-gap: 1.25rem;
|
||||
-moz-column-gap: 1.25rem;
|
||||
column-gap: 1.25rem;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
}
|
||||
.card-columns .card {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color:#ff5533;
|
||||
transition: color 1s;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color:#FFA18E;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
After Width: | Height: | Size: 205 KiB |
|
After Width: | Height: | Size: 195 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 490 KiB |
|
After Width: | Height: | Size: 1.7 MiB |
|
After Width: | Height: | Size: 90 KiB |
|
After Width: | Height: | Size: 74 KiB |
|
After Width: | Height: | Size: 112 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 84 KiB |
|
After Width: | Height: | Size: 144 KiB |
|
After Width: | Height: | Size: 913 KiB |
|
After Width: | Height: | Size: 123 KiB |
|
After Width: | Height: | Size: 8.6 KiB |
|
After Width: | Height: | Size: 51 KiB |
|
After Width: | Height: | Size: 177 KiB |
|
After Width: | Height: | Size: 78 KiB |
|
After Width: | Height: | Size: 39 KiB |
|
After Width: | Height: | Size: 193 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 152 KiB |
|
After Width: | Height: | Size: 337 KiB |
|
After Width: | Height: | Size: 195 KiB |
|
After Width: | Height: | Size: 922 B |