سأقوم بدمج كود CSS داخل كود HTML حتى يكون من السهل نسخه وتشغيله مباشرةً كملف HTML كامل. ```html <!DOCTYPE html> <html> <head> <title>Web Page</title> <script src="https://c...content-available-to-author-only...s.com"></script> <link href="https://c...content-available-to-author-only...e.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/> <style> /* إعدادات عامة */ body { background-color: #1a1a1a; font-family: 'Arial', sans-serif; color: #ffffff; margin: 0; padding: 0; overflow-x: hidden; } /* تنسيقات الهيدر */ .header-container { display: flex; justify-content: space-between; width: 100%; padding: 0 16px; margin-bottom: 16px; } .profile-info { display: flex; align-items: center; } .profile-info img { border-radius: 50%; width: 48px; height: 48px; margin-right: 8px; } .profile-info span { font-size: 1.125rem; font-weight: bold; } .gem-info { display: flex; align-items: center; background-color: #333333; padding: 8px 16px; border-radius: 50px; color: #a9a9a9; margin-right: 8px; } .gem-info i { color: #4a90e2; margin-right: 4px; } .gem-info span { color: #ffffff; } .settings-icon i { color: #a9a9a9; } /* زر الذكريات */ .memories-btn { display: flex; width: 100%; margin-bottom: 16px; } .memories-btn button { background-color: #6b46c1; color: #ffffff; padding: 8px 16px; border-radius: 50px; display: flex; align-items: center; } .memories-btn i { margin-right: 8px; } /* قسم "الجديد اليوم" */ .new-today-section { width: 100%; margin-bottom: 16px; text-align: center; } .new-today-section h2 { font-size: 1.25rem; font-weight: bold; margin-bottom: 8px; } .new-today-items { display: flex; justify-content: space-around; } .item-box { background-color: #333333; padding: 16px; border-radius: 8px; width: 30%; text-align: center; } .item-box img { border-radius: 8px; width: 100px; height: 100px; margin-bottom: 8px; } .item-box span { display: block; font-size: 0.875rem; color: #ffffff; margin-top: 4px; } display: flex; align-items: center; justify-content: center; margin-top: 8px; } color: #4a90e2; margin-right: 4px; } /* عرض الماس */ font-size: 1.875rem; font-weight: bold; color: #4a90e2; text-align: center; margin-bottom: 16px; } font-size: 2rem; } /* الشخصية الرئيسية */ .main-character { display: flex; justify-content: center; margin-bottom: 16px; } .main-character img { width: 200px; height: 200px; border-radius: 50%; padding: 4px; background: linear-gradient(to right, #4a90e2, #6b46c1); } /* شريط التنقل */ .navbar { display: flex; justify-content: space-around; align-items: center; background-color: #333333; padding: 12px 0; width: 100%; position: fixed; bottom: 0; } .nav-item { display: flex; flex-direction: column; align-items: center; color: #a9a9a9; } .nav-item.active { color: #4a90e2; } .nav-item i { margin-bottom: 4px; font-size: 1.25rem; } .nav-item span { font-size: 0.875rem; } /* التأثيرات عند التحريك */ .memories-btn button:hover, .item-box:hover, .nav-item:hover { background-color: #6b46c1; color: #ffffff; cursor: pointer; } </style> </head> <body class="text-white"> <div class="flex flex-col items-center p-4"> <div class="header-container"> <div class="profile-info"> <img alt="Profile picture of a dog in a suit" src="https://s...content-available-to-author-only...s.com/a1aa/image/Z2Qtjgm0G27HH5pQ3vsGKr1rjEbvHxZisEenttKUJPwIsa1JA.jpg"/> <span>Jo Jo (CEO)</span> </div> <div class="flex items-center"> <div class="gem-info"> <i class="fas fa-gem"></i> <span>+1.32</span> <i class="fas fa-info-circle ml-2"></i> </div> <i class="fas fa-cog settings-icon"></i> </div> </div> <!-- Memories Button --> <div class="memories-btn"> <button> <i class="fas fa-heart"></i> <span>Memories</span> </button> </div> <!-- New Today Section --> <div class="new-today-section"> <h2>New today</h2> <div class="new-today-items"> <div class="item-box"> <img alt="Cartoon hamster holding a pumpkin" src="https://s...content-available-to-author-only...s.com/a1aa/image/xKNPv2zehepSm08euW3eob1bJ7EiiJhtJUl0eqA1sT5eDWt6E.jpg"/> <span>Merge Away</span> <div class="gem-count"> <i class="fas fa-gem"></i> <span>x3</span> </div> </div> <div class="item-box"> <img alt="Cartoon hamster with multiplication and subtraction signs" src="https://s...content-available-to-author-only...s.com/a1aa/image/eiUWGTfo5vskKEWvu0HJIPW6fyEJD4eBMHapcDwcGbfFCrWdC.jpg"/> <div class="gem-count"> <i class="fas fa-gem"></i> <span>x3</span> </div> </div> <div class="item-box"> <img alt="Cartoon hamster dressed as a ninja" src="https://s...content-available-to-author-only...s.com/a1aa/image/gvlejpPuHTyIR6VfaUPx8iwct1EAi1qgNqLDjOY7sdgTY1qTA.jpg"/> <span>Tower Defence</span> <div class="gem-count"> <i class="fas fa-gem"></i> <span>x3</span> </div> </div> </div> </div> <div class="diamond-count"> <i class="fas fa-gem"></i> <span>22.03</span> </div> <!-- Main Character --> <div class="main-character"> <img alt="Cartoon hamster in a black hoodie with arms crossed" src="https://s...content-available-to-author-only...s.com/a1aa/image/sLBSYwlKte2WbKzmcTfDYHc6QZB2wOJ4TVk8xSKoXShUY1qTA.jpg"/> </div> <!-- Navigation Bar --> <div class="navbar"> <div class="nav-item"> <i class="fas fa-exchange-alt text-blue-400"></i> <span>Exchange</span> </div> <div class="nav-item"> <i class="fas fa-gamepad"></i> <span>Playground</span> </div> <div class="nav-item"> <i class="fas fa-coins text-yellow-400"></i> <span>AirDrop</span> </div> <div class=" nav-item"> <i class="fas fa-user-friends"></i> <span>Friends</span> </div> <div class="nav-item"> <i class="fas fa-gem"></i> <span>Earn</span> </div> </div> </div> </body> </html> ``` يمكنك نسخ الكود بالكامل ولصقه في ملف HTML جديد وتجربته مباشرة في المتصفح.
H
سأقوم بدمج كود CSS داخل كود HTML حتى يكون من السهل نسخه وتشغيله مباشرةً كملف HTML كامل. ```html <!DOCTYPE html> <html> <head> <title>Web Page</title> <script src="https://c...content-available-to-author-only...s.com"></script> <link href="https://c...content-available-to-author-only...e.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/> <style> /* إعدادات عامة */ body { background-color: #1a1a1a; font-family: 'Arial', sans-serif; color: #ffffff; margin: 0; padding: 0; overflow-x: hidden; } /* تنسيقات الهيدر */ .header-container { display: flex; justify-content: space-between; width: 100%; padding: 0 16px; margin-bottom: 16px; } .profile-info { display: flex; align-items: center; } .profile-info img { border-radius: 50%; width: 48px; height: 48px; margin-right: 8px; } .profile-info span { font-size: 1.125rem; font-weight: bold; } .gem-info { display: flex; align-items: center; background-color: #333333; padding: 8px 16px; border-radius: 50px; color: #a9a9a9; margin-right: 8px; } .gem-info i { color: #4a90e2; margin-right: 4px; } .gem-info span { color: #ffffff; } .settings-icon i { color: #a9a9a9; } /* زر الذكريات */ .memories-btn { display: flex; justify-content: flex-end; width: 100%; margin-bottom: 16px; } .memories-btn button { background-color: #6b46c1; color: #ffffff; padding: 8px 16px; border-radius: 50px; display: flex; align-items: center; } .memories-btn i { margin-right: 8px; } /* قسم "الجديد اليوم" */ .new-today-section { width: 100%; margin-bottom: 16px; text-align: center; } .new-today-section h2 { font-size: 1.25rem; font-weight: bold; margin-bottom: 8px; } .new-today-items { display: flex; justify-content: space-around; } .item-box { background-color: #333333; padding: 16px; border-radius: 8px; width: 30%; text-align: center; } .item-box img { border-radius: 8px; width: 100px; height: 100px; margin-bottom: 8px; } .item-box span { display: block; font-size: 0.875rem; color: #ffffff; margin-top: 4px; } .item-box .gem-count { display: flex; align-items: center; justify-content: center; margin-top: 8px; } .item-box .gem-count i { color: #4a90e2; margin-right: 4px; } /* عرض الماس */ .diamond-count { font-size: 1.875rem; font-weight: bold; color: #4a90e2; text-align: center; margin-bottom: 16px; } .diamond-count i { font-size: 2rem; } /* الشخصية الرئيسية */ .main-character { display: flex; justify-content: center; margin-bottom: 16px; } .main-character img { width: 200px; height: 200px; border-radius: 50%; padding: 4px; background: linear-gradient(to right, #4a90e2, #6b46c1); } /* شريط التنقل */ .navbar { display: flex; justify-content: space-around; align-items: center; background-color: #333333; padding: 12px 0; width: 100%; position: fixed; bottom: 0; } .nav-item { display: flex; flex-direction: column; align-items: center; color: #a9a9a9; } .nav-item.active { color: #4a90e2; } .nav-item i { margin-bottom: 4px; font-size: 1.25rem; } .nav-item span { font-size: 0.875rem; } /* التأثيرات عند التحريك */ .memories-btn button:hover, .item-box:hover, .nav-item:hover { background-color: #6b46c1; color: #ffffff; cursor: pointer; } </style> </head> <body class="text-white"> <div class="flex flex-col items-center p-4"> <!-- Header --> <div class="header-container"> <div class="profile-info"> <img alt="Profile picture of a dog in a suit" src="https://s...content-available-to-author-only...s.com/a1aa/image/Z2Qtjgm0G27HH5pQ3vsGKr1rjEbvHxZisEenttKUJPwIsa1JA.jpg"/> <span>Jo Jo (CEO)</span> </div> <div class="flex items-center"> <div class="gem-info"> <i class="fas fa-gem"></i> <span>+1.32</span> <i class="fas fa-info-circle ml-2"></i> </div> <i class="fas fa-cog settings-icon"></i> </div> </div> <!-- Memories Button --> <div class="memories-btn"> <button> <i class="fas fa-heart"></i> <span>Memories</span> </button> </div> <!-- New Today Section --> <div class="new-today-section"> <h2>New today</h2> <div class="new-today-items"> <div class="item-box"> <img alt="Cartoon hamster holding a pumpkin" src="https://s...content-available-to-author-only...s.com/a1aa/image/xKNPv2zehepSm08euW3eob1bJ7EiiJhtJUl0eqA1sT5eDWt6E.jpg"/> <span>Merge Away</span> <div class="gem-count"> <i class="fas fa-gem"></i> <span>x3</span> </div> </div> <div class="item-box"> <img alt="Cartoon hamster with multiplication and subtraction signs" src="https://s...content-available-to-author-only...s.com/a1aa/image/eiUWGTfo5vskKEWvu0HJIPW6fyEJD4eBMHapcDwcGbfFCrWdC.jpg"/> <span>Count Masters</span> <div class="gem-count"> <i class="fas fa-gem"></i> <span>x3</span> </div> </div> <div class="item-box"> <img alt="Cartoon hamster dressed as a ninja" src="https://s...content-available-to-author-only...s.com/a1aa/image/gvlejpPuHTyIR6VfaUPx8iwct1EAi1qgNqLDjOY7sdgTY1qTA.jpg"/> <span>Tower Defence</span> <div class="gem-count"> <i class="fas fa-gem"></i> <span>x3</span> </div> </div> </div> </div> <!-- Diamond Count --> <div class="diamond-count"> <i class="fas fa-gem"></i> <span>22.03</span> </div> <!-- Main Character --> <div class="main-character"> <img alt="Cartoon hamster in a black hoodie with arms crossed" src="https://s...content-available-to-author-only...s.com/a1aa/image/sLBSYwlKte2WbKzmcTfDYHc6QZB2wOJ4TVk8xSKoXShUY1qTA.jpg"/> </div> <!-- Navigation Bar --> <div class="navbar"> <div class="nav-item"> <i class="fas fa-exchange-alt text-blue-400"></i> <span>Exchange</span> </div> <div class="nav-item"> <i class="fas fa-gamepad"></i> <span>Playground</span> </div> <div class="nav-item"> <i class="fas fa-coins text-yellow-400"></i> <span>AirDrop</span> </div> <div class=" nav-item"> <i class="fas fa-user-friends"></i> <span>Friends</span> </div> <div class="nav-item"> <i class="fas fa-gem"></i> <span>Earn</span> </div> </div> </div> </body> </html> ``` يمكنك نسخ الكود بالكامل ولصقه في ملف HTML جديد وتجربته مباشرة في المتصفح.