Project 7: Web Page

By Tiffany Contreras

Project screenshot:

 P7TiffanyContrerasScreenshot

 

Description: This webpage is to explain details on Columbia Entertainment and the process of creating the logo.

Process (Programs, Tools, Skills): I created this webpage by using TextWrangler on Mac software. I combined an HTML and a CSS code and used them for the first time. I edited the codes by adding my own elements to organize and decorate the site. I chose this background image from Google because I wanted it to represent the behind-the-scenes of film, which would fit well with Columbia Entertainment. In addition, I opened Adobe Photoshop to select the color that the logo was so that I could match it with the background color of my first headline. I also made the text of my second headline the same color. I matched these colors with the colors in the background image to apply my monochromatic-red color scheme. once I took an overall look at my webpage, I added padding to the sides of the body and the top of the headline. I also added a dotted border around the second headline to add more a movie-like look.

Audience: My audience is people in the film industry and people who enjoy watching films.

Top Thing Learned: The thing that I learned the most was how to create this webpage through HTML and CSS coding. I had never done this before, so every aspect of this process was new and important for me. I enjoyed every minute of it, even the challenging ones – such as adding padding, a background image, and setting the logo to the left with text on the right. After a few days of working on it, it became clearer, and I was able to make changes on my own without needing assistance.

Color scheme and color hex(s): Monochromatic – red.
H1 background, H2 border and text color hex: #4F3C02
Body copy text color hex: #5C3317
H1 text color and body copy background color hex: #CDAF95
Background color: #97694F

Title Font Families & Category: Capitals – Oldstyle typeface

Copy Font Families & Category: Comic Sans – Sans-serif

Changes made to the CSS: Title and body copy font families, H1 text color; colors, and sizes; body copy color; background image; border; padding; margins; one comment.

Word Count: 586 words

2 thoughts on “Project 7: Web Page

  1. Tiffany, I am so impressed with your project! I love the logo and the final web page look. I like the background that you decided to go with. It works well with your design. You did a great job at writing out your html and your css. I think the layout is good and overall a really good design that has great flow that leads the readers eye down the web page. I think the alignment is wonderful and you chose a good color scheme that compliments the text. Overall I love the design and I think its fantastic!! If you get a chance check out my design at http://shaeleywolfgramm.wordpress.com/2014/11/22/web-page-project/

    Like

  2. Tiffany, what a fantastic project! Right away I was really impressed with your background and the transparency factor you used. The border around your headings is also great. I really like your monochromatic color scheme and how well it all worked together. Your fonts worked really well together as well and were very readable. Great Job on coding everything!

    If you’d like to check out my design you can see it here: http://kennanmvorwaller.wordpress.com/2014/11/22/project-7-web-page/

    Like

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s