Project 7 Web Page

P7ScreenshotMaryKirk.jpg

  1. Description: This is a web page I created to showcase the logo I created two weeks ago.
  2. Process (Programs, Tools, Skills): I used TextWrangler as my code editing program. I learned and used HTML and CSS coding to create the webpage. I used basic HTML tags including <br>, <h1>, <h3>, <ul>, <body>, <p>, and <div> to organize the text and provide adequate negative space. I used CSS to add an appropriate background image, add color and transparency, and to manipulate my fonts. CSS also allowed me to manipulate the spacing of the margins and padding. One of the challenges was figuring out how how to coordinate the <div> tag to manipulate the transparency to be different under the logo vs. the body copy.
  3. Message: I wanted to manipulate the image and color scheme the most to communicate the sweet, creative message I tried to convey with my logo.
  4. Audience: These design choices, color scheme, font, images, all appeal most to a young female audience.
  5. Top Thing Learned: I learned a lot about coordinating CSS and HTML so they can work together.
  6. Color scheme and color hex(s): Loosely triadic, red/blue/yellow interpreted by pink/teal/ivory. Pink:#CD9E9B, Teal: #71A9A8, Ivory: rgba(254, 240, 225)
  7. Title Font Families & Category: Ribeye Marrow, decorative
  8. Copy Font Families & Category: Slabo 27px, slab serif
  9. Changes made to the CSS: I changed the colors, fonts, shape and size of the text box, added a background image, added transparency to the text box background, added two notes, and coordinated the <div> to separate the level of transparency in the header vs. body.
  10. Word Count: 487
Advertisements

One thought on “Project 7 Web Page

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