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

كمال صالح2 · 15 يناير

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

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

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

Adnane Kadri · 15 يناير

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

هيكلة حاوية 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;}

الناتج:

كمال صالح2 · 15 يناير

بتاريخ 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 يناير بواسطة كمال صالح محمد

Adnane Kadri · 15 يناير

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

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

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

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

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

كمال صالح2 · 15 يناير

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

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

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

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

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

Adnane Kadri · 16 يناير

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

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

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

كمال صالح2 · 16 يناير

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

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

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

Mustafa Suleiman · 16 يناير

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

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

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

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

السؤال

كمال صالح2

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

Recommended Posts

Adnane Kadri

كمال صالح2

Adnane Kadri

كمال صالح2

Adnane Kadri

كمال صالح2

Mustafa Suleiman

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية