<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="close lorem red">
<span class="closeButton1">⛒</span>
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen.
</div>
<div class="close lorem green">
<span class="closeButton2"></span>
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen.
</div>
<div class="close lorem yellow">
<span class="closeButton1">⛒</span>
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen.
</div>
<div class="close lorem blue">
<span class="closeButton2"></span>
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen.
</div>
</body>
</html>
<style>
.red {background-color:red;}.green {background-color:green;}.yellow {background-color:yellow;}.blue {background-color:blue;}
.lorem {float:left;width:300px;padding:15px;margin:20px;}
.close {position:relative;}.close .closeButton1 { font-size: 24px;
width:19px;height:19px;
top:-9px;
right:-9px;
position:absolute;
cursor:pointer;
line-height:21px;
}
.close .closeButton2 { background:url(cancel.png) no-repeat;
width:26px;height:26px;
top:-9px;
right:-9px;
position:absolute;
cursor:pointer;
}
</style>
<script>
var close=document.querySelectorAll(".closeButton1, .closeButton2");close.forEach(function(e){ e.addEventListener("click",function(){ this.offsetParent.style.display="none";
});
});
</script>
Crear cuenta
