Skip to content

MiriamGaGuMuk/CSS-Positioning

 
 

Repository files navigation

CSS Positioning

Instructions

Use what you've learned of CSS position properties to recreate the site components shown below.

Setup

  1. 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
  1. Do the exercises. You will need to modify the relevant position properties in each ex-* folder's style.css file.

  2. Make sure you include:

* { box-sizing: border-box }

Mockups

Ex-01 - relative

You must offset the text block 40px up and 15px to the left using relative positioning.

img

Ex-02 - relative

You must offset the picture profile using relative positioning.

img

Ex-03 - absolute

You must use position absolute to place the orange '+' sign in the top right corner of div.product element.

img

Ex-04 - absolute

You must use position absolute to place the arrows at the top-middle, left and top-middle, right of the div.hero-unit element.

img

Ex-05 - fixed

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.

img

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 63.5%
  • CSS 36.5%