Action Items: Progress 2</ <style> /* Add some brutalist flair to the page */ body { background-color: #f7d2c9; font-family: 'Open Sans', sans-serif; margin: 0; padding: 0; } /* Make the text look like it's on a old computer monitor */ .text { font-size: 12px; font-weight: bold; letter-spacing: 1px; word-spacing: 2px; text-transform: uppercase; } /* Add some visual interest to the links */ a { text-decoration: none; color: #000; background-color: #fff; border: 4px solid #000; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } /* Make the progress bar look like an old computer progress bar */ .progress-bar { border: 2px solid #000; padding: 2px 4px; width: 50%; background-color: #ccc; border-radius: 10px; } /* Style the clock */ .clock { font-size: 24px; font-weight: bold; font-family: monospace; text-align: center; background-color: #f7d2c9; } </style> </head> <body> <h1 class="text">Action Items Progress 2</h1> <p class="text">Progress: 34% <span class="progress-bar"><span style="width: 34%;"></span></span></p> <p class="text">Last updated: <span class="clock">11:32 AM</span></p> <p class="text">Next update: <a href="/action-items/2022-02-01/11:20-11:35/progress-3">Progress 3</a></p> <p class="text">Action Items: <a href="/action-items">All Progress</a> | <a href="/action-items/2022-02-01">Today's Action Items</a></p> <p class="text">Action Items: <a href="/action-items/2022-02-01/11:20-11:35">Progress 1</a> | <a href="/action-items/2022-02-01/11:20-11:35/progress-2">Progress 2</a> | <a href="/action-items/2022-02-01/11:20-11:35/progress-3">Progress 3</a></p> <p class="text">Action Items progress is brought to you by <a href="/about">The Action Item Initiative</a></p> </body> </html>