mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-01-08 12:04:29 -05:00
fix(curriculum): make id/class name notation consistent (Picasso Painting) (#48573)
* fix(curriculum): make id/class name notation consistent * fix(curriculum): fix spacing
This commit is contained in:
YMatsuda
@@ -7,7 +7,7 @@ dashedName: step-7
|
||||
|
||||
# --description--
|
||||
|
||||
Use an id selector to give the `back-wall` element a `background-color` of `#8B4513`.
|
||||
Use an id selector to give the element with the id `back-wall` a `background-color` of `#8B4513`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-8
|
||||
|
||||
# --description--
|
||||
|
||||
Give the `back-wall` element a `width` of `100%` and a `height` of `60%`.
|
||||
Give the `#back-wall` element a `width` of `100%` and a `height` of `60%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -9,9 +9,9 @@ dashedName: step-9
|
||||
|
||||
Typically, HTML is rendered in a top-down manner. Elements at the top of the code are positioned at the top of the page. However, many times you may want to move the elements to different positions. You can do this with the `position` property.
|
||||
|
||||
Set the `position` property for the `back-wall` element to `absolute`. An `absolute` position takes the element out of that top-down document flow and allows you to adjust it relative to its container.
|
||||
Set the `position` property for the `#back-wall` element to `absolute`. An `absolute` position takes the element out of that top-down document flow and allows you to adjust it relative to its container.
|
||||
|
||||
When an element is manually positioned, you can shift its layout with `top`, `left`, `right`, and `bottom`. Set the `back-wall` to have a `top` value of `0`, and a `left` value of `0`.
|
||||
When an element is manually positioned, you can shift its layout with `top`, `left`, `right`, and `bottom`. Set the `#back-wall` element to have a `top` value of `0`, and a `left` value of `0`.
|
||||
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-11
|
||||
|
||||
# --description--
|
||||
|
||||
Below your `back-wall` element, create a `div` with a `class` of `characters`. This is where you will be creating your painting's characters.
|
||||
Below your `#back-wall` element, create a `div` with a `class` of `characters`. This is where you will be creating your painting's characters.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-12
|
||||
|
||||
# --description--
|
||||
|
||||
Inside that `characters` element, create another `div` with an `id` of `offwhite-character`.
|
||||
Inside that `.characters` element, create another `div` with an `id` of `offwhite-character`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-14
|
||||
|
||||
# --description--
|
||||
|
||||
This character needs eyes. Create two `div` elements in the `black-mask` element. Give them the classes `eyes left` and `eyes right`, in that order.
|
||||
This character needs eyes. Create two `div` elements in the `#black-mask` element. Give them the classes `eyes left` and `eyes right`, in that order.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-15
|
||||
|
||||
# --description--
|
||||
|
||||
Create some "dots" for the instrument. Add five `div` elements within your `gray-instrument` element. Set the `class` of each to `black-dot`.
|
||||
Create some "dots" for the instrument. Add five `div` elements within your `#gray-instrument` element. Set the `class` of each to `black-dot`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-16
|
||||
|
||||
# --description--
|
||||
|
||||
Using an `id` selector, create a rule for your `offwhite-character` element. Give it a `width` of `300px`, a `height` of `550px`, and a `background-color` of `GhostWhite`.
|
||||
Using an id selector, create a rule for the element with the id `offwhite-character`. Give it a `width` of `300px`, a `height` of `550px`, and a `background-color` of `GhostWhite`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-17
|
||||
|
||||
# --description--
|
||||
|
||||
Move the `offwhite-character` into place by giving it a `position` of `absolute`, a `top` value of `20%`, and a `left` value of `17.5%`.
|
||||
Move the `#offwhite-character` into place by giving it a `position` of `absolute`, a `top` value of `20%`, and a `left` value of `17.5%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-18
|
||||
|
||||
# --description--
|
||||
|
||||
Using an `id` selector, style your `white-hat` element. Give it a `width` and `height` of `0`, and a `border-style` of `solid`.
|
||||
Using an id selector, style the element with the id `white-hat`. Give it a `width` and `height` of `0`, and a `border-style` of `solid`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-22
|
||||
|
||||
# --description--
|
||||
|
||||
Using an `id` selector, create a rule for your `black-mask` element. Give it a `width` of `100%`, a `height` of `50px`, and a `background-color` of `rgb(45, 31, 19)`.
|
||||
Using an id selector, create a rule for the element with the id `black-mask`. Give it a `width` of `100%`, a `height` of `50px`, and a `background-color` of `rgb(45, 31, 19)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-25
|
||||
|
||||
# --description--
|
||||
|
||||
Using an `id` selector, give your `gray-instrument` element a `width` of `15%`, a `height` of `40%`, and a `background-color` of `rgb(167, 162, 117)`.
|
||||
Using an id selector, give the element with the id `gray-instrument` a `width` of `15%`, a `height` of `40%`, and a `background-color` of `rgb(167, 162, 117)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-28
|
||||
|
||||
# --description--
|
||||
|
||||
Use a class selector to create a rule for the `black-dot` elements. Set the `width` to `10px`, the `height` to `10px`, and the `background-color` to `rgb(45, 31, 19)`.
|
||||
Use a class selector to create a rule for the elements with `black-dot` class. Set the `width` to `10px`, the `height` to `10px`, and the `background-color` to `rgb(45, 31, 19)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-31
|
||||
|
||||
# --description--
|
||||
|
||||
Use an id selector to style your `tan-table` element. Give it a `width` of `450px`, a `height` of `140px`, and a `background-color` of `#D2691E`.
|
||||
Use an id selector to style the element with the id `tan-table`. Give it a `width` of `450px`, a `height` of `140px`, and a `background-color` of `#D2691E`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-35
|
||||
|
||||
# --description--
|
||||
|
||||
Within your new `black-character` element, add three `div` elements with the following `id` values, in order: `black-hat`, `gray-mask`, `white-paper`.
|
||||
Within your new `#black-character` element, add three `div` elements with the following `id` values, in order: `black-hat`, `gray-mask`, `white-paper`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-36
|
||||
|
||||
# --description--
|
||||
|
||||
The mask needs eyes. Within your `gray-mask` element, add two `div` elements. The first should have the `class` set to `eyes left`, and the second should have the `class` set to `eyes right`.
|
||||
The mask needs eyes. Within your `#gray-mask` element, add two `div` elements. The first should have the `class` set to `eyes left`, and the second should have the `class` set to `eyes right`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ Time to use some FontAwesome icons.
|
||||
|
||||
The `i` element is used for idiomatic text, or text that is separate from the "normal" text content. This could be for _italic_ text, such as scientific terms, or for icons like those provided by FontAwesome.
|
||||
|
||||
Within your `white-paper` element, add four `i` elements. Give them all a `class` value of `fas fa-music`.
|
||||
Within your `#white-paper` element, add four `i` elements. Give them all a `class` value of `fas fa-music`.
|
||||
|
||||
This special class is how FontAwesome determines which icon to load. `fas` indicates the category of icons (FontAwesome Solid, here), while `fa-music` selects the specific icon.
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-38
|
||||
|
||||
# --description--
|
||||
|
||||
Use an `id` selector to create a rule for your `black-character` element. Set the `width` to `300px`, the `height` to `500px`, and the `background-color` to `rgb(45, 31, 19)`.
|
||||
Use an id selector to create a rule for the element with the id `black-character`. Set the `width` to `300px`, the `height` to `500px`, and the `background-color` to `rgb(45, 31, 19)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-39
|
||||
|
||||
# --description--
|
||||
|
||||
Move the `black-character` element into place by setting the `position` to `absolute`, the `top` to `30%`, and the `left` to `59%`.
|
||||
Move the `#black-character` element into place by setting the `position` to `absolute`, the `top` to `30%`, and the `left` to `59%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-40
|
||||
|
||||
# --description--
|
||||
|
||||
Use an `id` selector to create a rule for your `black-hat` element. Give it a `width` of `0`, a `height` of `0`, and a `border-style` of `solid`.
|
||||
Use an id selector to create a rule for the element with the id `black-hat`. Give it a `width` of `0`, a `height` of `0`, and a `border-style` of `solid`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-42
|
||||
|
||||
# --description--
|
||||
|
||||
Just like with your `white-hat`, you should style the border for the `black-hat` element. Give it a `border-top-color`, `border-right-color`, and `border-bottom-color` of `transparent`. Set the `border-left-color` to `rgb(45, 31, 19)`.
|
||||
Just like with your `#white-hat`, you should style the border for the `#black-hat` element. Give it a `border-top-color`, `border-right-color`, and `border-bottom-color` of `transparent`. Set the `border-left-color` to `rgb(45, 31, 19)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-43
|
||||
|
||||
# --description--
|
||||
|
||||
Now position the `black-hat` element. Give it a `position` of `absolute`, with a `top` of `-150px` and a `left` of `0`.
|
||||
Now position the `#black-hat` element. Give it a `position` of `absolute`, with a `top` of `-150px` and a `left` of `0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-44
|
||||
|
||||
# --description--
|
||||
|
||||
Using an `id` selector, style the `gray-mask` element. Give it a `width` of `150px`, a `height` of `150px`, and a `background-color` of `rgb(167, 162, 117)`.
|
||||
Using an id selector, style the element with the id `gray-mask`. Give it a `width` of `150px`, a `height` of `150px`, and a `background-color` of `rgb(167, 162, 117)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-45
|
||||
|
||||
# --description--
|
||||
|
||||
Position the `gray-mask` by setting `position` to `absolute`, the `top` to `-10px`, and the `left` to `70px`.
|
||||
Position the `#gray-mask` element by setting `position` to `absolute`, the `top` to `-10px`, and the `left` to `70px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-46
|
||||
|
||||
# --description--
|
||||
|
||||
Using an `id` selector, create a rule for the `white-paper` element. Set the `width` to `400px`, the `height` to `100px`, and the `background-color` to `GhostWhite`.
|
||||
Using an id selector, create a rule for the id `white-paper`. Set the `width` to `400px`, the `height` to `100px`, and the `background-color` to `GhostWhite`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-47
|
||||
|
||||
# --description--
|
||||
|
||||
Give the `white-paper` a `position` of `absolute`, a `top` of `250px`, and a `left` of `-150px` to move it into place.
|
||||
Give the `#white-paper` a `position` of `absolute`, a `top` of `250px`, and a `left` of `-150px` to move it into place.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-48
|
||||
|
||||
# --description--
|
||||
|
||||
Set the `z-index` of the `white-paper` to `1`.
|
||||
Set the `z-index` of the `#white-paper` element to `1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-49
|
||||
|
||||
# --description--
|
||||
|
||||
FontAwesome icons come with their own styling to define the icon. However, you can still set the styling yourself as well, to change things like the color and size. For now, use a `class` selector to target your `fa-music` icons. Set the `display` to `inline-block`, the `margin-top` to `8%`, and the `margin-left` to `13%`.
|
||||
FontAwesome icons come with their own styling to define the icon. However, you can still set the styling yourself as well, to change things like the color and size. For now, use a class selector to target the icons with the class `fa-music`. Set the `display` to `inline-block`, the `margin-top` to `8%`, and the `margin-left` to `13%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-50
|
||||
|
||||
# --description--
|
||||
|
||||
Below your `black-character` element, add two new `div` elements. These will be the shawl. Give both of them a `class` of `blue`. Then give the first one an `id` of `blue-left`, and the second an `id` of `blue-right`.
|
||||
Below your `#black-character` element, add two new `div` elements. These will be the shawl. Give both of them a `class` of `blue`. Then give the first one an `id` of `blue-left`, and the second an `id` of `blue-right`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-51
|
||||
|
||||
# --description--
|
||||
|
||||
Use a `class` selector to target your new `blue` elements. Set the `background-color` to `#1E90FF`.
|
||||
Use a class selector to target the new elements with the class `blue`. Set the `background-color` to `#1E90FF`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-52
|
||||
|
||||
# --description--
|
||||
|
||||
Select the `blue-left` element with an `id` selector. Give it a `width` of `500px` and a `height` of `300px`.
|
||||
Select the element with the id `blue-left` using an id selector. Give it a `width` of `500px` and a `height` of `300px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-54
|
||||
|
||||
# --description--
|
||||
|
||||
Next, target your `blue-right` element with an `id` selector. Set the `width` to `400px` and the `height` to `300px`.
|
||||
Next, target the element with the id `blue-right` using an id selector. Set the `width` to `400px` and the `height` to `300px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-55
|
||||
|
||||
# --description--
|
||||
|
||||
Give the `blue-right` the correct positioning with `position` set to `absolute`, `top` set to `50%`, and `left` set to `40%`.
|
||||
Give the `#blue-right` element the correct positioning with `position` set to `absolute`, `top` set to `50%`, and `left` set to `40%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,11 +7,11 @@ dashedName: step-56
|
||||
|
||||
# --description--
|
||||
|
||||
Below your `blue` elements, add another `div`. Give it the `id` value of `orange-character`.
|
||||
Below your `.blue` elements, add another `div`. Give it the `id` value of `orange-character`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a new `div` element within your `characters` element.
|
||||
You should have a new `div` element within your `.characters` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.characters > div')?.length === 5);
|
||||
|
||||
@@ -7,11 +7,11 @@ dashedName: step-57
|
||||
|
||||
# --description--
|
||||
|
||||
Within that `orange-character` element, add four `div` elements. Give them the `id` values of `black-round-hat`, `eyes-div`, `triangles`, and `guitar`, in order.
|
||||
Within that `#orange-character` element, add four `div` elements. Give them the `id` values of `black-round-hat`, `eyes-div`, `triangles`, and `guitar`, in order.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have four new `div` elements within your `orange-character` element.
|
||||
You should have four new `div` elements within your `#orange-character` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#orange-character > div')?.length === 4);
|
||||
|
||||
@@ -7,11 +7,11 @@ dashedName: step-58
|
||||
|
||||
# --description--
|
||||
|
||||
The `eyes-div` element should hold some eyes. Add two `div` elements inside. Give the first a `class` of `eyes left`, and give the second a `class` of `eyes right`.
|
||||
The `#eyes-div` element should hold some eyes. Add two `div` elements inside. Give the first a `class` of `eyes left`, and give the second a `class` of `eyes right`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have two `div` elements nested in your `eyes-div`.
|
||||
You should have two `div` elements nested in your `#eyes-div` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#eyes-div > div')?.length === 2);
|
||||
|
||||
@@ -7,11 +7,11 @@ dashedName: step-59
|
||||
|
||||
# --description--
|
||||
|
||||
Within the `triangles` div, you will need to add the elements that will become your triangles. Create thirty `div` elements and give each of them the class `triangle`.
|
||||
Within the `#triangles` div, you will need to add the elements that will become your triangles. Create thirty `div` elements and give each of them the class `triangle`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have 30 `div` elements within your `triangles` element.
|
||||
You should have 30 `div` elements within your `#triangles` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#triangles > div')?.length === 30);
|
||||
|
||||
@@ -7,13 +7,13 @@ dashedName: step-60
|
||||
|
||||
# --description--
|
||||
|
||||
Within the `guitar` element, create three `div` elements. Give the first two a `class` value of `guitar`. Then give the first an `id` of `guitar-left`, and the second an `id` of `guitar-right`. Add an `id` to the third `div` with the value `guitar-neck`.
|
||||
Within the `#guitar` element, create three `div` elements. Give the first two a `class` value of `guitar`. Then give the first an `id` of `guitar-left`, and the second an `id` of `guitar-right`. Add an `id` to the third `div` with the value `guitar-neck`.
|
||||
|
||||
The third `div` should not have the `guitar` class.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have three new `div` elements within your `guitar` element.
|
||||
You should have three new `div` elements within your `#guitar` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#guitar > div')?.length === 3);
|
||||
|
||||
@@ -7,17 +7,17 @@ dashedName: step-61
|
||||
|
||||
# --description--
|
||||
|
||||
Use another FontAwesome icon for your `guitar`. Inside both the `guitar-left` and `guitar-right` elements, add an `i` element and give it a `class` of `fas fa-bars`.
|
||||
Use another FontAwesome icon for your `.guitar`. Inside both the `#guitar-left` and `#guitar-right` elements, add an `i` element and give it a `class` of `fas fa-bars`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Within your `guitar-left` element, you should add an `i` element.
|
||||
Within your `#guitar-left` element, you should add an `i` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#guitar-left > i')?.length === 1);
|
||||
```
|
||||
|
||||
Within your `guitar-right` element, you should add an `i` element.
|
||||
Within your `#guitar-right` element, you should add an `i` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#guitar-right > i')?.length === 1);
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-62
|
||||
|
||||
# --description--
|
||||
|
||||
Select your `orange-character` element with an `id` selector. Give it a `width` of `250px`, a `height` of `550px`, and a `background-color` of `rgb(240, 78, 42)`.
|
||||
Select your `orange-character` element with an id selector. Give it a `width` of `250px`, a `height` of `550px`, and a `background-color` of `rgb(240, 78, 42)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-63
|
||||
|
||||
# --description--
|
||||
|
||||
Give the `orange-character` a `position` of `absolute`, a `top` of `25%`, and a `left` of `40%`.
|
||||
Give the `#orange-character` element a `position` of `absolute`, a `top` of `25%`, and a `left` of `40%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-64
|
||||
|
||||
# --description--
|
||||
|
||||
Style your `black-round-hat` element with an `id` selector. Set the `width` to `180px`, the `height` to `150px`, and the `background-color` to `rgb(45, 31, 19)`.
|
||||
Style the element with the id `black-round-hat` using an id selector. Set the `width` to `180px`, the `height` to `150px`, and the `background-color` to `rgb(45, 31, 19)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-65
|
||||
|
||||
# --description--
|
||||
|
||||
The `black-round-hat` should probably be round. Give it a `border-radius` of `50%` to fix this.
|
||||
The `#black-round-hat` element should probably be round. Give it a `border-radius` of `50%` to fix this.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-66
|
||||
|
||||
# --description--
|
||||
|
||||
Move the `black-round-hat` into place with a `position` of `absolute`, a `top` of `-100px`, and a `left` of `5px`.
|
||||
Move the `#black-round-hat` element into place with a `position` of `absolute`, a `top` of `-100px`, and a `left` of `5px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-67
|
||||
|
||||
# --description--
|
||||
|
||||
Put the `black-round-hat` on the correct layer with a `z-index` of `-1`.
|
||||
Put the `#black-round-hat` element on the correct layer with a `z-index` of `-1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-68
|
||||
|
||||
# --description--
|
||||
|
||||
Use an `id` selector to create a rule for your `eyes-div` element. Set the `width` to `180px` and the `height` to `50px`.
|
||||
Use an id selector to create a rule for the element with the id `eyes-div`. Set the `width` to `180px` and the `height` to `50px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-69
|
||||
|
||||
# --description--
|
||||
|
||||
Now move the `eyes-div` into position with `position` set to `absolute`, `top` set to `-40px`, and `left` set to `20px`.
|
||||
Now move the `#eyes-div` element into position with `position` set to `absolute`, `top` set to `-40px`, and `left` set to `20px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-70
|
||||
|
||||
# --description--
|
||||
|
||||
Give the `eyes-div` a `z-index` of `3`.
|
||||
Give the `#eyes-div` element a `z-index` of `3`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-79
|
||||
|
||||
# --description--
|
||||
|
||||
Now use a `class` selector to target `guitar`. This will style the two "halves" of your guitar. Set the `width` to `150px`, the `height` to `120px`, the `background-color` to `Goldenrod`, and the `border-radius` to `50%`.
|
||||
Now use a class selector to target `guitar`. This will style the two "halves" of your guitar. Set the `width` to `150px`, the `height` to `120px`, the `background-color` to `Goldenrod`, and the `border-radius` to `50%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-82
|
||||
|
||||
# --description--
|
||||
|
||||
Now you need to move the bar icons into place. Create a `class` selector for the `fa-bars` class. Set the `display` to `block`, the `margin-top` to `30%`, and the `margin-left` to `40%`.
|
||||
Now you need to move the bar icons into place. Create a class selector for the `fa-bars` class. Set the `display` to `block`, the `margin-top` to `30%`, and the `margin-left` to `40%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-83
|
||||
|
||||
# --description--
|
||||
|
||||
Use an `id` selector to create a `guitar-neck` rule. Set the `width` to `200px`, the `height` to `30px`, and the `background-color` to `#D2691E`.
|
||||
Use an id selector to create a rule for the id `guitar-neck`. Set the `width` to `200px`, the `height` to `30px`, and the `background-color` to `#D2691E`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-84
|
||||
|
||||
# --description--
|
||||
|
||||
Now move the `guitar-neck` with a `position` of `absolute`, a `top` value of `45px`, and a `left` value of `200px`.
|
||||
Now move the `#guitar-neck` element with a `position` of `absolute`, a `top` value of `45px`, and a `left` value of `200px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-85
|
||||
|
||||
# --description--
|
||||
|
||||
Give the `guitar-neck` a `z-index` of `3`.
|
||||
Give the `#guitar-neck` element a `z-index` of `3`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-86
|
||||
|
||||
# --description--
|
||||
|
||||
Time to style your `eyes` elements. Use a `class` selector to set the `width` to `35px`, the `height` to `20px`, the `background-color` to `#8B4513`, and the `border-radius` to `20px 50%`.
|
||||
Time to style the elements with the `eyes` class. Use a class selector to set the `width` to `35px`, the `height` to `20px`, the `background-color` to `#8B4513`, and the `border-radius` to `20px 50%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-89
|
||||
|
||||
# --description--
|
||||
|
||||
One last step. The FontAwesome icons are a little too small. Target all of them with a `class` selector for `fas`, and set the `font-size` to `30px`.
|
||||
One last step. The FontAwesome icons are a little too small. Target all of them with a class selector for `fas`, and set the `font-size` to `30px`.
|
||||
|
||||
With that, your Picasso painting is complete!
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-75
|
||||
|
||||
# --description--
|
||||
|
||||
Adjust the layout of the `triangle` elements with a `display` of `inline-block`.
|
||||
Adjust the layout of the `.triangle` elements with a `display` of `inline-block`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-74
|
||||
|
||||
# --description--
|
||||
|
||||
Give your `triangle` elements the correct color. Set the `border-top-color`, `border-bottom-color`, and `border-left-color` to `transparent`. Set the `border-right-color` to `Gold`.
|
||||
Give your `.triangle` elements the correct color. Set the `border-top-color`, `border-bottom-color`, and `border-left-color` to `transparent`. Set the `border-right-color` to `Gold`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-73
|
||||
|
||||
# --description--
|
||||
|
||||
Style the border of your `triangle` elements. Set the `border-style` to `solid` and the `border-width` to `42px 45px 45px 0`.
|
||||
Style the border of your `.triangle` elements. Set the `border-style` to `solid` and the `border-width` to `42px 45px 45px 0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-72
|
||||
|
||||
# --description--
|
||||
|
||||
Create a `class` selector for your `triangle` elements. Set the `width` to `0` and the `height` to `0`.
|
||||
Create a class selector for the elements with the `triangle` class. Set the `width` to `0` and the `height` to `0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-71
|
||||
|
||||
# --description--
|
||||
|
||||
Target your `triangles` element with an `id` selector. Set the `width` to `250px` and the `height` to `550px`.
|
||||
Target the element with the id `triangles` using an id selector. Set the `width` to `250px` and the `height` to `550px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-76
|
||||
|
||||
# --description--
|
||||
|
||||
Now use an `id` selector for `guitar`. Set the `width` to `100%`, and the `height` to `100px`.
|
||||
Now use an id selector for `guitar`. Set the `width` to `100%`, and the `height` to `100px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-41
|
||||
|
||||
# --description--
|
||||
|
||||
Set the `border-width` of the `black-hat` to `150px 0 0 300px`.
|
||||
Set the `border-width` of the `#black-hat` to `150px 0 0 300px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
Reference in New Issue
Block a user