<!DOCTYPE html>
<html lang=”en”>
<head>
<metacharset=”UTF-8″>
<metaname=”viewport”content=”width=device-width, initial-scale=1.0″>
<title>A Message for APU Students</title>
<!– Tailwind CSS for styling –>
<scriptsrc=”https://cdn.tailwindcss.com”></script>
<!– Google Fonts: Inter –>
<linkrel=”preconnect”href=”https://fonts.googleapis.com”>
<linkrel=”preconnect”href=”https://fonts.gstatic.com”crossorigin>
<linkhref=”https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap”rel=”stylesheet”>
<style>
/* Applying the Inter font to the body */
body{
font-family:’Inter’,sans-serif;
}
</style>
</head>
<body class=”bg-gray-100 flex items-center justify-center min-h-screen”>
<!– Main Card Container –>
<divclass=”max-w-sm w-full bg-white rounded-2xl shadow-lg p-8 m-4 transform transition-all hover:scale-105 duration-300″>
<divclass=”text-center”>
<!– Icon –>
<divclass=”mx-auto flex items-center justify-center h-16 w-16 bg-blue-100 rounded-full”>
<svgxmlns=”http://www.w3.org/2000/svg”class=”h-8 w-8 text-blue-600″fill=”none”viewBox=”0 0 24 24″stroke=”currentColor”stroke-width=”2″>
<pathstroke-linecap=”round”stroke-linejoin=”round”d=”M21 15.546c-.523 0-1.046.151-1.5.454a2.704 2.704 0 01-3 0 2.704 2.704 0 00-3 0 2.704 2.704 0 01-3 0 2.704 2.704 0 00-3 0c-.454-.303-.977-.454-1.5-.454V5.546c.523 0 1.046-.151 1.5-.454a2.704 2.704 0 013 0 2.704 2.704 0 003 0 2.704 2.704 0 013 0 2.704 2.704 0 003 0c.454.303.977.454 1.5.454v10z”/>
</svg>
</div>
<!– Main Heading –>
<h1class=”mt-6 text-2xl font-bold text-gray-900″>
A Note for APU Students
</h1>
<!– Message Body –>
<pclass=”mt-4 text-gray-600″>
If you are a student from <span class=”font-semibold text-gray-800″>Ritsumeikan Asia Pacific University</span>, I’ve got a simple proposition for you.
</p>
<!– Emphasized Quote –>
<blockquoteclass=”mt-4 p-4 bg-gray-50 rounded-lg border-l-4 border-blue-500″>
<pclass=”text-lg italic font-medium text-gray-800″>
“Just cook me your famous dish and we’re good!”
</p>
</blockquote>
<!– Call-to-action Button/Link –>
<ahref=”https://drive.google.com/drive/folders/1yG0htq8TMty_UQAwNYSp7QX9Kl0UYxFD?usp=sharing”
target=”_blank”
rel=”noopener noreferrer”
class=”mt-8 inline-block w-full bg-blue-600 text-white font-bold py-3 px-6 rounded-lg shadow-md hover:bg-blue-700 transition duration-300 ease-in-out transform hover:-translate-y-1″>
Download the Details
</a>
</div>
</div>
</body>
</html>