<div class="card">
  <center>
 <img alt="Author bio image" class="auth-pic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYKUHtxEpTnpexUbelVStrb7C5xvYxZ5J8xy6PyxGD2S15mQIwJVgwjbIpEFGR_ypxU1ghNg-oIxucZ5mrVVKgpqttVcHmcmoLEhGIEEUOsvsZWNFJxepQ-pCXNiUfg7d8dPB3eDhvyuZwDp9FZUKzuw5zJQ3xzhqrTiO5sbv6IO9QlzN-A8gv6BOa14Pz/s16000-rw/roisepikk-small.png" />

  <h2><strong>মো: রইছ উদ্দিন </strong>
    <img height="15" src="https://cdn-icons-png.flaticon.com/512/6364/6364343.png" width="15" />
  </h2>

  <p>
    কম্পিউটার বিজ্ঞানের প্রতি অনুরাগ এবং যুব সম্প্রদায়ের ইতিবাচক পরিবর্তনের জন্য একটি দৃষ্টিভঙ্গি সহ একজন একটিভ ছাত্র/কর্মী। আমি বিশ্বাস করি, "যুবকরাই আমাদের ভবিষ্যতের আশা"। আমি আমার দায়িত্ব যেকোনো পরিস্থিতিতে সৎ এবং নিষ্ঠার সাথে কর্তব্য পালন করি। আমি জীবসেবা ও ভ্রমন প্রিয়।</p>

  <div class="socialbar">
    <a id="github" href="#"><svg viewBox="0 0 16 16" class="bi bi-github" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
  <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
</svg></a>
    &nbsp;
    &nbsp;
    &nbsp;
    <a id="instagram" href="#"><svg viewBox="0 0 16 16" class="bi bi-instagram" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
  <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"></path>
</svg></a>
    &nbsp;
    &nbsp;
    &nbsp;
    <a id="facebook" href="#"><svg viewBox="0 0 16 16" class="bi bi-facebook" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
  <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"></path>
</svg></a>
    &nbsp;
    &nbsp;
    &nbsp;
    <a id="twitter" href="#"><svg viewBox="0 0 16 16" class="bi bi-twitter" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
  <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"></path>
</svg></a>
    </div></center>
  </div>



/* Profile photo */
.auth-pic {
  border: 4px solid #FFFFFF;
  border-radius: 50%;
  box-shadow: 7px 7px 14px #d6d6d6, -7px -7px 14px #ffffff;
  width: 120px;
  height: 120px;
  object-fit: cover;
}

/* Author name */
h2, h2 strong, p, .socialbar a {
  color: black; /* Set text color to white */
}

/* Card styling */
.card {
  border-radius: 0em 2em 0em 2em;
  padding: 10px;
  background: #fff;
  box-shadow: rgb(23 43 99/30%) 0 2px 10px;
  text-align: center;
}

/* Social bar */
.socialbar {
  background-color: ;
  border-radius: 3em;
  padding: 14px;
  padding-bottom: 6px;
  width: 70%;
  margin: 15px auto;
  box-shadow: rgb(23 43 99/30%) 0 2px 10px;
}
.socialbar a {
  transition: 0.4s;
}

#github:hover {
  color: #c9510c;
}

#instagram:hover {
  color: #d62976;
}

#facebook:hover {
  color: #3b5998;
}

#twitter:hover {
  color: #00acee;
}


<div class="linklist-pro mb-3 section" id="ft-post" name="Feature Links">
  <div class="widget LinkList" data-version="2" id="LinkList1">
    <div class="widget-content">
      <div class="linklist-buttons">
        <a href="#aboutme">আমার সম্পর্কে</a>
      </div>
      <div class="linklist-buttons">
        <a href="#cv">জীবনবৃত্তান্ত</a>
      </div>
      <div class="linklist-buttons">
        <a href="#skill">দক্ষতা</a>
      </div>
      <div class="linklist-buttons">
        <a href="#srvc">প্রোজেক্ট</a>
      </div>
      <div class="linklist-buttons">
        <a href="#contact">যোগাযোগ</a>
      </div>
      <div class="linklist-buttons">
        <a href="#edu">এডুকেশন</a>
      </div>
    </div>
    
      .linklist-pro .widget .widget-content {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap
      }

      .linklist-pro .widget .widget-content .linklist-buttons {
        width: calc((100% - 60px)/ 3);
        height: 43px;
        background: #fff;
        line-height: 43px;
        text-align: center;
        overflow: hidden;
        position: relative;
        display: block;
        border-radius: 10px 0px 10px 0px;
        margin: 10px auto;
        box-shadow: rgb(23 43 99/30%) 0 2px 10px;
      }

      .linklist-pro .widget .widget-content .linklist-buttons a {
        color: #000;
        font-size: 18px;
        font-weight: 500;
      }

      .linklist-pro .widget .widget-content .linklist-buttons:hover {
        border: 1px dashed #07b;
        background: yellow
      }

      @media screen and (max-width:880px) {
        .linklist-pro .widget .widget-content .linklist-buttons {
          width: calc((100% - 60px)/ 2)
        }
      }

      @media screen and (max-width:640px) {
        .linklist-pro {
          padding: none
        }

        .linklist-pro .widget .widget-content .linklist-buttons {
          width: calc((100% - 20px)/ 3)
        }
      }
    
  </div>
</div>


  /* Your existing styles */
  .card1 {
    width: 100%;
    height: 254px;
    color: black;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 5px;
    overflow: visible;
  }

  .card1 .item {
    border-radius: 10px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .item:hover {
    transform: scale(1.1);
    transition: all 350ms ease-in-out;
  }

  .item svg {
    width: 40px;
    height: 40px;
    margin-bottom: 7px;
  }

  .item--1 {
    background: #fff;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  }

  .item--2 {
    background: #fff;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  }

  .item--3 {
    background: #fff;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  }

  .item--4 {
    background: #fff;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  }

  .quantity {
    font-size: 25px;
    font-weight: 600;
  }

  .text {
    font-size: 15px;
    font-family: inherit;
    font-weight: 600;
  }

  .text--1 {
    color: rgba(149, 149, 255, 1);
  }

  .text--2 {
    color: rgba(252, 161, 71, 1);
  }

  .text--3 {
    color: rgba(66, 193, 110, 1);
  }

  .text--4 {
    color: rgba(220, 91, 183, 1);
  }


<div class="card1">
  <div class="item item--1">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
      <path fill="none" d="M0 0h24v24H0z"></path>
      <path
        d="M12 20h8v2h-8C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10a9.956 9.956 0 0 1-2 6h-2.708A8 8 0 1 0 12 20zm0-10a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-4 4a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm8 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-4 4a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"
        fill="rgba(149,149,255,1)"
      ></path>
    </svg>
    <span class="quantity" data-target="90">0</span>
    <span class="text text--1">Projects Completed</span>
  </div>
  <div class="item item--2">
    <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 0L24 0 24 24 0 24z" fill="none"></path>
      <path
        fill="rgba(252,161,71,1)"
        d="M16 16c1.657 0 3 1.343 3 3s-1.343 3-3 3-3-1.343-3-3 1.343-3 3-3zM6 12c2.21 0 4 1.79 4 4s-1.79 4-4 4-4-1.79-4-4 1.79-4 4-4zm10 6c-.552 0-1 .448-1 1s.448 1 1 1 1-.448 1-1-.448-1-1-1zM6 14c-1.105 0-2 .895-2 2s.895 2 2 2 2-.895 2-2-.895-2-2-2zm8.5-12C17.538 2 20 4.462 20 7.5S17.538 13 14.5 13 9 10.538 9 7.5 11.462 2 14.5 2zm0 2C12.567 4 11 5.567 11 7.5s1.567 3.5 3.5 3.5S18 9.433 18 7.5 16.433 4 14.5 4z"
      ></path>
    </svg>
    <span class="quantity" data-target="70">0</span>
    <span class="text text--2">Happy Customers</span>
  </div>
  <div class="item item--3">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
      <path fill="none" d="M0 0h24v24H0z"></path>
      <path
        d="M20.083 15.2l1.202.721a.5.5 0 0 1 0 .858l-8.77 5.262a1 1 0 0 1-1.03 0l-8.77-5.262a.5.5 0 0 1 0-.858l1.202-.721L12 20.05l8.083-4.85zm0-4.7l1.202.721a.5.5 0 0 1 0 .858L12 17.65l-9.285-5.571a.5.5 0 0 1 0-.858l1.202-.721L12 15.35l8.083-4.85zm-7.569-9.191l8.771 5.262a.5.5 0 0 1 0 .858L12 13 2.715 7.429a.5.5 0 0 1 0-.858l8.77-5.262a1 1 0 0 1 1.03 0zM12 3.332L5.887 7 12 10.668 18.113 7 12 3.332z"
        fill="rgba(66,193,110,1)"
      ></path>
    </svg>
    <span class="quantity" data-target="150">0</span>
    <span class="text text--3">Cups Of Coffee</span>
  </div>
  <div class="item item--4">
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
      <path fill="none" d="M0 0h24v24H0z"></path>
      <path
        d="M17 15.245v6.872a.5.5 0 0 1-.757.429L12 20l-4.243 2.546a.5.5 0 0 1-.757-.43v-6.87a8 8 0 1 1 10 0zm-8 1.173v3.05l3-1.8 3 1.8v-3.05A7.978 7.978 0 0 1 12 17a7.978 7.978 0 0 1-3-.582zM12 15a6 6 0 1 0 0-12 6 6 0 0 0 0 12z"
        fill="rgba(220,91,183,1)"
      ></path>
    </svg>
    <span class="quantity" data-target="30">0</span>
    <span class="text text--4">Awards</span>
  </div>
</div>

<script>
  function animateCount(element) {
    const target = +element.getAttribute("data-target");
    let count = 0;

    function updateCounter() {
      if (count < target) {
        count++;
        element.textContent = count;
        requestAnimationFrame(updateCounter);
      } else {
        setTimeout(() => {
          count = 0; // Reset count for looping
          updateCounter();
        }, 5000); // Pause before restarting
      }
    }

    updateCounter();
  }

  document.querySelectorAll(".quantity").forEach((el) => animateCount(el));
</script>




<div class="separator" style="clear: both; text-align: center;"><br /></div><h2 id="aboutme" style="text-align: justify;"><span style="color: #800180;">আমার সম্পর্কে--</span></h2><div style="text-align: justify;">আমি আত্মবিশ্বাস, আত্মসম্মান, সততা, সরলতা, দলগত কাজ এবং প্রতিশ্রুতির প্রতি নিজেকে নিবেদিত রাখি। আমি উচ্চ মানের প্রতি নিজেকে দায়িত্বশীল মনে করি এবং ক্রমাগত উন্নতির জন্য সুযোগ খুঁজে চলি। আমি একটি চ্যালেঞ্জিং অবস্থান অর্জন করতে আগ্রহী, যেখানে আমার দক্ষতা এবং জ্ঞান ধারাবাহিক বৃদ্ধি ও উন্নয়নে অবদান রাখতে পারে। আমি এমন পরিবেশে কাজ করতে ভালোবাসি যা জাতীয়, আন্তর্জাতিক, দেশসেবামূলক এবং বহুজাতিক হয়, এবং আমি একটি অর্থবহ প্রভাব তৈরি করার প্রতি আগ্রহী।</div><div>


    

        .container {
            text-align: center;
            background: #ffffff;
            padding: 30px 40px;
            max-width: 100%;
            width: 100%;
        }

        h1 {
            font-size: 2.5em;
            color: #2d3e50;
            margin-bottom: 10px;
        }

        p {
            font-size: 1.2em;
            margin-bottom: 20px;
        }

        .countdown {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
            flex-wrap: nowrap; /* Prevent wrapping to new lines */
        }

        .countdown div {
            margin: 0 10px;
            padding: 15px;
            background-color: #f7f7f7;
            color: black;
            border-radius: 10px;
            font-size: 1.8em;
            width:100%;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .countdown span {
            display: block;
            font-size: 0.7em;
        }

        .happy-birthday {
            display: none;
            background-color: #2ecc71;
            color: white;
            padding: 20px;
            border-radius: 10px;
            font-size: 2em;
            margin-top: 20px;
        }

        @media (max-width: 600px) {
            /* Make the countdown smaller for mobile */
            .countdown div {
                font-size: 1.4em;
                padding: 10px;
                margin: 0 5px;
            }

            h1 {
                font-size: 2em;
            }

            p {
                font-size: 1em;
            }
        }
    

    <div class="container">
        <p>আমার জন্মদিন<strong> ৫ মে</strong>, জন্মদিন হতে আর বাকি!</p>

        <div class="countdown">
            <div id="days">
                <span>দিন</span>
                00
            </div>
            <div id="hours">
                <span>ঘণ্টা</span>
                00
            </div>
            <div id="minutes">
                <span>মিনিট</span>
                00
            </div>
            <div id="seconds">
                <span>সেকেন্ড</span>
                00
            </div>
        </div>

        <div class="happy-birthday" id="birthday-message">
            Happy Birthday! 🎉🎂
        </div>
    </div>

    <script>
        function updateCountdown() {
            const birthdayDate = new Date(new Date().getFullYear(), 4, 5); // May 5th (Month is 0-indexed)
            const now = new Date();

            // Check if birthday has already passed this year, set to next year if so
            if (now > birthdayDate) {
                birthdayDate.setFullYear(birthdayDate.getFullYear() + 1);
            }

            const timeDifference = birthdayDate - now;

            const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
            const hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);

            // Update countdown display
            document.getElementById('days').innerHTML = `${days}<span>দিন</span>`;
            document.getElementById('hours').innerHTML = `${hours}<span>ঘণ্টা</span>`;
            document.getElementById('minutes').innerHTML = `${minutes}<span>মিনিট</span>`;
            document.getElementById('seconds').innerHTML = `${seconds}<span>সেকেন্ড</span>`;

            // Show birthday message if the time has come
            if (timeDifference <= 0) {
                document.getElementById('birthday-message').style.display = 'block';
                document.querySelector('.countdown').style.display = 'none';
            } else {
                document.getElementById('birthday-message').style.display = 'none';
                document.querySelector('.countdown').style.display = 'flex';
            }
        }

        // Update countdown every second
        setInterval(updateCountdown, 1000);
        updateCountdown(); // Initial call to set the countdown
    </script>



</div><h2 id="skill" style="text-align: left;"><span style="color: #00dee6;">আমার দক্ষতা সমূহ --</span></h2><div style="text-align: justify;">আমি ইন্টারনেট জাতীয় বিষয়গুলোতে অধিকতর আগ্রহী এবং দক্ষ। বিশেষ করে ব্র্যান্ড মার্কেটিং, ইন্ডাস্ট্রি/প্রোডাক্ট/প্রতিষ্ঠান উন্নয়ন, অগ্রগতি, পরিকল্পনা, SEO, কনটেন্ট রাইটার, ওয়েবসাইট ডিজাইন, কাস্টমাইজেশন, রেস্পন্সিভ ডিজাইন, ডাটা এন্ট্রি, গ্রাফিক্স ডিজাইন, ক্যানভা প্র, রিলস ভিডিও, লং ভিডিও এডিটিং, MS Office এপ্লিকেশন ট্রেনিং, ব্লগিন ট্রেনিং ইত্যাদি নানান বিষয়ে আমি দক্ষ। আমার এই পোর্টফলিও সাইট টি আমি নিজের সৃজনশীলতার জায়গা থেকে তৈরি করেছি। আমার এই মাল্টি ট্যালেন্ট দেখে আমার কলিগ আমাকে "জিনিয়াস" বলে সম্বোধন করেন যে নিকনেমটি আমার মনে গেথে গেছে।</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">
    

        .skills {
            margin-top: 20px;
            text-align: left;
        }

        .skill-bar {
            margin: 15px 0;
        }

        .skill-title {
            font-size: 1.1em;
            margin-bottom: 5px;
        }

        .bar-container {
            width: 100%;
            height: 20px;
            background-color: #e0e0e0;
            border-radius: 10px;
            overflow: hidden;
            position: relative;
        }

        /* The bar representing the skill percentage */
        .bar {
            height: 100%;
            width: 0;
            background-color: #4caf50;
            border-radius: 10px;
            position: absolute;
            animation: fillBar 25s ease-in-out forwards; /* Trigger the fill animation */
        }

        .percentage {
            position: absolute;
            color: green;
            font-weight: bold;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
        }

        /* Animation for the progress bar */
        @keyframes fillBar {
            0% {
                width: 0;
            }
            100% {
                width: var(--skill-percent);
            }
        }

        @media (max-width: 600px) {
            .container {
                padding: 20px;
            }

            h1 {
                font-size: 1.8em;
            }

            .skill-title {
                font-size: 1em;
            }

            .bar-container {
                height: 15px;
            }
        }
    


    <div class="container">
    
        <div class="skills">
            <!--Skill Bars-->
            <div class="skill-bar">
                <div class="skill-title">HTML</div>
                <div class="bar-container">
                    <div class="bar" id="html-bar" style="--skill-percent: 90%;"></div>
                    <div class="percentage" id="html-percentage">0%</div>
                </div>
            </div>
            <div class="skill-bar">
                <div class="skill-title">CSS</div>
                <div class="bar-container">
                    <div class="bar" id="css-bar" style="--skill-percent: 80%;"></div>
                    <div class="percentage" id="css-percentage">0%</div>
                </div>
            </div>
            <div class="skill-bar">
                <div class="skill-title">JavaScript</div>
                <div class="bar-container">
                    <div class="bar" id="js-bar" style="--skill-percent: 70%;"></div>
                    <div class="percentage" id="js-percentage">0%</div>
                </div>
            </div>
            <div class="skill-bar">
                <div class="skill-title">Blogging</div>
                <div class="bar-container">
                    <div class="bar" id="react-bar" style="--skill-percent: 95%;"></div>
                    <div class="percentage" id="react-percentage">0%</div>
                </div>
            </div>
            <div class="skill-bar">
                <div class="skill-title">SEO</div>
                <div class="bar-container">
                    <div class="bar" id="node-bar" style="--skill-percent: 85%;"></div>
                    <div class="percentage" id="node-percentage">0%</div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Skill levels (adjust the percentages as needed)
        const skills = {
            html: 90,
            css: 80,
            js: 70,
            react: 95,
            node: 85
        };

        // Function to animate the percentage text for each skill
        function animateSkillPercentage(skillId, skillPercentage, percentageId) {
            const percentageText = document.getElementById(percentageId);
            let count = 0;

            const interval = setInterval(() => {
                count++;
                percentageText.textContent = `${count}%`;
                if (count >= skillPercentage) {
                    clearInterval(interval);
                }
            }, 500);
        }

        // Call the animateSkillPercentage function for each skill
        animateSkillPercentage('html', skills.html, 'html-percentage');
        animateSkillPercentage('css', skills.css, 'css-percentage');
        animateSkillPercentage('js', skills.js, 'js-percentage');
        animateSkillPercentage('react', skills.react, 'react-percentage');
        animateSkillPercentage('node', skills.node, 'node-percentage');
    </script>
</div><div><span><script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    .amrbody {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 300px;
    }
    .custom-container {
        position: relative;
        width: 80%;
        height: 80%;
        max-width: 600px;
        margin: 0 auto;
    }
    .price-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 2rem;
        font-weight: bold;
        color: #333;
        display: none;
    }


<div class="amrbody">
<div class="custom-container">
    <canvas id="priceChart"></canvas>
    <div class="price-text" id="priceText">Demand: $0</div>
</div></div>

<script>
    // Data to simulate market price changes (with new values for illustration)
    const dataPoints = [50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200];

    // Create the chart
    const ctx = document.getElementById('priceChart').getContext('2d');
    const priceChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: Array.from({ length: dataPoints.length }, (_, i) => i + 1), // Time or X-axis labels
            datasets: [{
                label: 'My Monthly Salary Demand',
                data: [],
                borderColor: '#4caf50',
                backgroundColor: 'rgba(76, 175, 80, 0.2)',
                fill: true,
                tension: 0.4,
                pointRadius: 0,
                borderWidth: 2
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            animation: {
                duration: 1500,
                easing: 'easeOutQuad',
                onProgress: function(animation) {
                    if (animation.currentStep === animation.numSteps) {
                        const priceText = document.getElementById('priceText');
                        const lastPrice = 200; // Setting the final price to $200
                        priceText.innerHTML = `Price: $${lastPrice}`;
                        priceText.style.display = 'block';
                    }
                }
            },
            scales: {
                x: {
                    title: {
                        display: true,
                        text: 'Time'
                    }
                },
                y: {
                    title: {
                        display: true,
                        text: 'Demand'
                    },
                    beginAtZero: true
                }
            }
        }
    });

    // Function to animate the data points
    let index = 0;
    let interval;

    function startAnimation() {
        interval = setInterval(() => {
            if (index < dataPoints.length) {
                priceChart.data.datasets[0].data.push(dataPoints[index]);
                priceChart.update();
                index++;
            } else {
                clearInterval(interval);
                setTimeout(() => {
                    // Reset the chart and restart the animation after 5 seconds
                    priceChart.data.datasets[0].data = [];
                    index = 0;
                    priceChart.update();
                    startAnimation(); // Restart animation after 5 seconds
                }, 5000); // Wait 5 seconds before restarting the animation
            }
        }, 500); // Update every 500ms for animation
    }

    // Start the animation when the page loads
    startAnimation();
</script>
</span></div><h2 id="cv"><span style="color: #00dee6;">আমার অভিজ্ঞতা সমূহ --</span></h2><div><span style="color: #00dee6;"><div class="separator" style="clear: both;"><img border="0" data-original-height="1536" data-original-width="2048" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicxXHhyhySItrAJ9oGCixXUJ47sTOpHKz9DqXHYJWprBfCcgDd_t3yn-PbArviXYeo4mQ34FJYfnHKOrCPgP342E-6g99i1Fs7SalOjZdMSut0Q77GJoJDuEYVqV1AOrClpRgnJQmAfd9oLZaaCn4vdncig6Rf55heFw1RcfJlL8oyihAJMqweWqh6RiKJ/s16000-rw/Professional%205%20Steps%20Women%20Career%20Tips%20Graph.png" width="100%" /></div></span></div><div> 
    
        /* Container for the list */
          img {
      pointer-events: none; /* Disable all mouse interactions */
    }
        .styled-list {
            list-style-type: none;
            padding: 0;
            width: 100%;
            max-width: 100%;
            margin: 0 auto;
        }
        
        /* Individual list items */
        .styled-list li {
            background-color: #ffdddd;
            color: #333;
            margin: 10px 0;
            padding: 15px;
            border-radius: 8px;
            font-family: Arial, sans-serif;
            font-size: 16px;
        }
    

    <ul class="styled-list">
        <li>* ফ্রিলান্সিং করে লাখ টাকা আয়</li>
        <li>* ডিজিটাল মার্কেটিং ট্রেনিং প্রদান</li>
        <li>* Loop IT তে ব্লগিং SEO কনটেন্ট রাইটিং ট্রেনিং প্রদান</li>
        <li>* S. A. Mannan Cadet School এ দশম শ্রেণির সহকারী শিক্ষকতা</li>
      <li>* EDGE, ICT Division &amp; PSTU এর ফ্রিলান্সিং ট্রেনিং প্রোগ্রামের CO-Ordinator</li>
        <li>* অরগানিক মার্কেটিং এবং নিউজ রাইটার হিসেবে কাজের অভিজ্ঞতা</li>
        
    </ul>

</div><h2 style="text-align: left;"><span style="color: #800180;">আমার সাম্প্রতিক কার্যক্রম সমূহ--</span></h2><div>আমি সর্বদাই সোশ্যাল ওয়ার্ক কে সাপোর্ট করি এবং সেবা মূলক কাজে অংশগ্রহণ করে সেই খাঁতে ভূমিকা রাখি।</div><div><br /></div><div class="slider-container">
  <div class="slider">
    <div class="slides">
      <div class="slide">
        <img alt="Image 1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqD5lLzEFFuSuVsGAt-Q0bgX5nMU9nUvpaFg5kQ7sIyIKS_Xb1q2nEovceMYSuUNMyS4lBICueDt2d4X5_dCA_5xX58O8BVEJBXCNLUTvOkjng3ZhznGuktkub0MP9Gsbpn3qLmYwWHEbqA1hrzPFLQkTGvwcJTVAkjvT6xiP69_Xy_StIsJaM22cwEl8s/s16000-rw/Picsart_24-11-16_17-14-11-086.jpg" />
      </div>
      <div class="slide">
        <img alt="Image 2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglniiGUiK1IYlndGx8quRGl34uYA6pVrD6r1tbvAPeUW2ofs48aTs1pcg7jD6CVCkeQYFEmsrz9KAAc97DcMcC-ri-ySY-l3k21otBv-i0PmSetSarMfmdiGSVR4i-B23Br2cS8WFwzEKeGBS9rjmrOS60UrrwcFVFaqev4h89vTnMiP21U11RwWDBK7a1/s16000-rw/Picsart_24-11-16_17-12-51-708.jpg" />
      </div>
      <div class="slide">
        <img alt="Image 3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWfj4-YAY9T2_6sVNCudcRluiFQvbMfUWriDgPRdqnFV4PEsPF-DvfmfGTBy39Ir78arxAjx5W_yzpzZhlie8OQ-JKmsgCxMzYUdi34azqbhRkqlKT0TssGZSOcE_Lyw_g2_t2v5DRAynYYeKCv9SACaivqUyHOC-VerotRgDEc4aqy2rXIF2HHghzioJ3/s16000-rw/Picsart_24-11-16_17-07-31-016.jpg" />
      </div>
      <div class="slide">
        <img alt="Image 4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3s1UQ8Nfd1ASXjUVej2jkPh6tCMPzu6IwJVGP4L7YfWYDTa91x_otP6j4mjU9ZrFnLaPXb6RWq0TSGtbPPa6gwynA_TImZJwKBLPHiLEd2w9ME86Jbkx8XSdKeY9EYbZhAWQ9QckGb4_-jBNrJ6igj-rhJU0mm0pEFFZ0ZzG0jztP98qaVD9uHD_ZShXe/s16000-rw/Picsart_24-11-16_16-46-02-886.png" />
      </div>
    </div>
  </div>
</div>

<!-- Dots for navigation placed under the slider -->
<div class="dots">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>

<script>
  let currentSlide = 0;
  const slideInterval = 3000;
  const dots = document.querySelectorAll('.dot'); // Get the dot elements

  function moveSlide(direction) {
    const slides = document.querySelector('.slides');
    const totalSlides = slides.children.length;
    currentSlide = (currentSlide + direction + totalSlides) % totalSlides;
    const newTransform = `translateX(-${currentSlide * 100}%)`;
    slides.style.transform = newTransform;
    
    // Update active dot
    updateDots();
  }

  function updateDots() {
    dots.forEach((dot, index) => {
      if (index === currentSlide) {
        dot.classList.add('active');
      } else {
        dot.classList.remove('active');
      }
    });
  }

  function autoSlide() {
    moveSlide(1);
  }

  // Initialize the slider with a set interval for auto sliding
  setInterval(autoSlide, slideInterval);

  // Initialize the first dot as active
  updateDots();
</script>


  .slider-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
  }

  .slider {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border: 4px solid #800180;
    border-radius: 10px;
    box-sizing: border-box;
    position: relative;
  }

  .slides {
    display: flex;
    transition: transform 1s ease-in-out;
  }

  .slide {
    min-width: 100%;
    box-sizing: border-box;
  }

  .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .slide img:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
  }

  .dots {
    position: relative;
    text-align: center;
    margin-top: 10px;
  }

  .dot {
    display: inline-block;
    height: 10px;
    width: 10px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    transition: background-color 0.3s ease;
    cursor: pointer;
  }

  .active {
    background-color: black;
  }

<div style="text-align: left;"><br /></div><div style="text-align: left;">

  .gallery-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 10px;
    padding: 10px;
  }

  .gallery-item {
    overflow: hidden;
    position: relative;
  }

  .gallery-item img {
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease-in-out;
  }

  /* Define the heart beat animation */
  @keyframes heartbeat {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }

  .gallery-item:nth-child(1) {
    animation: heartbeat 1s ease-in-out 0s;
  }

  .gallery-item:nth-child(2) {
    animation: heartbeat 1s ease-in-out 1s;
  }

  .gallery-item:nth-child(3) {
    animation: heartbeat 1s ease-in-out 2s;
  }

  .gallery-item:nth-child(4) {
    animation: heartbeat 1s ease-in-out 3s;
  }

  /* Adjust animations so that they are not all running at the same time */
  @media (max-width: 768px) {
    .gallery-container {
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
  }


<div class="gallery-container">
  <div class="gallery-item"><img alt="Image 1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2sBWovkpwVFpqs9oWyqgbtY8_qutob2YlqkiwAXsigcRIs7u74U1rKdhZ5qc2tCJdKj75l1aOOGHivd0cAYCbNpLX6byvUeV61oFb8SiUFR1ldbd10a2eeTZ09UNmKqt1VdPW5J2fvUaN-AHuLf-Z_FT4OqvWnI8nD5e7oXrQVJKWAGm9nf8fzAIfwqI_/s16000-rw/Picsart_24-11-17_22-47-46-633.png" /></div>
  <div class="gallery-item"><img alt="Image 2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoyBg5ZZzuJdGFv6uwLb6vLbrHHqtR3MvuxfJuMTsazKhCNck-Z5vLM2CyxPp1FLPocCaGOt0idWtI5Fgi4-ABXLeoKTo1-x9uz-KKlWYO3rnEhlXjPlyDKn5Ii4kTZcXGlCUEnP8Tmev2NEU_Q3FusWRL_h0VSnHktDJChKizZIPY92OFevhwFoFFzzDJ/s16000-rw/Picsart_24-11-17_22-52-42-648.png" /></div>
  <div class="gallery-item"><img alt="Image 3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy7c5E3zwm9EO4boDKgTHzw3SDxERrH6jICDg34_rwERRvoT3-NNov480YBzIFub3erOLtnQmoKhwTBZXXGGhcgBd7UG3eDL9DWBQa4Zn4mYqLDRbFdvkEDDwG06osxZe7FpnzIweM8EBJOwXGYtZn12SZ7CoWg5RYtxbDyg15C-Sz8ljKzEiTCTS3Lqak/s16000-rw/Picsart_24-11-18_00-07-33-963.jpg" /></div>
  <div class="gallery-item"><img alt="Image 4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg26dGwPgZ74LvybZyImERRdUEX0Sk6gY3AG0JAaI53IZUpivTYOtGjbVc9DAFxTQK1jLTiQr_O0FLv2rMbqHfK_4ywfNvbzqOigNOc9gL1Y_LcAjZTqkXW68zlKguoiLvGrvqQn2nHwrKr3l45THJV5M2lrujemwPCuBvCe4X97QShuuLscrCpUEGIQv_2/s16000-rw/Picsart_24-11-17_23-54-52-995.jpg" /></div>
</div><div style="text-align: left;"><span style="font-weight: normal;"><br /></span></div><div><div class="separator" style="clear: both; text-align: center;"><img border="0" data-original-height="1067" data-original-width="1600" height="213" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLIKMxCfzhRZ3bA68ZRmUtPIJ1RmJvtpmDfclG08px2vIBxQBRfCEk9KHKsMyxQHRUI-i381TI0Q8ruP0a8iWwhVdG8YAgZfnagoz2bWb-RefsDIydkeIqZy19fM7tLTbuAvUpSN0hsQ/s16000-rw/WhatsApp+Image+2024-05-31+at+22.17.29_c8e36c83.jpg" width="100%" /></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfVJARlXaDqcA3MI8mIcufTpvfNYmsg06KImCs7qLu8NIbDm92OQxTmF5k0PSx5o0jHetiZxv5CNwOao1XPbfEA60XdDavdPXXfPXFRrSm_xGgUSxc1mfFFvD7n_gvoqd1T1an92B-jj4-S6odCOsnKE_r-Pxve5ofJqfZ7G7IjItVPx4rUIQfAfZt5cx-/s1080-rw/FB_IMG_1731920098977.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="810" data-original-width="1080" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfVJARlXaDqcA3MI8mIcufTpvfNYmsg06KImCs7qLu8NIbDm92OQxTmF5k0PSx5o0jHetiZxv5CNwOao1XPbfEA60XdDavdPXXfPXFRrSm_xGgUSxc1mfFFvD7n_gvoqd1T1an92B-jj4-S6odCOsnKE_r-Pxve5ofJqfZ7G7IjItVPx4rUIQfAfZt5cx-/s16000-rw/FB_IMG_1731920098977.jpg" width="100%" /></a></div></div><div><br /></div><h2><span style="color: #00dee6;">আমার আরও দক্ষতা--</span><span style="color: #00dee6;">&nbsp;</span></h2><div>

  .styled-list2 {
    list-style-type: none;
    padding: 0;
    width: 100%;
  }

  .styled-list2 li {
    background-color: #eaf7ff;
    color: #207399;
    font-size: 1.2em;
    padding: 15px;
    margin-bottom: 10px;
    border-left: 5px solid #9cd1e6;
  }



<ul class="styled-list2">
        <li>* Airdrop, Crypto Currency Web3 সম্পর্কে জানি এবং শিখছি নিয়মিত</li>
        <li>* যেকোনো কাজ আমি সৃজনশীলতার সাথে করার চেষ্টা করি।</li>
        <li>* ডিজিটাল মার্কেটিং অরগানিক ভাবে করার চেষ্টা।</li>
        <li>* রাজনীতি নয় সমাজসেবা/দেশসেবা পছন্দ করি।</li>
      
        
</ul>

</div><div><br /></div><h2 id="srvc"><span style="color: #00dee6;">আমার সার্ভিস সমূহ--</span></h2><div style="text-align: justify;">আমি মাল্টিপল বিষয়ে অভিজ্ঞ এবং দক্ষ, আমি সৃজনশীল এবং সৎ। আমি সাধারণত যে সকল সার্ভিস দিয়ে থাকি সেগুলো নিচে দেওয়া হয়েছে।</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">

    <section class="services">
        <div class="service-item">
            <div class="cover-image">
                <img alt="Web Development" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPmkf4LJZ1v45UIRZcNk4oiOn47NtsLJ3Lb_tBHME4czX0KeQHJblwCvidSjLPWi-pcHTBAykom4eKyBs6hYYqekLqns9Ep2brdwrJoGZJfbjFhR4VMfOvU9-xRCFGlJekTPXALqyBay3yD9LWMb0ikf0ayidCP5h9dmaWSFOgF93FMk0yr4UnH47y56no/s16000-rw/Untitled%20design.png" />
            </div>
            <h3>Marketing/Branding</h3>
            <p>আপনার পণ্য/সেবাকে সকলের নিকট ছড়িয়ে দেওয়া বা প্রচার করার কাজে আমি কাজ করতে পারি। আপনার সেবা/পণ্যকে ব্র্যান্ড করে তোলা আমার দায়িত্ব।</p>
        </div>

        <div class="service-item">
            <div class="cover-image">
                <img alt="Mobile Apps" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh7ake95qS1uE7MvvdadZmHORislV3ucHTT1sRPJixNJCkuObB0mAXFWV-1s-KZQntKwTCgs3Uf9db5TIt6pyNnoh2B4swmEK60T9SchmLwHixPgbA94pI4UqDUxnpCXA6LmHDqkHv2yipKrxR_gKVfsSZSpmsfrhjXKrEZpd4hrMjrtR4eYmrQ1SDZr0N/s16000-rw/Untitled%20design%20%281%29.png" />
            </div>
            <h3>Tution/Training</h3>
            <p>আপনার সন্তান/শিক্ষার্থী পড়াতে আমাকে টিউটর হিসেবে নিতে দ্বিধাবোধ করবেন না। এছাড়াও আমি কম্পিউটার/ফ্রিলান্সিং বিষয়ে ট্রেনিং প্রদান করি। </p>
        </div>

        <div class="service-item">
            <div class="cover-image">
                <img alt="UI/UX Design" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRhss09oji4muh8hpdHkvtGdQImKBhI8pglqPLb8YBCKtqiH4iEsLKqZhTsUJI76C0sOzxkOCBhXEk56mr2eel1pY_KZh0SD0mzFkgeFIeul1r47oJ6PSvQbHprUxFSr_6AhFY69UOXaP5OCo9O6v0RB4ESiT4dHzQSL06-Xgz7ePlNs56MuLG7Ryc5YE0/s16000-rw/Assistant.png" />
            </div>
            <h3>Assistant</h3>
            <p>যেকোনো সরকারি/বেসরকারি/ব্যাক্তিগত প্রজেক্টে আমি সহকারী বা উন্নয়নকারী হিসেবে কাজ করে থাকি।</p>
        </div>

        <div class="service-item">
            <div class="cover-image">
                <img alt="SEO Optimization" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9bSna3ihIoZSi2Mmer88iX4Oip6xG4ds3SHzoALyeKnk4nkWgBOIWb00Zwd7Ka_5s_ad63jHcfuXcSaG6_bYkXjpkTwW2kbqhMQ7YdWiV2ik-8zF_a1Y9nfrricnO9bJ3gfSBFXfJrQmglKpq-aZ-Cbh25tPyK0YChPr1e29WSJqwE1GRWciMWQAWP1_H/s16000-rw/Assistant%20%281%29.png" />
            </div>
            <h3>Brand Optimization</h3>
            <p>আপনার ব্র্যান্ড কে এসইও এবং নানান উপায়ে অপটিমাইজেশন করতে আমি আছি আপনার সাথে।</p>
        </div>
    </section>




.services {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

/* Service Cards */
.service-item {
    width: 96%;
    padding:20px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 2s ease, transform 6s ease;
}

.service-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.service-item h3 {
    margin: 20px 0;
    font-size: 1.6rem;
}

.service-item p {
    font-size: 1rem;
    color: #555;
}

.cover-image img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 8px;
}

/* Media Queries */
@media (max-width: 768px) {
    .services {
        flex-direction: column;
        align-items: center;
    }
}



<script>// Wait for the DOM to fully load before applying animations
document.addEventListener('DOMContentLoaded', function() {
    const serviceItems = document.querySelectorAll('.service-item');
    
    // Add animation effect to each service item when it enters the viewport
    function animateServices() {
        serviceItems.forEach(item => {
            const rect = item.getBoundingClientRect();
            if (rect.top <= window.innerHeight) {
                item.style.opacity = 1;
                item.style.transform = 'translateY(0)';
            }
        });
    }

    // Trigger the animation on scroll
    window.addEventListener('scroll', animateServices);

    // Trigger animation on page load
    animateServices();
});

</script></div><div style="text-align: justify;"><br /></div>  <div style="text-align: justify;"><div><h2 id="contact" style="text-align: left;">CONTACT</h2><div><table style="min-width: 100%; white-space: nowrap;">
        <tbody><tr>
            <th>Mobile Number</th>
            <td>01642890942</td>
        </tr>
        <tr>
            <th>Email</th>
            <td><a href="mailto:mdroiseuddin360@gmail.com">mdroiseuddin360@gmail.com</a></td>
        </tr>
        <tr>
            <th>Location</th>
            <td>Faridpur, Dhaka, Bangladesh</td>
        </tr>
        <tr>
            <th>Website</th>
            <td><a href="https://mdroiseuddin.blogspot.com" target="_blank">mdroiseuddin.blogspot.com</a></td>
        </tr>
  <tr>
            <th>Facebook ID</th>
            <td><a href="https://www.facebook.com/roise06" target="_blank">Click Here</a></td>
        </tr>
  <tr>
            <th>Facebook Page</th>
            <td><a href="https://www.facebook.com/roiseuddin2" target="_blank">Click Here</a></td>
        </tr>
  <tr>
            <th>Telegram</th>
            <td><a href="https://t.me/roiseuddin" target="_blank">Click Here</a></td>
        </tr>
 
    </tbody></table></div></div><div><br /></div><div><h2 style="text-align: left;">Personal Information</h2></div><div><div><table style="min-width: 100%; white-space: nowrap;"><tbody><tr><th>Name</th><td>MD ROISE UDDIN</td></tr><tr><th>Present Address</th><td>Faridpur, Dhaka, Bangladesh</td></tr><tr><th>G-mail</th><td><a href="mailto:mdroiseuddin360@gmail.com">mdroiseuddin360@gmail.com</a></td></tr><tr><th>Date of Birth</th><td>May 05, 2004</td></tr><tr><th>Age</th><td>20+</td></tr><tr><th>Marital Status</th><td>Unmarried</td></tr><tr><th>Nationality</th><td>Bangladeshi</td></tr><tr><th>Education</th><td>B.Sc. Honours 2nd Year in Physics, <br />National University (2025)</td></tr></tbody></table></div></div><div><div style="text-align: left;"><br /></div><h2 style="text-align: left;">Professional Aspiration</h2><div style="text-align: justify;"><div><span class="dropCap">I</span> am committed to honesty, simplicity, teamwork, and dedication. I hold myself to high standards of quality and continuously seek opportunities for improvement. I am eager to secure a challenging position in a dynamic organization where my skills and knowledge can contribute to ongoing growth and development. I thrive in environments that are national, multinational, and multicultural, and I am passionate about making a meaningful impact.</div></div><div><br /></div><h2 id="edu" style="text-align: left;">Education</h2><div><table style="min-width: 100%; white-space: nowrap;"><thead><tr><th>Exam</th><th>Board</th><th>Year</th><th>Grade</th></tr></thead><tbody><tr><td>HSC</td><td>Dhaka</td><td>2022</td><td>5.00</td></tr><tr><td>SSC</td><td>Dhaka</td><td>2020</td><td>5.00</td></tr><tr><td>JSC</td><td>Dhaka</td><td>2018</td><td>5.00</td></tr><tr><td>PSC</td><td>Dhaka</td><td>2015</td><td>5.00</td></tr></tbody></table></div><div><br /></div><h2 style="text-align: left;">My Educational institutions</h2><div></div><div><div><h2><table style="min-width: 100%; white-space: nowrap;"><tbody><tr><th>2008-2009</th><td><a href="https://en.wikipedia.org/wiki/Nagarkanda_Upazila" target="_blank">Qasimul Ulum Islamia Madrasa <br />Jungurdi Nagarkanda</a></td></tr><tr><th>2009-2013</th><td><a href="https://en.wikipedia.org/wiki/Nagarkanda_Upazila" target="_blank">Jungurdi Govt. Primary School</a></td></tr><tr><th>2013-2015</th><td><a href="https://en.wikipedia.org/wiki/Faridpur_District#Education">Police Lines High School,Faridpur</a></td></tr><tr><th>2015-2020</th><td><a href="https://en.wikipedia.org/wiki/Faridpur_Zilla_School">Faridpur Zilla School</a></td></tr><tr><th>2020-2025</th><td><a href="https://en.wikipedia.org/wiki/Government_Rajendra_College">Government Rajendra College</a></td></tr></tbody></table></h2></div><div></div></div><div><br /></div></div><h3 id="contact" style="text-align: center;"><span style="color: #351c75;">--ব্র্যান্ড সমূহ--</span></h3><div style="text-align: justify;"><br /></div><div style="text-align: justify;"></div><div style="text-align: justify;"><div class="unique-slider-container">
  <div class="unique-slider">
    <div class="unique-slides">
      <div class="unique-slide">
        <img alt="Image 1" src="https://bizcareit.com/wp-content/uploads/2024/10/news-channel-bizcareit-webp-2.webp" />
      </div>
      <div class="unique-slide">
        <img alt="Image 2" src="https://bizcareit.com/wp-content/uploads/2024/10/news-channel-bizcareit-webp.webp" />
      </div>
      <div class="unique-slide">
        <img alt="Image 3" src="https://bizcareit.com/wp-content/uploads/2024/10/news-channel-bizcareit-webp.webp" />
      </div>
      <div class="unique-slide">
        <img alt="Image 4" src="https://bizcareit.com/wp-content/uploads/2024/10/news-channel-bizcareit-webp-2.webp" />
      </div>
    </div>
  </div>
</div>


  .unique-slider-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
  }

  .unique-slider {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .unique-slides {
    display: flex;
    transition: transform 1s ease-in-out;
  }

  .unique-slide {
    min-width: 100%;
    transition: opacity 1s ease-in-out;
  }

  .unique-slide img {
    width: 100%;
    border-radius: 10px;
  }

  /* Adding hover effect to the images */
  .unique-slide img:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
  }


<script>
  let currentUniqueSlide = 0;
  const uniqueSlideInterval = 3000;

  function moveUniqueSlide(direction) {
    const uniqueSlides = document.querySelector('.unique-slides');
    const totalUniqueSlides = uniqueSlides.children.length;
    currentUniqueSlide = (currentUniqueSlide + direction + totalUniqueSlides) % totalUniqueSlides;
    const newUniqueTransform = `translateX(-${currentUniqueSlide * 100}%)`;
    uniqueSlides.style.transform = newUniqueTransform;
  }

  function autoUniqueSlide() {
    moveUniqueSlide(1);
  }

  // Initialize the slider with a set interval for auto sliding
  setInterval(autoUniqueSlide, uniqueSlideInterval);

  // Optional: Manually control slides using buttons (can add if needed)
  // function nextUniqueSlide() { moveUniqueSlide(1); }
  // function prevUniqueSlide() { moveUniqueSlide(-1); }
</script>
</div>
  
</div>


    
        .contact-section {
            padding: 50px 20px;
            text-align: center;
        }
        .contact-section h2 {
            font-size: 2.5em;
            margin-bottom: 10px;
            color: #333;
        }
        .contact-section p {
            font-size: 1.2em;
            margin-bottom: 20px;
            color: #666;
        }
        .contact-details {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
        }
        .contact-details div {
            font-size: 1.1em;
            color: #555;
        }
        .contact-details a {
            color: #007BFF;
            text-decoration: none;
        }
        .contact-details a:hover {
            text-decoration: underline;
        }
    


    <section class="contact-section">
        <p>Feel free to reach out to me for collaborations, projects, or hiring opportunities.</p>
        
        <div class="contact-details">
            <div><strong>Email:</strong> <a href="mailto:mdroiseuddin360@gmail.com">mdroiseuddin360@gmail.com</a></div>
            <div><strong>Phone:</strong> <a href="tel:+8801642890942">01642890942</a></div>
            <div><strong>LinkedIn:</strong> <a href="https://www.linkedin.com/in/mdroiseuddin360/" target="_blank">linkedin.com/in/mdroiseuddin360/</a></div>
            <div><strong>Website:</strong> <a href="https://mdroiseuddin.blogspot.com/" target="_blank">mdroiseuddin.blogspot.com/</a></div>
        </div>
    </section>
</div></div>