diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json index b92a2fef23..fbc128622e 100644 --- a/client/i18n/locales/english/intro.json +++ b/client/i18n/locales/english/intro.json @@ -75,6 +75,13 @@ "css-variables-skyline": { "title": "CSS Variables Skyline", "intro": ["", ""] + }, + "css-picasso-painting": { + "title": "CSS Picasso Painting", + "intro": [ + "Pablo Picasso was known for his Cubism style of painting, a style recognized by representations of objects broken down and reassembled from multiple perspectives. Picasso's paintings are often highly abstract and thought provoking.", + "In this course, you will use CSS to create your own painting in the style of Picasso. You will learn about FontAwesome SVG icons, CSS positioning, and reinforce the skills you have already been learning." + ] } } }, diff --git a/client/utils/help-category-map.json b/client/utils/help-category-map.json index 9f62c2fcf8..676024a8c8 100644 --- a/client/utils/help-category-map.json +++ b/client/utils/help-category-map.json @@ -6,6 +6,7 @@ "responsive-web-design-principles": "HTML-CSS", "css-flexbox": "HTML-CSS", "css-grid": "HTML-CSS", + "css-picasso-painting": "HTML-CSS", "responsive-web-design-projects": "HTML-CSS", "basic-javascript": "JavaScript", "es6": "JavaScript", diff --git a/curriculum/challenges/_meta/css-picasso-painting/meta.json b/curriculum/challenges/_meta/css-picasso-painting/meta.json new file mode 100644 index 0000000000..a906c56c66 --- /dev/null +++ b/curriculum/challenges/_meta/css-picasso-painting/meta.json @@ -0,0 +1,370 @@ +{ + "name": "CSS Picasso Painting", + "isUpcomingChange": true, + "dashedName": "css-picasso-painting", + "order": 11, + "time": "5 hours", + "template": "", + "required": [], + "superBlock": "responsive-web-design", + "superOrder": 1, + "isBeta": true, + "challengeOrder": [ + [ + "60b69a66b6ddb80858c51578", + "Part 1" + ], + [ + "60b69a66b6ddb80858c51579", + "Part 2" + ], + [ + "60b80da8676fb3227967a731", + "Part 3" + ], + [ + "60b69a66b6ddb80858c5157a", + "Part 4" + ], + [ + "60b69a66b6ddb80858c5157b", + "Part 5" + ], + [ + "60b69a66b6ddb80858c5157c", + "Part 6" + ], + [ + "60b69a66b6ddb80858c5157d", + "Part 7" + ], + [ + "60b69a66b6ddb80858c5157e", + "Part 8" + ], + [ + "60b69a66b6ddb80858c5157f", + "Part 9" + ], + [ + "60b69a66b6ddb80858c51580", + "Part 10" + ], + [ + "60b69a66b6ddb80858c51581", + "Part 11" + ], + [ + "60b69a66b6ddb80858c51582", + "Part 12" + ], + [ + "60b69a66b6ddb80858c51583", + "Part 13" + ], + [ + "60b69a66b6ddb80858c51584", + "Part 14" + ], + [ + "60b69a66b6ddb80858c51585", + "Part 15" + ], + [ + "60b69a66b6ddb80858c51586", + "Part 16" + ], + [ + "60b69a66b6ddb80858c51587", + "Part 17" + ], + [ + "60b69a66b6ddb80858c51588", + "Part 18" + ], + [ + "60b69a66b6ddb80858c51589", + "Part 19" + ], + [ + "60b69a66b6ddb80858c5158a", + "Part 20" + ], + [ + "60b69a66b6ddb80858c5158b", + "Part 21" + ], + [ + "60b69a66b6ddb80858c5158c", + "Part 22" + ], + [ + "60b69a66b6ddb80858c5158d", + "Part 23" + ], + [ + "60b69a66b6ddb80858c5158e", + "Part 24" + ], + [ + "60b69a66b6ddb80858c5158f", + "Part 25" + ], + [ + "60b69a66b6ddb80858c51590", + "Part 26" + ], + [ + "60b69a66b6ddb80858c51591", + "Part 27" + ], + [ + "60b69a66b6ddb80858c51592", + "Part 28" + ], + [ + "60b69a66b6ddb80858c51593", + "Part 29" + ], + [ + "60b69a66b6ddb80858c51594", + "Part 30" + ], + [ + "60b69a66b6ddb80858c51595", + "Part 31" + ], + [ + "60b69a66b6ddb80858c51596", + "Part 32" + ], + [ + "60b69a66b6ddb80858c51597", + "Part 33" + ], + [ + "60b69a66b6ddb80858c51598", + "Part 34" + ], + [ + "60b69a66b6ddb80858c51599", + "Part 35" + ], + [ + "60b69a66b6ddb80858c5159a", + "Part 36" + ], + [ + "60b69a66b6ddb80858c5159b", + "Part 37" + ], + [ + "60b69a66b6ddb80858c5159c", + "Part 38" + ], + [ + "60b69a66b6ddb80858c5159d", + "Part 39" + ], + [ + "60b69a66b6ddb80858c5159e", + "Part 40" + ], + [ + "60bad32219ebcb4a8810ac6a", + "Part 41" + ], + [ + "60b69a66b6ddb80858c5159f", + "Part 42" + ], + [ + "60b69a66b6ddb80858c515a0", + "Part 43" + ], + [ + "60b69a66b6ddb80858c515a1", + "Part 44" + ], + [ + "60b69a66b6ddb80858c515a2", + "Part 45" + ], + [ + "60b69a66b6ddb80858c515a3", + "Part 46" + ], + [ + "60b69a66b6ddb80858c515a4", + "Part 47" + ], + [ + "60b69a66b6ddb80858c515a5", + "Part 48" + ], + [ + "60b69a66b6ddb80858c515a6", + "Part 49" + ], + [ + "60b69a66b6ddb80858c515a7", + "Part 50" + ], + [ + "60b69a66b6ddb80858c515a8", + "Part 51" + ], + [ + "60b69a66b6ddb80858c515a9", + "Part 52" + ], + [ + "60b69a66b6ddb80858c515aa", + "Part 53" + ], + [ + "60b69a66b6ddb80858c515ab", + "Part 54" + ], + [ + "60b69a66b6ddb80858c515ac", + "Part 55" + ], + [ + "60b69a66b6ddb80858c515ad", + "Part 56" + ], + [ + "60b69a66b6ddb80858c515ae", + "Part 57" + ], + [ + "60b69a66b6ddb80858c515af", + "Part 58" + ], + [ + "60b69a66b6ddb80858c515b0", + "Part 59" + ], + [ + "60b69a66b6ddb80858c515b1", + "Part 60" + ], + [ + "60b69a66b6ddb80858c515b2", + "Part 61" + ], + [ + "60b69a66b6ddb80858c515b3", + "Part 62" + ], + [ + "60b69a66b6ddb80858c515b4", + "Part 63" + ], + [ + "60b69a66b6ddb80858c515b5", + "Part 64" + ], + [ + "60b69a66b6ddb80858c515b6", + "Part 65" + ], + [ + "60b69a66b6ddb80858c515b7", + "Part 66" + ], + [ + "60b69a66b6ddb80858c515b8", + "Part 67" + ], + [ + "60b69a66b6ddb80858c515b9", + "Part 68" + ], + [ + "60b69a66b6ddb80858c515ba", + "Part 69" + ], + [ + "60b69a66b6ddb80858c515bc", + "Part 70" + ], + [ + "60ba8914bab51f0fb8228e9c", + "Part 71" + ], + [ + "60ba89146b25080f99ab54ad", + "Part 72" + ], + [ + "60ba8913f1704c0f7a8906b8", + "Part 73" + ], + [ + "60ba89123a445e0f5c9e4022", + "Part 74" + ], + [ + "60ba890832b4940f24d1936b", + "Part 75" + ], + [ + "60ba929345ab0714a3743655", + "Part 76" + ], + [ + "60ba9296d4d6b414c1b10995", + "Part 77" + ], + [ + "60ba92987c1e4914dfa7a0b9", + "Part 78" + ], + [ + "60b69a66b6ddb80858c515bd", + "Part 79" + ], + [ + "60b69a66b6ddb80858c515be", + "Part 80" + ], + [ + "60b69a66b6ddb80858c515bf", + "Part 81" + ], + [ + "60b69a66b6ddb80858c515c0", + "Part 82" + ], + [ + "60b69a66b6ddb80858c515c1", + "Part 83" + ], + [ + "60b69a66b6ddb80858c515c2", + "Part 84" + ], + [ + "60b69a66b6ddb80858c515c3", + "Part 85" + ], + [ + "60b69a66b6ddb80858c515c4", + "Part 86" + ], + [ + "60b69a66b6ddb80858c515c5", + "Part 87" + ], + [ + "60b69a66b6ddb80858c515c6", + "Part 88" + ], + [ + "60b69a66b6ddb80858c515c7", + "Part 89" + ] + ] +} \ No newline at end of file diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-001.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-001.md new file mode 100644 index 0000000000..d4e89b2a77 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-001.md @@ -0,0 +1,112 @@ +--- +id: 60b69a66b6ddb80858c51578 +title: Part 1 +challengeType: 0 +dashedName: part-1 +--- + +# --description-- + +Start by setting up your HTML structure. Add a `` declaration and an `html` element. Within the `html` element, add a `head` element and a `body` element. + +# --hints-- + +Your code should contain the `DOCTYPE` reference. + +```js +assert(code.match(/` after the type. + +```js +assert(code.match(/html\s*>/gi)); +``` + +Your `html` element should be below the `DOCTYPE` declaration. + +```js +assert(code.match(/(?)/gi)); +``` + +Your `html` element should have an opening tag. + +```js +assert(code.match(//gi)); +``` + +Your `html` element should have a closing tag. + +```js +assert(code.match(/<\/html\s*>/)); +``` + +You should have an opening `head` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `head` tag. + +```js +assert(code.match(/<\/head\s*>/i)); +``` + +You should have an opening `body` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `body` tag. + +```js +assert(code.match(/<\/body\s*>/i)); +``` + +The `head` and `body` elements should be siblings. + +```js +assert(document.querySelector('head')?.nextElementSibling?.localName === 'body'); +``` + +The `head` element should be within the `html` element. + +```js +assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head')); +``` + +The `body` element should be within the `html` element. + +```js +assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body')); +``` + +# --seed-- + +## --seed-contents-- + +```html + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + +```css + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-002.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-002.md new file mode 100644 index 0000000000..5615a81448 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-002.md @@ -0,0 +1,63 @@ +--- +id: 60b69a66b6ddb80858c51579 +title: Part 2 +challengeType: 0 +dashedName: part-2 +--- + +# --description-- + +Within your `head` element, add a `meta` tag with the `charset` attribute set to `utf-8`. Also add a `title` element with the text `freeCodeCamp Picasso Painting`. + +# --hints-- + +You should add exactly one `meta` element. + +```js +assert(document.querySelectorAll('meta').length === 1); +``` + +Your `meta` element should have a `charset` attribute. + +```js +assert(document.querySelector('meta')?.getAttribute('charset')); +``` + +Your `charset` attribute should be set to `utf-8`. + +```js +assert(document.querySelector('meta')?.getAttribute('charset') === 'utf-8'); +``` + +You should add exactly one `title` element. + +```js +assert(document.querySelectorAll('title').length === 1); +``` + +Your `title` element should have the text `freeCodeCamp Picasso Painting`. Note that spelling and casing matter. + +```js +assert(document.querySelector('title')?.innerText === 'freeCodeCamp Picasso Painting'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + --fcc-editable-region-- + + --fcc-editable-region-- + + + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-003.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-003.md new file mode 100644 index 0000000000..246da2c083 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-003.md @@ -0,0 +1,74 @@ +--- +id: 60b80da8676fb3227967a731 +title: Part 3 +challengeType: 0 +dashedName: part-3 +--- + +# --description-- + +Go ahead and link your CSS file now, even though you have not written any CSS yet. + +Add a `link` element with a `rel` of `stylesheet`, a `type` of `text/css`, and an `href` of `styles.css`. + +# --hints-- + + +Your code should have a `link` element. + +```js +assert.match(code, //i)); +``` + +Your `link` element should be within your `head` element. + +```js +assert(code.match(/[\w\W\s]*[\w\W\s]*<\/head>/i)) +``` + +Your `link` element should have a `rel` attribute with the value `stylesheet`. + +```js +assert.match(code, / + + + + freeCodeCamp Picasso Painting + --fcc-editable-region-- + + --fcc-editable-region-- + + + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-004.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-004.md new file mode 100644 index 0000000000..175675f297 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-004.md @@ -0,0 +1,58 @@ +--- +id: 60b69a66b6ddb80858c5157a +title: Part 4 +challengeType: 0 +dashedName: part-4 +--- + +# --description-- + +FontAwesome is a library of SVG-powered icons, many of which are freely available to use. You will be using some of these icons in this project, so you will need to link the external stylesheet to your HTML. + +Add a `link` element with a `rel` of `stylesheet` and an `href` of `https://use.fontawesome.com/releases/v5.8.2/css/all.css`. + +# --hints-- + +You should add another `link` element. + +```js +// We set this to 1 because the CSS link is stripped from the code by our parser. +assert(document.querySelectorAll('link').length === 2); +``` + +Your `link` element should have a `rel` of `stylesheet`. + +```js +assert(document.querySelector('link')?.getAttribute('rel') === 'stylesheet'); +``` + +Your `link` element should have an `href` of +`https://use.fontawesome.com/releases/v5.8.2/css/all.css`. + +```js +assert(document.querySelectorAll('link')?.[1]?.getAttribute('href') === 'https://use.fontawesome.com/releases/v5.8.2/css/all.css') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + --fcc-editable-region-- + + --fcc-editable-region-- + + + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-005.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-005.md new file mode 100644 index 0000000000..5a6b3bd887 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-005.md @@ -0,0 +1,50 @@ +--- +id: 60b69a66b6ddb80858c5157b +title: Part 5 +challengeType: 0 +dashedName: part-5 +--- + +# --description-- + +To get your painting started, give your `body` element a `background-color` of `rgb(184, 132, 46)`. + +# --hints-- + +You should use the `body` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')); +``` + +Your `body` element should have the `background-color` property set to `rgb (184, 132, 46)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(184, 132, 46)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + + + +``` + +```css + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-006.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-006.md new file mode 100644 index 0000000000..13ee11f9f3 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-006.md @@ -0,0 +1,51 @@ +--- +id: 60b69a66b6ddb80858c5157c +title: Part 6 +challengeType: 0 +dashedName: part-6 +--- + +# --description-- + +Within your body tag, add a `div` element. Give it an `id` of `back-wall`. + +# --hints-- + +You should add exactly 1 `div` element. + +```js +assert(document.querySelectorAll('div').length === 1); +``` + +Your `div` element should have the `id` value of `back-wall`. + +```js +assert(document.querySelector('div')?.getAttribute('id') === 'back-wall'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + + --fcc-editable-region-- + + --fcc-editable-region-- + + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-007.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-007.md new file mode 100644 index 0000000000..2ae851270b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-007.md @@ -0,0 +1,54 @@ +--- +id: 60b69a66b6ddb80858c5157d +title: Part 7 +challengeType: 0 +dashedName: part-7 +--- + +# --description-- + +Use an id selector to give the `back-wall` element a `background-color` of `#8B4513`. + +# --hints-- + +You should use a `#back-wall` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#back-wall')); +``` + +Your `#back-wall` selector should have a `background-color` of `#8B4513`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.backgroundColor === 'rgb(139, 69, 19)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-008.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-008.md new file mode 100644 index 0000000000..9ca7d4c9be --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-008.md @@ -0,0 +1,56 @@ +--- +id: 60b69a66b6ddb80858c5157e +title: Part 8 +challengeType: 0 +dashedName: part-8 +--- + +# --description-- + +Give the `back-wall` element a `width` of `100%` and a `height` of `60%`. + +# --hints-- + +You should set the `width` of the `#back-wall` selector to `100%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.width === '100%'); +``` + +You should set the `height` of the `#back-wall` selector to `60%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.height === '60%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-009.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-009.md new file mode 100644 index 0000000000..6a9ac11aa7 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-009.md @@ -0,0 +1,69 @@ +--- +id: 60b69a66b6ddb80858c5157f +title: Part 9 +challengeType: 0 +dashedName: part-9 +--- + +# --description-- + +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` attribute. + +Set the `position` attribute 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`. + + +# --hints-- + +Your `#back-wall` selector should have the `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.position === 'absolute'); +``` + +Your `#back-wall` selector should have the `top` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.top === '0px'); +``` + +Your `#back-wall` selector should have the `left` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.left === '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-010.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-010.md new file mode 100644 index 0000000000..b48deb5331 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-010.md @@ -0,0 +1,59 @@ +--- +id: 60b69a66b6ddb80858c51580 +title: Part 10 +challengeType: 0 +dashedName: part-10 +--- + +# --description-- + +The `z-index` property is used to create "layers" for your HTML elements. If you are familiar with image editing tools, you may have worked with layers before. This is a similar concept. + +Elements with a higher `z-index` value will appear to be layered on top of elements with a lower `z-index` value. This can be combined with the positioning in the previous lesson to create unique effects. + +Since the `back-wall` element will need to appear "behind" the other elements you will be creating, give the `back-wall` element a `z-index` of `-1`. + +# --hints-- + +Your `#back-wall` selector should have the `z-index` property set to `-1`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.zIndex === '-1'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-011.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-011.md new file mode 100644 index 0000000000..857b63223f --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-011.md @@ -0,0 +1,68 @@ +--- +id: 60b69a66b6ddb80858c51581 +title: Part 11 +challengeType: 0 +dashedName: part-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. + +# --hints-- + +You should only add one new `div` element. + +```js +assert(document.querySelectorAll('div').length === 2); +``` + +Your new `div` element should come after your `#back-wall` element. + +```js +assert(document.querySelector('#back-wall')?.nextElementSibling?.localName === 'div'); +``` + +Your new `div` element should have the `class` set to `characters`. + +```js +assert(document.querySelectorAll('div')?.[1]?.classList?.contains('characters')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+ --fcc-editable-region-- + + --fcc-editable-region-- + + +``` + +```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; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-012.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-012.md new file mode 100644 index 0000000000..a6361af93a --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-012.md @@ -0,0 +1,70 @@ +--- +id: 60b69a66b6ddb80858c51582 +title: Part 12 +challengeType: 0 +dashedName: part-12 +--- + +# --description-- + +Inside that `characters` element, create another `div` with an `id` of `offwhite-character`. + +# --hints-- + +You should only create 1 additional `div` element. + +```js +assert(document.querySelectorAll('div').length === 3); +``` + +Your new `div` element should be nested in your `.characters` element. + +```js +assert(document.querySelector('.characters div')); +``` + +Your new `div` element should have an `id` of `offwhite-character`. + +```js +assert(document.querySelector('.characters div')?.getAttribute('id') === 'offwhite-character'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+ + +``` + +```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; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-013.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-013.md new file mode 100644 index 0000000000..33e9cd8ace --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-013.md @@ -0,0 +1,84 @@ +--- +id: 60b69a66b6ddb80858c51583 +title: Part 13 +challengeType: 0 +dashedName: part-13 +--- + +# --description-- + +Create four `div` elements inside your `offwhite-character` element. Give those `div` elements the following `id` values, in order: `white-hat`, `black-mask`, `gray-instrument`, `tan-table`. + +# --hints-- + +You should add four `div` elements within your `.offwhite-character` element. + +```js +assert(document.querySelectorAll('#offwhite-character div').length === 4); +``` + +Your first new `div` element should have the `id` of `white-hat`. + +```js +assert(document.querySelectorAll('#offwhite-character div')[0]?.getAttribute('id') === 'white-hat'); +``` + +Your second new `div` element should have the `id` of `black-mask`. + +```js +assert(document.querySelectorAll('#offwhite-character div')[1]?.getAttribute('id') === 'black-mask'); +``` + +Your third new `div` element should have the `id` of `gray-instrument`. + +```js +assert(document.querySelectorAll('#offwhite-character div')[2]?.getAttribute('id') === 'gray-instrument'); +``` + +Your fourth new `div` element should have the `id` of `tan-table`. + +```js +assert(document.querySelectorAll('#offwhite-character div')[3]?.getAttribute('id') === 'tan-table'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+ + +``` + +```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; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-014.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-014.md new file mode 100644 index 0000000000..676c69cd9d --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-014.md @@ -0,0 +1,79 @@ +--- +id: 60b69a66b6ddb80858c51584 +title: Part 14 +challengeType: 0 +dashedName: part-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. + +# --hints-- + +You should create 2 `div` elements within your `#black-mask` element. + +```js +assert(document.querySelectorAll('#black-mask div').length === 2); +``` + +Your first new `div` should have the classes `eyes` and `left`. + +```js +assert(document.querySelectorAll('#black-mask div')[0]?.classList.contains('eyes')); +assert(document.querySelectorAll('#black-mask div')[0]?.classList.contains('left')); +``` + +Your second new `div` should have the classes `eyes` and `right`. + +```js +assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('eyes')); +assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('right')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
+
+
+ + +``` + +```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; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-015.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-015.md new file mode 100644 index 0000000000..83bff96868 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-015.md @@ -0,0 +1,74 @@ +--- +id: 60b69a66b6ddb80858c51585 +title: Part 15 +challengeType: 0 +dashedName: part-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`. + +# --hints-- + +You should have five new `div` elements within your `#gray-instrument` element. + +```js +assert(document.querySelectorAll('#gray-instrument div').length === 5); +``` + +Your five `div` elements should all have the class `black-dot`. + +```js +assert(document.querySelectorAll('#gray-instrument .black-dot').length === 5); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
+
+ + +``` + +```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; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-016.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-016.md new file mode 100644 index 0000000000..e095c56183 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-016.md @@ -0,0 +1,93 @@ +--- +id: 60b69a66b6ddb80858c51586 +title: Part 16 +challengeType: 0 +dashedName: part-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`. + +# --hints-- + +You should use the `#offwhite-character` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')); +``` + +Your `#offwhite-character` should have a `width` property set to `300px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.width === '300px'); +``` + +Your `#offwhite-character` should have a `height` property set to `550px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.height === '550px'); +``` + +Your `#offwhite-character` should have a `background-color` property set to `GhostWhite`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.backgroundColor === 'ghostwhite'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-017.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-017.md new file mode 100644 index 0000000000..1c39dfa6fb --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-017.md @@ -0,0 +1,91 @@ +--- +id: 60b69a66b6ddb80858c51587 +title: Part 17 +challengeType: 0 +dashedName: part-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%`. + +# --hints-- + +Your `#offwhite-character` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.position === 'absolute'); +``` + +Your `#offwhite-character` selector should have a `top` property set to `20%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.top === '20%'); +``` + +Your `#offwhite-character` selector should have a `left` property set to `17.5%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.left === '17.5%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-018.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-018.md new file mode 100644 index 0000000000..70fae6c5b2 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-018.md @@ -0,0 +1,102 @@ +--- +id: 60b69a66b6ddb80858c51588 +title: Part 18 +challengeType: 0 +dashedName: part-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`. + +# --hints-- + +You should use a `#white-hat` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')); +``` + +Your `#white-hat` selector should have a `width` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.width === '0px'); +``` + +Your `#white-hat` selector should have a `height` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.height === '0px'); +``` + +Your `#white-hat` selector should have a `border-style` property set to `solid`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderStyle === 'solid'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-019.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-019.md new file mode 100644 index 0000000000..2cc098835a --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-019.md @@ -0,0 +1,88 @@ +--- +id: 60b69a66b6ddb80858c51589 +title: Part 19 +challengeType: 0 +dashedName: part-19 +--- + +# --description-- + +That does not look quite right. Set a `border-width` of `0 120px 140px 180px` to size the hat properly. + +# --hints-- + +Your `#white-hat` selector should have a `border-width` property set to `0 120px 140px 180px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderWidth === '0px 120px 140px 180px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-020.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-020.md new file mode 100644 index 0000000000..f63476b418 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-020.md @@ -0,0 +1,107 @@ +--- +id: 60b69a66b6ddb80858c5158a +title: Part 20 +challengeType: 0 +dashedName: part-20 +--- + +# --description-- + +Now you have a large box. Give it a `border-top-color`, `border-right-color`, and `border-left-color` of `transparent`. Set the `border-bottom-color` to `GhostWhite`. This will make it look more like a hat. + +# --hints-- + +Your `#white-hat` selector should have a `border-top-color` property set to `transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderTopColor === 'transparent'); +``` + +Your `#white-hat` selector should have a `border-right-color` property set to `transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderRightColor === 'transparent'); +``` + +Your `#white-hat` selector should have a `border-left-color` property set to `transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderLeftColor === 'transparent'); +``` + +Your `#white-hat` selector should have a `border-bottom-color` property set to `GhostWhite`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderBottomColor === 'ghostwhite'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-021.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-021.md new file mode 100644 index 0000000000..b1eef3805b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-021.md @@ -0,0 +1,105 @@ +--- +id: 60b69a66b6ddb80858c5158b +title: Part 21 +challengeType: 0 +dashedName: part-21 +--- + +# --description-- + +Give the hat a `position` of `absolute`, a `top` value of `-140px`, and a `left` value of `0`. + +# --hints-- + +Your `#white-hat` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.position === 'absolute'); +``` + +Your `#white-hat` selector should have a `top` property set to `-140px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.top === '-140px'); +``` + +Your `#white-hat` selector should have a `left` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.left === '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-022.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-022.md new file mode 100644 index 0000000000..d1ca2b5ec6 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-022.md @@ -0,0 +1,116 @@ +--- +id: 60b69a66b6ddb80858c5158c +title: Part 22 +challengeType: 0 +dashedName: part-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)`. + +# --hints-- + +You should have a `#black-mask` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-mask')); +``` + +Your `#black-mask` selector should have a `width` property set to `100%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.width === '100%'); +``` + +Your `#black-mask` selector should have a `height` property set to `50px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.height === '50px'); +``` + +Your `#black-mask` selector should have a `background-color` property set to `rgb(45, 31, 19)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.backgroundColor === 'rgb(45, 31, 19)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-023.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-023.md new file mode 100644 index 0000000000..17c1689ba9 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-023.md @@ -0,0 +1,114 @@ +--- +id: 60b69a66b6ddb80858c5158d +title: Part 23 +challengeType: 0 +dashedName: part-23 +--- + +# --description-- + +Give the mask a `position` of `absolute`, and a `top` and `left` value of `0`. + +# --hints-- + +Your `#black-mask` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.position === 'absolute'); +``` + +Your `#black-mask` selector should have a `top` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.top === '0px'); +``` + +Your `#black-mask` selector should have a `left` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.left === '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-024.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-024.md new file mode 100644 index 0000000000..1cbbf152c2 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-024.md @@ -0,0 +1,105 @@ +--- +id: 60b69a66b6ddb80858c5158e +title: Part 24 +challengeType: 0 +dashedName: part-24 +--- + +# --description-- + +To ensure you can see the mask, give it a `z-index` of `1`. + +# --hints-- + +Your `#black-mask` selector should have a `z-index` property set to `1`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.zIndex === '1'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-025.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-025.md new file mode 100644 index 0000000000..aa07c7af6d --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-025.md @@ -0,0 +1,126 @@ +--- +id: 60b69a66b6ddb80858c5158f +title: Part 25 +challengeType: 0 +dashedName: part-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)`. + +# --hints-- + +You should have a `#gray-instrument` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')); +``` + +Your `#gray-instrument` selector should have a `width` property set to `15%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.width === '15%'); +``` + +Your `#gray-instrument` selector should have a `height` property set to `40%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.height === '40%'); +``` + +Your `#gray-instrument` selector should have a `background-color` property set to `rgb(167, 162, 117)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.backgroundColor === 'rgb(167, 162, 117)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-026.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-026.md new file mode 100644 index 0000000000..28fee5cc0f --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-026.md @@ -0,0 +1,124 @@ +--- +id: 60b69a66b6ddb80858c51590 +title: Part 26 +challengeType: 0 +dashedName: part-26 +--- + +# --description-- + +Now move it into place with a `position` of `absolute`, a `top` value of `50px`, and a `left` value of `125px`. + +# --hints-- + +Your `#gray-instrument` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.position === 'absolute'); +``` + +Your `#gray-instrument` selector should have a `top` value set to `50px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.top === '50px'); +``` + +Your `#gray-instrument` selector should have a `left` value set to `125px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.left === '125px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-027.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-027.md new file mode 100644 index 0000000000..65d17f2b21 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-027.md @@ -0,0 +1,115 @@ +--- +id: 60b69a66b6ddb80858c51591 +title: Part 27 +challengeType: 0 +dashedName: part-27 +--- + +# --description-- + +Set the `z-index` to `1`. + +# --hints-- + +Your `#gray-instrument` selector should have a `z-index` property set to `1`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.zIndex === '1'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-028.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-028.md new file mode 100644 index 0000000000..17bc50eabc --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-028.md @@ -0,0 +1,136 @@ +--- +id: 60b69a66b6ddb80858c51592 +title: Part 28 +challengeType: 0 +dashedName: part-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)`. + +# --hints-- + +You should have a `.black-dot` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.black-dot')); +``` + +Your `.black-dot` selector should have a `width` property set to `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.width === '10px'); +``` + +Your `.black-dot` selector should have a `height` property set to `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.height === '10px'); +``` + +Your `.black-dot` selector should have a `background-color` property set to `rgb(45, 31, 19)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.backgroundColor === 'rgb(45, 31, 19)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-029.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-029.md new file mode 100644 index 0000000000..4216ad0b92 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-029.md @@ -0,0 +1,122 @@ +--- +id: 60b69a66b6ddb80858c51593 +title: Part 29 +challengeType: 0 +dashedName: part-29 +--- + +# --description-- + +These dots are just a little too square. Give the `black-dot` class a `border-radius` of `50%` to fix it. + +# --hints-- + +Your `.black-dot` selector should have a `border-radius` property set to `50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderRadius === '50%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-030.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-030.md new file mode 100644 index 0000000000..361cf652df --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-030.md @@ -0,0 +1,134 @@ +--- +id: 60b69a66b6ddb80858c51594 +title: Part 30 +challengeType: 0 +dashedName: part-30 +--- + +# --description-- + +Move the dots into place by setting the `display` to `block`, the `margin` to `auto`, and the `margin-top` to `65%`. + +# --hints-- + +Your `.black-dot` selector should have a `display` property set to `block`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.display === 'block'); +``` + +Your `.black-dot` selector should have a `margin` property set to `auto`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.margin?.includes('auto')); +``` + +Your `.black-dot` selector should have a `margin-top` property set to `65%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.marginTop === '65%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-031.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-031.md new file mode 100644 index 0000000000..762256ceff --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-031.md @@ -0,0 +1,145 @@ +--- +id: 60b69a66b6ddb80858c51595 +title: Part 31 +challengeType: 0 +dashedName: part-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`. + +# --hints-- + +You should have a `#tan-table` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#tan-table')); +``` + +Your `#tan-table` selector should have a `width` property set to `450px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.width === '450px'); +``` + +Your `#tan-table` selector should have a `height` property set to `140px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.height === '140px'); +``` + +Your `#tan-table` selector should have a `background-color` property set to `#D2691E`. + +```js +assert (new __helpers.CSSHelp(document).getStyle('#tan-table')?.backgroundColor === 'rgb(210, 105, 30)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); + display: block; + margin: auto; + margin-top: 65%; +} + + --fcc-editable-region-- + + --fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-032.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-032.md new file mode 100644 index 0000000000..e3668b199e --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-032.md @@ -0,0 +1,143 @@ +--- +id: 60b69a66b6ddb80858c51596 +title: Part 32 +challengeType: 0 +dashedName: part-32 +--- + +# --description-- + +Move the table into place by giving it a `position` of `absolute`, a `top` value of `275px`, and a `left` value of `15px`. + +# --hints-- + +Your `#tan-table` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.position === 'absolute'); +``` + +Your `#tan-table` selector should have a `top` property set to `275px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.top === '275px'); +``` + +Your `#tan-table` selector should have a `left` property set to `15px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.left === '15px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-033.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-033.md new file mode 100644 index 0000000000..c1254059f0 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-033.md @@ -0,0 +1,134 @@ +--- +id: 60b69a66b6ddb80858c51597 +title: Part 33 +challengeType: 0 +dashedName: part-33 +--- + +# --description-- + +Give the table a `z-index` of `1`. + +# --hints-- + +Your `#tan-table` selector should have a `z-index` property set to `1`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.zIndex === '1'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-034.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-034.md new file mode 100644 index 0000000000..d3b7037d52 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-034.md @@ -0,0 +1,141 @@ +--- +id: 60b69a66b6ddb80858c51598 +title: Part 34 +challengeType: 0 +dashedName: part-34 +--- + +# --description-- + +After your `div#offwhite-character` element, add a `div` with the `id` of `black-character`. + +# --hints-- + +You should add a new `div` element within the `.characters` element. + +```js +assert(document.querySelectorAll('.characters > div')?.length === 2); +``` + +Your new `div` element should have the `id` set to `black-character`. + +```js +assert(document.querySelectorAll('.characters > div')?.[1]?.getAttribute('id') === 'black-character'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+ + +``` + +```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); + 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; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-035.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-035.md new file mode 100644 index 0000000000..8f3dc6c523 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-035.md @@ -0,0 +1,155 @@ +--- +id: 60b69a66b6ddb80858c51599 +title: Part 35 +challengeType: 0 +dashedName: part-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`. + +# --hints-- + +You should have three `div` elements within your `#black-character` element. + +```js +assert(document.querySelectorAll('#black-character > div')?.length === 3); +``` + +Your first new `div` element should have the `id` set to `black-hat`. + +```js +assert(document.querySelectorAll('#black-character > div')?.[0]?.getAttribute('id') === 'black-hat'); +``` + +Your second new `div` element should have the `id` set to `gray-mask`. + +```js +assert(document.querySelectorAll('#black-character > div')?.[1]?.getAttribute('id') === 'gray-mask'); +``` + +Your third new `div` element should have the `id` set to `white-paper`. + +```js +assert(document.querySelectorAll('#black-character > div')?.[2]?.getAttribute('id') === 'white-paper'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+ + +``` + +```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); + 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; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-036.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-036.md new file mode 100644 index 0000000000..2d78098274 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-036.md @@ -0,0 +1,157 @@ +--- +id: 60b69a66b6ddb80858c5159a +title: Part 36 +challengeType: 0 +dashedName: part-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`. + +# --hints-- + +You should have two `div` elements within your `#gray-mask` element. + +```js +assert(document.querySelectorAll('#gray-mask > div')?.length === 2); +``` + +Your first new `div` element should have the `class` set to `eyes left`. + +```js +const first = document.querySelectorAll('#gray-mask > div')?.[0]; +assert(first?.classList?.contains('eyes')); +assert(first?.classList?.contains('left')); +``` + +Your second new `div` element should have the `class` set to `eyes right`. + +```js +const second = document.querySelectorAll('#gray-mask > div')?.[1]; +assert(second?.classList?.contains('eyes')); +assert(second?.classList?.contains('right')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
+
+ + +``` + +```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); + 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; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-037.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-037.md new file mode 100644 index 0000000000..317622a4a4 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-037.md @@ -0,0 +1,160 @@ +--- +id: 60b69a66b6ddb80858c5159b +title: Part 37 +challengeType: 0 +dashedName: part-37 +--- + +# --description-- + +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`. + +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. + +# --hints-- + +You should have four new `i` elements within your `#white-paper` element. + +```js +assert(document.querySelectorAll('#white-paper > i')?.length === 4); +``` + +All of your `i` elements should have the `class` set to `fas fa-music`. + +```js +const icons = document.querySelectorAll('#white-paper > i'); +for (const icon of icons) { + assert(icon.classList?.contains('fas')); + assert(icon.classList?.contains('fa-music')); +}; +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
+ + +``` + +```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); + 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; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-038.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-038.md new file mode 100644 index 0000000000..bea0e08805 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-038.md @@ -0,0 +1,168 @@ +--- +id: 60b69a66b6ddb80858c5159c +title: Part 38 +challengeType: 0 +dashedName: part-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)`. + +# --hints-- + +You should use a `#black-character` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-character')); +``` + +Your `#black-character` selector should have a `width` property set to `300px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.width === '300px'); +``` + +Your `#black-character` selector should have a `height` property set to `500px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.height === '500px'); +``` + +Your `#black-character` selector should have a `background-color` property to `rgb(45, 31, 19)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.backgroundColor === 'rgb(45, 31, 19)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```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); + 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; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-039.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-039.md new file mode 100644 index 0000000000..9b4b4080b4 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-039.md @@ -0,0 +1,166 @@ +--- +id: 60b69a66b6ddb80858c5159d +title: Part 39 +challengeType: 0 +dashedName: part-39 +--- + +# --description-- + +Move the `black-character` element into place by setting the `position` to `absolute`, the `top` to `30%`, and the `left` to `59%`. + +# --hints-- + +Your `#black-character` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.position === 'absolute'); +``` + +Your `#black-character` selector should have a `top` property set to `30%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.top === '30%'); +``` + +Your `#black-character` selector should have a `left` property set to `59%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.left === '59%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```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); + 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); + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-040.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-040.md new file mode 100644 index 0000000000..6c6d4cc64f --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-040.md @@ -0,0 +1,177 @@ +--- +id: 60b69a66b6ddb80858c5159e +title: Part 40 +challengeType: 0 +dashedName: part-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`. + +# --hints-- + +You should have a `#black-hat` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')); +``` + +Your `#black-hat` selector should have a `width` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.width === '0px'); +``` + +Your `#black-hat` selector should have a `height` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.height === '0px'); +``` + +Your `#black-hat` selector should have a `border-style` property set to `solid`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderStyle === 'solid'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```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); + 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%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-041.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-041.md new file mode 100644 index 0000000000..6d2cb718c4 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-041.md @@ -0,0 +1,163 @@ +--- +id: 60bad32219ebcb4a8810ac6a +title: Part 41 +challengeType: 0 +dashedName: part-41 +--- + +# --description-- + +Set the `border-width` of the `black-hat` to `150px 0 0 300px`. + +# --hints-- + +Your `#black-hat` selector should have a `border-width` property set to `150px 0 0 300px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderWidth === '150px 0px 0px 300px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```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); + 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; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-042.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-042.md new file mode 100644 index 0000000000..3e56ee194c --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-042.md @@ -0,0 +1,182 @@ +--- +id: 60b69a66b6ddb80858c5159f +title: Part 42 +challengeType: 0 +dashedName: part-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)`. + +# --hints-- + +Your `#black-hat` selector should have a `border-top-color` property set to `transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderTopColor === 'transparent'); +``` + +Your `#black-hat` selector should have a `border-right-color` property set to `transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderRightColor === 'transparent'); +``` + +Your `#black-hat` selector should have a `border-bottom-color` property set to `transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderBottomColor === 'transparent'); +``` + +Your `#black-hat` selector should have a `border-left-color` property set to `rgb(45, 31, 19)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderLeftColor === 'rgb(45, 31, 19)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```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); + 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; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-043.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-043.md new file mode 100644 index 0000000000..c63503d37b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-043.md @@ -0,0 +1,180 @@ +--- +id: 60b69a66b6ddb80858c515a0 +title: Part 43 +challengeType: 0 +dashedName: part-43 +--- + +# --description-- + +Now position the `black-hat` element. Give it a `position` of `absolute`, with a `top` of `-150px` and a `left` of `0`. + +# --hints-- + +Your `#black-hat` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.position === 'absolute'); +``` + +Your `#black-hat` selector should have a `top` property set to `-150px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.top === '-150px'); +``` + +Your `#black-hat` selector should have a `left` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.left === '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```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); + 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); + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-044.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-044.md new file mode 100644 index 0000000000..98f7180490 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-044.md @@ -0,0 +1,191 @@ +--- +id: 60b69a66b6ddb80858c515a1 +title: Part 44 +challengeType: 0 +dashedName: part-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)`. + +# --hints-- + +You should have a `#gray-mask` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')); +``` + +Your `#gray-mask` selector should have a `width` property set to `150px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.height === '150px'); +``` + +Your `#gray-mask` selector should have a `height` property set to `150px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.height === '150px') +``` + +Your `#gray-mask` selector should have a `background-color` property set to `rgb(167, 162, 117)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.backgroundColor === 'rgb(167, 162, 117)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```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); + 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; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-045.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-045.md new file mode 100644 index 0000000000..5dadbba896 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-045.md @@ -0,0 +1,189 @@ +--- +id: 60b69a66b6ddb80858c515a2 +title: Part 45 +challengeType: 0 +dashedName: part-45 +--- + +# --description-- + +Position the `gray-mask` by setting `position` to `absolute`, the `top` to `-10px`, and the `left` to `70px`. + +# --hints-- + +Your `#gray-mask` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.position === 'absolute'); +``` + +Your `#gray-mask` selector should have a `top` property set to `-10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.top === '-10px'); +``` + +Your `#gray-mask` selector should have a `left` property set to `70px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.left === '70px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```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); + 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); + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-046.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-046.md new file mode 100644 index 0000000000..d8273fbbcd --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-046.md @@ -0,0 +1,200 @@ +--- +id: 60b69a66b6ddb80858c515a3 +title: Part 46 +challengeType: 0 +dashedName: part-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`. + +# --hints-- + +You should have a `#white-paper` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-paper')); +``` + +Your `#white-paper` selector should have a `width` property set to `400px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.width === '400px'); +``` + +Your `#white-paper` selector should have a `height` property set to `100px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.height === '100px'); +``` + +Your `#white-paper` selector should have a `background-color` property set to `GhostWhite`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.backgroundColor === 'ghostwhite'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```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); + 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; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-047.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-047.md new file mode 100644 index 0000000000..7cb24c2d2f --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-047.md @@ -0,0 +1,198 @@ +--- +id: 60b69a66b6ddb80858c515a4 +title: Part 47 +challengeType: 0 +dashedName: part-47 +--- + +# --description-- + +Give the `white-paper` a `position` of `absolute`, a `top` of `250px`, and a `left` of `-150px` to move it into place. + +# --hints-- + +Your `#white-paper` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.position === 'absolute'); +``` + +Your `#white-paper` selector should have a `top` property set to `250px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.top === '250px'); +``` + +Your `#white-paper` selector should have a `left` property set to `-150px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.left === '-150px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```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); + 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; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-048.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-048.md new file mode 100644 index 0000000000..4993a44cc0 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-048.md @@ -0,0 +1,189 @@ +--- +id: 60b69a66b6ddb80858c515a5 +title: Part 48 +challengeType: 0 +dashedName: part-48 +--- + +# --description-- + +Set the `z-index` of the `white-paper` to `1`. + +# --hints-- + +Your `#white-paper` selector should have a `z-index` property set to `1`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.zIndex === '1'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```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); + 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; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-049.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-049.md new file mode 100644 index 0000000000..758c92cf8b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-049.md @@ -0,0 +1,210 @@ +--- +id: 60b69a66b6ddb80858c515a6 +title: Part 49 +challengeType: 0 +dashedName: part-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%`. + +# --hints-- + +You should have a `.fa-music` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.fa-music')); +``` + +Your `.fa-music` selector should have a `display` property set to `inline-block`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.display === 'inline-block'); +``` + +Your `.fa-music` selector should have a `margin-top` property set to `8%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginTop === '8%'); +``` + +Your `.fa-music` selector should have a `margin-left` property set to `13%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginLeft === '13%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```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); + 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; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-050.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-050.md new file mode 100644 index 0000000000..c18a5d29a2 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-050.md @@ -0,0 +1,216 @@ +--- +id: 60b69a66b6ddb80858c515a7 +title: Part 50 +challengeType: 0 +dashedName: part-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`. + +# --hints-- + +You should have two new `div` elements within your `.characters` element. + +```js +assert(document.querySelectorAll('.characters > div')?.length === 4); +``` + +Your two new `div` elemnts should have the `class` set to `blue`. + +```js +const divs = document.querySelectorAll('.characters > div'); +assert(divs?.[2]?.classList?.contains('blue')) +assert(divs?.[3]?.classList?.contains('blue')) +``` + +Your first new `div` should have an `id` of `blue-left`. + +```js +assert(document.querySelectorAll('.characters > div')?.[2]?.getAttribute('id') === 'blue-left'); +``` + +Your second new `div` should have an `id` of `blue-right`. + +```js +assert(document.querySelectorAll('.characters > div')?.[3]?.getAttribute('id') === 'blue-right'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+ + +``` + +```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); + 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%; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-051.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-051.md new file mode 100644 index 0000000000..685b288b2f --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-051.md @@ -0,0 +1,206 @@ +--- +id: 60b69a66b6ddb80858c515a8 +title: Part 51 +challengeType: 0 +dashedName: part-51 +--- + +# --description-- + +Use a `class` selector to target your new `blue` elements. Set the `background-color` to `#1E90FF`. + +# --hints-- + +You should have a `.blue` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.blue')); +``` + +Your `.blue` selector should have a `background-color` property set to `#1E90FF`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'rgb(30, 144, 255)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+ + +``` + +```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); + 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%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-052.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-052.md new file mode 100644 index 0000000000..654f9e507b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-052.md @@ -0,0 +1,216 @@ +--- +id: 60b69a66b6ddb80858c515a9 +title: Part 52 +challengeType: 0 +dashedName: part-52 +--- + +# --description-- + +Select the `blue-left` element with an `id` selector. Give it a `width` of `500px` and a `height` of `300px`. + +# --hints-- + +You should have a `#blue-left` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-left')); +``` + +Your `#blue-left` selector should have a `width` property set to `500px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.width === '500px'); +``` + +Your `#blue-left` selector should have a `height` property set to `300px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.height === '300px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+ + +``` + +```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); + 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; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-053.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-053.md new file mode 100644 index 0000000000..cbfac73ec2 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-053.md @@ -0,0 +1,219 @@ +--- +id: 60b69a66b6ddb80858c515aa +title: Part 53 +challengeType: 0 +dashedName: part-53 +--- + +# --description-- + +Now set the `position` to `absolute`, the `top` to `20%`, and the `left` to `20%`. + +# --hints-- + +Your `#blue-left` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.position === 'absolute'); +``` + +Your `#blue-left` selector should have a `top` property set to `20%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.top === '20%'); +``` + +Your `#blue-left` selector should have a `left` property set to `20%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.left === '20%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+ + +``` + +```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); + 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-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-054.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-054.md new file mode 100644 index 0000000000..3a5175998d --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-054.md @@ -0,0 +1,224 @@ +--- +id: 60b69a66b6ddb80858c515ab +title: Part 54 +challengeType: 0 +dashedName: part-54 +--- + +# --description-- + +Next, target your `blue-right` element with an `id` selector. Set the `width` to `400px` and the `height` to `300px`. + +# --hints-- + +You should have a `#blue-right` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-right')); +``` + +Your `#blue-right` selector should have a `width` property set to `400px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.width === '400px'); +``` + +Your `#blue-right` selector should have a `height` property set to `300px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.height === '300px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+ + +``` + +```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); + 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%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-055.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-055.md new file mode 100644 index 0000000000..157a8b37c4 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-055.md @@ -0,0 +1,227 @@ +--- +id: 60b69a66b6ddb80858c515ac +title: Part 55 +challengeType: 0 +dashedName: part-55 +--- + +# --description-- + +Give the `blue-right` the correct positioning with `position` set to `absolute`, `top` set to `50%`, and `left` set to `40%`. + +# --hints-- + +Your `#blue-right` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.position === 'absolute'); +``` + +Your `#blue-right` selector should have a `top` property set to `50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.top === '50%'); +``` + +Your `#blue-right` selector should have a `left` property set to `40%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.left === '40%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+ + +``` + +```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); + 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; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-056.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-056.md new file mode 100644 index 0000000000..08b02dbc78 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-056.md @@ -0,0 +1,224 @@ +--- +id: 60b69a66b6ddb80858c515ad +title: Part 56 +challengeType: 0 +dashedName: part-56 +--- + +# --description-- + +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. + +```js +assert(document.querySelectorAll('.characters > div')?.length === 5); +``` + +Your new `div` element should have the `id` set to `orange-character`. + +```js +assert(document.querySelectorAll('.characters > div')?.[4]?.getAttribute('id') === 'orange-character'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+ + +``` + +```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); + 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%; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-057.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-057.md new file mode 100644 index 0000000000..95032c15f9 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-057.md @@ -0,0 +1,244 @@ +--- +id: 60b69a66b6ddb80858c515ae +title: Part 57 +challengeType: 0 +dashedName: part-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. + +# --hints-- + +You should have four new `div` elements within your `orange-character` element. + +```js +assert(document.querySelectorAll('#orange-character > div')?.length === 4); +``` + +Your first new `div` element should have an `id` set to `black-round-hat`. + +```js +assert(document.querySelectorAll('#orange-character > div')?.[0]?.getAttribute('id') === 'black-round-hat'); +``` + +Your second new `div` element should have an `id` set to `eyes-div`. + +```js +assert(document.querySelectorAll('#orange-character > div')?.[1]?.getAttribute('id') === 'eyes-div'); +``` + +Your third new `div` element should have an `id` set to `triangles`. + +```js +assert(document.querySelectorAll('#orange-character > div')?.[2]?.getAttribute('id') === 'triangles'); +``` + +Your fourth new `div` element should have an `id` set to `guitar`. + +```js +assert(document.querySelectorAll('#orange-character > div')?.[3]?.getAttribute('id') === 'guitar'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+ + +``` + +```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); + 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%; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-058.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-058.md new file mode 100644 index 0000000000..94e76035b7 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-058.md @@ -0,0 +1,239 @@ +--- +id: 60b69a66b6ddb80858c515af +title: Part 58 +challengeType: 0 +dashedName: part-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`. + +# --hints-- + +You should have two `div` elements nested in your `eyes-div`. + +```js +assert(document.querySelectorAll('#eyes-div > div')?.length === 2); +``` + +The first new `div` should have the `class` set to `eyes left`. + +```js +assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('eyes')); +assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('left')); +``` + +The second new `div` should have the `class` set to `eyes right`. + +```js +assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('eyes')); +assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('right')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
+
+
+ + +``` + +```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); + 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%; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-059.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-059.md new file mode 100644 index 0000000000..92dc0e9d25 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-059.md @@ -0,0 +1,237 @@ +--- +id: 60b69a66b6ddb80858c515b0 +title: Part 59 +challengeType: 0 +dashedName: part-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`. + +# --hints-- + +You should have 30 `div` elements within your `triangles` element. + +```js +assert(document.querySelectorAll('#triangles > div')?.length === 30); +``` + +All 30 of your new `div` elements should have the `class` set to `triangle`. + +```js +const divDivDiv = document.querySelectorAll('#triangles > div'); +for (const div of divDivDiv) { + assert(div?.classList?.contains('triangle')); +} +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
+
+ + +``` + +```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); + 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%; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-060.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-060.md new file mode 100644 index 0000000000..9bf57228e9 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-060.md @@ -0,0 +1,297 @@ +--- +id: 60b69a66b6ddb80858c515b1 +title: Part 60 +challengeType: 0 +dashedName: part-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`. + +The third `div` should not have the `guitar` class. + +# --hints-- + +You should have three new `div` elements within your `guitar` element. + +```js +assert(document.querySelectorAll('#guitar > div')?.length === 3); +``` + +Your first new `div` should have a `class` set to `guitar`. + +```js +assert(document.querySelectorAll('#guitar > div')?.[0]?.classList?.contains('guitar')); +``` + +Your first new `div` should have an `id` set to `guitar-left`. + +```js +assert(document.querySelectorAll('#guitar > div')?.[0]?.getAttribute('id') === 'guitar-left'); +``` + +Your second new `div` should have a `class` set to `guitar`. + +```js +assert(document.querySelectorAll('#guitar > div')?.[1]?.classList?.contains('guitar')); +``` + +Your second new `div` should have an `id` set to `guitar-right`. + +```js +assert(document.querySelectorAll('#guitar > div')?.[1]?.getAttribute('id') === 'guitar-right'); +``` + +Your third new `div` should have an `id` set to `guitar-neck`. + +```js +assert(document.querySelectorAll('#guitar > div')?.[2]?.getAttribute('id') === 'guitar-neck'); +``` + +You should not give the third new `div` a `class` of `guitar`. + +```js +assert.notExists(document.querySelector('#guitar > #guitar-neck.guitar')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
+ + +``` + +```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); + 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%; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-061.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-061.md new file mode 100644 index 0000000000..45ce76fe92 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-061.md @@ -0,0 +1,280 @@ +--- +id: 60b69a66b6ddb80858c515b2 +title: Part 61 +challengeType: 0 +dashedName: part-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`. + +# --hints-- + +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. + +```js +assert(document.querySelectorAll('#guitar-right > i')?.length === 1); +``` + +Your two new `i` elements should have the `class` set to `fas fa-bars`. + +```js +assert(document.querySelector('#guitar-left > i')?.classList?.contains('fas')); +assert(document.querySelector('#guitar-left > i')?.classList?.contains('fa-bars')); +assert(document.querySelector('#guitar-right > i')?.classList?.contains('fas')); +assert(document.querySelector('#guitar-right > i')?.classList?.contains('fa-bars')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- +
+ +
+
+ +
+ --fcc-editable-region-- +
+
+
+
+ + +``` + +```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); + 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%; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-062.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-062.md new file mode 100644 index 0000000000..d22f0462ff --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-062.md @@ -0,0 +1,286 @@ +--- +id: 60b69a66b6ddb80858c515b3 +title: Part 62 +challengeType: 0 +dashedName: part-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)`. + +# --hints-- + +You should have an `#orange-character` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#orange-character')); +``` + +Your `#orange-character` selector should have a `width` property set to `250px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.width === '250px'); +``` + +Your `#orange-character` selector should have a `height` property set to `550px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.height === '550px'); +``` + +Your `#orange-character` selector should have a `background-color` property set to `rgb(240, 78, 42)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.backgroundColor === 'rgb(240, 78, 42)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```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); + 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%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-063.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-063.md new file mode 100644 index 0000000000..df34bfacc5 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-063.md @@ -0,0 +1,284 @@ +--- +id: 60b69a66b6ddb80858c515b4 +title: Part 63 +challengeType: 0 +dashedName: part-63 +--- + +# --description-- + +Give the `orange-character` a `position` of `absolute`, a `top` of `25%`, and a `left` of `40%`. + +# --hints-- + +Your `#orange-character` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.position === 'absolute'); +``` + +Your `#orange-character` selector should have a `top` property set to `25%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.top === '25%'); +``` + +Your `#orange-character` selector should have a `left` property set to `40%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.left === '40%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```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); + 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); + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-064.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-064.md new file mode 100644 index 0000000000..3eeb00d55c --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-064.md @@ -0,0 +1,295 @@ +--- +id: 60b69a66b6ddb80858c515b5 +title: Part 64 +challengeType: 0 +dashedName: part-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)`. + +# --hints-- + +You should have a `#black-round-hat` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')); +``` + +Your `#black-round-hat` selector should have a `width` property set to `180px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.width === '180px'); +``` + +Your `#black-round-hat` selector should have a `height` property set to `150px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.height === '150px'); +``` + +Your `#black-round-hat` selector should have a `background-color` property set to `rgb(45, 31, 19)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.backgroundColor === 'rgb(45, 31, 19)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```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); + 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%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-065.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-065.md new file mode 100644 index 0000000000..e4c98cf8a7 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-065.md @@ -0,0 +1,281 @@ +--- +id: 60b69a66b6ddb80858c515b6 +title: Part 65 +challengeType: 0 +dashedName: part-65 +--- + +# --description-- + +The `black-round-hat` should probably be round. Give it a `border-radius` of `50%` to fix this. + +# --hints-- + +Your `#black-round-hat` selector should have a `border-radius` property set to `50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.borderRadius === '50%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```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); + 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); + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-066.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-066.md new file mode 100644 index 0000000000..fc852d480e --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-066.md @@ -0,0 +1,294 @@ +--- +id: 60b69a66b6ddb80858c515b7 +title: Part 66 +challengeType: 0 +dashedName: part-66 +--- + +# --description-- + +Move the `black-round-hat` into place with a `position` of `absolute`, a `top` of `-100px`, and a `left` of `5px`. + +# --hints-- + +Your `#black-round-hat` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.position === 'absolute'); +``` + +Your `#black-round-hat` selector should have a `top` property set to `-100px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.top === '-100px'); +``` + +Your `#black-round-hat` selector should have a `left` property set to `5px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.left === '5px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```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); + 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%; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-067.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-067.md new file mode 100644 index 0000000000..16ccd0691f --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-067.md @@ -0,0 +1,285 @@ +--- +id: 60b69a66b6ddb80858c515b8 +title: Part 67 +challengeType: 0 +dashedName: part-67 +--- + +# --description-- + +Put the `black-round-hat` on the correct layer with a `z-index` of `-1`. + +# --hints-- + +Your `#black-round-hat` selector should have a `z-index` property set to `-1`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.zIndex === '-1'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```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); + 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; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-068.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-068.md new file mode 100644 index 0000000000..55827430f5 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-068.md @@ -0,0 +1,300 @@ +--- +id: 60b69a66b6ddb80858c515b9 +title: Part 68 +challengeType: 0 +dashedName: part-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`. + +# --hints-- + +You should create an `#eyes-div` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')); +``` + +Your `#eyes-div` selector should have a `width` property set to `180px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.width === '180px'); +``` + +Your `#eyes-div` selector should have a `height` property set to `50px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.height === '50px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```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); + 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; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-069.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-069.md new file mode 100644 index 0000000000..a339ffdd2c --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-069.md @@ -0,0 +1,303 @@ +--- +id: 60b69a66b6ddb80858c515ba +title: Part 69 +challengeType: 0 +dashedName: part-69 +--- + +# --description-- + +Now move the `eyes-div` into position with `position` set to `absolute`, `top` set to `-40px`, and `left` set to `20px`. + +# --hints-- + +Your `#eyes-div` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.position === 'absolute'); +``` + +Your `#eyes-div` selector should have a `top` property set to `-40px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.top === '-40px'); +``` + +Your `#eyes-div` selector should have a `left` property set to `20px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.left === '20px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```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); + 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; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-070.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-070.md new file mode 100644 index 0000000000..b2aac5a9fe --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-070.md @@ -0,0 +1,294 @@ +--- +id: 60b69a66b6ddb80858c515bc +title: Part 70 +challengeType: 0 +dashedName: part-70 +--- + +# --description-- + +Give the `eyes-div` a `z-index` of `3`. + +# --hints-- + +Your `#eyes-div` selector should have a `z-index` property set to `3`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.zIndex === '3'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```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); + 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-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-071.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-071.md new file mode 100644 index 0000000000..21beeb8a5a --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-071.md @@ -0,0 +1,308 @@ +--- +id: 60ba8914bab51f0fb8228e9c +title: Part 71 +challengeType: 0 +dashedName: part-71 +--- + +# --description-- + +Target your `triangles` element with an `id` selector. Set the `width` to `250px` and the `height` to `550px`. + +# --hints-- + +You should add a `#triangles` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#triangles')); +``` + +Your `#triangles` selector should have a `width` property set to `250px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.width === '250px'); +``` + +Your `#triangles` selector should have a `height` property set to `550px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.height === '550px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```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); + 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-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-072.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-072.md new file mode 100644 index 0000000000..649b89ef43 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-072.md @@ -0,0 +1,313 @@ +--- +id: 60ba89146b25080f99ab54ad +title: Part 72 +challengeType: 0 +dashedName: part-72 +--- + +# --description-- + +Create a `class` selector for your `triangle` elements. Set the `width` to `0` and the `height` to `0`. + +# --hints-- + +You should create a `.triangle` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.triangle')); +``` + +Your `.triangle` selector should have a `width` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.width === '0px'); +``` + +Your `.triangle` selector should have a `height` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.height === '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```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); + 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; +} + +#triangles { + width: 250px; + height: 550px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-073.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-073.md new file mode 100644 index 0000000000..3106289438 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-073.md @@ -0,0 +1,310 @@ +--- +id: 60ba8913f1704c0f7a8906b8 +title: Part 73 +challengeType: 0 +dashedName: part-73 +--- + +# --description-- + +Style the border of your `triangle` elements. Set the `border-style` to `solid` and the `border-width` to `42px 45px 45px 0`. + +# --hints-- + +Your `.triangle` selector should have a `border-style` property set to `solid`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderStyle === 'solid'); +``` + +Your `.triangle` selector should have a `border-width` property set to `42px 45px 45px 0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderWidth === '42px 45px 45px 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```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); + 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; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-074.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-074.md new file mode 100644 index 0000000000..7aa986a00c --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-074.md @@ -0,0 +1,324 @@ +--- +id: 60ba89123a445e0f5c9e4022 +title: Part 74 +challengeType: 0 +dashedName: part-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`. + +# --hints-- + +Your `.triangle` selector should have a `border-top-color` property set to `transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderTopColor === 'transparent'); +``` + +Your `.triangle` selector should have a `border-bottom-color` property set to `transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderBottomColor === 'transparent'); +``` + +Your `.triangle` selector should have a `border-left-color` property set to `transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderLeftColor === 'transparent'); +``` + +Your `.triangle` selector should have a `border-right-color` property set to `Gold`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderRightColor === 'gold'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```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); + 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; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-075.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-075.md new file mode 100644 index 0000000000..e97b9b71c5 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-075.md @@ -0,0 +1,310 @@ +--- +id: 60ba890832b4940f24d1936b +title: Part 75 +challengeType: 0 +dashedName: part-75 +--- + +# --description-- + +Adjust the layout of the `triangle` elements with a `display` of `inline-block`. + +# --hints-- + +Your `.triangle` selector should have a `display` property set to `inline-block`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.display === 'inline-block'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```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); + 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; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; + border-bottom-color: transparent; + border-left-color: transparent; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-076.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-076.md new file mode 100644 index 0000000000..9d60bbef9d --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-076.md @@ -0,0 +1,325 @@ +--- +id: 60ba929345ab0714a3743655 +title: Part 76 +challengeType: 0 +dashedName: part-76 +--- + +# --description-- + +Now use an `id` selector for `guitar`. Set the `width` to `100%`, and the `height` to `100px`. + +# --hints-- + +You should create a `#guitar` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar')); +``` + +Your `#guitar` selector should have a `width` property set to `100%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.width === '100%'); +``` + +Your `#guitar` selector should have a `height` property set to `100px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.height === '100px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```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); + 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; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-077.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-077.md new file mode 100644 index 0000000000..bec26fd053 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-077.md @@ -0,0 +1,328 @@ +--- +id: 60ba9296d4d6b414c1b10995 +title: Part 77 +challengeType: 0 +dashedName: part-77 +--- + +# --description-- + +In the same `#guitar` selector, set the `position` to `absolute`, the `top` to `120px`, and the `left` to `0px`. + +# --hints-- + +Your `#guitar` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.position === 'absolute'); +``` + +Your `#guitar` selector should have a `top` property set to `120px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.top === '120px'); +``` + +Your `#guitar` selector should have a `left` property set to `0px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.left === '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```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); + 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; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-078.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-078.md new file mode 100644 index 0000000000..32cd540164 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-078.md @@ -0,0 +1,319 @@ +--- +id: 60ba92987c1e4914dfa7a0b9 +title: Part 78 +challengeType: 0 +dashedName: part-78 +--- + +# --description-- + +Give the `#guitar` rule a `z-index` of `3`. + +# --hints-- + +Your `#guitar` selector should have a `z-index` property set to `3`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.zIndex === '3'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```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); + 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; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-079.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-079.md new file mode 100644 index 0000000000..28050f472d --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-079.md @@ -0,0 +1,347 @@ +--- +id: 60b69a66b6ddb80858c515bd +title: Part 79 +challengeType: 0 +dashedName: part-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%`. + +# --hints-- + +You should create a `.guitar` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.guitar')); +``` + +Your `.guitar` selector should have a `width` property set to `150px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.width === '150px'); +``` + +Your `.guitar` selector should have a `height` property set to `120px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.height === '120px'); +``` + +Your `.guitar` selector should have a `background-color` property set to `Goldenrod`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.backgroundColor === 'goldenrod'); +``` + +Your `.guitar` selector should have a `border-radius` property set to `50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.borderRadius === '50%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```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); + 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; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-080.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-080.md new file mode 100644 index 0000000000..ae48915065 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-080.md @@ -0,0 +1,336 @@ +--- +id: 60b69a66b6ddb80858c515be +title: Part 80 +challengeType: 0 +dashedName: part-80 +--- + +# --description-- + +Select the `id` with value `guitar-left`, and set the `position` to `absolute` and the `left` to `0px`. + +# --hints-- + +You should create a new `#guitar-left` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-left')); +``` + +Your `#guitar-left` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-left')?.position === 'absolute'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```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); + 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; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +.guitar { + width: 150px; + height: 120px; + background-color: Goldenrod; + border-radius: 50%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-081.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-081.md new file mode 100644 index 0000000000..c1a87442e6 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-081.md @@ -0,0 +1,347 @@ +--- +id: 60b69a66b6ddb80858c515bf +title: Part 81 +challengeType: 0 +dashedName: part-81 +--- + +# --description-- + +Select the `id` with value `guitar-right`, and also set `position` to `absolute`. This time, set `left` to `100px`. + +# --hints-- + +You should create a new `#guitar-right` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')); +``` + +Your `#guitar-right` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.position === 'absolute'); +``` + +Your `#guitar-right` selector should have a `left` property set to `100px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.left === '100px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```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); + 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; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +.guitar { + width: 150px; + height: 120px; + background-color: Goldenrod; + border-radius: 50%; +} + +#guitar-left { + position: absolute; + left: 0px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-082.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-082.md new file mode 100644 index 0000000000..94fc7ad4b9 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-082.md @@ -0,0 +1,358 @@ +--- +id: 60b69a66b6ddb80858c515c0 +title: Part 82 +challengeType: 0 +dashedName: part-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%`. + +# --hints-- + +You should create a `.fa-bars` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')); +``` + +Your `.fa-bars` selector should have a `display` property set to `block`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.display === 'block'); +``` + +Your `.fa-bars` selector should have a `margin-top` property set to `30%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginTop === '30%'); +``` + +Your `.fa-bars` selector should have a `margin-left` property set to `30%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginLeft === '40%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```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); + 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; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +.guitar { + width: 150px; + height: 120px; + background-color: Goldenrod; + border-radius: 50%; +} + +#guitar-left { + position: absolute; + left: 0px; +} + +#guitar-right { + position: absolute; + left: 100px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-083.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-083.md new file mode 100644 index 0000000000..57186ae4c7 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-083.md @@ -0,0 +1,364 @@ +--- +id: 60b69a66b6ddb80858c515c1 +title: Part 83 +challengeType: 0 +dashedName: part-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`. + +# --hints-- + +You should create a `#guitar-neck` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')); +``` + +Your `#guitar-neck` selector should have a `width` property set to `200px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.width === '200px'); +``` + +Your `#guitar-neck` selector should have a `height` property set to `30px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.height === '30px'); +``` + +Your `#guitar-neck` selector should have a `background-color` property set to `#D2691E`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.backgroundColor === 'rgb(210, 105, 30)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```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); + 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; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +.guitar { + width: 150px; + height: 120px; + background-color: Goldenrod; + border-radius: 50%; +} + +#guitar-left { + position: absolute; + left: 0px; +} + +#guitar-right { + position: absolute; + left: 100px; +} + +.fa-bars { + display: block; + margin-top: 30%; + margin-left: 40%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-084.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-084.md new file mode 100644 index 0000000000..00f60b0854 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-084.md @@ -0,0 +1,362 @@ +--- +id: 60b69a66b6ddb80858c515c2 +title: Part 84 +challengeType: 0 +dashedName: part-84 +--- + +# --description-- + +Now move the `guitar-neck` with a `position` of `absolute`, a `top` value of `45px`, and a `left` value of `200px`. + +# --hints-- + +Your `#guitar-neck` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.position === 'absolute'); +``` + +Your `#guitar-neck` selector should have a `top` property set to `45px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.top === '45px'); +``` + +Your `#guitar-neck` selector should have a `left` property set to `200px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.left === '200px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```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); + 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; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +.guitar { + width: 150px; + height: 120px; + background-color: Goldenrod; + border-radius: 50%; +} + +#guitar-left { + position: absolute; + left: 0px; +} + +#guitar-right { + position: absolute; + left: 100px; +} + +.fa-bars { + display: block; + margin-top: 30%; + margin-left: 40%; +} + +#guitar-neck { + width: 200px; + height: 30px; + background-color: #D2691E; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-085.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-085.md new file mode 100644 index 0000000000..b322789b8f --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-085.md @@ -0,0 +1,353 @@ +--- +id: 60b69a66b6ddb80858c515c3 +title: Part 85 +challengeType: 0 +dashedName: part-85 +--- + +# --description-- + +Give the `guitar-neck` a `z-index` of `3`. + +# --hints-- + +Your `#guitar-neck` selector should have a `z-index` property set to `3`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.zIndex === '3'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```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); + 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; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +.guitar { + width: 150px; + height: 120px; + background-color: Goldenrod; + border-radius: 50%; +} + +#guitar-left { + position: absolute; + left: 0px; +} + +#guitar-right { + position: absolute; + left: 100px; +} + +.fa-bars { + display: block; + margin-top: 30%; + margin-left: 40%; +} + +#guitar-neck { + width: 200px; + height: 30px; + background-color: #D2691E; + position: absolute; + top: 45px; + left: 200px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-086.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-086.md new file mode 100644 index 0000000000..5aada7850a --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-086.md @@ -0,0 +1,380 @@ +--- +id: 60b69a66b6ddb80858c515c4 +title: Part 86 +challengeType: 0 +dashedName: part-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%`. + +# --hints-- + +You should create a `.eyes` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.eyes')); +``` + +Your `.eyes` selector should have a `width` property set to `35px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.width === '35px'); +``` + +Your `.eyes` selector should have a `height` property set to `20px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.height === '20px'); +``` + +Your `.eyes` selector should have a `background-color` property set to `#8B4513`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.backgroundColor === 'rgb(139, 69, 19)'); +``` + +Your `.eyes` selector should have a `border-radius` property set to `20px 50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.borderRadius === '20px 50%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```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); + 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; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +.guitar { + width: 150px; + height: 120px; + background-color: Goldenrod; + border-radius: 50%; +} + +#guitar-left { + position: absolute; + left: 0px; +} + +#guitar-right { + position: absolute; + left: 100px; +} + +.fa-bars { + display: block; + margin-top: 30%; + margin-left: 40%; +} + +#guitar-neck { + width: 200px; + height: 30px; + background-color: #D2691E; + position: absolute; + top: 45px; + left: 200px; + z-index: 3; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-087.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-087.md new file mode 100644 index 0000000000..a4e87d2f77 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-087.md @@ -0,0 +1,381 @@ +--- +id: 60b69a66b6ddb80858c515c5 +title: Part 87 +challengeType: 0 +dashedName: part-87 +--- + +# --description-- + +Target the `class` with value `right` and set the `position` to `absolute`, `top` to `15px`, and `right` to `30px`. + +# --hints-- + +You should create a `.right` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.right')); +``` + +Your `.right` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.right')?.position === 'absolute'); +``` + +Your `.right` selector should have a `top` property set to `15px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.right')?.top === '15px'); +``` + +Your `.right` selector should have a `right` property set to `30px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.right')?.right === '30px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```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); + 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; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +.guitar { + width: 150px; + height: 120px; + background-color: Goldenrod; + border-radius: 50%; +} + +#guitar-left { + position: absolute; + left: 0px; +} + +#guitar-right { + position: absolute; + left: 100px; +} + +.fa-bars { + display: block; + margin-top: 30%; + margin-left: 40%; +} + +#guitar-neck { + width: 200px; + height: 30px; + background-color: #D2691E; + position: absolute; + top: 45px; + left: 200px; + z-index: 3; +} + +.eyes { + width: 35px; + height: 20px; + background-color: #8B4513; + border-radius: 20px 50%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-088.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-088.md new file mode 100644 index 0000000000..a12fbea43a --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-088.md @@ -0,0 +1,387 @@ +--- +id: 60b69a66b6ddb80858c515c6 +title: Part 88 +challengeType: 0 +dashedName: part-88 +--- + +# --description-- + +For the `class` with value `left`, create the selector and set the `position` to `absolute`, the `top` to `15px`, and the `left` to `30px`. + +# --hints-- + +You should create a new `.left` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.left')); +``` + +Your `.left` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.left')?.position === 'absolute'); +``` + +Your `.left` selector should have a `top` property set to `15px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.left')?.top === '15px'); +``` + +Your `.left` selector should have a `left` property set to `30px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.left')?.left === '30px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```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); + 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; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +.guitar { +width: 150px; +height: 120px; +background-color: Goldenrod; +border-radius: 50%; +} + +#guitar-left { + position: absolute; + left: 0px; +} + +#guitar-right { + position: absolute; + left: 100px; +} + +.fa-bars { + display: block; + margin-top: 30%; + margin-left: 40%; +} + +#guitar-neck { + width: 200px; + height: 30px; + background-color: #D2691E; + position: absolute; + top: 45px; + left: 200px; + z-index: 3; +} + +.eyes { + width: 35px; + height: 20px; + background-color: #8B4513; + border-radius: 20px 50%; +} + +.right { + position: absolute; + top: 15px; + right: 30px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-089.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-089.md new file mode 100644 index 0000000000..d249db7341 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-089.md @@ -0,0 +1,383 @@ +--- +id: 60b69a66b6ddb80858c515c7 +title: Part 89 +challengeType: 0 +dashedName: part-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`. + +With that, your Picasso painting is complete! + +# --hints-- + +You should create a `.fas` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.fas')); +``` + +Your `.fas` selector should have a `font-size` property set to `30px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.fas')?.fontSize === '30px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```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); + 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; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +.guitar { + width: 150px; + height: 120px; + background-color: Goldenrod; + border-radius: 50%; +} + +#guitar-left { + position: absolute; + left: 0px; +} + +#guitar-right { + position: absolute; + left: 100px; +} + +.fa-bars { + display: block; + margin-top: 30%; + margin-left: 40%; +} + +#guitar-neck { + width: 200px; + height: 30px; + background-color: #D2691E; + position: absolute; + top: 45px; + left: 200px; + z-index: 3; +} + +.eyes { + width: 35px; + height: 20px; + background-color: #8B4513; + border-radius: 20px 50%; +} + +.right { + position: absolute; + top: 15px; + right: 30px; +} + +.left { + position: absolute; + top: 15px; + left: 30px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/utils/preformatted-block-names.json b/utils/preformatted-block-names.json index d3707c89cc..3c049e8076 100644 --- a/utils/preformatted-block-names.json +++ b/utils/preformatted-block-names.json @@ -21,6 +21,7 @@ "basic-html-cat-photo-app": "HTML Cat Photo App", "basic-css-cafe-menu": "CSS Cafe Menu", "css-variables-skyline": "CSS Variables Skyline", + "css-picasso-painting": "CSS Picasso Painting", "javascript-spreadsheet": "JavaScript Spreadsheet", "intermediate-javascript-calorie-counter": "Intermediate JavaScript Calorie Counter", "d3-dashboard": "D3 Dashboard"