GALERIA FOTOS ESTILO GRILLA GRID CSS RESPONSIVE

 *{

padding: 0;

margin: 0;

box-sizing: border-box;

font-family: 'Montserrat', sans-serif;

text-decoration: none;

list-style: none;

scroll-behavior: smooth;

}


:root{

--bg-color: #ffffff;

--text-color: #121212;

--main-font: 2.2rem;

--p-font: 1.1rem;

}

body{

background: var(--bg-color);

color: var(--text-color);

}

section{

padding: 100px 8%;

border: 8px solid black;

}

.container{

display: grid;

grid-template-columns: repeat(auto-fit, minmax(220px, auto));

align-items: center;

gap: 2rem;

text-align: center;

cursor: pointer;

padding-top: 2rem;

}

.box{

padding: 0px 20px 10px 20px;

background: transparent;

box-shadow: 5px 30px 56.1276px rgb(55 55 55 / 12%);

border-radius: 10px;

position: relative;

transition: all .35s ease;

}

.box img{

width: 100%;

height: auto;

}

.box h4{

font-size: 15px;

letter-spacing: 1px;

margin-bottom: 8px;

}

.box h5{

font-size: 14px;

letter-spacing: 1px;

margin-bottom: 20px;

}


.box:hover{

transform: translateY(-5px);

}


<section>

<div class="container">

<div class="box">


<img src="img/main1.jpg">

<h4>I'm a product</h4>

<h5>$15.00</h5>

</div>

</div>

</section>

Comentarios

Publicar un comentario

Entradas populares de este blog

Copia de Seguridad de Archivo MS Access (.mdb) a Pendrive con VB6

  Copia de Seguridad de Archivo MS Access (.mdb) a Pendrive con VB6   Para crear una copia de seguridad de un archivo MS Access (.mdb) a un pendrive cuando se hace clic en un botón en un formulario VB6, puedes usar el siguiente código: vb Private Sub cmdBackup_Click ()     On Error GoTo ErrorHandler         Dim ArchivoOrigen As String     Dim ArchivoDestino As String     Dim UnidadPendrive As String     Dim FSO As Object     Dim Drv As Object     Dim Existe As Boolean         ' Ruta del archivo de origen (base de datos Access)     ArchivoOrigen = "C:\Ruta\A\Tu\BaseDeDatos.mdb" ' Cambiar por tu ruta real         ' Verificar si el archivo de origen existe     If Dir(ArchivoOrigen) = "" Then         Ms...
Leer más

INSERTAR Y UPDATE FECHA CON PHP MYSQL EN FORMULARIO METODO POST CON JQUERY ETIQUETA DATE

COMO INSERTAR FECHA CON PHP MYSQL EN FORMULARIO METODO POST CON JQUERY ETIQUETA DATE ChatGPT Para insertar una fecha con PHP y MySQL en un formulario usando el método POST con jQuery y la etiqueta date, puedes seguir estos pasos. Asumiré que estás utilizando un formulario HTML con un campo de fecha: Crear el formulario HTML: html Copy code <!DOCTYPE html> <html lang="es"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Formulario de Fecha</title>     <!-- Agregar jQuery -->     <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> </head> <body>     <form id="miFormulario">         <label for="fecha">Fecha:</label>         <input type="date" id="fecha" name="fecha" required>         <but...
Leer más

DETECTAR DIRECCION IP CON PHP Y JS

  Para detectar la IP real del visitante de una página web, puedes hacerlo tanto con PHP como con JavaScript, aunque PHP es más confiable ya que JavaScript ejecuta en el lado del cliente y puede ser manipulado. 1. Detectar la IP con PHP PHP es la mejor opción para obtener la IP, ya que corre en el servidor y no depende del navegador. Sin embargo, la IP obtenida puede estar detrás de un proxy, así que se pueden usar varios encabezados HTTP. php function obtenerIP() {     if (!empty($_SERVER['HTTP_CLIENT_IP'])) {         // IP desde el compartido de Internet         return $_SERVER['HTTP_CLIENT_IP'];     } elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])) {         // IP detrás de un proxy         return $_SERVER['HTTP_X_FORWARDED_FOR'];     } else {         // IP real del usuario         return $_SERVER['REMOTE_ADDR'];     } ...
Leer más