Build a simple HTML page based on some bootstrap CSS

Cancelled Posted Dec 13, 2013 Paid on delivery
Cancelled Paid on delivery

The goal is to create an HTML page using a provided CSS (based on bootstrap) to reproduce the page we have right know that has been build in a custom web developement tool. We just need to renew our graphical design using UI elements provided by the CSS. All coding will be done on our side. Mainly the job is to place all elements to look like what we have right now and code the link between them and some animations.

The CSS we use:

[login to view URL]

I will provide all the required files.

Usage of JQuery is prefered.

Refer to picture named: [login to view URL], [login to view URL] and [login to view URL]

The job

- you have to create/design one HTML page that will look like the actual main screen but using the UI elements found in the CSS (See picture [login to view URL] as to understand where we want to go. Just a cut and paste of a couple of UI Elements taken in the CSS as example). Your are free to propose another presentation/design but keep using elements found in the CSS please.

A - is a fixed div element that will contains an iframe. Size: 800x600. Not resizable.

B - is a div element contening a simple form. This div element is by default hide under A. When button b4 is clicked (edit button), the div is animated and slide to the right. So the form can be edited. You don't have to code anything regarding the validation of this form. We will do it. Your job is only to display/animate the B div element. Another click on b4 must animated the B div to the left (go under A).

To create the form, use the suggested sliders and check box proposed in the [login to view URL] picture or be free to use any other you can find in the CSS (without the need to edit the CSS). Placement is up to you but must be user friendly.

C and D is a UI tab element found in the CSS.

C - This first tab is empty.

D - This tab has a table E in it and 2 buttons b1 and b2. The table must provide 2 buttons: "delete" and "Edit" (b3 and b4):

- first column is an image

- second and third are text column

Clicking on b3 remove the line in the table

Clicking on b4 toggle the view of the B div element

Clicking on b1 and b2 open a modal window over the main screen (see points ActualAddScreen and ActualAddYoutubeScreen below).

After the modal screen has closed, please just add a empty line in the E table with a fixed image as an example

Modal window

ActualAddScreen

- This modal window is opened when a click on b1 has occured

- recreate this form using UI elements found in the CSS

- the screen must provide a way to upload two picture on a server. Use PHP for the server side code. Remark: this is not mandatory for this project but if you do provide the code to do it, we'll give a bonus.

- when clicking the OK button, close the modal screen and add a empty line in the E table

- no validation on the form, we will do it.

ActualAddYoutubeScreen

- This modal window is opened when a click on b2 has occured

- is identical to the previous one at the exception that the URL field is resize (smaller) and a new button is shown. Don't need to code the button.

Some remarks:

- the [login to view URL] screen reflects the final widht size of the page.

- No responsiveness for smaller screen required.

- No elements resize when browser is resize. Everything must fit in the actual size ([login to view URL])

- The heigh will vary with the contents of the table E

- please don't add any class in the CSS. Use inline CSS for animations or specific style you could need, but please try to only use elements in the given CSS. Will be easier for us to plug the page in our main master site.

- you have to provide the source code of all the files you will create

- we will provide you a zip that will contains all the files and CSS required for this project

That's it. Any questions, feel free to contact us.

Thanks.

Bootstrap CSS HTML PHP Website Design

Project ID: #5225780

About the project

16 proposals Remote project Active Dec 16, 2013