Сделал скролл-анимацию через js и css на собственном хостинге, пришло время интегрировать в ворпдресс, решил делать через шаблоны - 3 анимации на 3 шаблона, ну как-бы пойдет. Загрузил все файлы в assets предварительно некоторые сжав, поменял в коде пути, js скрипт вроде как-то срабатывает, но никаких картинок не появляется и стили тоже не работают. Хотя везде поменял имена на файлах, такие как media в media 1 и тд. Все равно не работает. Подскажите, пожалуйста как интегрировать через мой способ (или способ лучше). На моем хостинге все работало отлично, сейчас вот такая каша -
<?php
/*
Template Name: ultimate
*/
get_header(); ?>
<title>Дидный лазер для эпиляции</title>
<link rel="stylesheet" href="assets/css/style1.css">
<link rel="stylesheet" href="assets/css/media1.css">
<link rel="stylesheet" href="fonts/stylesheet.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="assets/img/">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div class="container">
<div class="container-1">
<div class="anim-1">
<span class="spananim1 anim1" data-aos="fade-down" data-aos-duration="900" style="margin-top: 200px;">дидный лазер для эпиляции</span>
<div class="imganim1 anim1" data-aos="fade-down" data-aos-duration="900" style="width: 100%; max-width: 900px;"></div>
<div class="img-wrap12121">
<div data-aos-delay="1200" data-aos-duration="1500" data-aos="zoom-in-up" class="img-inner1212"></div>
</div>
<div id="buttton" data-aos="fade-up" data-aos-delay="800" class="absolute-button"><span>узнать подробнее</span></div>
</div>
<div class="anim-2">
<div class="anim-2__inner1">
<div class="anim__inner1-wrap1"><span id="lllsss">Мы являемся дистрибьютором диодных лазеров для эпиляции с пожизненной гарантией и неограниченным ресурсом манипулы</span></div>
<div class="anim__inner1-wrap2">
<div class="anim-section">
<span class="big-sp sp-section1 sssssss">808 Nm</span>
</div>
<div class="anim-section">
<span class="big-sp sp-section2 sssssss">1-200 Дж</span>
</div>
<div class="anim-section">
<span class="big-sp sp-section3 sssssss">1 250 000 ₽</span>
</div>
</div>
</div>
<div class="anim-2__inner21">
<div class="button-section"><span>Подробнее об аппарате </span></div>
<span class="small__span">После обучения все мастера попадают в закрытый чат единомышленников, где <br> продолжают делиться знаниями и перенимать опыт лучших специалистов.</span>
</div>
</div>
</div>
<div class="container-2">
<div class="container2__inner1">
<span>дидный лазер для эпиляции</span>
<h1>Дидный лазер для эпиляции</h1>
</div>
<div class="container2__inner2">
<span>дидный лазер для эпиляции</span>
<h1>Дидный лазер для эпиляции</h1>
</div>
</div>
<div class="container-3">
<div class="container3__inner1">
<span>дидный лазер для эпиляции</span>
<h1>Интуитивно понятная CRM-система</h1>
</div>
<div class="container-3__img"></div>
<div class="container3__sp">Каждый аппарат оснащен интуитивно понятной CRM-системой</div>
<div id="ddd" class="container3__sp">Работайте с базой клиентов без блокнотов и ручек. Для этого в памяти лазера сохраняются: контакты клиентов, зоны для эпиляции и параметры сеансов.</div>
</div>
<div class="container-4">
<div class="container4__inner1">
<span>дидный лазер для эпиляции</span>
<h1>Неограниченное
количество вспышек</h1>
</div>
</div>
<div class="container-5">
<div style="transition: all 0.9s;" class="container5__inner1">
<span class="container5__sp">Качество лазерного модуля
и наша гарантия позволят забыть об ограничениях на количество вспышек.</span>
<div id="sddd2">
<span class="container5__sp" id="ddd2">Достигается благодаря немецким диодам от компании Jenoptik. </span>
</div>
<img class="img-group-11" src="assets/img/Group11.png" alt="">
<img class="img-group-12" src="assets/img/Group12.png" alt="">
<div class="img-wrap2121">
<div class="img-inner2121"></div>
</div>
<div class="photo-group-wrapper">
<div class="photo-group-6">
<img style="margin-top: -350px; margin-left: 950px; width: 750px; z-index: 5;" src="assets/img/back1.png" alt="">
<img style="margin-top: -430px; margin-left: 850px; width: 450px;" src="assets/img//winter2.png" alt="">
<img id="id1212" style="margin-left: 200px; margin-top: 200px;" src="assets/img/winter1.png" alt="">
<img style="margin-top: 30px; margin-left: 1400px; width: 380px;" src="assets/img/winter3.png" alt="">
</div>
</div>
<div class="anim-section section-6" id="ddd3">
<div id="dddd3">
<span class="big-sp sp-section2">1-200 Дж</span>
<span>Анти-рефлекционное покрытие <br> позволяет достигнуть энергию <br> импульса от 1 до 220 Дж.</span>
</div>
</div>
<div class="anim-section section-6" id="ddd4">
<div id="dddd4">
<span>5-ти ступенчатая система охлаждения <br> для бесперебойной и безостановочной <br> работы</span>
</div>
</div>
<div class="anim-section section-6" id="ddd5">
<div id="dddd5">
<span>Новый уровень безопасности <br>
с равномерным распределением света <br> на участке кожи</span>
</div>
</div>
<div class="photo-group-7">
<img style=" margin-left: 850px; z-index: 100; width: 500px; position: absolute;" src="assets/img/diod.png" alt="">
<div class="elipse"></div>
</div>
<img class="img-group-13" src="assets/img/Group11.png" alt="">
</div>
</div>
<div class="container-6">
<img style="width: 745px;" src="assets/img/uultim.png" alt="">
<div class="contaner-6__wrapper">
<span class="container-6__sp">Надежные <br> комплектующие</span>
<span>от мировых лидеров на рынке</span>
<div class="button-section"><span>Подробнее об аппарате </span></div>
</div>
</div>
</div>
<script src="assets/js/main1.js"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<?php get_footer(); ?>
