Vamos a estrenar esta sección con un efecto sencillo y a la vez interesante: crear unas tarjetas de servicios que podrás incorporar a tu página web. El desarrollo tanto del código HTML como CSS lo basaremos en la librería Bootstrap. Para crear esta pequeña utilidad, he utilizado el IDE Visual Studio Code.

Vamos a comenzar con el código HTML. Utilizaremos para usar Bootstrap los enlaces CDN, con esto incorporamos la librería de una manera sencilla. Usaremos una serie de row anidados dentro de un div con la clase container. En el primero incluiremos la imagen principal de la tarjeta con una imagen diseñada y con las dimensiones adecuadas.

La imagen debe de ser responsiva, de forma que pueda adaptarse sin problemas a cualquier dispositivo. Eso se consigue con la clase img-fluid. Para manejar los efectos de transformación y transición -ya lo veremos más adelante-, incluiremos una clase padre llamada img-servicios.

La segunda clase row incluira el texto -sobre un fondo blanco- y el botón. Centraremos e incluiremos una clase hija servicio-hijo que emplearemos para darle estilos a esta sección.

Como última reseña, usaremos btn-primary, una clase de bootstrap para los botones y le daremos en la hoja de estilos el diseño que se adapte a nosotros.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tarjetas Bootstrap</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <!-- Incluimos las fuentes que vamos a utilizar-->
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Italianno&family=Lato:wght@300&display=swap" rel="stylesheet"> 

</head>
<body>
    
    <div class="container mt-5">
        <div class="row">
            
            <div class="col-md-4 text-center">
                <div class="image-servicio">
                    <img src="img/servicio_01.jpg" class="img-fluid" alt="imagen de servicio">
                    <div class="row no-gutters justify-content-center">
                            <div class="col-md-10 pt-4 servicio-info">
                                <h3 class="text-center text-uppercase encabezado">
                                    <span class="text-lowercase d-block">Beneficios de la</span>reflexología
                                </h3>
                                <a href="#" class="btn btn-primary btn-block text-uppercase mt-4 py-3">Leer más</a>
                            </div>
                    </div>
                </div>
            </div>

            <div class="col-md-4 text-center">
                <div class="image-servicio">
                    <img src="img/servicio_02.jpg" class="img-fluid" alt="imagen de servicio">
                    <div class="row no-gutters justify-content-center">
                            <div class="col-md-10 pt-4 servicio-info">
                                <h3 class="text-center text-uppercase encabezado">
                                    <span class="text-lowercase d-block">Masajes</span>relajantes
                                </h3>
                                <a href="#" class="btn btn-primary btn-block text-uppercase mt-4 py-3">Leer más</a>
                            </div>
                    </div>
                </div>
            </div>

            <div class="col-md-4 text-center">
                <div class="image-servicio">
                    <img src="img/servicio_03.jpg" class="img-fluid" alt="imagen de servicio">
                    <div class="row no-gutters justify-content-center">
                            <div class="col-md-10 pt-4 servicio-info">
                                <h3 class="text-center text-uppercase encabezado">
                                    <span class="text-lowercase d-block">Visita nuestras</span>instalaciones
                                </h3>
                                <a href="#" class="btn btn-primary btn-block text-uppercase mt-4 py-3">Leer más</a>
                            </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</body>
</html>

Poco se puede contar sobre este código en CSS. Quizás lo más relevante es el efecto de escalado y transición en la clase que afecta a la imagen.

:root {
    --colorBlanco: #FFFFFF;
    --colorRosa: #E082A8;
    --colorNegro: #000000;
}

.encabezado {
    font-size: 1.9rem;
    color: var(--negro);
    font-family: 'lato', sans-serif;
    line-height: 2.4rem;
}

.encabezado span {
    font-size: 2.1rem;
    font-family: 'Italianno', cursive;
    color: var(--colorRosa);
}

.image-servicio img {
    border: 6px solid var(--colorBlanco);
    -webkit-transition: transform .3s ease;
    -ms-transition: transform .3s ease;
    transition: transform .3s ease;
}

.image-servicio img:hover {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);    
    transform: scale(1.1);
    box-shadow: 2px 2px 10px #666;
}

.servicio-info {
    background-color: var(--colorBlanco);
    margin-top: -5rem;
}

.servicio-info .btn-primary {
    border-radius: 0;
    background-color: var(--colorRosa) ;
    border: none;
}

Espero vuestros comentarios y aportaciones en la sección de contactos de este artículo.

Dejar respuesta

Please enter your comment!
Please enter your name here