Run ❯
Get your
own
website
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <meta charset="UTF-8"> <title>موقعي العربي</title> <link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css"> <style> /* Optional: Better font for Arabic */ body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } </style> </head> <body class="w3-rtl"> <!-- Header --> <header class="w3-container w3-teal w3-center w3-padding-32"> <h1>مرحبا بك في موقعي</h1> <p>موقع بسيط باستخدام W3.CSS ودعم RTL</p> </header> <!-- Sidebar --> <nav class="w3-sidebar w3-bar-block w3-light-grey w3-card" style="width:200px; right:0;"> <h3 class="w3-bar-item">القائمة</h3> <a href="#" class="w3-bar-item w3-button">الرئيسية</a> <a href="#" class="w3-bar-item w3-button">حول</a> <a href="#" class="w3-bar-item w3-button">خدمات</a> <a href="#" class="w3-bar-item w3-button">اتصل بنا</a> </nav> <!-- Main content --> <main style="margin-right:200px" class="w3-container"> <h2>محتوى الصفحة</h2> <p>هذا مثال على صفحة RTL تحتوي على رأس، شريط جانبي، ومحتوى رئيسي.</p> <div class="w3-card w3-padding w3-margin-top"> <h3>مقالة مميزة</h3> <p>يمكنك استخدام W3.CSS لتصميم صفحات عربية بسرعة وسهولة.</p> </div> </main> </body> </html>
