Skip to content

Latest commit

 

History

History
31 lines (24 loc) · 1.71 KB

README.md

File metadata and controls

31 lines (24 loc) · 1.71 KB

Box Model - Exercises

Overview

In this exercise we will practice The CSS Box Model.

Getting Started

In each of these exercises, you have an html file with a <style> section. In each file you have a problem which you should fix only by modifying the CSS.

Steps

  1. in 1.html the text inside the <span> runs over the wrapped text.
    problem
    Fix the CSS so that it looks like this:
    Solution

  2. in 2.html you have a page that looks like this:
    problem
    Make the required changes to make it look like this:
    solution

  3. in 3.html you have a page that looks like this:
    problem
    Make the required changes to make it look like this:
    solution

BONUS CHALLENGES

You may need to research some other selectors and properties

  1. In file 4.html you have a form that looks like this:
    problem

    • Make the required changes to make the form look like this:
      step2
    • Now make the required changes to make the labels and form look like this:
      step3
    • Make the required changes so that the inputs will look like this. NOTE Notice the special appreance the input has when it is in focus. NOTE 2 Notice that there is a special property called outline that is responsible for the initial focus style, which you will have to modify as well.
      step4]
    • Finally, make the required changes to make the button appear like this.
      step5
      Also make sure that on hover, the button will look like this:
      step6