In this assignment you will develop a Cascading Style Sheet (CSS) to control, the look, feel, and layout of some provide HTML content.
You should already have your system set up on PythonAnywhere and have completed the HTML assignment before starting this assignment. The HTML assignment sets up your application to serve static files and we will need that set up to do this assignment.
In this assignment, you will transform from this:
There are several sources of information so you can do the assignment:
Please install the Web Developer Toolkit for your browser from Chris Pedrick and know how to use it to disable CSS styles.
Here are the tasks for this assignment. These tasks can be done by editing HTML and CSS files in your `site` folder on PythonAnywhere.
Make a folder django_projects/mysite/site/css.
Take this this file and copy/paste the contents into django_projects/mysite/site/css/index.htm. You will not change this file.
Take this file and copy/paste the contents into django_projects/mysite/site/css/blocks.css in the same folder as the above file.
Edit the blocks.css and add the CSS rules so the HTML file looks like the above image when you view
https://your-account.pythonanywhere.com/site/css/index.htmfile in your browser. (Example that *looks* correct but is not a solution at all)
The four boxes have five pixel borders with different colors and five pixels of margin and padding. It is probably simplest to use fixed positioning to get the boxes to be "sticky" to the corners of the screen even when you resize. Make the boxes width be 25% so the width changes as you resize your browser.
Center the link at the top of the page. Use your developer console / inspect element feature of your browser to visit https://www.dj4e.com/ and figure out the background color, font, and text color used in the top navigation bar and replicate for the link to DJ4E in your index.htm.
Your CSS must pass the validator at:
https://jigsaw.w3.org/css-validator
Note - that as you change files like `blocks.css` you may need to make sure that when you hit 'refresh' that a new copy of the file is loaded. One some browsers, you can press 'Shift-Refresh' to force a reload of the cache so you get a fresh copy of the file.
For this assignment you will hand in:
Passing the CSS validator:
Provided by:
www.dj4e.com