September 27, 2021

Bootstrap snippets why choose us

<body class="bg-light">
    <div class=" why_us pt-4 pb-4">
            <div class="container">
                <h2 class="text-center">Why choose us</h2>
                <p class="text-center mb-5 max-width150">Lorem ipsum dolor sit amet, consectetur blandit magna adipiscing elit.</p>

            <div class="row">
                    <div class="col-lg-4 col-md-6"> 
                            <ul>
                                <li>
                                    <div class="icon"><img src="https://www.tolmatol.com/uploads-images/bootstrap-why-choose-us/img-1.svg" alt=""></div>
                                    <div class="inner">
                                        <h3>Natural organic fruits</h3>
                                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
                                 </li>
                                <li>
                                        <div class="icon"><img src="https://www.tolmatol.com/uploads-images/bootstrap-why-choose-us/img-3.svg" alt=""></div>
                                        <div class="inner">
                                                <h3>Natural organic fruits</h3>
                                                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
                                        </div>
                                    </li>
                            </ul>
                        </div>
                        <div class="col-lg-4 col-md-12 text-center "><img src="https://www.tolmatol.com/uploads-images/bootstrap-why-choose-us/diet.png" alt=""></div>
                        <div class="col-lg-4 col-md-6"> 
                                <ul>
                                        <li>
                                                <div class="icon"><img src="https://www.tolmatol.com/uploads-images/bootstrap-why-choose-us/img-4.svg" alt=""></div>
                                                <div class="inner">
                                                        <h3>Natural organic fruits</h3>
                                                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>   
                                                </div>
                                            </li>
                                    <li>
                                            <div class="icon"><img src="https://www.tolmatol.com/uploads-images/bootstrap-why-choose-us/img-1.svg" alt=""></div>
                                            <div class="inner">
                                                    <h3>Natural organic fruits</h3>
                                                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>    
                                            </div>
                                        </li>
                                </ul>
                            </div>
            
                </div>
    </div>
    </div>

 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css?family=Pacifico|Poppins:400,500&display=swap" rel="stylesheet">
    <style>
        .why_us { font-family: 'Poppins', sans-serif; }
        .why_us h2 { font-family: 'Pacifico', cursive; margin-bottom: 20px; }
        .why_us ul { margin: 0; padding: 0; list-style: none; position: relative;}
        .why_us ul li .icon { width: 60px; height: 60px; border-radius: 60px;  background: #4caf50; margin-right: 10px; left: 10px; position: absolute; }
        .why_us ul li { background: #fff; padding: 8px; padding-left: 85px; margin: 40px 0px; border: solid 1px #ccc; border-radius: 10px;     display: flex;
    align-items: center; }
    .max-width150 { max-width: 350px; text-align: center; margin: auto;}
        .why_us ul li .icon img { width: 100%; padding: 10px;}
        .why_us ul li h3 { font-size: 16px;  margin:0px 0px 3px 0px; font-weight: 500;}
        .why_us ul li p { font-size: 14px;}
    </style>

 

Leave a Reply

Your email address will not be published. Required fields are marked *