<head>
  <link href="//db.onlinewebfonts.com/c/0421d4186d6efbfc5331fe180895e780?family=Harry+Potter" rel="stylesheet" type="text/css"/>
</head>
<body>
  <section class="contenedor">
    <div class="casa" id="Gryffindor">Gryffindor</div>
    <div class="casa" id="Hufflepuff">Hufflepuff</div>
    <div class="casa" id="Ravenclaw">Ravenclaw</div>
    <div class="casa" id="Slytherin">Slytherin</div>
  </section>
</body>



.contenedor {
  width: 560px;
  margin: 0 auto;
  display: flex;
}

.casa {
  /*distribución*/
  height: 300px;
  flex-grow: 1;
  /*text*/
  font-family: Harry Potter, Arial;
  color: white;
  text-align: center;
  font-size: 18px;
  padding-top: 15px;
  /*background-image*/
  background-repeat: no-repeat;
  background-position: center;
  background-size: 110px 150px;
}

#Gryffindor {
  background-color: #A80102;
  background-image: url("https://raw.githubusercontent.com/NestorPlasencia/img/master/Gryffindor.png");
}

#Hufflepuff {
  background-color: #786254;
  background-image: url("https://raw.githubusercontent.com/NestorPlasencia/img/master/Hufflepuff.png");
}

#Ravenclaw {
  background-color: #31446F;
  background-image: url("https://raw.githubusercontent.com/NestorPlasencia/img/master/Ravenclaw.png");
}

#Slytherin {
  background-color: #097146;
  background-image: url("https://raw.githubusercontent.com/NestorPlasencia/img/master/Slytherin.png");
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.