How to create website using html css bootstrap || Full responsive

 

Source Code

 

Youtube video

Images Download

 

HTML CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- font -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <!-- bootstrap cdn link -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <!-- style css -->
    <link rel="stylesheet" href="style.css">

    <!-- font awesome -->
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
    <!-- font awesome -->
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
    <title>codewithme</title>
</head>
<body>


    <!-- header section start -->
    <header>
        <nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top">
            <div class="container text-center">
              <a class="navbar-brand fw-bold fs-3 text-capitalize headerLogo" href="#">
                  code<span>with</span>me.
              </a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-5 menuLink">
                  <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link text-capitalize" href="#">about</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link text-capitalize" href="#">service</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link text-capitalize" href="#">blog</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link text-capitalize" href="#">contact</a>
                  </li>
                </ul>
                <button class="commonBtn text-uppercase py-2 px-5 border-0 fw-bold">free analytics</button>
              </div>
            </div>
          </nav>
    </header>
    <!-- header section end -->


    <!-- main section start -->

    <!-- banner section start -->
    <div class="bannerSection">
      <div class="container">
        <div class="row justify-content-center align-items-center gy-5">
          <div class="col-lg-6">
            <div class="bannerInfo">
              <h1 class="text-capitalize">let's check and optimize your websites</h1>
              <p>your text</p>
              <button class="bannerButton text-uppercase fw-bold py-2 px-5 border-1 d-flex justify-content-center align-items-center">
                watch now
                <a href="#" class="playAnimationButton ms-2"><i class="fas fa-play-circle"></i></a>
              </button>
            </div>
          </div>
          <div class="col-lg-6 text-center">
            <img src="img/banner/1.jpg" alt="" class="bannerImg">
          </div>
        </div>
      </div>
    </div>
    <!-- banner section end -->

    <!-- categories section start -->
    <div class="categoriesSection py-5">
      <div class="container">
        <div class="row g-3 justify-content-center align-items-center">
          <div class="col-md-6 col-lg-4">
            <div class="card text-center shadow border-0 py-4">
              <img src="img/categories/cat1.svg" alt="" class="categoryImg">
              <div class="categoryInfo mt-3">
                <h4 class="fw-bold">SEO Consultancy</h4>
                <p class="mb-3 mt-3">your text</p>
                <button class="categoryBtn py-1 px-4 border-0 text-white">Read More</button>
              </div>
            </div>
          </div>
          <div class="col-md-6 col-lg-4">
            <div class="card text-center shadow border-0 py-4">
              <img src="img/categories/cat2.svg" alt="" class="categoryImg">
              <div class="categoryInfo mt-3">
                <h4 class="fw-bold">SEO Consultancy</h4>
                <p class="mb-3 mt-3">your text</p>
                <button class="categoryBtn py-1 px-4 border-0 text-white">Read More</button>
              </div>
            </div>
          </div>
          <div class="col-md-6 col-lg-4">
            <div class="card text-center shadow border-0 py-4">
              <img src="img/categories/cat3.svg" alt="" class="categoryImg">
              <div class="categoryInfo mt-3">
                <h4 class="fw-bold">SEO Consultancy</h4>
                <p class="mb-3 mt-3">your text</p>
                <button class="categoryBtn py-1 px-4 border-0 text-white">Read More</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- categories section end -->

    <!-- about us section start -->
    <div class="aboutSection">
      <div class="container">
        <div class="row justify-content-center align-items-center gy-5">
          <div class="col-lg-6 text-center">
            <img src="img/banner/02.jpg" alt="" class="aboutImg">
          </div>
          <div class="col-lg-6">
            <div class="aboutInfo">
              <h4 class="mainTitle"><span></span>About us</h4>
              <p class="mainDecs">your text</p>
              <button class="categoryBtn py-1 px-4 border-0 text-white">Read More</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- about us section end -->

    <!-- service section start -->
    <div class="serviceSection">
      <div class="container">
        <div class="serviceTitle text-center">
          <h4 class="mainTitle"><span></span>Our Services</h4>
        </div>
        <div class="row mt-4 justify-content-center align-items-center g-3">
          <div class="col-lg-3 col-md-4 col-sm-6 col-12">
            <div class="serviceItem text-center py-3 px-3">
              <div class="serviceIcon">
                <i class="fas fa-poll"></i>
              </div>
              <div class="serviceInfo">
                <h6 class="mt-4 mb-3">Off-Page SEO</h6>
                <p>your text</p>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-4 col-sm-6 col-12">
            <div class="serviceItem text-center py-3 px-3">
              <div class="serviceIcon">
                <i class="fas fa-poll"></i>
              </div>
              <div class="serviceInfo">
                <h6 class="mt-4 mb-3">Off-Page SEO</h6>
                <p>your text</p>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-4 col-sm-6 col-12">
            <div class="serviceItem text-center py-3 px-3">
              <div class="serviceIcon">
                <i class="fas fa-poll"></i>
              </div>
              <div class="serviceInfo">
                <h6 class="mt-4 mb-3">Off-Page SEO</h6>
                <p>your text</p>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-4 col-sm-6 col-12">
            <div class="serviceItem text-center py-3 px-3">
              <div class="serviceIcon">
                <i class="fas fa-poll"></i>
              </div>
              <div class="serviceInfo">
                <h6 class="mt-4 mb-3">Off-Page SEO</h6>
                <p>your text</p>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-4 col-sm-6 col-12">
            <div class="serviceItem text-center py-3 px-3">
              <div class="serviceIcon">
                <i class="fas fa-poll"></i>
              </div>
              <div class="serviceInfo">
                <h6 class="mt-4 mb-3">Off-Page SEO</h6>
                <p>your text</p>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-4 col-sm-6 col-12">
            <div class="serviceItem text-center py-3 px-3">
              <div class="serviceIcon">
                <i class="fas fa-poll"></i>
              </div>
              <div class="serviceInfo">
                <h6 class="mt-4 mb-3">Off-Page SEO</h6>
                <p>your text</p>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-4 col-sm-6 col-12">
            <div class="serviceItem text-center py-3 px-3">
              <div class="serviceIcon">
                <i class="fas fa-poll"></i>
              </div>
              <div class="serviceInfo">
                <h6 class="mt-4 mb-3">Off-Page SEO</h6>
                <p>your text</p>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-4 col-sm-6 col-12">
            <div class="serviceItem text-center py-3 px-3">
              <div class="serviceIcon">
                <i class="fas fa-poll"></i>
              </div>
              <div class="serviceInfo">
                <h6 class="mt-4 mb-3">Off-Page SEO</h6>
                <p>your text</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- service section end -->

    
    <!-- pricing section start -->
    <div class="pricingSection">
      <div class="container">
        <div class="serviceTitle text-center">
          <h4 class="mainTitle"><span></span>Our Pricing</h4>
        </div>

        <div class="row mt-4 justify-content-center align-items-center g-4">
          <div class="col-lg-4 col-md-6 col-12">
            <div class="pricing text-center py-4">
              <div class="pricingBasic">
                <h6>Basic</h6>
                <h1 class="fw-bold">$99.<span>99</span></h1>
                <h6>Per Month</h6>
              </div>
              <div class="pricingBorder mb-3 mt-3"></div>
              <div class="pricingInfo">
                <p class="py-2 m-0">700 change <span>keyword</span> </p>
                <p class="py-2 m-0">11 analytics <span>campaign</span> </p>
                <p class="py-2 m-0">Social Media <span>Review</span> </p>
                <p class="py-2 m-0">24/7 <span>support</span> </p>
              </div>
              <div class="pricingBorder mb-3 mt-3"></div>
              <button class="pricingButton text-uppercase fw-bold">get now</button>
            </div>
          </div>
          <div class="col-lg-4 col-md-6 col-12">
            <div class="pricing pricingTwo text-center py-4">
              <div class="pricingBasic">
                <h6>Basic</h6>
                <h1 class="fw-bold">$99.<span>99</span></h1>
                <h6>Per Month</h6>
              </div>
              <div class="pricingBorder mb-3 mt-3"></div>
              <div class="pricingInfo">
                <p class="py-2 m-0">700 change <span>keyword</span> </p>
                <p class="py-2 m-0">11 analytics <span>campaign</span> </p>
                <p class="py-2 m-0">Social Media <span>Review</span> </p>
                <p class="py-2 m-0">24/7 <span>support</span> </p>
              </div>
              <div class="pricingBorder mb-3 mt-3"></div>
              <button class="pricingButton text-uppercase fw-bold">get now</button>
            </div>
          </div>
          <div class="col-lg-4 col-md-6 col-12">
            <div class="pricing text-center py-4">
              <div class="pricingBasic">
                <h6>Basic</h6>
                <h1 class="fw-bold">$99.<span>99</span></h1>
                <h6>Per Month</h6>
              </div>
              <div class="pricingBorder mb-3 mt-3"></div>
              <div class="pricingInfo">
                <p class="py-2 m-0">700 change <span>keyword</span> </p>
                <p class="py-2 m-0">11 analytics <span>campaign</span> </p>
                <p class="py-2 m-0">Social Media <span>Review</span> </p>
                <p class="py-2 m-0">24/7 <span>support</span> </p>
              </div>
              <div class="pricingBorder mb-3 mt-3"></div>
              <button class="pricingButton text-uppercase fw-bold">get now</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- pricing section end -->


    <!-- main section end -->


    <!-- footer section start -->
    <footer>
      <div class="container">
        <div class="row g-3 gy-5 justify-content-center">
          <div class="col-lg-3 col-md-6 col-sm-6 col-12">
            <div class="socialMedia">
              <h1>Codewithme</h1>
              <p class="mb-4">your text</p>
              <div class="socialItem">
                <i class="fab fa-facebook-f"></i>
                <i class="fab fa-instagram"></i>
                <i class="fab fa-youtube"></i>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 col-sm-6 col-12">
            <div class="footerCompany">
              <h6 class="mb-4">Company</h6>
              <a href="#" class="mt-2 text-capitalize d-block text-black">about us</a>
              <a href="#" class="mt-2 text-capitalize d-block text-black">career</a>
              <a href="#" class="mt-2 text-capitalize d-block text-black">terms of service</a>
              <a href="#" class="mt-2 text-capitalize d-block text-black">help</a>
              <a href="#" class="mt-2 text-capitalize d-block text-black">support</a>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 col-sm-6 col-12">
            <div class="footerContact">
              <h6 class="mb-4">Contact</h6>
              <p class="m-0">California, usa</p>
              <span>+00 1144 3344 5566 7788</span>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 col-sm-6 col-12">
            <div class="newsLetter">
              <h6 class="mb-4">Newsletter</h6>
              <p class="text-capitalize">get in touch</p>
              <div class="newsLetterInput">
                <input type="email" placeholder="Your Email">
                <button class="newsLetterButton mt-3">Send</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
    <!-- footer section end -->


    <!-- bootstrap js link -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>

 

 

CSS CODE

body {
    font-family: 'Poppins', sans-serif;
    /* font-family: 'Baloo Bhaijaan 2', cursive; */
}
/* header section start */
.headerLogo span {
    color: #4834d4;
    font-size: 24px;
}
.navbar-light .navbar-toggler {
    box-shadow: none;
}
.nav-item {
    font-family: 'Baloo Bhaijaan 2', cursive;
}
.nav-item .nav-link {
    font-size: 16px;
}
.nav-item .nav-link.active {
    font-weight: bold;
    color: #4834d4 !important;
}
.nav-item .nav-link:hover {
    color: #4834d4 !important;
}
.commonBtn {
    background-color: #4834d4;
    color: #fff;
    font-family: 'Baloo Bhaijaan 2', cursive;
    border-radius: 30px;
    transition: all .5s ease;
    animation: commonBtn 1s infinite;
}
.commonBtn:hover {
    background-color: #686de0;
}
@keyframes commonBtn {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.007);
    }
    50% {
        transform: scale(1);
    }
    75% {
        transform: scale(1.007);
    }
    100% {
        transform: scale(1);
    }
}
/* header section end */
/* banner section start */
.bannerSection {
    background-color: #F6F5FC;
    padding: 100px 0 50px 0;
}
.bannerInfo {
    position: relative;
}
.bannerInfo h1 {
    font-size: 40px;
}
.bannerInfo p {
    font-family: 'Baloo Bhaijaan 2', cursive;
    line-height: 20px;
    margin: 30px 0;
}
.bannerButton {
    border-color: #686de0;
    color: #686de0;
    border-radius: 30px;
    outline: none;
    transition: all .5s ease;
}
.bannerButton:hover {
    border-color: #4834d4;
    color: #4834d4;
}
.playAnimationButton i {
    color: #686de0;
    transition: all .5s ease;
}
.bannerButton:hover .playAnimationButton i {
    color: #4834d4;
}
.playAnimationButton {
    width: 30px;
    height: 30px;
    line-height: 30px;
    background-color: #fff;
    border-radius: 30px;
    display: inline-block;
}
.playAnimationButton::before {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: #4834d4;
    border-radius: 30px;
    left: 164px;
    animation: playAnimationButton 1s infinite;
}
@keyframes playAnimationButton {
    0%, 30% {
        transform: scale(0);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: .4;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}
.bannerImg {
    width: 400px;
    border-radius: 30px;
    animation: bannerImg 1.5s ease;
}
@keyframes bannerImg {
    0% {
        transform: translateX(300px);
    }
    100% {
        transform: translateX(0);
    }
}
/* banner section end */
/* categories section start */
.categoryImg {
    width: 100px;
    margin: 0 auto;
}
.categoryInfo {
    font-size: 18px;
}
.categoryInfo p {
    font-family: 'Baloo Bhaijaan 2', cursive;
    font-size: 16px;
    line-height: 20px;
}
.categoryBtn {
    outline: none;
    background-color: #4834d4;
    border-radius: 30px;
    font-size: 14px;
    transition: all .5s ease;
}
.categoryBtn:hover {
    background-color: #686de0;
}
/* categories section end */
/* about us section start */
.aboutSection {
    padding: 70px 0;
}
.aboutImg {
    width: 400px;
}
.mainTitle {
    position: relative;
    display: inline-block;
    color: #000;
}
.mainTitle span {
    position: absolute;
    width: 35px;
    height: 3px;
    top: 25px;
    left: 0;
    background-color: #4834d4;
    transition: all .5s ease;
}
.mainTitle:hover span {
    width: 100%;
}
.mainDecs {
    font-family: 'Baloo Bhaijaan 2', cursive;
    color: rgba(0, 0, 0, .6);
    line-height: 20px;
    margin: 10px 0 20px 0;
}
/* about us section end */
/* service section start */
.serviceSection {
    padding: 70px 0;
    background-color: #F6F5FC;
}
.serviceItem {
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .2);
    border-radius: 20px;
    transition: all .4s ease;
}
.serviceItem:hover {
    background-color: #4834d4;
    color: #fff;
}
.serviceItem:hover p {
    color: #fff;
}
.serviceIcon {
    width: 50px;
    height: 50px;
    background-color: #fff;
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .2);
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
    margin: 0 auto;
}
.serviceIcon i {
    color: #4834d4;
}
.serviceInfo p {
    font-family: 'Baloo Bhaijaan 2', cursive;
    font-size: 14px;
    color: rgba(0, 0, 0, .6);
    transition: all .4s ease;
}
/* service section end */
/* pricing section start */
.pricingSection {
    padding: 70px 0;
}
.pricing {
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .2);
    border-radius: 10px;
}
.pricingBasic h6 {
    font-size: 18px;
}
.pricingBasic h1 {
    font-family: 'Baloo Bhaijaan 2', cursive;
}
.pricingBasic h1 span {
    font-size: 24px;
    color: rgba(0,0,0,.4);
}
.pricingBorder {
    width: 80%;
    height: .5px;
    background-color: #4834d4;
    margin: 0 auto;
}
.pricingInfo p {
    font-family: 'Baloo Bhaijaan 2', cursive;
    transition: all .5s ease;
}
.pricingInfo p:hover {
    background-color: rgba(0, 0, 0, .1);
}
.pricingButton {
    width: 50%;
    padding: 10px 0;
    border: none;
    border-radius: 30px;
    outline: none;
    background-color: #686de0;
    color: #fff;
    transition: all .5s ease;
}
.pricingButton:hover {
    width: 80%;
    background-color: #4834d4;
}
.pricingTwo {
    background-color: #4834d4;
    transform: scaleY(1.1);
    color: #fff;
}
.pricingTwo .pricingBorder {
    background-color: #fff;
}
.pricingTwo .pricingButton {
    background-color: transparent;
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .2);
}
/* pricing section end */
/* footer section start */
footer {
    padding: 80px 0;
    background-color: #F6F5FC;
}
.socialMedia h1 {
    font-family: 'Baloo Bhaijaan 2', cursive;
}
.socialMedia p {
    font-size: 14px;
    font-family: 'Baloo Bhaijaan 2', cursive;
    line-height: 20px;
}
.socialItem i {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #fff;
    border-radius: 50%;
    margin-right: 10px;
    cursor: pointer;
    transition: all .5s ease;
}
.socialItem i:hover {
    background-color: #4834d4;
    color: #fff;
}
.footerCompany a {
    font-size: 14px;
    text-decoration: none;
    font-family: 'Baloo Bhaijaan 2', cursive;
}
.footerCompany a:hover {
    text-decoration: underline;
}
.footerContact p, span {
    font-size: 12px;
}
.newsLetterInput input {
    width: 100%;
    border-radius: 10px;
    outline: none;
    border: none;
    padding: 10px;
    font-family: 'Baloo Bhaijaan 2', cursive;
}
.newsLetterInput .newsLetterButton {
    width: 100%;
    border: none;
    background-color: #4834d4;
    color: #fff;
    padding: 10px 0;
    border-radius: 30px;
    font-weight: bold;
    transition: all .5s ease;
}
.newsLetterInput .newsLetterButton:hover {
    background-color: #686de0;
}
/* footer section end */
/* media query */
@media screen and (max-width: 991.99px) {
    /* header section start */
    .menuLink {
        margin: 10px 0 0 0 !important;
    }
    /* header section end */
    /* about section start */
    .aboutInfo {
        text-align: center;
    }
    /* about section end */
    /* pricing section start */
    .pricingTwo {
        transform: scaleY(1);
    }
    /* pricing section end */
    /* footer section start */
    footer {
        padding: 80px 0 10px 0;
    }
    /* footer section end */
}
@media screen and (max-width: 500.99px) {
    /* banner section start */
    .bannerImg {
        width: 100%;
    }
    /* banner section end */
    /* about section start */
    .aboutImg {
        width: 100%;
    }
    /* about section end */
}

 

Note 

1 blurple. #4834d4
2. #686de0

3 white.#F6F5FC