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.
@ -25,7 +25,7 @@ NB: Each item of the navbar menu - in the top right corner - has to bring to the
Here is a [wireframe](https://en.wikipedia.org/wiki/Website_wireframe) of the webpage, showing the HTML tags you have to use:
#### 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.
@ -40,7 +40,7 @@ Those 3 cards have to display respectively one information with:
For this phase, you'll have to make the whole HTML & CSS by yourself.
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`.
@ -48,19 +48,19 @@ If you made it until here pretty fast, now the fun will begin! You're going to a
- 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.
- 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 `<p>`, `<input>`&`<button>` elements have to disappear after the button has been clicked.
- When clicking on a card, open a modal window that will show the whole article ; the modal will be closed either when clicking on a "Close" button, or when the "Escape" key is pressed.
- Option 2: When clicking on a card, open a modal window that will show the whole article ; the modal will be closed either when clicking on a "Close" button, or when the "Escape" key is pressed.
- In the modal 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`.
- Option 3: In the modal 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`.
- Warrior option: set the `header` text content with a random quote every time the page is loaded, and then every 4 seconds. 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!
- Warrior option: set the `header` text content with a random quote every time the page is loaded, and then every 10 seconds. 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!
###### Does the webpage look the same as the template, and includes all the elements?
###### When clicking on an item of the navbar menu, does it scroll to the corresponding section in the page?
#### Custom CSS
###### Have the colors been modified from the template version?
###### Does the Dashboard section display the 3 cards, looking similar to the template?
#### JS interactions
###### When clicking on the images' section, does it toggle the order of the pics?
###### +In the Contact section, when writing something in the input and clicking the button, the following sentence should appear in the place of the input, and display the text filled in the input: "Nice to meet you _[input data displayed here]_ 👋! Thanks for introducing yourself.". Is this working?
###### +When clicking on a card of the dashboard, does it open a modal displaying the card content?
###### +Does the modal close when clicking on the closing button & when pressing the "Escape" key?
###### +Does the modal include a widget allowing to change the alignment of the text?
###### +Does the header display a different Chuck Norris' joke every time the page is reloaded?
###### +Does the header display a different Chuck Norris' joke every 10 seconds?
