THAPA TECHNICAL

HOUSE OF WEB DEVELOPERS AND TECHNOLOGY.

Animated Responsive Our Service Page using Bootstrap 5 with Free Source Code

Animated Responsive Modern Premium Our Service Page using Bootstrap 5 with Free Source Code




As we all know that our services page is one of the most critical pages on a website whose purpose is to not only reveal what we offer but how our company stands out from the rest.

It starts with the messaging. Based on the service we have, we need to figure out the best way to explain it. This could be through short sentences, long paragraphs, Beautiful Images, bullet point sections, or video.

To accompany the content, we need a beautiful design. If our services are visual, a variety of photography/graphics accompanying the content may help put everything together. If not, icons with less elaborate imagery may be more suitable.

So, Here is the best Modern Premium Our Service Page UI using Bootstrap 5. I already uploaded a video on it. Where I explained step by step. So check it out. If you haven't or if you have any doubt. 




Here is the Source Code. Feel free to copy and I request you to please share the codes with your friends too. I know you will surely do it. 


So, In our Service Page, we have one Index.html file, One style.css, and One Images folder. 

Now, index.html 

   
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8"></meta>
    <meta content="width=device-width, initial-scale=1" name="viewport"></meta>
<!-- designed by ThapaTechncial Youtuber -->
    <!-- Bootstrap CSS -->
    <link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" rel="stylesheet"></link>
    <link href="css/style.css" rel="stylesheet" type="text/css"></link>
    <title>Hello, world!</title>
  </head>
  <body>
    <div class="service py-5">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-10 col-11 mx-auto">
            <div class="mt-2 mb-5 text-center">
              <h1 class="service_heading">OUR SERVICES</h1>
            </div>
            <div class="row ">
              <!-- left side data -->
              <div class="col-md-6 mt-md-2 m-0">
                <span class="badge-info badge rounded-pill px-3 py-1 my-2 font-weight-light">
                  What We Do
                </span>
                <h4>Awesome with Extra Ordinary Flexibility Features</h4>
                <h6 class="font-weight-light subtitle">You can relay on our amazing features list and also our customer services will be great experience for you without doubt and in no-time</h6>
                <!-- one more grid sys for services -->
                <div class="row mt-md-5">
                  <div class="col-md-6 mt-3">
                    <h6 class="font-weight-medium">Web Development</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
                  </div>
                  <div class="col-md-6 mt-3">
                    <h6 class="font-weight-medium">E-Commerce Website</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
                  </div>
                  <div class="col-md-6 mt-3">
                    <h6 class="font-weight-medium">Digital Marketing</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
                  </div>
                  <div class="col-md-6 mt-3">
                    <h6 class="font-weight-medium">App Development</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
                  </div>
                  <div class="col-lg-12 my-4">
                    <a class="btn btn-sm btn-info" href="#"> check More </a>
                  </div>
                </div>
              </div>
              <!-- right side data -->
              <div class="col-md-6 mt-md-5 m-0">
                <div class="row wrap-service">
                  <!-- left side images -->
                  <div class="col-md-6">
                    <div class="row">
                      <div class="col-md-12 img-hover mb-4">
                        <img alt="ux" class="rounded img-shadow img-fluid" src="images/ux.webp" />
                      </div>
                      <div class="col-md-12 img-hover mb-4">
                        <img alt="ux" class="rounded img-shadow img-fluid" src="images/ui.webp" />
                      </div>
                    </div>
                  </div>
                  <!-- right side images -->
                  <div class="col-md-6 uneven-box">

                    

<div class="row">
                      <div class="col-md-12 img-hover mb-4">
                        <img alt="ux" class="rounded img-shadow img-fluid" src="images/app.webp" />
                      </div>
                      <div class="col-md-12 img-hover mb-4">
                        <img alt="ux" class="rounded img-shadow img-fluid" src="images/img1.webp" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Optional JavaScript -->
    <!-- Popper.js first, then Bootstrap JS -->
    <script crossorigin="anonymous" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script crossorigin="anonymous" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
  </body>

</html>  


Now, Style.css file

  @import url('https://fonts.googleapis.com/css2?family=PT+Sans&amp;display=swap');
  /*designed by ThapaTechncial Youtuber */

  * {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'PT Sans', sans-serif;
}

.service_heading {
text-transform: uppercase;
position: relative;
}

.service_heading:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 0%;
height: auto;
border-bottom: 3px solid #3e4555;
transition: all 0.3s linear;
}

.service_heading:hover:after {
width: 20%
}

.service {
color: #8d97ad;
font-weight: 300;
}

.service h1, .service h2, .service h3, .service h4, .service h5, .service h6 {
color: #3e4555;
}

.service h6 {
line-height: 22px;
font-size: 18px;
color: #8d97ad;
}

.service .font-weight-medium {
font-weight: 500;
color: #3e4555;
}

.service .badge {
line-height: 15px;
}

.service .badge-info {
background: #188ef4;
}

.service .subtitle {
color: #8d97ad;
line-height: 24px;
}

.service .img-shadow {
box-shadow: 0 0 30px rgba(115, 128, 157, 0.3);
}

.service .wrap-service .img-hover {
transition: all 0.2s ease-in;
}

.service .wrap-service .img-hover:hover {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}

.service .wrap-service .uneven-box {
margin-top: 100px;
}

.service .btn-sm {
padding: 6px 14px;
font-size: 16px;
background: #188ef4;
}

.service .btn-sm:hover {
color: #188ef4;
background: #fff;
border: 1px solid #188ef4;
}

@media(max-width:768px) {
.service .wrap-service .uneven-box {
margin-top: 10px;
}

}