پایان صفحه باید راه تماس رو واضح نگه داره و بعد با یک فوتر کوتاه بسته بشه. لینک ایمیل با mailto معنی خودش رو در HTML داره؛ CSS فقط ظاهرش رو شبیه یک کنش مشخص می‌کنه. لازم نیست برای هر ظاهر دکمه‌ای، تگ button انتخاب کنیم. اگر کار اصلی رفتن به یک مقصد است، لینک همچنان انتخاب معنی‌دارتریه.
توی مثال، لینک تماس یک گروه کتابخوانی از بقیه متن جدا شده. پروژه ما لینک ایمیل شخصی و یک جمله کوتاه پایین صفحه داره. خطای رایج حذف href برای آسان‌شدن استایله؛ در اون حالت جزء ممکنه شبیه لینک دیده بشه ولی مقصدش رو از دست می‌ده. برای اینکه فضای داخلی لینک به شکل جعبه رفتار کنه از inline-block استفاده می‌کنیم. فوتر با رنگ خنثی و تراز وسط، سلسله‌مراتب آرام‌تری پیدا می‌کنه. در این تمرین ارسال پیام واقعی یا بازشدن نرم‌افزار ایمیل بررسی نمی‌شه؛ فقط مقصد HTML و ظاهر ثابت اجزا اهمیت داره.
✍️ مثال حل‌شده:
<a class="mail" href="mailto:club@example.com">تماس با گروه</a>
<style>.mail { display:inline-block; padding:8px 12px; background:teal; color:white; border-radius:6px; }</style>
حالا نوبت توئه: بخش #contact باید background-color:white و padding:20px داشته باشد. لینک .contact-button با href="mailto:sara@example.com" باید display:inline-block، زمینه navy، متن white و padding:10px 16px بگیرد. فوتر .site-footer باید text-align:center و color:#475569 داشته باشد. متن‌ها و مقصد لینک را حفظ کن؛ ارسال واقعی ایمیل در این فعالیت لازم نیست.
فعالیت شما
بخش #contact باید background-color:white و padding:20px داشته باشد. لینک .contact-button با href="mailto:sara@example.com" باید display:inline-block، زمینه navy، متن white و padding:10px 16px بگیرد. فوتر .site-footer باید text-align:center و color:#475569 داشته باشد. متن‌ها و مقصد لینک را حفظ کن؛ ارسال واقعی ایمیل در این فعالیت لازم نیست.