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: http://udel.edu/~clairec/art205/Project6/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s