Use what you've learned of CSS position properties to recreate the site components shown below.
- In your terminal:
# (1) Navigate to `~/muktek/assignments` directory.
cd ~/muktek/assignments
# (2) Create the assignment directory and cd into it
mkdir css-positioning
cd css-positioning
# (3) Download + unzip the project files from *inside* the css-positioning directory.
curl https://raw.githubusercontent.com/muktek/assignment--css-positioning/master/assignment-files.zip > assignment-files.zip
-
Do the exercises. You will need to modify the relevant position properties in each
ex-*
folder'sstyle.css
file. -
Make sure you include:
* { box-sizing: border-box }
You must offset the text block 40px up and 15px to the left using relative positioning.
You must offset the picture profile using relative positioning.
You must use position absolute to place the orange '+' sign in the top right corner of div.product
element.
You must use position absolute to place the arrows at the top-middle, left and top-middle, right of the div.hero-unit
element.
You must position the menu at the top-center, and make it position fixed fixed so that it is always visible when you scroll down the page.