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

مساعدة في تصميم البطاقة

Bandar Abuseada

السؤال

ما رأيكم في تصميم هذه الcard هل من شيء يمكنني فعله افضل من ذلك؟

الكود

<div className='card'>
                <img className='cardimage' alt='none' src={imgagea} />
                <p>Bandar</p>
                <p>Css & javascript & React</p>
                <div className='icons'>
                    <p><i className='gg-instagram'></i></p>
                    <p><i className='gg-instagram'></i></p>
                    <p><i className='gg-instagram'></i></p>
                </div>
                <button>Cotext</button>
</div>

css

.card{
    margin: auto;
    max-width: 300px;
    height: 300px;
    text-align: center;
    background: #fff;
}
.cardimage{
    max-width: 300px;
}
.card p:nth-child(2){
    font-weight: bold;
}

.card button{
    width: 100%;
    text-decoration: none;
    border: none;
    background-color: rgb(32, 20, 20);  
    color: #fff;
    font-weight: 900;
    padding: 10px;
    position: relative;
    bottom: 10px;
}
.card button:hover{
    width: 100%;
    border: none;
    background-color: rgba(32, 20, 20, 0.521);  
    color: #fff;
    font-weight: 900;
    padding: 10px;
}

.icons{
    display: flex;
    justify-content: space-evenly;
    position: relative;
    bottom: 10px;
}

 

Annotation 2024-01-15 115458.png

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

Recommended Posts

  • 0

التصميم جيد ولكن هذه بعض الملاحظات :

  • قم بتنعيم الحواف قليلاً (سيعطي البطاقة شكل اكثر اناقة) بإضافة border-radius للزر  والصورة
  • اضف hover effect لكل من الصورة والزر و ازرار المشاركة
  • قم بإضافة الوان مختلفة (اكثر حيوية)

 

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

  • 0

التصميم جيد نوعاً ما لكن إليك بعض التحسينات التي يمكنك إضافتها:

  • إضفاء بعض الحركية و التأثيرات للبطاقة نفسها هناك الكثير من التأثيرات كـ قلب البطاقة (flip) أو (zoom in) و غيرها، تستطيع الإقتباس من تصميمات موجودة على الإنترنت فقط أكتب في حقل البحث بالشكل التالي:
zoom in card css example codepen

يمكنك تغيير نوع التأثير الذي تريد إضافته.

  • تنعيم الحواف بإضافة border-radius مناسب.
  • تعويم البطاقة بإضافة ظل لها عبر خاصية box-shadow المتاحة في CSS، يمكنك الإقتباس من خلال الرابط التالي: إضغط هنا
  • إستخدام خطوط ملائمة، تستطيع إستخدام خطوط Google.
رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...