trustypay/src/components/indexTerminals.vue

<template>
    <div class="mainContent">        
            <div class="title">
                <h2>Durable and Easy-to-use <br/>
                Terminals for Fast Checkouts</h2>
            </div>
            <div class="subhead">
                Take payments fast from anywhere - at the counter or on the move
            </div>
           
            <div class="list-icon">
                <div class="left">
                    <div class="bg-b">
                        <svg-icon icon-class="contactless" class="icon" />
                       Contactless
                    </div>
                    <div class="bg-b">
                        <svg-icon icon-class="payments" class="icon" />
                        Mobile Payments
                    </div>
                    <div class="bg-b">
                        <svg-icon icon-class="touch" class="icon" />
                        Multimedia touch screen 3.5"
                    </div>
                    <div class="bg-b">
                        <svg-icon icon-class="printer" class="icon" />
                        Printer
                    </div>
                    <div class="bg-b">
                        <svg-icon icon-class="4G" class="icon" />
                        4G, Wi-Fi, Ethernet & Bluetooth
                    </div>
                </div>
                <div class="right">
                    <div class="bg-b">
                        <svg-icon icon-class="puzzle" class="icon" />
                        Standalone or Integrated
                    </div>
                    <div class="bg-b">
                        <svg-icon icon-class="security" class="icon" />
                        Password enabled security features
                    </div>
                    <div class="bg-b">
                        <svg-icon icon-class="usd" class="icon" />
                        Surcharging and Tipping
                    </div>
                    <div class="bg-b">
                        <svg-icon icon-class="network" class="icon" />
                        Multi-Network Card Routing
                    </div>
                    <div class="bg-b">
                        <svg-icon icon-class="conversion" class="icon" />
                        Dynamic Currency Conversion
                    </div>
                </div>
            </div>

        </div>
 

</template>

<script>

</script>

<style lang="less" scoped>
.mainContent {
    margin: 0 auto;

    .title {
        h2 {
            margin: 0;
            text-align: center;
            color: #1a5271;
            font-size: 44px;
            font-weight: 600;
        }

    }

    .subhead {
        color: #1a5271;
        text-align: center;
        font-size: 26px;
        padding: 30px;
    }


    .list-icon{
        display: flex;
        justify-content: center;
        gap: 40px;
        .bg-b{
            margin-top: 26px;
                width: 400px;
                height: 70px;
                border-radius: 10px;
                background-color: #60c5f4;
                box-shadow: 0 6px 10px rgba(0, 0, 0, .2), 0 0 6px rgba(0, 0, 0, .04);
                line-height: 70px;
                color: #1a5271;
                .icon {
                    width: 40px;
                    height: 40px;
                    padding: 0px 20px;
                }
        }
    }
}

@media screen and (max-width: 767px){
.title{
    h2{
        font-size: 36px !important;
        line-height: 38.88px;
    }
}
.subhead{
    font-size: 24px;
    line-height: 36px;
}
    
}
</style>