- اكاديمية ماجد

<!DOCTYPE html>
<html dir="rtl">
<head>

</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>
        
<style>
/*تحدد خاصية تحديد حجم المربع كيفية حساب عرض العنصر وارتفاعه: في حالة تضمينهما الحشو والحدود، أم لا*/
html {
  box-sizing: border-box;
  direction: rtl;
  font-family: tahoma;
}
/*تحدد خاصية تحديد حجم المربع كيفية حساب عرض العنصر وارتفاعه: في حالة تضمينهما الحشو والحدود، أم لا*/
*, *:before, *:after {
  box-sizing: inherit;
}
/*تحديد الاعمدة في الصف الواحد وكم التقسيم يكون على 100% وهنا تم التقسيم على 3 مما يعني سوف نحصل على ثلاث بطاقات*/
.column {
  float: right;
  width: 33.3%;
  margin-bottom: 16px;
  padding: 0 8px;
}
/*هنا تحديد ظل البطاقات كيف يكون*/
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
/*هنا تحديد ابعاد الكونتينر*/ 
.container {
  padding: 0 16px;
}
/*هنا تحديد بعد الكونتير وابعاده مع الصف وتاثيره في تغير عرض الشاشة*/ 
.container::after, .row::after {
  content: "";
  clear: both;
  display: table;
}
/*هنا تم تحديد لون المسمى الوظيفي داخل البطاقات التعريفية*/
.title {
  color: grey;
}
.button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-family: tahoma;
}
/*تحديد لون شريط زر الاتصال لحظة التمرير من فوقه*/
.button:hover {
  background-color: #555;
}
/*تحديد اقصى عرض ليتناسب مع شاشة جهاز العرض الذي يتصفح الصفحة ليكون ملائم للاجهزة و الذكية و جميع انواع الحواسيب*/
@media (max-width: 650px) {
  .column {
    width: 100%;
    display: block;
  }
}

</style>

<br>

<div class="row">
  
  <div class="column">
	
    <div class="card">
    	
      <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Majed" style="width:100%">
      <div class="container">
        <h2>ماجد بن محمد </h2>
        <p class="title">المؤسس و الرئيس التنفيذي </p>
        <p>بعض الشروحات عن هذه الشخصية</p>
        <p>أيميل_المسؤول@example.com</p>
        <p><button class="button">الاتصال</button></p>
      </div>
    </div>
  </div>

<div class="column">
	
    <div class="card">
    	
      
      <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Majed" style="width:100%">
      
	
      
       <div class="container">
        <h2>  Majid Mohammed </h2>
        <p class="title"> مطور الويب </p>
        <p>بعض الشروحات عن هذه الشخصية</p>
        <p>أيميل_المسؤول@example.com</p>
        <p><button class="button">الاتصال</button></p>
      </div>
    </div>
  </div>
  
  
     
  <div class="column">
	
    <div class="card">
    	
      
      <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Majed" style="width:100%">
      
	
      <div class="container">
        <h2>ماجد بن محمد </h2>
        <p class="title">مسؤول العلاقات والتواصل </p>
        <p>بعض الشروحات عن هذه الشخصية</p>
        <p>أيميل_المسؤول@example.com</p>
        <p><button class="button">الاتصال</button></p>
      </div>
    </div>
  </div>
</div>
    </div>
    </body>
</html>

دورة في CSS

الصور في تقنية التصميم و التنسيق CSS

ملاحظة: هذا الدرس اضافي لكسب خبرات اكثر

المكتسبات من هذا الدرس كالتالي:

الاكواد و الملاحظات

صوره دائرية

الاكواد و الملاحظات

صورة مربعة:

صورة مربعة:

اتصل بنا

التواصل الاجتماعي