ahmed-hasan92/task-css-challenge

CSS Challenge Task

You are going to try to solve as much tasks as possible. Its a Styling Marathon

Instructions

1. Fork and clone this repo
2. You will find a folder for each challenge
3. The index.html for each challenge is already there, you do not need to create it.
4. Import your CSS only using a style sheet for each folder separately
5. Use live server to run the server, otherwise, some pages will break!
6. Remember that here we are using w3css, here in the code, and it has some ready classes. if your style doesn’t apply to the html just make sure yours is overriding the w3css.

Challenge 1

1. You will be adding your code in the index.html that is inside folder 1

2. Create style.css file and link it to your html file

3. Try to create this layout:

   

Hints and Tools:

• Harry Potter cover image can be found in the assets folder
• To center text you can use text-align
• You can get fonts from Google Fonts. You can use any fonts you like for the title.
• Research how you can use google fonts in your HTML website!

Challenge 2

1. You will be adding your code in the index.html that is inside folder 2
2. Create style.css file and link it to your html file
3. Try to create this layout:

4. Use flexbox

Hints and Tools:

• Image is in the assets folder, use background-image
• Learn how you center elements in css here
  • To read more about flexBox, check CSS Tricks
• To add shadow easily, use this website that provides you with the shadow css code.

Challenge 3

1. You don't need to touch index.html this time, just take a look of the classes that are assigned to each html element.
2. Your style.css has all classes that you need this time, you only need to fill the classes with your stylings.
3. Your page should look like this

The class container

1. Container has to have a height of 300px and width 400px
2. The container should clip the list inside it so the list doesn't overflow. With that, you will have to scroll to see all items

The class head

1. Have a nicer font for both the title and list
2. Give the head class a background-color and a color
3. The head has to be sticky, which means if you scroll down, the head doesn't disappear.

The class row

1. Give the list a background-color and a color
2. Make your list scroll using overflow
3. You will find the row class in the index.js, ìndex.js is rendering a list from people.js ( you do not need to touch is, it's only so you know what is the row class controlling)

Hints and Tools:

• An example of a scrollable menu is the History from the calculator.js
• style.css is ready with the classes
• Check out Overflow attribute
• You can use this coolors to find colors that you like

Challenge 4

1. You don't need to touch index.html this time, just take a look of the classes that are assigned to each html element.

2. Your style.css has all classes that you need this time, you only need to fill the classes with your stylings.

3. Reuse the image from challenge 1, to create the layout provided

   

4. Use flexbox for centering your card

5. You will be using position in couple of things

Hints and Tools:

• For the image shaping you can check the following resources:
  1. object-fit
  2. object-position
• If you need to read more about position
• z-index would help you here