banner_link_anim_responsive

Basic page layout, exercise for an html email, with a fully responsive container ( no media queries ). Banner style (simple CSS triangles and rectangles) button spanning the page div (w/ nagative L and R margin to go over the page) that will adjust width, and a small CSS3 animation on hover. Banner has a negative margin-bottom on anim - so the p below doesn't move with it b/c of relative positioning. Also some simple JS practice onclick for the banner.

by Nic Fontaine

HTML

<div id="container">
    <div class="text-body">Lorem ipsum dolor sit amet, odio sed massa ligula ante pede etiam. Nunc tortor auctor hendrerit odio, odio volutpat habitant condimentum suspendisse maecenas donec, vel augue. Donec turpis est non ullamcorper dis quisque. Ligula lorem odio in ante lacus rhoncus, cursus blandit dui ligula pellentesque ut facilisis, aenean id eu ultricies mi nisl, ut sed, vel aenean mauris.
    </div>
    <div id="banner-container">
        <a onclick="promptCTA()" href="#">
            <div id="banner-bg"><div id="block-1">Hover Me!</div><div id="triangle"></div><div id="triangle-small-1"></div><div id="triangle-small-2"></div></div>
    </a>
    </div>
    <div class="text-body">Lorem ipsum dolor sit amet, odio sed massa ligula ante pede etiam. Nunc tortor auctor hendrerit odio, odio volutpat habitant condimentum suspendisse maecenas donec, vel augue. Donec turpis est non ullamcorper dis quisque. Ligula lorem odio in ante lacus rhoncus, cursus blandit dui ligula pellentesque ut facilisis, aenean id eu ultricies mi nisl, ut sed, vel aenean mauris.
    </div>
</div>

CSS

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #ddd;
}
#container {
    background-color: #fff;
    left: 30px;
    right: 30px;
    
    top: 0;
    position: absolute;
    min-width: 105px;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    margin: 20px 0;
}
.text-body {
    padding: 30px;
    font-family: helvetica, arial;
    font-weight: normal;
    font-size: 13px;
    color: #999;
}
#banner-container {
    margin: 0 -15px;
    position: relative;
    display: block;
    min-width: 95px;
    vertical-align: top;
}
#banner-container:hover {
    -webkit-animation: bannerAnim 0.4s infinite;
    animation: bannerAnim 0.4s infinite;
}
@-webkit-keyframes bannerAnim {
    0% { transform: translateY(0); }
    50% { transform: translateY(3px); }
    100% { transform: translateY(0) }   
}
#banner-bg {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #4b69a3;
    background: -webkit-linear-gradient(left,#314873,#314873,#4b69a3,#4b69a3);
    box-shadow: 0 3px 12px -2px rgba(0,0,0,0.4); 
}
#triangle {
    width: 0;
    height: 0;
    border-left: 15px solid #6088D6;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    display: inline-block;
    margin: 0;
    margin-bottom: -5px;
    padding: 0;
    border-spacing: 0;
    border-collapse: collapse;
}
#block-1 {
    background-color: #5f86d3;
    background: -webkit-linear-gradient(left,#5476B8,#5476B8,#6088D6);
    display: inline-block;
    margin: 0;
    padding: 10px 10px 10px 10px;
    color: white;
    vertical-align: top;
    font-size: 17px;
    z-index: 2;
    font-family: helvetica, arial;
    text-align: right;
    width: 50%;
    font-style: italic;
    font-weight: bold;
}
#triangle-small-1 {
    width: 0;
    height: 0;
    border-bottom: 10px solid #3e5684;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
   ...

JavaScript

function promptCTA() {
    var list = ["[email protected]", "[email protected]"];
    var myPrompt = prompt("Add your email to the list, and see other subscribers");
    list.push(myPrompt);
    if ( myPrompt.length > 0 ) {
        for ( i = 0; i < list.length; i++ ) {
            var listAlert = "";
            listAlert += list[i] + String.fromCharCode(13);
        }
        alert(listAlert);
    }
}