<?php 
include("../Admin/conexion.php");
?>

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" ></script>

<script src="../Alert/sweetalert-dev.js"></script>
  <link rel="stylesheet" href="../Alert/sweetalert.css">

<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">

 <!-- ESTILO CURSOS DE PROGRAMACION -->
 <link rel="stylesheet" href="../css/style_cp.css">


<title>Consulta basica</title>
</head>
<body>






<!-- NAVBAR -->
<?php include("../Admin/navbar.php"); ?>
<!-- END NAVBAR -->




<style>
   
        
   



   


        #galeria {
            margin: 1rem auto;
            width:100%;
            max-width:960px;
            padding:0 20px 20px;
            box-sizing: border-box;
            column-count: 3;

            /* Espacio entre columnas */
            -moz-column-gap: 20px;
            -webkit-column-gap: 20px;
            column-gap: 20px;
            
            /* Filete entre columnas */
            /*-moz-column-rule: 1px solid #bbb;
            -webkit-column-rule: 1px solid #bbb;
            column-rule: 1px solid #bbb;*/


        }
        
        #galeria header {
            -webkit-column-span:all;
            column-span:all;
        }

        article {
            background:#fff;
            border-radius:5px;
            border:1px solid #ccc;
            margin:0 0 20px 0;
            text-align: center;
            max-width: 100%;
            filter: opacity(70%);

            /*Evitamos que se corte al cambiar de columna*/
            break-inside: avoid;
            page-break-inside: avoid;         
       
        }
        
        article img {
            width:100%;
        }

        article:hover {
            transition: .5s ease;
            filter: opacity(100%);
        }

        figure {
            padding:1rem;
            box-sizing: border-box;
        }

 
        /* Móviles en horizontal o tablets en vertical */
        @media (max-width: 767px) { 
            #galeria {
                columns:2;
            }

        }
        
        /* Móviles en vertical */

        @media (max-width: 480px) {
            #galeria {
                columns: 1;
            }
        }

    </style>






<!-- sección -->
<div class="center mt-5">
    <div class="card pt-3" >
            <p style="font-weight: bold; color: #0F6BB7; font-size: 22px;">Galería</p>
        <div class="container-fluid mt-2 p-4">

            <div class="card col-12 mt-2">
                <div class="card-body">

                

















 
        <section id="galeria">
    


        <article>
            <a target="_blank" href="https://programaciononline.es/">
                <figure>
                    <img src="imagenes/001.jpg" />
                    <figcaption>imagen</figcaption>
                </figure>
            </a>
        </article>


        <article>
            <a target="_blank" href="https://programaciononline.es/">
                <figure>
                    <img src="imagenes/002.jpg" />
                    <figcaption>imagen</figcaption>
                </figure>
            </a>
        </article>


        <article>
            <a target="_blank" href="https://programaciononline.es/">
                <figure>
                    <img src="imagenes/003.jpg" />
                    <figcaption>imagen</figcaption>
                </figure>
            </a>
        </article>

        <article>
            <a target="_blank" href="https://programaciononline.es/">
                <figure>
                    <img src="imagenes/004.png" />
                    <figcaption>imagen</figcaption>
                </figure>
            </a>
        </article>

        <article>
            <a target="_blank" href="https://programaciononline.es/">
                <figure>
                    <img src="imagenes/005.jpg" />
                    <figcaption>imagen</figcaption>
                </figure>
            </a>
        </article>

        <article>
            <a target="_blank" href="https://programaciononline.es/">
                <figure>
                    <img src="imagenes/006.jpg" />
                    <figcaption>imagen</figcaption>
                </figure>
            </a>
        </article>

        <article>
            <a target="_blank" href="https://programaciononline.es/">
                <figure>
                    <img src="imagenes/007.jpg" />
                    <figcaption>imagen</figcaption>
                </figure>
            </a>
        </article>

        <article>
            <a target="_blank" href="https://programaciononline.es/">
                <figure>
                    <img src="imagenes/008.jpg" />
                    <figcaption>imagen</figcaption>
                </figure>
            </a>
        </article>

        <article>
            <a target="_blank" href="https://programaciononline.es/">
                <figure>
                    <img src="imagenes/009.jpg" />
                    <figcaption>imagen</figcaption>
                </figure>
            </a>
        </article>

        <article>
            <a target="_blank" href="https://programaciononline.es/">
                <figure>
                    <img src="imagenes/010.jpg" />
                    <figcaption>imagen</figcaption>
                </figure>
            </a>
        </article>

        <article>
            <a target="_blank" href="https://programaciononline.es/">
                <figure>
                    <img src="imagenes/011.jpg" />
                    <figcaption>imagen</figcaption>
                </figure>
            </a>
        </article>

        <article>
            <a target="_blank" href="https://programaciononline.es/">
                <figure>
                    <img src="imagenes/012.png" />
                    <figcaption>imagen</figcaption>
                </figure>
            </a>
        </article>

        <article>
            <a target="_blank" href="https://programaciononline.es/">
                <figure>
                    <img src="imagenes/013.jpg" />
                    <figcaption>imagen</figcaption>
                </figure>
            </a>
        </article>

        <article>
            <a target="_blank" href="https://programaciononline.es/">
                <figure>
                    <img src="imagenes/014.jpg" />
                    <figcaption>imagen</figcaption>
                </figure>
            </a>
        </article>

        <article>
            <a target="_blank" href="https://programaciononline.es/">
                <figure>
                    <img src="imagenes/015.jpg" />
                    <figcaption>imagen</figcaption>
                </figure>
            </a>
        </article>

        <article>
            <a target="_blank" href="https://programaciononline.es/">
                <figure>
                    <img src="imagenes/016.jpg" />
                    <figcaption>imagen</figcaption>
                </figure>
            </a>
        </article>
 
         
       

         


        </section>








 






                </div>
            </div>

        </div>

      </div>
</div>
<!-- END sección -->







</body>
</html>








