<style> * { box-sizing: border-box; font-family: "Helvetica", sans-serif; font-size: 12px; line-height: 18px; } body { background-color: #F8E5DC; color: #FF0000; margin: 0; padding: 0; } .container { width: 100%; max-width: 800px; margin: 40px auto; padding: 20px; border: 4px solid #FF0000; } .title { font-size: 24px; font-weight: bold; color: #000000; text-align: center; margin: 0; padding: 10px; background-color: #FFC080; border-bottom: 2px solid #FF0000; } .work { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; padding: 20px 0; } .work-item { width: 25%; margin: 20px 10px; border: 2px solid #FF0000; background-color: #F7F7F7; padding: 10px 20px; text-align: center; } .work-item img { width: 80%; height: 100%; object-fit: cover; border: 4px solid #FF0000; } .link { text-decoration: none; color: #000000; background-color: #FFC080; border: 1px solid #FF0000; border-radius: 4px; padding: 2px 6px; font-size: 14px; display: inline-block; } </style> </head> <body> <div class="container"> <h1 class="title">Attendee 1's Works</h1> <div class="work"> <div class="work-item"> <a class="link" href="/meetings/attendee1/projects/1">Project 1: "The Great Sausage" (2022)</a> <img src="https://example.com/works/1/1.jpg" alt="Project 1: The Great Sausage"> </div> <div class="work-item"> <a class="link" href="/meetings/attendee1/ideas/2">Idea 2: "Infinite Pigeonholes" (2021)</a> <img src="https://example.com/works/2/2.jpg" alt="Idea 2: Infinite Pigeonholes"> </div> <div class="work-item"> <a class="link" href="/meetings/attendee1/ideas/3">Idea 3: "Automaton Disco Ball" (2020)</a> <img src="https://example.com/works/3/3.jpg" alt="Idea 3: Automaton Disco Ball"> </div> </div> </div> </body> </html>