HTML/CSS/JS Multiple pages of HTML in one file

I'm fairly new to HTML/CSS/JS (about 3 months now). I'm currently trying to create an e-commerce website but i'm having an issue with my products page. Whenever you click a product, It's supposed to take you to a product details page showing things such as the name, price, a picture, and an add to cart button. I have a quite a few products (~25 products) so it wouldn't be Ideal to create a .html file for every single product. So i wanted to know if it was possible to have all the product pages in one HTML file.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<div class="small-container single-product">
  <div class="row">
    <div class="col-2 col-6" id="gpu1">
      <img src="Images/strix3080.png" width="70%">
    </div>
    <div class="col-2 col-6" id="gpu1">
      <p>Home / Products / ROG STRIX GeForce RTX 3080</p>
      <h1>ASUS ROG STRIX GeForce RTX 3080 V2 10GB</h1>
      <h4>€800.00</h4>
      <input type="number" value="1" max="5">
      <a href="" class="btn add-cart">Add To Cart</a>
      <h3>Specifications<i class="fa fa-indent" onclick="toggleSpecs()"></i></h3>
      <br>

      <div id="specs">
        <p>
          Bus Standard: PCI Express 4.0<br> Video Memory: 10GB GDDR6X<br> Engine Clock: 1440 MHz (Base Clock) 1935 MHz (Boost Clock)<br> CUDA Core: 8704<br> Memory Speed: 19 Gbps<br> Interface: Yes x2 (Native HDMI 2.1), Yes x3 (Native DisplayPort 1.4a),
          HDCP Support Yes (2.3)<br> Resolution: Digital Max Res. 7680 x 4320<br> Dimensions: 12.53" x 5.51" x 2.27" Inch 31.85 x 14.01 x 5.78 Centimeter<br> Recommended PSU: 850W<br> Power Connectors: 3 x 8-Pin
        </p>
      </div>
    </div>
  </div>
</div>

<!-- end snippet -->

This is what contains all the details for the product details page and what is loaded when you click on a product's picture.

This is how I'm making the picture clickable (This is in a separate HTML file):

<div class="row">
  <div onclick="window.location.href='product-details.html'" class="col-4">
    <img src="Images/asus3080.png" />
    <h4>ASUS ROG STRIX GeForce RTX 3080 V2 10GB</h4>
    <p>€800.00</p>
  </div>
</div>

I've tried looking up how to do this but most of them are to use plugins (which im not rlly sure how to use).

If you want to show all products on a single page, one solution that doesn't require back-end code, as you haven't worked with server-side code yet, is to use JavaScript to iterate over every product and generate HTML based on that.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const productsArray = [
  {
    name: "ASUS computer",
    image: "asus3080.png",
    price: 50
  },
  {
    name: "Lenovo computer",
    image: "Lenovo.png",
    price: 50
  },
  {
    name: "Macbook",
    image: "Mac.png",
    price: 50
  }
]

const root = document.getElementById("root")

for (let i = 0; i < productsArray.length; i++) {
  root.innerHTML += `<div class="row">
                        <div onclick="window.location.href='product-details.html'" class="col-4">
                        <img src="Images/${productsArray[i].image}">
                        <h4>${productsArray[i].name}</h4>
                        <p>${productsArray[i].price}</p>
                    </div>`
}

<!-- language: lang-html -->

<div id="root"></div>

<!-- end snippet -->

If you mean to use a template to generate a page for every product, you are going to need to write back-end code where your server will either serve an API or generate the web pages.

There are many languages like PHP, Java, C# and also back-end JavaScript (NodeJS) you can use to achieve this.

You could fake having a page for every product, by using the GET parameters in your URL.

Example: https://localhost/?product=1

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const productsArray = [
  {
    id: 1,
    name: "ASUS computer",
    image: "asus3080.png",
    price: 50
  },
  {
    id: 2,
    name: "Lenovo computer",
    image: "Lenovo.png",
    price: 50
  },
  {
    id: 3,
    name: "Macbook",
    image: "Mac.png",
    price: 50
  }
]

// This si for the example
const parameterList = new URLSearchParams("?product=1")
const productId = parameterList.get("product")

const root = document.getElementById("root")

const product = productsArray.find(p => p.id == productId);

console.log(productId)

root.innerHTML += `<div class="row">
                      <div onclick="window.location.href='product-details.html'" class="col-4">
                      <img src="Images/${product.image}">
                      <h4>${product.name}</h4>
                      <p>${product.price}</p>
                  </div>`

<!-- language: lang-html -->

<div id="root"></div>

<!-- end snippet -->

As you are not using backend, for passing data of each product to same page you can change your url like this

"window.location.href='product-details.html?product_name=Iphone&product_price=1000'"

and in product-details.html file you can fetch data from url using js,
refer this https://flaviocopes.com/urlsearchparams/

and place these data inside html using js.

Hope this will help you to solve your issue.