Buttons
We took the buttons from Get Shit Done Kit and we used the btn-fill class:
<button class="btn btn-default btn-fill">Default</button> <button class="btn btn-primary btn-fill">Primary</button> <button class="btn btn-info btn-fill">Info</button> <button class="btn btn-success btn-fill">Success</button> <button class="btn btn-warning btn-fill">Warning</button> <button class="btn btn-danger btn-fill">Danger</button> <button class="btn btn-link btn-fill">Link</button>
Images and Video Background
In Coming Sssoon pages you can have a static image or a video as background. For static image you have to change the url of this line. We take care of the other styles and rules:
<div class="main" style="background-image: url('images/default.png')">
For the video background you need 2 video files (.webm and .mp4) and one image that represent the first frame of the video, in our case "video_bg.png". The users need to see something till the video is downloaded from the server. We added external video links, in this way you can simulate the downloading time of the video.
<div class="main" style="background-image: url('images/video_bg.png')"> <video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0"> <source src="http://coming-sssoon.paperplane.io/video/time.webm" type="video/webm"> <source src="http://coming-sssoon.paperplane.io/video/time.mp4" type="video/mp4"> Video not supported </video> <div class="cover black" data-color="black"></div> </div>
Filter Colors
We added some filters with colors, these are the colors: "black", "blue", "green", "red" and "orange".
<div class="cover black" data-color="black"></div>
Dropdown
We are very proud to present the dropdown with languages and the sharing options. The sharing icons are from Font Awesome. Check more here.
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="images/flags/us.png"/>
English(US)
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#"><img src="images/flags/DE.png"/> Deutsch</a></li>
<li><a href="#"><img src="images/flags/GB.png"/> English(UK)</a></li>
<li><a href="#"><img src="images/flags/FR.png"/> Français</a></li>
<li><a href="#"><img src="images/flags/RO.png"/> Română</a></li>
<li><a href="#"><img src="images/flags/IT.png"/> Italiano</a></li>
<li class="divider"></li>
<li><a href="#"><img src="images/flags/ES.png"/> Español <span class="label label-default">soon</span></a></li>
<li><a href="#"><img src="images/flags/BR.png"/> Português <span class="label label-default">soon</span></a></li>
<li><a href="#"><img src="images/flags/JP.png"/> 日本語 <span class="label label-default">soon</span></a></li>
<li><a href="#"><img src="images/flags/TR.png"/> Türkçe <span class="label label-default">soon</span></a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">
<i class="fa fa-facebook-square"></i>
Share
</a>
</li>
<li>
<a href="#">
<i class="fa fa-twitter"></i>
Tweet
</a>
</li>
<li>
<a href="#">
<i class="fa fa-envelope-o"></i>
Email
</a>
</li>
</ul>
Thank you to our friends from Stripe for the flags. They are free for download here