This commit is contained in:
@@ -0,0 +1,97 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Übung optional 01: Kontaktformular</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<div class="alert alert-primary">
|
||||
<h2>Übung optional 01: Kontaktformular</h2>
|
||||
|
||||
<p>
|
||||
Erweitere das bestehende Kontaktformular mithilfe von Bootstrap-Komponenten um persönliche Angaben (Anrede
|
||||
per Radio-Buttons) sowie eine strukturierte Adressabfrage (Straße, Hausnummer, PLZ, Ort und Länderauswahl).
|
||||
Achte dabei auf ein responsives Grid-Layout und eine semantisch korrekte Verknüpfung von Labels und
|
||||
Eingabefeldern (for und id).
|
||||
</p>
|
||||
</div>
|
||||
<div class="container py-5">
|
||||
<h1>Kontakt</h1>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, iste?</p>
|
||||
<form class="form-contact">
|
||||
<div class="row">
|
||||
<!-- .col>.mb-3>label.form-label -->
|
||||
<div class="col-12 col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="input-firstname" class="form-label">First name:</label>
|
||||
<input
|
||||
type="text"
|
||||
name="firstname"
|
||||
id="input-firstname"
|
||||
class="form-control input-firstname"
|
||||
required />
|
||||
</div>
|
||||
</div>
|
||||
<!-- ▲ /col ▲ -->
|
||||
<!-- .col>.mb-3>label.form-label -->
|
||||
<div class="col-12 col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="input-lastname" class="form-label">Last name:</label>
|
||||
<input type="text" name="lastname" id="input-lastname" class="form-control input-lastname" required />
|
||||
</div>
|
||||
</div>
|
||||
<!-- ▲ /col ▲ -->
|
||||
</div>
|
||||
<!-- .row>.col>.mb-3>label.form-label+input:email.form-control -->
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="mb-3">
|
||||
<label for="input-email" class="form-label">E-mail</label>
|
||||
<input type="email" name="email" id="input-email" class="form-control input-email" required />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="mb-3">
|
||||
<label for="input-subject" class="form-label">Subject</label>
|
||||
<input type="text" name="subject" id="input-subject" class="form-control input-subject" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- .row>.col>.mb-3>label.form-label+textarea.form-control -->
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="mb-3">
|
||||
<label for="textarea-message" class="form-label">Message</label>
|
||||
|
||||
<textarea
|
||||
name="message"
|
||||
id="textarea-message"
|
||||
cols="12"
|
||||
rows="8"
|
||||
class="form-control textarea-message"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- .row>.col>.mb-3>button:submit.btn.btn-dark.button-submit -->
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="mb-3">
|
||||
<button type="submit" class="btn btn-dark button-submit">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,106 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Übung 19 und 20: Die dunkle Seite von JavaScript</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<div class="alert alert-primary">
|
||||
<h2>Übung 19: Die dunkle Seite von JavaScript</h2>
|
||||
<p>
|
||||
Programmieren Sie nun Stück für Stück ein kleines Quiz, in dem ein Spieler Fragen zu JS beantworten muss und
|
||||
damit gegen Fehler und schlechten Code — also die dunkle Seite von JS — antritt. Möge der Source mit Ihnen
|
||||
sein.
|
||||
</p>
|
||||
<ol class="list">
|
||||
<li>
|
||||
<p>
|
||||
Als ersten Schritt fragen Sie den Spieler nach seinem Namen, speichern diesen in eine Variable und
|
||||
begrüßen ihn mittels einer Alert-Box. Ergänzen Sie den folgenden Code:
|
||||
</p>
|
||||
<pre>
|
||||
<code> 'use strict'; let username = … alert(…); </code></pre>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
Stellen Sie dem Spieler die Frage, ob er sich fit genug fühlt, um gegen das dunkle JavaScript
|
||||
anzutreten. Es ist sinnvoll, bei der Frage die Antwortmöglichkeiten anzugeben. Die Antwort speichern Sie
|
||||
in einer neuen Variable und erstellen als Nächstes eine
|
||||
<code>if</code>-Verzweigung. Der Rumpf des <code>if</code> soll nur ausgewertet werden, wenn der Spieler
|
||||
bestätigt, dass er sich stark genug fühlt, das Spiel zu beginnen. In den Rumpf schreiben wir ein
|
||||
<code>alert</code>, das den Spielstart bestätigt und den Spieler anfeuert.
|
||||
</p>
|
||||
<p>
|
||||
Für den Fall, dass der Spieler zu feige ist und einen mangelnden Fitness-Grad angegeben hat, schreiben
|
||||
Sie eine weitere
|
||||
<code>if</code>-Verzweigung, die den Fall abfängt und den Spieler mit Schimpf und Schande verabschiedet.
|
||||
Natürlich dürfen Sie auch freundlich bleiben — ganz wie Sie mögen.
|
||||
</p>
|
||||
<blockquote>
|
||||
<strong>Tipp:</strong> Schon während Sie das Programm entwickeln, sollten Sie es immer wieder testen.
|
||||
Führen Sie nach jeder Änderung das Programm erneut aus!
|
||||
</blockquote>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
Nun kann es losgehen. Stellen Sie den Spieler vor seine erste Aufgabe. Deklarieren Sie nach dem alert
|
||||
eine neue Variable, in der Sie die Antwort des Spielers zu folgender Frage speichern:<br />
|
||||
<code>»Which Operator has the higher priority: * or + ?«</code>
|
||||
</p>
|
||||
<p>
|
||||
Um auf die Antwort reagieren zu können, schreiben Sie eine weitere
|
||||
<code>if</code>-Verzweigung, deren Rumpf nur ausgewertet wird, wenn die Antwort stimmt.
|
||||
</p>
|
||||
<p>
|
||||
<code>alert</code> gratuliert hier zur korrekten Antwort. Wenn Sie mögen, können Sie noch weitere
|
||||
Verzweigungen mit Fragen einbauen.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
Fügen Sie ein weiteres <code>if</code> für die Variante ein, in der der Spieler eine falsche Antwort
|
||||
gibt.
|
||||
</p>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="alert alert-primary">
|
||||
<h2>Übung 20: Die dunkle Seite von JavaScript</h2>
|
||||
<p>
|
||||
Für Ihr Spiel ist else ebenfalls hilfreich. Zum Beispiel bei der Frage, ob der Spieler bereit zum Spielen
|
||||
ist. Statt hier ein zweites
|
||||
<code>if</code> einzubauen, können Sie <code>else</code> verwenden.
|
||||
</p>
|
||||
<p>Ersetzen Sie die <code>if</code>-Anweisungen an den richtigen Stellen durch ein <code>else</code>:</p>
|
||||
</div>
|
||||
<div class="alert alert-primary">
|
||||
<h2>Übung 23: Die dunkle Seite schlägt zurück…</h2>
|
||||
<p>
|
||||
Endlich setzen Sie Ihren Kampf gegen die dunkle Seite von JS fort (siehe Übung 20) und erstellen zwei neue
|
||||
»Kampf-Sequenzen«:
|
||||
</p>
|
||||
<ul class="list">
|
||||
<li>»What's the German word for if« (Mehrere Lösungsmöglichkeiten: wenn, falls).</li>
|
||||
<li>»Now, please enter a string with a length between 8 and 15 characters…«</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const QUESTION_1 = 'Which Operators has the higher priority: * or + ?';
|
||||
const SOLUTION_1 = '*';
|
||||
|
||||
// 1.Als ersten Schritt fragen Sie den Spieler nach seinem Namen, speichern diesen in eine Variable und begrüßen ihn mittels einer Alert-Box.
|
||||
|
||||
// 2.Stellen Sie dem Spieler die Frage, ob er sich fit genug fühlt, um gegen das dunkle JavaScript anzutreten. Es ist sinnvoll, bei der Frage die Antwortmöglichkeiten anzugeben.
|
||||
|
||||
// 3.Nun kann es losgehen. Stellen Sie den Spieler vor seine erste Aufgabe.
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,44 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Übung 21: Die Sache mit dem Schaltjahr</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<div class="alert alert-primary">
|
||||
<h2>Übung 21: Die Sache mit dem Schaltjahr</h2>
|
||||
<p>
|
||||
Vielleicht gehören Sie zu den Menschen, die »die Sache mit dem Schaltjahr« spannend finden. Und falls Sie es
|
||||
nicht spannend finden, schreiben Sie einfach trotzdem ein Programm, das berechnet, ob es sich bei einem Jahr
|
||||
um ein Schaltjahr handelt.
|
||||
</p>
|
||||
<p>Fragen Sie den Anwender nach dem gewünschten Jahr und speichern Sie die Eingabe in einer Variable.</p>
|
||||
<p>
|
||||
Falls das betreffende Jahr ein Schaltjahr ist, soll die Konsole z.B. den Satz »0000 ist ein Schaltjahr!«
|
||||
ausgeben; ansonsten »0000 ist KEIN Schaltjahr« — mit dem eingegeben Jahr statt 0000.
|
||||
</p>
|
||||
<h4>Ein Jahr ist ein Schaltjahr, wenn das betreffende Jahr</h4>
|
||||
<ul>
|
||||
<li>ganzzahlig durch 400 teilbar ist.</li>
|
||||
<li>nicht ganzzahlig durch 100, aber ganzzahlig durch 4 teilbar ist.</li>
|
||||
</ul>
|
||||
|
||||
<div class="alert alert-warning">
|
||||
Die Berechnung ist übrigens nicht zu 100 Prozent genau, aber für die nächsten 2000 Jahre passt es noch.
|
||||
</div>
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const year = Number(prompt('please enter year:'));
|
||||
const outputEl = document.querySelector('.output');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
@@ -0,0 +1,37 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>if - Verzweigung</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<h1>if - Verzweigung</h1>
|
||||
<p>
|
||||
<code>if (BEDINGUNG) { /* ANWEISUNGEN */ }</code>
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const SOLUTION = 42;
|
||||
|
||||
// prefer-const
|
||||
const answer = Number(prompt("What's the result of 6 * 7"));
|
||||
|
||||
if (answer === SOLUTION) {
|
||||
console.log('42 is correct.');
|
||||
console.log('Congratulations, You are a genius!');
|
||||
}
|
||||
|
||||
// Bei nur einer Anweisung können die {}- Klammern weggelassen werden.
|
||||
if (answer === SOLUTION) console.log('42 is correct.');
|
||||
|
||||
console.log('weiter im code...');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,35 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>if - Verzweigung</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<h1>if - Verzweigung</h1>
|
||||
<p>
|
||||
<code>if (BEDINGUNG) { /* ANWEISUNGEN */ }</code>
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const DISCOUNT = 0.05;
|
||||
|
||||
const quantityOfCartItem = Number(prompt('Quantity of the item?'));
|
||||
const pricePerItem = 20; // just to simulate the real price here
|
||||
|
||||
let totalPrice = quantityOfCartItem * pricePerItem;
|
||||
|
||||
if (quantityOfCartItem >= 3) {
|
||||
totalPrice = totalPrice * (1 - DISCOUNT);
|
||||
}
|
||||
|
||||
console.log(`total Price: $${totalPrice.toFixed(2)}`);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,36 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>if - Verzweigung</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<h1>if - Verzweigung</h1>
|
||||
<p>
|
||||
<code> if (BEDINGUNG) { /* ANWEISUNGEN */ } else { /* ANSONSTEN ANWEISUNGEN */ } </code>
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const SOLUTION = 42;
|
||||
|
||||
// prefer-const
|
||||
const answer = Number(prompt("What's the result of 6 * 7"));
|
||||
|
||||
if (answer === SOLUTION) {
|
||||
console.log('42 is correct.');
|
||||
console.log('Congratulations, You are a genius!');
|
||||
} else {
|
||||
console.log("Wrong. Math isn't exactly your strong point, is it?");
|
||||
}
|
||||
|
||||
console.log('weiter im code...');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,40 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Ternärer Operator | Tertiärer Operator</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<h1>Ternärer Operator | Tertiärer Operator</h1>
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const ouputEl = document.querySelector('.output');
|
||||
|
||||
const productCategory = 'books';
|
||||
const netPrice = 10;
|
||||
|
||||
// let taxRate;
|
||||
|
||||
// if (productCategory === 'books') {
|
||||
// taxRate = 1.07;
|
||||
// } else {
|
||||
// taxRate = 1.19;
|
||||
// }
|
||||
|
||||
// Ternärer Operator
|
||||
const taxRate = (productCategory === 'books') ? 1.07 : 1.19; // prettier-ignore
|
||||
|
||||
const totalPrice = netPrice * taxRate;
|
||||
|
||||
console.log(totalPrice.toFixed(2)); // => 10.70
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -12009,6 +12009,9 @@ h6,
|
||||
.menu-main ul.list {
|
||||
display: flex;
|
||||
}
|
||||
.menu-main ul.list li a {
|
||||
outline: none;
|
||||
}
|
||||
.menu-main ul.list li a:hover, .menu-main ul.list li a:focus {
|
||||
color: #201e1f;
|
||||
background-color: #f2ebbf;
|
||||
@@ -12025,5 +12028,13 @@ h6,
|
||||
.menu-main ul.sublist {
|
||||
position: absolute;
|
||||
}
|
||||
.menu-main ul ul {
|
||||
display: none;
|
||||
}
|
||||
.menu-main ul > li:hover ul,
|
||||
.menu-main ul > li:focus ul,
|
||||
.menu-main ul > li:focus-within ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=main.css.map */
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,110 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Webseite mit HTML & CSS (SCSS)</title>
|
||||
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" /> -->
|
||||
<link rel="stylesheet" href="assets/css/main.css" />
|
||||
<script src="assets/js/main.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- header.header-main>.content-box>figure.logo-main>img+figc -->
|
||||
<header class="header-main">
|
||||
<div class="content-box">
|
||||
<figure class="logo-main">
|
||||
<img src="https://dummyimage.com/280x160/555/000.jpg" alt="Logo" />
|
||||
<figcaption>Logo - Slogan</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</header>
|
||||
<!-- nav.menu-main>ul.list>li*4>a[href="#"]{Link $} -->
|
||||
<nav class="menu-main">
|
||||
<ul class="list">
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
<li>
|
||||
<a href="#">Projects</a>
|
||||
<!-- ul.sublist>li*3>a[href="#"]{Project $} -->
|
||||
<ul class="sublist">
|
||||
<li><a href="#">Project 1</a></li>
|
||||
<li><a href="#">Project 2</a></li>
|
||||
<li><a href="#">Project 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="contact.html">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<h1>Kontakt</h1>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, iste?</p>
|
||||
<form class="form-contact">
|
||||
<div class="row">
|
||||
<!-- .col>.mb-3>label.form-label -->
|
||||
<div class="col-12 col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="input-firstname" class="form-label">First name:</label>
|
||||
<input
|
||||
type="text"
|
||||
name="firstname"
|
||||
id="input-firstname"
|
||||
class="form-control input-firstname"
|
||||
required />
|
||||
</div>
|
||||
</div>
|
||||
<!-- ▲ /col ▲ -->
|
||||
<!-- .col>.mb-3>label.form-label -->
|
||||
<div class="col-12 col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="input-lastname" class="form-label">Last name:</label>
|
||||
<input type="text" name="lastname" id="input-lastname" class="form-control input-lastname" required />
|
||||
</div>
|
||||
</div>
|
||||
<!-- ▲ /col ▲ -->
|
||||
</div>
|
||||
<!-- .row>.col>.mb-3>label.form-label+input:email.form-control -->
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="mb-3">
|
||||
<label for="input-email" class="form-label">E-mail</label>
|
||||
<input type="email" name="email" id="input-email" class="form-control input-email" required />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="mb-3">
|
||||
<label for="input-subject" class="form-label">Subject</label>
|
||||
<input type="text" name="subject" id="input-subject" class="form-control input-subject" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- .row>.col>.mb-3>label.form-label+textarea.form-control -->
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="mb-3">
|
||||
<label for="textarea-message" class="form-label">Message</label>
|
||||
|
||||
<textarea
|
||||
name="message"
|
||||
id="textarea-message"
|
||||
cols="12"
|
||||
rows="8"
|
||||
class="form-control textarea-message"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- .row>.col>.mb-3>button:submit.btn.btn-dark.button-submit -->
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="mb-3">
|
||||
<button type="submit" class="btn btn-dark button-submit">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -14,6 +14,7 @@
|
||||
display: flex;
|
||||
li {
|
||||
a {
|
||||
outline: none; // nur wenn focus definiert wurde und einen hohen Kontrast hat.
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $color-black;
|
||||
@@ -33,4 +34,16 @@
|
||||
ul.sublist {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
ul ul {
|
||||
display: none; // TODO: change to not visible
|
||||
}
|
||||
|
||||
ul > li:hover,
|
||||
ul > li:focus,
|
||||
ul > li:focus-within {
|
||||
ul {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
<!-- nav.menu-main>ul.list>li*4>a[href="#"]{Link $} -->
|
||||
<nav class="menu-main">
|
||||
<ul class="list">
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
<li>
|
||||
<a href="#">Projects</a>
|
||||
@@ -38,7 +38,6 @@
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<h1>Webseite mit HTML & CSS (SCSS)</h1>
|
||||
<div class="box"><span>BOX</span></div>
|
||||
<p>
|
||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem, earum? Harum fuga itaque a natus tempora
|
||||
dolor vero officiis eos tempore! Impedit nobis ea eum labore, aut assumenda nostrum dicta.
|
||||
|
||||
Reference in New Issue
Block a user