<!DOCTYPE html> <html dir="rtl"> <head> <style> * { box-sizing: border-box; } /*لتحديد اتجاهات هيئة الصفحة ونوعية الخط والمسافات*/ body { padding-top: 0px; margin: 0; font-family:tahoma; } /*لتحديد حجم الخط للعناوين*/ h1, h2, h3, h4 { font-size: 18px; } /*تحديد حجم الخط بالفقرات النصية*/ p { font-size: 14px; } /* لتصميم خلفية شريط الروابط */ ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #555; } /* لتحديد اتجاه القوالب */ li { float: right; } /* لتحديد لون الخط + اتجاه النص + تحديد مسافة القوائم عن اطراف الموقع */ li a, .dropbtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } /* لتحديد لون القالب لحظة التمرير على شريط الروابط*/ li a:hover, .dropdown:hover .active .dropbtn { background-color: green; } /* لتحديد نوعية العرض للقائمة المنسدلة*/ li.dropdown { display: inline-block; } /* لتحديد العرض و المكان و لون الخلفية و اقل عرض و صندوق التضليل للقائمة المنسدلة*/ .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /* لتحديد لون الخط و المسافة عن اطراف العرض واتجاه النص للقائمة المنسدلة*/ .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: right; } /* لتحديد لون القالب عند التمرير للقائمة المنسدلة*/ .dropdown-content a:hover {background-color: #f1f1f1} /* لتحديد لون القالب عند التمرير للقائمة المنسدلة*/ .dropdown:hover .dropdown-content { display: block; } /*تحديد الصفحة بعد قائمة الارتباطات*/ .row:after { content: ""; display: table; clear: both; } /*انشاء ثلاث اعمدة غير متساوية بالعرض على نفس الصف */ .column { float: right; padding: 10px; } /* عمود اليمين و اليسار ولون الخلفية للعمود و طول العمود في الصفحة */ .column.side { width: 20%; box-border: 15px; background-color: #f1f1f1; height:100%; } /* العمود الوسطي */ .column.middle { width: 60%; } /****************Iاضف الكود لهذا الدرس تحت السطر مباشرة*********************/ </style> </head> <body> <div class="header"> <h1>عنوان الموقع: مدونة اكاديمية ماجد</h1> <p>وصف الموقع: هنا سوف اكتب بحوثي ومدوناتي</p> </div> <ul> <li><a class="active" href="#home">الرئيسية</a></li> <li><a href="#news">مقالاتي</a></li> <li class="dropdown"> <a href="javascript:void(0)" class="dropbtn">الخيارات</a> <div class="dropdown-content"> <a href="#">الرابط 1</a> <a href="#">الرابط 2</a> <a href="#">الرابط 3</a> </div> </li> <li><a href="#home">اتصل بنا</a></li> </ul> <div class="row"> <div class="column side"> <h4>لماذا الاكاديمية؟</h4> <p>اتمنى ان ارى ابداعتنا وابتكاراتنا تعود الينا من جديد, لقد تقدمنا على العالم اجمع عصوراً, هل سيعودالينا الابتكار والابداع لخدمة الانسانية؟</p> <h4>اين الاكاديمية؟</h4> <p>لا يوجود لها موقع واسال الله ان تكون ذات منفعة لكل بيت عربي</p> <h4>السعر؟</h4> <p>مجانا للأبد, وبكل تواضع</p> </div> <div class="column middle"> <h1>البداية</h1> <p>بكل تواضع وامتنان اقدم لكم جهد سنتين من العمل على التدريبات لتكون سهلة وبين ايديكم وبلغتكم العربية. .</p><p>بكل فخر اقدم لكم مجهوداتي واسال الله ان تكون سهلة مبسطه مما يجعل التطور المعرفي لديك يفوق توقعاتي</p> <h3>تواجدكم بالتدريبات سوف يكون:</h3> <p>المحفز الاكبر لي لنقديم اضافات اكثر احترافية و بمستويات متطورة</p> <h4>اتمنى يوماً ان ارى حاسب الي باللغة العربية 100% صنع بدولة عربية</h4> <table> <tr style="background-color:black; color: white;"> <th>الشركة</th> <th>المسؤول</th> <th>الدولة</th> </tr> <tr> <td>مايكروسوفت</td> <td>بيل غيتس</td> <td>امريكا</td> </tr> <tr> <td>آبل</td> <td>ستيف جوبز</td> <td>امريكا</td> </tr> <tr> <td>سوني</td> <td>كازا هيراي</td> <td>اليابان</td> </tr> </table> </div> <div class="column side" style="background: #fff"> <h2>الإعلانات</h2> <p>اعلانات جديدة سيتم طرحها هنا</p> <img src="https://www.w3schools.com/html/workplace.jpg" alt="Workplace" usemap="#workmap" width="150" height="120"> </div> </div> <div class="footer"> <p>مدعوم من <a href="~/Home" target="_blank" style="color: #199EB8">اكاديمية ماجد</a></p> </div> </body> </html>