In this challenge you will be having to make a rectangle that inside of that rectangle and in total there should be four rectangles. You can have any color of the border, but I choice it to be all green colors

In this challenge you will be making a simple hover effect with the :hover css action pseudo element and with some new css styles.

A triangle that changes into a oval type of circle

A simple animation that will change colors when you hover on it you will also need something called @keyframes and the :hover element as well .

In this challenge there is a new css elemnt that you wil us called :active and you will need :hover and @keyframes as well let see if you can figure out how to put that all together and make this

This is the first advance challenge in this one you will be making a icon that looks like this. There is a hover effect that will change the border radius of the outer circle and the color.

In this challenge you need to us .css function in javascript to change the background color of the div. Also you need :focus to change the background and the border of the button when you focus on it. Extra thing if you are really wanting a even harder challenge is you can make the div show and then hide the custom color picker when you press the button and make the color picker beside having only one button click and changing it one time. Also the button in the black color picker when yo click on it there will be no blue outline of the button click.

In this challenge it is more towards the javascript side of css and you will click a button and start the animation by adding the css class. You would need the .addClass and the .removeClass and you will need to create the css class also for adding the class there will be 2 css components. Also after the animation is done you will need to display the square to none and have a seTimeout function to set the sentence after the animation is over by a certain amount of time