<link rel="stylesheet" href="componentes/leerMasArticulos/style_leerMasArticulos.css">

  <!-- Main Content -->
    <main class="container d-flex">
        <div class="row">
            <!-- Artículo 1 -->
            <div class="col-lg-6 mb-4">
                <article class="blog-cardLeermas h-100" >
                    <img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" class="card-img-top" alt="Desarrollo Web">
                    <div class="card-bodyLeermas" style="border:1px solid black;">
                        <div class="post-meta mb-2">
                            <span><i class="far fa-calendar me-1"></i> 15 Junio 2023</span>
                            <span class="ms-3"><i class="far fa-clock me-1"></i> 5 min lectura</span>
                        </div>
                        <h3 class="card-titleLeermas">Introducción a Bootstrap 5 y sus Nuevas Características</h3>
                        <div class="tags mb-3">
                            <span class="tagLeermas">Bootstrap</span>
                            <span class="tagLeermas">Frontend</span>
                            <span class="tagLeermas">CSS</span>
                        </div>
                        
                        <input type="checkbox" class="read-more-state" id="post-1" />
                        
                        <div class="read-more-wrap " style="border: 1px solid black;">
                            <div class="fade-content">
                                <p class="card-textLeermas">Bootstrap 5 ha llegado con muchas características emocionantes para los desarrolladores frontend. La última versión del framework CSS más popular del mundo trae consigo importantes cambios y mejoras.</p>
                                
                                <div class="read-more-target">
                                    <p>Una de las novedades más significativas es la eliminación de la dependencia de jQuery, lo que permite crear aplicaciones más modernas y ligeras. Además, se ha mejorado el sistema de grid con nuevas opciones y utilidades.</p>
                                    <p>El sistema de formularios también ha sido completamente renovado, ofreciendo más personalización y controles más accesibles. Los componentes personalizados ahora son más fáciles de implementar y extender.</p>
                                    <p>Otra mejora importante es la optimización para dispositivos móviles, con un enfoque "mobile-first" más pronunciado que en versiones anteriores. Las utilidades CSS han sido expandidas, ofreciendo más control sobre el diseño.</p>
                                    <p>La documentación ha sido completamente actualizada, con ejemplos más claros y mejores prácticas para implementar componentes complejos.</p>
                                </div>
                                <div class="fade-effectLeermas"></div>
                            </div>
                        </div>
                        
                        <label for="post-1" class="read-more-trigger"></label>
                        
                        <div class="divider"></div>
                        
                        <div class="author">
                            <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1160&q=80" alt="Autor" class="author-img">
                            <div>
                                <strong>Carlos Mendoza</strong>
                                <div class="post-meta">Desarrollador Frontend</div>
                            </div>
                        </div>
                    </div>
                </article>
            </div>
            
        
        </div>
    </main>

    <!-- Footer -->
    <footer class="blog-footerLeermas text-center">
        <div class="container">
            <p>© 2023 Blog de Tecnología. Todos los derechos reservados.</p>
            <div class="mt-3">
                <a href="#" class="text-light mx-2"><i class="fab fa-twitter fa-lg"></i></a>
                <a href="#" class="text-light mx-2"><i class="fab fa-facebook-f fa-lg"></i></a>
                <a href="#" class="text-light mx-2"><i class="fab fa-linkedin-in fa-lg"></i></a>
                <a href="#" class="text-light mx-2"><i class="fab fa-github fa-lg"></i></a>
            </div>
        </div>
    </footer>
