اجرا ❯
بازگشت
به
آموزشگاه
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!DOCTYPE html> <html dir="rtl"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; font-family: Arial, Helvetica, sans-serif; } .hero-image { background: url(other/img_man.jpg) no-repeat center; background-size: cover; height: 500px; position: relative; } .hero-text { text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; } </style> </head> <body> <div class="hero-image"> <div class="hero-text"> <h1 style="font-size:50px">مولانا جلال الدین محمد بلخی</h1> <h3>بزرگترین شاعر ایران</h3> <button>کلیک کنید</button> </div> </div> <p>محتوای صفحه</p> <p>توجه کنید که این روش همچنین باعث می شود تصویر ما واکنش گرا شود: پنجره ی مرورگر را تغییر اندازه دهید تا تاثیر را مشاهده کنید.</p> </body> </html>
