Project 7: Web Page


Description: I designed a web page  to showcase a personally created logo.

Process (Programs, Tools, Skills):

I used TextWrangler and Photoshop.

Using TextWrangler, (a free program for Mac users), I wrote the basic HTML portion of my code. Then I attached a pre-made CSS document to my code. Nrext I needed to get the colors from my logo to use on my web page. In Photoshop I found them using the eyedropper tool. I changed the fonts from the default fonts in the pre-made CSS document, and I added some backup fonts just in case the viewer’s browser does not have the fonts I have chosen. I made the background image by using a gradient fill in a rectangle shape in Photoshop. Then I added some of the fish I created when I designed my logo and stationary. I created the three text bubble images in Photoshop, and added them to the HTML as jpeg images. I used padding around the logo, text bubbles, and  body text so that they would not be too close to the edge of the web page. I linked this website (leading to Project 6) to the bottom of the page.


The message is that FishyKisses lip balm will keep lips very moist and soft.


The audience is for girls ages 8- 18

Top Thing Learned:

I learned a lot about how CSS and HTML talk to each other to create designs. There are so many things I learned doing this project that seem to be on an equal level of importance.

Color scheme and color hex: 

I used split complimentary colors of aqua, orange, and red.

Dark Aqua #4d8f98
Light Aqua #5dc5c5
FishLip Gold #faaf40
Pink Heart #db70AB
Light Gray #aba8ad
Dark Gray #716f71

Title Font Families & Category:

My title font is “Orange Juice” from the Decorative category

Font Families & Category:

I used Typewriter  for the body copy, which is a slab-serif.

Changes made to the CSS

I changed the fonts, colors, padding, H1, H2, and H3. I also styled the images, body, and bullet points.


One thought on “Project 7: Web Page

Leave a Reply

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

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