Tatsua
/
hackathon_web


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532
							<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="core/css/index-style.css">
    <link rel="stylesheet" href="core/css/slider.min.css">
    <title>КТК</title>
</head>
<body>
    <div class="container">
        <header>
            <a href="#">
                <picture>
                    <img src="./core/images/logo.png" alt="Логотип">
                </picture>
            </a>
            <ul>
                <li><a href="#">Версия для слабовидящих</a></li>
                <li>Телефон: (39161) 2-39-52</li>
                <li>Почта: kansk-ktt@mail.ru</li>
            </ul>
            <nav>
                <span class="search" id="search">
                    <svg version="1.1" id="btnSearch" onclick="showSearchInput()" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                            width="36px" height="36px" viewBox="0 0 485.213 485.213" style="enable-background:new 0 0 485.213 485.213;"
                            xml:space="preserve">
                        <g>
                            <g>
                                <path d="M471.882,407.567L360.567,296.243c-16.586,25.795-38.536,47.734-64.331,64.321l111.324,111.324
                                    c17.772,17.768,46.587,17.768,64.321,0C489.654,454.149,489.654,425.334,471.882,407.567z"/>
                                <path d="M363.909,181.955C363.909,81.473,282.44,0,181.956,0C81.474,0,0.001,81.473,0.001,181.955s81.473,181.951,181.955,181.951
                                    C282.44,363.906,363.909,282.437,363.909,181.955z M181.956,318.416c-75.252,0-136.465-61.208-136.465-136.46
                                    c0-75.252,61.213-136.465,136.465-136.465c75.25,0,136.468,61.213,136.468,136.465
                                    C318.424,257.208,257.206,318.416,181.956,318.416z"/>
                                <path d="M75.817,181.955h30.322c0-41.803,34.014-75.814,75.816-75.814V75.816C123.438,75.816,75.817,123.437,75.817,181.955z"/>
                            </g>
                        </g>
                    </svg>
                    <div class="searchInput">
                        <form action="#" method="post">
                            <input type="text" name="search" placeholder="Что искать?">
                            <button type="submit">
                                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="36px" height="36px" viewBox="0 0 485.213 485.213" style="enable-background:new 0 0 485.213 485.213;" xml:space="preserve">
                                    <g>
                                        <g>
                                            <path d="M471.882,407.567L360.567,296.243c-16.586,25.795-38.536,47.734-64.331,64.321l111.324,111.324
                                                c17.772,17.768,46.587,17.768,64.321,0C489.654,454.149,489.654,425.334,471.882,407.567z"/>
                                            <path d="M363.909,181.955C363.909,81.473,282.44,0,181.956,0C81.474,0,0.001,81.473,0.001,181.955s81.473,181.951,181.955,181.951
                                                C282.44,363.906,363.909,282.437,363.909,181.955z M181.956,318.416c-75.252,0-136.465-61.208-136.465-136.46
                                                c0-75.252,61.213-136.465,136.465-136.465c75.25,0,136.468,61.213,136.468,136.465
                                                C318.424,257.208,257.206,318.416,181.956,318.416z"/>
                                            <path d="M75.817,181.955h30.322c0-41.803,34.014-75.814,75.816-75.814V75.816C123.438,75.816,75.817,123.437,75.817,181.955z"/>
                                        </g>
                                    </g>
                                </svg>
                            </button>
                        </form>
                    </div>
                </span>
                <span class="menuBurger">
                    <svg onclick="showMenu()" viewBox="0 0 24.00 24.00" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                        <g id="SVGRepo_iconCarrier">
                            <g clip-path="url(#clip0_429_11066)">
                                <path d="M3 6.00092H21M3 12.0009H21M3 18.0009H21" stroke="#292929" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"></path>
                            </g>
                            <defs>
                                <clipPath id="clip0_429_11066">
                                    <rect width="24" height="24" fill="white" transform="translate(0 0.000915527)"></rect>
                                </clipPath>
                            </defs>
                        </g>
                    </svg>
                </span>
                <div class="menu" id="menu">
                    <div class="closeBtn">
                        <svg onclick="hiddenMenu()" viewBox="0 0 24.00 24.00" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                            <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                            <g id="SVGRepo_iconCarrier">
                                <path d="M6 6L18 18M18 6L6 18" stroke="#000000" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"></path>
                            </g>
                        </svg>
                    </div>
                    <span>
                        <a href="#">Сведение об образовательной организации</a>
                    </span>
                    <span>
                        <a href="#">Абитуриентам</a>
                    </span>
                    <span>
                        <a href="#">Студентам/Родителям</a>
                    </span>
                    <span>
                        <a href="#">Жизнь колледжа</a>
                    </span>
                    <span>
                        <a href="#">Новости</a>
                    </span>
                </div>
            </nav>
        </header>
        <main>
            <section class="slider">
                <div class="itc-slider" data-autoplay="true" data-interval="7000" data-loop="true" data-slider="itc-slider">
                    <div class="itc-slider__wrapper">
                        <div class="itc-slider__items">
                            <div class="itc-slider__item">
                                <picture>
                                    <img class="lazy" data-src="./core/images/001.jpg" alt="test">
                                </picture>
                                <div>
                                    <p>Информационные системы и программирование, квалификация «разработчик веб и мультимедийных приложений»</p>
                                    <a href="#">Подробнее</a>
                                </div>
                            </div>
                            <div class="itc-slider__item">
                                <picture>
                                    <img class="lazy" data-src="./core/images/002.jpg" alt="test">
                                </picture>
                                <div>
                                    <p>Информационные системы и программирование, квалификация «специалист по информационным системам»</p>
                                    <a href="#">Подробнее</a>
                                </div>
                            </div>
                            <div class="itc-slider__item">
                                <picture>
                                    <img class="lazy" data-src="./core/images/003.jpg" alt="test">
                                </picture>
                                <div>
                                    <p>Информационные системы и программирование, квалификация «администратор баз данных»</p>
                                    <a href="#">Подробнее</a>
                                </div>
                            </div>
                            <div class="itc-slider__item">
                                <picture>
                                    <img class="lazy" data-src="./core/images/004.jpg" alt="test">
                                </picture>
                                <div>
                                    <p>Обеспечение информационной безопасности автоматизированных систем, квалификация «техник по защите информации»</p>
                                    <a href="#">Подробнее</a>
                                </div>
                            </div>
                            <div class="itc-slider__item">
                                <picture>
                                    <img class="lazy" data-src="./core/images/005.jpg" alt="test">
                                </picture>
                                <div>
                                    <p>Технология лесозаготовок, квалификация «техник - технолог»</p>
                                    <a href="#">Подробнее</a>
                                </div>
                            </div>
                            <div class="itc-slider__item">
                                <picture>
                                    <img class="lazy" data-src="./core/images/006.jpeg" alt="test">
                                </picture>
                                <div>
                                    <p>Экономика и бухгалтерский учет (по отраслям), квалификация «бухгалтер»</p>
                                    <a href="#">Подробнее</a>
                                </div>
                            </div>
                            <div class="itc-slider__item">
                                <picture>
                                    <img class="lazy" data-src="./core/images/007.jpeg" alt="test">
                                </picture>
                                <div>
                                    <p>Экономика и бухгалтерский учет (по отраслям), квалификация «бухгалтер, специалист по налогообложению»</p>
                                    <a href="#">Подробнее</a>
                                </div>
                            </div>
                            <div class="itc-slider__item">
                                <picture>
                                    <img class="lazy" data-src="./core/images/008.jpg" alt="test">
                                </picture>
                                <div>
                                    <p>Операционная деятельность в логистике, квалификация «Операционный логист»</p>
                                    <a href="#">Подробнее</a>
                                </div>
                            </div>
                            <div class="itc-slider__item">
                                <picture>
                                    <img class="lazy" data-src="./core/images/009.jpg" alt="test">
                                </picture>
                                <div>
                                    <p>Коммерция (по отраслям), квалификация «менеджер по продажам»</p>
                                    <a href="#">Подробнее</a>
                                </div>
                            </div>
                            <div class="itc-slider__item">
                                <picture>
                                    <img class="lazy" data-src="./core/images/010.jpg" alt="test">
                                </picture>
                                <div>
                                    <p>Сервис на транспорте (по видам транспорта), квалификация «специалист по сервису на транспорте»</p>
                                    <a href="#">Подробнее</a>
                                </div>
                            </div>
                            <div class="itc-slider__item">
                                <picture>
                                    <img class="lazy" data-src="./core/images/011.jpg" alt="test">
                                </picture>
                                <div>
                                    <p>Гостиничное дело, квалификация «специалист по гостеприимству»</p>
                                    <a href="#">Подробнее</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button class="itc-slider__btn itc-slider__btn_prev"></button>
                    <button class="itc-slider__btn itc-slider__btn_next"></button>
                    <ol class="itc-slider__indicators">
                      <li class="itc-slider__indicator" data-slide-to="0"></li>
                      <li class="itc-slider__indicator" data-slide-to="1"></li>
                      <li class="itc-slider__indicator" data-slide-to="2"></li>
                      <li class="itc-slider__indicator" data-slide-to="3"></li>
                      <li class="itc-slider__indicator" data-slide-to="4"></li>
                      <li class="itc-slider__indicator" data-slide-to="5"></li>
                      <li class="itc-slider__indicator" data-slide-to="6"></li>
                      <li class="itc-slider__indicator" data-slide-to="7"></li>
                      <li class="itc-slider__indicator" data-slide-to="8"></li>
                      <li class="itc-slider__indicator" data-slide-to="9"></li>
                      <li class="itc-slider__indicator" data-slide-to="10"></li>
                    </ol>
                </div>
            </section>
            <section class="important">
                <div class="blocks_links">
                    <div class="block_link block_link_1">
                        <div>
                            <span>Приёмная компания</span>
                            <picture>
                                <img src="./core/images/1.png" alt="img">
                            </picture>
                        </div>
                        <p>Порядок организации и осуществления образовательной деятельности</p>
                    </div>
                    <div class="block_link block_link_2">
                        <div>
                            <span>Образование</span>
                            <picture>
                                <img src="./core/images/2.png" alt="img">
                            </picture>
                        </div>
                        <p>Порядок организации и осуществления образовательной деятельности</p>
                    </div>
                    <div class="block_link block_link_3">
                        <div>
                            <span>Мастерские ИТК</span>
                            <picture>
                                <img src="./core/images/3.png" alt="img">
                            </picture>
                        </div>
                        <p>Федеральный проект “Молодые профессионалы” национального проекта «Образование»</p>
                    </div>
                    <div class="block_link block_link_4">
                        <div>
                            <span>Электромонтаж</span>
                            <picture>
                                <img src="./core/images/4.png" alt="img">
                            </picture>
                        </div>
                        <p>Центр приема демонстрационного экзамена — для подготовки и проведения ДЭ</p>
                    </div>
                </div>
            </section>
            <h2 class="title">Важное</h2>
            <section class="importantsLists">
                <div class="importantCard card">
                    <div class="cardContext">
                        <span class="cardDate">26.01 <br>2023</span>
                        <span class="cardTitle">Важное 1</span>
                    </div>
                    <div class="cardImgs">
                        <img src="https://imgholder.ru/250x250/8493a8/adb9ca&text=IMAGE+HOLDER&font=kelson" alt="cardImg">
                        <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, laborum sequi, corrupti soluta quas voluptate veritatis ab laboriosam ipsa iste obcaecati rem, ut mollitia sunt porro nisi ex voluptates laudantium ad error. Quae, eum voluptates, dolore ea aliquam deserunt repellat ad facilis blanditiis quas necessitatibus! Autem eius dicta porro tempore, a, saepe quam ullam sapiente numquam impedit sint distinctio culpa in earum! Accusamus cum, quasi, numquam deserunt suscipit nostrum sed optio voluptates obcaecati enim quam fugit similique sint, repellat dignissimos ratione architecto. Assumenda nulla minima magnam, officiis dicta nihil dolore! Dolore exercitationem harum, veritatis facilis eligendi maxime fugit dolores illo nisi tempore vitae molestiae aliquam officiis assumenda rerum nostrum amet accusamus nesciunt pariatur sapiente impedit omnis voluptate dignissimos! Velit libero omnis, harum nulla beatae laudantium magni ad facere nobis voluptatem dolore itaque odit ipsa veniam repellendus obcaecati? Natus quo voluptate facere nisi ipsum quisquam tenetur animi quasi, iusto corrupti odio sunt accusantium, doloribus necessitatibus dolores voluptatem deserunt! Voluptatibus molestiae eum nam consequuntur recusandae magnam ipsa, dicta a at dignissimos iusto itaque dolores animi laudantium qui ratione obcaecati architecto quis repudiandae ea. Praesentium laboriosam commodi, rem repellat rerum eaque dolorum beatae totam, reiciendis non suscipit iste esse iure placeat? Eveniet, similique!
                        </p>
                    </div>
                </div>

                <div class="importantCard card">
                    <div class="cardContext">
                        <span class="cardDate">21.01 <br>2023</span>
                        <span class="cardTitle">Важное 2</span>
                    </div>
                    <div class="cardImgs">
                        <img src="https://imgholder.ru/250x250/8493a8/adb9ca&text=IMAGE+HOLDER&font=kelson" alt="cardImg">
                        <p>
                            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam nesciunt iusto laudantium reprehenderit aliquam fugiat tempore sapiente aut alias minima.
                        </p>
                    </div>
                </div>

                <div class="importantCard card">
                    <div class="cardContext">
                        <span class="cardDate">15.01 <br>2023</span>
                        <span class="cardTitle">Важное 3</span>
                    </div>
                    <div class="cardImgs">
                        <img src="https://imgholder.ru/250x250/8493a8/adb9ca&text=IMAGE+HOLDER&font=kelson" alt="cardImg">
                        <p>
                            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem placeat repellat saepe iusto illo quisquam vero ducimus temporibus dolore possimus consectetur dignissimos, iste modi, quae maxime fuga necessitatibus veniam repudiandae aliquam cum, laudantium suscipit assumenda corporis nemo? Dolorum enim magnam cumque ipsum voluptate earum nobis impedit. Sapiente voluptatem enim eligendi?
                        </p>
                    </div>
                </div>
                
                <div class="importantCard card">
                    <div class="cardContext">
                        <span class="cardDate">10.01 <br>2023</span>
                        <span class="cardTitle">Важное 4</span>
                    </div>
                    <div class="cardImgs">
                        <img src="https://imgholder.ru/250x250/8493a8/adb9ca&text=IMAGE+HOLDER&font=kelson" alt="cardImg">
                        <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam repellendus, error adipisci debitis voluptatem doloremque a? Placeat, delectus incidunt! Quidem ipsum saepe quam et sit tempore non itaque quasi tenetur provident, quia sed, obcaecati laboriosam recusandae! Optio natus enim obcaecati quidem. Nam voluptates quam ipsum distinctio rerum harum unde vitae? Ex nostrum optio animi voluptatem et dolorem voluptates. Eius asperiores repudiandae incidunt non amet id ut dicta officiis quaerat minus quod, reprehenderit voluptates officia fugiat magni et. Vitae veniam amet rem repudiandae iusto, numquam cumque tempore doloremque facere quasi eum provident consectetur molestias et nihil consequuntur excepturi quas minus quam?
                        </p>
                    </div>
                </div>
            </section>
            <h2 class="title title2">Новости</h2>
            <section class="importantsList">
                <div class="importantCard" id="popup_1" onclick="showPopup('popup_1')">
                    <div class="cardContext">
                        <span class="cardDate">26.01 <br>2023</span>
                        <span class="cardTitle">Заголовок 1</span>
                    </div>
                    <div class="cardImg">
                        <img src="https://imgholder.ru/250x250/8493a8/adb9ca&text=IMAGE+HOLDER&font=kelson" alt="cardImg">
                    </div>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, laborum sequi, corrupti soluta quas voluptate veritatis ab laboriosam ipsa iste obcaecati rem, ut mollitia sunt porro nisi ex voluptates laudantium ad error. Quae, eum voluptates, dolore ea aliquam deserunt repellat ad facilis blanditiis quas necessitatibus! Autem eius dicta porro tempore, a, saepe quam ullam sapiente numquam impedit sint distinctio culpa in earum! Accusamus cum, quasi, numquam deserunt suscipit nostrum sed optio voluptates obcaecati enim quam fugit similique sint, repellat dignissimos ratione architecto. Assumenda nulla minima magnam, officiis dicta nihil dolore! Dolore exercitationem harum, veritatis facilis eligendi maxime fugit dolores illo nisi tempore vitae molestiae aliquam officiis assumenda rerum nostrum amet accusamus nesciunt pariatur sapiente impedit omnis voluptate dignissimos! Velit libero omnis, harum nulla beatae laudantium magni ad facere nobis voluptatem dolore itaque odit ipsa veniam repellendus obcaecati? Natus quo voluptate facere nisi ipsum quisquam tenetur animi quasi, iusto corrupti odio sunt accusantium, doloribus necessitatibus dolores voluptatem deserunt! Voluptatibus molestiae eum nam consequuntur recusandae magnam ipsa, dicta a at dignissimos iusto itaque dolores animi laudantium qui ratione obcaecati architecto quis repudiandae ea. Praesentium laboriosam commodi, rem repellat rerum eaque dolorum beatae totam, reiciendis non suscipit iste esse iure placeat? Eveniet, similique!
                    </p>
                    <button>Подробнее</button>
                </div>
                <div class="popup popup_1">
                    <div class="closeBtn">
                        <svg onclick="hiddenPopup('popup_1')" viewBox="0 0 24.00 24.00" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                            <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                            <g id="SVGRepo_iconCarrier">
                                <path d="M6 6L18 18M18 6L6 18" stroke="#000000" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"></path>
                            </g>
                        </svg>
                    </div>
                    <div class="popupContent">
                        <div class="popupTitle">
                            <div class="cardImgPopup">
                                <img src="https://imgholder.ru/250x250/8493a8/adb9ca&text=IMAGE+HOLDER&font=kelson" alt="cardImg">
                            </div>
                            <div class="cardDescription">
                                <span class="cardTitle">Заголовок 1</span> <br>
                                <span class="cardDate">26.01.2023</span> <br>
                                <span class="cardAuthor">Иванов Иван Иваныч</span>
                            </div>
                        </div>
                        <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, laborum sequi, corrupti soluta quas voluptate veritatis ab laboriosam ipsa iste obcaecati rem, ut mollitia sunt porro nisi ex voluptates laudantium ad error. Quae, eum voluptates, dolore ea aliquam deserunt repellat ad facilis blanditiis quas necessitatibus! Autem eius dicta porro tempore, a, saepe quam ullam sapiente numquam impedit sint distinctio culpa in earum! Accusamus cum, quasi, numquam deserunt suscipit nostrum sed optio voluptates obcaecati enim quam fugit similique sint, repellat dignissimos ratione architecto. Assumenda nulla minima magnam, officiis dicta nihil dolore! Dolore exercitationem harum, veritatis facilis eligendi maxime fugit dolores illo nisi tempore vitae molestiae aliquam officiis assumenda rerum nostrum amet accusamus nesciunt pariatur sapiente impedit omnis voluptate dignissimos! Velit libero omnis, harum nulla beatae laudantium magni ad facere nobis voluptatem dolore itaque odit ipsa veniam repellendus obcaecati? Natus quo voluptate facere nisi ipsum quisquam tenetur animi quasi, iusto corrupti odio sunt accusantium, doloribus necessitatibus dolores voluptatem deserunt! Voluptatibus molestiae eum nam consequuntur recusandae magnam ipsa, dicta a at dignissimos iusto itaque dolores animi laudantium qui ratione obcaecati architecto quis repudiandae ea. Praesentium laboriosam commodi, rem repellat rerum eaque dolorum beatae totam, reiciendis non suscipit iste esse iure placeat? Eveniet, similique!
                        </p>
                    </div>
                </div>

                <div class="importantCard" id="popup_2" onclick="showPopup('popup_2')">
                    <div class="cardContext">
                        <span class="cardDate">25.01 <br>2023</span>
                        <span class="cardTitle">Заголовок 2</span>
                    </div>
                    <div class="cardImg">
                        <img src="https://imgholder.ru/250x250/8493a8/adb9ca&text=IMAGE+HOLDER&font=kelson" alt="cardImg">
                    </div>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, laborum sequi, corrupti soluta quas voluptate veritatis ab laboriosam ipsa iste obcaecati rem, ut mollitia sunt porro nisi ex voluptates laudantium ad error. Quae, eum voluptates, dolore ea aliquam deserunt repellat ad facilis blanditiis quas necessitatibus! Autem eius dicta porro tempore, a, saepe quam ullam sapiente numquam impedit sint distinctio culpa in earum! Accusamus cum, quasi, numquam deserunt suscipit nostrum sed optio voluptates obcaecati enim quam fugit similique sint, repellat dignissimos ratione architecto. Assumenda nulla minima magnam, officiis dicta nihil dolore! Dolore exercitationem harum, veritatis facilis eligendi maxime fugit dolores illo nisi tempore vitae molestiae aliquam officiis assumenda rerum nostrum amet accusamus nesciunt pariatur sapiente impedit omnis voluptate dignissimos! Velit libero omnis, harum nulla beatae laudantium magni ad facere nobis voluptatem dolore itaque odit ipsa veniam repellendus obcaecati? Natus quo voluptate facere nisi ipsum quisquam tenetur animi quasi, iusto corrupti odio sunt accusantium, doloribus necessitatibus dolores voluptatem deserunt! Voluptatibus molestiae eum nam consequuntur recusandae magnam ipsa, dicta a at dignissimos iusto itaque dolores animi laudantium qui ratione obcaecati architecto quis repudiandae ea. Praesentium laboriosam commodi, rem repellat rerum eaque dolorum beatae totam, reiciendis non suscipit iste esse iure placeat? Eveniet, similique!
                    </p>
                    <button>Подробнее</button>
                </div>
                <div class="popup popup_2">
                    <div class="closeBtn">
                        <svg onclick="hiddenPopup('popup_2')" viewBox="0 0 24.00 24.00" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                            <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                            <g id="SVGRepo_iconCarrier">
                                <path d="M6 6L18 18M18 6L6 18" stroke="#000000" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"></path>
                            </g>
                        </svg>
                    </div>
                    <div class="popupContent">
                        <div class="popupTitle">
                            <div class="cardImgPopup">
                                <img src="https://imgholder.ru/250x250/8493a8/adb9ca&text=IMAGE+HOLDER&font=kelson" alt="cardImg">
                            </div>
                            <div class="cardDescription">
                                <span class="cardTitle">Заголовок 2</span> <br>
                                <span class="cardDate">25.01.2023</span> <br>
                                <span class="cardAuthor">Иванов Иван Иваныч</span>
                            </div>
                        </div>
                        <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, laborum sequi, corrupti soluta quas voluptate veritatis ab laboriosam ipsa iste obcaecati rem, ut mollitia sunt porro nisi ex voluptates laudantium ad error. Quae, eum voluptates, dolore ea aliquam deserunt repellat ad facilis blanditiis quas necessitatibus! Autem eius dicta porro tempore, a, saepe quam ullam sapiente numquam impedit sint distinctio culpa in earum! Accusamus cum, quasi, numquam deserunt suscipit nostrum sed optio voluptates obcaecati enim quam fugit similique sint, repellat dignissimos ratione architecto. Assumenda nulla minima magnam, officiis dicta nihil dolore! Dolore exercitationem harum, veritatis facilis eligendi maxime fugit dolores illo nisi tempore vitae molestiae aliquam officiis assumenda rerum nostrum amet accusamus nesciunt pariatur sapiente impedit omnis voluptate dignissimos! Velit libero omnis, harum nulla beatae laudantium magni ad facere nobis voluptatem dolore itaque odit ipsa veniam repellendus obcaecati? Natus quo voluptate facere nisi ipsum quisquam tenetur animi quasi, iusto corrupti odio sunt accusantium, doloribus necessitatibus dolores voluptatem deserunt! Voluptatibus molestiae eum nam consequuntur recusandae magnam ipsa, dicta a at dignissimos iusto itaque dolores animi laudantium qui ratione obcaecati architecto quis repudiandae ea. Praesentium laboriosam commodi, rem repellat rerum eaque dolorum beatae totam, reiciendis non suscipit iste esse iure placeat? Eveniet, similique!
                        </p>
                    </div>
                </div>

                <div class="importantCard" id="popup_3" onclick="showPopup('popup_3')">
                    <div class="cardContext">
                        <span class="cardDate">23.01 <br>2023</span>
                        <span class="cardTitle">Заголовок 3</span>
                    </div>
                    <div class="cardImg">
                        <img src="https://imgholder.ru/250x250/8493a8/adb9ca&text=IMAGE+HOLDER&font=kelson" alt="cardImg">
                    </div>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, laborum sequi, corrupti soluta quas voluptate veritatis ab laboriosam ipsa iste obcaecati rem, ut mollitia sunt porro nisi ex voluptates laudantium ad error. Quae, eum voluptates, dolore ea aliquam deserunt repellat ad facilis blanditiis quas necessitatibus! Autem eius dicta porro tempore, a, saepe quam ullam sapiente numquam impedit sint distinctio culpa in earum! Accusamus cum, quasi, numquam deserunt suscipit nostrum sed optio voluptates obcaecati enim quam fugit similique sint, repellat dignissimos ratione architecto. Assumenda nulla minima magnam, officiis dicta nihil dolore! Dolore exercitationem harum, veritatis facilis eligendi maxime fugit dolores illo nisi tempore vitae molestiae aliquam officiis assumenda rerum nostrum amet accusamus nesciunt pariatur sapiente impedit omnis voluptate dignissimos! Velit libero omnis, harum nulla beatae laudantium magni ad facere nobis voluptatem dolore itaque odit ipsa veniam repellendus obcaecati? Natus quo voluptate facere nisi ipsum quisquam tenetur animi quasi, iusto corrupti odio sunt accusantium, doloribus necessitatibus dolores voluptatem deserunt! Voluptatibus molestiae eum nam consequuntur recusandae magnam ipsa, dicta a at dignissimos iusto itaque dolores animi laudantium qui ratione obcaecati architecto quis repudiandae ea. Praesentium laboriosam commodi, rem repellat rerum eaque dolorum beatae totam, reiciendis non suscipit iste esse iure placeat? Eveniet, similique!
                    </p>
                    <button>Подробнее</button>
                </div>
                <div class="popup popup_3">
                    <div class="closeBtn">
                        <svg onclick="hiddenPopup('popup_3')" viewBox="0 0 24.00 24.00" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                            <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                            <g id="SVGRepo_iconCarrier">
                                <path d="M6 6L18 18M18 6L6 18" stroke="#000000" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"></path>
                            </g>
                        </svg>
                    </div>
                    <div class="popupContent">
                        <div class="popupTitle">
                            <div class="cardImgPopup">
                                <img src="https://imgholder.ru/250x250/8493a8/adb9ca&text=IMAGE+HOLDER&font=kelson" alt="cardImg">
                            </div>
                            <div class="cardDescription">
                                <span class="cardTitle">Заголовок 3</span> <br>
                                <span class="cardDate">23.01.2023</span> <br>
                                <span class="cardAuthor">Иванов Иван Иваныч</span>
                            </div>
                        </div>
                        <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, laborum sequi, corrupti soluta quas voluptate veritatis ab laboriosam ipsa iste obcaecati rem, ut mollitia sunt porro nisi ex voluptates laudantium ad error. Quae, eum voluptates, dolore ea aliquam deserunt repellat ad facilis blanditiis quas necessitatibus! Autem eius dicta porro tempore, a, saepe quam ullam sapiente numquam impedit sint distinctio culpa in earum! Accusamus cum, quasi, numquam deserunt suscipit nostrum sed optio voluptates obcaecati enim quam fugit similique sint, repellat dignissimos ratione architecto. Assumenda nulla minima magnam, officiis dicta nihil dolore! Dolore exercitationem harum, veritatis facilis eligendi maxime fugit dolores illo nisi tempore vitae molestiae aliquam officiis assumenda rerum nostrum amet accusamus nesciunt pariatur sapiente impedit omnis voluptate dignissimos! Velit libero omnis, harum nulla beatae laudantium magni ad facere nobis voluptatem dolore itaque odit ipsa veniam repellendus obcaecati? Natus quo voluptate facere nisi ipsum quisquam tenetur animi quasi, iusto corrupti odio sunt accusantium, doloribus necessitatibus dolores voluptatem deserunt! Voluptatibus molestiae eum nam consequuntur recusandae magnam ipsa, dicta a at dignissimos iusto itaque dolores animi laudantium qui ratione obcaecati architecto quis repudiandae ea. Praesentium laboriosam commodi, rem repellat rerum eaque dolorum beatae totam, reiciendis non suscipit iste esse iure placeat? Eveniet, similique!
                        </p>
                    </div>
                </div>
                
                <div class="importantCard" id="popup_4" onclick="showPopup('popup_4')">
                    <div class="cardContext">
                        <span class="cardDate">21.01 <br>2023</span>
                        <span class="cardTitle">Заголовок 4</span>
                    </div>
                    <div class="cardImg">
                        <img src="https://imgholder.ru/250x250/8493a8/adb9ca&text=IMAGE+HOLDER&font=kelson" alt="cardImg">
                    </div>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, laborum sequi, corrupti soluta quas voluptate veritatis ab laboriosam ipsa iste obcaecati rem, ut mollitia sunt porro nisi ex voluptates laudantium ad error. Quae, eum voluptates, dolore ea aliquam deserunt repellat ad facilis blanditiis quas necessitatibus! Autem eius dicta porro tempore, a, saepe quam ullam sapiente numquam impedit sint distinctio culpa in earum! Accusamus cum, quasi, numquam deserunt suscipit nostrum sed optio voluptates obcaecati enim quam fugit similique sint, repellat dignissimos ratione architecto. Assumenda nulla minima magnam, officiis dicta nihil dolore! Dolore exercitationem harum, veritatis facilis eligendi maxime fugit dolores illo nisi tempore vitae molestiae aliquam officiis assumenda rerum nostrum amet accusamus nesciunt pariatur sapiente impedit omnis voluptate dignissimos! Velit libero omnis, harum nulla beatae laudantium magni ad facere nobis voluptatem dolore itaque odit ipsa veniam repellendus obcaecati? Natus quo voluptate facere nisi ipsum quisquam tenetur animi quasi, iusto corrupti odio sunt accusantium, doloribus necessitatibus dolores voluptatem deserunt! Voluptatibus molestiae eum nam consequuntur recusandae magnam ipsa, dicta a at dignissimos iusto itaque dolores animi laudantium qui ratione obcaecati architecto quis repudiandae ea. Praesentium laboriosam commodi, rem repellat rerum eaque dolorum beatae totam, reiciendis non suscipit iste esse iure placeat? Eveniet, similique!
                    </p>
                    <button>Подробнее</button>
                </div>
                <div class="popup popup_4">
                    <div class="closeBtn">
                        <svg onclick="hiddenPopup('popup_4')" viewBox="0 0 24.00 24.00" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                            <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                            <g id="SVGRepo_iconCarrier">
                                <path d="M6 6L18 18M18 6L6 18" stroke="#000000" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"></path>
                            </g>
                        </svg>
                    </div>
                    <div class="popupContent">
                        <div class="popupTitle">
                            <div class="cardImgPopup">
                                <img src="https://imgholder.ru/250x250/8493a8/adb9ca&text=IMAGE+HOLDER&font=kelson" alt="cardImg">
                            </div>
                            <div class="cardDescription">
                                <span class="cardTitle">Заголовок 4</span> <br>
                                <span class="cardDate">21.01.2023</span> <br>
                                <span class="cardAuthor">Иванов Иван Иваныч</span>
                            </div>
                        </div>
                        <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, laborum sequi, corrupti soluta quas voluptate veritatis ab laboriosam ipsa iste obcaecati rem, ut mollitia sunt porro nisi ex voluptates laudantium ad error. Quae, eum voluptates, dolore ea aliquam deserunt repellat ad facilis blanditiis quas necessitatibus! Autem eius dicta porro tempore, a, saepe quam ullam sapiente numquam impedit sint distinctio culpa in earum! Accusamus cum, quasi, numquam deserunt suscipit nostrum sed optio voluptates obcaecati enim quam fugit similique sint, repellat dignissimos ratione architecto. Assumenda nulla minima magnam, officiis dicta nihil dolore! Dolore exercitationem harum, veritatis facilis eligendi maxime fugit dolores illo nisi tempore vitae molestiae aliquam officiis assumenda rerum nostrum amet accusamus nesciunt pariatur sapiente impedit omnis voluptate dignissimos! Velit libero omnis, harum nulla beatae laudantium magni ad facere nobis voluptatem dolore itaque odit ipsa veniam repellendus obcaecati? Natus quo voluptate facere nisi ipsum quisquam tenetur animi quasi, iusto corrupti odio sunt accusantium, doloribus necessitatibus dolores voluptatem deserunt! Voluptatibus molestiae eum nam consequuntur recusandae magnam ipsa, dicta a at dignissimos iusto itaque dolores animi laudantium qui ratione obcaecati architecto quis repudiandae ea. Praesentium laboriosam commodi, rem repellat rerum eaque dolorum beatae totam, reiciendis non suscipit iste esse iure placeat? Eveniet, similique!
                        </p>
                    </div>
                </div>
            </section>
            <h2 class="title title2">Галлерея</h2>
            <section class="slider">
                <div class="itc-slider" data-autoplay="true" data-interval="7000" data-loop="true" data-slider="itc-slider">
                    <div class="itc-slider__wrapper">
                        <div class="itc-slider__items">
                            <div class="itc-slider__item">
                                <picture>
                                    <img class="lazy" data-src="./core/images/a.jpg" alt="test">
                                </picture>
                            </div>
                            <div class="itc-slider__item">
                                <picture>
                                    <img class="lazy" data-src="./core/images/b.jpg" alt="test">
                                </picture>
                            </div>
                            <div class="itc-slider__item">
                                <picture>
                                    <img class="lazy" data-src="./core/images/c.jpg" alt="test">
                                </picture>
                            </div>
                            <div class="itc-slider__item">
                                <picture>
                                    <img class="lazy" data-src="./core/images/d.jpg" alt="test">
                                </picture>
                            </div>
                            
                        </div>
                    </div>
                    <button class="itc-slider__btn itc-slider__btn_prev"></button>
                    <button class="itc-slider__btn itc-slider__btn_next"></button>
                    <ol class="itc-slider__indicators">
                      <li class="itc-slider__indicator" data-slide-to="0"></li>
                      <li class="itc-slider__indicator" data-slide-to="1"></li>
                      <li class="itc-slider__indicator" data-slide-to="2"></li>
                      <li class="itc-slider__indicator" data-slide-to="3"></li>
                    </ol>
                </div>
            </section>
        </main>
        <footer></footer>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
    <script src="./core/js/jquery.lazy-master/jquery.lazy.min.js"></script>
    <script src="./core/js/jquery.lazy-master/jquery.lazy.plugins.min.js"></script>
    <script src="./core/js/script.js"></script>
    <script src="./core/js/slider.min.js"></script>
</body>
</html>