From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.
Today we are very happy to share the coded version of Peter’s last freebie, the “Land.io” UI Kit + Landing Page Design (Sketch) with you. The template and the UI Kit were carefully coded by Taty Grassini.
About the Land.io Website Template
Land.io is a responsive HTML template, with focus on simplicity, performance and usability. Built on top of Bootstrap 4, it was developed using Sass (new Bootstrap standard) and many of its components and utilities.
The new Cards component was of great help for the featured and pricing sections.
The Spacing utility was heavily used in most parts of the markup. In other words, with these and many more new BS4 niceties, you could easily create a decent landing page without writing a single line of custom CSS.
All CSS was written the Bootstrap way, Code Guide by @mdo is a nice read for everyone coding CSS (and HTML), even if you’re not using BS at all. And, for folks who love to go that extra mile, CSSComb is a must for code readability.
For the HTML5 video section, we used the Video JS plugin. Included are two more video options which you can test in the UI Kit page: Vimeo and YouTube embeds in Bootstrap modals with autoplay and pause/stop functions when you close the modal.
Finally, performance basics are covered: unused Bootstrap SCSS/JS is commented out, assets are minified into single CSS and JS files and the images are optimized.
Hope you guys like it! If you find any bugs, please let me know in the GitHub repo.
Credits
The Sketch file
The template was designed by Peter Finlan and you can find all details and information regarding the Sketch file here. Below you can also download it directly.
Live Demo
Check out the live demo of the template: Land.io Live Preview
Don’t forget to check out the demo of the UI elements: Landi.io UI Kit Live Preview
And also the new homepage with a fullscreen slider: Land.io Carousel Live Preview
Edit from Dec 12: Updated to Bootstrap v4.0.0-alpha.2
Download the template for free:
Download the ZIP file and the Sketch design file of the template and UI Kit (see GitHub link below):
The license for Land.io is the Creative Commons Attribution 4.0 International License with the restriction that you can’t redistribute/sell it as-is. Please credit the designer and developer when you base your project on Land.io.
Browser Support:- ChromeSupported
- FirefoxSupported
- Internet ExplorerSupported from version 9+
- SafariSupported
- OperaSupported
We hope you enjoy this freebie and find it useful!
If you’d like to contribute and publish your freebie on Codrops just drop us a line.
If you like Land.io then don’t forget to check out Sedna, Boxify and Halcyon Days, three more responsive and versatile one page website templates for you.
This is good really nice Template.
awesome !
thanks.. 🙂
Wow, it’s awesome!
It’s beautiful, thanks for sharing!
I have a question may somebody answer. How can we jump across section for example to jump of testimonials index.html#testimonials but it is not working. Any idea??
Great template !!! Thank you for sharing !!!
Hi, Codrops! Can i use your PSD template to create a free theme for WordPress (wordpress.org themes directory)?
Thanks!
To my previous message: is it possible to create a free WordPress theme from your HTML template? 🙂
Hi, a really elegant template, simple but complete. Thanks for sharing !!!
Looks amazing. thanks for sharing.
Nice :), Thanks for sharing.
Such a beautiful template, my bro. Thank You!! ^^
How do you edit this bloody thing?
how did you compile your newly created .scss file? do i have to edit my grunt file?
Add Tweet Button to Website
Very nice.
There is an issue when the video piece is commented out or removed. In Chrome console the following appears:
Uncaught TypeError: The element or ID supplied is not valid. (videojs) video.js:64
This error also causes the Back to top ^ not to work.
Beautiful template! Kudos to the designers!
I think you guys should add more elements on this template and more ready-made pages.
I would pay for that without asking looking at the freebie with so much perfection in craft.
Beautiful template 🙂 Gratz
Awesome, but how to add other icons from icomoon ? Thank you.