From 97c88b506f2fe6e887470eb5e5f7522ba8b42036 Mon Sep 17 00:00:00 2001 From: Marie Malarme Date: Fri, 19 Feb 2021 16:39:56 +0000 Subject: [PATCH] Create README.md --- subjects/carbon-copy/README.md | 78 ++++++++++++++++++++++++++++++++++ 1 file changed, 78 insertions(+) create mode 100644 subjects/carbon-copy/README.md diff --git a/subjects/carbon-copy/README.md b/subjects/carbon-copy/README.md new file mode 100644 index 00000000..e7aafc1c --- /dev/null +++ b/subjects/carbon-copy/README.md @@ -0,0 +1,78 @@ +## Carbon copy + +### Instructions + +Today is a big day: you're gonna make your own webpage. Like a boss, yes. +If that one already sounds scary to you, don't worry, we've got your back ; you'll be provided some assets to complete this task. + +The goal of this raid is to make a carbon copy of this webpage template: +![](https://raw.githubusercontent.com/01-edu/public/master/subjects/carbon-copy/page-template.jpg) +Feel free to replace (or not, if you're lazy) the text contents by things about you / your company / your organisation / your dog / anything you want to talk about. Just try to approximatively match the same amount of content, so it still looks visually similar to the placeholder version. + +The raid is divided in 3 phases: + +- pure HTML structure +- custom CSS style +- JS interactions + +#### Phase 1: HTML only (mandatory) + +Create & write the HTML file `index.html` to build the structure of the page. +For this phase, we provide you a CSS file (`styles.css`) that you just have to [link](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) to your `index.html`, meaning you won't need to style anything. However, you can do it from scratch and write yourself the whole CSS if you feel up to it. + +Here is a [wireframe](https://en.wikipedia.org/wiki/Website_wireframe) of the webpage, showing the HTML tags you have to use: +![](https://raw.githubusercontent.com/01-edu/public/master/subjects/carbon-copy/page-wireframe.jpg) + +#### Phase 2: custom CSS (mandatory) + +First of all, let's custom the color atmosphere of the webpage with your own taste: go to the CSS file `styles.css`, & replace the current blue & yellow to 2 new colors of your choice. + +Now that the page is mainly built, you have to populate the "Dashboard" section with 3 new elements. +![](https://raw.githubusercontent.com/01-edu/public/master/subjects/carbon-copy/dashboard-template.jpg) + +Those 3 cards have to display respectively one information with: + +- a title +- a subtitle +- a text paragraph + +For this phase, you'll have to make the whole HTML & CSS by yourself. + +#### Phase 3: JS interactions (mandatory & optional) + +If you made it until here pretty fast, now the fun will begin! You're gonna add a bunch of JS interactions to make things appear / disappear / change in the HTML & CSS by linking a JS [script](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) to your `index.html`. + +- Change the order of the pictures when clicking on the pictures' section, [toggling](https://developer.mozilla.org/fr/docs/Web/API/Element/classList) the pre-defined class `row-reverse` from the CSS file `styles.css`. +![](https://raw.githubusercontent.com/01-edu/public/master/subjects/carbon-copy/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 `

`, `` & `