diff --git a/test)/.gitignore b/test)/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..c2658d7d1b31848c3b71960543cb0368e56cd4c7
--- /dev/null
+++ b/test)/.gitignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/test)/a.html b/test)/a.html
new file mode 100644
index 0000000000000000000000000000000000000000..e0cb6ff776afbbdcefffe10313ca002d801f75af
--- /dev/null
+++ b/test)/a.html
@@ -0,0 +1,71 @@
+<style>
+ .menu{
+ padding-left: 20px;
+ padding-bottom: 10px;
+ a{
+ display: block;
+ text-decoration: none;
+
+ }
+
+ }
+ .research a {
+ display: block;
+ text-decoration: none;
+ padding-left: 30px;
+ padding-bottom: 5px;
+ cursor: pointer;
+ }
+ .menu2 ,.menu3{
+ padding-left: 20px;
+ padding-bottom: 10px;
+ padding-top: 10px;
+ }
+ .menu2 a,.menu3 a {
+ text-decoration: none;
+ }
+</style>
+<body>
+ <div class="menu">
+ <a href="#">reserch group</a>
+ </div>
+ <div class="research">
+ <a href="" target="_blank" >team andrews:information visualisation</a>
+ <a href=""></a>
+ <a href="">team andrews:information visualisation</a>
+ <a href="">team andrews:information visualisation</a>
+ <a href="">team andrews:information visualisation</a>
+ <a href="">team andrews:information visualisation</a>
+ <a href="">team andrews:information visualisation</a>
+ <a href="">team andrews:information visualisation</a>
+ <a href="">team andrews:information visualisation</a>
+</div>
+<div class="menu2">
+ <a href="#">publication</a>
+</div>
+<div class="menu3">
+ <a href="#">project</a>
+ <a href="super-science-team.tugraz.at/tuit/" target="_blank"></a>
+ <a href="super-science-team.tugraz.at/tuit/" target="_blank"></a>
+</div>
+
+</body>
+<a href super-science-team.tugraz.at/tuit/
+Das aktuelle Workshopangebot finden Sie unter
+
+
+
+
+
+<p class="has-normal-font-size"><br><strong>Kontakt:</strong> <br>Maria Muhr <br>Büro für Gleichstellung und Frauenförderung <br>Tel.: +43 664 887 831 81<br>E-Mail: <a href="mailto:angelika.droisner@tugraz.at" target="_blank" rel="noreferrer noopener">angelika.droisner@tugraz.at</a></p>
+ </div>
+
+
+
+ <p><strong>Das aktuelle Workshopangebot finden Sie unter: <a href="https://super-science-team.tugraz.at/tuit/" target="_blank"> super-science-team.tugraz.at/tuit/</a></strog></p>
+
+
+
+ <p class="has-normal-font-size"><br><strong>Kontakt:</strong> <br>Maria Muhr <br>Tel.: +43 316 873 32663<br>E-Mail: <a href="mailto:tuit.workshops@tugraz.at" target="_blank" rel="noreferrer noopener">tuit.workshops@tugraz.at</a></p>
+ </div>
+ </div>
diff --git a/test)/ad.html b/test)/ad.html
new file mode 100644
index 0000000000000000000000000000000000000000..48b71ca5029d3772432deb61b351df168c770878
--- /dev/null
+++ b/test)/ad.html
@@ -0,0 +1,42 @@
+<style>
+.products{
+ width: 90%;
+ height: 200px;
+ background-color: black;
+ display: grid;
+ grid-template-columns:repeat(3,auto);
+ grid-template-rows: 1fr;
+ margin: 50px auto;
+ column-gap: 10px;
+ .left{
+ display: grid;
+ grid-template-columns: repeat(2,auto);
+ grid-template-rows: 1fr;
+ background-color: aqua;
+ column-gap: 5px;
+ .item {
+ background-color: cadetblue;
+
+
+
+
+ }
+ }
+ .mitte{
+ background-color: blue;
+ }
+ .right{
+ background-color: brown;
+ }
+}
+</style>
+<body>
+ <div class="products">
+ <div class="left">
+ <di class="item"></di>
+ <di class="item"></di>
+ </div>
+ <div class="mitte"></div>
+ <div class="right"></div>
+ </div>
+</body>
\ No newline at end of file
diff --git a/test)/btn.html b/test)/btn.html
new file mode 100644
index 0000000000000000000000000000000000000000..aaceb652f771e0ea9dd47087085162d14442e32d
--- /dev/null
+++ b/test)/btn.html
@@ -0,0 +1,69 @@
+<style>
+
+label[for=show]
+{
+ display: block;
+ width: 100px;
+ height: 30px;
+ background-color: #2b2b2b;
+ margin: 20px;
+ color: whitesmoke;
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ font-size: 12px;
+ text-align: center;
+ line-height: 30px;
+ text-transform: capitalize;
+ font-weight: bold;
+ cursor: pointer;
+
+}
+.modal {
+ width: 100%;
+ height: 100px;
+ background-color: #2b2b2baa;
+ position: absolute;
+ left: -100%;/*chon pedaresh dom -100% barmigardad aghab*/
+ top: 0;
+ transition: 300ms;
+
+}
+#show:checked ~ .modal {
+ left: 0;
+}
+label[for=close]
+{
+ display: block;
+ width: 35px;
+ height: 35px;
+ background-color: #961616;
+ margin: 20px;
+ color: whitesmoke;
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ font-size: 12px;
+ text-align: center;
+ line-height: 30px;
+ text-transform: capitalize;
+ font-weight: bold;
+ cursor: pointer;
+ position: absolute;
+ right: 0;
+ top: 0;
+ cursor: pointer;
+
+}
+#close:checked ~ .modal {
+ left: -100%;
+}
+#close , #show {
+ display: none;
+} <!-- display bolock kardim va 2 ta radio buttom az safeh hazf shod -->
+
+</style>
+<body>
+ <label for="show">show</label>
+ <input type="radio" name="modal" id="show"> <!-- name ha yeki mishavad ke vaghti button zadim biayad vaghti x zadim bere-->
+ <input type="radio" name="modal" id="close">
+ <div class="modal">
+ <label for="close">×</label> <!-- times alamat x omad baray bastan safhe-->
+ </div>
+</body>
\ No newline at end of file
diff --git a/test)/buttom.html b/test)/buttom.html
new file mode 100644
index 0000000000000000000000000000000000000000..552b9a27012bf9b420c058f3903e1690daac9c25
--- /dev/null
+++ b/test)/buttom.html
@@ -0,0 +1,44 @@
+<style>
+
+body {
+ display: flex;
+ justify-content: center;/* Centers horizontally */
+ /* Centers vertically */
+ height: 100vh; /* Full viewport height */
+ margin: 0;
+ padding: 0;
+ column-gap: 5px;
+}
+.btn{
+ width: 100px;
+ height: 50px;
+ background-color: rgb(239, 235, 232);
+ line-height: 50px;
+ text-align: center;
+ margin: 50px auto;
+ border: none;
+ cursor: pointer;
+
+ a{
+ display: block;
+ text-decoration: none;
+ color: rgb(245, 245, 245);
+ line-height: 50px;
+ text-transform: capitalize;
+
+ }
+
+}
+</style>
+<body>
+ <a href="#">
+ <button class="btn">Mitarbeitende </button>
+ </a>
+ <a href="#">
+ <button class="btn">Mitarbeitende </button>
+ </a>
+ <a href="#">
+ <button class="btn">Mitarbeitende </button>
+ </a>
+
+</body>
\ No newline at end of file
diff --git a/test)/css/main.css b/test)/css/main.css
new file mode 100644
index 0000000000000000000000000000000000000000..ea8b891f7fdc08233436454f5f08e8297cfb6af5
--- /dev/null
+++ b/test)/css/main.css
@@ -0,0 +1,127 @@
+header{
+ width: 100%;
+ height: 170px;
+background-color: black;
+overflow: hidden;
+
+
+}
+.slider{
+ width: 50%;
+ height: 400px;
+ background-color: aqua;
+ display: flex;
+ justify-content: left;
+ align-items: ;
+
+ .swiper {
+ width: 100%;
+ height: 100%;
+ }
+
+ .swiper-slide {
+ text-align: center;
+ font-size: 18px;
+ background: #fff;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ .swiper-slide img {
+ display: block;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ opacity: 1;
+ }
+
+ }
+
+
+}
+a {
+ display: block;
+ width: 70px;
+ height: 30px;
+ background-image: url('../img/img1.webp');
+ margin: 50px auto;
+ color: whitesmoke;
+ transition: 300ms;
+ font-size: 12px;
+ text-align: center;
+ text-transform: capitalize;
+ line-height:30px ;
+ cursor: pointer;
+ user-select: none;
+ background-color: #e4154b;
+
+ &:active{
+ transform: scaleX(0.9) scaleY(0.9);
+ background-color: aquamarine;
+ }
+}
+.swiper {
+ width: 100%;
+ height: 100%;
+ background: #000;
+}
+
+.swiper-slide {
+ font-size: 18px;
+ color: #fff;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ padding: 40px 60px;
+}
+
+.parallax-bg {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 130%;
+ height: 100%;
+ -webkit-background-size: cover;
+ background-size: cover;
+ background-position: center;
+}
+
+.swiper-slide .title {
+ font-size: 41px;
+ font-weight: 300;
+ background-color: #e47c15;
+
+}
+
+.swiper-slide .subtitle {
+ font-size: 21px;
+}
+
+.swiper-slide .text {
+ font-size: 14px;
+ max-width: 400px;
+ line-height: 1.3;
+}
+
+.topic_slider {
+ display: flex;
+ overflow: hidden;
+ width: 100%;
+ max-width: 800px;
+ margin: auto;
+ position: relative;
+}
+
+.module_topic_slider .slide {
+ min-width: 100%;
+ transition: transform 0.5s ease-in-out;
+}
+
+img {
+ width: 100%;
+ height: auto;
+ display: block;
+}
+
+
+
+
diff --git a/test)/css/script.js b/test)/css/script.js
new file mode 100644
index 0000000000000000000000000000000000000000..a8e4b627a67eac0159e151194e7ae7fa16b49c8a
--- /dev/null
+++ b/test)/css/script.js
@@ -0,0 +1,12 @@
+document.addEventListener("DOMContentLoaded", () => {
+ const slider = document.querySelector(".topic_slider");
+ let index = 0;
+
+ setInterval(() => {
+ index++;
+ if (index >= slider.children.length) {
+ index = 0;
+ }
+ slider.style.transform = `translateX(-${index * 100}%)`;
+ }, 3000);
+});
diff --git a/test)/grid.html b/test)/grid.html
new file mode 100644
index 0000000000000000000000000000000000000000..82597a5cb778a68a3f0ddac800b90494ac58b5de
--- /dev/null
+++ b/test)/grid.html
@@ -0,0 +1,70 @@
+<style>
+ .product {
+ width: 70%;
+ height: 600px;
+ background-color: black;
+ display: grid;
+ grid-template-columns: 40% 60%;
+ grid-template-rows: 1fr;
+ margin: 50px auto;
+ column-gap: 5px;
+ }
+
+ .left {
+ background-color: aqua;
+ border-radius: 25px;
+ }
+
+ .right {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-template-rows: repeat(2, 1fr);
+ gap: 5px;
+ background-color: gray;
+ padding: 10px;
+ }
+
+ .item {
+ background-color: blue;
+ padding: 15px;
+
+ img {
+ display: block;
+ width: 100%;
+ height: auto;
+ object-fit: cover;
+ }
+ h1{
+ color: aqua;
+ text-align: center;
+ font: 14px;
+
+ }
+ h2{
+ color: aqua;
+ text-align: center;
+ font-size: 14px;
+
+ }
+
+}
+
+
+ </style>
+
+ <body>
+ <div class="product">
+ <div class="left">Left Section</div>
+
+ <div class="right">
+ <div class="item">
+ <img src="./img/img1.webp" alt="">
+ <h1>hello</h1>
+ <h2>dfrtgzhjklumu@g.com</h2>
+ </div>
+ <div class="item">Top Right</div>
+ <div class="item">Bottom Left</div>
+ <div class="item">Bottom Right</div>
+ </div>
+ </div>
+ </body>
\ No newline at end of file
diff --git a/test)/img/img1.webp b/test)/img/img1.webp
new file mode 100644
index 0000000000000000000000000000000000000000..83314d9d02a884be7ae9eb466297ae1d01e236b4
Binary files /dev/null and b/test)/img/img1.webp differ
diff --git a/test)/index.html b/test)/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..20a59354ec4c7a2f260a4288f3c10e44ea3b7b15
--- /dev/null
+++ b/test)/index.html
@@ -0,0 +1,197 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Document</title>
+ <link rel="stylesheet" href="./node_modules/swiper/swiper-bundle.min.css">
+ <link rel="stylesheet" href="./css/main.css">
+
+</head>
+<body>
+ <header>
+ <div class="header">
+
+ </div></header>
+ <a href="#" class="svg">
+
+<svg shape-rendering="geometricPrecision" class="ext-menu-breadcrumb-home-icon" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" version="1.1" xml:space="preserve" height="36.997" width="35.969" enable-background="new 0 0 595.28 841.89" y="0px" x="0px" viewBox="0 0 35.969 36.997451"><polyline style="stroke:#000;stroke-linecap:square;stroke-width:6;fill:none" points="282.72 437.28 282.72 414.77 297.71 406.69 312.69 414.77 312.69 437.28" transform="translate(-279.72 -403.28)"></polyline></svg>
+ </a>
+ .Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, nulla aut unde voluptatibus dolores iure architecto mollitia praesentium, hic sequi officia cumque et rem, accusantium in? Veritatis consectetur tenetur necessitatibus
+ </div>
+ <!--<div class="slider">
+
+ <div class="swiper mySwiper">
+ <div class="swiper-wrapper">
+ <div class="swiper-slide">
+ <img src="./img/img1.webp" alt="">
+ </div>
+ <div class="swiper-slide">Slide 2</div>
+ <div class="swiper-slide">Slide 3</div>
+ <div class="swiper-slide">Slide 4</div>
+ <div class="swiper-slide">Slide 5</div>
+ <div class="swiper-slide">Slide 6</div>
+ <div class="swiper-slide">Slide 7</div>
+ <div class="swiper-slide">Slide 8</div>
+ <div class="swiper-slide">Slide 9</div>
+ </div>
+ <div class="swiper-button-next"></div>
+ <div class="swiper-button-prev"></div>
+ <div class="swiper-pagination"></div>
+ </div>-->
+
+ <div class="fullslider">
+ <div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper">
+ <div class="parallax-bg" style="
+ background-image: url(./img/img1.webp);
+ " data-swiper-parallax="-23%"></div>
+ <div class="swiper-wrapper">
+ <div class="swiper-slide">
+ <div class="title" data-swiper-parallax="-300">Slide 1</div>
+ <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
+ <div class="text" data-swiper-parallax="-100">
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
+ dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla
+ laoreet justo vitae porttitor porttitor. Suspendisse in sem justo.
+ Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod.
+ Aliquam hendrerit lorem at elit facilisis rutrum. Ut at
+ ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec,
+ tincidunt ut libero. Aenean feugiat non eros quis feugiat.
+ </p>
+ </div>
+ </div>
+ <div class="swiper-slide">
+ <div class="title" data-swiper-parallax="-300">slide2</div>
+ <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
+ <div class="text" data-swiper-parallax="-100">
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
+ dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla
+ laoreet justo vitae porttitor porttitor. Suspendisse in sem justo.
+ Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod.
+ Aliquam hendrerit lorem at elit facilisis rutrum. Ut at
+ ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec,
+ tincidunt ut libero. Aenean feugiat non eros quis feugiat.
+ </p>
+ </div>
+ </div>
+ <div class="swiper-slide">
+ <div class="title" data-swiper-parallax="-300">Slide 3
+ <img src="https://swiperjs.com/demos/images/nature-8.jpg" />
+ </div>
+ <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
+ <div class="text" data-swiper-parallax="-100">
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
+ dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla
+ laoreet justo vitae porttitor porttitor. Suspendisse in sem justo.
+ Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod.
+ Aliquam hendrerit lorem at elit facilisis rutrum. Ut at
+ ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec,
+ tincidunt ut libero. Aenean feugiat non eros quis feugiat.
+ </p>
+ </div>
+ </div>
+ </div>
+ <div class="swiper-button-next"></div>
+ <div class="swiper-button-prev"></div>
+ <div class="swiper-pagination"></div>
+ </div>
+ </div>
+
+ </div>
+
+ </div>
+ <script src="./node_modules/swiper/swiper-bundle.min.js"></script>
+ <script>
+ var swiper = new Swiper(".mySwiper", {
+ spaceBetween: 30,
+ centeredSlides: true,
+ autoplay: {
+ delay: 2500,
+ disableOnInteraction: false,
+ },
+ pagination: {
+ el: ".swiper-pagination",
+ clickable: true,
+ },
+ navigation: {
+ nextEl: ".swiper-button-next",
+ prevEl: ".swiper-button-prev",
+ },
+ });
+
+ var swiper = new Swiper(".mySwiper", {
+ speed: 600,
+ parallax: true,
+ pagination: {
+ el: ".swiper-pagination",
+ clickable: true,
+ },
+ navigation: {
+ nextEl: ".swiper-button-next",
+ prevEl: ".swiper-button-prev",
+ },
+ });
+
+ </script>
+ <a class="button" href="https://www.tugraz.at">click </a>
+
+
+
+ <style>
+ .wrapper {
+ max-width: 1000px;
+ margin: 0 auto;
+ }
+
+ .section-title {
+ color: #0f75b3;
+ font-size: 28px;
+ font-weight: bold;
+ text-align: center;
+ margin-bottom: 30px;
+ }
+
+ p {
+ font-size: 16px;
+ margin-bottom: 15px;
+ text-align: justify;
+ }
+
+ .styled-list {
+ margin-top: 20px;
+ padding-left: 40px;
+ list-style-type: disc;
+ }
+
+ .styled-list li {
+ font-size: 18px;
+ font-weight: bold;
+ color: #0f75b3;
+ margin-bottom: 10px;
+ }
+ </style>
+
+ <div class="wrapper">
+ <div class="section-title">The institute consists of the following research groups:</div>
+
+ <p>Chemical Engineering has a long history at TU Graz and dates back to 1948, while CEET was established in 2011.</p>
+
+ <p>Here at CEET, our research is dedicated to the intensification of existing chemical processes to make them more efficient and environmentally friendly, as well as to the development of alternative process routes to combat climate change and pollution.</p>
+
+ <p>As an engineering science primarily concerned with the transformation of molecules into usable products, valuable materials or energy, chemical engineering enables the harnessing of research advances in energy, food, medicine, water, and manufacturing for the benefit of society. Chemical engineering has enabled the industrialization and prosperity of our society through cost-effective production of materials and chemicals and large-scale energy conversion. However, this development has also had unintended massive impacts on our environment through the longevity of products, such as plastics, or waste gases from energy conversion.</p>
+
+ <p>Research activities range from knowledge-oriented basic research to industry-oriented application-oriented research. Experimental investigations in the laboratory and pilot plant are complemented by modelling and process simulation.</p>
+
+ <p>In this way CEET contributes to the decarbonisation of value chains through the development of innovative technologies and equipment, the intelligent selection of process steps and the optimisation of process unit operations. It is active in three main research areas:</p>
+
+ <ul class="styled-list">
+ <li>Chemical Engineering</li>
+ <li>Electrochemical Engineering</li>
+ <li>Thermal Process Engineering</li>
+ </ul>
+ </div>
+</body>
+</html>
diff --git a/test)/package-lock.json b/test)/package-lock.json
new file mode 100644
index 0000000000000000000000000000000000000000..dc2ef3158b487498d7890c3a3a522c76c531a071
--- /dev/null
+++ b/test)/package-lock.json
@@ -0,0 +1,63 @@
+{
+ "name": "test)",
+ "version": "1.0.0",
+ "lockfileVersion": 3,
+ "requires": true,
+ "packages": {
+ "": {
+ "name": "test)",
+ "version": "1.0.0",
+ "license": "ISC",
+ "dependencies": {
+ "bootstrap": "^5.3.3",
+ "swiper": "^11.2.5"
+ }
+ },
+ "node_modules/@popperjs/core": {
+ "version": "2.11.8",
+ "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+ "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+ "peer": true,
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/popperjs"
+ }
+ },
+ "node_modules/bootstrap": {
+ "version": "5.3.3",
+ "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
+ "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
+ "funding": [
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/twbs"
+ },
+ {
+ "type": "opencollective",
+ "url": "https://opencollective.com/bootstrap"
+ }
+ ],
+ "peerDependencies": {
+ "@popperjs/core": "^2.11.8"
+ }
+ },
+ "node_modules/swiper": {
+ "version": "11.2.5",
+ "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.5.tgz",
+ "integrity": "sha512-nG0kbIyBfeE2BPFt9nPUX03qUBF75o6+enzjIT/DfCmbh8ORlwhc4eZz1+4H/yseAgb3H+OoEYzmb64i0tYNnQ==",
+ "funding": [
+ {
+ "type": "patreon",
+ "url": "https://www.patreon.com/swiperjs"
+ },
+ {
+ "type": "open_collective",
+ "url": "http://opencollective.com/swiper"
+ }
+ ],
+ "engines": {
+ "node": ">= 4.7.0"
+ }
+ }
+ }
+}
diff --git a/test)/package.json b/test)/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..101cc7eab1cffeaac3df98c1456c55114861bd71
--- /dev/null
+++ b/test)/package.json
@@ -0,0 +1,16 @@
+{
+ "name": "test)",
+ "version": "1.0.0",
+ "description": "",
+ "main": "index.js",
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "keywords": [],
+ "author": "",
+ "license": "ISC",
+ "dependencies": {
+ "bootstrap": "^5.3.3",
+ "swiper": "^11.2.5"
+ }
+}
diff --git a/test)/slider.html b/test)/slider.html
new file mode 100644
index 0000000000000000000000000000000000000000..883ef1358e7a67574ad94bc1b6b88a3e8893a57a
--- /dev/null
+++ b/test)/slider.html
@@ -0,0 +1,135 @@
+
+
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
+
+<style>
+ .swiper {
+ width: 100%;
+ height: 50vh;
+ background: #000;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+
+ .swiper-slide {
+
+ font-size: 18px;
+ color: #e7dbdb;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ padding: 40px 60px;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ text-align: right;
+ }
+
+ .parallax-bg {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 130%;
+ height: 100%;
+ -webkit-background-size: cover;
+ background-size: cover;
+ background-position: center;
+ }
+
+ .swiper-slide .title {
+ font-size: 41px;
+ font-weight: 300;
+
+ }
+
+ .swiper-slide .subtitle {
+ font-size: 21px;
+
+
+ }
+
+ .swiper-slide .text {
+ font-size: 14px;
+ max-width: 400px;
+ line-height: 1.3;
+
+
+ }
+</style>
+<body>
+
+ <div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper">
+ <div class="parallax-bg" style="
+ background-image: url(./img/img1.webp);
+ " data-swiper-parallax="-23%"></div>
+ <div class="swiper-wrapper">
+ <div class="swiper-slide">
+ <div class="title" data-swiper-parallax="-300">Slide 1</div>
+ <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
+ <div class="text" data-swiper-parallax="-100">
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
+ dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla
+ laoreet justo vitae porttitor porttitor. Suspendisse in sem justo.
+ Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod.
+ Aliquam hendrerit lorem at elit facilisis rutrum. Ut at
+ ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec,
+ tincidunt ut libero. Aenean feugiat non eros quis feugiat.
+ </p>
+ </div>
+ </div>
+ <div class="swiper-slide">
+ <div class="title" data-swiper-parallax="-300">Slide 2</div>
+ <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
+ <div class="text" data-swiper-parallax="-100">
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
+ dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla
+ laoreet justo vitae porttitor porttitor. Suspendisse in sem justo.
+ Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod.
+ Aliquam hendrerit lorem at elit facilisis rutrum. Ut at
+ ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec,
+ tincidunt ut libero. Aenean feugiat non eros quis feugiat.
+ </p>
+ </div>
+ </div>
+ <div class="swiper-slide">
+ <div class="title" data-swiper-parallax="-300">Slide 3</div>
+ <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
+ <div class="text" data-swiper-parallax="-100">
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
+ dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla
+ laoreet justo vitae porttitor porttitor. Suspendisse in sem justo.
+ Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod.
+ Aliquam hendrerit lorem at elit facilisis rutrum. Ut at
+ ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec,
+ tincidunt ut libero. Aenean feugiat non eros quis feugiat.
+ </p>
+ </div>
+ </div>
+ </div>
+ <div class="swiper-button-next"></div>
+ <div class="swiper-button-prev"></div>
+ <div class="swiper-pagination"></div>
+ </div>
+ <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
+ <script>
+ var swiper = new Swiper(".mySwiper", {
+ speed: 600,
+ parallax: true,
+ pagination: {
+ el: ".swiper-pagination",
+ clickable: true,
+ },
+ navigation: {
+ nextEl: ".swiper-button-next",
+ prevEl: ".swiper-button-prev",
+ },
+ });
+ </script>
+</body>
\ No newline at end of file
diff --git a/test)/z-index.html b/test)/z-index.html
new file mode 100644
index 0000000000000000000000000000000000000000..8ea9e1906fd903b47ae46a8f7ccbea0a09c18144
--- /dev/null
+++ b/test)/z-index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Document</title>
+ <style>
+ .first{
+ width: 100px;
+ height:100px;
+ background-color: aqua;
+ opacity: 0.8;
+ position: relative;
+ left: 100px;
+ top: 100px;
+ }
+
+ .second{
+ width: 100px;
+ height:100px;
+ background-color: bisque;
+ opacity: 0.8;
+ position: absolute;
+ left: 150px;
+ top: 150px;
+ }
+ .third{
+ width: 100px;
+ height:100px;
+ background-color: blue;
+ opacity: 1;
+ position: absolute;
+ left: 200px;
+ top: 200px;
+ }
+ </style>
+</head>
+<body>
+ <div class="wrapper">
+ <div class="first"></div>
+ <div class="second"></div>
+ <div class="third"></div>
+ </div>
+</body>
+</html>
diff --git a/test)/~.html b/test)/~.html
new file mode 100644
index 0000000000000000000000000000000000000000..f180d059875cbeb88f66b03505207e5dd9f4d377
--- /dev/null
+++ b/test)/~.html
@@ -0,0 +1,13 @@
+<style>
+.parent{
+ width: 150px;
+ height: 100px;
+
+}
+</style>
+<body>
+ <div class="parent">
+ <h1>heloo</h1>
+ <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quod quos aliquid, nihil iste doloremque voluptas, molestiae aut blanditiis illum repellendus cumque. Magnam perferendis exercitationem ex eius veritatis fugiat excepturi, fuga accusamus suscipit reprehenderit esse, dolore consectetur voluptatem culpa maiores soluta ab atque unde. Magni obcaecati ipsum, praesentium, autem repellendus a sint aliquid doloribus quo aspernatur consequuntur rerum pariatur dicta. Officia quam veritatis sint iure, cumque eum consequuntur rem, ipsa nostrum sed numquam tenetur atque in officiis pariatur vitae minima culpa dolore facilis recusandae voluptates ipsam et est. Placeat nemo veritatis unde alias laborum cum repellat, sed vitae nobis iste culpa!</p>
+ </div>
+</body>
\ No newline at end of file