Arabic Personal Website - Copy this Html, Tailwind Component to your project
<!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <title>موقعي</title> <style> body { font family: Arial, sans serif; margin: 0; padding: 0; direction: rtl; } header { background color: #007BFF; color: white; padding: 15px; text align: center; position: relative; } .language toggle { position: absolute; top: 15px; left: 15px; background color: white; color: #007BFF; border: none; padding: 5px 10px; cursor: pointer; border radius: 5px; } nav { background color: #f4f4f4; padding: 10px 15px; } nav ul { list style: none; padding: 0; margin: 0; display: flex; justify content: flex start; } nav ul li { margin right: 15px; } nav ul li a { text decoration: none; color: #007BFF; } main { padding: 20px; } footer { text align: center; background color: #f4f4f4; padding: 10px; position: fixed; bottom: 0; width: 100%; } </style> </head> <body> <header> <h1>موقعي الشخصي</h1> <button class="language toggle" onclick="toggleLanguage()">EN</button> </header> <nav> <ul> <li><a href="#about">عن نفسي</a></li> <li><a href="#tech">التقنيات</a></li> </ul> </nav> <main> <section id="about"> <h2>عن نفسي</h2> <p>مرحباً! أنا شخص أحب مشاركة المعرفة ومساعدة الآخرين على التعلم.</p> </section> <section id="tech"> <h2>التقنيات</h2> <p>أنا مهتم بتعلم أحدث التقنيات وتطبيقها في المشاريع العملية.</p> </section> </main> <footer> <p>© 2025 موقعي الشخصي</p> </footer> <script> function toggleLanguage() { const html = document.documentElement; const currentLang = html.lang; if (currentLang === 'ar') { html.lang = 'en'; html.dir = 'ltr'; document.querySelector('.language toggle').textContent = 'AR'; } else { html.lang = 'ar'; html.dir = 'rtl'; document.querySelector('.language toggle').textContent = 'EN'; } } </script> </body> </html>
