html
<style>
body {
background-color: #FF69B4;
}
a {
text-decoration: none;
font-weight: bold;
font-size: 24px;
color: #FFC0CB;
}
.border {
border: 4px solid black;
border-radius: 10px;
background-color: #FF69B4;
}
.shadow {
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
}
.h1 {
font-family: 'Arial Black';
font-size: 36px;
color: #FFFFFF;
text-align: center;
}
</style>
</head>
<body>
<div class="border">
<h1 class="h1">Attendee 3 - Attendance Controllers</h1>
<p class="shadow">Welcome, Attendee 3! Your presence is <strong>required</strong> at the meeting.</p>
<p class="shadow">However, we cannot guarantee that your presence will make any difference in the grand scheme of things.</p>
<ul>
<li><a href="/meetings/subcommittees/attendance-controllers/attendee-4">Go to Attendee 4</a></li>
<li><a href="/meetings/subcommittees/attendance-controllers/attendee-2">Go to Attendee 2</a></li>
<li><a href="/meetings/subcommittees/attendance-controllers/attendee-1">Go to Attendee 1</a></li>
</ul>
<p class="shadow">Or, if you're feeling adventurous:</p>
<ul>
<li><a href="/meetings/subcommittees/attendance-controllers/attendee-3/secret-attendee">Go to Secret Attendant</a></li>
<li><a href="/meetings/subcommittees/attendance-controllers/attendee-3/alternate-attendee">Go to Alternate Attendee</a></li>
</ul>
</div>
</body>
</html>