Prohibida la copia de esta web o de sus subpaginas en otro sitio.Licencia Creative Commons y Copyright. Disponemos de herramientas antiplagio

codigos jquery

.

Barra Superior a color con movimiento“Cargando Página”

en head

 

 

 

<style type="text/css">
#barraCargando{
z-index:99;
position:fixed;
top:0px; left:0px;
width:100%;
/*height:34px;*/
background-color: rgba(25, 38, 112, 0.804);
text-align:center;
padding:12px 0px;
}
#barraCargando:hover{
background-color: rgba(25, 38, 112, 1);
}
</style>

en htm

 

 

 

<div id="barraCargando">
Cargando Contenido
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script><script type="text/javascript">
//<![CDATA[
$(function(){
var barraCargando=$('#barraCargando');
barraCargando.animate({'opacity':0},900,function(){$(this).css('display','none'); });
});
//]]>
</script>

Panel con efecto Zoom en las imagenes

en head

 

 

 

<script src=" http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#container img').hover(
function(){
var $this = $(this);
$this.stop().animate({'opacity':'1.0','height':'200px','top':'0px','left':'0px'});
},
function(){
var $this = $(this);
$this.stop().animate({'opacity':'0.5','height':'500px','top':'-66.5px','left':'-150px'});
}
);
});
</script>


<style>
.containerr{
width:600px;
height:400px;
margin:100px auto 0px auto;
border:10px solid #333;
-moz-box-shadow:1px 1px 12px #000;
-webkit-box-shadow:1px 1px 12px #000;
box-shadow:1px 1px 12px #000;
}

.wrap{
border:2px solid #000000;
width:196px;
height:196px;
margin:0px;
overflow:hidden;
position:relative;
float:left;
}
.wrap a img {
position:absolute;
top:-66.5px;
left:-150px;
height:500px;
opacity: 0.5;
-moz-opacity: 0.5;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}
</style>

en htm

 

 

 

<div id="container" class="containerr"><div class="wrap"><a href="URL ENLACE"><img src="URL IMAGEN" alt="Picture 1"/></a></div><div class="wrap"><a href="URL ENLACE"><img src="URL IMAGEN" alt="Picture 2"/></a></div><div class="wrap"><a href="URL ENLACE"><img src="URL IMAGEN" alt="Picture 3"/></a></div><div class="wrap"><a href="URL ENLACE"><img src="URL IMAGEN" alt="Picture 4"/></a></div><div class="wrap"><a href="URL ENLACE"><img src="URL IMAGEN" alt="Picture 5"/></a></div><div class="wrap"><a href="URL ENLACE"><img src="URL IMAGEN" alt="Picture 6"/></a></div></div>

Iconos sociales efecto fade

en head

 

 

 

<script src=" http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#iconoshoverfade a').hover(function() {
$('#iconoshoverfade a img').not($('img', this)).stop().fadeTo(250, '0.1');
}, function() {
$('#iconoshoverfade a img').stop().fadeTo(250, '1.0');
});
});
</script>

<style>
#iconoshoverfade {float:center;margin: 0 auto;}
#iconoshoverfade ul li {list-style-type: none;float:left;margin-left:5px;:}
#iconoshoverfade ul li:hover{-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;}
</style>

en htm

 

 

 

<div id="iconoshoverfade"><ul><li><a href="TU DIRECCION DE FACEBOOK" target="_blank"> <img src="https://lh4.googleusercontent.com/-a45c5rF9hDs/UIRoZPqv3NI/AAAAAAAAHEI/FNAShhQh5z8/s256/facebook.png" title="Sigueme en Facebook" height="100" width="100"/></a></li><li><a href="TU DIRECCION DE GOOGLE PLUS" target="_blank"><img src="https://lh5.googleusercontent.com/-0jef6CIDHgc/UIRoZMXcS7I/AAAAAAAAHEQ/_7Xwe796DsU/s256/googleplus.png" height="100" width="100" title="añademe a Google+"/></a></li><li> <a href="TU DIRECCION DE TWITTER" target="_blank"><img src="https://lh6.googleusercontent.com/-pUplLLQfcdI/UIRoaOcplUI/AAAAAAAAHEU/025kxec-Fbg/s256/twitter.png" title="Sigueme en Twitter" height="100" width="100"/></a></li><li><a href="LA DIRECCION DE TU FEED RSS" target="_blank"><img src="https://lh3.googleusercontent.com/-1VaXldF3Nus/UIRoZRqBaQI/AAAAAAAAHEM/z4dkBy3M0lM/s256/rss.png" title="Suscribete" height="100" width="100"/></a></li>
<li> <a href="TU DIRECCION DE YOUTUBE" target="_blank"><img src="https://lh5.googleusercontent.com/-LFJOzbvIGe0/UIRoaOl42PI/AAAAAAAAHEY/RXL5lb8qumM/s256/youtube.png" title="Suscribete en YouTube" height="100" width="100"/></a></li></ul></div>

Iconos que saltan

en head

 

 

 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script><script type="text/javascript">
var opacity = true;
</script><script type="text/javascript">
$(document).ready(function(){
$("#icons img").hover(function(){
if(opacity)
{
$(this).stop().animate({opacity: 0.75, marginTop: -10}, 400);
} else {
$(this).stop().animate({marginTop: -10}, 400);
}
},function(){
if(opacity)
{
$(this).stop().animate({opacity: 1.0, marginTop: 0}, 400);
} else {
$(this).stop().animate({marginTop: 0}, 400);
}
});
});
</script>


<style type="text/css">
#demobar{
background: #b8a898;
background: #b8a898
-moz-linear-gradient(top, #b8a898 0%, #9d8771 100%) repeat-x;
background: #b8a898
-webkit-gradient(linear, 0 0, 0 46, color-stop(0.0, #b8a898),
color-stop(1.0, #9d8771)) repeat-x;
border-bottom: 2px solid #000;
padding: 5px 2px;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
z-index: 100;
_display: none;
*display: none;
}
#demobar span
{
background: #a3af7c;
background: #a3af7c
-moz-linear-gradient(top, #a3af7c 0%, #748950 100%)
repeat-x;
background: #a3af7c
-webkit-gradient(linear, 0 0, 0 40, color-stop(0.0, #a3af7c),
color-stop(1.0, #748950)) repeat-x;
border: 1px solid #777;
border-radius: 7px;
-o-border-radius: 7px;
-icab-border-radius: 7px;
-khtml-border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
color: #fafafa;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
line-height: 36px;
margin: 5px;
padding: 10px;
text-shadow: -1px -1px 1px #777;
width: 100px;
}
#demobar span:hover{border: 1px solid #666;color: #fff;text-shadow: -1px -1px 3px #444;}
#demobar img{cursor: pointer;float: right;margin: 3px 15px 0px 0px;}
#icons{list-style-type: none;margin: 0px;padding: 0px;overflow: auto;}
#icons li{float: left;height: 100px;padding: 10px 0px 0px 0px;}
#icons li img{display: block;border: 0px;}
</style>

en htm

 

 

 

<ul id="icons">
<li><a href="ENLACE"><img src="URL DE LA IMAGEN"/></a>
<li><a href="ENLACE"><img src="URL DE LA IMAGEN"/></a>
<li><a href="ENLACE"><img src="URL DE LA IMAGEN"/></a>
<li><a href="ENLACE"><img src="URL DE LA IMAGEN"/></a>
<li><a href="ENLACE"><img src="URL DE LA IMAGEN"/></a>
</li></ul>

Boton jQuery con tooltip animado

en head

 

 

 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">//<![CDATA[$(document).ready(function(){
$(".botonesjquery a").append("<em><\/em>");
$(".botonesjquery a").hover(function() { $(this).find("em").animate({opacity: "show", top: "-75"}, "slow"); var hoverText = $(this).attr("title"); $(this).find("em").text(hoverText); }, function() { $(this).find("em").animate({opacity: "hide", top: "-85"}, "fast"); });

});//]]></script>
<style type="text/css">/*<![CDATA[*/.botonesjquery { margin: 10px 0 0; padding: 0; list-style: none;}.botonesjquery li { padding: 0; margin: 0 2px; float: left; position: relative; text-align: center;}.botonesjquery a { padding: 14px 10px; display: block; color: #000000 !important; width: 144px; text-decoration: none; font-weight: bold; background: url(https://lh5.googleusercontent.com/-VOMn204lYIw/UG8N-a0MPBI/AAAAAAAAGmI/9REd6JoQGJ4/s164/boton%2520jquery%2520-%2520DAC.gif) no-repeat center center;}.botonesjquery li em { font-weight: normal; background: url(https://lh3.googleusercontent.com/-_fan25zl2j0/UG8N-ZHqrrI/AAAAAAAAGmM/lJsUu3CPmYA/s200/boton%2520jquery%2520hover%2520-%2520DAC.png) no-repeat; width: 180px; height: 45px; position: absolute; top: -85px; left: -15px; text-align: center; padding: 20px 12px 10px; font-style: normal; z-index: 2; display: none;}/*]]>*/</style>

en htm

 

 

 

<ul class="botonesjquery"><li><a href="URL o link" title="TEXTO TOOLTIP">TEXTO BOTON</a></li></ul>

agregar tooltip Estilo Facebook

en head

 

 

 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

<script type="text/javascript" src="http://espacioforos.miarroba.st/1983340/tipsy/tipsy.js">
</script>

<script type="text/javascript">
//<![CDATA[
var j = jQuery.noConflict();
j(function() {
j("[title]").tipsy({fade: true, gravity: j.fn.tipsy.autoNS});
});
//]]>
</script>
<link href="http://espacioforos.miarroba.st/1983340/tipsy/tipsy.css" rel="stylesheet" type="text/css" />

imagenes amontonadas

en head

 

 

 

<script>
(function() {

var queue = false,
touch = 'ontouchstart' in document.documentElement ? true : false,
images = document.querySelector('.images'),
imageWidth = images.firstElementChild.offsetWidth,
imageOffset = images.firstElementChild.offsetLeft,
cssTransition = function () {
var body = document.body || document.documentElement,
style = body.style,
property = 'Transition',
vendors = ['Moz', 'Webkit', 'O', 'ms'],
vendorCount = vendors.length;

if (typeof style[property.toLowerCase()] === 'string') {
return true;
}

do {
if (typeof style[vendors[vendorCount] + property] === 'string') {
return true;
}
} while (vendorCount--);

return false;
},
timeout = cssTransition() ? [300, 400] : [0, 0];

images.addEventListener(touch ? 'touchend' : 'click', function (event) {
if (!queue) {
queue = true;

var direction = ((touch ? event.changedTouches[0].pageX : event.pageX) - imageOffset) > imageWidth / 2 ? 'slide-right' : 'slide-left',
last = images.lastElementChild.classList;

last.add(direction);

setTimeout(function () {
last.remove(direction);
last.add('back');

setTimeout(function () {
images.insertBefore(images.lastElementChild, images.firstElementChild);
last.remove('back');
queue = false;
}, timeout[0]);
}, timeout[1]);
}
}, false);

})();
</script>


<style>
.images {
cursor: pointer;position:relative;
}
.images:hover .image:nth-child(4) {
-webkit-transform: rotate(10deg) translateX(50px);
-moz-transform: rotate(10deg) translateX(50px);
-ms-transform: rotate(10deg) translateX(50px);
-o-transform: rotate(10deg) translateX(50px);
transform: rotate(10deg) translateX(50px);
}
.images:hover .image:nth-child(3) {
-webkit-transform: rotate(3deg) translateX(75px);
-moz-transform: rotate(3deg) translateX(75px);
-ms-transform: rotate(3deg) translateX(75px);
-o-transform: rotate(3deg) translateX(75px);
transform: rotate(3deg) translateX(75px);
}
.images:hover .image:nth-child(2) {
-webkit-transform: rotate(-2deg) translateX(-50px);
-moz-transform: rotate(-2deg) translateX(-50px);
-ms-transform: rotate(-2deg) translateX(-50px);
-o-transform: rotate(-2deg) translateX(-50px);
transform: rotate(-2deg) translateX(-50px);
}
.images:hover .image:first-child {
-webkit-transform: rotate(-8deg) translateX(-75px) translateY(-10px);
-moz-transform: rotate(-8deg) translateX(-75px) translateY(-10px);
-ms-transform: rotate(-8deg) translateX(-75px) translateY(-10px);
-o-transform: rotate(-8deg) translateX(-75px) translateY(-10px);
transform: rotate(-8deg) translateX(-75px) translateY(-10px);
}

.image {
position: absolute;
top: 50%;
left: 50%;
height: 250px;
width: 300px;
margin-top: -110px;
margin-left: -105px;
border: 5px solid #fff;
border-bottom-width: 15px;
-webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
z-index: 2;
-webkit-transition: -webkit-transform 0.3s ease-in-out;
-moz-transition: -moz-transform 0.3s ease-in-out;
-o-transition: -o-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
}
.image:first-child {
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-ms-transform: rotate(8deg);
-o-transform: rotate(8deg);
transform: rotate(8deg);
}
.image:nth-child(2) {
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-ms-transform: rotate(2deg);
-o-transform: rotate(2deg);
transform: rotate(2deg);
}
.image:nth-child(3) {
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.image:nth-child(4) {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.image:last-child {
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
transform: rotate(-5deg);
}
.image.slide-right {
-webkit-transform: rotate(290deg) translateX(250px);
-moz-transform: rotate(290deg) translateX(250px);
-ms-transform: rotate(290deg) translateX(250px);
-o-transform: rotate(290deg) translateX(250px);
transform: rotate(290deg) translateX(250px);
}
.image.slide-left {
-webkit-transform: rotate(-290deg) translateX(-250px);
-moz-transform: rotate(-290deg) translateX(-250px);
-ms-transform: rotate(-290deg) translateX(-250px);
-o-transform: rotate(-290deg) translateX(-250px);
transform: rotate(-290deg) translateX(-250px);
}
.image.back {
z-index: 1;
}
</style>

en htm

 

 

 

<div class="images">
<img class="image" src="URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
<img class="image" src="URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
<img class="image" src="URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
<img class="image" src="URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
<img class="image" src="URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
<img class="image" src="URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
<img class="image" src="URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
<img class="image" src="URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
</div>

Flux Slider con muchos efectos

en head

 

 

 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/></script>
<script src='http://baliwebdesign.googlecode.com/files/flux.min.js' type='text/javascript'/></script>
<script src='http://baliwebdesign.googlecode.com/files/flux.main.js' type='text/javascript'/></script>

<style>
#slider {
padding:5px;
margin: 0 auto 15px;
}
#slider > .fluxslider {
margin: 0 auto !important;
border: 3px solid #999;
background: #C9C9C9;
padding: 0 0 10px 0;
max-width: 99% !important;
overflow: hidden
}
#slider .pagination {
list-style:none outside none;
padding:5px !important;
}
#slider .pagination li.current {
background-color: dimGray
}

#slider .pagination li {
cursor: pointer;
display: inline-block;
margin-left: 0;
background-color: silver;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
height: 8px;
text-indent: -10000px;
width: 8px;
-moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.31);
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.31);
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.31)
}
#transitions {
overflow:hidden;
}
#transitions ul {
float:left;
list-style:none outside none;
padding:0;
width:33%;
}
#transitions ul#trans2D {
text-align:right;
}
#transitions ul li {
margin:0 10px;
}

#warn {
font-weight:bold;
text-align:center;
}
</style>

en htm

 

 

 

<div id='slider'><div id='warn'>
<img src="URL IMAGEN"/>
<img src="URL IMAGEN"/>
<img src="URL IMAGEN"/>
<img src="URL IMAGEN"/>
<img src="URL IMAGEN"/>

</div></div>

Iconos sociales circulares con tooltip

en head

 

 

 

<style type="text/css">
/*<![CDATA[*/
.md-wrapper{padding:0;width:435px;height:70px;margin:80px auto 30px auto;}.md-wrapper li{float:center;}.md-wrapper ol,ul{list-style:none;}.md-wrapper li a{display:block;width:68px;height:70px;margin:0 2px;outline:none;background:transparent url(http://2.bp.blogspot.com/-l81k5DdhS4c/TztjSugibrI/AAAAAAAACn0/8TZqmQbHxg0/s1600/%255Bwww.gj37765.blogspot.com%255D_social_gunman_icons.png) no-repeat top left;text-indent:-9000px;position:relative;}.md-wrapper li .md-gplus{background-position:0px 0px;}.md-wrapper li .md-twitter{background-position:-68px 0px;}.md-wrapper li .md-facebook{background-position:-204px 0px;}.md-wrapper li a span{width:100px;height:auto;line-height:20px;padding:10px;left:50%;margin-left:-64px;font-family:'Alegreya SC', Georgia, serif;font-weight:400;font-style:italic;font-size:14px;color:#719DAB;text-shadow:1px 1px 1px rgba(0, 0, 0, 0.1);text-align:center;border:4px solid #fff;background:rgba(255,255,255,0.3);text-indent:0px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;position:absolute;pointer-events:none;bottom:100px;opacity:0;/*box-shadow*/-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.1);-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.1);box-shadow:1px 1px 2px rgba(0,0,0,0.1);/*transition*/-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}.md-wrapper li a span:before,.md-wrapper li a span:after{content:'';position:absolute;bottom:-15px;left:50%;margin-left:-9px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid rgba(0,0,0,0.1);}.md-wrapper li a span:after{bottom:-14px;margin-left:-10px;border-top:10px solid #fff;}.md-wrapper li a:hover span{opacity:0.9;bottom:70px;}.md2-wrapper{padding:0;width:230px;height:70px;margin:80px auto 30px auto;}.md2-wrapper li{float:left;}.md2-wrapper ol,ul{list-style:none;}.md2-wrapper li a{display:block;width:68px;height:70px;margin:0 2px;outline:none;position:relative;z-index:2;background:transparent url(http://2.bp.blogspot.com/-l81k5DdhS4c/TztjSugibrI/AAAAAAAACn0/8TZqmQbHxg0/s1600/%255Bwww.gj37765.blogspot.com%255D_social_gunman_icons.png) no-repeat top left;text-indent:-9000px;}.md2-wrapper li .tt-gplus{background-position:0px 0px;}.md2-wrapper li .md2-twitter{background-position:-68px 0px;}.md2-wrapper li .md2-facebook{background-position:-204px 0px;}.md2-wrapper li a span{width:80px;height:80px;line-height:80px;padding:10px;left:50%;margin-left:-55px;font-family:'Alegreya SC', Georgia, serif;font-weight:400;font-style:italic;font-size:14px;color:#719DAB;text-shadow:1px 1px 1px rgba(0, 0, 0, 0.1);text-align:center;border:5px solid #fff;background:rgba(255,255,255,0.5);text-indent:0px;position:absolute;pointer-events:none;/*border-radius*/-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;bottom:-40px;opacity:0;/*box-shadow*/-webkit-box-shadow:0px 3px 8px rgba(0,0,0,0.1);-moz-box-shadow:0px 3px 8px rgba(0,0,0,0.1);box-shadow:0px 3px 8px rgba(0,0,0,0.1);/*transform*/-webkit-transform:scale(0.2);-moz-transform:scale(0.2);-ms-transform:scale(0.2);-o-transform:scale(0.2);transform:scale(0.2);/*transition*/-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}.md2-wrapper li a:hover span{opacity:0.9;bottom:50px;/*transform*/-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);}.md3-wrapper{padding:0;width:435px;height:70px;margin:80px auto 30px auto;}.md3-wrapper li{float:left;}.md3-wrapper ol,ul{list-style:none;}.md3-wrapper li a{display:block;width:68px;height:70px;margin:0 2px;outline:none;position:relative;z-index:2;background:transparent url(http://2.bp.blogspot.com/-l81k5DdhS4c/TztjSugibrI/AAAAAAAACn0/8TZqmQbHxg0/s1600/%255Bwww.gj37765.blogspot.com%255D_social_gunman_icons.png) no-repeat top left;text-indent:-9000px;}.md3-wrapper li .md3-gplus{background-position:0px 0px;}.md3-wrapper li .md3-twitter{background-position:-68px 0px;}.md3-wrapper li .md3-facebook{background-position:-204px 0px;}.md3-wrapper li a span{width:80px;height:auto;padding:10px;left:50%;margin-left:-55px;font-family:'Alegreya SC', Georgia, serif;font-weight:400;font-style:italic;font-size:14px;color:#719DAB;text-shadow:1px 1px 1px rgba(0, 0, 0, 0.1);text-align:center;border:5px solid #fff;background:rgba(255,255,255,0.5);text-indent:0px;position:absolute;pointer-events:none;bottom:-40px;opacity:0;/*box-shadow*/-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.1);-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.1);box-shadow:0px 1px 2px rgba(0,0,0,0.1);/*transition*/-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;/*transform*/-webkit-transform:rotate(0deg) scale(0);-moz-transform:rotate(0deg) scale(0);-ms-transform:rotate(0deg) scale(0);-o-transform:rotate(0deg) scale(0);transform:rotate(0deg) scale(0);}.md3-wrapper li a:hover span{opacity:0.9;bottom:100px;/*transform*/-webkit-transform:rotate(-90deg) scale(1);-moz-transform:rotate(-90deg) scale(1);-ms-transform:rotate(-90deg) scale(1);-o-transform:rotate(-90deg) scale(1);transform:rotate(-90deg) scale(1);}.md4-wrapper{padding:0;width:435px;height:70px;margin:80px auto 30px auto;}.md4-wrapper li{float:left;}.md-wrapper ol,ul{list-style:none;}.md4-wrapper li a{display:block;width:68px;height:70px;margin:0 2px;outline:none;background:transparent url(http://2.bp.blogspot.com/-l81k5DdhS4c/TztjSugibrI/AAAAAAAACn0/8TZqmQbHxg0/s1600/%255Bwww.gj37765.blogspot.com%255D_social_gunman_icons.png) no-repeat top left;text-indent:-9000px;position:relative;}.md4-wrapper li .md4-gplus{background-position:0px 0px;}.md4-wrapper li .md4-twitter{background-position:-68px 0px;}.md4-wrapper li .md4-facebook{background-position:-204px 0px;}.md4-wrapper li a span{width:100px;height:auto;line-height:20px;padding:10px;left:50%;margin-left:-64px;font-family:'Alegreya SC', Georgia, serif;font-weight:400;font-style:italic;font-size:14px;color:#719DAB;text-shadow:1px 1px 1px rgba(0, 0, 0, 0.1);text-align:center;border:4px solid #fff;background:rgba(255,255,255,0.3);text-indent:0px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;position:absolute;bottom:70px;opacity:0;visibility:visible;pointer-events:none;/*box-shadow*/-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.1);-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.1);box-shadow:1px 1px 2px rgba(0,0,0,0.1);/*transform*/-webkit-transform:translate(35px) rotate(25deg) scale(1.5);-moz-transform:translate(35px) rotate(25deg) scale(1.5);-ms-transform:translate(35px) rotate(25deg) scale(1.5);-o-transform:translate(35px) rotate(25deg) scale(1.5);transform:translate(35px) rotate(25deg) scale(1.5);/*transition*/-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}.md4-wrapper li a span:before,.md4-wrapper li a span:after{content:'';position:absolute;bottom:-15px;left:50%;margin-left:-9px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid rgba(0,0,0,0.1);}.md4-wrapper li a span:after{bottom:-14px;margin-left:-10px;border-top:10px solid #fff;}.md4-wrapper li a:hover span{visibility:visible;opacity:0.9;/*transform*/-webkit-transform:translate(0px) rotate(0deg) scale(1);-moz-transform:translate(0px) rotate(0deg) scale(1);-ms-transform:translate(0px) rotate(0deg) scale(1);-o-transform:translate(0px) rotate(0deg) scale(1);transform:translate(0px) rotate(0deg) scale(1);}
/*]]>*/
</style>

en htm

 

 

 

<ul class="md2-wrapper">
<li><a target="_blank" class="md2-gplus" href="URL GOOGLE+"><span>Google+</span></a></li>
<li><a target="_blank"class="md2-twitter" href="URL TWITTER"><span>Twitter</span></a></li>
<li><a target="_blank"class="md2-facebook" href="URL FACEBOOK"><span>Facebook</span></a></li>
</ul>

apagar las luces de la web para ver un video

en head

 

 

 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/><script type='text/javascript'>//<![CDATA[
var a = jQuery.noConflict ();a(document).ready(function(){a("#oscuridad").css("height", a(document).height()).hide();a(".lightSwitcher").click(function(){a("#oscuridad").toggle();if (a("#oscuridad").is(":hidden"))a(this).html("Apagar las luces").removeClass("turnedOff");elsea(this).html("Prender las luces").addClass("turnedOff");});});//]]></script>


<style>
/* Apagar las luces----------------------------------------------- */#videoLuces {position:relative;z-index:102;}#apagador {max-width:640px;text-align:left;position:relative;height:25px;display:block;margin: 25px 0 0 60px;}.lightSwitcher {position:absolute;z-index:101;background-image:url(http://lh6.googleusercontent.com/-azJxijJlWX4/T3vT2giQqkI/AAAAAAAACWk/6wt4sBdcHEY/s16/luces-on.png); background-repeat:no-repeat;background-position:left;padding: 0 0 0 20px;outline:none;text-decoration:none;}.lightSwitcher:hover {text-decoration:underline;}.turnedOff {color:#ffff00 !important;background-image:url(http://lh4.googleusercontent.com/-J0U5xRqb7KU/T3vT2kcmUsI/AAAAAAAACWo/-VTwo42-Nj0/s16/luces-off.png);}#oscuridad {background:#000;opacity:0.7; /* Opacidad de la pantalla */filter:alpha(opacity=70); /* Opacidad de la pantalla */position:absolute;left:0;top:0;width:100%;z-index:100;}
</style>

en htm

 

 

 

<div id='oscuridad'/>
<center><div id="apagador"><a class="lightSwitcher" href="javascript:void(0);">Apagar las luces</a></div><div id="videoLuces">aqui pones el codigo del video que quieras ver</div>
</div></center>

Mapa del mundo con informacion tooltip

en head

 

 

 

<style>
ul#continentes {
list-style: none;
background: url(https://lh6.googleusercontent.com/-_DEV0oHgEmM/UEOfFdiZdsI/AAAAAAAAF5k/Za4bUo2g-ik/s580/mapa%2520mundo%2520-%2520disfruta-ayuda-comparte.png) no-repeat 0 0;
position: relative;
width: 580px;
height: 268px;
margin: 0;
padding: 0;
}
ul#continentes li {
position: absolute;
}
ul#continentes li a{
display: block;
height: 100%;
text-decoration: none;
}
#norteamerica {
width: 227px;
height: 142px;
top: 2px;
left: 0px;
}
#suramerica {
width: 108px;
height: 130px;
top: 131px;
left: 76px;
}
#africa {
width: 120px;
height: 140px;
top: 83px;
left: 209px;
}
#europa {
width: 120px;
height: 84px;
top: 1px;
left: 211px;
}
#asia {
width: 215px;
height: 175px;
top: 1px;
left: 283px;
}
#australia {
width: 114px;
height: 95px;
top: 152px;
left: 432px;
}
ul#continentes li a:hover {
background: url(https://lh6.googleusercontent.com/-_DEV0oHgEmM/UEOfFdiZdsI/AAAAAAAAF5k/Za4bUo2g-ik/s580/mapa%2520mundo%2520-%2520disfruta-ayuda-comparte.png) no-repeat 0 0;
}
ul#continentes li#norteamerica a:hover {
background-position: 0 -270px;
}
ul#continentes li#suramerica a:hover {
background-position: -226px -273px;
}
ul#continentes li#africa a:hover {
background-position: -209px -417px;
}
ul#continentes li#europa a:hover {
background-position: -22px -427px;
}
ul#continentes li#asia a:hover {
background-position: -363px -268px;
}
ul#continentes li#australia a:hover {
background-position: -412px -455px;
}
ul#continentes li a span {
display: none;
}
ul#continentes li a:hover span {
display: block;
}
ul#continentes li a:hover span {
display: block;
padding: 5px;
width: 150px;
background: #000;
position: relative;
top: 50%;
font: 11px Arial, Helvetica, sans-serif;
opacity: .75;
filter:alpha(opacity=75);
color: #FFF;
}
ul#continentes li a:hover span strong {
display: block;
margin-bottom: 2px;
font-size: 12px;
text-decoration: underline;
}
</style>

en htm

 

 

 

<ul id="continentes">
<li id="norteamerica">
<a><span><strong>NorteAmerica</strong> Poblacion: 528,720,588</span></a>
</li>

<li id="suramerica">
<a><span><strong>SurAmerica</strong> Poblacion: 385,742,554</span></a>
</li>

<li id="asia">
<a><span><strong>Asia</strong> Poblacion: 3,879,000,000</span></a>
</li>

<li id="australia">
<a><span><strong>Australia</strong> Poblacion: 21,807,000</span></a>
</li>

<li id="africa">
<a><span><strong>Africa</strong> Poblacion: 922,011,000</span></a>
</li>

<li id="europa">
<a><span><strong>Europa</strong> Poblacion: 731,000,000</span></a>
</li>
</ul>

iconos de varias redes sociales con efecto opacidad

en head

 

 

 

<style type="text/css">
/*<![CDATA[*/
/* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org */
ul.way2blogging-social { list-style:none; margin:15px auto;display:inline-block; }
ul.way2blogging-social li { display:inline; float:left; background-repeat:no-repeat; }
ul.way2blogging-social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }
ul.way2blogging-social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}
ul.way2blogging-social li.way2blogging-facebook { background-image:url("http://lh6.googleusercontent.com/-YbqE_WaWM_I/TYAygBXhxdI/AAAAAAAAAdk/_X3pWlNFRgs/s1600/way2blogging-facebook.png"); }
ul.way2blogging-social li.way2blogging-twitter { background-image:url("http://lh4.googleusercontent.com/-5ZvxVwDY5H4/TYAyiGsT2WI/AAAAAAAAAd8/Farwy9vHqjU/s1600/way2blogging-twitter.png"); }
ul.way2blogging-social li.way2blogging-googlebuzz { background-image:url("http://lh5.googleusercontent.com/-jg3XFSK3GF0/TYAygs6-mQI/AAAAAAAAAdo/PVRayMMzHE4/s1600/way2blogging-googlebuzz.png"); }
ul.way2blogging-social li.way2blogging-stumbleupon { background-image:url("http://lh6.googleusercontent.com/-mldTY6HrKnY/TYAyh1qKYMI/AAAAAAAAAd4/pkdFcTxmYfA/s1600/way2blogging-stumbleupon.png"); }
ul.way2blogging-social li.way2blogging-digg { background-image:url("http://lh5.googleusercontent.com/-u5KAanTOCIQ/TYAyfn6qvpI/AAAAAAAAAdg/l9F0MjdOox0/s1600/way2blogging-digg.png"); }
ul.way2blogging-social li.way2blogging-delicious { background-image:url("http://lh6.googleusercontent.com/-w1KohkQHuqY/TYAyfct003I/AAAAAAAAAdc/3a-vbAhOlTg/s1600/way2blogging-delicious.png"); }
ul.way2blogging-social li.way2blogging-linkedin { background-image:url("http://lh3.googleusercontent.com/-D1_qyJ6YuAg/TYAyg-wrT_I/AAAAAAAAAds/S_GkMjA5ZJ8/s1600/way2blogging-linkedin.png"); }
ul.way2blogging-social li.way2blogging-reddit { background-image:url("http://lh3.googleusercontent.com/-IcX_Sdky5Ok/TYAyhn1obuI/AAAAAAAAAd0/MCWNQkbr818/s1600/way2blogging-reddit.png"); }
ul.way2blogging-social li.way2blogging-technorati { background-image:url("http://lh6.googleusercontent.com/-qPJl0bdRDhc/TYA0oJaVlvI/AAAAAAAAAeA/PeJpSyxdyBs/s1600/way2blogging-technorati.png"); }
#way2blogging-cssanime:hover li { opacity:0.2; }
#way2blogging-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
#way2blogging-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
#way2blogging-cssanime li:hover { opacity:1; }
#way2blogging-cssanime li:hover a strong { opacity:1; top:-10px; }
/* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org */
/*]]>*/
</style>

en htm

 

 

 

<ul class='way2blogging-social' id='way2blogging-cssanime'>
<li class='way2blogging-facebook'>
<a onclick='window.open(this.href,&#39;sharer&#39;,&#39;toolbar=0,status=0,width=626,height=436&#39;); return false;' rel='nofollow' title=
'Share this on Facebook'><strong>Facebook</strong></a>
</li>

<li class='way2blogging-twitter'>
<a rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a>
</li>

<li class='way2blogging-googlebuzz'>
<a rel='nofollow' title='Post on GoogleBuzz'><strong>Google Buzz</strong></a>
</li>

<li class='way2blogging-stumbleupon'>
<a rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><strong>StumbleUpon</strong></a>
</li>

<li class='way2blogging-digg'>
<a rel='nofollow' title='Digg this!'><strong>Digg</strong></a>
</li>

<li class='way2blogging-delicious'>
<a rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a>
</li>

<li class='way2blogging-linkedin'>
<a rel='nofollow' title='Share this on LinkedIn'><strong>LinkedIn</strong></a>
</li>

<li class='way2blogging-reddit'>
<a rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a>
</li>

<li class='way2blogging-technorati'>
<a rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a>
</li>
</ul>

fanbook de twitter con efecto deslizante.Pestaña esquina superior derecha

en head

 

 

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">
</script>

<script type="text/javascript">
//<![CDATA[

jQuery.noConflict();
jQuery(function (){
jQuery(".slide_likebox2").hover(function(){
jQuery(".slide_likebox2").stop(true, false).animate({right:"0"},"medium");
},function(){
jQuery(".slide_likebox2").stop(true, false).animate({right:"-250"},"medium");
},500);
return false;
});
//]]>
</script>

<style type="text/css">
/*<![CDATA[*/
.slide_likebox2 {
float:reight;
width:288px;
height:400px;
background: url(http://2.bp.blogspot.com/-B97DZMK7wus/TpOxNSwRhPI/AAAAAAAAAOU/A-RjcC6WYjk/s1600/tw_ag.png) no-repeat !important;
display:block;
right:-250px;
padding:0;
position:fixed;
top: 10px;
z-index:1002;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap {
margin-top:2px;
margin-left:-5px;
width:238px;
height:325px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap iframe {margin:-1px}
/*]]>*/
</style>


<style type="text/css">
/*<![CDATA[*/
.FB_SERVER_IFRAME {
width: 238px !important; /* Ancho del gadget */
height: 320px !important; /* Alto del gadget */
}
/*]]>*/
</style>

en htm

 

ojo:poner id de twitter 

 

 

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">
</script><script type="text/javascript">
//<![CDATA[

jQuery.noConflict();
jQuery(function (){
jQuery(".slide_likebox2").hover(function(){
jQuery(".slide_likebox2").stop(true, false).animate({right:"0"},"medium");
},function(){
jQuery(".slide_likebox2").stop(true, false).animate({right:"-250"},"medium");
},500);
return false;
});
//]]>
</script>
<div class="slide_likebox2">
<div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;">
<div class="likeboxwrap">
<span><script type="text/javascript" src="http://s.moopz.com/fanbox_init.js">
</script></span>
<div id="twitterfanbox">
<span><script type="text/javascript">
//<![CDATA[
fanbox_init("disfruta-ayuda-comparte");
//]]>
</script></span>
</div>
</div>
</div>
</div>

Sobre de carta de donde emerge tu direccion de correos

en head

 

 

 

<style type="text/css">/*<![CDATA[*/.contact {  position: relative;cursor:pointer;  border-radius: 2px;  -ms-border-radius: 2px;  -moz-border-radius: 2px;  -o-border-radius: 2px;  -webkit-border-radius: 2px;}.contact .envelope {  position: absolute;  height: 93px;  width: 165px;  left: 50%;  margin-left: -83px;  top: 50%;  margin-top: -50px;  background: #F9F9F9;   transition: margin-top 300ms;  -ms-transition: margin-top 300ms;  -moz-transition: margin-top 300ms;  -o-transition: margin-top 300ms;  -webkit-transition: margin-top 300ms;}.contact:hover .envelope {  transition-delay: 150ms;  -ms-transition-delay: 150ms;  -moz-transition-delay: 150ms;  -o-transition-delay: 150ms;  margin-top: -20px;}.contact .envelope .top {  position: absolute;  top: -3px;  left: 0px;  width: 100%;  height: 73px;  z-index: 30;  overflow: hidden;      transform-origin: top;  -ms-transform-origin: top;  -moz-transform-origin: top;  -o-transform-origin: top;  -webkit-transform-origin: top;     transition: transform 300ms 150ms, z-index 0ms 150ms, height 300ms 0ms, top 300ms 0ms;  -ms-transition: -ms-transform 300ms 150ms, z-index 0ms 150ms, height 300ms 0ms, top 300ms 0ms;  -moz-transition: -moz-transform 300ms 150ms, z-index 0ms 150ms, height 300ms 0ms, top 300ms 0ms;  -o-transition: -o-transform 300ms 150ms, z-index 0ms 150ms, height 300ms 0ms, top 300ms 0ms;  -webkit-transition: -webkit-transform 300ms 150ms, z-index 0ms 150ms, height 300ms 0ms, top 300ms 0ms;}.contact:hover .envelope .top {  transition: transform 300ms 0ms, height 300ms 150ms, top 300ms 150ms;  -ms-transition: -ms-transform 300ms 0ms, height 300ms 150ms, top 300ms 150ms;  -moz-transition: -moz-transform 300ms 0ms, height 300ms 150ms, top 300ms 150ms;  -o-transition: -o-transform 300ms 0ms, height 300ms 150ms, top 300ms 150ms;  -webkit-transition: -webkit-transform 300ms 0ms, height 300ms 150ms, top 300ms 150ms;   height: 10px;  top: -60px;   transform: rotateX(180deg);  -ms-transform: rotateX(180deg);  -moz-transform: rotateX(180deg);  -o-transform: rotateX(180deg);  -webkit-transform: rotateX(180deg);}.contact .envelope .outer {  position: absolute;  bottom: 0px;  left: 0px;  border-left: 83px solid transparent;  border-right: 82px solid transparent;  border-top: 70px solid #EEE;}.contact .envelope .outer .inner {  position: absolute;  left: -81px;  top: -73px;  border-left: 81px solid transparent;  border-right: 80px solid transparent;  border-top: 68px solid #70BBFE;}.contact .envelope .bottom {  position: absolute;-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);box-shadow: 0px 0px 10px rgba(0,0,0,.8);  z-index: 20;  bottom: 0px;  left: 2px;  border-left: 81px solid transparent;  border-right: 80px solid transparent;  border-bottom: 45px solid #70BBFE;}.contact .envelope .left {  position: absolute;  z-index: 20; top: 0px;  left: 0px;  border-left: 81px solid #70BBFE;  border-top: 45px solid transparent;  border-bottom: 45px solid transparent;}.contact .envelope .right {  position: absolute;  z-index: 20;  top: 0px;  right: 0px;  border-right: 80px solid #70BBFE;  border-top: 45px solid transparent;  border-bottom: 45px solid transparent;}.contact .envelope .cover {  position: absolute;  z-index: 15;  bottom: 0px;  left: 0px;  height: 55%;  width: 100%;  background: #EEE;}.contact .envelope .paper {  position: absolute;  height: 83px;border:1px solid #cccccc;  padding-top: 10px;  width: 99%;  top: 0px;  left: 0px;  background: #F9F9F9;  z-index: 10;  transition: margin-top 300ms 0ms;  -ms-transition: margin-top 300ms 0ms;  -moz-transition: margin-top 300ms 0ms;  -o-transition: margin-top 300ms 0ms;  -webkit-transition: margin-top 300ms 0ms;}.contact:hover .envelope .paper {  margin-top: -60px;  transition: margin-top 300ms 150ms;  -ms-transition: margin-top 300ms 150ms;  -moz-transition: margin-top 300ms 150ms;  -o-transition: margin-top 300ms 150ms;  -webkit-transition: margin-top 300ms 150ms;}.contact .envelope .paper a {  position: relative;  display: block;cursor:default;  color: #000000 !important;  margin: 5px;-webkit-text-shadow: 2px 1px 2px #71BCFF;-moz-text-shadow: 2px 1px 2px #71BCFF;text-shadow: 2px 1px 2px #71BCFF;  margin-bottom: 0px;font-weight: bold;  text-align: center;  text-decoration: none; }.contact .envelope .paper a.call .i {  position: absolute;  top: 2px;  left: 20px;  display: inline-block;  width: 3px;  height: 5px;  border-width: 5px 0 5px 2px;  border-style: solid;  border-color: #555;  background: transparent;   transform: rotate(-30deg);  -ms-transform: rotate(-30deg);  -moz-transform: rotate(-30deg);  -o-transform: rotate(-30deg);  -webkit-transform: rotate(-30deg);
  border-top-left-radius: 3px 5px;  border-bottom-left-radius: 3px 5px;  -moz-border-radius-topleft: 3px 5px;  -moz-border-radius-bottomleft: 3px 5px;  -webkit-border-top-left-radius: 3px 5px;  -webkit-border-bottom-left-radius: 3px 5px;                                    transition: border-color 300ms;  -ms-transition: border-color 300ms;  -moz-transition: border-color 300ms;  -o-transition: border-color 300ms;  -webkit-transition: border-color 300ms;}.contact .envelope .paper a {  color: #333;
  transition: color 200ms;  -ms-transition: color 200ms;  -moz-transition: color 200ms;  -o-transition: color 200ms;  -webkit-transition: color 200ms;}.contact .envelope .paper a:hover {  color: #EEE;}.contact .envelope .paper .i {  border-color: #DDD;}.contact .envelope .paper a.mail .i {  position: absolute;  top: 0px;  left: 17px;  display: inline-block;  font-size: 13px;  font-weight: bold;}/*]]>*/</style>

en htm

 

 

 

<center>    <div class="contact">        <div class="envelope">            <div class="top">                <div class="outer">                    <div class="inner">                    </div>                </div>            </div>
            <div class="bottom">            </div>
            <div class="left">            </div>
            <div class="right">            </div>
            <div class="cover">            </div>
            <div class="paper">                <a style="font-size: 13px;font-family: Verdana;" class="mail">aquiponestuemail@mail.com</a>            </div>        </div>    </div></center>

Protected by Copyscape Web Plagiarism Check