Trellub Intro

The intro popup for Trellub

by AaronLayton

HTML

<div class="trellub-overlay">
    <div class="trellub-window">
        <a href="#" class="ticon-close js-close-window"></a>
        <div class="text-center">
            Thanks for installing
            <h1>Trellub</h1>
            The easiest way to integrate Trello project<br/>management and Github Issue tracking.
        </div>
        <h2>Nearly there</h2>
        <p>Your nearly ready but first we need to authenticate with both Trello and Github, click on the authorise buttons below and follow the instructions.</p>
        
        <div class="trellub-services clearfix">
            <div class="half text-center">
                <a href="#" class="trellub-button trellub-good-to-go">Good to go</a>
            </div>
            <div class="half text-center">
                <a href="#" class="trellub-button trellub-authenticate">Authenticate</a>
            </div>    
        </div>
    </div>
</div>

CSS

.trellub-button {
    background-color:#9e9e9e;
    border-bottom:1px solid #626262;
    border-radius:2px;
    color:#fff;
    display:inline-block;
    height:25px;
    line-height:25px;
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;
    width:120px;
}
.trellub-button:hover {
    background-color:#8a8a8a;
}
.trellub-good-to-go {
    background-color:#72d666;
    border-bottom-color:#329c29;
}
.trellub-good-to-go:hover { background-color:#6bc961;}

.trellub-authenticate {
    background-color:#dd5151;
    border-bottom-color:#a51d1d;
}
.trellub-authenticate:hover { background-color:#cf4c4c;}

.trellub-services {
    margin:0 auto;
    width:396px;
}
.trellub-services .half { float:left;width:50%; }

.trellub-window {
    background:#fcfcfc;
    border-radius:5px;
    box-sizing:border-box;
    color:#6f6f6f;
    font-family:'Segoe UI', Tahoma, sans-serif;
    font-size:12px;
    left:50%;
    margin-left:-266px;
    padding:30px 30px 110px;
    position:absolute;
    top:50px;
    width:532px;
}
.text-center { text-align:center; }
.trellub-window h1, .trellub-window h2 { color:#212121;font-weight:normal;margin: 30px 0 12px; }
.trellub-window h1 {
    font-size:62px;
    margin: -15px 0 0;
}
.trellub-window h2 {
    font-size:18px;
}

.trellub-overlay {
    background:rgba(0,0,0,.6);
    display:block;
    height:100%;
    left:0;
    position:fixed;
    overflow-y:auto;
    top:0;
    width:100%;
    z-index:100;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: " ";
}

.clearfix:after {
  clear: both;
}