Background

I choose a simple faded yellow colour for my background to give it a beachy look. To get this
colour I had to create it in photoshop by using the colour picker then transfering the colour (hex
code) to coda and putting it in the css file.
Jack Johnson logo:
I went for a very simple handwritten font for my logo which I think works well with my design. I
also thought it would be nice to add the silhouetted bird to the logo again to give it that beachy
feel. The font style I used was a handwritten font called 'hand of Sean'. I set the logo to posi-
tion to the left, but I had a problem with the logo because every time I put the jack Johnson
logo on the website there was also some other text behind it, so I had to make a property
value called 'text-indent' and set a value of 9999px so the text that I didnt want would go of the
page.
Homepage
My website is based on a music artist called Jack Johnson, Jack Johnson is a indie
folk singer. I chosen Jack Johnson because for my website I wanted to have a chilled
beachy look to it and I thought Jack Johnson would be suitable for that.
Palm tree:
The palm tree is a illurstrated image that I created, It taken quite a lot of the time to adjust the
size to get it right for my website. There was a slight problem though because I wanted my tree
to be right aligned but everytime I did that It just stayed in the middle instead of the going to
the right of the page, the problem was that I needed a property value called position:absolute
which tells the tree to position where you want it to go.
Navigation menu
The navigation menu took quite ab it of time to design. So my aim for this was to get my menu
to look like a guitar neck and head which I think I achieved quite well. The hardest thing was
getting the guitar head to line up with the neck of the guitar.
In the html document I had to make a ul tag witch stands for unordered list and also make a
tag called li which stands for list. Making them tags puts the navigation pages into separate
links.
To line the guitar head and neck up I had to go in to the css file and make sure that I had a
margin, padding, z-index and a position tag. Then I just needed to keep adding a value up un-
till they all lined up perfectly.
I wanted my pages to be into 6 different boxes with the color of brown. To create a color in css
you can either just type (color: Black;) which will make the boxes black or say if you wanted to
create your own color then if you wanted you can go into Photoshop open the (color picker)
and find a color. When you have then found the color you want then you can just copy the
hexadecimal code then go back into the css file and then type it out like this (color: #c3754e;)
then that will give you the color that you wanted.
With the footer I had some problems with creating the footer as I couldnt seem to get the text
that was in the footer to go right alined. It just kept on staying left aligned. To solve this problem
I had to go into the html file and make a class called sitemap and then I had to use one of the
main propertys which was called float-right, using that property solved the problem so now the
text is right aligned.
Home-images
I thought it would be good to add some images of Jack Johnson on to the homepage so that
when people visit the website they will know that it is based on him. I have also tryed to add
images of his life like on one image he is surfing the other he is has a guitar in his hands and
the other is him planting as a plant as he very interested on how earth works.
I found that getting these images all to line up together quite difficult using css. What I
needed to do was add a few classes then tags called (margin-right 20px) (margin-bottom
20px) to line everything up.
Tourpage
On my tour page it was easy to design as it was just using images headers.
I have put these 4 flags on the tour page the flags are 4 different countries where Jack John-
son will be touring. I got these flag images from Google. I then made a file on dropbox called
images so that it makes it easier to access images when working in coda/html. I put the flag
images that I taken from Google into the images file on dropbox like shown in the images
below. As I wanted 4 flags I just had to write the exactly same image class for each one but
just with a different file name.
This is the image code to make an image.
You write it out like this <img class=flags
alt=flags src=Then the file name
height=35 />.
I made a <h2> in the tour html page and called that fourthcoming shows. If you want to
change the font size, color, font, etc then youll need to go into your css file and make a class
of whatever you what. As I wanted to alter h2 fourthcoming shows I would have to make a
class in css called h2. Then under the h2 class you can write different property values like
this (color: blue;) (text-transform: uppercase;).
Creating the tour dates was quite difficult to do as it was hard getting them to come alto-
gether. To create the tour dates I had to make a 3 div tags called tour-column, dates-wrap-
per and one called date. The tour column div was for the font, alignment and padding. The
dates wrapper div is to put the tour dates in 2 columns. The date div was for the tour dates,
so for the float, text-transform, text-align, width, color, font-size and the line-heigh.
The store page
Creating the header for the store page was the exactly same as creating the header for the
tour page.
On the store page I created 10 images which were taken from the Jack Johnson website. I
did this by going onto his site and taking the images from there by dragging and putting them
into file in my images folder. Then in the html file I made a div class called product, I made
the same div class to all of the t-shirts so that when I edit to make changes to one image it
will also do the same for the rest.
The video page
I created a buy now button so that if you like the t-shirts you can just click on the buy
now button and it will take you to the real Jack Johnson website store page where you
can purchase t-shirts and other items if wanted. The prices that I have put on the t-shirts
are just prices that I have made up as there just for show. I thought it would be intresting
to put a buy now button on the website as it tests my website skills and I have also al-
ways wanted to know how things like that work on a website. It did take some time get-
ting the button to work as you had to apply a lot of propertys to the class like shown
above in the image. I used a ul and li tag for the t-shirt and buy now button, the ul tag
stands for unordered list. An unordered list is a tag that puts everything in lists so
everything inside it becomes its own list like show above in the image. The li tag
stands for list item, so you can put anything in there that you want to go on the website I
put my button and the t-shirt images in there.
This is my video page, I have embed 5 of Jack Johnsons music videos from you tube. I
embed the you tube video by going onto you tube searching the video that I wanted then
scrolling down untill I seen share, click on to that then there is the embed code. I had to
copy the embed code then paste it into my html file and then put it into a tag called
iframe. iframe is a tag that is used to make embed codes work on a website, in that
tag you can also put what sizes you want to apply to the item that you want to use.
I my html file I made a div class called playlist and another div classed video thumbnail.
The playlist div class is for the 5 videos and what the playlist class does is it groups all of
the videos together so that in the css file, you can make changes to one of them and it
will apply to them all. The things I applied to it was propertys like background-color,
padding, width, opacity etc. A cool thing that I applied to the videos was that underneath
the big main video when you click on one of the 4 videos it will replace the main video
with one of those 4. Shown in an image above is the 4 video images shown differently in
4 ways, this is showing that say if you click on first video at the top which is I Got You
then that video will move and go to the main video and then next video which is called If
I Had Eyes will take I Got You place.
The music page
This is my music page, on my music I have embed a sound cloud Jack Johnson playlist.
I did this the same as I did with the Youtube videos on my video page. I went onto the
sound cloud website and search Jack Johnson, it then bring his albums, songs and
playlists up. I clicked on his playlist and then there is an option at the top saying share,
so I clicked on that and then it will bring the embed code up and again all what you need
to do is to copy the code and paste it into the html file in that iframe tag.
I went on to the Amazon page search Jack Johnson and then it brought 8 of his albums up,
so I went on each induvial album and copied the url link. I then paste the that into my html file
and put it in a href tag I did this for the others too. When you click on one of those albums
on my website it will take you to the Amazon page and to the album you clicked on. I thought
it was a good idea to use this idea as it shows how links work on a website and how you can
purchase things through another website.
The blog page
This is my blog page, on my blog page I have just put one image and some text on there.
The image is just showing some events that Jack Johnson has attended and the text is
showing the latest news on Jack Johnson so for example whens his next tour or what has
he been attending. I have also included a archive showing what dates he is touring, inter-
viewing, on the radio etc. Out of every page I would say this was the easiest to design as it
was just 1 image and some text, there was one thing that did take long and was quite diffi-
cult to create even though it looks simple was the lines going underneath Those date and
Text in the orange archive box. It was just what propertys it needed so I just had to keep
applying different ones untill it was all aligned right.