How to make a top designer with these breakups in Woocommerce?

Question

How to make this image in css in Woocommerce?

I want to leave it this way in my header, but it is not aligned this way and does not have separation traits. I have to do it in CSS and HTML

Image used for example.

Answer 1

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>
                    sobre o envio
                    <span class="btn"> saber mais</span>
                </h5>            
            </div>
      </div>