Freebie: “Land.io” UI Kit + Landing Page Template (HTML)

Land.io is a carefully crafted landing page UI kit and landing page template built on Bootstrap 4, designed by Peter Finlan and developed by Taty Grassini.

Landio800x600

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.

Previous:
Next:

Tagged with:

Front-end developer based in Barcelona, with a passion for Sketch, PSD2HTML and WordPress.

View all contributions by

Website: http://tatygrassini.github.io/

Related Articles

Feedback 17

  1. 4

    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??

  2. 6

    Hi, Codrops! Can i use your PSD template to create a free theme for WordPress (wordpress.org themes directory)?
    Thanks!

  3. 16

    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.

Follow this discussion

Leave a Comment