اذهب إلى المحتوى
  • 0

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

كمال صالح2

بواسطة كمال صالح2

 مشاركة

السؤال

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

Recommended Posts

  • 1
Adnane Kadri عضو نشيط

Adnane Kadri

نشر
نشر

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

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

مثال:  

<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;}

الناتج:

image.thumb.png.e00bfd54faa971d856ae58d2c6bc151e.png

  • شكرًا 1
رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 1
Adnane Kadri عضو نشيط

Adnane Kadri

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

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

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

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

<div class="container">
   <div>
      <i>&#9760;</i>
   </div>
   <div class="text-container">
       <h1>255$</h1>
       <span>الحساب</span>
   </div>
</div>
  • شكرًا 1
رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
كمال صالح2 عضو نشيط

كمال صالح2

نشر
  • الكاتب
نشر (معدل)
بتاريخ 9 دقائق مضت قال Adnane Kadri:

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

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

مثال:  

<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;}

الناتج:

image.thumb.png.e00bfd54faa971d856ae58d2c6bc151e.png

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

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

تم التعديل في بواسطة كمال صالح محمد
  • أعجبني 1
رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
كمال صالح2 عضو نشيط

كمال صالح2

نشر
  • الكاتب
نشر (معدل)
بتاريخ 31 دقائق مضت قال Adnane Kadri:

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

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

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

تعديل.png

تم التعديل في بواسطة كمال صالح محمد
رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
Mustafa Suleiman عضو نشيط

Mustafa Suleiman

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

كيف استطيع تصفح الايقونات   &#9993;

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

×
 مشاركة
اذهب إلى قائمة الأسئلة

  • إعلانات

  • تابعنا على



×
×
  • أضف...