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. 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\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.brainyquote.com/ and figure out the background color, font, and text color they are using an replicate that exactly for the link in your index.htm.
Your CSS must pass the validator at:
For this assignment you will hand in:
Using inspect element on the https://www.brainyquote.com/.
Looking at https://www.brainyquote.com/ using Chris Pedrick's Web Developer add on to turn off all styles:
Passing the CSS validator: