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
stellar.js for the Parallax effect
Animate.css for animations
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.
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.
CSS animation appears and grows larger. Hover effects: Zoom, dark overlay. Manual carousel.
Parallax image background. Auto carousel
Recent Blog Posts
Form fades in and grows larger. PHP and AJAX contact form. Parallax image background.
Fades in and slide from the left.