PenTool UIتصفّح المكتبة

المكوّنات · بطاقة بنكية تنقلب

بطاقة بنكية تنقلب

وجهان، ورقم مقنَّع يُكشف لثوانٍ ثم يعود

9 تصاميم من هذه العائلة
بطاقة بنكية تنقلببطاقة هدف ادّخاربطاقة عادة بسلسلة محسوبةبطاقة مشغّل مصغّربطاقات قصص بحلقة تقدّمبطاقة تُسحب لكشف إجراءاتبطاقة تذكرة برمزبطاقة تتبّع مباشربطاقة طقس بمنحنى ساعات
متقدّم
<div class="ap apcc"><div class="ph">
  <div class="sb"><span class="tm num"></span>
    <span class="r" aria-hidden="true"><span>▲</span><span>◗</span><span class="bt num"></span></span></div>
  <div class="scr"><div class="body">
    <div class="scene">
      <div class="card3d">
        <div class="face front">
          <div class="top"><span class="brand">PenTool Bank</span><span class="chip"></span></div>
          <div class="no num"></div>
          <div class="bot"><span><i data-ar="الاسم" data-en="Name">الاسم</i>
            <b data-ar="عبدالله الحربي" data-en="ABDULLAH ALHARBI">عبدالله الحربي</b></span>
            <span><i data-ar="تنتهي" data-en="Expires">تنتهي</i><b class="ex num"></b></span></div>
        </div>
        <div class="face back">
          <div class="mag"></div>
          <div class="cvvrow"><span data-ar="رمز التحقّق" data-en="CVV">رمز التحقّق</span>
            <b class="cvv num"></b></div>
          <p data-ar="لا تشارك هذه البيانات مع أحد" data-en="Never share these details">لا تشارك هذه البيانات مع أحد</p>
        </div>
      </div>
    </div>
    <div class="acts">
      <button class="fl tap" data-ar="اقلب البطاقة" data-en="Flip card">اقلب البطاقة</button>
      <button class="rv tap" data-ar="أظهر الرقم" data-en="Reveal number">أظهر الرقم</button>
    </div>
    <div class="lg num" role="status" aria-live="polite"></div>
  </div></div>
  <div class="safe"></div>
</div></div>
← بطاقة تتبّع مباشربطاقة طقس بمنحنى ساعات →