❤️ Creative Tim Club - Access all our Present & Future Premium Products

Rubik Presentation Page

Rubik Presentation Page

Premium One Page Template

· 4.90/5 (132 Reviews)

Premium Bootstrap One Page Template

Product description


Rubik - bootstrap presentation page, is a collection of elements that helps you create a beautiful and stylish presentation page for your company, agency, personal portfolio or startup. It is built on top of twitter Bootstrap and styled to look amazingly beautiful.

If you are looking to create your online presence or just let people know who you are and what you do, this is the tool for you. Downloading the Rubik bundle will get you pre-built examples that you can change and customise to fit your profile.

Stylish components

Every component has been created after researching what makes for a great presentation page. We put time and passion in creating the best possible elements for our users. From layouts to tiny buttons, we wanted everything to look beautiful and consistent with each other.

Multiple Options

The page is broken down into sections and each section has multiple options for implementation. Going throgh every part of the page, you will be able to pick out the elements that you find most useful.

To see all the options and how they look together we have created 4 examples:
  1. Agency - Customize your agency presentation with many combinations! You can see an example of a tailoring group in our live preview.
  2. Company - Create a simple and elegant presentation page for your company or enterprise. Get inspiration for your new brand identity and check out the home building company presenation we have built!
  3. Startup - Present your startup team in an unique and beautiful way. We have created a music example that you can see.
  4. Portfolio - Create a simple and elegant portfolio page for your projects. Check out a photographer's presentation page in our examples!
The Rubik page is what you need to create an awesome presentation page, give it a try!

Info: We do not include any images in the product archive, the images and photos that we use belong to their owners and are just for demo purpose. If you want to use them in your project please contact the authors:


IMPORTANT: This is just an HTML/CSS/JS product, if you want to catch the emails and messages from the contact form you need to include some backend scripts

Product certified by: Creative Tim
Rubik Presentation Page - Fully Coded and Responsive HTML5
Rubik Presentation Page - Crafted with Bootstrap - the most popular Front End Framework
Downloads
959
Version
1.2.3
Changelog
Updated
6 years ago
Released
9 years ago
Reviews
Handcrafted Elements
47
Customized Plugins
5
Example Pages
4
Premium Support
Documentation
Fully Responsive

Trusted by 2,467,066 developers and these companies

Freelancer

Good for a personal or client web/mobile app.

$19

Startup

Build your startup or client web/mobile app.

$49

Company

Perfect for web/mobile apps or SaaS projects.

$149

*one time payment - no hidden fees, no subscription

Creative Tim Club

Lifetime Access to all our Present & Future Premium Products!

$749 $349

Documentation   
Full Code   
Use in SaaS   
Projects    1 1 unlimited unlimited
Team Size    1 up to 5 up to 20 up to 20
Tech Support    support support priority support priority support
Free Updates    6 months 12 months 12 months unlimited

Secured Payment by 2Checkout with:

Info: If you are a Registered Company inside the European Union you will be able to add your VAT ID after your Press "Buy Now"

Frequently asked questions

You can use our products to create an application where the end user is charged with a monthly/annually subscription plan (SaaS - Software as a Service).
The Freelancer license is aimed at people who work on their own. It grants you the right to use the purchased product only for one project (either yours or for a client). This license is not compatible with SaaS-based projects.

The Startup license is aimed at smaller teams. It grants you and your team (up to 5 people) the right to use the purchased product only for one project (either yours or for a client). This license is not compatible with SaaS-based projects.

The Company license is aimed at agencies or larger teams. It grants you the right to create other licensed products base on the template that you purchase form us. This license it's compatible with SaaS-based projects.

The Enterprise license is aimed at large companies with multiple projects. It grants you the right to create any kind of software, SaaS, digital products and sell them. For restrictions, please check here

Also, the differences between our 3 types of Licenses is given by the Tech Support / Free Updates availability and Team Size.

More info here.
The differences between the Free and Pro products consists of the number of components, plugins, sections, pages in each.

More info here.
You can upgrade from one license plan to the next one whenever you want simply by paying the cost difference. You only have to send us an email in which you specify the product that you have and the Order ID. We will give you an unique coupon for the upgrade.

More info here.
Yes, of course! You can use the PRO product for an open source project if you add in the Readme file (on github) or in the description of your product that you built the project using “X product from Creative Tim” and a link to the product page.

More info here.
You don't have any restrictions using the Enterprise License; you just cannot create products or businesses that are in direct competition to us using our products:

  • You can’t re-distribute the Item as stock, in a tool or template, or with source files. You can’t do this with an Item either on its own or bundled with other items. You can’t re-distribute or make available the Item as-is or with superficial modifications. For example: You can’t license an item and then make it available as-is on your website for your users to download.

  • You can’t use the Item in any application allowing an end-user to customize a digital or physical product to their specific needs, such as an “on-demand”, “made to order” or “build it yourself” application. You can use the Item in this way only if you purchase a separate License for each final product incorporating the Item that is created using the application. For example: you can't create a website builder.
Depending on the License you purchase, you can use our products to either code a website/web application for you, for a client, or for multiple clients, which will be hosted on one or multiple domains:

  • For example, if you purchased the Freelancer License or Startup License, you can create only one website (for you or a client). Same, if you have multiple subdomains, like "test.yoursite.com" or "dev.yoursite.com", you can use the Freelancer License or Startup License.

  • If you want to create multiple websites, you will need a bigger License (like Company or Enterprise). Same, if you have a complex application like a SaaS and have "client1.yoursite.com" and "client2.yoursite.com" and "clientx.yoursite.com", you will need a multi-domain License like Company or Enterprise.
Depending on the License type you purchased, one or more developers (from your team, for example) can access the product:

  • If you purchased the Freelancer License, only you (one developer) can use the product.

  • If you purchased the Startup License, up to 5 developers (including you) can use the product.

  • If you purchased the Company License, up to 20 developers (including you) can access the product.

  • If you purchased the Enterprise License, you can work with a bigger team - more than 20 developers can access the product.
Here are the steps to give product access to your team members.
It consists of the product technical manuals like getting started, build tools, and it also describes every component with code examples.
It means that you receive access to the entire code for HTML, JS, and SCSS files depending on the different packages of each product.
When you buy our products you have access to our Support Team so you can submit any ticket to us regarding product functionalities and bug fixes (learning and tutorials related requests are not included). You will get responses directly from the product’s creators in 24 hours for regular Support and in a couple of hours for Priority Support (during business days).
Depending on your license type, you have a determined period when you receive product updates that include bug fixes and new features.

More info here.
Please send us an email at [email protected]. We will send you an upgrade coupon for your desired Bundle, and you will only pay the price difference.
Yes, you can. It is available for all Licenses type as long as the support included in the License is still valid.

More info here.

We are here to help you!

51 Web Developers commented on this product

chompusudarat
  • downloaded
7 years ago

@axelut thank you for your reply. I change the javascript to this one "https://maps.googleapis.com/maps/api/js" already same like it not work fine. in the beginning it was working but after load page complete then it doesn't work again. and also if I just push F12 on my laptop to run it. same like it work fine but if I upload and run them on server it not working :(

alexpaduraru
  • owner

@chompusudarat sorry to hear that you still have the issue. That is very weird, it is working on the local computer but not on the server. Our website's presentation page is built with Rubik and is hosted on Heroku: http://presentation.creative-tim.com/ and we have a map in the page and everything is working fine there. Maybe on your server they require and explicit key... can you please follow Google's Steps on how to get a key and add in in your google.maps link like in this tutorial: https://developers.google.com/maps/documentation/javascript/get-api-key Please let us know your progress. Best, Alex!
7 years ago

juliyvchirkov
  • downloaded

@chompusudarat @axelut sorry for bothering, but maybe my advice will help somehow as far as I remember, google is cancelling free uncontrolled use of gapi related services bit by bit, the new way of dealing w/ gapi has been officially announced by google 2+ years ago thus nowadays the one & only way to get google api related services working for your projects (sites) w/o failures is to use google developers console to create & manage personal workspace for each project, 'cause you gotta request & setup own personal key (or keys if needed, that's for you to decide) to get gapi working properly I guess the fountainhead of your troubles w/ google.maps api can be key mismatch — if you're using the code of «rubik» as is w/o modifications, you're using gapi related stuff w/ the key which belongs to creative-tim team, & thus a hundred to one this key is limited to the bunch of creative-tim team projects (sites, domains) so to get rid of failures w/ gapi you gotta register / login at https://console.developers.google.com/apis/, create new project for your site where you're going to place the map, choose from the list & connect to your project apis which you're planning to use (screenshot https://goo.gl/SLBtEk), request / generate one or a couple of keys for your needs, & replace the key of creative-tim team w/ your own in the code of rubik «a couple» since you can use gapi inside your project in many ways w/ different keys: first can be for use w/ javascript api, i.e. key visible to every visitor in code of your pages in public, next for use only inside php scripts on server-side, i.e. unreachable for everyone but you, third can have limited use only within android or ios mobile apps, et cetera & since these keys are smth like your ID for gapi services, for sure you'll want to protect your «public» keys by limiting the possible points of their use w/ list of your domains for security reasons (for example, to be sure nobody uses your key to connect gapi on some fishing site, or just to know nobody spends your traffic et cetera) — 'cause since google treats your key as your ID, any requests & operations made from any server on internet w/ your «public» unprotected key will be logged to your history & your responsibility despite my review of the flow may seem a bit bulky, in fact in google developers console everything is extremely simple & it takes no time to setup that shit for example, I'm using gmaps js api, roads api, static maps api, street view api, street view image api, embed api, geocoding api, places api, directions api & distance matrix api w/ client-side javascript & server-side php requests for one of our projects just to supply the customers w/ a couple of maps to direct them to offline shops & showrooms (despite that galore gapi stuff may seem excessive indeed it's used to make the routine sheen & accessible on any device w/ any hardware & os, both mobile & desktop, light & static on low bandwidth, powerful & interactive otherwise, et cetera) — but syne google for developers provides nice & clear detailed man w/ live examples for every gapi, it almost took for me no time to integrate the whole bunch hope this helps, & you'll also setup your own gapi instance quickly and easily yup, the whole gapi service is still free of charge w/ really great terms — if your project is not geostartup like 4square you'll never need to pay no cent since you'll never get over the limits
7 years ago

juliyvchirkov
  • downloaded

@chompusudarat @alexpaduraru sorry for bothering, but hope my advice will help somehow. as far as I remember, google is cancelling free uncontrolled use of gapi related services bit by bit; the new way of dealing w/ gapi has been officially announced by google 2+ years ago, thus nowadays the one & only way to get google api related services working for your projects (sites) w/o failures is to use google developers console to create & manage personal workspace for each project, 'cause you gotta request & setup own personal key (or keys if needed, that's for you to decide) to get gapi working properly. I guess the fountainhead of your troubles w/ google.maps api can be key mismatch — if you're using the code of «rubik» as is w/o modifications, you're using gapi related stuff w/ the key which belongs to creative-tim team, & thus a hundred to one this key is limited to the bunch of creative-tim team projects (sites, domains). so to get rid of failures w/ gapi you gotta register / login at https://console.developers.google.com/apis/, create new project for your site where you're going to place the map, choose from the list & connect to your project apis which you're planning to use (screenshot https://goo.gl/SLBtEk), request / generate one or a couple of keys for your needs, & replace the key of creative-tim team w/ your own in the code of «rubik». I say «a couple» since you can use gapi inside your project in many ways w/ different keys: first can be used w/ javascript api, i.e. this key will visible to every visitor in code of your pages in public, next — for use only inside php scripts on server-side, i.e. unreachable for everyone but you, third can have limited use only within android or ios mobile apps, et cetera. & since these keys are smth like your ID for gapi services, for sure you'll want to protect your «public» keys by limiting the possible points of their use w/ list of your domains for security reasons (for example, to be sure nobody uses your key to connect gapi w/ some fishing site, or just to know nobody spends your traffic et cetera) — 'cause syne google treats your key as your ID, any requests & operations made from any server on internet w/ your «public» unprotected key will be logged to your history & improper use will be your responsibility. despite my review of the flow may seem a bit bulky, in fact in google developers console everything is extremely simple & it takes no time to setup that shit. for example, I'm using gmaps javascript api, roads api, static maps api, street view api, street view image api, embed api, geocoding api, places api, directions api & distance matrix api w/ 2 different keys for client-side javascript & server-side php requests for one of our projects just to supply the customers w/ a couple of maps to direct them to offline shops & showrooms (despite that galore gapi stuff may seem excessive indeed it's used to make the routine sheen & accessible on any device w/ any hardware & os, both mobile & desktop, light & static on low bandwidth, powerful & interactive otherwise, et cetera) — but syne google for developers provides nice & clear detailed man w/ live examples for every gapi, it almost took for me no time to integrate the whole bunch. hope this helps, & you'll also setup your own gapi instance quickly and easily. yup, the whole gapi service is still free of charge w/ really great terms — if your project is not geostartup like 4square you'll never need to pay no cent since you'll never get over the limits ———————————————————————— small postscriptum for Alex: have been forced to repost this comment anew 'cause all line breaks have been gone after posting, turning my comment into hard-to-read-sheet. smth like comment.replace(/\n/g, '<br>') w/ js before submitting the form or comment.gsub(/\n/, '<br>') w/ ruby on server-side after submit could make the things look much better. lack of line breaks turns phrases into the swamp. drain the swamp! 😸
7 years ago

alexpaduraru
  • owner

@juliyvchirkov thank you very much for the detailed explanation. It makes sense that Google want to remove the access from not controlled sources. We will get the API keys to use inside our products and for the users who are downloading the product we will add something like "?key=[your-generated-api-key]" and a tutorial with the steps that they need to take to generate the key as you described. For our comment system, yes it is very basic... we will add something that will get Markdown as input so everything will be formatted right + having working links, code blocks etc. If you know anything for Rails, which also works with our current username attribute "@somebody", we would be very happy to check it. Best, Alex!
7 years ago

chompusudarat
  • downloaded
7 years ago

@axelut Thank again for your reply, I got it now. I follow Google's Steps and then it work Thank you for your help :)

alexpaduraru
  • owner

@chompusudarat that's great! Please let us know if we can help you with anything else. Best, Alex!
7 years ago

chompusudarat
  • downloaded
7 years ago

@axelut Yeah, But can you pls give me an advice about how do I can get my location on map. Which API that you generate? Do I need to change some link for add my location instead location now that is already on the theme. I try to change it by change the link for google maps but it so many link even I change them all it still show the theme location :( Thank again :)

alexpaduraru
  • owner

@chompusudarat glad that it was working. To add your own coordinates please go to assets/js/rubick.js around line 387 you will see this function: initGoogleMaps and there you can set the Lat Long for your location. Best, Alex!
7 years ago

lpfy
  • downloaded
7 years ago

Small glitch when using video as background, the responsive-src attr should place in video tag rather than in source tag. The responsive image background won't show up when screen resized <992px, everything become fine once I moved responsive-src attr from source tag to video tag.

alexpaduraru
  • owner

@lpfy thank you for using our product and for the information. You're right, there is an issue with responsive-src, we added this on our updates list, we will test the solution that you proposed on multiple devices, and if it is working fine we will add it in the official archive. Please let us know if we can help you with anything else. Best, Alex!
7 years ago

jgregmcverry
  • downloaded
7 years ago

@axelut. Great theme. I used your hover cards for another project and then saw you article on Medium and nknew this was a team I must support. I am using a rubik theme here: productsandservices.revisiononlinelearning.com And I am having a few issues with the header: images and buttons: Specifically I can not get them to display consistently well on mobile. For the buttons I created my own class as I could not style them otherwise. I could not even get inline styling to work. The buttons are pushing to the right of mobile display I have tried numerous small and extra small column contributions and can't get them to behave as I would expect in bootstrap. For the image I would like to display the logo centered in the header. Any tips you or the community could provide will be great.

alexpaduraru
  • owner

@jgregmcverry thank you for using our products. Glad that you like the article from Medium :D I've checked the page that you've send. Unfortunately I don't see any buttons in the header. Did you change something in the meantime? Also, which logo are you looking to make centered? Best, Alex!
7 years ago

jgregmcverry
  • downloaded
7 years ago

Read through the CSS. Solved most of my own issues. Wish I could delete comments I posted bc things work great. Thanks for your help. @alexlut

alexpaduraru
  • owner

@jgregmcverry got it. Glad that it is working fine. I will do that for you :D Best, Alex!
7 years ago

matrfb 6 years ago

I would like to embed two separate maps in my Rubik page (with details of two different locations). How do I do this?

alexpaduraru
  • owner

@matrfb thank you for your interest in our product. You just duplicate the code that is for 1 map. If you search in startup.html the id "contactUsMap" you will find the area with the map and the Javascript for that is on rubick.js line 83 and line 387 where is called the method: initGoogleMaps. Please let us know if this was helping you. Best, Alex!
6 years ago

matrfb 6 years ago

Also, can you send me the plugin that makes the contact form work? Thank you!

alexpaduraru
  • owner

@matrfb please check this tutorial: https://bootstrapbay.com/blog/working-bootstrap-contact-form/ and let us know how it was working. Best, Alex!
6 years ago

cahill
  • downloaded
6 years ago

Hello! This is the first time I think of getting a paid template. Rubik just left me in love! What most caught my attention was the part of "Our Projects." It looks unique and is perfect for the website style I plan to put together! I have some doubts to take, both because I have been searching for templates on your and other websites for quite some time and also 'cause I'm a little newbie on this subject (it will also be the first time I will pay for a hosting service; before I just used Blogger/Wordpress and bought the domain). I hope you do not mind answering. (: > Does Rubik works for Wordpress? I need this information to be able to buy my hosting service (there is the customized hosting for WP). > Does the language change plugin works/exists for Rubik? It is crucial to my site! > If it does not exist, what templates have it? > Other templates have the "Projects" component I pointed out, in the way it works for Rubik? Or is it Rubik's exclusive? To be honest, it is my main reason to choose it (besides the price; I'm Brazilian, and the dollar here is quite expensive). > I watched the video and was able to understand how the Builder works, but despite having a little knowledge on coding (years editing HTML on blogger), things seem a bit hazy for me yet. How exactly would you edit the template, applying images and changing the text? If it accepts WP, would it be through it? By the cPainel? Is it only through the generated code itself? Do I need to download something? Bootstrap? RVsitebuilder? (If it's just the code, fine, I think I can do it). Thank you for your attention :D

alexpaduraru
  • owner

@cahill thank you for your interest in our product. Unfortunately, Rubik is not working on Wordpress. If you want to make it compatible with Wordpress you need to manually move all the elements, html, css, js on a Wordpress template. Rubik is just a regular simple HTML template, with CSS and JS. If you want to change images/text you have to go into the actual code and manually change that. You need knowledge of HTML/CSS and Bootstrap in order to work with our products. The projects section was built just for Rubik, if you want to move that to other products or from other products that we have, you need to manually dig into the code and move those parts. Hope this information helps you. I've added the product to your account just to check it and see if you can work with it. If you can work and it's easy for you to change things then you can purchase a license, otherwise, if it is hard to work just let us know and we will remove the license. We want to know if this is good for you or maybe a Wordpress theme from a different provider would fit better. Best, Alex!
6 years ago

cahill
  • downloaded

@axelut, hello! I know it has been several months, but I'm now 100% right of my choice. I had the best experience possible while testing Rubik. I'll be making the purchase until the weekend :) There's just one detail I was not able to understand how to change/solve. Since I'll have to show screenshots of it, and my website is (obviously) not online yet, may we talk through e-mail?
6 years ago

alexpaduraru
  • owner

@cahill yes, please contact at [email protected] and we will come there with a response. Best, Alex!
6 years ago

mikuno 6 years ago

Hello, I love Rubik he is really good, but I have a problem. The section header has a parallax effect, but I want to know if it's possible to create an another parallax effect to a carousel just below the section header. I have added a carousel just below and I have created a section body and I've copied the same properties in css... but nothing I don't know how I can add the same effect. Thank you :)

alexpaduraru
  • owner

@mikuno thank you for using our product. Unfortunately, creating a Parallax effect over a carousel is very hard because there is the Carousel library from Bootstrap, which has some properties like "transform" for images, in order to be moved from left to right. Adding a parallax using the same "transform" properties, will basically block the transform from the original product and you either have a working parallax with a broken carousel or a broken parallax with a working carousel. Can you please send us a link to your website? Maybe we will have other ideas which can help. Best, Alex!
6 years ago

You have to be logged in to post a comment. Login here.