test

<code>
<!doctype html>
<html lang=”en”>
<head>
  <!– <!– Required meta tags –> –>
  <meta charset=utf-8>
  <meta name=viewport content=”width=device-width,initial-scale=1,shrink-to-fit=no”>
  <title>!! Product List Demo!!</title>
  <!– <!– Fonts CSS –> –>
  <link href=”https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800&display=swap” rel=”stylesheet”>
  <!– <!–CSS file –> –>
  <link rel=”stylesheet” href=”css/bootstrap.min.css”>
  <style>
    /* header css */
    .navbar-toggler-icon {
      display: inline-block;
      background: url(../images/toggle.png) !important;
      background-repeat: no-repeat;
      width: 24px;
      height: 18px;
      vertical-align: middle;
      content: “”;
      background-size: 100% 100%;
    }
    .navbar-light .navbar-toggler {
      color: rgba(0, 0, 0, .55);
      border-color: rgb(0 0 0 / 0%);
    }
    .header-part {
      display: block;
      width: 100%;
    }
    .navbar-nav .nav-item .nav-link:hover {
      color: #000000 !important;
    }
    .navbar-brand img {
      margin: 5px 0px;
      width: 150px;
    }
    .fixed-top {
      position: fixed;
      top: 0px;
      background: #bf9893 !important;
      right: 0;
      left: 0;
      z-index: 99999;
      padding: 20px 0px;
      box-shadow: -1px 3px 7px rgb(0 0 0 / 15%);
    }
    .navbar-nav .nav-item .nav-link {
      transition: all 0.7s ease 0s;
      padding: 0 61px;
      color: #fff !important;
      font-size: 18px;
      font-weight: 500;
      margin: 0px;
      letter-spacing: 1px;
    }
    .navbar-nav .nav-item .nav-link:hover {
      color: #000000 !important;
    }
    .navbar-nav .nav-item .nav-link:last-child {
      padding-right: 0px;
    }
    .navbar-nav .nav-item .nav-link a img {
      vertical-align: baseline;
      border-style: none;
      margin: -3px;
    }
    .main-menu {
      display: flex;
      padding-left: 0;
      margin-bottom: 0;
      list-style: none;
      justify-content: flex-end;
      flex-wrap: wrap;
      width: 100%;
    }
    .cart-menu {
      display: inline-flex;
      margin-left: 58px;
    }
    .cart-menu ul {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-content: center;
      gap: 20px;
    }
    .cart-menu li img {
      width: 35px;
    }
    /* Responsive */
    @media(max-width: 1400px) {
      .container {
        max-width: 1400px;
        margin: 0px auto;
        width: 100%;
      }
    }
    @media(max-width: 1180px) {
      .navbar-nav .nav-item .nav-link {
        padding: 0 30px;
      }
    }
    @media(max-width: 1024px) {
      .navbar-nav .nav-item .nav-link {
        padding: 0 30px;
      }
    }
    @media(max-width: 992px) {
      .navbar-toggler-icon {
        width: 37px !important;
        height: 39px !important;
        vertical-align: middle !important;
        background-size: 100% 100% !important;
      }
      .navbar-toggler {
        padding: 0;
      }
      .cart-menu li img {
        width: 40px;
      }
      .fixed-top {
        padding: 15px 5px;
      }
      .cart-menu ul {
        position: absolute;
        top: 19px;
        right: 4%;
        gap: 15px;
      }
      .main-menu {
        justify-content: space-between;
      }
      .navbar-nav .nav-item .nav-link {
        padding: 0.7em 1em !important;
        font-size: 100%;
        font-weight: 500;
      }
      .navbar-toggler:focus,
      .navbar-toggler:hover {
        text-decoration: none;
        outline: none;
      }
      .navbar-toggler:focus {
        box-shadow: none;
      }
      .navbar-nav {
        flex-direction: column;
      }
      .product-grid-row ul {
        flex-wrap: nowrap;
        overflow-y: scroll;
      }
    }
    @media(max-width: 840px) {
      .navbar-toggler-icon {
        width: 50px;
        height: 50px;
      }
      .navbar-toggler {
        padding: 0;
      }
      .cart-menu li img {
        width: 40px;
      }
      .fixed-top {
        padding: 15px 5px;
      }
      .cart-menu ul {
        position: absolute;
        top: 19px;
        right: 4%;
        gap: 20px;
      }
      .main-menu {
        justify-content: space-between;
      }
      .navbar-nav .nav-item .nav-link {
        padding: 0.7em 1em !important;
        font-size: 100%;
        font-weight: 500;
      }
      .navbar-toggler:focus,
      .navbar-toggler:hover {
        text-decoration: none;
        outline: none;
      }
      .navbar-toggler:focus {
        box-shadow: none;
      }
      .navbar-nav {
        flex-direction: column;
      }
      .navbar-brand img {
        width: 130px;
      }
    }
    @media(max-width: 767px) {
      .navbar-toggler-icon {
        width: 37px !important;
        height: 39px !important;
        vertical-align: middle !important;
        background-size: 100% 100% !important;
      }
      .navbar-toggler {
        padding: 0;
      }
      .cart-menu li img {
        width: 42px;
      }
      .fixed-top {
        padding: 15px 5px;
      }
      .cart-menu ul {
        position: absolute;
        top: 19px;
        right: 4%;
        gap: 10px;
      }
      .main-menu {
        justify-content: space-between;
      }
      .navbar-light .navbar-toggler {
        color: rgb(0 0 0 / 0%);
        border-color: rgb(0 0 0 / 0%);
      }
      .navbar-nav {
        border-top: none;
        z-index: 1;
        margin-top: 3px;
        display: block;
        width: 100%;
      }
      .navbar-nav .nav-item .nav-link {
        padding: 0.7em 1em !important;
        font-size: 100%;
        font-weight: 500;
      }
      .navbar-toggler:focus {
        box-shadow: none;
      }
      .navbar-brand img {
        margin: 5px 0px;
        width: 130px;
      }
    }
    @media(max-width: 600px) {
      .navbar-toggler-icon {
        width: 37px !important;
        height: 39px !important;
        vertical-align: middle !important;
        background-size: 100% 100% !important;
      }
      .navbar-toggler {
        padding: 0;
      }
      .cart-menu li img {
        width: 42px;
      }
      .fixed-top {
        padding: 15px 5px;
      }
      .cart-menu ul {
        position: absolute;
        top: 19px;
        right: 4%;
        gap: 10px;
      }
      .main-menu {
        display: block;
      }
      .navbar-nav .nav-item .nav-link {
        padding: 0.7em 1em !important;
        font-size: 100%;
        font-weight: 500;
      }
      .top-section {
        display: block;
        margin: 0px;
        padding: 0px;
        height: auto;
      }
      .navbar-nav {
        background-color: #bf9893;
      }
      .navbar-toggler:focus,
      .navbar-toggler:hover {
        text-decoration: none;
        outline: none;
      }
      .navbar-brand img {
        margin: 5px 0px;
        width: 150px;
      }
      .navbar-toggler:focus {
        box-shadow: none;
      }
    }
    @media(max-width: 360px) {
      .navbar-toggler-icon {
        width: 37px !important;
        height: 39px !important;
        vertical-align: middle !important;
        background-size: 100% 100% !important;
      }
      .navbar-toggler {
        padding: 0;
      }
      .cart-menu li img {
        width: 41px;
      }
      .fixed-top {
        padding: 15px 5px;
      }
      .cart-menu ul {
        position: absolute;
        top: 19px;
        right: 4%;
        gap: 10px;
      }
      .main-menu {
        display: block;
      }
      .navbar-nav .nav-item .nav-link {
        padding: 0.7em 1em !important;
        font-size: 100%;
        font-weight: 500;
      }
      .top-section {
        display: block;
        margin: 0px;
        padding: 0px;
        height: auto;
      }
      .navbar-nav {
        background-color: #bf9893;
      }
      .navbar-toggler:focus,
      .navbar-toggler:hover {
        text-decoration: none;
        outline: none;
      }
      .navbar-brand img {
        margin: 5px 0px;
        width: 109px;
      }
      .navbar-toggler:focus {
        box-shadow: none;
      }
    }
  </style>
</head>
<body>
  <div class=”wrapper”>
    <!– header secion –>
    <div class=”header-part”>
      <div class=”top-section”>
        <nav class=”navbar navbar-expand-lg navbar-light bg-light d-flex fixed-top”>
          <div class=”container”>
            <div class=”main-menu”>
              <a class=”navbar-brand” href=”#”><img src=”images/logo.png” alt=”logo” /></a>
              <div class=”collapse navbar-collapse” id=”navbarSupportedContent”>
                <ul class=”navbar-nav me-auto mb-2 mb-lg-0″>
                  <li class=”nav-item”>
                    <a class=”nav-link active” aria-current=”page” href=”#”>Home</a>
                  </li>
                  <li class=”nav-item”>
                    <a class=”nav-link” href=”#”>About Us</a>
                  </li>
                  <li class=”nav-item”>
                    <a class=”nav-link” aria-current=”page” href=”#”>Our work</a>
                  </li>
                  <li class=”nav-item”>
                    <a class=”nav-link” aria-current=”page” href=”#”>Our Product</a>
                  </li>
                  <li class=”nav-item”>
                    <a class=”nav-link” aria-current=”page” href=”#”>Contact Us</a>
                  </li>
                </ul>
              </div>
              <div class=”cart-menu”>
                <ul>
                  <li><a href=”#”><img src=”images/searc-icon.png” alt=”searchbar” /></a></li>
                  <li> <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></li>
                  <li><a href=”#”><img src=”images/card.png” alt=”card” /></a></li>
                </ul>
              </div>
            </div>
          </div>
        </nav>
      </div>
    </div>
  </div>
  <!– <!– js file –> –>
  <script src=”js/bootstrap.min.js”></script>
</body>
</html>
</code>
<!– Responsive stcky header with dropdown –>
<!doctype html>
<html lang=”en”><head>
  <!– Required meta tags –>
  <meta charset=”utf-8″>
  <meta name=”viewport” content=”width=device-width,initial-scale=1,shrink-to-fit=no”>
  <title>Responsive stcky header with dropdown</title>
  <!– Fonts CSS –>
  <link href=”https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800&amp;display=swap” rel=”stylesheet”>
  <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
  <!– Bootstrap CSS –>
  <link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css”>
  <style>
    .navbar-nav {
      display: flex;
      flex-direction: column-reverse;
      padding-left: 0;
      margin-bottom: 0;
      list-style: none;
      justify-content: flex-end;
      flex-wrap: wrap;
      width: 100%;
    }
    .navbar-brand span {
      color: #ffffff;
      font-size: 18px;
      font-weight: 600;
      letter-spacing: 0.1em;
      line-height: 21px;
    }
    .navbar-brand {
      color: #fff;
      font-size: 25px;
      font-weight: 700;
      letter-spacing: 0.1em;
    }
    .navbar-brand img {
      margin: 5px 0px;
    }
    .fixed-top {
      position: fixed;
      top: 41px;
      right: 0;
      left: 0;
      background: #f1fcff;
      z-index: 99999;
      padding: 10px 100px;
      transition: 0.5s;
    }
    .les-btn {
      margin: 0px 0px 0px 20px;
      padding: 9px 15px;
      border: 1px solid #000;
      display: inline;
      border-radius: 22px;
    }
    .navbar-nav .nav-item .nav-link {
      transition: all 0.7s ease 0s;
      padding: 0 31px;
      color: #0f7a95 !important;
      font-size: 18px;
      font-weight: 500;
      margin: 0px;
      letter-spacing: 1px;
    }
    .navbar-nav .nav-item .nav-link:hover {
      color: #000000 !important;
    }
    .navbar-nav .nav-item .nav-link:last-child {
      padding-right: 0px;
    }
    .navbar-expand-md .navbar-nav .dropdown-menu {
      border-top: 3px solid #5863f8;
    }
    .dropdown-item:hover {
      background-color: #367996;
      color: #fff;
    }
    .dropdown-menu {
      position: absolute;
      top: 100%;
      left: 0;
      z-index: 1000;
      display: none;
      float: left;
      min-width: 10rem;
      padding: 1px;
      margin: 0;
      font-size: 1rem;
      color: #212529;
      text-align: left;
      list-style: none;
      background-color: #fff;
      background-clip: padding-box;
      border: none;
      border-radius: 0;
    }
    .dropdown-item {
      display: block;
      width: 100%;
      padding: 8px 17px;
      clear: both;
      font-weight: 400;
      color: #212529;
      text-align: inherit;
      white-space: nowrap;
      background-color: transparent;
      border: 0;
    }
    nav {
      -webkit-transition: padding-top .3s, padding-bottom .3s;
      -moz-transition: padding-top .3s, padding-bottom .3s;
      transition: padding-top .3s, padding-bottom .3s;
      border: none;
    }
    .navbar-nav .nav-item .nav-link a img {
      vertical-align: baseline;
      border-style: none;
      margin: -3px;
    }
    .dropdown-toggle::after {
      display: inline-block;
      display: inline-block;
      width: 16px;
      height: 14px;
      background: url(../images/arrow-down-sign-to-navigate.webp);
      content: “”;
      background-size: 100%;
      margin: 0px 7px;
      vertical-align: 0;
      border-top: 0;
      border-right: 0;
      border-bottom: 0;
      border-left: 0;
    }
    .main-menu {
      display: flex;
      padding-left: 0;
      margin-bottom: 0;
      list-style: none;
      justify-content: flex-end;
      flex-wrap: wrap;
      width: 100%;
    }
    .shrink {
      padding-top: 0;
      padding-bottom: 0;
      background-color: #d6efff;
      top: 0;
    }
    @media (max-width:768px) {
      .navbar-nav {
        background-color: #f3fcff;
        border-top: none;
        color: #fff;
        z-index: 1;
        margin-top: 3px;
        display: block;
        width: 100%;
      }
      .navbar-nav .nav-item .nav-link {
        padding: 0.7em 1em !important;
        font-size: 100%;
        font-weight: 500;
      }
      .navbar-brand img {
        margin: 10px 0px;
        width: 150px;
      }
      .navbar-light .navbar-toggler {
        color: rgb(0 0 0 / 0%);
        border-color: rgb(0 0 0 / 0%);
      }
      .navbar-toggler:focus,
      .navbar-toggler:hover {
        text-decoration: none;
        outline: none;
      }
      .fixed-top {
        position: fixed;
        top: 84px;
        right: 0;
        left: 0;
        background: #ffffff !important;
        z-index: 99999;
        display: contents;
        padding: 10px 35px;
      }
      .shrink {
        padding-top: 10px;
        padding-bottom: 0;
        background-color: #d6efff;
        top: 0;
      }
      .dropdown-menu.show {
        display: block;
        width: 100%;
      }
      .main-menu {
        display: flex;
        padding-left: 0;
        margin-bottom: 0;
        list-style: none;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 100%;
      }
    }
  </style>
</head>
<body>
  <div class=”header-part”>
    <div class=”top-header” style=”
    height: 60px;
    background: aqua;
“>
      <div class=”container-fluid”>
      </div>
    </div>
    <div class=”top-section”>
      <nav class=”navbar navbar-expand-lg navbar-light bg-light d-flex fixed-top” id=”banner”>
        <div class=”container-fluid”>
          <div class=”main-menu”>
            <a class=”navbar-brand” href=”#”><img src=”images/logo0.webp” alt=”logo here”></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″>
                <li class=”nav-item”>
                  <a class=”nav-link active” aria-current=”page” href=”#”>Home</a>
                </li>
                <li class=”nav-item”>
                  <a class=”nav-link” href=”#”>About Us</a>
                </li>
                <li class=”nav-item dropdown”>
                  <a class=”nav-link dropdown-toggle” href=”#” id=”navbarDropdown” role=”button” data-bs-toggle=”dropdown” aria-expanded=”false” style=”padding-right: 0px;”>
                    Add-in Services
                  </a>
                  <ul class=”dropdown-menu” aria-labelledby=”navbarDropdown”>
                    <li><a class=”dropdown-item” href=”#”>Excel add-in Development</a></li>
                    <li><a class=”dropdown-item” href=”#”>Outlook add-in Development</a></li>
                    <li><a class=”dropdown-item” href=”#”>Word add-in Development</a>
                    </li>
                    <li><a class=”dropdown-item” href=”#”>Power Points add-in
                        Development</a></li>
                    <li><a class=”dropdown-item” href=”#”>Gmail Add-ons Development</a></li>
                    <li><a class=”dropdown-item” href=”#”>Google Sheet add-in
                        Development</a></li>
                  </ul>
                </li>
                <li class=”nav-item”>
                  <a class=”nav-link active” aria-current=”page” href=”#”>Case Studies</a>
                </li>
                <li class=”nav-item”>
                  <a class=”nav-link active” aria-current=”page” href=”#”>Blog</a>
                </li>
                <li class=”nav-item”>
                  <a class=”nav-link active” aria-current=”page” href=”#”>Contact Us</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </nav>
    </div>
  </div>
  <div style=”height: 900px; background: #0f7a95;”></div>
  <!– Optional JavaScript –>
  <script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
  <script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js”></script>
  <script type=”text/javascript”>
    $(document).on(“scroll”, function () {
      if
        ($(document).scrollTop() > 86) {
        $(“#banner”).addClass(“shrink”);
      }
      else {
        $(“#banner”).removeClass(“shrink”);
      }
    });</script>
</body></html>
<!– Custome font family –>
@font-face {
      font-family: “pt_root_uibold”;
      src: url(“../../assets/fonts/pt_root_ui_bold-webfont.woff2”) format(“woff2”), url(“../../assets/fonts/pt_root_ui_bold-webfont.woff”) format(“woff”);
      font-weight: 700;
      font-style: normal;
      font-display: swap
  }
  @font-face {
      font-family: “pt_root_uilight”;
      src: url(“../../assets/fonts/pt_root_ui_light-webfont.woff2”) format(“woff2”), url(“../../assets/fonts/pt_root_ui_light-webfont.woff”) format(“woff”);
      font-weight: 300;
      font-style: normal;
      font-display: swap
  }
  <!– Acf repetot filed  –>
 <div class=”feature_area bg_color2 pt-80 pb-70″>
                 <div class=”container”>
                    <div class=”row”>
                    <?php
  if( have_rows(‘corse_details’) ){
  while( have_rows(‘corse_details’) )
     {the_row();
  ?>
                       <div class=”col-lg-3 col-md-6 col-sm-12″>
                          <div class=”feature_style_three”>
                             <div class=”feature_style_thre_icon”>
                                <img src=”<?php echo get_sub_field(‘corse_img’) ?>” alt=”” />
                             </div>
                             <div class=”feature_style_tree_content”>
                                <div class=”feature_style_three_title”>
                                   <h4> <?php echo get_sub_field(‘cours_name’) ?></h4>
                                </div>
                                <div class=”feature_style_three_text”>
                                   <p><?php echo get_sub_field(‘course_descreption’) ?>
                                   </p>
                                </div>
                                <div class=”feature_style_three_butoon”>
                                   <a href=”#”>Read More<img src=”<?php echo get_template_directory_uri(); ?>/assets/images/white-arrow.png” alt=””></a>
                                </div>
                             </div>
                          </div>
                       </div>
                       <?php } }?>
<!– create tempate –>
  <?php
   //Template Name: contact us
   get_header();
   ?>