كيف يمكن تصميم بطاقات مثل الصورة

15 يناير 2024

يتم اضافة داخل الاطار :

(button) مع ايقونة
نص
نص

مثال الصورة الموضحة اسفل:

15 يناير 2024

لتصميم بطاقات لوحات التحكم الإحصائية قم بالتالي:

هيكلة حاوية A تحتوي حاويتين فرعيتين: الأولى بها الرقم والنص أو العنوان والثانية بها الأيقونة.
قم بإعطاء الحاوية A تنسيق display flex لجعلها حاوية مرنة.
قم بإضفاء بعض التنسيقات الأخرى مثل الهوامش والحواشي والألوان لضبط تنسيق البطاقة أكثر.

مثال:

<div class="container">
   <div class="text-container">
       <h1>14</h1>
       <span>عنوان فرعي</span>
   </div>
   <div>
      <i>&#9827;</i>
   </div>
</div>

ملف التنسيقات:

.container{
  display: flex;
  justify-content: center;
  justify-content: space-between;
  padding: 0px;
  border-radius: 25px 5px;
  width: 25%;
  overflow: hidden;
}
.container i{
  font-size: 100px;
  background: rgba(0,0,0,.1);
  border-radius: 5px;
  padding: 0px 15px;
}
.text-container{
  padding:5px 20px;
}

.container{
  background-color: #38bdf8;
}
.text-container{
  color: #ecfeff;
}
.container i{
  color: #075985;
}

الناتج:
image.png.f6c21a904f5ea8046482856914d50437.png

مثال أكثر تفصيلا:

<div class="cards-container">
<div class="container">
   <div class="text-container">
       <h1>255$</h1>
       <span>الحساب</span>
   </div>
   <div>
      <i>&#9760;</i>
   </div>
</div>
<div class="container">
   <div class="text-container">
       <h1>358</h1>
       <span>البطاقات</span>
   </div>
   <div>
      <i>&#10031;</i>
   </div>
</div>
<div class="container">
   <div class="text-container">
       <h1>14</h1>
       <span>الكوبونات</span>
   </div>
   <div>
      <i>&#9993;</i>
   </div>
</div>
<div class="container">
   <div class="text-container">
       <h1>140</h1>
       <span>المستخدمين</span>
   </div>
   <div>
      <i>&#9992;</i>
   </div>
</div>
</div>

.cards-container{
  display: flex;
  gap: 5px;
}
.container{
  display: flex;
  justify-content: center;
  justify-content: space-between;
  padding: 0px;
  border-radius: 25px 5px;
  width: 25%;
  overflow: hidden;
}
.container div:nth-child(2){
  background: rgba(0,0,0,.1);
  border-radius: 5px;
  padding: 0px 15px;
}
.container i{
  font-size: 75px;
}
.text-container{
  padding:5px 20px;
}

.container:nth-child(1){ background-color: #38bdf8;}
.text-container:nth-child(1){ color: #ecfeff;}
.container:nth-child(1) i{ color: #075985;}

.container:nth-child(2){ background-color: #84cc16;}
.text-container:nth-child(2){ color: #ecfccb;}
.container:nth-child(2) i{ color: #3f6212;}

.container:nth-child(3){ background-color: #f43f5e;}
.text-container:nth-child(3){ color: #ffe4e6;}
.container:nth-child(3) i{ color: #9f1239;}

.container:nth-child(4){ background-color: #8b5cf6;}
.text-container:nth-child(4){ color: #ede9fe;}
.container:nth-child(4) i{ color: #5b21b6;}

الناتج:

15 يناير 2024

بتاريخ 12 دقائق مضت قال كمال صالح محمد:

استاذي العزيز

كيف نغير اتجاه الايقونة والنص

قم بعكس العناصر داخل الحاوية A:

<div class="container">
   <div>
      <i>&#9760;</i>
   </div>
   <div class="text-container">
       <h1>255$</h1>
       <span>الحساب</span>
   </div>
</div>

16 يناير 2024

بتاريخ 21 ساعة قال كمال صالح محمد:

ممكن استاذ محاذاة النص الى الجهه اليمين بدون ضل

استعمل خواص CSS العادية لذلك،

15 يناير 2024

بتاريخ 9 دقائق مضت قال Adnane Kadri:

لتصميم بطاقات لوحات التحكم الإحصائية قم بالتالي:

هيكلة حاوية A تحتوي حاويتين فرعيتين: الأولى بها الرقم والنص أو العنوان والثانية بها الأيقونة.
قم بإعطاء الحاوية A تنسيق display flex لجعلها حاوية مرنة.
قم بإضفاء بعض التنسيقات الأخرى مثل الهوامش والحواشي والألوان لضبط تنسيق البطاقة أكثر.

مثال:

<div class="container">
   <div class="text-container">
       <h1>14</h1>
       <span>عنوان فرعي</span>
   </div>
   <div>
      <i>&#9827;</i>
   </div>
</div>

ملف التنسيقات:

.container{
  display: flex;
  justify-content: center;
  justify-content: space-between;
  padding: 0px;
  border-radius: 25px 5px;
  width: 25%;
  overflow: hidden;
}
.container i{
  font-size: 100px;
  background: rgba(0,0,0,.1);
  border-radius: 5px;
  padding: 0px 15px;
}
.text-container{
  padding:5px 20px;
}

.container{
  background-color: #38bdf8;
}
.text-container{
  color: #ecfeff;
}
.container i{
  color: #075985;
}

الناتج:

مثال أكثر تفصيلا:

<div class="cards-container">
<div class="container">
   <div class="text-container">
       <h1>255$</h1>
       <span>الحساب</span>
   </div>
   <div>
      <i>&#9760;</i>
   </div>
</div>
<div class="container">
   <div class="text-container">
       <h1>358</h1>
       <span>البطاقات</span>
   </div>
   <div>
      <i>&#10031;</i>
   </div>
</div>
<div class="container">
   <div class="text-container">
       <h1>14</h1>
       <span>الكوبونات</span>
   </div>
   <div>
      <i>&#9993;</i>
   </div>
</div>
<div class="container">
   <div class="text-container">
       <h1>140</h1>
       <span>المستخدمين</span>
   </div>
   <div>
      <i>&#9992;</i>
   </div>
</div>
</div>

.cards-container{
  display: flex;
  gap: 5px;
}
.container{
  display: flex;
  justify-content: center;
  justify-content: space-between;
  padding: 0px;
  border-radius: 25px 5px;
  width: 25%;
  overflow: hidden;
}
.container div:nth-child(2){
  background: rgba(0,0,0,.1);
  border-radius: 5px;
  padding: 0px 15px;
}
.container i{
  font-size: 75px;
}
.text-container{
  padding:5px 20px;
}

.container:nth-child(1){ background-color: #38bdf8;}
.text-container:nth-child(1){ color: #ecfeff;}
.container:nth-child(1) i{ color: #075985;}

.container:nth-child(2){ background-color: #84cc16;}
.text-container:nth-child(2){ color: #ecfccb;}
.container:nth-child(2) i{ color: #3f6212;}

.container:nth-child(3){ background-color: #f43f5e;}
.text-container:nth-child(3){ color: #ffe4e6;}
.container:nth-child(3) i{ color: #9f1239;}

.container:nth-child(4){ background-color: #8b5cf6;}
.text-container:nth-child(4){ color: #ede9fe;}
.container:nth-child(4) i{ color: #5b21b6;}

الناتج:

استاذي العزيز

كيف نغير اتجاه الايقونة والنص

تم التعديل في 15 يناير 2024 بواسطة كمال صالح محمد

15 يناير 2024

بتاريخ 31 دقائق مضت قال Adnane Kadri:

قم بعكس العناصر داخل الحاوية A:

<div class="container">
   <div>
      <i>&#9760;</i>
   </div>
   <div class="text-container">
       <h1>255$</h1>
       <span>الحساب</span>
   </div>
</div>

ممكن استاذ محاذاة النص الى الجهه اليمين بدون ضل

تم التعديل في 15 يناير 2024 بواسطة كمال صالح محمد

16 يناير 2024

بتاريخ منذ ساعة مضت قال Adnane Kadri:

استعمل خواص CSS العادية لذلك،

كيف استطيع تصفح الايقونات ✉

16 يناير 2024

بتاريخ 2 ساعة قال كمال صالح محمد:

كيف استطيع تصفح الايقونات ✉

ما تريده يعرف باسم html entities وستجد قائمة بها في أيًا من الروابط التالية:

كيف يمكن تصميم بطاقات مثل الصورة

السؤال

كمال صالح2

7 أجوبة على هذا السؤال

Recommended Posts

Adnane Kadri

Adnane Kadri

Adnane Kadri

كمال صالح2

كمال صالح2

كمال صالح2

Mustafa Suleiman

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

كيف أتعلم؟

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية