ColorCloud - One-Page Design, 3-Layer Parallax Marketing Theme
Themeforest ColorCloud - One-Page Design, 3-Layer Parallax Marketing Theme
Version 2.0 – Structure refactoring – wow including advanced dev environment with Jade, Gulp, Sourcemaps, Autoprefixer, BrowserSync!
One-Page Bootstrap 3 Design with 3-Level-Deep Parallax BG!
ColorCloud is a colorful, eye-candy one-page HTML5 / CSS3 template built on Bootstrap 3.0 and developed with LESS.
The template features a faux-3D parallax scrolling effect with 3 layers of background images – scroll down the page and watch the clouds move at different speeds!
ColorCloud also offers a nice “tour” section to present your processes.
Please note: images in this preview are not available in the download files.
TEMPLATE FEATURES
- Bootstrap 3 + LESS
- HTML5 + CSS3
- 3-Level-Deep Parallax Background
- One-Page, Smooth Scrolling Layout
- Responsive Design
- AJAX Contact Form
- Glyphicons + Custom IcoMoon Icons
- FlexSlider
- Twitter Widget
CUSTOMER LOVE
ADVANCED FRONT-END DEVELOPMENT ENVIRONMENT
ColorCloud was re-built in October 2015 with modern tooling to help front-end developers enjoy a sleek workflow. Jade partial templates, LESS modules, compiling tasks on save + live reload, multi-device syncing.
Jade templating structure
CREDITS
The following items used in this template deserve credit:
CSS FRAMEWORKS
- Twitter Bootstrap 3 – http://www.getbootstrap.com
- Animate.css by Dan Eden – http://daneden.me/animate/
??
SCRIPTS
- jQuery Library – http://www.jquery.com
- jQuery UI – http://www.jqueryui.com
- FlexSlider – http://www.woothemes.com/flexslider
- jQuery Isotope – http://isotope.metafizzy.co/
- FitVids.js – http://fitvidsjs.com
- jQuery Waypoints – http://imakewebthings.com/jquery-waypoints/
- Respond.js – https://github.com/scottjehl/Respond
- Tweet.js-Mod – https://github.com/StanScates/Tweet.js-Mod
- Baseline.js – http://daneden.me/baseline/
- Ajax Contact Form: Bit Repository – http://www.bitrepository.com/
FONTS
- Roboto Slab – Google WebFont – http://www.google.com/fonts/specimen/Roboto+Slab
- Nunito – Google WebFont – http://www.google.com/fonts/specimen/Nunito
ICONS
- IcoMoon – http://icomoon.com/ (multiple icon fonts)
- FontAwesome – http://fortawesome.github.io/Font-Awesome/ (full collection)
- Glyphicons for Bootstrap – http://glyphicons.getbootstrap.com (full collection)
IMAGES (ONLY AVAILABLE IN PREVIEW – NOT INCLUDED IN DOWNLOADS)
- A big thank you to talented designer / illstrator Ricardo de Zoete for allowing me to use his dribbble shots on this item preview. Make sure you check out his portfolio on graphicriver!
VERSION UPDATE
1.1 – 10 September 2013
Added Pricing Tables!
1.0 – 9th September 2013
Original Version
Hi, in the specs it says this supports IE8. But when I test this on Browserstack.com (which is very reliable when compared to other IE8 testing methods) the layout is thrown out – it just doesn’t seem to work in IE8. This is the same with your preview version and the version I have on my server. Any ideas? Is IE8 struggling to find respond.js for some reason? It looks like it could be related to handling of media queries.
ReplyDeleteIt looks like respond.js is not doing its thing indeed. It was working on first version and looks like something happened. Damn you, IE8!
ReplyDeleteI will investigate the matter and try come up with a solutions.
Sorry for the inconvenience.
Hi Simon, thanks. I really need to go live in the next few days, so hopefully you can find a fix soon. Very odd.
ReplyDeleteHi!
ReplyDeleteThe issue seems to be that the different stylesheets were included using @import, which doesn’t play nice with respond.js in IE8.
Including all style sheets in the HTML head instead – and deleting the @imports at the start of the css file – seems to fix the layout issues.
Let me know if that helps!
Hi Simon, thanks for that! It seems to work. Looks like I also had to move the <script src=”js/respond.min.js”></script> after the CSS in the head (as outlined here: https://github.com/scottjehl/Respond#usage-instructions). There seems to be an issue with the main menu items – in IE8 you can only see half of each menu item. Can you replicate this Simon?
ReplyDeleteMenu displays ok for me on browserstack with the template demo. I will let you know if i find something!
ReplyDeleteHi Simon, I’ve been puzzled when you say the top menu looks fine in IE8. I’ve been testing my own version and just can’t get it to work. I’ve now tested your template demo in browserstack and I get the same result as I’ve been seeing on my version. The bottom part of the menu is hidden. Please can you check again with IE8?
ReplyDeleteI am getting the template reviewed by a IE specialist – an update should be available in a couple of days!
ReplyDeleteGreat thanks Simon,
ReplyDeleteAn update is now available – i have not updated the demo yet but you can get the new download files with optimised IE support!
ReplyDeleteHi Simon, a different issue. I’ve just noticed in Browserstack that the portfolio part of your template is unusable in IE8 – I assume you didn’t know this. Obviously IE8 is still one of the most popular browsers out there so unfortunately the portfolio part of the template isn’t currently working for many people.
ReplyDeleteIt doesn’t solve it, but maybe adding class=”img-responsive” to the images is the right direction to go in?
ReplyDelete