Amour - Responsive One-Page HTML Theme
Amour
Amour is a beautifully clean and elegant solution to your agency’s image. Easy to customize, you could use it as your own personal portfolio. Pixel perfection is key, and you’ll be happy to know Amour is Retina ready. Designed for every creative type, designers, photographers, producers and more. Amour is provided with two theme variations, Light and Dark. Amour smoothly adjusts itself to screen size, allowing your site to display on all devices.
Main Features
- Clean and Elegant
- Light and Dark theme styling
- Fully Responsive and Retina Ready
- 3 Intro Types; Parallax Background, Parallax Slider and CSS3 Animation
- 100+ Font Icon Set with 3 styling types; Normal, Circled and Diamond
- Parallax Images and Popup Portfolio
- 4 different Portfolio Effects; Fade In, Zoom In, Vertical Spin and Horizontal Spin
- Working Contact Form and Google Maps
- Validated HTML and CSS
- Compatible with Firefox, Chrome, Opera, Safari, IE8, IE9, IE10, IE11
- Favicon, iOS icons and Windows 8 tile icons included
- Template and Icon PSDs included
- Video Documentation
Theme Styling
Intro Styles
Icon Styling
Portfolio Effects
Responsive Design
Designed to be responsive, Amour will fit any size device from smartphones, tablets and desktops. Built on the Skeleton structure while also using media queries allows Amour to size itself intelligently to the screen. Amour smoothly transitions between various sized devices. Scan the code to quickly view Amour on your smartphone or tablet.
Photo Credits and Sources
Note – photographs are not included in template
Purchased:
galdzer – [Coast of the Indian Ocean]
createsima – [Eiffel Tower] and [Top of the rock, New York]
ollyi – [Smiling Group]
solarseven – [Evening Storm]
daveallenphoto – [Blue Ridge Parkway]
Beautiful images by Kevin Roodhorst
Patterns (included in theme):
Patterns 1 to 4 – Downloaded from SubtlePatterns
Patterns 5 to 9 – Self created
Credits and Sources
jQuery and jQuery Easing- Google Maps API
One Page Nav and ScrollTo- jQuery Sticky/Waypoints
- jQuery Placeholder
- Magnific Popup
- StellarJS
- RetinaJS
Modernizr and Selectivizr- Skeleton v1.2
- Fontello
Updates
v1.2 – August 27, 2013
- Added new intro; parallax slider
- Added services icon styles; normal, circled and diamond
- Added portfolio effects; fade, zoom, vertical spin and horizontal spin
- Added scroll to effect for on page buttons/links
- Added support for videos in portfolio
- Added styling for all input fields
- Added 3 more overlay patterns
- Added IE8 Fallback
- Added extras page to showcase typography and styling
- Added retinajs back and added retina css queries
- Updated Font Icon
- Updated jQuery version and added local fallback
- Updated PSD files
- Intro section has been recoded to better suit different intros with one id
- About section has been recoded
- Contact Info sections has been updated and cleaned up
- Stylesheets have been updated to accommodate additions and updates
- *Removed unneeded 'first' and 'last' classes for columns in skeleton.css and in html
- *Removed unneeded 'jquery.scrolling-parallax.js'
- *Removed v1.1's fix for iOS orientation bug and added it to the responsive sizes only
- *Removed jquery.nailthumb.js and added simple css replacement
- *Fixed bug in 'amour.nav.js' that caused template to flicker when scrolling on iPad
v1.1 – July 17, 2013
- Added Timezone function to contact form
- Updated Windows8/IE10 tile icon
- Added new tile icons to support Windows8.1/IE11
- Updated 'skeleton.min.css', 'style.css' and 'theme.animation.css'
- Fixed orientation bug in iOS Safari
- Added video to documentation for v1.1
- *Removed: RetinaJS from amour.plugins.js - Theme is still retina ready.
v1 – July 13, 2013
- Released
Update 1.2 on its way!
ReplyDelete...and it’s here!
ReplyDeleteHi Johnathan,
ReplyDeleteI must say, you have done a great job, I want to buy this theme but the only problem I am facing is that I am not a technical person and this is HTML, can you suggest me some CMS or GUI based thing which can make the editing and adding of logo and other data on this easier for me.
Eagerly waiting for your reply.
Thanks
Thank you for the compliment I am converting this to a WordPress theme which will have back-end functionality for easy customizing. I don’t have an eta at the moment. However I am working to getting this out as soon as possible.
ReplyDeleteHey Jonathan! Wonderful job, man! Keep up the awesome work! I have one quick question though and a need for some help from a expert like you! I was wondering if it would be possible for my to make it so that when you click on one of the images on the portfolio page if it can just link to a larger version of that image rather than showing the caption and the image be centered on the page. So that it’s more of a thumbnail and when you click the image it gives you a full size, centered image without the caption or the box to the right. I’ve tried editing the code and it seems confusing, any tips or advice? Thanks Jonathan!
ReplyDeleteHey ovtliers, I visited your site and took screenshots as an example. You have it set to ‘eight cols’ like it is here http://postimg.org/image/4lggm77pn/
ReplyDeleteFor a full image just switch it from ‘eight cols’ to ‘sixteen cols’ like I have in this screenshot, http://postimg.org/image/vpiihesf5/
Best Regards
You can also remove ‘first’ after ‘cols’ since it’s not needed
ReplyDeleteVery very nice theme but the background of about section doesn’t display on ipad (test on ipad 3 4 and mini , iOS 6.1 and 7).
ReplyDeleteSomeone have the same problem ? I Want buy it but not with this problem.
Sent a reply to your email.
ReplyDeleteHey Jonathan. First of all, it’s a very elegant theme you did.
ReplyDeleteThen, i would be glad to buy it but i need to have some informations from you before :
- Is it possible to create 4 rows instead of 3 in the ‘what we do part’, keeping the all template still resposive ?
- How can easely change the main colors from rose to red ?
- How many different social networks icons are included in the pack ?
Thanks a lot.
Emmanuel.
Hi Emmanuel,
ReplyDelete1: Yes you can easily change from 3 columns to 4 by changing the class from “one-third col” to “four cols” like in the screenshot below. http://postimg.org/image/8dqywxeul/
2: Changing the colors is easy. You can do a search in your text editor and highlight and replace the color’s hex code.
#ff0060 is the ‘rose’ color, there’s other variations such as #990033 that are darker shades.
http://postimg.org/image/n315id2qp/
3: Here are all the icons in the current pack.
http://postimg.org/image/sgixsvy9j/
Very nice! Any plans for Wordpress?
ReplyDeleteDefinitely! I actually have a Wordpress version sitting on my hard drive right now and have been tweaking it in my spare time. I’ll plan on releasing it soon.
ReplyDeleteAwesome! I’ll keep an eye out for it. I love the HTML version but I need CMS for my client. Thanks for your reply Jonathan!
ReplyDeleteknock knock any updates on this?
ReplyDeleteYes indeed! It’s been a busy summer and the WordPress version is completed. Just working out the bugs, finishing the documentation and looking to release it this week!
ReplyDeleteHi Jonathan .. I think it’s a simple but very, very good squad, for the clarity you have in the content. Now .. you consult: it is possible to place a video background in the “Home” ..?
ReplyDeleteI await your response ….
regards
Ray
Sent you an email!
ReplyDeletecool item;
ReplyDeleteThank you!
ReplyDeleteHi Jonathen,
ReplyDeleteFirst off, beautiful work. I am using for a client and they love the movement and clean layout. I have changed it a bit, but the love you put in is still their.
They are asking for a blog addition, but I just don’t have the capabilities to work on this. I know you talked about a CMS version in the works. Do you have a roundabout time as to when that will be?
Much appreciated,
Larry
Expect the WordPress version by the end of this week.
ReplyDeleteHello Johnathan.
ReplyDeleteI just bought your template from my company account, and would like to ask you again about the vimeo video on the home page, is it possible and how to fix it. the images you posted are expired so i cannot see your explanation on how to make it so that the CSS animation is a Vimeo video instead. Thanks again, and awesome template
and how i can make two cols for the team aspect i tried indiv two cols and just two cols. nothing works
ReplyDeletei got the cols working, by making it 8’ cols with 2 and centering the image, but i still cannot figure out how to handle the video instead of the css animation
ReplyDeleteHey Kenny, glad you like the template and happy you figured out the columns.
ReplyDeleteGoing to take some screenshots and post them here in a minute so you can setup a Vimeo video.
Open style.css and on line 125 change min-width to 100%.
ReplyDeletehttp://postimg.org/image/zb7hdj12v/
Open amour.js and on line 55 where document ready starts underneath that add the line in the screenshot.
http://postimg.org/image/6mujaaywn/
Open index.html and remove the background div and on line 58 you can add the overlay if you’d like (keep in mind, with the overlay present you can’t click any video controls that Vimeo embeds into videos). On the next line, paste the iframe from Vimeo.
http://postimg.org/image/gy6w2yqlz/
Hope this helps!
Thank you so much for your answer Jonathan, I’am currently running it locally, and i did everything you told me to, but I’am getting a grey screen with no video, do you have any idea what could cause this?
ReplyDeleteI’am editing your css animated index3 if that helps, but i think not
ReplyDeletei uploaded it and it shows! yay!, but how can i make it play, autoplay? since i can’t press the play button
ReplyDeleteGlad to hear! Next to the embed code on Vimeo there should be a link that says ”+ Show Options”, click that and more options will appear and you can check Autoplay Video, Loop and etc. This will automatically appear into the embed code. Then just copy and paste
ReplyDeleteI made it auto play with http://kennyrehmeier.com/VisualizeU/index3.html check it out
ReplyDeleteand thanks again
ReplyDeleteautoplay=1 made the cut
ReplyDelete