How to make a top designer with these separations in woocommerce?

Question

How to make a top designer with these separations in woocommerce?

Navigation

#1 by (1 votes)

-1

How to make this image in css in Woocommerce?

I want to leave this way in my header, but it is not aligned in this way and has no separation features. I have to do in CSS and Html

Image used for example.

css woocommerce

asked by anonymous 19.12.2017 / 15:36

1 answer

How to add to the AbstractTableModel a combobox populated by database information? Move android studio to another computer without installing

score 1 · Accepted Answer

Using CSS and images you can do as follows:

body{
            margin: 0;
            padding: 0;
        }
        .container {            
            margin: 0 auto;
            width: 100%;
            display: flex;
            height: 110px;
            background-color: #f6f6f6;
        }
        .blocks {
            width: 25%;
            padding: 0;
            position: relative;
            text-align: center;
            height: 100px;
            align-items: flex-start;
            background-color: #f2f2f2;
            margin-top:5px;
        }
        .blocks img {
            width: 50px;
            height: 35px;
        }
        .blocks h5 {
            margin-top:-3px;
            color: #4c474e;
            font-size: 12px;
            text-transform: uppercase;
            font-weight: bold;
        }
        .blocks span {
            text-transform: lowercase;
            display: block;
            font-size: 12px;
            font-weight: 400;
        }
        .blocks hr {        
            float: right;
            height: 70px;
            color: #aaa;
            border-radius: 50%;
            opacity: 0.4;
        }
        .btn {
            margin: auto;
            font-size: 12px;
            padding: 2px 5px;
            background-color: #0bb159;
            color: #000000;
            width: 40%;
            border-radius: 5px;
        }

<div class="container">
        <div class="blocks">
            <hr>
            <img src="https://s3.us-east-2.amazonaws.com/atemp-24hrs/card.png"alt="">
            <h5>
                3x sem jurus
                <span>no cartão</span>
            </h5>             
        </div>        
        <div class="blocks">
            <hr>          
            <img src="https://s3.us-east-2.amazonaws.com/atemp-24hrs/promo.png"alt="">
            <h5>
                10% disconto
                <span>no deposito</span>                 
            </h5>                         
        </div>
        <div class="blocks">
            <hr>
            <img src="https://s3.us-east-2.amazonaws.com/atemp-24hrs/frete.png"alt="">
            <h5>
                frete gratis
                <span>consulte condições</span>
            </h5>                
        </div>
        <div class="blocks">                
                <img src="https://s3.us-east-2.amazonaws.com/atemp-24hrs/envio.png"><h5>sobreoenvio<spanclass="btn"> saber mais</span>
                </h5>            
            </div>
      </div>