New Domain Notification Bar

by oduska

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="new-site-notice">
    <p>
        <img src="http://electronicrecyclers.com/assets/img/rn/notice-logo-1800recycling.png" /> <i class="fa fa-long-arrow-right"></i> <img src="http://electronicrecyclers.com/assets/img/rn/notice-logo-recyclenation.png" />
    </p>
    
    <p class="notice-buttons">
        <a href="#" class="learn-more">
            <i class="fa fa-question-circle"></i> Learn More
        </a> 
        <a href="#" class="dismiss">
            <i class="fa fa-times"></i>
        </a>
    </p>
</div>

CSS

/* Default HTML Resets */
body {
    font-family: Verdana;
    padding: 0;
    margin: 0;
    font-size: 1em;
}

/* New Site Notification Bar */

.new-site-notice {
    background: #efefef;
    padding: 0.5em;
    -webkit-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);
    box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);
    border-bottom: 1px solid #fff;
    text-align: center;
    position: relative;
}

.new-site-notice p {
    margin: 0; padding: 0;
    color: #444;
    font-size: 1.2em;
    display: inline-block;
}

.new-site-notice p.notice-buttons {
    margin-left: 1em;
}

.new-site-notice p img {
    vertical-align: middle;
    width: auto;
    max-height: 28px;
    margin: 0 0.5em;
}

.new-site-notice p i {
    font-size: 1.6em;
    vertical-align: middle;
    color: #14a364;
}

.new-site-notice .learn-more {
    text-align: center;
    color: #fff;
    text-decoration: none;
    font-size: 0.725em;
    display: inline-block;
    border-radius: 4px;
    background-color: #337ab7;
    padding: 0.5em 1em;
    vertical-align: middle;
}

.new-site-notice .learn-more i {
    color: #fff;
    font-size: 1em;
}

.new-site-notice .dismiss {
    text-align: center;
    text-decoration: none;
    font-size: 0.625em;
    display: inline-block;
    border-radius: 4px;
    background-color: #ccc;
    padding: 0.5em 0.7em;
    line-height: 1em;
    vertical-align: middle;
}

.new-site-notice .dismiss i {
    color: #aaa;
}