Revised Landing w/CSS

Rounded box with color animation, READY for addition of logo, social buttons.

by Koubenec

HTML

<script src="http://www.adrienneadams.org/wp-content/uploads/Scripts/jQuery1.7.2.min.js" type="text/javascript"></script><script src="http://www.adrienneadams.org/wp-content/uploads/Scripts/jQueryUI1.8.23.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $(".socicon").hover(function() {
      $(this).stop().animate({opacity: "0.0"}, 'fast');
    },
    function() {
      $(this).stop().animate({opacity: "1"}, 'fast');
    });
  });
</script>
<script type="text/javascript">
$(document).ready(function() {
    $(".corners").hover(function() {
        $(this).stop().animate({
            "backgroundColor": "#8B5E3C",
            "color": "#fff"
        }, 'fast');
    }, function() {
        $(this).stop().animate({
            "backgroundColor": "#fff",
            "color": "#8B5E3C"
        }, 'fast');   
    });
});</script>
<script type="text/javascript">// <![CDATA[
(function ($) {
$.fn.vAlign = function() {
    return this.each(function(i){
    var h = $(this).height();
    var oh = $(this).outerHeight();
    var mt = (h + (oh - h)) / 2;    
    $(this).css("margin-top", "-" + mt + "px");    
    $(this).css("top", "50%");
    $(this).css("position", "absolute");    
    });    
};
})(jQuery);
(function ($) {
$.fn.hAlign = function() {
    return this.each(function(i){
    var w = $(this).width();
    var ow = $(this).outerWidth();    
    var ml = (w + (ow - w)) / 2;    
    $(this).css("margin-left", "-" + ml + "px");
    $(this).css("left", "50%");
    $(this).css("position", "absolute");
    });
};
})(jQuery);
$(document).ready(function() {
    $("#landing").vAlign();
    $("#landing").hAlign();
});
// ]]></script><div class='container';><div class='box'><div id='fb'><img class='socicon' src='http://www.adrienneadams.org/wp-content/uploads/images/FB_35px_dark.png'></div><div id='tw'><img class='socicon' src='http://www.adrienneadams.org/wp-content/uploads/images/TW_35px_dark.png'></div><div...

CSS

#logo {
    background: #2D8E8E;
    width: 250px;
    height: 220px;
    color: #fff;
    margin-bottom: 0px;
    padding-top: 5px;
    letter-spacing: 1px;
}

#social {
    position:relative;
    background:#8B5E3C;
    width:250px; 
    height: 40px;
    margin-bottom:5px;
    margin-top:5px;
    text-align: center;
    color:#fff;
    cursor: pointer;
}

#donate {
    position:relative;
    background:#F26522;
    width:250px; 
    height: 40px;
    margin-bottom:5px;
    margin-top:5px;
    text-align: center;
    font-family: 'serif12_beta_italic';
    font-size: 24px;
    line-height: 40px;
    color:#fff;
    cursor: pointer;
}

#mainsite {
    position:relative;
    background:#2D8E8E;
    width:250px; 
    height: 40px;
    margin-bottom:5px;
    margin-top:5px;
    text-align: center;
    font-family: 'serif12_beta_italic';
    font-size: 24px;
    line-height: 40px;
    color:#fff;
    cursor: pointer;
}

#whatibelieve {
    position:relative;
    background:#E27AC2;
    width:250px; 
    height: 40px;
    margin-bottom:5px;
    margin-top:5px;
    text-align: center;
    font-family: 'serif12_beta_italic';
    font-size: 24px;
    line-height: 40px;
    color:#fff;
    cursor: pointer;
}

#mobile {
    position:relative;
    background:#80AF35;
    width:250px; 
    height: 40px;
    margin-bottom:5px;
    margin-top:5px;
    text-align: center;
    font-family: 'serif12_beta_italic';
    font-size: 24px;
    line-height: 40px;
    color:#fff;
    cursor: pointer;
}

.cornertext {
    font: Times New Roman;
    font-style: italic;
    font-weight: regular;
    font-size: 25px;
    height:50px; 
    position: inherit;
    top:5px;  
    left:0px;    
}

.container {
  height: 35px;
  width: 250px;
  background: #fff;
  margin-top: 0px;
  margin-bottom: 0px;    
  margin-left: auto;
  margin-right: auto;
  padding-top: 10px;
  position: relative;
}

#fb {
    top: 0px;
    left: 0px;
    width: 35px;
    height: 35px;
    position: relative;
   ...

JavaScript

$(document).ready(function() {
    $("#donate").hover(function() {
        $(this).stop().animate({
            "backgroundColor": "#fff",
            "color": "#F26522"
        }, 'fast');
    }, function() {
        $(this).stop().animate({
            "backgroundColor": "#F26522",
            "color": "#fff"
        }, 'fast');   
    });
    $("#mainsite").hover(function() {
        $(this).stop().animate({
            "backgroundColor": "#fff",
            "color": "#2D8E8E"
        }, 'fast');
    }, function() {
        $(this).stop().animate({
            "backgroundColor": "#2D8E8E",
            "color": "#fff"
        }, 'fast');   
    });
    $("#whatibelieve").hover(function() {
        $(this).stop().animate({
            "backgroundColor": "#fff",
            "color": "#E27AC2"
        }, 'fast');
    }, function() {
        $(this).stop().animate({
            "backgroundColor": "#E27AC2",
            "color": "#fff"
        }, 'fast');   
    });
    $("#mobile").hover(function() {
        $(this).stop().animate({
            "backgroundColor": "#fff",
            "color": "#80AF35"
        }, 'fast');
    }, function() {
        $(this).stop().animate({
            "backgroundColor": "#80AF35",
            "color": "#fff"
        }, 'fast');   
    });
});