WEB501 Website Build

Blogs 7-10

After completing the initial base build of the index page, i once again went to http://www.layoutit.com/ and generated the layout for my gallery, products, and contact pages.

The next step was to start implementing some color, image insertion and text/font insertion.

I made an ID with the background color #c49ad6 (pale purple) that I wanted to use as a background color. After inserting the ID in a lot of the ‘boxes’ and noticing large white gaps in between the elements, it dawned on me that I can just use the color scheme in the container which fixed up the white gaps.

I then remembered in one of our classes that we could insert a background image to use instead of a solid color, so I googled ‘website’ background color and found a great image which I then inserted into my container-fluid bootstrap override in my css instead of a solid color.

1

 

I then looked for two suitable fonts for my website which I found at http://www.1001freefonts.com/. I downloaded a font called great vibes to use for the page-header, slogan, and some headers. I downloaded a font called redressed to use for all paragraphs.

3

4PNG

5

I then started the process of inserting images. I had some difficulty with the images as my sister-in-law didn’t supply me with many good photos, There were some really good ones taken from professional photographers but many were of bad quality. Luckily Maegen had done the makeup for the bride and bridesmaids at my wedding so I used some of them as well as the professional ones that she supplied. I am not entirely happy with the images on the website at this stage as some of them do not look great due to resizing issues, I will come back to them at a later stage.

Inserting content into the index page, I googled beautiful wedding photos to find a great one for the page header, I found a good one, inserted it, and then put a banner text ID in with the correct attributes I wanted such as the great vibes font.

I then inserted three images into the first columns located under the slogan which I had inserted under the page header. Under those three images, I then inserted my text with the <p> tags and wrote my text that had been written with SEO in mind.

The gallery page was very quick and simple, but like i said, I wasn’t entirely happy with the image quality and will come back to it.

I created an image ID for the gallery which i used and also overrode some attributes of the carousel.

7

6

The final part of the gallery page was inserting a YouTube video on makeup tips and tricks, very simple and it worked a treat. I had to of course, adjust some size settings which went to plan.

8

The next step was to insert all the content into the Products page. I’m really happy with how the page come out, it looks fantastic.

The first step of building the products page was to find png file format images of all the logos of makeup brands Dramateyez Make Up uses, This was a difficult process as it took lots of downloading different images to find transparent backgrounds, I got there in the end. I also inserted links into the images to their respective websites, Revlon, Maybelline etc. To finish off the product page, I inserted a couple images of Maegen applying makeup to clients.

The last page  I built was the contact page, which went according to plan, however, I need to work out how to position the foxy form centered.

9

I am very happy with how the website is looking, however, I have a few issues which need fixing up.

Some of the issues I am having are with the Navbar, Image positioning, Image quality and Media queries. I will have these sorted out for the final hand in.

 

 

 

 

 

 

 

 

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