/css-lab

FS1010: CSS Lab

Primary LanguageHTMLOtherNOASSERTION

CSS Lab

Setup

  1. Fork this repository by clicking on the Fork button on the top right of this repositories GitHub page. (Forking a repo)
  2. Clone the repository
  3. Run npm install in the repository from the command line.
  4. Run npm start whenever you wish to start work on the project and navigate to the provided URLs.

Instructions

All relevant files are located in the 'public' directory. Open the index.html and custom.css files in an HTML editor of your choice. Complete the following tasks using your existing CSS knowledge and the online resources available to you.

Within the 'index.html' file:

  1. Assign the following inline styles within the provided index.html document:
    1. Add the img-thumbnail class to all the images in the ‘About the Program’ and ‘Spin News’ sections

Within the external 'custom.css' file:

  1. Assign the 'landscape-1744370_1920.jpg' image (found in the 'img' folder) to the background of the jumbotron
  2. Assign the following styles to <body> element:
    1. Background colour: #eedcd0
    2. Text Size: 110%
  3. Assign the following styles to all <h1> and <p> elements, but only when they are located inside the jumbotron.
    1. Weight: 800
    2. A white (#ffffff) drop shadow with a 10px blur
  4. Assign the following styles to all the <h2>, <h3>, <h4>, <h5>, & <h6> elements, but only when they are located inside the ‘container’
    1. Font: Impact, sans-serif
    2. Weight: 800
    3. Colour: #176093
    4. Letter spacing: Increase by 15%, using the relative element measurement (rem) units.

Within the ‘index.html' file:

  1. Create an internal stylesheet that applies the following styles to the <body> element
    1. Background colour: #d2e5f6

Resources