chore(i18n,learn): processed translations (#45599)
This commit is contained in:
camperbot
GitHub
@ -0,0 +1,183 @@
|
||||
---
|
||||
id: 5f46e270702a8456a664f0df
|
||||
title: Step 86
|
||||
challengeType: 0
|
||||
dashedName: step-86
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Per rimuovere parte dello spazio verticale tra l'elemento `h1` e il testo `Est. 2020`, modifica il margine inferiore dell'elemento `h1` impostandolo a `15px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti impostare la proprietà `margin-bottom` su `15px`.
|
||||
|
||||
```js
|
||||
const hasMarginBottom = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-bottom'] === '15px');
|
||||
assert(hasMarginBottom);
|
||||
```
|
||||
|
||||
Il tuo elemento `h1` dovrebbe avere un `margin-bottom` di `15px`.
|
||||
|
||||
```js
|
||||
const h1MarginBottom = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('margin-bottom');
|
||||
assert(h1MarginBottom === '15px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr class="bottom-line">
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
margin-top: 0;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
.bottom-line {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
footer {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: brown;
|
||||
}
|
||||
```
|
||||
|
||||
@ -0,0 +1,304 @@
|
||||
---
|
||||
id: 6169b284950e171d8d0bb16a
|
||||
title: Step 29
|
||||
challengeType: 0
|
||||
dashedName: step-29
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Infine, crea un nuovo selettore `75%` tra i tuoi selettori `50%` e `100%`. Dai a questo nuovo selettore una proprietà `background-color` impostata su `yellow.`
|
||||
|
||||
Con questo, la tua animazione è molto più fluida e la ruota panoramica è completa.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti creare un nuovo selettore `75%` nella tua regola `@keyframes cabins`.
|
||||
|
||||
```js
|
||||
const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules;
|
||||
assert(rules?.[0]?.keyText === '75%' || rules?.[1]?.keyText === '75%' || rules?.[2]?.keyText === '75%' || rules?.[3]?.keyText === '75%' || rules?.[4]?.keyText === '75%');
|
||||
```
|
||||
|
||||
Il tuo selettore `75%` dovrebbe essere compreso tra i selettori `50%` e `100%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[3]?.keyText === '75%');
|
||||
```
|
||||
|
||||
Il tuo selettore `75%` dovrebbe avere una proprietà `background-color` impostata a `yellow`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[3]?.style?.backgroundColor === 'yellow');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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;
|
||||
animation-name: wheel;
|
||||
animation-duration: 10s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
.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%;
|
||||
animation: cabins 10s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
|
||||
@keyframes wheel {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
@keyframes cabins {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
25% {
|
||||
background-color: yellow;
|
||||
}
|
||||
50% {
|
||||
background-color: purple;
|
||||
}
|
||||
100% {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
## --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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;
|
||||
animation-name: wheel;
|
||||
animation-duration: 10s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
.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%;
|
||||
animation: cabins 10s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
|
||||
@keyframes wheel {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cabins {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
25% {
|
||||
background-color: yellow;
|
||||
}
|
||||
50% {
|
||||
background-color: purple;
|
||||
}
|
||||
75% {
|
||||
background-color: yellow;
|
||||
}
|
||||
100% {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,195 @@
|
||||
---
|
||||
id: 6143bb50e8e48c6f5ef9d8d5
|
||||
title: Step 21
|
||||
challengeType: 0
|
||||
dashedName: step-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
All'interno dell'elemento `aside`, crea due elementi `img`, un elemento `blockquote` e un terzo elemento `img`. Dai all'elemento `blockquote` una `class` impostata su `image-quote`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti creare tre elementi `img` all'interno del tuo elemento `aside`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('aside img')?.length === 3);
|
||||
```
|
||||
|
||||
Dovresti creare un elemento `blockquote` all'interno dell'elemento `aside`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('aside blockquote'));
|
||||
```
|
||||
|
||||
Il tuo elemento `blockquote` dovrebbe avere la `class` impostata su `image-quote`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('aside blockquote')?.classList?.contains('image-quote'));
|
||||
```
|
||||
|
||||
I tuoi tag html dovrebbero essere nell'ordine corretto.
|
||||
|
||||
```js
|
||||
const children = document.querySelector('aside')?.children;
|
||||
assert(children?.[0]?.localName === 'img');
|
||||
assert(children?.[1]?.localName === 'img');
|
||||
assert(children?.[2]?.localName === 'blockquote');
|
||||
assert(children?.[3]?.localName === 'img');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section class="heading">
|
||||
<header class="hero">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
|
||||
alt="freecodecamp logo"
|
||||
loading="lazy"
|
||||
class="hero-img"
|
||||
width="400"
|
||||
/>
|
||||
<h1 class="hero-title">OUR NEW CURRICULUM</h1>
|
||||
<p class="hero-subtitle">
|
||||
Our efforts to restructure our curriculum with a more project-based
|
||||
focus
|
||||
</p>
|
||||
</header>
|
||||
<div class="author">
|
||||
<p class="author-name">
|
||||
By
|
||||
<a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
|
||||
>freeCodeCamp</a
|
||||
>
|
||||
</p>
|
||||
<p class="publish-date">March 7, 2019</p>
|
||||
</div>
|
||||
<div class="social-icons">
|
||||
<a href="https://www.facebook.com/freecodecamp/">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="https://twitter.com/freecodecamp/">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="https://instagram.com/freecodecamp">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/school/free-code-camp/">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a href="https://www.youtube.com/freecodecamp">
|
||||
<i class="fab fa-youtube"></i>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="text">
|
||||
<p class="first-paragraph">
|
||||
Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
|
||||
</p>
|
||||
<p>
|
||||
After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
|
||||
</p>
|
||||
<p>
|
||||
It wasn't as dramatic as Doc's revelation in Back to the Future. It
|
||||
just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
|
||||
</p>
|
||||
<blockquote>
|
||||
<hr />
|
||||
<p class="quote">
|
||||
The entire curriculum should be a series of projects
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<p>
|
||||
No more walls of explanatory text. No more walls of tests. Just one
|
||||
test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
|
||||
</p>
|
||||
<p>
|
||||
The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
|
||||
</p>
|
||||
<p>
|
||||
Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
|
||||
</p>
|
||||
</section>
|
||||
<section class="text text-with-images">
|
||||
<article class="brief-history">
|
||||
<h3 class="list-title">A Brief History</h3>
|
||||
<p>Of the Curriculum</p>
|
||||
<ul class="lists">
|
||||
<li>
|
||||
<h4 class="list-subtitle">V1 - 2014</h4>
|
||||
<p>
|
||||
We launched freeCodeCamp with a simple list of 15 resources,
|
||||
including Harvard's CS50 and Stanford's Database Class.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V2 - 2015</h4>
|
||||
<p>We added interactive algorithm challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V3 - 2015</h4>
|
||||
<p>
|
||||
We added our own HTML+CSS challenges (before we'd been relying
|
||||
on General Assembly's Dash course for these).
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V4 - 2016</h4>
|
||||
<p>
|
||||
We expanded the curriculum to 3 certifications, including Front
|
||||
End, Back End, and Data Visualization. They each had 10 required
|
||||
projects, but only the Front End section had its own challenges.
|
||||
For the other certs, we were still using external resources like
|
||||
Node School.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V5 - 2017</h4>
|
||||
<p>We added the back end and data visualization challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V6 - 2018</h4>
|
||||
<p>
|
||||
We launched 6 new certifications to replace our old ones. This
|
||||
was the biggest curriculum improvement to date.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
<aside class="image-wrapper">
|
||||
|
||||
</aside>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,89 @@
|
||||
---
|
||||
id: 61969c487ced6f12db8fef94
|
||||
title: Step 14
|
||||
challengeType: 0
|
||||
dashedName: step-14
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Seleziona l'elemento `.left-mountain` e imposta la sua `width` e `height` a `300px`. Quindi, imposta il `background` su un gradiente lineare che parta da `rgb(203, 241, 228)` e finisca a `rgb(80, 183, 255)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti utilizzare il selettore `.left-mountain`.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.left-mountain\s*\{/);
|
||||
```
|
||||
|
||||
Dovresti dare a `.left-mountain` una `width` di `300px`. `--fcc-actual--` doveva essere `--fcc-expected--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.width, '300px');
|
||||
```
|
||||
|
||||
Dovresti dare a `.left-mountain` un'`height` di `300px`. `--fcc-actual--` doveva essere `--fcc-expected--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.height, '300px');
|
||||
```
|
||||
|
||||
Dovresti dare a `.left-mountain` un `background` di `linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255))`.
|
||||
|
||||
```js
|
||||
assert.include(['linear-gradient(rgb(203,241,228),rgb(80,183,255))', 'rgba(0,0,0,0)linear-gradient(rgb(203,241,228),rgb(80,183,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.left-mountain')?.getPropVal('background', true));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="penguin"></div>
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,166 @@
|
||||
---
|
||||
id: 619be946958c6009844f1dee
|
||||
title: Step 44
|
||||
challengeType: 0
|
||||
dashedName: step-44
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Avvia il volto del pinguino, aggiungendo due elementi `div` all'interno di `.penguin-head`, e dando a entrambi una `class` di `face`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti aggiungere `--fcc-expected--` `div` elementi a `.penguin-head`, ma è stato trovato `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 2);
|
||||
```
|
||||
|
||||
Dovresti dare al primo `div` una `class` di `face`, ma è stato trovato `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.include(document.querySelector('.penguin-head > div:nth-of-type(1)')?.className, 'face');
|
||||
```
|
||||
|
||||
Dovresti dare al secondo `div` una `class` di `face`, ma è stato trovato `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.include(document.querySelector('.penguin-head > div:nth-of-type(2)')?.className, 'face');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
--fcc-editable-region--
|
||||
<div class="penguin-head">
|
||||
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,225 @@
|
||||
---
|
||||
id: 619d0d18ca99870f884a7bff
|
||||
title: Step 60
|
||||
challengeType: 0
|
||||
dashedName: step-60
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
All'interno di ogni elemento `.eye`, aggiungi un `div` con una `class` di `eye-lid`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti aggiungere un elemento `div` all'interno di `.eye.left`, ma è stato trovato `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.eye.left > div')?.length ?? 0, 1);
|
||||
```
|
||||
|
||||
Dovresti aggiungere un elemento `div` all'interno di `.eye.right`, ma è stato trovato `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.eye.right > div')?.length ?? 0, 1);
|
||||
```
|
||||
|
||||
Dovresti dare al primo `div` una `class` di `eye-lid`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.eye.left > div.eye-lid'));
|
||||
```
|
||||
|
||||
Dovresti dare al secondo nuovo `div` una `class` di `eye-lid`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.eye.right > div.eye-lid'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
--fcc-editable-region--
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
|
||||
</div>
|
||||
<div class="eye right">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,323 @@
|
||||
---
|
||||
id: 619d2fd3ff4f772882e3d998
|
||||
title: Step 94
|
||||
challengeType: 0
|
||||
dashedName: step-94
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Cambia l'ordine di impilamento degli elementi `.arm` in modo che appaiano dietro all'elemento `.penguin-body`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti dare a `.arm` uno `z-index` di `--fcc-expected--`, ma è stato trovato `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.zIndex, '-1');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="blush left"></div>
|
||||
<div class="blush right"></div>
|
||||
<div class="beak top"></div>
|
||||
<div class="beak bottom"></div>
|
||||
</div>
|
||||
<div class="shirt">
|
||||
<div>💜</div>
|
||||
<p>I CSS</p>
|
||||
</div>
|
||||
<div class="penguin-body">
|
||||
<div class="arm left"></div>
|
||||
<div class="arm right"></div>
|
||||
<div class="foot left"></div>
|
||||
<div class="foot right"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
--penguin-picorna: orange;
|
||||
--penguin-skin: gray;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
var(--penguin-skin),
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.eye-lid {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: -23%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush {
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
background-color: pink;
|
||||
top: 65%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush.left {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.blush.right {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.beak {
|
||||
height: 10%;
|
||||
background-color: var(--penguin-picorna);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak.top {
|
||||
width: 20%;
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
.beak.bottom {
|
||||
width: 16%;
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
}
|
||||
|
||||
.shirt {
|
||||
font: bold 25px Helvetica, sans-serif;
|
||||
top: 165px;
|
||||
left: 127.5px;
|
||||
z-index: 1;
|
||||
color: #6a6969;
|
||||
}
|
||||
|
||||
.shirt div {
|
||||
font-weight: initial;
|
||||
top: 22.5px;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: var(--penguin-skin);
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.arm {
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--penguin-skin),
|
||||
rgb(209, 210, 199)
|
||||
);
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.arm.left {
|
||||
top: 35%;
|
||||
left: 5%;
|
||||
transform-origin: top left;
|
||||
transform: rotate(130deg) scaleX(-1);
|
||||
}
|
||||
|
||||
.arm.right {
|
||||
top: 0%;
|
||||
right: -5%;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.foot {
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
background-color: var(--penguin-picorna);
|
||||
top: 85%;
|
||||
border-radius: 50%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.foot.left {
|
||||
left: 25%;
|
||||
transform: rotate(80deg);
|
||||
}
|
||||
|
||||
.foot.right {
|
||||
right: 25%;
|
||||
transform: rotate(-80deg);
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,208 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98fd
|
||||
title: Step 53
|
||||
challengeType: 0
|
||||
dashedName: step-53
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Nei prossimi passi, si stanno per utilizzare alcuni trucchi con bordi CSS per girare la sezione `.bb2a` in un triangolo nella parte superiore dell'edificio. Per prima cosa, rimuovi il `background-color` da `.bb2` poiché non ne hai più bisogno.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti rimuovere il `background-color` da `.bb2`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2")?.backgroundColor);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,401 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e9936
|
||||
title: Step 110
|
||||
challengeType: 0
|
||||
dashedName: step-110
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Va bene, gli edifici sono finiti. Torna al selettore `*` e rimuovi il `border` che hai applicato a tutto all'inizio e gli edifici si uniranno.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti rimuovere il `border` dal selettore `*`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle("*")?.border);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2">
|
||||
<div class="fb2a"></div>
|
||||
<div class="fb2b window-wrap">
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="fb3 building-wrap">
|
||||
<div class="fb3a window-wrap">
|
||||
<div class="fb3-window"></div>
|
||||
<div class="fb3-window"></div>
|
||||
<div class="fb3-window"></div>
|
||||
</div>
|
||||
<div class="fb3b"></div>
|
||||
<div class="fb3a"></div>
|
||||
<div class="fb3b"></div>
|
||||
</div>
|
||||
<div class="fb4">
|
||||
<div class="fb4a"></div>
|
||||
<div class="fb4b">
|
||||
<div class="fb4-window"></div>
|
||||
<div class="fb4-window"></div>
|
||||
<div class="fb4-window"></div>
|
||||
<div class="fb4-window"></div>
|
||||
<div class="fb4-window"></div>
|
||||
<div class="fb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: #bb99ff;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
transparent 10%,
|
||||
transparent 15%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
border-bottom: 10vh solid var(--building-color3);
|
||||
border-left: 1vw solid transparent;
|
||||
border-right: 1vw solid transparent;
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb2-window {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
background-color: var(--window-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
}
|
||||
|
||||
.fb3a {
|
||||
width: 80%;
|
||||
height: 15%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb3b {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb3-window {
|
||||
width: 25%;
|
||||
height: 80%;
|
||||
background-color: var(--window-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb4a {
|
||||
border-top: 5vh solid transparent;
|
||||
border-left: 8vw solid var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4b {
|
||||
width: 100%;
|
||||
height: 89%;
|
||||
background-color: var(--building-color1);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.fb4-window {
|
||||
width: 30%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
background-color: var(--window-color1);
|
||||
margin: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
position: relative;
|
||||
right: 10%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 5%,
|
||||
transparent 5%,
|
||||
transparent 10%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color2),
|
||||
var(--building-color2) 12%,
|
||||
var(--window-color2) 12%,
|
||||
var(--window-color2) 44%
|
||||
);
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3) 10%,
|
||||
transparent 10%,
|
||||
transparent 30%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
var(--building-color3),
|
||||
var(--building-color3) 10%,
|
||||
var(--window-color3) 10%,
|
||||
var(--window-color3) 30%
|
||||
);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@ -0,0 +1,423 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e993b
|
||||
title: Step 115
|
||||
challengeType: 0
|
||||
dashedName: step-115
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Copia e incolla l'intera classe `sky` insieme a tutte le sue proprietà e valori nella media query. Stai per creare un altro schema di colori per la skyline che la cambia da giorno a notte.
|
||||
|
||||
Nota: Hai bisogno di scorrere oltre la regione modificabile per copiare la classe.
|
||||
|
||||
# --hints--
|
||||
|
||||
Non dovresti cancellare la dichiarazione `.sky` esistente.
|
||||
|
||||
```js
|
||||
assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.getPropVal('background', true), /radial-gradient\(circleclosest-cornerat15%15%,rgb\(255,207,51\)(0%)?,rgb\(255,207,51\)20%,rgb\(255,255,102\)21%,rgb\(187,238,255\)100%\)/);
|
||||
```
|
||||
|
||||
Dovresti copiare la dichiarazione `.sky` esistente nella query multimediale.
|
||||
|
||||
```js
|
||||
assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*255\s*,\s*207\s*,\s*51\s*\)\s*(0%)?\s*,\s*rgb\(\s*255\s*,\s*207\s*,\s*51\s*\)\s+20%\s*,\s*rgb\(\s*255\s*,\s*255\s*,\s*102\s*\)\s+21%\s*,\s*rgb\(\s*187\s*,\s*238\s*,\s*255\s*\)\s+100%\s*\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings sky">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2">
|
||||
<div class="fb2a"></div>
|
||||
<div class="fb2b window-wrap">
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="fb3 building-wrap">
|
||||
<div class="fb3a window-wrap">
|
||||
<div class="fb3-window"></div>
|
||||
<div class="fb3-window"></div>
|
||||
<div class="fb3-window"></div>
|
||||
</div>
|
||||
<div class="fb3b"></div>
|
||||
<div class="fb3a"></div>
|
||||
<div class="fb3b"></div>
|
||||
</div>
|
||||
<div class="fb4">
|
||||
<div class="fb4a"></div>
|
||||
<div class="fb4b">
|
||||
<div class="fb4-window"></div>
|
||||
<div class="fb4-window"></div>
|
||||
<div class="fb4-window"></div>
|
||||
<div class="fb4-window"></div>
|
||||
<div class="fb4-window"></div>
|
||||
<div class="fb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: #bb99ff;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.sky {
|
||||
background: radial-gradient(
|
||||
closest-corner circle at 15% 15%,
|
||||
#ffcf33,
|
||||
#ffcf33 20%,
|
||||
#ffff66 21%,
|
||||
#bbeeff 100%
|
||||
);
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
transparent 10%,
|
||||
transparent 15%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
border-bottom: 10vh solid var(--building-color3);
|
||||
border-left: 1vw solid transparent;
|
||||
border-right: 1vw solid transparent;
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb2-window {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
background-color: var(--window-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
}
|
||||
|
||||
.fb3a {
|
||||
width: 80%;
|
||||
height: 15%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb3b {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb3-window {
|
||||
width: 25%;
|
||||
height: 80%;
|
||||
background-color: var(--window-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb4a {
|
||||
border-top: 5vh solid transparent;
|
||||
border-left: 8vw solid var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4b {
|
||||
width: 100%;
|
||||
height: 89%;
|
||||
background-color: var(--building-color1);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.fb4-window {
|
||||
width: 30%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
background-color: var(--window-color1);
|
||||
margin: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
position: relative;
|
||||
right: 10%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 5%,
|
||||
transparent 5%,
|
||||
transparent 10%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color2),
|
||||
var(--building-color2) 12%,
|
||||
var(--window-color2) 12%,
|
||||
var(--window-color2) 44%
|
||||
);
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3) 10%,
|
||||
transparent 10%,
|
||||
transparent 30%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
var(--building-color3),
|
||||
var(--building-color3) 10%,
|
||||
var(--window-color3) 10%,
|
||||
var(--window-color3) 30%
|
||||
);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
@media (max-width: 1000px) {
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
@ -0,0 +1,81 @@
|
||||
---
|
||||
id: 60f8604682407e0d017bbf7f
|
||||
title: Step 23
|
||||
challengeType: 0
|
||||
dashedName: step-23
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Per i termini e le condizioni, aggiungi un `input` con un `type` di `checkbox` al terzo elemento `label`. Inoltre, dato che non vogliamo che gli utenti si registrino senza aver letto i termini e le condizioni, rendilo `required`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti aggiungere un `input` al terzo elemento `label`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('fieldset:nth-child(2) label:nth-child(3) input'));
|
||||
```
|
||||
|
||||
Dovresti aggiungere un attributo `type` con valore `checkbox` all'elemento `input`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(3) input')?.type, 'checkbox');
|
||||
```
|
||||
|
||||
Dovresti aggiungere un attributo `required` all'elemento `input`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(3) input')?.required, true);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label><input type="radio" /></label>
|
||||
<label><input type="radio" /></label>
|
||||
<label></label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset></fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,220 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515aa
|
||||
title: Step 53
|
||||
challengeType: 0
|
||||
dashedName: step-53
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ora imposta la `position` ad `absolute`, il `top` a `20%` e il `left` a `20%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo selettore `#blue-left` dovrebbe avere una proprietà `position` impostata a `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.position === 'absolute');
|
||||
```
|
||||
|
||||
Il tuo selettore `#blue-left` dovrebbe avere una proprietà `top` impostata al `20%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.top === '20%');
|
||||
```
|
||||
|
||||
Il selettore `#blue-left` dovrebbe avere una proprietà `left` impostata a `20%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.left === '20%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,295 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515bc
|
||||
title: Step 70
|
||||
challengeType: 0
|
||||
dashedName: step-70
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Dai a `eyes-div` uno `z-index` di `3`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il selettore `#eyes-div` dovrebbe avere una proprietà `z-index` impostata a `3`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.zIndex === '3');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#eyes-div {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,142 @@
|
||||
---
|
||||
id: 61fd78621573aa5e8b512f5e
|
||||
title: Step 15
|
||||
challengeType: 0
|
||||
dashedName: step-15
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Nel tuo terzo elemento `tr`, aggiungi un elemento `th` con il testo `Savings Funds set aside for emergencies.`. Manda a capo il testo, ad eccezione dei `Savings`, all'interno di un elemento `span` con la `class` impostata a `description`.
|
||||
|
||||
In seguito, aggiungi tre elementi `td` con il seguente testo (in ordine): `$500`, `$650`, `$728`. Dai al terzo elemento `td` una `class` impostata a `current`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo terzo `tr` dovrebbe avere un elemento `th`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th'));
|
||||
```
|
||||
|
||||
Il tuo elemento `th` dovrebbe avere il testo `Savings Funds set aside for emergencies.`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th')?.innerText === 'Savings Funds set aside for emergencies.');
|
||||
```
|
||||
|
||||
Dovresti mandare a capo il testo `Funds set aside for emergencies.` in un elemento `span`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.textContent === 'Funds set aside for emergencies.');
|
||||
```
|
||||
|
||||
Il tuo elemento `span` dovrebbe avere l'attributo `class` impostato a `description`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.classList?.contains('description'));
|
||||
```
|
||||
|
||||
Dovresti avere tre elementi di `td`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td').length === 3);
|
||||
```
|
||||
|
||||
Il tuo primo elemento `td` dovrebbe avere il testo `$500`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[0]?.textContent === '$500');
|
||||
```
|
||||
|
||||
Il secondo elemento `td` dovrebbe avere il testo `$650`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[1]?.textContent === '$650');
|
||||
```
|
||||
|
||||
Il tuo terzo elemento `td` dovrebbe avvere il testo `$728`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.textContent === '$728');
|
||||
```
|
||||
|
||||
Il tuo terzo elemento `td` dovrebbe avere la `class` impostata su `current`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
--fcc-editable-region--
|
||||
<tr class="data">
|
||||
</tr>
|
||||
--fcc-editable-region--
|
||||
<tr class="total">
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
</table>
|
||||
<table>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,271 @@
|
||||
---
|
||||
id: 620191707bc65579ddd3ce15
|
||||
title: Step 55
|
||||
challengeType: 0
|
||||
dashedName: step-55
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Usando la stessa sintassi dei selettori, seleziona gli elementi `th` all'interno delle righe della tabella in cui la `class` è `total`. Allinea i testi a sinistra e dà loro un padding di `0.5rem 0 0.25rem 0.5rem`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti avere un selettore `tr[class="total"] th`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th'));
|
||||
```
|
||||
|
||||
Il selettore `tr[class="total"] th` dovrebbe avere una proprietà `text-align` impostata a `sinistra`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th')?.getPropertyValue('text-align') === 'left');
|
||||
```
|
||||
|
||||
Il selettore `tr[class="total"] th` dovrebbe avere una proprietà `padding` impostata a `0.5rem 0 0.25rem 0.5rem`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th')?.getPropertyValue('padding') === '0.5rem 0px 0.25rem 0.5rem');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Balance Sheet</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Net Worth</span></th>
|
||||
<td>$-171</td>
|
||||
<td>$136</td>
|
||||
<td class="current">$334</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
span[class~="sr-only"] {
|
||||
border: 0 !important;
|
||||
clip: rect(1px, 1px, 1px, 1px) !important;
|
||||
clip-path: inset(50%) !important;
|
||||
-webkit-clip-path: inset(50%) !important;
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
position: absolute !important;
|
||||
overflow: hidden !important;
|
||||
white-space: nowrap !important;
|
||||
padding: 0 !important;
|
||||
margin: -1px !important;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
h1 {
|
||||
max-width: 37.25rem;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 1.25rem;
|
||||
}
|
||||
|
||||
h1 .flex {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
h1 .flex span:first-of-type {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
h1 .flex span:last-of-type {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
section {
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
border: 2px solid #d0d0d5;
|
||||
}
|
||||
|
||||
#years {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
#years span[class] {
|
||||
font-weight: bold;
|
||||
width: 4.5rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
padding: 0 0.75rem 1.5rem 0.75rem;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
table caption {
|
||||
color: #356eaf;
|
||||
font-size: 1.3em;
|
||||
font-weight: normal;
|
||||
position: absolute;
|
||||
top: -2.25rem;
|
||||
left: 0.5rem;
|
||||
}
|
||||
|
||||
tbody td {
|
||||
width: 100vw;
|
||||
min-width: 4rem;
|
||||
max-width: 4rem;
|
||||
}
|
||||
|
||||
tbody th {
|
||||
width: calc(100% - 12rem);
|
||||
}
|
||||
|
||||
tr[class="total"] {
|
||||
border-bottom: 4px double #0a0a23;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,74 @@
|
||||
---
|
||||
id: 612e8279827a28352ce83a72
|
||||
title: Step 7
|
||||
challengeType: 0
|
||||
dashedName: step-7
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ora copia il set di sette elementi `.key` e incolla altri due set nel div `.keys`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti avere 21 elementi `.key`.
|
||||
|
||||
```js
|
||||
const keys = document.querySelectorAll('.key');
|
||||
assert(keys?.length === 21);
|
||||
```
|
||||
|
||||
Dovresti avere 15 elementi `.black--key`.
|
||||
|
||||
```js
|
||||
const blackKeys = document.querySelectorAll('.black--key');
|
||||
assert(blackKeys?.length === 15);
|
||||
```
|
||||
|
||||
Tutti gli elementi `.key` dovrebbero essere all'interno dell'elemento `.keys`.
|
||||
|
||||
```js
|
||||
const keys = document.querySelector('.keys');
|
||||
assert(keys?.querySelectorAll('.key')?.length === 21);
|
||||
```
|
||||
|
||||
Tutti gli elementi `.black--key` dovrebbero essere all'interno dell'elemento `.keys`.
|
||||
|
||||
```js
|
||||
const keys = document.querySelector('.keys');
|
||||
assert(keys?.querySelectorAll('.black--key')?.length === 15);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Piano</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<div id="piano">
|
||||
<div class="keys">
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
</div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,139 @@
|
||||
---
|
||||
id: 612ebf9a210f2b6d77001e68
|
||||
title: Step 30
|
||||
challengeType: 0
|
||||
dashedName: step-30
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ora aggiungi un selettore `.logo` alla `@media` query e imposta la proprietà `width` a `150px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
La `@media` query dovrebbe avere un selettore `.logo`.
|
||||
|
||||
```js
|
||||
const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
|
||||
const logo = rules?.find(rule => rule.selectorText === '.logo');
|
||||
assert(logo);
|
||||
```
|
||||
|
||||
Il tuo nuovo selettore `.logo` dovrebbe avere una `width` di `150px`.
|
||||
|
||||
```js
|
||||
const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
|
||||
const logo = rules?.find(rule => rule.selectorText === '.logo');
|
||||
assert(logo?.style.width === '150px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Piano</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="piano">
|
||||
<img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
|
||||
<div class="keys">
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
#piano {
|
||||
background-color: #00471b;
|
||||
width: 992px;
|
||||
height: 290px;
|
||||
margin: 80px auto;
|
||||
padding: 90px 20px 0 20px;
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.keys {
|
||||
background-color: #040404;
|
||||
width: 949px;
|
||||
height: 180px;
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.key {
|
||||
background-color: #ffffff;
|
||||
position: relative;
|
||||
width: 41px;
|
||||
height: 175px;
|
||||
margin: 2px;
|
||||
float: left;
|
||||
border-radius: 0 0 3px 3px;
|
||||
}
|
||||
|
||||
.key.black--key::after {
|
||||
background-color: #1d1e22;
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -18px;
|
||||
width: 32px;
|
||||
height: 100px;
|
||||
border-radius: 0 0 3px 3px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 200px;
|
||||
position: absolute;
|
||||
top: 23px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
@media (max-width: 768px) {
|
||||
#piano {
|
||||
width: 335px;
|
||||
}
|
||||
|
||||
.keys {
|
||||
width: 318px;
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,74 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad6997a
|
||||
title: Step 17
|
||||
challengeType: 0
|
||||
dashedName: step-17
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Scrivi una nuova regola che seleziona `.one` e imposta la sua `width` a 425 pixel.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti avere un selettore `.one`.
|
||||
|
||||
```js
|
||||
const hasOne = new __helpers.CSSHelp(document).getStyle('.one');
|
||||
assert(hasOne);
|
||||
```
|
||||
|
||||
Dovresti impostare la proprietà `width` su `425px`.
|
||||
|
||||
```js
|
||||
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '425px');
|
||||
assert(hasWidth);
|
||||
```
|
||||
|
||||
Il tuo elemento `.one` dovrebbe avere un valore `width` di `425px`.
|
||||
|
||||
```js
|
||||
const oneWidth = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('width');
|
||||
assert(oneWidth === '425px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```css
|
||||
.canvas {
|
||||
width: 500px;
|
||||
height: 600px;
|
||||
background-color: #4d0f00;
|
||||
}
|
||||
|
||||
.frame {
|
||||
border: 50px solid black;
|
||||
width: 500px;
|
||||
padding: 50px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Rothko Painting</title>
|
||||
<link href="./styles.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="frame">
|
||||
<div class="canvas">
|
||||
<div class="one"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,94 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad69987
|
||||
title: Step 29
|
||||
challengeType: 0
|
||||
dashedName: step-29
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Non sei obbigato a usare i pixel quando dimensioni un elemento.
|
||||
|
||||
Crea una nuova regola, `.three`e imposta la sua `width` a `91%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti utilizzare il selettore `.three`.
|
||||
|
||||
```js
|
||||
const hasThree = new __helpers.CSSHelp(document).getStyle('.three');
|
||||
assert(hasThree);
|
||||
```
|
||||
|
||||
Dovresti impostare la proprietà `width` a `91%`.
|
||||
|
||||
```js
|
||||
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '91%');
|
||||
assert(hasWidth);
|
||||
```
|
||||
|
||||
L'elemento `#box-1` dovrebbe avere un valore `flex-basis` di `10em`.
|
||||
|
||||
```js
|
||||
const threeWidth = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('width');
|
||||
assert(threeWidth === '91%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```css
|
||||
.canvas {
|
||||
width: 500px;
|
||||
height: 600px;
|
||||
background-color: #4d0f00;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.frame {
|
||||
border: 50px solid black;
|
||||
width: 500px;
|
||||
padding: 50px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
width: 425px;
|
||||
height: 150px;
|
||||
background-color: #efb762;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.two {
|
||||
width: 475px;
|
||||
height: 200px;
|
||||
background-color: #8f0401;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Rothko Painting</title>
|
||||
<link href="./styles.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="frame">
|
||||
<div class="canvas">
|
||||
<div class="one"></div>
|
||||
<div class="two"></div>
|
||||
<div class="three"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,78 @@
|
||||
---
|
||||
id: 615f3e4af8008c5d494d3afe
|
||||
title: Step 15
|
||||
challengeType: 0
|
||||
dashedName: step-15
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Crea un selettore `p` e rimuovi tutti i margini.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti creare un selettore `p`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('p'));
|
||||
```
|
||||
|
||||
Il tuo selettore `p` dovrebbe avere una `margin` impostato a `0`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('p')?.margin === '0px');
|
||||
```
|
||||
|
||||
# --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
|
||||
* {
|
||||
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;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
margin: -4px 0;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
Reference in New Issue
Block a user