<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My WordPress-like Website</title>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
display: flex;
}
.content {
background-color: #f2f1f1;
max-width: 320px;
height: 500px;
padding: 10px;
margin-left: 75px;
font-size: 12px;
}
.content ul {
list-style: square;
}
.content ul li {
padding-top: 5px;
margin-bottom: 10px;
}
.ul-content{
background-color: white;
padding: 2px;
}
.thumbnail-container {
display: flex;
justify-content: center;
margin-top: 90px;
}
.thumbnail {
width: 80px;
height: 60px;
margin: 0 12px;
cursor: pointer;
}
.large-image-container {
flex: 1;
text-align: center;
}
#largeImage {
max-width: 100%;
max-height: 100%;
}
@media screen and (max-width: 600px) {
.container {
display: block;
}
.content{
margin-top: 15px;
margin-left: 20px;
}
.thumbnail {
width: 60px;
height: 50px;
margin: 0 15px;
cursor: pointer;
}
.thumbnail-container {
margin-top: 40px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="product-container">
<div class="large-image-container" id="largeImageContainer">
<img src="" alt="Large Image" id="largeImage">
</div>
<div class="thumbnail-container">
<img src="https://denikpharm.com/files/products/thumb/1637917142_Ototropin.jpeg.jpeg" alt="Front" class="thumbnail" onclick="showProductDetails('https://denikpharm.com/files/products/1637917142_Ototropin.jpeg.jpeg', getInitialProductContent())">
<img src="https://denikpharm.com/files/products/thumb/1637917163_ototropin...jpeg.jpeg" alt="Back" class="thumbnail" onclick="showProductDetails('https://denikpharm.com/files/products/1637917163_ototropin...jpeg.jpeg', getOtotropinBackContent())">
<img src="https://denikpharm.com/files/products/thumb/1637489463_Corrected%20Cap%20Eva.jpg.jpg" alt="Side" class="thumbnail" onclick="showProductDetails('https://denikpharm.com/files/products/1637489463_Corrected%20Cap%20Eva.jpg.jpg', getCorrectedCapContent())">
<img src="https://denikpharm.com/files/products/thumb/1637489486_Corrected%20Cap%20Eva1.jpg.jpg" alt="upper" class="thumbnail" onclick="showProductDetails('https://denikpharm.com/files/products/1637489486_Corrected%20Cap%20Eva1.jpg.jpg', getCorrectedCapEva())">
</div>
</div>
<div class="content" id="productContent">
<!-- Content will be dynamically updated using JavaScript -->
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var largeImageContainer = document.getElementById('largeImageContainer');
var largeImage = document.getElementById('largeImage');
var productContent = document.getElementById('productContent');
// Set the initial large image and content (replace URLs with actual data)
largeImage.src='https://denikpharm.com/files/products/1637917142_Ototropin.jpeg.jpeg';
productContent.innerHTML = getInitialProductContent();
console.log('Initialized with initial content');
});
function showProductDetails(imageUrl, content) {
var largeImageContainer = document.getElementById('largeImageContainer');
var largeImage = document.getElementById('largeImage');
var productContent = document.getElementById('productContent');
// Set the source of the large image
largeImage.src=imageUrl;
// Update the content based on the selected image
productContent.innerHTML = content;
// console.log('Changed content for image: ', imageUrl);
}
function getInitialProductContent() {
return `<h3>TEMPORECT Pro</h3>
<hr style="color: white">
<p>TEMPORECT Pro: New Revolutionary New Packaging for Heat and Temperature sensitive Drugs.</p>
<hr style="color:white">
<ul>
<li>In our continuous effort to provide our users purest, safest and effective peptides, We have taken another revolutionary step in peptide packaging.</li>
<li>We have come up with TEMPORECT Pro, a temperature and shock proof packaging which will not only safeguard peptides from getting damage during transportation and storage caused by Heat, Sunlight and stress, it will provide ease in transportation without worrying about outside temperature.</li>
</ul>
<hr style="color: white;">
<p>
With Years of research and rigorous testing, we have made sure that our new packaging stands out against heat, sunlight and External stress, Provide you the exact efficacy and potency you are promised for.
</p>`;
}
// Define content for each product image
function getOtotropinBackContent() {
return `<h3>TEMPORECT Pro</h3>
<hr style="color: white">
<p>TEMPORECT Pro: New Revolutionary New Packaging for Heat and Temperature sensitive Drugs.</p>
<hr style="color:white">
<ul>
<li>In our continuous effort to provide our users purest, safest and effective peptides, We have taken another revolutionary step in peptide packaging.</li>
<li>We have come up with TEMPORECT Pro, a temperature and shock proof packaging which will not only safeguard peptides from getting damage during transportation and storage caused by Heat, Sunlight and stress, it will provide ease in transportation without worrying about outside temperature.</li>
</ul>
<hr style="color: white;">
<p>
With Years of research and rigorous testing, we have made sure that our new packaging stands out against heat, sunlight and External stress, Provide you the exact efficacy and potency you are promised for.
</p>
<div class="ul-content">
<ul>
<li>
The bag is made of high quality Nylon and EPR for heat and Shock resistance.
</li>
</ul>`;
}
// Define content for each product image
function getCorrectedCapContent() {
return `<h3>TEMPORECT Pro</h3>
<hr style="color: white">
<p>TEMPORECT Pro: New Revolutionary New Packaging for Heat and Temperature sensitive Drugs.</p>
<hr style="color:white">
<ul>
<li>In our continuous effort to provide our users purest, safest and effective peptides, We have taken another revolutionary step in peptide packaging.</li>
<li>We have come up with TEMPORECT Pro, a temperature and shock proof packaging which will not only safeguard peptides from getting damage during transportation and storage caused by Heat, Sunlight and stress, it will provide ease in transportation without worrying about outside temperature.</li>
</ul>
<hr style="color: white;">
<p>
With Years of research and rigorous testing, we have made sure that our new packaging stands out against heat, sunlight and External stress, Provide you the exact efficacy and potency you are promised for.
</p>
<div class="ul-content">
<ul>
<li>Heat resistant DUAL LAYER SILVER coating inside the bag preserves the efficacy of the medicine for a longer period.</li>
<li>Added Cushioing to protect Vials from Physical damage caused by shock and stress during transportation and storage.</li>
</ul>
</div>`;
}
function getCorrectedCapEva(){
return `<h3>TEMPORECT Pro</h3>
<hr style="color: white">
<p>TEMPORECT Pro: New Revolutionary New Packaging for Heat and Temperature sensitive Drugs.</p>
<hr style="color:white">
<ul>
<li>In our continuous effort to provide our users purest, safest and effective peptides, We have taken another revolutionary step in peptide packaging.</li>
<li>We have come up with TEMPORECT Pro, a temperature and shock proof packaging which will not only safeguard peptides from getting damage during transportation and storage caused by Heat, Sunlight and stress, it will provide ease in transportation without worrying about outside temperature.</li>
</ul>
<hr style="color: white;">
<p>
With Years of research and rigorous testing, we have made sure that our new packaging stands out against heat, sunlight and External stress, Provide you the exact efficacy and potency you are promised for.
</p>
<div class="ul-content">
<ul>
<li>Special TEMPORECT Pro Ice packs, made using Nano Silver Atom help maintain the temperature inside the box for a longer period.</li>
</ul>
</div>`
}
</script>
</body>
</html>
I want create a page by using the above code. When I paste the code in the page editor, it is not working.
Please help me out here
