Michael Easton's client base portfolio

User-Centric FrontEnd Development Project. - 1st Milestone Project.

This project is aim for clients interesting in getting fit.

Orignal website

Actual website can be found here.

UX

My goal in the design was to make it minimalist as possible for information on personal trainer at best interest. i want client able to read the contents with ease and interest them to learn and improvised themself. I want client able to navigate and book a session with ease of use, at anytime, mobile based by using calendar sychonised between Michael and clients based members on this website.

minimalist colour black and white for background image display, orange and blue for logo and button display.

Techology use.

For this project, as strictly only in

HTML
CSS
Bootstrap (with updated version.)

features

I want able to add alert banner for adverts discounts, at the top of webpage.

I want a webpage for scrolling down, and a modal for members page and booking area.

I will add forms for client's details to become a member. so members able to book a session with Michael, and ease of use by planning through a sychonised calendar on Michael's organised calendar.

I would like a calendar in different booking colors for Michael so he will know which area of sport.

I would like to keep it minimized in mobile forms, such as carousals that shalt be restricted.

index.html

Simple navigation bar - scroll pages

Home

Front page
- logo.
- Front display.
  - introduction, professonal statute.
  - additonal on the icon to facebook & instagram etc.
- sign-up button in modal forms.

About

second page
- profile of Michael.
  - will not be display in mobile version.
- decription.
- Carousal background.
  - to be display only on tablet and destops.
  - single image on mobile version only.

Experience

Third page - (Why hire me?)
- card description with icon.
- button for more infomations.
- in modal, images to show of what he did.Personal Trainer such as went to tough mudder.
- history of his sports and hobbies.

Testimonials

Fourth page
- quotes and star ratings
- ajustable media

Service

fifth page - (what offer i do?)
- able to be interpret, comunicate support in sign language.
- provide equmpments
- travel to owner's home
- skill expertise.
- flexible. instructor.
- certificated, professonal details.

Booking

sixth page
- sign in and display person icon
- calendar
- with bullet option morning, afternoon, evening.

Contact

seventh page
- additonal contact for advise.
- where to find me.
- Location - of gym, snow, climbing.
- comfirmation and nofication.

Footer

-  Michael's activity hobbies.
- links.

infomation on the origin source.

Ashion webpage portfolio
- http://www.chitrakootweb.com/template/ashton/home07-light-side-nav.html#portfolio
- Ashton Hokes main front face, this will be home page (index.html)
- My "experience" html stucture, to use it as in "card" (bootstrap) with further info button directing to new page.
Haley Schafer webpage portflio
- https://code-institute-solutions.github.io/StudentExampleProjectGradeFive/
- i liked the jumbotron display, that the background images doesnt move, yet others moves.
Climbing Icon
Waist slimming icon
Tread mill machine
- all on https, credit to www.flaticon.com
- difficult to find one that's free, but in SVG, so i add into HTML.
- tidy up the svg structure, and changes the color also "fill" to be white from none.
Carousel the sliding effect i have add javastrap links in order for it to work.

links

#####links here credit to as listed#####

future feature to be add

popup footer to be add in javascript as shown in list of links above. calendar to be sychonised and bookings comfirmation. in Javascripts. calendar to be shown on the booking page as per month in relavant to member's booked day as greyed out.

code-institute-submissions / first-milestone-michael Goto Github PK

first-milestone-michael's Introduction