"вы"
Bootstrap 4.1.1 Snippet by courazik

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <title>Мой Интернет-магазин</title> <style> /* CSS стили */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #333; color: #fff; padding: 20px; text-align: center; } h1 { font-size: 24px; } main { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 20px; } .content-block { flex: 1 1 25%; margin: 10px; padding: 20px; background-color: #f9f9f9; border: 1px solid #ccc; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); text-align: center; transition: transform 0.3s ease; } .content-block:hover { transform: scale(1.05); } footer { background-color: #333; color: #fff; padding: 20px; text-align: center; } </style> </head> <body> <header> <h1>Добро пожаловать в Интернет-магазин одежды!</h1> </header> <main> <div class="content-block"> <img src="path/to/image1.jpg" alt="Одежда 1"> <
/* Глобальные стили */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; } /* Стили для шапки сайта */ header { background-color: #333; color: #fff; padding: 20px; text-align: center; } h1 { font-size: 24px; } /* Стили для основного содержимого сайта */ main { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 20px; } /* Стили для блоков с контентом */ .content-block { flex: 1 1 25%; margin: 10px; padding: 20px; background-color: #f9f9f9; border: 1px solid #ccc; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); text-align: center; transition: transform 0.3s ease; } .content-block:hover { transform: scale(1.05); } /* Стили для футера сайта */ footer { background-color: #333; color: #fff; padding: 20px; text-align: center; }
// Получение ссылок на элементы DOM const contentBlocks = document.querySelectorAll('.content-block'); const addToCartButtons = document.querySelectorAll('.add-to-cart'); // Обработчик события для кнопок "Добавить в корзину" addToCartButtons.forEach((button) => { button.addEventListener('click', addToCart); }); // Функция добавления товара в корзину function addToCart(event) { const product = event.target.closest('.content-block'); const productName = product.querySelector('h2').textContent; const productPrice = product.querySelector('p.price').textContent; // Здесь можно добавить логику добавления товара в корзину // Например, отправить данные на сервер или обновить состояние корзины внутри страницы alert(`Товар "${productName}" добавлен в корзину. Цена: ${productPrice}`); } // Дополнительные функции или логика JavaScript могут быть добавлены сюда

Related: See More


Questions / Comments: