Project 6

The goal of project 6 was to create a page including a portion of an already existing page like the news articles on The Onion. At minimum we were to utilize the font-family, font-size, font-weight, font-style, font-height, and line-height. It was also important to recreate the article composition using a header, horizontal line, section, date, volume, issue, headline, image, and the article text.

I started off with filling the requirements and it took me a while per usual just to set up the container, and the divs and the size of all the texts and then after I did that all I could start adjusting fonts and adding the image. I also made the text of the article stand out by giving the first letter of the sentence starting it off emphasis and making it bigger than the rest and bold in css. In order to just meet the requirements I utilized text indent, made a couple different classes to put the section, date, volume and issue in.

In addition I wanted to add a header to illustrate that it was an adaptation of the onion so I added an image as a header with the title “the Onion” and adjusted the font and color on that as well. I also made a link to another article from the same volume my article was published in the onion because thats what it had the link to when you clicked¬†it on the website. (Vol/Issue) I felt the right side of the page was fairly empty so to add some more things that weren’t required I made another box to the right of the article adaptation in which I added a gradient background and a couple gifs that illustrate the digestive tract just to complete the page overall.

I still can’t figure out how to provide a source link when you scroll over a picture to cite it, and so I had to put the reference link at the bottom again-I also couldn’t get the second <hr> to be bolder than the first one.


Project 6 link: