<!DOCTYPE html>
<html>
  <head>
    <title>РЕПА ПЕДИК интернет-магазин</title>
    <link rel=“stylesheet” type=“text/css” href=“style.css”>
  </head>
  <body>
    <header>
      <h1><a href=“index.html”>РЕПА ПЕДИК</a></h1>
      <nav>
        <div class=“toggle-menu”>
          <i class=“fas fa-bars”></i>
        </div>
        <ul class=“nav-links”>
          <li><a href=“products.html”>Товары</a></li>
          <li><a href=“about.html”>О нас</a></li>
          <li><a href=“contact.html”>Контакты</a></li>
        </ul>
      </nav>
      <div class=“login”>
        <a href=“#” class=“login-btn”>Вход / Регистрация</a>
        <div class=“login-modal”>
          <div class=“login-tabs”>
            <div class=“login-tab active” data-tab=“login”>Войти</div>
            <div class=“login-tab” data-tab=“register”>Зарегистрироваться</div>
          </div>
          <div class=“login-form active” data-tab=“login”>
            <form>
              <div class=“form-group”>
                <label for=“username”>Имя пользователя</label>
                <input type=“text” id=“username” name=“username”>
              </div>
              <div class=“form-group”>
                <label for=“password”>Пароль</label>
                <input type=“password” id=“password” name=“password”>
              </div>
              <button type=“submit” class=“submit-btn”>Войти</button>
            </form>
          </div>
          <div class=“login-form” data-tab=“register”>
            <form>
              <div class=“form-group”>
                <label for=“new-username”>Имя пользователя</label>
                <input type=“text” id=“new-username” name=“new-username”>
              </div>
              <div class=“form-group”>
                <label for=“new-password”>Пароль</label>
                <input type=“password” id=“new-password” name=“new-password”>
              </div>
              <div class=“form-group”>
                <label for=“email”>Email</label>
                <input type=“email” id=“email” name=“email”>
              </div>
              <button type=“submit” class=“submit-btn”>Зарегистрироваться</button>
            </form>
          </div>
        </div>
      </div>
      <div class=“cart”>
        <a href=“#” class=“cart-icon”>
          <i class=“fas fa-shopping-cart”></i>
          <span class=“cart-count”>0</span>
        </a>
      </div>
    </header>

    <main>
      <div class=“main-title”>
        <h2>Добро пожаловать в РЕПА ПЕДИК интернет-магазин</h2>
      </div>

      <section class=“products”>
        <h2>Товары</h2>
        <div class=“product-grid”>
          <div class=“product-box”>
            <img src=“https://picsum.photos/id/1/300/200” class=“product-image”>
            <div class=“product-title”>Продукт 1</div>
            <div class=“product-price”>200 руб.</div>
            <button class=“add-to-cart”>Добавить в корзину</button>
          </div>
          <div class=“product-box”>
            <img src=“https://picsum.photos/id/2/300/200” class=“product-image”>
            <div class=“product-title”>Продукт 2</div>
            <div class=“product-price”>250 руб.</div>
            <button class=“add-to-cart”>Добавить в корзину</button>
          </div>
          <div class=“product-box”>
            <img src=“https://picsum.photos/id/3/300/200” class=“product-image”>
            <div class=“product-title”>Продукт 3</div>
            <div class=“product-price”>150 руб.</div>
            <button class=“add-to-cart”>Добавить в корзину</button>
          </div>
          <div class=“product-box”>
            <img src=“https://picsum.photos/id/4/300/200” class=“product-image”>
            <div class=“product-title”>Продукт 4</div>
            <div class=“product-price”>300 руб.</div>
            <button class=“add-to-cart”>Добавить в корзину</button>
          </div>
          <div class=“product-box”>
            <img src=“https://picsum.photos/id/5/300/200” class=“product-image”>
            <div class=“product-title”>Продукт 5</div>
            <div class=“product-price”>350 руб.</div>
            <button class=“add-to-cart”>Добавить в корзину</button>
          </div>
          <div class=“product-box”>
            <img src=“https://picsum.photos/id/6/300/200” class=“product-image”>
            <div class=“product-title”>Продукт 6</div>
            <div class=“product-price”>100 руб.</div>
            <button class=“add-to-cart”>Добавить в корзину</button>
          </div>
        </div>
      </section>

      <section class=“about”>
        <div class=“about-section”>
          <div class=“about-content”>
            <h2 class=“about-title”>О нас</h2>
            <p class=“about-text”>Мы рады представить наш интернет-магазин, который специализируется на продаже продуктов питания высокого качества. Мы гордимся тем, что все наши продукты выращиваются и обрабатываются на экологически чистых фермах без использования химических удобрений и пестицидов. Наша команда профессионалов поможет вам выбрать лучшие продукты для вашего здоровья и благополучия.</p>
          </div>
        </div>
      </section>

      <section class=“contact”>
        <div class=“contact-section”>
          <div class=“contact-content”>
            <h2 class=“contact-title”>Контакты</h2>
            <p class=“contact-info”>Адрес: Москва, улица Пушкина, дом Колотушкина</p>
            <p class=“contact-info”>Телефон: +7 (495) 123-45-67</p>
            <p class=“contact-info”>Email: info@repapedik.ru</p>
          </div>
        </div>
      </section>
    </main>

    <footer>
      <p>© 2021 РЕПА ПЕДИК</p>
    </footer>

    <script src=“https://kit.fontawesome.com/0487cbe4c8.js” crossorigin=“anonymous”></script>
    <script>
      const toggleMenu = document.querySelector(‘.toggle-menu’);
      const navLinks = document.querySelector(‘.nav-links’);

      toggleMenu.addEventListener(‘click’, () => {
        navLinks.classList.toggle(‘show’);
      });

      const addToCartButtons = document.querySelectorAll(‘.add-to-cart’);
      const cartCount = document.querySelector(‘.cart-count’);

      let cartItems = 0;

      addToCartButtons.forEach(button => {
        button.addEventListener(‘click’, () => {
          cartItems++;
          cartCount.innerHTML = cartItems;
        });
      });

      const loginButton = document.querySelector(‘.login-btn’);
      const loginModal = document.querySelector(‘.login-modal’);
      const loginTabs = document.querySelector(‘.login-tabs’);
      const loginForms = document.querySelectorAll(‘.login-form’);

      loginButton.addEventListener(‘click’, () => {
        loginModal.classList.toggle(‘show’);
      });

      loginTabs.addEventListener(‘click’, e => {
        if (e.target.classList.contains(‘login-tab’)) {
          const loginTab = e.target.dataset.tab;
          loginTabs.querySelector(‘.active’).classList.remove(‘active’);
          e.target.classList.add(‘active’);
          loginForms.forEach(form => {
            if (form.dataset.tab === loginTab) {
              form.classList.add(‘active’);
            } else