Revised Landing

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

by Koubenec

HTML

<link rel="stylesheet" href="http://www.adrienneadams.org/wp-content/uploads/Scripts/JScss.css" type="text/css">
<link rel="stylesheet" href="http://www.adrienneadams.org/wp-content/uploads/Scripts/JScss2.css" type="text/css">
<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...

CSS

#social {
    position:relative;
    background:#7F540B;
    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;
    color:#8B5E3C;
    cursor: pointer;
}

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

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

#mobile {
    position:relative;
    background:#00FF11;
    width:250px; 
    height: 40px;
    margin-bottom:5px;
    margin-top:5px;
    text-align: center;
    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;
    background-image: url('http://www.adrienneadams.org/wp-content/uploads/images/FB_35px_light.png');
    background-repeat: no-repeat;
    float: left;
}

#tw {
    top: 0px;
    left: 19px;
    width: 35px;
    height: 35px;
    position: relative;
    background-image: url('http://www.adrienneadams.org/wp-content/uploads/images/TW_35px_light.png');
    background-repeat: no-repeat;
    float: left;
}

#in {
    top: 0px;
    left: 38px;
    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": "#0010FF"
        }, 'fast');
    }, function() {
        $(this).stop().animate({
            "backgroundColor": "#0010FF",
            "color": "#fff"
        }, 'fast');   
    });
    $("#whatibelieve").hover(function() {
        $(this).stop().animate({
            "backgroundColor": "#fff",
            "color": "#F100FF"
        }, 'fast');
    }, function() {
        $(this).stop().animate({
            "backgroundColor": "#F100FF",
            "color": "#fff"
        }, 'fast');   
    });
    $("#mobile").hover(function() {
        $(this).stop().animate({
            "backgroundColor": "#fff",
            "color": "#00FF11"
        }, 'fast');
    }, function() {
        $(this).stop().animate({
            "backgroundColor": "#00FF11",
            "color": "#fff"
        }, 'fast');   
    });
});