AradiusGroup teaser

by ashleycam3ron

HTML

<div class="blogSoftDisclaimer"><span class="blogSoftDisclaimerClose">x</span>
	<h3>Coming in early 2016, <a class="minnow" href="#">Minnow Project</a> and <a class="op" href="http://omahaprint.com" target="_blank">Omaha Print</a> will rebrand as one company, <a class="ag" href="http://aradiusgroup.com" target="_blank">Aradius Group</a>.</h3>
<p>Built to meet the demands of modern day marketing head on, Aradius Group will combine the<br/>
	creativity, resilience and culture of Minnow Project, with the loyalty, trust and longevity of Omaha Print</p>
	<h2>to grow and deliver ideas in a way that others can’t.</h2>
	<a class="btn learn">Learn more</a>
	<div class="links">
		<a class="m" href="#">Minnow Project</a>
		<a class="o" href="http://omahaprint.com" target="_blank">Omaha Print</a>
		<a class="a" href="http://aradiusgroup.com" target="_blank">Aradius Group</a>
	</div>
</div>

CSS

/* !AradiusGroup */
.blogSoftDisclaimer *{
	font-family: arial, helvetica, sans-serif !important;
}
.blogSoftDisclaimer {
	position: fixed;
    z-index:99999;
	padding: 25px 20px 25px 5%;
	bottom: -270px;
	display: block;
	width: 90%;
	margin: auto 5%;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
	background:url(image/ag_bg.jpg) no-repeat white left bottom;
	background-size: 80%;
	-webkit-transition: all .6s ease-in-out;
	transition: all .6s ease-in-out;
}
.blogSoftDisclaimer.active {
	position: fixed;
	bottom: 0;
}
.blogSoftDisclaimer .minnow{color: white;background:#5b87da;padding: 3px 2px;}
.blogSoftDisclaimer .op{color: white;background:#cd1141;padding: 3px 2px;}
.blogSoftDisclaimer .ag{color: #ed1c24;}
.blogSoftDisclaimer h3{border: 0;color: #231f20;font-weight: bold;
    font-size: 120%;
    line-height: inherit;
    padding: 0;
    margin: 0 0 4px;}
.blogSoftDisclaimer h2{
	color: #231f20;
	text-transform: none;
    font-size: 155%;
    margin:2px auto 17px;
    font-weight: bolder;
}
.blogSoftDisclaimer p{
	margin-bottom: 3px;
	color: #808285;
    letter-spacing: .02em;
    line-height: 1.4;
}
.blogSoftDisclaimerClose{
	background:url(image/ag_sprite.png) no-repeat right bottom;
	width:25px;
	height:25px;
	float: right;
	text-indent: -999em;
}
.btn.learn{
	background:url(image/ag_sprite.png) no-repeat -261px -189px;
	width:148px;
	height:27px;
	text-indent: -999em;
	display: block;
}
.links{float: right;}
.links .m,
.links .o,
.links .a{background:url(image/ag_sprite.png) no-repeat;text-indent: -999em;display: inline-block;}
.links .m,
.links .o{width:26px;height:26px;margin: 0 6px 0 0;}
.links .m{background-position:0 -185px;}
.links .o{background-position:-38px -185px;}
.links .a{background-position:-74px -185px;width:158px;height:32px;}
@media (max-width: 900px) {
	.blogSoftDisclaimer br {display: none;}
}
@media (max-width: 400px){
	.links { float: none; text-align: center; margin: 20px 0 0; }
	.blogSoftDisclaimer h3 {font-size:...

JavaScript

$(function(){
    /* Soft Prompt Disclaimer */
    $('.blogSoftDisclaimer').addClass('active');
    $('.blogSoftDisclaimerClose').on('click', function() {
        $('.blogSoftDisclaimer').removeClass('active');
    });
});