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;
}

}

18 comments:

  1. I did hard work I am not going to copy any code.

    ReplyDelete
  2. nice my website 18bnsaf.com i develop year 2015 html and css etc. modify before 3 month in bootstrap. your tutorial helpful for me. Login and logout page very helpful for me . thanks thapa ji

    ReplyDelete
  3. One way to make money with Twitter is to get people off Twitter and onto your website. The only way to do that is to get them to click on the links in your tweets instead of moving on to their next tweet. How do you get them to click? url shortener

    ReplyDelete
  4. 1) สลากกินแบ่ง 2 ตัวบน เป็นการซื้อเลข 2 ตัว ที่ผลตรง กับผลหวย รางวัลที่ 1 ในหลักสิบ แล้วก็หลักหน่วย

    ซึ่งเลขทั้งยัง 2 ตัวจำเป็นจะต้องอยู่ในตำแหน่งประจำหลักที่ตรงกันกับผลของหวย lottovip เข้าสู่ระบบ พวกเราจำต้องเลือกซื้อชุดจำนวน ตั้งแต่ 00 – 99

    ซึ่งหากซื้อเลขถูก จะได้รับผลตอบแทน บาทละ 70 – 100 บาท

    2) ลอตเตอรี่ 2 ตัวข้างล่าง เป็นการซื้อเลข 2 ตัว ที่ตรงกับ ผลหวยเลขท้าย 2 ตัว ในหลักสิบ และก็หลักหน่วย ซึ่งเลขอีกทั้ง 2 ตัว จำเป็นต้องอยู่ในตำแหน่งประจำหลักที่ถูก

    ซึ่งถ้าเกิดซื้อเลขได้ถูกจะได้รับผลตอบแทนบาทละ 70-100

    3) สลากกินแบ่ง 2 ตัวแบบโต๊ด ด้านล่าง เป็นการซื้อเลข 2 ตัว ที่ออกตรง หวย lotto กับผลของหวย เลขท้าย 2 ตัว ใน หลักสิบ รวมทั้ง หลักหน่วย ซึ่งเลขอีกทั้ง 2 ตัว จะสลับตำแหน่งกันได้

    ซึ่งถ้าเกิดซื้อเลขได้ถูกจะได้รับผลตอบแทนบาทละ 70 – 100

    ดังนี้ เหตุเพราะเลข โต๊ด 2 ตัว จะมีชุดจำนวน เพียงแต่ 2 ชุด ซึ่งมักซื้อกันแบบเลขตรงไปเลย

    ดังเช่นว่า เลข 27 ถ้าหาก เล่นโต๊ด ก็เป็น 27 ด้วยเหตุนี้หากซื้อ คนเล่นลอตเตอรี่จะกำหนด 72 และก็ 27แบบตรงๆไปเลย

    แบบ 3 การสลากกินแบ่งเล่น เลขตัวเดียว หรือ เลขวิ่ง มี 2 ลักษณะ

    ลักษณะเลขวิ่งบน รวมทั้งวิ่งด้านล่าง ของแทงหวย

    1) เลขวิ่งบน เป็นการซื้อเลขเพียงแต่ตัวเดียว ที่ตรงกับผลของเลข 3 ตัวตรง บน ซึ่งเลขตัวที่ แทงจะ อยู่ในตำแหน่งใดก็ได้ จัดว่าถูกทั้งหมดทั้งปวง อัตราการจ่ายผลตอบแทนจะอยู่ที่ บาทละ 3 บาท

    2) เลขวิ่งด้านล่าง เป็นการซื้อเลขเพียงแค่ตัวเดียว ที่ตรงกับผลของเลขท้าย 2 ตัว ของหวย ซึ่งเลขตัว ที่พวกเราแทงจะอยู่ในตำแหน่งใดก็ได้นับว่าถูกทั้งผอง อัตราการจ่าย จะอยู่ที่ บาทละ 4 บาท

    แบบ 4 เลขอื่นๆมี 2 ลักษณะ (มีเฉพาะในบางเว็บ)

    เลข 3 ตัว หน้า เป็นการซื้อเลข 3 ตัว ให้ตรงกับ ผลรางวัลเลขหน้า 3 ตัว ของหวย ซึ่งจะมีด้วยกันอยู่ 2 รางวัลเมื่อถูกมีอัตราการจ่าย บาทละ 280-450 บาท สุดแต่เว็บไซต์เลข 3 ตัวข้างหลัง เป็นการซื้อเลข 3 ตัว ได้ผลตรง กับ ผลรางวัลเลขท้าย 3 ตัว ของหวย ซึ่งจะมีด้วยกันอยู่ 2 รางวัลเมื่อถูกมีอัตราการจ่าย บาทละ 280-450 บาท เว็บหวยออนไลน์ สุดแต่เว็บไซต์ลักษณะของการเล่น หวย ทั้งปวงที่กล่าวมานี้ เจ้ามือบางราย อาจจะเป็นไปได้ว่าจะมีให้พวกเรา เล่นครบทุกแบบอย่าง หรือบางรายอาจจะเป็นไปได้ว่าจะมีเฉพาะบางแบบอย่างหรู

    ReplyDelete
  5. Thanks for sharing this best stuff with us! Keep sharing! I am new in the blog writing. All types blogs and posts are not helpful for the readers. Here the author is giving good thoughts and suggestions to each and every reader through this article. literature-essay Quality of the content is the main element of the blog and this is the way of write my college paper writing and presenting.

    ReplyDelete
  6. Cambridge English Academy is one of the English speaking courses in Noida. Cambridge is very popular and provides trainee who are highly professional. You can also contact us through phone number 9667728146.

    ReplyDelete