Completed

Single page Bootstrap 4 to 3.3.7 conversion plus minor layout tweaks

I have a single page HTML/CSS layout that was purchased from Themeforest. It was been customized but needs to be converted from Bootstrap 4 to Bootstrap 3.3.7 in order to be compatible with our ecommerce engine. Additionally there are several minor layout tweaks and clean up items that need to be done. The HTML page is pretty bloated and contains 1200 lines of code. I attached a screenshot.

The layout changes include...

DESKTOP

1. Make every section that is less than 100% of the screen height, be automatically resized to be 100% height of the viewport.

2. Use the same fonts from the first screen throughout the entire page. There are three on this page.

3. SCREEN 2: “We Are” Section:

a. Make the background image slowly grow in size. Perhaps from 90% to 100% over 30 seconds. Have it freeze at 100% when complete. Only start zooming upon the consumer having scrolled to that section.

b. Link the bottom arrow to scoll down 1 viewport size to have the brand video be in full frame (just like how the arrow action works on the first screen).

c. Fix the arrow, so if the user scrolls down partially on the page the arrow disappears, just like on the first screen.

4. SCREEN 3: Brand Video Section:

a. Add the same scroll down arrow from the previous screens. Again, it scrolls down one viewport size when clicked.

5. SCREEN 4: Timeline Section:

a. Make it scale to 100% of viewport size

b. Fix the spacing inbetween the title and description text on some slides that have poor spacing.

c. Add left/right slide arrows that match the slide arrows exactly from our SCA main header page

d. On larger screens, make the year timeline always align in the vertical center of the bottom third of the viewport.

e. Some of the slides its hard to read the white year, title, description text over the image. Add a rectangle 30% (% may need to be adjusted based on how it looks) black opacity cell behind these three elements with an adequate margin from the edge.

f. Add the same type of 30% opacity background behind the year timeline at the bottom as well.

g. Fix the yellow line highlights on the bottom year section so that only the currently shown slide is selected in yellow. Currently the first slide behaves correctly, but many of the rest don’t and they show multiple lines in yellow at one time.

h. Add the same scroll down arrow from the previous screens. Again, it scrolls down one viewport size when clicked.

6. SCREEN 5: “The 509 Design Ethos” Section:

a. This page will be more than one viewport in height, which is fine.

b. Add the same scroll down arrow from the previous screens. Again, it scrolls down one viewport size when clicked.

7. SCREEN 6: “The World’s Best Riders” Section:

a. Add the same scroll arrow, but at the top pointing upward and scrolling them up to the top of screen 5. This has a horizontal scroll function and is hard to get scrolled back up the page, so it needs the arrow.

b. Fix the black expand arrow that is in the upper right of each image. Currently its misaligned.

MOBILE

1. All the same features, changes, and additions should be present on mobile as well. I’ll only call out changes that are mobile specific.

2. Fully audit that it translates well from desktop to tablet to mobile

3. SCREEN 2: “We Are” Section:

a. Position the background images so the left rider is in the view port

4. SCREEN 3: Brand Video Section:

a. Ensure the width of the video fits within the viewport and isn’t cropped off.

5. SCREEN 4: Timeline Section:

a. Ensure the fonts scale down and don’t overlap any other element.

Skills: Bootstrap, CSS, HTML, Website Design

See more: templateflip, bootstrap map template free download, free bootstrap 4 templates 2018, video gallery website template free download bootstrap, free multi page website templates bootstrap, bootstrap website, angularjs bootstrap website template free download, flip template, single page templates, single page checkout oscommerce, authorizenet single page, single page application php, best design single page, best single page web designs, audience single page website, single page brochure design price list, creating single page website template, project embedded projects single page, php form single page, create single page web applications php

About the Employer:
( 0 reviews ) Spokane, United States

Project ID: #17712205

Awarded to:

aimych1

Hi sir. I read all points and check your file. I agree with all the points I can do these all easily. I am an expert in hmtl.css.bootstrap.wordpress.php. Please check my previous work. [login to view URL] http:/ More

$200 USD in 2 days
(123 Reviews)
6.4

16 freelancers are bidding on average $188 for this job

AltiuseCreaton

Hello, I can fix your all issues on your Bootstrap page as per your given brief on project post. Let me know when you available to discuss more in detailed. Regards Rina

$272 USD in 7 days
(73 Reviews)
7.2
JamesTechnology

Hello Dear Sir, Hope you are doing good, i just checked your requirement about the Single page Bootstrap 4 to 3.3.7 conversion plus minor layout tweaks. I am really putting my interest to give you a best Site, whic More

$400 USD in 10 days
(193 Reviews)
7.3
ARKSolution2015

Sir, I have gone through your project description and looking to provide my services for the frontend. For more than 7 years I’ve worked in this field. Recent Freelancer projects https://www.freelancer.com/projects More

$200 USD in 5 days
(91 Reviews)
6.2
onewebdigital

Hi there, I have gone through your project description. I can start immediately. I am expert in Front-End development. Let's start. Cheers! - OWD

$100 USD in 1 day
(66 Reviews)
6.1
WebcoderSaurabh

Relevant Skills and Experience ✅ Front-end : ◆ React, Vue 1/2, Angular 1/2/4, React-Native ◆ HTML5, CSS3, Bootstrap, Javascript, JQuery&AJAX ✅ Back-end : ◆ Node, Express, Django, Ruby on Rails ✅Frameworks: More

$155 USD in 3 days
(18 Reviews)
5.9
appnwebsol

Similar work i have done earlier where i have customise the HTML template as per the need and also created the custom admin panel to handle the overall website I have gone read your post and have understood that yo More

$172 USD in 3 days
(25 Reviews)
6.0
jonyahmed105

Hello I want to do it for you. Thanks

$244 USD in 3 days
(121 Reviews)
5.9
aftabyounas

Hey Sir I have read your project description and willing to make your template compatible with the site and yes I will make these tweaks according to your requirements so feel free to contact so I can assist you with t More

$150 USD in 3 days
(31 Reviews)
5.5
techswap20

Hi It will be my pleaseure to work for you. I understand what you need i will convert your expectations into digital form. I need little more details, we can discuss in chat. Please invite me.

$35 USD in 3 days
(113 Reviews)
5.3
rumon078

Hi, I Have experience in Html and CSS, Bootstrap, Clean code, 100% Responsive work. Which I will give you that will look good and most suitable. So I hope that I am perfect for this job. Now I am waiting for y More

$155 USD in 4 days
(62 Reviews)
5.3
archanacodenomad

Hi Dear. Being an experienced Web designer or developer, feel pretty confident to assist for converting a HTML/CSS template and make all the customization according requirements. As i have rich experience in website d More

$200 USD in 5 days
(7 Reviews)
4.0
skSolutionz1

Hello, I have read your project description carefully and I would like to inform you that I have more than 10 years experience working as a Designer, Developer and Search Engine Marketing. I worked with different na More

$250 USD in 3 days
(7 Reviews)
3.9
flintexbusiness

Thanks for posting this job. WE ARE professional freelancer, we have build many website in various platform like word press, php,cake php, Drupal, Magento, CI and many [login to view URL] understand client [login to view URL] are assure you More

$166 USD in 3 days
(10 Reviews)
2.7
pkk9897

i can help u , see my portfolio and i read all your information i can do it easily , message me so we can discuss more

$111 USD in 5 days
(1 Review)
1.0
ziaurr3hman

I have great team for website design and development, I am very excited for the opportunity to work with you in accomplishing your goals. I am Good atBootstrap, CSS, HTML, Website Design. Hitom346! Please Send me a mes More

$200 USD in 5 days
(0 Reviews)
0.0