Production diary Unit 59 Assignment 3

I first set up my site. I clicked on Site on the top bar and renamed it website. I then saved it.

I went on file and new and this came up. I clicked on Started Templates and Bootstrap Template. I
am going to use the Bootstrap eCommerce.

I named my website.
Next, we clicked on Split at the top and that brings us the whole code. With this, it is easier to delete
unwanted parts in your site.

Firstly, I opened up one of my images onto Photoshop.

I then clicked on image size which came up with this screen. I change the image into pixels and the
size to 1920 x 500 as this is the size of the carousel on my website.

It finished like this.

I then clicked on the carousel and the 3 lines at the side of it which brought up a menu where I
clicked on the folder, opened up the image I wanted and it inserted it for me, the right size.

I changed the colour of the navbar by clicking on it and creating a new caption saying .navbarinverse which just simply inverts the colour so from white to black.

I then made another caption for the navbar saying . navbar-fixed-top which makes the navbar stay
at the top when scrolling which is ideal for long pages with a lot of scrolling.

Next, I changed some text on my work

by splitting the page and using the code side to change text.

Here, I have

I went onto google maps to get a map for my website to show the users where it is located. I went to
my desired location, Manchester Arndale, and used the satellite mode. I then went on share and
copied the link from Embedded Map. <iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2420.529916445907!2d2.2437064842887553!3d53.48347787213204!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!
1s0x487bb1c72964d56f%3A0xbe1d429e7d3191e3!2sArndale+Centre%2C+Manchester+M4+3AD!5e
1!3m2!1sen!2suk!4v1461934201351" width="400" height="300" frameborder="0" style="border:0"
allowfullscreen></iframe>
To insert it onto my website, I pasted the link over another link
Insert > Bootstrap Components > Responsive Video Embed

To make a new page I went onto Files on the right hand side, then right clicked index.html under
the js file which then came up with the option to duplicate the page to create a new page.
I then changed the map to the right size so it fits the box it is in. to do this I went into the code and
simply changed the width from 600 to 460 and the height from 400 to 200.

I then created a third page using the same process as creating page 2. I am using this page for a
product. I first off inserted an image of the product, which was the right size of the box already so I
didnt need to change it on Photoshop. I then added text from the website onto it, but I wanted to
use paragraphs which werent immediately added so I had to go on Insert > HTML then paragraph
which added my paragraphs.