Browse Source

Optimize the images & gifs + add a mackbook in the screenshots.

pull/745/head
Marie Malarme 3 years ago committed by Clément
parent
commit
54a4cedb22
  1. 4
      subjects/carbon-copy/README.md
  2. BIN
      subjects/carbon-copy/contact-input.gif
  3. BIN
      subjects/carbon-copy/dashboard-template.jpg
  4. BIN
      subjects/carbon-copy/images-order.gif
  5. BIN
      subjects/carbon-copy/modale.gif
  6. BIN
      subjects/carbon-copy/page-template.jpg
  7. BIN
      subjects/carbon-copy/page-wireframe.jpg
  8. BIN
      subjects/carbon-copy/text-alignment.gif

4
subjects/carbon-copy/README.md

@ -46,18 +46,22 @@ If you made it until here pretty fast, now the fun will begin! You're gonna add
![](images-order.gif)
- In the Contact section, when clicking on the "Introduce yourself" button, get the text typed in the `input` and display it in the middle of the following sentence: "Nice to meet you _[put here the input data]_ 👋! Thanks for introducing yourself." Also, the `<p>`, `<input>` & `<button>` elements have to disappear after the button has been clicked.
![](contact-input.gif)
- When clicking on a card, open a modale window that will show the whole article ; the modale will be closed either when clicking on a "Close" button, or when the "Escape" key is pressed.
![](modale.gif)
- In the modale article, create a widget that allows to change the text alignment ; on click on `left` or `center` buttons, the layout changes to the chosen justification, and the selected option's `font-weight` becomes `bold` whereas the other becomes `light`.
![](text-alignment.gif)
- Warrior option: change the `header` text content to be a random quote every time the page is loaded. You can use this marvelous [Chuck Norris API](https://api.chucknorris.io/) to [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) his most inspiring sayings and display them in your own page!
### Notions

BIN
subjects/carbon-copy/contact-input.gif

diff.bin_not_shown

Before

Width:  |  Height:  |  Size: 183 KiB

After

Width:  |  Height:  |  Size: 43 KiB

BIN
subjects/carbon-copy/dashboard-template.jpg

diff.bin_not_shown

Before

Width:  |  Height:  |  Size: 301 KiB

After

Width:  |  Height:  |  Size: 73 KiB

BIN
subjects/carbon-copy/images-order.gif

diff.bin_not_shown

Before

Width:  |  Height:  |  Size: 564 KiB

After

Width:  |  Height:  |  Size: 180 KiB

BIN
subjects/carbon-copy/modale.gif

diff.bin_not_shown

Before

Width:  |  Height:  |  Size: 547 KiB

After

Width:  |  Height:  |  Size: 333 KiB

BIN
subjects/carbon-copy/page-template.jpg

diff.bin_not_shown

Before

Width:  |  Height:  |  Size: 492 KiB

After

Width:  |  Height:  |  Size: 164 KiB

BIN
subjects/carbon-copy/page-wireframe.jpg

diff.bin_not_shown

Before

Width:  |  Height:  |  Size: 353 KiB

After

Width:  |  Height:  |  Size: 121 KiB

BIN
subjects/carbon-copy/text-alignment.gif

diff.bin_not_shown

Before

Width:  |  Height:  |  Size: 310 KiB

After

Width:  |  Height:  |  Size: 65 KiB

Loading…
Cancel
Save