Coming Sssoon Page - Components

Buttons

We took the buttons from Get Shit Done Kit and we used the btn-fill class:

Default Primary Info Success Warning Danger Link

<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:radial-gradient(ellipse 80% 60% at 18% 8%,#6b4a2f55,transparent 62%),radial-gradient(ellipse 70% 70% at 88% 96%,#1b2b3f66,transparent 58%),repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 2px,transparent 2px 9px),linear-gradient(152deg,#3f6d8f,#6b4a2f 46%,#1b2b3f)">
            

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:radial-gradient(ellipse 80% 60% at 18% 8%,#6b4a2f55,transparent 62%),radial-gradient(ellipse 70% 70% at 88% 96%,#1b2b3f66,transparent 58%),repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 2px,transparent 2px 9px),linear-gradient(152deg,#3f6d8f,#6b4a2f 46%,#1b2b3f)">

        <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