• 1400/04/01

درس 24 جایگزینیdivبجای snap :

 

با ادب و احترام

به پیوست تصویر مربوطه با تغییر در بخش index.html

جایگزینی Div بجای span  این بخش از برنامه تغییری نکرد.

  <section id="counters">
        <div class="container">
            <div class="counter">
                <div class="counters-item">
                         <i class="fa fa-shopping-cart" aria-hidden="true"></i>
                        <div class="counter">20000</div>
                        <h5>محصولات</h5>
                </div>
                <div class="counters-item">
                        <i class="fa fa-user" aria-hidden="true"></i>
                        <div class="counter">95400</div>
                        <h5>مشتری</h5>
                </div>
                <div class="counters-item">
                            <i class="fa fa-search" aria-hidden="true"></i>
                           <div class="counter">38250</div>
                           <h5>اعضا</h5>
                   </div>
            </div>
        </div>
    </section>
/*counters*/

#counters{
    width: 100%;
    background-color: #9ac0fc;
    padding: 120px 0;
}
#counters .counter{
    width: 100%;
    display: flex;
}
#counters .counter .counters-item{
    width: 33%;
    text-align: center;

}
#counters .counter .counters-item svg{
    font-size:40x;
}
  • 1400/04/01
  • ساعت 19:17

سلام

چون قالبتون رو ندیدم اما نمیتونم بگم تغییری توی کدهای خودتون بدین

اما این رو جایگزین کد خودتون کنین

#counters .counters .counters-item {
    width: 25%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

 

البته هنوز به بعضی از این پروپرتی ها نرسیدین توی دوره اما الان اشنا شین هم چیز بدی نیست

display: flex این باعث میشه المان های زیر مجموعه کنار هم بشینن

 flex-direction: column; این باعث میشه همون المان ها زیر هم ردیف شن

بقیه هم وسط چین میکنن


  • 1400/04/01
  • ساعت 20:39

سپاس

فقط این رو تغییر دادم درست شد.  flex-directioncolumn-reverse