<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section id ="about"> <div class="container"> <div class="row"> <div class="col-md-12 col-sm-12 col-lg-12"> <h2 class="ayush">AYUSH THAKUR</h2> </div> </div> </div> <div class="container"> <div class="row"> <div class=" col-lg-12"> <div class="main text-center"> <img src="https://img2.cgtrader.com/items/37309/11bbc00a9c/small-green-tree-3d-model.jpg" /> </div> </div> <div class=" col-lg-12"> <div class="text-center"> <h1 class="h1_about">About Our Services</h1> </div> </div> </div> </div> <div class="container fruits"> <div class="row"> <div class=" col-lg-3 milk"> <div class="text-center"> <img src="https://media.istockphoto.com/photos/green-apple-picture-id183834575?k=6&m=183834575&s=612x612&w=0&h=QirJm5mk_iw0Ulw5FYJOSa0ITD8cFTVBHvQjFVxu1BE=" /> <div class="fruit_text"> <h4>Organic Vegetables</h4> <p>At some stage in all our lives we want clearer, fresher, younger looking skin. Well it can be achieved without. </p> <button type="button" class="btn btn-success">READ MORE</button> </div> </div> </div> <div class=" col-lg-3 milk"> <div class="text-center"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQhtsyxA5ENkaTRvDGMCRRHhe4lsc56L0czwU02aCh7T7-XMGYn" /> <div class="fruit_text"> <h4>Vegetarian Food</h4> <p>At some stage in all our lives we want clearer, fresher, younger looking skin. Well it can be achieved without. </p> <button type="button" class="btn btn-success">READ MORE</button> </div> </div> </div> <div class="col-lg-3 milk"> <div class="text-center"> <img src="https://media.istockphoto.com/photos/green-apple-with-leaf-and-slice-isolated-on-a-white-picture-id518930743?k=6&m=518930743&s=612x612&w=0&h=niYGUkLp3HpWbkGsiUAknYGvN871xtjAMz9tjj_u4do=" /> <div class="fruit_text"> <h4>Organic Milk</h4> <p>At some stage in all our lives we want clearer, fresher, younger looking skin. Well it can be achieved without. </p> <button type="button" class="btn btn-success">READ MORE</button> </div> </div> </div> <div class=" col-lg-3 milk"> <div class="text-center"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTfPOYfF2WrPAj0giLWiluLT40BxfYX7zr5A3sKcAhY9_gLGB3n7g" /> <div class="fruit_text"> <h4>Farm Fresh</h4> <p>At some stage in all our lives we want clearer, fresher, younger looking skin. Well it can be achieved without. </p> <button type="button" class="btn btn-success">READ MORE</button> </div> </div> </div> </div> </div> </section>

#about { padding: 50px; margin-top: 7px; } .h1_about { color: black; font-weight: 500; font-size: 40px; margin-top: 0px; } .fruit_text h4 { font-size: 26px; font-weight: 600; } .fruit_text p { font-size: 15px; font-weight: 600; color: #888888; word-spacing: 3px; margin-top: 20px; line-height: 24px; font-weight: 600; } .container.fruits img { width: 100%; min-height: 300px; object-fit: contain; } .btn.btn-success { font-size: 15px; color: white; background: #4ba924; padding: 10px 49px 10px 47px; border-radius: 0px; } .h1_about::after { content: ""; position: absolute; background: #4BA924; top: 55px; left: 0; right: 0; width: 29%; height: 3px; margin: auto; bottom: 0; } .container.fruits { text-align: center; padding: 27px 0; margin-top: 50px; } .col-lg-3.milk:hover { box-shadow: 0px 0px 5px rgba(0,0,0,0.3); } .col-lg-3.milk { padding: 20px; } .organic_text { font-size: 36px; font-weight: 600; } .a{ padding:4px;} .well.well-sm { margin: 0; padding: 0; color: black;} .well.well-sm h3 { font-weight: 600; } .fa.fa-angle-down.rotate-icon { float: right; margin-right: 14px; } .main img { width: 19%; } .col-lg-3.milk:hover .btn.btn-success { background: transparent; color: black; transition: all ease-in-out 0.5s; } .col-lg-3.milk:hover h4 { color: #4BA924; } #popular{ margin-top:30px; margin-bottom:20px;} .ayush { color: red; text-align: center; width: 100%; font-size: 35px; text-shadow: 2px 2px 1px yellow; } @media only screen and (max-width:991px) { .container.fruits img { width: 35%; min-height: 249px; } } @media only screen and (max-width:485px) {.container.fruits img { width: 100%; /* min-height: 249px; */ }}