BossBey File Manager

Editing: timeline.html

<!DOCTYPE html>
<html lang="en">

<title>BCD India</title>
    
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" href="css/style.css" />
    <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=Montserrat:ital,wght@0,100..900;1,100..900&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/owl.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/responsive.css">
    <link rel="shortcut icon" href="img/fav-ico.png" />
    <link rel="stylesheet" href="css/aos.css" />

</head>
    <body>
  
      <header class="header-menu">
        <div class="logo">
          <a href="index.html">
            <img src="img/BCD_Logo.png" alt="BCD Logo">
          </a>
        </div>
        <nav class="custom-nav">
            <ul class="custom-nav-menu">
                <li><a href="#">Our Story</a>
                  <ul class="custom-dropdown-menu">
                    <li><a href="bcd-group.html">BCD Group</a></li>
                    <li><a href="angad-s-bedi.html">Angad Bedi</a></li>
                    <li><a href="jasna-bedi.html">Jasna Bedi</a></li>
                    <li><a href="ps-bedi.html">PS Bedi</a></li>
                    <li><a href="amrik-singh-bhandari.html">Amrik Singh Bhandari</a></li>
                    <li><a href="timeline.html">Timeline</a></li>
                </ul>
                </li>
                <li><a href="india.html">India</a></li>
                <li><a href="global.html">Global</a></li>
                <li>
                  <a href="services.html">Services</a>
                    
                </li>
                <li><a href="#">World of BCD</a></li>
                <li><a href="connect-with-us.html">Connect</a></li>
                <li><a href="media.html">Media</a></li>
            </ul>
        </nav>
        <button class="custom-menu-toggle" id="menu-toggle">
          <img src="img/burger-menu.svg" alt="">
        </button>
        <div class="custom-mobile-menu" id="mobile-menu">
            <button class="custom-close-menu" id="close-menu">
              <img src="img/close-circle.svg" alt="">
            </button>
            <ul>
                <li class="has-dropdown">
                  <div class="menu-link-with-toggle">
                     <a href="#">Our Story</a>
                     <button class="dropdown-toggle" aria-label="Toggle Dropdown">+</button>
                  </div>
                  <ul class="custom-mob-dropdown-menu">
                    <li><a href="bcd-group.html">BCD Group</a></li>
                    <li><a href="angad-s-bedi.html">Angad Bedi</a></li>
                    <li><a href="jasna-bedi.html">Jasna Bedi</a></li>
                    <li><a href="ps-bedi.html">PS Bedi</a></li>
                    <li><a href="amrik-singh-bhandari.html">Amrik Singh Bhandari</a></li>
                    <li><a href="timeline.html">Timeline</a></li>
                  </ul>
                </li>
                <li><a href="india.html">India</a></li>
                <li><a href="global.html">Global</a></li>
                <li><a href="services.html">Services</a></li>
                <li><a href="world-of-bcd.html">World of BCD</a></li>
                <li><a href="connect-with-us.html">Connect</a></li>
                <li><a href="media.html">Media</a></li>
            </ul>
        </div>
        <div class="head-sm">
          <a href="#">
            <img src="img/linkedin.svg" alt="">
          </a>
          <a href="#">
            <img src="img/x.svg" alt="">
          </a>
        </div>
      </header>
      <div class="inner-banner" style="background-image: url(img/bcd-royale-banner.jpg);">
        <div class="inner-banner-ov">
            <h2>Building the Future with a Legacy of Excellence</h2>
            <p>
              Launched India’s first ready to move-in, income generating apartments
            </p>
        </div>
    </div>
    <div class="bas-sec">
      <nav class="year-nav" id="yearNav">
        
    </nav>

<div class="vision">
        <h3>Our Vision</h3>
        <div class="row mt-4">
            <div class="col-12 col-lg-4 col-md-4">
                <h6>Sustainable Development</h6>
                <p>
                    Implementing eco-friendly practices to build a better, smarter, 
                    and more sustainable world.
                </p>
            </div>
            <div class="col-12 col-lg-4 col-md-4">
                <h6>Innovation</h6>
                <p>
                    Leveraging cutting-edge technology and design to deliver high-quality homes and townships
                     that meet the evolving needs of society.
                </p>
            </div>
            <div class="col-12 col-lg-4 col-md-4">
                <h6>Community Engagement</h6>
                <p>
                    Creating opportunities and moving society forward by adding value and quality
                     to people’s lives through our developments.

</p>
            </div>
        </div>
    </div>
    <section class="ft-sec">
        <div class="row">
          <div class="col-12 col-lg-4 col-md-4">
            <div class="ft-logo">
              <a href="index.html">
                <img src="img/BCD_Logo.png" alt="BCD Logo">
              </a>
            </div>
          </div>
          <div class="col-12 col-lg-4 col-md-4">
            <h6>Quick Links</h6>
            <ul class="ft-link">
              <li>
                <a href="index.html">Home</a>
              </li>
              <li>
              <a href="bcd-group.html">Incorporated BCD GROUP</a>
              </li>
              <li>
              <a href="privacy-policy.html">Privacy Policy</a>
              </li>
              <li>
              <a href="terms-and-conditions.html">Terms & Conditions</a>
               </li>
               <li>
                <a href="safety-and-compliance-protocol.html">Safety & Compliance Protocol</a>
                 </li>
              
            </ul>
          </div>
          <div class="col-12 col-lg-4 col-md-4">
            <h6>Social Media</h6>
            <div class="sm-cont-flex">
              <a href="https://www.linkedin.com/company/bcdgroupindia/" target="_blank">
                <img src="img/linkedin_sq.svg" alt="">
              </a>
              <a href="https://www.facebook.com/thebcdgroup" target="_blank">
                <img src="img/fb-sq.svg" alt="">
              </a>
              <a href="https://www.instagram.com/thebcdgroup/" target="_blank">
                <img src="img/insta-sq.svg" alt="">
              </a>
              
            </div>
          </div>
        </div>
     
       
      </section>
      <div class="cp-rght">
        &#169; 2025 BCD India. All Rights Reserved.
      </div>
         
    <script src="js/jquery.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.appear.js"></script>
    <script src="js/owl.js"></script>
    <script src="js/scrollbar.js"></script>
    <script src="js/swiper.min.js"></script>
    <script src="js/script.js"></script>
    <script src="js/wow.js"></script>
    <script src="js/aos.js"></script>
      <script>
            const timelineData = [
              {
                  year: "1937",
                  image: "https://via.placeholder.com/150",
                  content: "Late Inder Singh Bradow began his journey in construction in pre-partition India, laying the foundation for a legacy in the industry."
              },
              {
                  year: "1952",
                  image: "https://via.placeholder.com/150",
                  content: "Amrit Singh Bradow continued the construction business in independent India, expanding the family's vision."
              },
              {
                  year: "1955",
                  image: "https://via.placeholder.com/150",
                  content: "Shri Amrit Singh Bradow contributed to the construction of the Supreme Court of India, marking a significant milestone."
              },
              {
                  year: "1955-1965",
                  image: "https://via.placeholder.com/150",
                  content: "BCD played a key role in shaping New Delhi with landmark projects such as the Delhi High Court and The Oberoi Hotel."
              },
              {
                  year: "1965-1975",
                  image: "https://via.placeholder.com/150",
                  content: "The company expanded its portfolio with large-scale infrastructure projects, including Bombay Airport, cement plants, and steel plants across India."
              },
              {
                  year: "1982",
                  image: "https://via.placeholder.com/150",
                  content: "BCD went global, starting projects in Iraq, including township developments in Najaf and Basra, marking the beginning of its international presence."
              },
              {
                  year: "2011",
                  image: "https://via.placeholder.com/150",
                  content: "Under Amrit Singh Bradow’s leadership, BCD expanded across India, operating in 12 states and 15 cities."
              },
              {
                  year: "2013",
                  image: "https://via.placeholder.com/150",
                  content: "The company grew exponentially, employing over 9,000 workers and managing 230 million sq. ft. of projects under its B2 division."
              },
              {
                  year: "2015",
                  image: "https://via.placeholder.com/150",
                  content: "BCD launched its Singapore office, establishing its APAC regional headquarters."
              },
              {
                  year: "2017",
                  image: "https://via.placeholder.com/150",
                  content: "BCD secured partnerships with Fortune 500 companies like OPPO, ATL, and Delta Electronics for over 6 million sq. ft. of projects."
              },
              {
                  year: "2019",
                  image: "https://via.placeholder.com/150",
                  content: "Strengthening its global presence, BCD expanded operations from Saudi Arabia to Kuwait, bringing its global headquarters to Dubai."
              },
              {
                  year: "2021",
                  image: "https://via.placeholder.com/150",
                  content: "The company launched NISOS BCD, a ₹700 crore fund aimed at investing in stressed real estate assets, targeting a $1 billion market."
              },
              {
                  year: "2022",
                  image: "https://via.placeholder.com/150",
                  content: "BCD introduced BCD Educity, a student living housing platform designed to meet the growing demand for student accommodations."
              },
              {
                  year: "2023",
                  image: "https://via.placeholder.com/150",
                  content: "Expanding its footprint in urban development, BCD launched three integrated townships in India under the brand name BCD City."
              },
              {
                  year: "2024",
                  image: "https://via.placeholder.com/150",
                  content: "The company strengthened its real estate division with the launch of BCD Royale, focusing on full-fledged development projects."
              },
              {
                  year: "2025",
                  image: "https://via.placeholder.com/150",
                  content: "BCD announced its entry into the hospitality sector with BCD Divinity, catering to religious tourism."
              },
             
          ];
          window.addEventListener('scroll', () => {
            if (window.scrollY > 500) {
                document.querySelector('.year-nav').classList.add('sticky');
            } else {
                document.querySelector('.year-nav').classList.remove('sticky');
            }
          }
        )
          // Generate Navigation
          const yearNav = document.getElementById('yearNav');
          // Generate Timeline
          const timeline = document.querySelector('.timeline');

timelineData.forEach((item, index) => {
              // Create nav item
              const navItem = document.createElement('div');
              navItem.className = 'year-nav-item';
              navItem.textContent = item.year;
              navItem.addEventListener('click', () => {
                  document.getElementById(`section-${index}`).scrollIntoView({
                      behavior: 'smooth'
                  });
              });
              yearNav.appendChild(navItem);

// Create timeline item
              const timelineItem = document.createElement('div');
              timelineItem.className = 'timeline-item';
              timelineItem.id = `section-${index}`;

const card = document.createElement('div');
              card.className = 'timeline-card';

card.innerHTML = `
                  <div class="image-container">
                      <img src="${item.image}" alt="${item.year}">
                  </div>
                  <div class="content-container">
                      <h3 class="year-header">${item.year}</h3>
                      <p class="description">${item.content}</p>
                  </div>
              `;

timelineItem.appendChild(card);
              timeline.appendChild(timelineItem);
          });

// Add scroll spy for active navigation
          const observer = new IntersectionObserver(entries => {
              entries.forEach(entry => {
                  const id = entry.target.id;
                  const navItem = document.querySelector(`[href="#${id}"]`);
                  if (entry.isIntersecting) {
                      document.querySelectorAll('.year-nav-item').forEach(
                          item => item.style.backgroundColor = ''
                      );
                      navItem.style.backgroundColor = '#D1B371';
                  }
              });
          }, { threshold: 0.5 });

document.querySelectorAll('.timeline-item').forEach(item => {
              observer.observe(item);
          });
    </script>
   
    </body>

</html>

Cancel