Ads Box with CSS

Ads Box with CSS thesigit.net

by Sigit Yudanto

HTML

<div id='adspost'>
    <div id='adspost-box'>
        <div class='tag1'>Advertise Here</div>
        <div class='tag2'>www.thesigit.net</div><a href="/"><div class='tag3'>Click here</div></a>

    </div>
</div>

CSS

#adspost {
    background:#1abc9c;
    font-family:Roboto;
    margin:0;
    padding:0;
    float:right;
    display:block;
    position:relative;
}
#adspost-box {
    background:linear-gradient(180deg, #34495e, #1abc9c 50%, #1abc9c);
    width:300px;
    height:250px;
    margin:0;
    padding:0;
    text-align:center;
    display:block
}
.tag1 {
    text-transform:uppercase;
    font-size:28px;
    font-weight:600;
    text-shadow:0 2px 1px #5d283a;
    color:#f6f6f6;
    padding:65px 0 0
}
.tag2 {
    font-size:100%;
    color:#fff;
    text-transform:uppercase;
    font-weight:700;
    padding:7px 0;
    text-shadow:0 2px 1px #5d283a
}
.tag3 {
    background:linear-gradient(180deg, #fff, #ddd 50%, #bbb);
    color:#ca3669;
    text-transform:uppercase;
    font-size:22px;
    padding:15px 0;
    text-shadow:0 2px 1px #eee;
    border-radius:4px;
    max-width:75%;
    box-shadow:0 2px 3px #333;
    font-weight:700;
    letter-spacing:2px;
    text-align:center;
    margin:0 auto;
    display:block
}

a:link {
    text-decoration: none;
}