Single page Bootstrap 4 to 3.3.7 conversion plus minor layout tweaks

Imekamilika Ilichapishwa Miaka 5 iliyopita Kulipwa wakati wa kujifungua
Imekamilika Kulipwa wakati wa kujifungua

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.

Bootstrap CSS HTML Kubuni Tovuti

Kitambulisho cha Mradi: #17712205

Kuhusu mradi

16 mapendekezo Mradi wa mbali Ipo mtandaoni %project.latestActivity_relativeTime|badilisha%

Imetuzwa kwa:

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:/ Zaidi

$200 USD kwa siku 2
(Maoni 123)
6.4

16 wafanyakazi huru wanazabuni wastani wa $188 kwa kazi hii

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 kwa siku 7
(Maoni 73)
7.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 kwa siku 1
(Maoni 66)
6.1
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 Zaidi

$200 USD kwa siku 5
(Maoni 91)
6.2
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: Zaidi

$155 USD kwa siku 3
(Maoni 18)
5.9
jonyahmed105

Hello I want to do it for you. Thanks

$244 USD kwa siku 3
(Maoni 121)
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 Zaidi

$150 USD kwa siku 3
(Maoni 31)
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 kwa siku 3
(Maoni 113)
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 Zaidi

$155 USD kwa siku 4
(Maoni 62)
5.3
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 Zaidi

$250 USD kwa siku 3
(Maoni 7)
3.9
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 kwa siku 5
(Maoni 1)
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 Zaidi

$200 USD kwa siku 5
(Maoni 0)
0.0