From dbb7277bfb8298ed3b8986f29214f12462d27be3 Mon Sep 17 00:00:00 2001 From: MarieMalarme Date: Fri, 5 Mar 2021 15:33:43 +0000 Subject: [PATCH] carbon-copy: put full github links for images --- subjects/carbon-copy/README.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/subjects/carbon-copy/README.md b/subjects/carbon-copy/README.md index d7b6ba0a..b9232997 100644 --- a/subjects/carbon-copy/README.md +++ b/subjects/carbon-copy/README.md @@ -10,7 +10,7 @@ Today is a big day: you're going to 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: -![](page-template.jpg) +![](https://github.com/01-edu/public/blob/master/subjects/carbon-copy/page-template.jpg) Feel free to replace (or not, if you're lazy) the text contents by details 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: @@ -19,7 +19,7 @@ The raid is divided in 3 phases: - custom CSS style - JS interactions -#### Phase 1: HTML only _(mandatory)_ +### 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. @@ -27,14 +27,14 @@ For this phase, we provide you a CSS file (`styles.css`) that you just have to [ NB: Each item of the navbar menu - in the top right corner - has to bring to the corresponding section on click (clicking on "About" scrolls to the "About" section in the page); take a look at the [`href` anchor use](https://www.w3.org/TR/html401/struct/links.html#h-12.2.3). Here is a [wireframe](https://en.wikipedia.org/wiki/Website_wireframe) of the webpage, showing the HTML tags you have to use: -![](page-wireframe.jpg) +![](https://github.com/01-edu/public/blob/master/subjects/carbon-copy/page-wireframe.jpg) -#### Phase 2: custom CSS _(mandatory)_ +### Phase 2: custom CSS _(mandatory)_ First of all, let's customize the color atmosphere of the webpage to your own taste: go to the CSS file `styles.css`, & replace the current blue & yellow with 2 new colors of your choice. Now that the page is mainly built, you have to populate the "Dashboard" section with 3 new elements. -![](dashboard-template.jpg) +![](https://github.com/01-edu/public/blob/master/subjects/carbon-copy/dashboard-template.jpg) Those 3 cards have to display respectively one information with: @@ -44,29 +44,29 @@ Those 3 cards have to display respectively one information with: For this phase, you'll have to make the whole HTML & CSS by yourself. -#### Phase 3: JS interactions _(mandatory & optional)_ +### Phase 3: JS interactions _(mandatory & optional)_ If you made it until here pretty fast, now the fun will begin! You're going to add a bunch of JS interactions to make elements 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://css-tricks.com/snippets/javascript/the-classlist-api/) the pre-defined class `row-reverse` from the CSS file `styles.css`. -![](images-order.gif) +![](https://github.com/01-edu/public/blob/master/subjects/carbon-copy/images-order.gif) - Option 1: 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 `

`, `` & `