Ejercicio 1

💻 Código HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="Jostyn VY ">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/estilos.css">
    <link rel="icon" href="recursos/favicon.ico" type="image/ico" sizes="16x16">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Pontano+Sans&display=swap" rel="stylesheet">
    <title>Hospederías de Extremadura</title>

    <base target="hospederia">

</head>
<body>
    <h1>Hospederías de Extremadura</h1>
    <div class="tarjetas">
        <div class="tarjeta">
            <header>
                <a href="https://www.hospederiasdeextremadura.es/es/hotel/hospederia-mirador-de-llerena"><img src="recursos/fotos/llerena.jpg" alt="Hospedería LLerena"></a>
            </header>
        </div>
        <div class="tarjeta">
            <header>
                <a href="https://www.hospederiasdeextremadura.es/es/hotel/hospederia-conventual-de-alcantara"><img src="recursos/fotos/alcantara.jpg" alt="Hospedería Conventual de Alcántara"></a>
            </header>
        </div>
                <div class="tarjeta">
            <header>
                <a href="https://www.hospederiasdeextremadura.es/es/hotel/hospederia-parque-de-monfrague"><img src="recursos/fotos/monfrague.jpg" alt="Hospedería Parque de Monfrague"></a>
            </header>
        </div>
                <div class="tarjeta">
            <header>
                <a href="https://www.hospederiasdeextremadura.es/es/hotel/hospederia-valle-del-ambroz"><img src="recursos/fotos/ambroz.jpg" alt="Hospedería Valle del Ambroz"></a>
            </header>
        </div>
                <div class="tarjeta">
            <header>
                <a href="https://www.hospederiasdeextremadura.es/es/hotel/hospederia-puente-de-alconetar"><img src="recursos/fotos/alconetar.jpg" alt="Hospedería Puente de Alconetar"></a>
            </header>
        </div>
                <div class="tarjeta">
            <header>
                <a href="https://www.hospederiasdeextremadura.es/es/hotel/hospederia-hurdes-reales"><img src="recursos/fotos/hurdes.jpg" alt="Hospedería Hurdes Reales"></a>
            </header>
        </div>
                <div class="tarjeta">
            <header>
                <a href="https://www.hospederiasdeextremadura.es/es/hotel/hospederia-conventual-sierra-de-gata"><img src="recursos/fotos/gata.jpg" alt="Hospedería Conventual Sierra de Gata"></a>
            </header>
        </div>
                <div class="tarjeta">
            <header>
                <a href="https://www.hospederiasdeextremadura.es/es/hotel/hospederia-valle-del-jerte"><img src="recursos/fotos/valle.jpg" alt="Hospedería Valle del Jerte"></a>
            </header>
        </div>
    </div>
</body>
</html>

🎨 Código CSS


div.tarjetas {
  display: flex;
  flex-wrap: wrap;
}
body {
  background-color: #eee;
  font-family: "Pontano Sans", Arial, Helvetica, sans-serif;
  font-optical-sizing: auto;
  line-height: 1.5em;
}
.tarjeta {
  background-color: white;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
  border-radius: 6px;
  margin-top: 50px;
  height: 400px; /* Es temporal */
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  .tarjeta {
    width: 100%;
  }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .tarjeta {
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .tarjeta {
    width: calc(33.3333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .tarjeta {
    width: calc(25% - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .tarjeta {
    width: calc(20% - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }
}

/* Fase 2 */

.tarjeta > header img {
    width: 100%;
    margin-top: -30px;
    border-radius: 6px;
    box-shadow: 0 5px 15px -8px rgba(0,0,0,.24), 0 8px 10px -5px rgba(0,0,0,.2);
    transition: all 1s cubic-bezier(.34,1.61,.7,1);
}

.tarjeta {
    padding: 0px 15px;
}

.tarjeta:hover > header img {
    transform: translate3d(0, -50px, 0);
  
}

📸 Resultado del ejercicio

Resultado
⬅ Volver