Stock Images

Leave a comment

After doing a lot of searching for images to use in my mashup, I came up with these which I would use.

Petrol Station

I looked at quite a few images of petrol stations. My initial idea was to find a petrol station with ‘pay at the pump’ pumps, and change them into politicians from the current government. I decided against because I could I not find any pictures of a good enough quality/size/position to achieve this. My final idea was to have the Chancellor of the Exchequer (George Osborne) acting as a pickpocket with someone filling up their car with petrol. These were the two images I chose for this, the first being the one I decided to use. The reason I didn’t use the latter was because you couldn’t see a petrol station behind, and also it didn’t look like a normal petrol pump (probably because it wasn’t, but at least it was hidden in the first picture)

daimler-fuelcell-car-refueling-copenhagen

 

honda-fuelcell-car-refueling-at-h2logic-hydrogen-station

 

Pickpocket

I spent a while looking for a picture of a pickpocket in action, and the only one I could find that was the right size and the right position, and also not an Assassins Creed screenshot was this:

Pickpocket-cellphone-victim

George Osborne

This was the picture I chose for George Osborne:

george osborne

Header

Leave a comment

I started my website design with the header. I didn’t really know where to start so I just started from the top and i’m going to work down!

For my header, I basically wanted to have a curved edge on one side with slightly rounded edges around each corner, with a logo to the left and a title in the middle.

Here is the final css code for my header. I’ll break down each bit and describe whats going on in bold and leave the code as normal:

header{
This centers the div to the middle of the container as it is inside the container
margin:0 auto;
The 100% means that the header will always be 100% the width of the container
width:100%;
I had a set height because it won’t need to change until the breakpoints and probably not even then
height:150px;

More

Images

Leave a comment

Pretty much all of the images i’m going to use in my website have been sourced from deviantart.com. I got one or two from shutterstock.com as I had some spare credits to use and their library of stock photography is far vaster than that of deviantart.

This is what I needed to find:

8 x car photographs – CONTENT
4 x circuit/racetrack based photographs – CONTENT
3 x higher res pictures for the slider – SLIDER
1 x tyre track background image – BACKGROUND
1 x chequered flag – LOGO AND NAV

Here are the images that I will implement into my website:

CONTENT:

map2

car7

More

Website construction

Leave a comment

In order for my website to exist, I used Adobe Dreamweaver to hand code it from scratch. In lectures it was mentioned that we could use existing framework to construct a responsive site, although I wanted to be able to create my own, and I believe that using this site as a template I could create other sites using this as a framework, and it will be responsive as well. Before I started this construction,  I had already made a responsive website for another assignment after having learned a lot from lectures before.

This can be seen at: http://www.danieltooley.com

As you can see I also purchased my own url and when this website is finished I will get about adding this site into my portfolio.

To begin with I created my folders:

images
js
css

Then I created three blank html documents and a stylesheet called:

index.html
location.html
events.html
style.css

I needed to create multiple divs to incorporate everything I wanted to put into my website. This ended up looking like this:

More

My Idea

Leave a comment

I have decided that for my creative web assignment, I am going to make a website for a racing circuit. I have a keen interest in motor racing and a few friends who are heavily involved with race marshalling, so I will definitely have enough content to add.

Before I build my website, I am going to do research into different racing circuit websites, and look at what characteristics they have. I am also going to look at potential ways to improve them, and what differences there will be between my website and current websites.

Here are three racing circuit websites that I looked at:

Knockhill Racing Circuit
http://www.knockhill.com/

Brands Hatch Circuit
http://www.brandshatch.co.uk/

Silverstone Circuit
http://www.silverstone.co.uk/

More

Responsive Text

Leave a comment

I was looking through some responsive techniques and stumbled across this website showing a demo for responsive text:

http://css-tricks.com/examples/LarkQueries/

 

This is what the window looks like when it is in full screen mode.

 

This is what it looks like in a reduced browser window.

It changes every ten pixels or so. using around 165 lines of  media queries to change the text based on browser size.

I quite like the idea, because it shows the user just how responsive the website really is and it could be utilised in so many ways.

This is the code behind it:

@media (max-width: 980px) { .row h2 span:after { content: ‘Unusual.’ } }

This was repeated 165 times and the  ‘max-width’  was changed to make it respond to different browser sizes.

I want to be able to use something like this in my assignment, as I think that it will be something my site could be noticed for. I often resize my browser without really paying attention to how much by or what has changed, but I think I would notice if there was a completely different title for example.

 

 

Brainstorm 2

Leave a comment

Click the picture to see full size

photo (4)

After doing this brainstorm I decided that I was going to do a photo-manipulation of a petrol pump user being pick-pocketed  by George Osborne

 

Older Entries