From ab9c3b55f017d4a6fbb771b52b4c8940520258f5 Mon Sep 17 00:00:00 2001 From: lucymac Date: Thu, 3 Jun 2021 19:58:22 +0100 Subject: [PATCH] Update README.md --- README.md | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 11db502fa..0f55ac44c 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,13 @@ # karma-clone The aim of this exercise is to create a page that looks just like this one: - - + + + ![alt text](./Karma%20-%20desktop%20design.png "Karma desktop design") -### Tasks +## Tasks - **Fork and clone** this repo. - To fork, hit the 'fork' button in the top right corner of this page on Github. @@ -18,8 +19,17 @@ The aim of this exercise is to create a page that looks just like this one: - **Edit `index.html` and `style.css`** to re-create the design above. - Remember, use semantic HTML to re-create the structure, and style each element using CSS to make a perfect copy of the above image. - - All the images and icons you need can be found in the `img` folder, and the font 'Roboto' is already loaded into the project. + - All the images and icons you need can be found in the `img` folder + - The font 'Roboto' is already loaded into the project (look for it in the index.html `head`!). To apply the fonts to your page, you'll need to use `font-family: 'Roboto', sans-serif;` in your CSS, as well as set the `font-weight` you want. There are [more details on Google Fonts](https://fonts.google.com/share?selection.family=Roboto:wght@300;400;500). + - The repo also includes a favicon (find the file 'favicon.ico' in the root folder). Follow [instructions here](https://www.youtube.com/watch?v=kEf1xSwX5D8&t=187s) to add it to your page :) - **Commit and push your code often** so you get into the habit and you avoid losing any code that you write if your machine crashes for example. - - Once you're ready to submit your homework for review, do a final push and **create a Pull Request**. If you're unsure how to do this, [have a look here](https://syllabus.codeyourfuture.io/git/cheatsheet/#i-want-to-send-my-code-to-volunteers-pushing). + - Once you're ready to submit your homework for review, do a final git push and **create a Pull Request**. If you're unsure how to do this, [have a look here](https://syllabus.codeyourfuture.io/git/cheatsheet/#i-want-to-send-my-code-to-volunteers-pushing). + +### If you finish early +and you want to keep coding - add an extra part to the page, [following this design](./additional/Karma%20-%20desktop%20-%20extended.png) ;) +You'll find the image you need inside the 'additional' folder to replicate the orange banner strip at the bottom of the page. + + +## Have fun coding! \ No newline at end of file