fix evenst past

Author: pablolirag

assets/css/base.css

@@ -1,3 +1,5 @@
+/* 
+
 body {
     background: rgb(248, 249, 250);
     text-align: center;
@@ -28,7 +30,7 @@ button {
 header {
     position: relative;
 }
-
+*/
 section {
     background-color: #f8f9fa;
     padding: 3rem 0;

assets/css/main.css

@@ -1,3 +1,4 @@
+/* 
 .main-logo {
     height: 256px;
 }
@@ -17,6 +18,7 @@
 .past-events div {
     margin: 32px;
 }
+ */
 
 /* Estilos para el logo centrado en el carrusel */
 .logo-overlay {
@@ -204,3 +206,75 @@
     object-fit: cover;
 }
 
+/* Estilos para la sección de Eventos Pasados */
+#eventos-pasados {
+    background-color: #f8f9fa;
+    padding: 3rem 0;
+}
+
+#eventos-pasados h2 {
+    font-size: 2.5rem;
+    color: #343a40;
+    margin-bottom: 2rem;
+}
+
+.event-link {
+    text-decoration: none;
+    color: inherit;
+}
+
+.event-card {
+    overflow: hidden;
+    border-radius: 10px;
+    transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s;
+  /*   background-color: #fff; Fondo blanco para separar las imágenes del fondo general */
+    background-color: #e9ecef;
+
+    padding: 1rem;
+}
+
+.event-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+    background-color:#c1daf0 ;
+}
+
+.event-img {
+    width: 100%;
+    height: auto;
+    border-radius: 10px;
+    transition: transform 0.3s;
+}
+
+.event-card:hover .event-img {
+    transform: scale(1.05);
+}
+
+.event-title {
+    margin-top: 1rem;
+    font-size: 1.25rem;
+    color: #343a40;
+}
+
+@media (max-width: 767px) {
+    .col-6{
+        flex: 0 0 33.3333%;
+        max-width: 33.3333%;
+    }
+
+    .event-img {
+        height: 250px;
+    }
+
+    .event-title {
+        font-size: 1rem;
+    }
+}
+
+@media (min-width: 768px) and (max-width: 991px) {
+
+    .event-img {
+        height: 250px;
+        
+    }
+}

assets/sections/past_events.html

@@ -1,23 +1,35 @@
-<div class="dark-background">
-    <h1>Eventos Pasados</h1>
-    <div class="past-events">
-        <a href="/2020">
-            <div>
-                <img class="past-logo" src="assets/logos/pythonchile.svg"/>
-                <div>PyDay 2020</div>
+<!-- Nueva Sección de Eventos Pasados -->
+<section class="py-5" id="eventos-pasados">
+    <div class="container">
+        <h2 class="text-center mb-4">Eventos Pasados</h2>
+        <div class="row justify-content-center">
+            <!-- Evento 1 -->
+            <div class="col-6 col-md-4 mb-4">
+                <a href="https://example.com/2020" target="_blank" class="event-link">
+                    <div class="event-card text-center">
+                        <img src="assets/logos/pythonchile.svg" class="img-fluid event-img" alt="PyDay 2020">
+                        <div class="event-title">PyDay 2020</div>
+                    </div>
+                </a>
             </div>
-        </a>
-        <a href="/2022">
-            <div>
-                <img class="past-logo" src="assets/logos/old_logo.png"/>
-                <div>PyDay 2022</div>
+            <!-- Evento 2 -->
+            <div class="col-6 col-md-4 mb-4">
+                <a href="https://example.com/2022" target="_blank" class="event-link">
+                    <div class="event-card text-center">
+                        <img src="assets/logos/old_logo.png" class="img-fluid event-img" alt="PyDay 2022">
+                        <div class="event-title">PyDay 2022</div>
+                    </div>
+                </a>
             </div>
-        </a>
-        <a href="/2023">
-            <div>
-                <img class="past-logo" src="assets/logos/old_logo.png"/>
-                <div>PyDay 2023</div>
+            <!-- Evento 3 -->
+            <div class="col-6 col-md-4 mb-4">
+                <a href="https://example.com/2023" target="_blank" class="event-link">
+                    <div class="event-card text-center">
+                        <img src="assets/logos/old_logo.png" class="img-fluid event-img" alt="PyDay 2023">
+                        <div class="event-title">PyDay 2023</div>
+                    </div>
+                </a>
             </div>
-        </a>
+        </div>
     </div>
-</div>
+</section>