mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-06-28 21:00:56 +08:00
chore(i18n,learn): processed translations (#47582)
This commit is contained in:
camperbot
GitHub
parent
e973ddbb81
commit
593a32a890
@ -0,0 +1,61 @@
|
||||
---
|
||||
id: 5f344fc1520b6719f2e35605
|
||||
title: Schritt 9
|
||||
challengeType: 0
|
||||
dashedName: step-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Auf der Speisekarte gibt es zwei Abschnitte, einen für Kaffee und einen für die Desserts. Füge ein `section`-Element innerhalb des `main`-Elements hinzu, so dass du einen Platz hast, um alle verfügbaren Kaffeesorten zu zeigen.
|
||||
|
||||
# --hints--
|
||||
|
||||
Du solltest ein einleitendes `<section>`-Tag haben.
|
||||
|
||||
```js
|
||||
assert(code.match(/<section\s*>/i));
|
||||
```
|
||||
|
||||
Du solltest ein abschließendes `</section>`-Tag haben.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/section\s*>/i));
|
||||
```
|
||||
|
||||
Du solltest das vorhandene `main`-Element nicht ändern. Stelle sicher, dass du den abschließenden Tag nicht gelöscht hast.
|
||||
|
||||
```js
|
||||
assert($('main').length === 1);
|
||||
```
|
||||
|
||||
Dein `section`-Element sollte sich innerhalb deines `main`-Elements befinden.
|
||||
|
||||
```js
|
||||
const main = document.querySelectorAll('main')?.[0];
|
||||
assert(main.children[0].tagName === 'SECTION');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Cafe Menu</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
--fcc-editable-region--
|
||||
<main>
|
||||
</main>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 5f356ed60a5decd94ab66986
|
||||
title: Schritt 23
|
||||
challengeType: 0
|
||||
removeComments: false
|
||||
dashedName: step-23
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Kommentare in CSS sehen wie folgt aus:
|
||||
|
||||
```css
|
||||
/* comment here */
|
||||
```
|
||||
|
||||
Schreibe in deinem Stylesheet die Zeile mit der `background-color`- Eigenschaft und dem Wert aus, damit du die Wirkung des einzigen `div`-Stilelements sehen kannst. Dadurch wird der Hintergrund wieder weiß.
|
||||
|
||||
# --hints--
|
||||
|
||||
Du solltest die `background-color: burlywood;`-Zeile in deinem CSS auskommentieren.
|
||||
|
||||
```js
|
||||
assert(code.match(/\/\*\s*background-color:\s*burlywood;?\s*\*\//i));
|
||||
```
|
||||
|
||||
|
||||
Dein `body` sollte einen weißen Hintergrund haben.
|
||||
|
||||
```js
|
||||
const bodyCSS = $('body').css('background-color');
|
||||
assert(bodyCSS === "rgba(0, 0, 0, 0)")
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
--fcc-editable-region--
|
||||
background-color: burlywood;
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div {
|
||||
width: 300px;
|
||||
}
|
||||
```
|
||||
|
||||
@ -0,0 +1,76 @@
|
||||
---
|
||||
id: 5f356ed63c7807a4f1e6d054
|
||||
title: Schritt 22
|
||||
challengeType: 0
|
||||
dashedName: step-22
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Jetzt wollen wir, dass `div` nicht die gesamte Breite der Seite in Anspruch nimmt. Die CSS `width`-Eigenschaft ist dafür perfekt geeignet. Erstelle einen neuen Typselektor im Stylesheet, der deinem `div`-Element eine Breite von `300px` gibt.
|
||||
|
||||
# --hints--
|
||||
|
||||
Du solltest einen `div`-Typselektor haben.
|
||||
|
||||
```js
|
||||
const hasDiv = new __helpers.CSSHelp(document).getStyle('div');
|
||||
assert(hasDiv);
|
||||
```
|
||||
|
||||
Du solltest die `width`-Eigenschaft auf `300px` setzen.
|
||||
|
||||
```js
|
||||
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '300px');
|
||||
assert(hasWidth);
|
||||
```
|
||||
|
||||
Dein `div` sollte eine Breite von 300px haben.
|
||||
|
||||
```js
|
||||
const divWidth = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('width');
|
||||
assert(divWidth === '300px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
body {
|
||||
background-color: burlywood;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
@ -0,0 +1,74 @@
|
||||
---
|
||||
id: 5f356ed63e0fa262326eef05
|
||||
title: Schritt 24
|
||||
challengeType: 0
|
||||
dashedName: step-24
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Benutze jetzt den `div`-Selektor, um die Hintergrundfarbe des `div`-Elements auf `burlywood` zu setzen.
|
||||
|
||||
# --hints--
|
||||
|
||||
Du solltest die `background-color`-Eigenschaft auf `burlywood` setzen.
|
||||
|
||||
```js
|
||||
const hasBackgroundColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'burlywood');
|
||||
assert(hasBackgroundColor);
|
||||
```
|
||||
|
||||
Dein `div` sollte einen "burlywood" Hintergrund haben.
|
||||
|
||||
```js
|
||||
const divBackground = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('background-color');
|
||||
assert(divBackground === 'burlywood');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
/*
|
||||
background-color: burlywood;
|
||||
*/
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
div {
|
||||
width: 300px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@ -0,0 +1,75 @@
|
||||
---
|
||||
id: 5f356ed69db0a491745e2bb6
|
||||
title: Schritt 28
|
||||
challengeType: 0
|
||||
dashedName: step-28
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Füge, um den Stil der Klasse auf das `div`-Element anzuwenden, ein `class`-Attribut zum Öffnungstag des `div`-Elements hinzu und setze seinen Wert auf `menu`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dein `div` sollte weiterhin wiedergegeben werden. Stelle sicher, dass du das `<div>`-Tag nicht falsch gebildet hast.
|
||||
|
||||
```js
|
||||
assert($('div').length === 1);
|
||||
```
|
||||
|
||||
Dein `div`-Element sollte die `menu`-Klasse besitzen.
|
||||
|
||||
```js
|
||||
assert($('div').attr('class').includes('menu'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<div>
|
||||
--fcc-editable-region--
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
/*
|
||||
background-color: burlywood;
|
||||
*/
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
```
|
||||
|
||||
@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 5f356ed6cf6eab5f15f5cfe6
|
||||
title: Schritt 21
|
||||
challengeType: 0
|
||||
dashedName: step-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Das `div`-Element wird im Gegensatz zu anderen Inhaltselementen, die du bisher verwendet hast, hauptsächlich für Layoutzwecke verwendet. Füge ein `div`-Element im `body`-Element hinzu und verschiebe dann alle anderen Elemente innerhalb des neuen `div`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Du solltest einen einleitenden `<div>`-Tag haben.
|
||||
|
||||
```js
|
||||
assert(code.match(/<div>/i));
|
||||
```
|
||||
|
||||
Du solltest ein abschließendes `</div>`-Tag haben.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/div>/i));
|
||||
```
|
||||
|
||||
Du solltest dein vorhandenes `body`-Element nicht verändern. Stelle sicher, dass du das abschließende Tag nicht gelöscht hast.
|
||||
|
||||
```js
|
||||
assert($('body').length === 1);
|
||||
```
|
||||
|
||||
Dein `div`-Tag sollte innerhalb deines `body`-Elements verschachtelt sein.
|
||||
|
||||
```js
|
||||
const div = $('div')[0];
|
||||
assert(div.parentElement.tagName === 'BODY');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: burlywood;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
```
|
||||
|
||||
@ -0,0 +1,181 @@
|
||||
---
|
||||
id: 6140c7e645d8e905819f1dd4
|
||||
title: Schritt 1
|
||||
challengeType: 0
|
||||
dashedName: step-1
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Beginne mit dem standardmäßigen Boilerplate-Code. Füge deine `DOCTYPE`-Deklaration, dein `html`-Element mit der Sprache auf Englisch gesetzt, deine `head` und `body`-Elemente hinzu.
|
||||
|
||||
Füge dein `meta`-Element dem richtigen `charset` hinzu, dein `title`-Element, und ein `link`-Element für die `./styles.css`-Datei.
|
||||
|
||||
Setze den `title` auf `Ferris Wheel`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dein Code sollte die `DOCTYPE` Referenz beinhalten.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE/gi));
|
||||
```
|
||||
|
||||
Du solltest nach der `DOCTYPE` Referenz ein Leerzeichen einfügen.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+/gi));
|
||||
```
|
||||
|
||||
Du solltest den Dokumententyp als `html` definieren.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+html/gi));
|
||||
```
|
||||
|
||||
Du solltest die `DOCTYPE`-Deklaration mit einem `>` nach dem Typ schließen.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+html\s*>/gi));
|
||||
```
|
||||
|
||||
Dein `html`-Element sollte ein öffnendes Tag mit einem `lang`-Attribut von `en` haben.
|
||||
|
||||
```js
|
||||
assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>/gi));
|
||||
```
|
||||
|
||||
Dein `html`-Element sollte ein abschließendes Tag haben.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/html\s*>/));
|
||||
```
|
||||
|
||||
Deine `DOCTYPE`-Deklaration sollte am Anfang deines HTML stehen.
|
||||
|
||||
```js
|
||||
assert(__helpers.removeHtmlComments(code).match(/^\s*<!DOCTYPE\s+html\s*>/i));
|
||||
```
|
||||
|
||||
Du solltest einen einleitenden `head`-Tag haben.
|
||||
|
||||
```js
|
||||
assert(code.match(/<head\s*>/i));
|
||||
```
|
||||
|
||||
Du solltest einen abschließenden `head`-Tag haben.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/head\s*>/i));
|
||||
```
|
||||
|
||||
Du solltest einen öffnenden `body`-Tag haben.
|
||||
|
||||
```js
|
||||
assert(code.match(/<body\s*>/i));
|
||||
```
|
||||
|
||||
Du solltest einen abschließenden `body`-Tag haben.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/body\s*>/i));
|
||||
```
|
||||
|
||||
Die `head` und `body`- Elemente sollten Geschwister sein.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('head')?.nextElementSibling?.localName === 'body');
|
||||
```
|
||||
|
||||
Das `head`-Element sollte innerhalb des `html`-Elements sein.
|
||||
|
||||
```js
|
||||
assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head'));
|
||||
```
|
||||
|
||||
Das `body`-Element sollte innerhalb des `html`-Elements sein.
|
||||
|
||||
```js
|
||||
assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body'));
|
||||
```
|
||||
|
||||
Dein Code sollte ein `meta`-Element haben.
|
||||
|
||||
```js
|
||||
const meta = document.querySelector('meta');
|
||||
assert.exists(meta);
|
||||
```
|
||||
|
||||
Dein `meta`-Element sollte ein `charset`-Attribut mit dem Wert `UTF-8` haben.
|
||||
|
||||
```js
|
||||
assert.match(code, /<meta[\s\S]+?charset=('|"|`)UTF-8\1/i)
|
||||
```
|
||||
|
||||
Dein Code sollte ein `title`-Element haben.
|
||||
|
||||
```js
|
||||
const title = document.querySelector('title');
|
||||
assert.exists(title);
|
||||
```
|
||||
|
||||
Dein Projekt sollte einen Titel namens `Ferris Wheel` haben.
|
||||
|
||||
```js
|
||||
const title = document.querySelector('title');
|
||||
assert.equal(title?.text?.trim()?.toLowerCase(), 'ferris wheel')
|
||||
```
|
||||
|
||||
Denke daran, dass Schreibweise und Rechtschreibung für den Titel wichtig sind.
|
||||
|
||||
```js
|
||||
const title = document.querySelector('title');
|
||||
assert.equal(title?.text?.trim(), 'Ferris Wheel');
|
||||
```
|
||||
|
||||
Dein Code sollte ein `link`-Element haben.
|
||||
|
||||
```js
|
||||
assert.match(code, /<link/)
|
||||
```
|
||||
|
||||
Du solltest ein selbstschließendes `link`-Element haben.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('link').length === 1);
|
||||
```
|
||||
|
||||
Dein `link`-Element sollte sich innerhalb deines `head`-Elements befinden.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('head > link'));
|
||||
```
|
||||
|
||||
Dein `link`-Element sollte ein `rel`-Attribut mit dem Wert `stylesheet` haben.
|
||||
|
||||
```js
|
||||
const link_element = document.querySelector('link');
|
||||
const rel = link_element.getAttribute("rel");
|
||||
assert.equal(rel, "stylesheet");
|
||||
```
|
||||
|
||||
Dein `link`-Element sollte ein `href`-Attribut mit dem Wert `styles.css` haben.
|
||||
|
||||
```js
|
||||
const link = document.querySelector('link');
|
||||
assert.equal(link.dataset.href, "styles.css");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 6140c9d35015ae0ba0c250e8
|
||||
title: Schritt 2
|
||||
challengeType: 0
|
||||
dashedName: step-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Füge ein `div` innerhalb deines `body`-Elements ein und gib ihm eine `class` von `wheel`.
|
||||
|
||||
Füge in deinem neuen `div` sechs `span`-Elemente mit einer `class` von `line` sowie sechs `div`-Elemente mit einer `class` von `cabin` ein.
|
||||
|
||||
# --hints--
|
||||
|
||||
Du solltest ein neues `div` innerhalb deines `body`-Elements hinzufügen.
|
||||
|
||||
```js
|
||||
const divs = [...document.querySelector('body')?.children].filter(child => child?.localName === 'div');
|
||||
assert(divs?.length === 1);
|
||||
```
|
||||
|
||||
Dein `div` innerhalb deines `body`-Elements sollte eine `class` von `wheel` haben.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('body div')?.classList?.contains('wheel'));
|
||||
```
|
||||
|
||||
Dein `.wheel`-Element sollte sechs `span`-Elemente enthalten.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.wheel span')?.length === 6);
|
||||
```
|
||||
|
||||
Deine sechs `span`-Elemente innerhalb deines `.wheel`-Elements sollten eine `class` von `line` haben.
|
||||
|
||||
```js
|
||||
const spans = [...document.querySelectorAll('.wheel span')];
|
||||
assert(spans?.every(span => span?.classList?.contains('line')));
|
||||
assert(document.querySelectorAll('.line')?.length === 6);
|
||||
```
|
||||
|
||||
Dein `.wheel`-Element sollte sechs `div`-Elemente enthalten.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.wheel div')?.length === 6);
|
||||
```
|
||||
|
||||
Deine sechs `div`-Elemente innerhalb deines `.wheel`-Elements sollten eine `class` von `cabin` haben.
|
||||
|
||||
```js
|
||||
const divs = [...document.querySelectorAll('.wheel div')];
|
||||
assert(divs?.every(div => div?.classList?.contains('cabin')));
|
||||
assert(document.querySelectorAll('.cabin')?.length === 6);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Ferris Wheel</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,74 @@
|
||||
---
|
||||
id: 6140cbeec34e970dfe75e710
|
||||
title: Schritt 3
|
||||
challengeType: 0
|
||||
dashedName: step-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Erstelle einen Selektor für dein `.wheel`-Element. Beginne, indem du `border` auf `2px solid black` setzt, `border-radius` auf `50%` und `margin-left` auf `50px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Du solltest einen `.wheel`-Selektor haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.wheel'));
|
||||
```
|
||||
|
||||
Dein `.wheel`-Selektor sollte eine, auf `2px solid black` gesetzte, `border`-Eigenschaft haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.border === '2px solid black');
|
||||
```
|
||||
|
||||
Dein `.wheel`-Selektor sollte eine, auf `50%` gesetzte, `border-radius`-Eigenschaft haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.borderRadius === '50%');
|
||||
```
|
||||
|
||||
Dein `.wheel`-Selektor sollte eine, auf `50px` gesetzte, `margin-left`-Eigenschaft haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.marginLeft === '50px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Ferris Wheel</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="wheel">
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,72 @@
|
||||
---
|
||||
id: 6140cd32d018ed0f600eefce
|
||||
title: Schritt 4
|
||||
challengeType: 0
|
||||
dashedName: step-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Setze die `position`-Eigenschaft des `.wheel`-Selektors auf `absolute`. Setze sowohl die `height` als auch die `width` auf `55vw`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dein `.wheel`-Selektor sollte eine `position`-Eigenschaft von `absolute` haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.position === 'absolute');
|
||||
```
|
||||
|
||||
Dein `.wheel`-Selektor sollte eine `height`-Eigenschaft von `55vw` haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.height === '55vw');
|
||||
```
|
||||
|
||||
Dein `.wheel`-Selektor sollte eine `width`-Eigenschaft von `55vw` haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.width === '55vw');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Ferris Wheel</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="wheel">
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
.wheel {
|
||||
border: 2px solid black;
|
||||
border-radius: 50%;
|
||||
margin-left: 50px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,85 @@
|
||||
---
|
||||
id: 6140cdebd39d6a101e747529
|
||||
title: Schritt 6
|
||||
challengeType: 0
|
||||
dashedName: step-6
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Erstelle einen Selektor für deine `.line`-Elemente. Beginne, indem du `background-color` auf `black` setzt, `width` auf `50%` und `height` auf `2px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Du solltest einen `.line`-Selektor haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.line'));
|
||||
```
|
||||
|
||||
Dein `.line`-Selektor sollte eine `background-color`-Eigenschaft von `black` haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.line')?.backgroundColor === "black");
|
||||
```
|
||||
|
||||
Dein `.line`-Selektor sollte eine `width`-Eigenschaft von `50%` haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.line')?.width === "50%");
|
||||
```
|
||||
|
||||
Dein `.line`-Selektor sollte eine `height`-Eigenschaft von `2px` haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.line')?.height === "2px");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Ferris Wheel</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="wheel">
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
.wheel {
|
||||
border: 2px solid black;
|
||||
border-radius: 50%;
|
||||
margin-left: 50px;
|
||||
position: absolute;
|
||||
height: 55vw;
|
||||
width: 55vw;
|
||||
max-width: 500px;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,83 @@
|
||||
---
|
||||
id: 6140cfc08ca9c5128c3e6478
|
||||
title: Schritt 7
|
||||
challengeType: 0
|
||||
dashedName: step-7
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Setze die `position`-Eigenschaft des `.line`-Selektors auf `absolute`, die `left`-Eigenschaft auf `50%` und die `top`-Eigenschaft auf `50%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dein `.line`-Selektor sollte eine `position`-Eigenschaft von `absolute` haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.line')?.position === 'absolute');
|
||||
```
|
||||
|
||||
Dein `.line`-Selektor sollte eine `left`-Eigenschaft von `50%` haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.line')?.left === '50%');
|
||||
```
|
||||
|
||||
Dein `.line`-Selektor sollte eine `top`-Eigenschaft von `50%` haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.line')?.top === '50%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Ferris Wheel</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="wheel">
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
.wheel {
|
||||
border: 2px solid black;
|
||||
border-radius: 50%;
|
||||
margin-left: 50px;
|
||||
position: absolute;
|
||||
height: 55vw;
|
||||
width: 55vw;
|
||||
max-width: 500px;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.line {
|
||||
background-color: black;
|
||||
width: 50%;
|
||||
height: 2px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 6140d0069049f5139d78da40
|
||||
title: Schritt 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Die `transform-origin`-Eigenschaft wird zur Festlegung des Punkts, an welchem eine CSS-Transformation angewendet wird, genutzt. Möchtest du beispielsweise ein `rotate` durchführen (was du im späteren Projektverlauf machen wirst), legt `transform-origin` den Punkt fest, um welchen das Element rotiert.
|
||||
|
||||
Gib dem `.line`-Selektor eine `transform-origin`-Eigenschaft von `0% 0%`. Hierdurch wird der Ausgangspunkt um `0%` von links und um `0%` von oben verschoben, wodurch dieser auf die obere linke Ecke des Elements verschoben wird.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dein `.line`-Selektor sollte eine `transform-origin`-Eigenschaft von `0% 0%` haben.
|
||||
|
||||
```js
|
||||
const transformOrigin = new __helpers.CSSHelp(document).getStyle('.line')?.transformOrigin;
|
||||
assert(transformOrigin === '0% 0%' || transformOrigin === '0% 0% 0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Ferris Wheel</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="wheel">
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
.wheel {
|
||||
border: 2px solid black;
|
||||
border-radius: 50%;
|
||||
margin-left: 50px;
|
||||
position: absolute;
|
||||
height: 55vw;
|
||||
width: 55vw;
|
||||
max-width: 500px;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.line {
|
||||
background-color: black;
|
||||
width: 50%;
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,85 @@
|
||||
---
|
||||
id: 6140d10d50636e14695013b2
|
||||
title: Schritt 9
|
||||
challengeType: 0
|
||||
dashedName: step-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Erstelle einen, auf dein zweites `.line`-Element abzielenden, Selektor. Setze die `transform`-Eigenschaft auf `rotate(60deg)`.
|
||||
|
||||
Denk daran, dass die `transform`-Eigenschaft es dir erlaubt, die Form eines Elements zu verändern. In diesem Fall dreht der `rotate(60deg)`-Wert das Element um 60 Grad im Uhrzeigersinn, um seinen `transform-origin`-Punkt herum.
|
||||
|
||||
# --hints--
|
||||
|
||||
Du solltest einen `.line:nth-of-type(2)`-Selektor erstellen.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(2)'));
|
||||
```
|
||||
|
||||
Dein `.line:nth-of-type(2)`-Selektor sollte eine, auf `rotate(60deg)` gesetzte, `transform`-Eigenschaft haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(2)')?.transform === 'rotate(60deg)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Ferris Wheel</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="wheel">
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
.wheel {
|
||||
border: 2px solid black;
|
||||
border-radius: 50%;
|
||||
margin-left: 50px;
|
||||
position: absolute;
|
||||
height: 55vw;
|
||||
width: 55vw;
|
||||
max-width: 500px;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.line {
|
||||
background-color: black;
|
||||
width: 50%;
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform-origin: 0% 0%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,126 @@
|
||||
---
|
||||
id: 6140d1a351e88f159ed54fca
|
||||
title: Schritt 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Erstelle mit demselben Muster einen separaten Selektor für den dritten `.line`, den vierten `.line`, den fünften `.line` und den sechsten `.line`.
|
||||
|
||||
Setze die `transform`-Eigenschaft des dritten `.line` auf `rotate(120deg)`, des vierten auf `rotate(180deg)`, des fünften auf `rotate(240deg)` und des sechsten auf `rotate(300deg)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Du solltest einen `.line:nth-of-type(3)`-Selektor erstellen.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(3)'));
|
||||
```
|
||||
|
||||
Dein `.line:nth-of-type(3)`-Selektor sollte eine `transform`-Eigenschaft von `rotate(120deg)` haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(3)')?.transform === 'rotate(120deg)');
|
||||
```
|
||||
|
||||
Du solltest einen `.line:nth-of-type(4)`-Selektor erstellen.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(4)'));
|
||||
```
|
||||
|
||||
Dein `.line:nth-of-type(4)`-Selektor sollte eine `transform`-Eigenschaft von `rotate(180deg)` haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(4)')?.transform === 'rotate(180deg)');
|
||||
```
|
||||
|
||||
Du solltest einen `.line:nth-of-type(5)`-Selektor erstellen.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(5)'));
|
||||
```
|
||||
|
||||
Dein `.line:nth-of-type(5)`-Selektor sollte eine `transform`-Eigenschaft von `rotate(240deg)` haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(5)')?.transform === 'rotate(240deg)');
|
||||
```
|
||||
|
||||
Du solltest einen `.line:nth-of-type(6)`-Selektor erstellen.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(6)'));
|
||||
```
|
||||
|
||||
Dein `.line:nth-of-type(6)`-Selektor sollte eine `transform`-Eigenschaft von `rotate(300deg)` haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(6)')?.transform === 'rotate(300deg)');
|
||||
```
|
||||
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Ferris Wheel</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="wheel">
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
.wheel {
|
||||
border: 2px solid black;
|
||||
border-radius: 50%;
|
||||
margin-left: 50px;
|
||||
position: absolute;
|
||||
height: 55vw;
|
||||
width: 55vw;
|
||||
max-width: 500px;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.line {
|
||||
background-color: black;
|
||||
width: 50%;
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform-origin: 0% 0%;
|
||||
}
|
||||
|
||||
.line:nth-of-type(2) {
|
||||
transform: rotate(60deg);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,111 @@
|
||||
---
|
||||
id: 6140d263016325162fd076fe
|
||||
title: Schritt 11
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Erstelle einen `.cabin`-Selektor. Setze `background-color` auf `red`, `width` auf `20%` und `height` auf `20%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Du solltest einen `.cabin`-Selektor haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin'));
|
||||
```
|
||||
|
||||
Dein `.cabin`-Selektor sollte eine `background-color`-Eigenschaft von `red` haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.backgroundColor === 'red');
|
||||
```
|
||||
|
||||
Dein `.cabin`-Selektor sollte eine `width`-Eigenschaft von `20%` haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.width === '20%');
|
||||
```
|
||||
|
||||
Dein `.cabin`-Selektor sollte eine `height`-Eigenschaft von `20%` haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.height === '20%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Ferris Wheel</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="wheel">
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
.wheel {
|
||||
border: 2px solid black;
|
||||
border-radius: 50%;
|
||||
margin-left: 50px;
|
||||
position: absolute;
|
||||
height: 55vw;
|
||||
width: 55vw;
|
||||
max-width: 500px;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.line {
|
||||
background-color: black;
|
||||
width: 50%;
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform-origin: 0% 0%;
|
||||
}
|
||||
|
||||
.line:nth-of-type(2) {
|
||||
transform: rotate(60deg);
|
||||
}
|
||||
.line:nth-of-type(3) {
|
||||
transform: rotate(120deg);
|
||||
}
|
||||
.line:nth-of-type(4) {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.line:nth-of-type(5) {
|
||||
transform: rotate(240deg);
|
||||
}
|
||||
.line:nth-of-type(6) {
|
||||
transform: rotate(300deg);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,103 @@
|
||||
---
|
||||
id: 6140d2b687a2cd17bac5730c
|
||||
title: Schritt 12
|
||||
challengeType: 0
|
||||
dashedName: step-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Gib `.cabin` eine `position` von `absolute` und eine `border` von `2px solid`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dein `.cabin`-Selektor sollte eine `position`-Eigenschaft von `absolute` haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.position === 'absolute');
|
||||
```
|
||||
|
||||
Dein `.cabin`-Selektor sollte eine `border`-Eigenschaft von `2px solid` haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.border === '2px solid');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Ferris Wheel</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="wheel">
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
.wheel {
|
||||
border: 2px solid black;
|
||||
border-radius: 50%;
|
||||
margin-left: 50px;
|
||||
position: absolute;
|
||||
height: 55vw;
|
||||
width: 55vw;
|
||||
max-width: 500px;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.line {
|
||||
background-color: black;
|
||||
width: 50%;
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform-origin: 0% 0%;
|
||||
}
|
||||
|
||||
.line:nth-of-type(2) {
|
||||
transform: rotate(60deg);
|
||||
}
|
||||
.line:nth-of-type(3) {
|
||||
transform: rotate(120deg);
|
||||
}
|
||||
.line:nth-of-type(4) {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.line:nth-of-type(5) {
|
||||
transform: rotate(240deg);
|
||||
}
|
||||
.line:nth-of-type(6) {
|
||||
transform: rotate(300deg);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.cabin {
|
||||
background-color: red;
|
||||
width: 20%;
|
||||
height: 20%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,100 @@
|
||||
---
|
||||
id: 6140d36b8b747718b50d4b7a
|
||||
title: Schritt 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Setze die `transform-origin`-Eigenschaft von `.cabin` auf `50% 0%`. Dies wird den Ursprungspunkt um `50%` von links und um `0%` von oben versetzen, so dass es in der Mitte der oberen Kante des Elements platziert wird.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dein `.cabin` Selektor sollte eine `transform-origin` Eigenschaft von `50% 0%` haben.
|
||||
|
||||
```js
|
||||
const transformOrigin = new __helpers.CSSHelp(document).getStyle('.cabin')?.transformOrigin;
|
||||
assert(transformOrigin === '50% 0%' || transformOrigin === '50% 0% 0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Ferris Wheel</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="wheel">
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
.wheel {
|
||||
border: 2px solid black;
|
||||
border-radius: 50%;
|
||||
margin-left: 50px;
|
||||
position: absolute;
|
||||
height: 55vw;
|
||||
width: 55vw;
|
||||
max-width: 500px;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.line {
|
||||
background-color: black;
|
||||
width: 50%;
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform-origin: 0% 0%;
|
||||
}
|
||||
|
||||
.line:nth-of-type(2) {
|
||||
transform: rotate(60deg);
|
||||
}
|
||||
.line:nth-of-type(3) {
|
||||
transform: rotate(120deg);
|
||||
}
|
||||
.line:nth-of-type(4) {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.line:nth-of-type(5) {
|
||||
transform: rotate(240deg);
|
||||
}
|
||||
.line:nth-of-type(6) {
|
||||
transform: rotate(300deg);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.cabin {
|
||||
background-color: red;
|
||||
width: 20%;
|
||||
height: 20%;
|
||||
position: absolute;
|
||||
border: 2px solid;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,117 @@
|
||||
---
|
||||
id: 6140d3dc359b371b1a21d783
|
||||
title: Schritt 14
|
||||
challengeType: 0
|
||||
dashedName: step-14
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Zeit, die Kabinen um das Rad zu positionieren. Wähle das erste `.cabin`-Element aus. Setze die `right`-Eigenschaft auf `-8.5%` und die `top`-Eigenschaft auf `50%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Du solltest einen `.cabin:nth-of-type(1)`-Selektor haben.
|
||||
|
||||
```js
|
||||
const def = (s) => new __helpers.CSSHelp(document).getStyle(s)
|
||||
assert.exists(def('.cabin:first-of-type') || def('.cabin:nth-of-type(1)'));
|
||||
```
|
||||
|
||||
Dein `.cabin:nth-of-type(1)`-Selektor sollte eine `right`-Eigenschaft von `-8.5%` haben.
|
||||
|
||||
```js
|
||||
const right = (s) => new __helpers.CSSHelp(document).getStyle(s)?.right
|
||||
assert.equal(right('.cabin:nth-of-type(1)') || right('.cabin:first-of-type'), '-8.5%');
|
||||
```
|
||||
|
||||
Dein `.cabin:nth-of-type(1)`-Selektor sollte eine `top`-Eigenschaft von `50%` haben.
|
||||
|
||||
```js
|
||||
const top = (s) => new __helpers.CSSHelp(document).getStyle(s)?.top
|
||||
assert.equal(top('.cabin:nth-of-type(1)') || top('.cabin:first-of-type'),'50%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Ferris Wheel</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="wheel">
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
.wheel {
|
||||
border: 2px solid black;
|
||||
border-radius: 50%;
|
||||
margin-left: 50px;
|
||||
position: absolute;
|
||||
height: 55vw;
|
||||
width: 55vw;
|
||||
max-width: 500px;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.line {
|
||||
background-color: black;
|
||||
width: 50%;
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform-origin: 0% 0%;
|
||||
}
|
||||
|
||||
.line:nth-of-type(2) {
|
||||
transform: rotate(60deg);
|
||||
}
|
||||
.line:nth-of-type(3) {
|
||||
transform: rotate(120deg);
|
||||
}
|
||||
.line:nth-of-type(4) {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.line:nth-of-type(5) {
|
||||
transform: rotate(240deg);
|
||||
}
|
||||
.line:nth-of-type(6) {
|
||||
transform: rotate(300deg);
|
||||
}
|
||||
|
||||
.cabin {
|
||||
background-color: red;
|
||||
width: 20%;
|
||||
height: 20%;
|
||||
position: absolute;
|
||||
border: 2px solid;
|
||||
transform-origin: 50% 0%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,199 @@
|
||||
---
|
||||
id: 6140d4bc9db3c81c51a09ab7
|
||||
title: Schritt 15
|
||||
challengeType: 0
|
||||
dashedName: step-15
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Führe das Muster fort, wende folgende, spezifische Regeln auf die `.cabin`-Elemente an:
|
||||
|
||||
- Die zweite `.cabin` sollte eine, auf `17%` gesetzte, `right`-Eigenschaft sowie eine, auf `93.5%` gesetzte, `top`-Eigenschaft haben.
|
||||
- Die dritte `.cabin` sollte eine, auf `67%` gesetzte, `right`-Eigenschaft sowie eine, auf `93.5%` gesetzte, `top`-Eigenschaft haben.
|
||||
- Die vierte `.cabin` sollte eine, auf `-8.5%` gesetzte, `left`-Eigenschaft sowie eine, auf `50%` gesetzte, `top`-Eigenschaft haben.
|
||||
- Die fünfte `.cabin` sollte eine, auf `17%` gesetzte, `left`-Eigenschaft sowie eine, auf `7%` gesetzte, `top`-Eigenschaft haben.
|
||||
- Die sechste`.cabin` sollte eine, auf `17%` gesetzte, `right`-Eigenschaft sowie eine, auf `7%` gesetzte, `top`-Eigenschaft haben.
|
||||
|
||||
# --hints--
|
||||
|
||||
Du solltest einen `.cabin:nth-of-type(2)`-Selektor haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(2)'));
|
||||
```
|
||||
|
||||
Dein `.cabin:nth-of-type(2)`-Selektor sollte eine, auf `17%` gesetzte, `right`-Eigenschaft haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(2)')?.right === '17%');
|
||||
```
|
||||
|
||||
Dein `.cabin:nth-of-type(2)`-Selektor sollte eine, auf `93.5%` gesetzte, `top`-Eigenschaft haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(2)')?.top === '93.5%');
|
||||
```
|
||||
|
||||
Du solltest einen `.cabin:nth-of-type(3)`-Selektor haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(3)'));
|
||||
```
|
||||
|
||||
Dein `.cabin:nth-of-type(3)`-Selektor sollte eine, auf `67%` gesetzte, `right`-Eigenschaft haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(3)')?.right === '67%');
|
||||
```
|
||||
|
||||
Dein `.cabin:nth-of-type(3)`-Selektor sollte eine, auf `93.5%` gesetzte, `top`-Eigenschaft haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(3)')?.top === '93.5%');
|
||||
```
|
||||
|
||||
Du solltest einen `.cabin:nth-of-type(4)`-Selektor haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(4)'));
|
||||
```
|
||||
|
||||
Dein `.cabin:nth-of-type(4)`-Selektor sollte eine, auf `-8.5%` gesetzte, `left`-Eigenschaft haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(4)')?.left === '-8.5%');
|
||||
```
|
||||
|
||||
Dein `.cabin:nth-of-type(4)`-Selektor sollte eine, auf `50%` gesetzte, `top`-Eigenschaft haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(4)')?.top === '50%');
|
||||
```
|
||||
|
||||
Du solltest einen `.cabin:nth-of-type(5)`-Selektor haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(5)'));
|
||||
```
|
||||
|
||||
Dein `.cabin:nth-of-type(5)`-Selektor sollte eine, auf `17%` gesetzte, `left`-Eigenschaft haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(5)')?.left === '17%');
|
||||
```
|
||||
|
||||
Dein `.cabin:nth-of-type(5)`-Selektor sollte eine, auf `7%` gesetzte, `top`-Eigenschaft haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(5)')?.top === '7%');
|
||||
```
|
||||
|
||||
Du solltest einen `.cabin:nth-of-type(6)`-Selektor haben.
|
||||
|
||||
```js
|
||||
const def = (s) => new __helpers.CSSHelp(document).getStyle(s)
|
||||
assert(def('.cabin:nth-of-type(6)') || def('.cabin:last-of-type'));
|
||||
```
|
||||
|
||||
Dein `.cabin:nth-of-type(6)`-Selektor sollte eine, auf `17%` gesetzte, `right`-Eigenschaft haben.
|
||||
|
||||
```js
|
||||
const right = (s) => new __helpers.CSSHelp(document).getStyle(s)?.right
|
||||
assert.equal(right('.cabin:nth-of-type(6)') || right('.cabin:last-of-type'),'17%');
|
||||
```
|
||||
|
||||
Dein `.cabin:nth-of-type(6)`-Selektor sollte eine, auf `7%` gesetzte, `top`-Eigenschaft haben.
|
||||
|
||||
```js
|
||||
const top = (s) => new __helpers.CSSHelp(document).getStyle(s)?.top
|
||||
assert.equal(top('.cabin:nth-of-type(6)') || top('.cabin:last-of-type'),'7%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Ferris Wheel</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="wheel">
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
.wheel {
|
||||
border: 2px solid black;
|
||||
border-radius: 50%;
|
||||
margin-left: 50px;
|
||||
position: absolute;
|
||||
height: 55vw;
|
||||
width: 55vw;
|
||||
max-width: 500px;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.line {
|
||||
background-color: black;
|
||||
width: 50%;
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform-origin: 0% 0%;
|
||||
}
|
||||
|
||||
.line:nth-of-type(2) {
|
||||
transform: rotate(60deg);
|
||||
}
|
||||
.line:nth-of-type(3) {
|
||||
transform: rotate(120deg);
|
||||
}
|
||||
.line:nth-of-type(4) {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.line:nth-of-type(5) {
|
||||
transform: rotate(240deg);
|
||||
}
|
||||
.line:nth-of-type(6) {
|
||||
transform: rotate(300deg);
|
||||
}
|
||||
|
||||
.cabin {
|
||||
background-color: red;
|
||||
width: 20%;
|
||||
height: 20%;
|
||||
position: absolute;
|
||||
border: 2px solid;
|
||||
transform-origin: 50% 0%;
|
||||
}
|
||||
|
||||
.cabin:nth-of-type(1) {
|
||||
right: -8.5%;
|
||||
top: 50%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,137 @@
|
||||
---
|
||||
id: 6140d94b5fab7f1d73c9bedb
|
||||
title: Schritt 16
|
||||
challengeType: 0
|
||||
dashedName: step-16
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Die `@keyframes` @-Regel wird verwendet, um den Ablauf einer CSS-Animation zu definieren. Innerhalb der `@keyframes`-Regel kannst du Selektoren für bestimmte Punkte innerhalb einer Animationssequenz erstellen, z. B. `0%` oder `25%`, oder `from` und `to` verwenden, um den Start und das Ende der Sequenz zu definieren.
|
||||
|
||||
`@keyframes` Regeln benötigen einen Namen, der ihnen zugewiesen wird, welchen du in anderen Regeln als Referenz verwendest. Zum Beispiel würde die `@keyframes freeCodeCamp { }`-Regel `freeCodeCamp` heißen.
|
||||
|
||||
Zeit, um mit dem Animieren anzufangen. Erstelle eine `@keyframes`-Regel namens `wheel`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Du solltest eine `@keyframes`-Regel haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.length === 1);
|
||||
```
|
||||
|
||||
Deine neue `@keyframes`-Regel sollte `wheel` heißen.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.name === 'wheel');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Ferris Wheel</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="wheel">
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
.wheel {
|
||||
border: 2px solid black;
|
||||
border-radius: 50%;
|
||||
margin-left: 50px;
|
||||
position: absolute;
|
||||
height: 55vw;
|
||||
width: 55vw;
|
||||
max-width: 500px;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.line {
|
||||
background-color: black;
|
||||
width: 50%;
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform-origin: 0% 0%;
|
||||
}
|
||||
|
||||
.line:nth-of-type(2) {
|
||||
transform: rotate(60deg);
|
||||
}
|
||||
.line:nth-of-type(3) {
|
||||
transform: rotate(120deg);
|
||||
}
|
||||
.line:nth-of-type(4) {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.line:nth-of-type(5) {
|
||||
transform: rotate(240deg);
|
||||
}
|
||||
.line:nth-of-type(6) {
|
||||
transform: rotate(300deg);
|
||||
}
|
||||
|
||||
.cabin {
|
||||
background-color: red;
|
||||
width: 20%;
|
||||
height: 20%;
|
||||
position: absolute;
|
||||
border: 2px solid;
|
||||
transform-origin: 50% 0%;
|
||||
}
|
||||
|
||||
.cabin:nth-of-type(1) {
|
||||
right: -8.5%;
|
||||
top: 50%;
|
||||
}
|
||||
.cabin:nth-of-type(2) {
|
||||
right: 17%;
|
||||
top: 93.5%;
|
||||
}
|
||||
.cabin:nth-of-type(3) {
|
||||
right: 67%;
|
||||
top: 93.5%;
|
||||
}
|
||||
.cabin:nth-of-type(4) {
|
||||
left: -8.5%;
|
||||
top: 50%;
|
||||
}
|
||||
.cabin:nth-of-type(5) {
|
||||
left: 17%;
|
||||
top: 7%;
|
||||
}
|
||||
.cabin:nth-of-type(6) {
|
||||
right: 17%;
|
||||
top: 7%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,139 @@
|
||||
---
|
||||
id: 6140dc5e13d0c81e7496f182
|
||||
title: Schritt 17
|
||||
challengeType: 0
|
||||
dashedName: step-17
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Du musst jetzt festlegen, wie deine Animation beginnen soll. Erstelle dafür eine `0%`-Regel innerhalb deiner `@keyframes wheel`-Regel. Die Eigenschaften, die du in diesem verschachtelten Selektor festgelegt hast, werden am Anfang deiner Animation angewendet.
|
||||
|
||||
Zum Beispiel wäre das eine `12%`-Regel:
|
||||
|
||||
```css
|
||||
@keyframes freecodecamp {
|
||||
12% {
|
||||
color: green;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
Deine `@keyframes wheel`-Regel sollte einen `0%`-Selektor haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[0]?.keyText === '0%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Ferris Wheel</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="wheel">
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
.wheel {
|
||||
border: 2px solid black;
|
||||
border-radius: 50%;
|
||||
margin-left: 50px;
|
||||
position: absolute;
|
||||
height: 55vw;
|
||||
width: 55vw;
|
||||
max-width: 500px;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.line {
|
||||
background-color: black;
|
||||
width: 50%;
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform-origin: 0% 0%;
|
||||
}
|
||||
|
||||
.line:nth-of-type(2) {
|
||||
transform: rotate(60deg);
|
||||
}
|
||||
.line:nth-of-type(3) {
|
||||
transform: rotate(120deg);
|
||||
}
|
||||
.line:nth-of-type(4) {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.line:nth-of-type(5) {
|
||||
transform: rotate(240deg);
|
||||
}
|
||||
.line:nth-of-type(6) {
|
||||
transform: rotate(300deg);
|
||||
}
|
||||
|
||||
.cabin {
|
||||
background-color: red;
|
||||
width: 20%;
|
||||
height: 20%;
|
||||
position: absolute;
|
||||
border: 2px solid;
|
||||
transform-origin: 50% 0%;
|
||||
}
|
||||
|
||||
.cabin:nth-of-type(1) {
|
||||
right: -8.5%;
|
||||
top: 50%;
|
||||
}
|
||||
.cabin:nth-of-type(2) {
|
||||
right: 17%;
|
||||
top: 93.5%;
|
||||
}
|
||||
.cabin:nth-of-type(3) {
|
||||
right: 67%;
|
||||
top: 93.5%;
|
||||
}
|
||||
.cabin:nth-of-type(4) {
|
||||
left: -8.5%;
|
||||
top: 50%;
|
||||
}
|
||||
.cabin:nth-of-type(5) {
|
||||
left: 17%;
|
||||
top: 7%;
|
||||
}
|
||||
.cabin:nth-of-type(6) {
|
||||
right: 17%;
|
||||
top: 7%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
@keyframes wheel {
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,131 @@
|
||||
---
|
||||
id: 6140dd77e0bc5a1f70bd7466
|
||||
title: Schritt 18
|
||||
challengeType: 0
|
||||
dashedName: step-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Gib der `0%`-Regel eine `transform`-Eigenschaft von `rotate(0deg)`. Das wird die Animation starten, ohne dass sie sich dabei dreht.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dein `0%`-Selektor sollte eine `transform`-Eigenschaft von `rotate(0deg)` haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[0]?.style?.transform === 'rotate(0deg)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Ferris Wheel</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="wheel">
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
.wheel {
|
||||
border: 2px solid black;
|
||||
border-radius: 50%;
|
||||
margin-left: 50px;
|
||||
position: absolute;
|
||||
height: 55vw;
|
||||
width: 55vw;
|
||||
max-width: 500px;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.line {
|
||||
background-color: black;
|
||||
width: 50%;
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform-origin: 0% 0%;
|
||||
}
|
||||
|
||||
.line:nth-of-type(2) {
|
||||
transform: rotate(60deg);
|
||||
}
|
||||
.line:nth-of-type(3) {
|
||||
transform: rotate(120deg);
|
||||
}
|
||||
.line:nth-of-type(4) {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.line:nth-of-type(5) {
|
||||
transform: rotate(240deg);
|
||||
}
|
||||
.line:nth-of-type(6) {
|
||||
transform: rotate(300deg);
|
||||
}
|
||||
|
||||
.cabin {
|
||||
background-color: red;
|
||||
width: 20%;
|
||||
height: 20%;
|
||||
position: absolute;
|
||||
border: 2px solid;
|
||||
transform-origin: 50% 0%;
|
||||
}
|
||||
|
||||
.cabin:nth-of-type(1) {
|
||||
right: -8.5%;
|
||||
top: 50%;
|
||||
}
|
||||
.cabin:nth-of-type(2) {
|
||||
right: 17%;
|
||||
top: 93.5%;
|
||||
}
|
||||
.cabin:nth-of-type(3) {
|
||||
right: 67%;
|
||||
top: 93.5%;
|
||||
}
|
||||
.cabin:nth-of-type(4) {
|
||||
left: -8.5%;
|
||||
top: 50%;
|
||||
}
|
||||
.cabin:nth-of-type(5) {
|
||||
left: 17%;
|
||||
top: 7%;
|
||||
}
|
||||
.cabin:nth-of-type(6) {
|
||||
right: 17%;
|
||||
top: 7%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
@keyframes wheel {
|
||||
0% {
|
||||
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,69 @@
|
||||
---
|
||||
id: 617ace7d831f9c16a569b38a
|
||||
title: Schritt 5
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Gib deinem `.wheel`-Selektor eine `max-height` und `max-width`-Eigenschaft, beide auf `500px` gesetzt.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dein `.wheel`-Selektor sollte eine `max-height`-Eigenschaft von `500px` haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.maxHeight === '500px');
|
||||
```
|
||||
|
||||
Dein `.wheel`-Selektor sollte eine `max-width`-Eigenschaft von `500px` haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.maxWidth === '500px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Ferris Wheel</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="wheel">
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
<div class="cabin"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
.wheel {
|
||||
border: 2px solid black;
|
||||
border-radius: 50%;
|
||||
margin-left: 50px;
|
||||
position: absolute;
|
||||
height: 55vw;
|
||||
width: 55vw;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,63 @@
|
||||
---
|
||||
id: 615f38cabc64e3556f98cc1a
|
||||
title: ステップ 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
境界線を使ってコンテンツをグループ化したり強調したりできます。
|
||||
|
||||
`.label` セレクターを作成して、`border` を `2px solid black` に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.label` セレクターが必要です。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.label'));
|
||||
```
|
||||
|
||||
`.label` セレクターの `border` プロパティを `2px solid black` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.label')?.border === '2px solid black');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Nutrition Label</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||
<link href="./styles.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="label">
|
||||
<h1>Nutrition Facts</h1>
|
||||
<p>8 servings per container</p>
|
||||
<p>Serving size 2/3 cup (55g)</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,82 @@
|
||||
---
|
||||
id: 615f40b01f680e608d360ed4
|
||||
title: ステップ 18
|
||||
challengeType: 0
|
||||
dashedName: step-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`letter-spacing` プロパティは、要素内のテキストの各文字の間隔を調整するために使用します。
|
||||
|
||||
`h1` セレクターに `letter-spacing` プロパティを追加して `0.15px` に設定し、間隔を少し広げましょう。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h1` セレクターの `letter-spacing` プロパティを `0.15px` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('h1')?.letterSpacing === '0.15px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Nutrition Label</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||
<link href="./styles.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="label">
|
||||
<h1>Nutrition Facts</h1>
|
||||
<div class="divider"></div>
|
||||
<p>8 servings per container</p>
|
||||
<p>Serving size 2/3 cup (55g)</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
|
||||
.label {
|
||||
border: 2px solid black;
|
||||
width: 270px;
|
||||
margin: 20px auto;
|
||||
padding: 0 7px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
h1 {
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
margin: -4px 0;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,102 @@
|
||||
---
|
||||
id: 615f41c979787462e76dab90
|
||||
title: ステップ 20
|
||||
challengeType: 0
|
||||
dashedName: step-20
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
新しいクラスにはまだスタイルがありません。 `.bold` セレクターを作成し、`font-weight` プロパティを `800` に設定してテキストを太字にしましょう。
|
||||
|
||||
また、`h1` セレクターからも `font-weight` プロパティを削除してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.bold` セレクターが必要です。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.bold'));
|
||||
```
|
||||
|
||||
`.bold` セレクターの `font-weight` プロパティを `800` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.bold')?.fontWeight === '800');
|
||||
```
|
||||
|
||||
`h1` セレクターが `font-weight` プロパティを持たないようにしてください。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('h1')?.fontWeight === "");
|
||||
```
|
||||
|
||||
`h1` セレクターを削除しないでください。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('h1'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Nutrition Label</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||
<link href="./styles.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="label">
|
||||
<h1>Nutrition Facts</h1>
|
||||
<div class="divider"></div>
|
||||
<p>8 servings per container</p>
|
||||
<p class="bold">Serving size 2/3 cup (55g)</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
|
||||
.label {
|
||||
border: 2px solid black;
|
||||
width: 270px;
|
||||
margin: 20px auto;
|
||||
padding: 0 7px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
h1 {
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
margin: -4px 0;
|
||||
letter-spacing: 0.15px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,119 @@
|
||||
---
|
||||
id: 615f575b50b91e72af079480
|
||||
title: ステップ 33
|
||||
challengeType: 0
|
||||
dashedName: step-33
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
新しく `.calories-info h1` セレクターを作成し、上下のマージンを `-5px` に、左右のマージンを `-2px` に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
新しく `.calories-info h1` セレクターが必要です。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.calories-info h1'));
|
||||
```
|
||||
|
||||
新しい `.calories-info h1` セレクターの `margin` プロパティを `-5px -2px` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.marginTop, '-5px');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.marginBottom, '-5px');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.marginLeft, '-2px');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.marginRight, '-2px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Nutrition Label</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||
<link href="./styles.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="label">
|
||||
<header>
|
||||
<h1 class="bold">Nutrition Facts</h1>
|
||||
<div class="divider"></div>
|
||||
<p>8 servings per container</p>
|
||||
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider lg"></div>
|
||||
<div class="calories-info">
|
||||
<p class="bold sm-text">Amount per serving</p>
|
||||
<h1>Calories <span class="right">230</span></h1>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
|
||||
.label {
|
||||
border: 2px solid black;
|
||||
width: 270px;
|
||||
margin: 20px auto;
|
||||
padding: 0 7px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
text-align: center;
|
||||
margin: -4px 0;
|
||||
letter-spacing: 0.15px
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.lg {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.lg, .md {
|
||||
background-color: black;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.sm-text {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,192 @@
|
||||
---
|
||||
id: 615f905fbd1017a65ca224eb
|
||||
title: ステップ 64
|
||||
challengeType: 0
|
||||
dashedName: step-64
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`.daily-value` 要素の後に、中くらいの太さ (md) の仕切り線を追加してください。 新しい仕切り線の下に、`p` 要素を作成し、`class` 属性を `note` に設定してください。
|
||||
|
||||
その `p` 要素に以下のテキストを設定してください:
|
||||
|
||||
```
|
||||
* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
`.daily-value` 要素の後に新しい `div` 要素を作成する必要があります。
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value').nextElementSibling?.localName === 'div');
|
||||
```
|
||||
|
||||
新しい `div` の `class` を `divider md` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value')?.nextElementSibling?.classList?.contains('divider'));
|
||||
assert(document.querySelector('.daily-value')?.nextElementSibling?.classList?.contains('md'));
|
||||
```
|
||||
|
||||
新しい `div` 要素の後に `p` 要素を作成する必要があります。
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.label')?.lastElementChild?.localName === 'p');
|
||||
```
|
||||
|
||||
新しい `p` 要素の `class` を `note` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('note'));
|
||||
```
|
||||
|
||||
新しい `p` 要素は与えられたテキストをもつ必要があります。
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('.label')?.lastElementChild?.innerText, '* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Nutrition Label</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||
<link href="./styles.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="label">
|
||||
<header>
|
||||
<h1 class="bold">Nutrition Facts</h1>
|
||||
<div class="divider"></div>
|
||||
<p>8 servings per container</p>
|
||||
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider lg"></div>
|
||||
<div class="calories-info">
|
||||
<p class="bold sm-text">Amount per serving</p>
|
||||
<h1>Calories <span class="right">230</span></h1>
|
||||
</div>
|
||||
<div class="divider md"></div>
|
||||
<div class="daily-value sm-text">
|
||||
<p class="right bold no-divider">% Daily Value *</p>
|
||||
<div class="divider"></div>
|
||||
<p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
|
||||
<p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
|
||||
<div class="divider"></div>
|
||||
<p class="indent no-divider"><i>Trans</i> Fat 0g</p>
|
||||
<div class="divider"></div>
|
||||
<p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
|
||||
<p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
|
||||
<p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p>
|
||||
<p class="indent no-divider">Dietary Fiber 4g</p>
|
||||
<div class="divider"></div>
|
||||
<p class="indent no-divider">Total Sugars 12g</p>
|
||||
<div class="divider dbl-indent"></div>
|
||||
<p class="dbl-indent no-divider">Includes 10g Added Sugars <span class="right bold">20%</span>
|
||||
<div class="divider"></div>
|
||||
<p class="no-divider"><span class="bold">Protein</span> 3g</p>
|
||||
<div class="divider lg"></div>
|
||||
<p>Vitamin D 2mcg <span class="right">10%</span></p>
|
||||
<p>Calcium 260mg <span class="right">20%</span></p>
|
||||
<p>Iron 8mg <span class="right">45%</span></p>
|
||||
<p class="no-divider">Potassium 235mg <span class="right">6%</span></p>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
|
||||
.label {
|
||||
border: 2px solid black;
|
||||
width: 270px;
|
||||
margin: 20px auto;
|
||||
padding: 0 7px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
text-align: center;
|
||||
margin: -4px 0;
|
||||
letter-spacing: 0.15px
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
clear: right;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.lg {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.lg, .md {
|
||||
background-color: black;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.md {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.sm-text {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.calories-info h1 {
|
||||
margin: -5px -2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.calories-info span {
|
||||
font-size: 1.2em;
|
||||
margin-top: -7px;
|
||||
}
|
||||
|
||||
.indent {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.dbl-indent {
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
.daily-value p:not(.no-divider) {
|
||||
border-bottom: 1px solid #888989;
|
||||
}
|
||||
```
|
||||
Loading…
Reference in New Issue
Block a user