<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 ----------> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css"> <section id="services" class="bg-light pt-100 pb-70"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-5"> <h2 class="title">What <span>Service</span> We Offer </h2> <p class=" mt-3 ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore, expedita quo laboriosam possimus ea consequatur vitae, doloribus consequuntur ex. Nemo assumenda laborum vel, labore ut velit dignissimos.</p> <a class="btn btn-primary my-5" href="#">More Info </a> </div> <div class="col-lg-7"> <div class="row card-items"> <div class="col-lg-6 col-sm-6"> <div class="card"> <div class="card-body"> <i class="bi bi-laptop"></i> <h5 class="card-title">Web Development</h5> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> </div> </div> </div> <div class="col-lg-6 col-sm-6"> <div class="card"> <div class="card-body"> <i class="bi bi-droplet-half"></i> <h5 class="card-title">UX/UI Design</h5> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> </div> </div> </div> <div class="col-lg-6 col-sm-6"> <div class="card"> <div class="card-body"> <i class="bi bi-envelope-open"></i> <h5 class="card-title"> Digital Marketing</h5> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> </div> </div> </div> <div class="col-lg-6 col-sm-6"> <div class="card"> <div class="card-body"> <i class="bi bi-phone"></i> <h5 class="card-title"> Mobile App Development</h5> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> </div> </div> </div> </div> </div> </div> </div> </section>

@import url('https://fonts.googleapis.com/css?family=Philosopher:700&display=swap'); body { font-family: 'Philosopher', sans-serif; position: relative; font-weight: 400; font-size: 16px; color: #8a919c; line-height: 30px; } .pt-100 { padding-top: 100px; } .pb-100 { padding-bottom: 100px; } .ptb-100 { padding: 100px 0px; } .pt-70 { padding-top: 70px; } .pb-70 { padding-bottom: 70px; } .ptb-70 { padding: 70px 0px; } p { font-size: 15px; margin: 0px; padding: 0px; } h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; color: #282936; } #services .title { font-size: 46px; color: #000000; font-weight: 600; } #services .title span { font-size: 46px; color: #FF5722; font-weight: 600; } #services .btn-primary { color: #fff; background-color: #FF5722; border: none; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; padding: 12px 20px; min-width: 150px; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .btn-primary:hover { -webkit-box-shadow: 0 5px 9px -4px rgb(0 0 255 / 65%); box-shadow: 0 5px 9px -4px rgb(0 0 255 / 65%); } .card-items .card { position: relative; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: none; border-radius: .25rem; box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.08); margin-bottom: 30px; } .card-items .card .card-body i { border-radius: 6px; font-size: 31px; color: #ff5722; background-color: #ff57221c; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; } .card-items .card .card-body .card-title { margin-bottom: .75rem; margin-top: 26px; margin-bottom: 15px; }