Following an online course, I created this responsive website from a Photoshop PSD design
This goal of this project was to create a fully responsive website with animations and parallax effects from a static Photoshop PSD image file. I followed a design plan file that laid out colors, font names, and font colors. 12 column responsive layout was achieved with Bootstrap. Respond.js was used to support responsive design in Internet Explorer 8 and below.
Page loader using PACE automatic page loading progress bar
SEE: https://github.hubspot.com/pace/docs/welcome
stellar.js for the Parallax effect
SEE: http://markdalgleish.com/projects/stellar.js
Animate.css for animations
SEE: https://daneden.github.io/animate.css
View Completed Website in a New Tab
Original PSD converted to an image
Page loader, Header, and Slider
On load animated Logo from the left and menu links from the right. Fixed header that changes color on scroll.
Nav links with slow scroll “Transition” to selected section and the background color of the link changes to show selection.
The slider is auto and manual.
Service Section
CSS animations on load. Slide in from the left and fade in. Icons flip on hover.
Our Work – Portfolio Section
CSS animation fade in and carousel appears from the bottom. Hover effect and manual carousel. Parallax image background.
Team Section
CSS animation appears and grows larger. Hover effects: Zoom, dark overlay. Manual carousel.
Testimonial Section
Parallax image background. Auto carousel
Recent Blog Posts
Contact Us
Form fades in and grows larger. PHP and AJAX contact form. Parallax image background.
Footer
Fades in and slide from the left.