doublemacro / html-css-group-ex-mar-20 Goto Github PK

We will be reusing project files from last time.

Start by editing the index.html and style.css files in this repo. Add the style code at the end of the style.css file.

Add a style in style.css that:

• adds a border to the section tag. Use id="main-section" for the section css selector.
• adds padding 20 pixels to the section tag Apply this same style to the unordered list in the page. Use a class for this.

Add a style for h1, h2, h3, that:

• adds a red border to them
• aligns text to center

Add a style to the list items in the unordered list, that:

• moves them 40 pixels to the right;
• styles the links so they aren't underlined anymore
• hides the cursor when user hovers on them

Add a div before the end of the section;

• add two span tags inside this div, with text "Test text 1" and "Test text 2"
• look at how they are displayed, before applying the next style.
• change the display of these span tags to display block. How did they change?

Add a div before the end of the section;

• add two div tags inside this div, with text "Div content 1" and "Div content 2"
• change the height and width of the div blocks. What changed?
• look at how they are displayed, before applying the next style.
• change the display of these div tags to display inline. How did they change?
• change the height again, to double the size. How did they change now?

Add a br and a button with text "Finish" before the end of the section tag.

• style the button so that it's twice as big, and rotated 90 degrees. Hint: use transform translate