ByMAS.TOP | Как сделать несколько блоков

Всем привет, как сделать несколько (блоков информации) на одной html странице вот код
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Каталог товаров</title>
<link rel="stylesheet" href="style.css"> 
</head>
<body>

<h1>Наши товары</h1>

<div class="product-list">

<div class="product-card" id="product1">
<img src="image1.jpg" alt="Товар 1">
<h2>Название товара 1</h2>
<p>Краткое описание первого товара, его основные характеристики.</p
<a href="#detail1" class="details-link">Подробнее</a>
</div>


<div class="product-card" id="product2">
<img src="image2.jpg" alt="Товар 2">
<h2>Название товара 2</h2>
<p>Краткое описание второго товара, его основные характеристики.</p>
<a href="#detail2" class="details-link">Подробнее</a>
</div>


</div>


<div class="product-details" id="detail1">
<h3>Детали товара 1</h3>
<p>Полное описание товара 1, технические характеристики, галерея изображений.</p
<a href="#product1">Назад к списку</a>
</div>

<div class="product-details" id="detail2">
<h3>Детали товара 2</h3>
<p>Полное описание товара 2, технические характеристики, галерея изображений.</p>
<a href="#product2">Назад к списку</a>
</div>

</body>
</html>
Стил css
.product-list {
display: grid; /* Или display: flex; */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Сетка */
gap: 20px;
padding: 20px;
}

.product-card {
border: 1px solid #ccc;
padding: 15px;
text-align: center;
border-radius: 8px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}

.product-card img {
max-width: 100%;
height: auto;
}

.product-details {
display: none; /* Скрываем детали по умолчанию */
padding: 20px;
border: 2px dashed #007bff;
margin-top: 20px;
}

/* Показываем нужный блок с деталями, когда он активен */
/* Для этого нужен JavaScript или CSS-хаки */

Изображение

------

1045_IMG_20260104_112344_567.jpg (85.5 Кб)
Скачиваний: 32

Andr11 ,

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Каталог товаров 2026</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #f4f4f4;
}

h1 { text-align: center; color: #333; }

.product-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}

.product-card {
background: #fff;
border: 1px solid #ccc;
padding: 15px;
text-align: center;
border-radius: 8px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
transition: transform 0.2s;
}

.product-card:hover {
transform: translateY(-5px);
}

.product-card img {
max-width: 100%;
height: 150px;
object-fit: cover;
border-radius: 4px;
background-color: #eee;
}

.details-link {
display: inline-block;
margin-top: 10px;
padding: 8px 16px;
background: #007bff;
color: white;
text-decoration: none;
border-radius: 4px;
cursor: pointer;
border: none;
}

.details-link:hover {
background: #0056b3;
}
</style>
</head>
<body>

<h1>Наши товары 2026</h1>

<div class="product-list">

<div class="product-card">
<img src="via.placeholder.com" alt="Товар 1">
<h2>Смартфон X</h2>
<p>Мощный процессор и отличная камера для снимков в 2026 году.</p>
<button class="details-link" onclick="openProduct(1)">Подробнее</button>
</div>


<div class="product-card">
<img src="via.placeholder.com" alt="Товар 2">
<h2>Ноутбук Pro</h2>
<p>Легкий и быстрый инструмент для работы из любой точки мира.</p>
<button class="details-link" onclick="openProduct(2)">Подробнее</button>
</div>
</div>

<script>
// База данных товаров
const products = {
1: {
title: "Смартфон X (Модель 2026)",
description: "Полное описание: Процессор нового поколения, поддержка голографических вызовов и аккумулятор на 7 дней работы. Идеальное устройство для связи в 2026 году.",
price: "99 000 руб.",
img: "via.placeholder.com"
},
2: {
title: "Ноутбук Pro (Edition 2026)",
description: "Полное описание: Сверхлегкий корпус из титана, экран 120Гц и встроенный ИИ-помощник. Подходит для сложного видеомонтажа и 3D графики.",
price: "150 000 руб.",
img: "via.placeholder.com"
}
};

function openProduct(id) {
const item = products[id];

// Генерируем контент для новой вкладки
const pageHtml = `
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>${item.title}</title>
<style>
body { font-family: sans-serif; display: flex; justify-content: center; padding: 40px; background: #eee; }
.container { background: white; padding: 30px; border-radius: 12px; max-width: 600px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); text-align: center; }
img { width: 100%; border-radius: 8px; margin-bottom: 20px; }
h1 { color: #333; }
p { font-size: 18px; color: #555; line-height: 1.5; }
.price { font-size: 24px; font-weight: bold; color: #28a745; margin: 20px 0; }
.close-btn { display: inline-block; padding: 10px 20px; background: #333; color: white; text-decoration: none; border-radius: 5px; cursor: pointer; }
</style>
</head>
<body>
<div class="container">
<img src="${item.img}" alt="${item.title}">
<h1>${item.title}</h1>
<p>${item.description}</p>
<div class="price">Цена: ${item.price}</div>
<button class="close-btn" onclick="window.close()">Закрыть вкладку</button>
</div>
</body>
</html>
`;

// Открываем новую вкладку
const newWindow = window.open('', '_blank');

// Записываем код в новую вкладку
newWindow.document.write(pageHtml);
newWindow.document.close();
}
</script>

</body>
</html>

________
посл. ред. 05.01.2026 в 16:22; всего 1 раз(а); by Ulty

Держи
------

1046_xhata.ru.20260104_14_20_14.zip (2.4 Кб)
Скачиваний: 32

После открытия будет вот так выглядеть

Изображение

------

1047_Screenshot_2026010414132962_40deb401b9ffe8e1df2f1cc5ba480b12.jpg (275.1 Кб)
Скачиваний: 34

TheSom (4 янв 2026, в 14:22)
После открытия будет вот так выглядеть

Работает только перед открытием blob:http://
Как исправить?
________
посл. ред. 04.01.2026 в 14:31; всего 1 раз(а); by Andr11

Мне нужно больше информации, что бы понять автора.
Нужна карусель? Когда слайды сами перелистываются.
Нужен слайдер? Когда пользователь сам нажимает на стрелку, что бы посмотреть все варианты.
Нужен просто блок, в котором можно будет выбрать что нужно человеку, а его перекинет (с помощью якоря) на ту часть страницы, где есть информация, его интересующая?

Прикрепил ниже слайдер (присутствуют кнопки перелистывания)

Изображение

------

1050_slider.png (87.2 Кб)
Скачиваний: 28

________
посл. ред. 05.01.2026 в 16:38; всего 1 раз(а); by Ulty

Ulty , Уже запилил ему :)

Вход