A Pen by BlackJair

Thumbnail
This awesome code was written by BlackJair, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright BlackJair ©
  • HTML
  • CSS
  • JavaScript
    <html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
</head>

<body>

<div style="width:100%; height:110px; background-color:#000000; top:43px;">
<div id="contenido">
</div>
  
</div>
<div id="boton" onclick="mostrarcaja()">
caja
</div>
<div id="boton" onclick="mostrarjardin()">
Jardín
</div>
<div id="boton" onclick="mostrarhogar()">
hogar
</div>
</body>
</html>

/*Downloaded from https://www.codeseek.co/BlackJair/a-pen-by-blackjair-NNOwyo */
    @charset "utf-8";
/* CSS Document */
#boton{
    padding: 10px;
    background: orange;
    width: 95px;
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 10px;
    box-shadow: 0px 0px 1px #000;
    display: inline-block;
}
 
#boton:hover{
    opacity: .8;
}
 
#caja{
    width: 100%;
    margin: auto;
    height: 0px;
    transition: height .4s;
	background-color:#B40003;
	visibility:hidden;
}

#jardin{
    width: 100%;
    margin: auto;
    height: 0px;
    transition: height .4s;
	background-color:#00A7ED;
	visibility:hidden;
}

#hogar{
    width: 100%;
    margin: auto;
    height: 0px;
    transition: height .4s;
	background-color:#F000B3;
	visibility:hidden;
}



/*Downloaded from https://www.codeseek.co/BlackJair/a-pen-by-blackjair-NNOwyo */
    var contenido = document.getElementById("contenido");
var imagen = document.createElement("img");
imagen.setAttribute("height", "110");

function mostrarcaja(){
  contenido.innerHTML = "";
  
  imagen.src = 'https://www.logismarket.com.mx/ip/novatec-caja-de-plastico-cerrada-con-tapa-modelo-tampico-disponible-en-colores-en-material-virgen-gris-naranja-y-natural-529961-FGR.jpg';
  contenido.appendChild(imagen);
}

function mostrarjardin(){ 
  contenido.innerHTML = "";
  
  imagen.src = "http://www.arqhys.com/wp-content/fotos/2014/03/Jardin.jpg";
  contenido.appendChild(imagen);
}

function mostrarhogar(){
  contenido.innerHTML = "";
  
  imagen.src = "http://gesseguros.net/wp-content/uploads/2014/12/datos-coberturas-Seguro-de-hogar.jpg";
  contenido.appendChild(imagen);
}

Comments