clownfish
/
MitrofanovaNV_PCpoint


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/css/normalise.css">
    <link rel="stylesheet" href="/css/style.css">
    <title>PCpoint | Главная</title>
</head>
<body>
    <header class="header">
        <div class="container">
            <nav class="nav">
                <a href="#" class="logo">
                    <img src="/img/logo.svg" alt="Логотип сайта" class="logo-img">
                </a>
                <ul class="menu">
                    <li class="menu-item">
                        <a href="#" class="menu-link">Каталог</a>
                    </li>
                    <li class="menu-item">
                        <a href="#" class="menu-link">Конфигуратор</a>
                    </li>
                    <li class="menu-item">
                        <a href="#" class="menu-link">Оплата</a>
                    </li>
                    <li class="menu-item">
                        <a href="#" class="menu-link">Доставка</a>
                    </li>
                    <li class="menu-item">
                        <a href="#" class="menu-link">Гарантия</a>
                    </li>
                </ul>
                <a href="tel:88009008888" class="phone">8 800-900-88-88</a>
            </nav>
        </div>
    </header>

    <main class="main">
        <section class="headline">
            <div class="pc-changing">
                <div class="up-button">
                    <p><span onselectstart="return false" onmousedown="return false"><a id="next">↑</a></span></p>
                </div>
                <div class="headline-pc">
                    <img src="" class="headline-pc-img">
                </div>                
                <div class="down-button">
                    <p><span onselectstart="return false" onmousedown="return false"><a id="prev">↓</a></p>
                </div>
            </div>

            <div class="headline-pc-desctiption">
                <h1 class="title">Ваш уникальный ПК</h1>
                <p class="headline-p">
                    Подберите компьютер, который подойдет для 
                </p>
                <p class="headline-p">
                    любых игр и задач! Либо самостоятельно
                </p>
                <p class="headline-p">
                    соберите комплектацию ПК, а наши менеджеры
                </p>
                <p class="headline-p">
                    помогут проверить комплектующие на совместимость.
                </p>
                <a class="headline-btn" href="/order.html">Заказать звонок</a>
            </div>
        </section>

        <section class="catalog">
            <h2 class="catalog-title">Готовые решения</h2>
            <div class="catalog-filters">
                <a href="#" class="catalog-btn">Для киберспорта</a>
                <a href="#" class="catalog-btn">Для стримов</a>
                <a href="#" class="catalog-btn">Для рендеринга</a>
                <a href="#" class="catalog-btn">Для 4К</a>
                <a href="#" class="catalog-btn">RTX 4090</a>
            </div>
            <div class="catalog-picks"></div>
        </section>

        <script>
            const imageList = [
            '/img/corsair-beast.png',
            '/img/ultra-beast-pro.png',
            '/img/velocity-beast.png'
        ]
            const img = document.querySelector('.headline-pc-img')
            const next = document.getElementById('next')
            const prev = document.getElementById('prev')
            var numImage = 0
            img.src = imageList[numImage]

            next.addEventListener('click', () => {
            numImage++
            if (numImage >= imageList.length) {
                numImage = 0
            }
            
            console.log(numImage >= imageList.length)
            console.log(numImage)
            img.src = imageList[numImage]
            })

            prev.addEventListener('click', () => {
            numImage--
            if (numImage == -1) {
                numImage = 2
            }

            console.log(numImage >= imageList.length)
            console.log(numImage)
            img.src = imageList[numImage]
            })
        </script>
    </main>
</body>
</html>