excursions

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
excursions [2024/11/05 13:22] – ayushexcursions [2025/03/29 20:12] (current) – ayush
Line 3: Line 3:
     <style>     <style>
         .research-container {         .research-container {
-            max-width: 70%;+            max-width: 90%; /* Slightly wider container */
             margin: 0 auto;             margin: 0 auto;
 +            padding: 20px 0;
         }         }
         .research-grid {         .research-grid {
             display: flex;             display: flex;
             flex-wrap: wrap;             flex-wrap: wrap;
-            gap: 35px; /* Increased space between cards */ +            gap: 35px; 
-            justify-content: space-between;+            justify-content: flex-start;
         }         }
         .research-card {         .research-card {
-            flex: 1 1 calc(33.333% - 30px);+            flex: 0 0 calc(25% - 26.25px); /* 4 columns accounting for gap */
             background-color: #eeeeee;             background-color: #eeeeee;
             border-radius: 10px;             border-radius: 10px;
             box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);             box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
             padding: 30px;             padding: 30px;
-            text-align: left;+            margin-bottom: 35px; /* Ensures vertical spacing */
             transition: transform 0.2s ease;             transition: transform 0.2s ease;
-            display: flex; +            box-sizing: border-box;
-            flex-direction: column; +
-            justify-content: space-between;+
         }         }
-         
-        .research-card a { 
-    text-decoration: none; 
-    color: rgb(0, 123, 255); 
-    transition: color 0.3s ease; 
-} 
- 
-.research-card a:hover { 
-    color: rgb(0, 100, 210); /* Slightly darker color on hover */ 
-} 
  
 +        /* Maintain aspect ratio for images */
         .research-card img {         .research-card img {
-            display: block; 
-            margin: 0 auto; 
             width: 100%;             width: 100%;
             height: 250px;             height: 250px;
-            object-fit: cover;;+            object-fit: cover;
             border-radius: 10px;             border-radius: 10px;
-            margin-bottom: 20px; /* Space below image */+            margin-bottom: 20px;
         }         }
-        .research-card h3 { 
  
 +        /* Responsive Design */
 +        @media (max-width: 1200px) {
 +            .research-card {
 +                flex: 0 0 calc(33.333% - 23.33px); /* 3 columns */
 +            }
 +        }
 +        @media (max-width: 992px) {
 +            .research-card {
 +                flex: 0 0 calc(50% - 17.5px); /* 2 columns */
 +            }
 +        }
 +        @media (max-width: 768px) {
 +            .research-container {
 +                max-width: 95%;
 +            }
 +            .research-card {
 +                flex: 0 0 100%; /* 1 column */
 +            }
 +        }
 +
 +        /* Existing hover and text styles remain unchanged */
 +        .research-card a {
 +            text-decoration: none;
 +            color: rgb(0, 123, 255);
 +            transition: color 0.3s ease;
 +        }
 +        .research-card a:hover {
 +            color: rgb(0, 100, 210);
 +        }
 +        .research-card h3 {
             margin: 15px 0;             margin: 15px 0;
         }         }
         .research-card p {         .research-card p {
- 
             color: #666;             color: #666;
             margin-bottom: 10px;             margin-bottom: 10px;
Line 55: Line 71:
         .research-card:hover {         .research-card:hover {
             transform: scale(1.01);             transform: scale(1.01);
-        } 
-        /* Responsive adjustments */ 
-        @media (max-width: 900px) { 
-            .research-card { 
-                flex: 1 1 calc(50% - 30px); 
-            } 
-        } 
-        @media (max-width: 600px) { 
-            .research-card { 
-                flex: 1 1 100%; 
-            } 
         }         }
     </style>     </style>
Line 125: Line 130:
                 <p><strong>Place:</strong> Ludwig-Maximilians-University of Munich (LMU), Germany</p>                 <p><strong>Place:</strong> Ludwig-Maximilians-University of Munich (LMU), Germany</p>
                 <p><strong>Time Period:</strong> 13.11.2023 - 17.11.2023</p>                 <p><strong>Time Period:</strong> 13.11.2023 - 17.11.2023</p>
 +                <p><strong>Funded by:</strong> PROM Network Funds</p>
 +            </div>
 +            
 +            <div class="research-card">
 +                <a href="https://www2.meteo.uni-bonn.de/spp2115/doku.php?id=excursions:dwd_soumi_dutta">
 +                    <img src="https://www2.meteo.uni-bonn.de/spp2115/lib/exe/fetch.php?media=excursions:research_stay_dwd_soumi_1.png" alt="Deutscher Wetterdienst (DWD), Offenbach">
 +                    <h3>Dr. Soumi Dutta (University of Cologne)</h3>
 +                </a>
 +                <p><strong>Place:</strong> Deutscher Wetterdienst (DWD), Offenbach</p>
 +                <p><strong>Time Period:</strong> 21.10.2024 - 25.10.2024</p>
                 <p><strong>Funded by:</strong> PROM Network Funds</p>                 <p><strong>Funded by:</strong> PROM Network Funds</p>
             </div>             </div>
  • excursions.txt
  • Last modified: 2025/03/29 20:12
  • by ayush