├── Menu desplegable
    ├── .vscode
    │   └── settings.json
    ├── assets
    │   ├── arrow.svg
    │   └── menu.svg
    ├── css
    │   └── estilos.css
    ├── index.html
    └── js
    │   └── app.js
├── Modal
    ├── .vscode
    │   └── settings.json
    ├── estilos.css
    ├── images
    │   ├── close.svg
    │   ├── illustration.svg
    │   ├── menu.svg
    │   └── success.svg
    ├── index.html
    └── js
    │   └── modal.js
└── Slider
    ├── .vscode
        └── settings.json
    ├── assets
        ├── leftarrow.svg
        ├── picture1.jpg
        ├── picture2.jpg
        ├── picture3.jpg
        └── rightarrow.svg
    ├── estilos.css
    ├── index.html
    └── sliders.js


/Menu desplegable/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "liveServer.settings.port": 5501
3 | }


--------------------------------------------------------------------------------
/Menu desplegable/assets/arrow.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill:#fff;transform: ;msFilter:;"><path d="M16.293 9.293 12 13.586 7.707 9.293l-1.414 1.414L12 16.414l5.707-5.707z"></path></svg>


--------------------------------------------------------------------------------
/Menu desplegable/assets/menu.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill:#fff;transform: ;msFilter:;"><path d="M4 6h16v2H4zm4 5h12v2H8zm5 5h7v2h-7z"></path></svg>


--------------------------------------------------------------------------------
/Menu desplegable/css/estilos.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');
  2 | 
  3 | 
  4 | *{
  5 |     margin: 0;
  6 |     padding: 0;
  7 |     box-sizing: border-box;
  8 | }
  9 | 
 10 | body{
 11 |     font-family: 'Poppins', sans-serif;
 12 | }
 13 | 
 14 | .menu{
 15 |     background-color: #1A202C;
 16 |     color: #fff;
 17 |     height: 70px;
 18 | }
 19 | 
 20 | .menu__container{
 21 |     display: flex;
 22 |     justify-content: space-between;
 23 |     align-items: center;
 24 |     width: 90%;
 25 |     max-width: 1200px;
 26 |     height: 100%;
 27 |     margin: 0 auto;
 28 | }
 29 | 
 30 | .menu__links{
 31 |     height: 100%;
 32 |     transition: transform .5s;
 33 |     display: flex;
 34 | }
 35 | 
 36 | .menu__item{
 37 |     list-style: none;
 38 |     position: relative;
 39 |     height: 100%;
 40 |     --clip: polygon(0 0, 100% 0, 100% 0, 0 0);
 41 |     --transform: rotate(-90deg);
 42 | }
 43 | 
 44 | .menu__item:hover{
 45 |     --clip: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
 46 |     --transform: rotate(0);
 47 | }
 48 | 
 49 | .menu__link{
 50 |     color: #fff;
 51 |     text-decoration: none;
 52 |     padding: 0 30px;
 53 |     display: flex;
 54 |     height: 100%;
 55 |     align-items: center;
 56 | }
 57 | 
 58 | .menu__link:hover{
 59 |     background-color: #5e7094;
 60 | }
 61 | 
 62 | 
 63 | .menu__arrow{
 64 |     transform: var(--transform);
 65 |     transition: transform .3s;
 66 |     display: block;
 67 |     margin-left: 3px;
 68 | }
 69 | 
 70 | .menu__nesting{
 71 |     list-style: none;
 72 |     transition:clip-path .3s;
 73 |     clip-path: var(--clip);
 74 |     position: absolute;
 75 |     right: 0;
 76 |     bottom: 0;
 77 |     width: max-content;
 78 |     transform: translateY(100%);
 79 |     background-color: #000;
 80 | }
 81 | 
 82 | .menu__link--inside{
 83 |     padding: 30px 100px 30px 20px;
 84 | }
 85 | 
 86 | .menu__link--inside:hover{
 87 |     background-color: #798499;
 88 | }
 89 | 
 90 | .menu__hamburguer{
 91 |     height: 100%;
 92 |     display: flex;
 93 |     align-items: center;
 94 |     padding: 0 15px;
 95 |     cursor: pointer;
 96 |     display: none;
 97 | }
 98 | 
 99 | .menu__img{
100 |     display: block;
101 |     width: 36px;
102 | }
103 | 
104 | @media (max-width:800px){
105 |     .menu__hamburguer{
106 |         display: flex;
107 |     }
108 | 
109 |     .menu__item{
110 |         --clip:0;
111 |         overflow:hidden ;
112 |     }
113 | 
114 |     .menu__item--active{
115 |         --transform: rotate(0);
116 |         --background: #5e7094;
117 |     }
118 | 
119 |     .menu__item--show{
120 |         background-color: var(--background);
121 |     }
122 | 
123 | 
124 |     .menu__links{
125 |         position: fixed;
126 |         max-width: 400px;
127 |         width: 100%;
128 |         top: 70px;
129 |         bottom: 0;
130 |         right: 0;
131 |         background-color: #000;
132 |         overflow-y: auto;
133 |         display: grid;
134 |         grid-auto-rows: max-content;
135 |         transform: translateX(100%);
136 |     }
137 | 
138 |     .menu__links--show{
139 |         transform: unset;
140 |         width: 100%;
141 |     }
142 | 
143 |     .menu__link{
144 |         padding: 25px 0;
145 |         padding-left: 30px;
146 |         height: auto;
147 |     }
148 | 
149 |     .menu__arrow{
150 |         margin-left: auto;
151 |         margin-right: 20px;
152 |     }
153 | 
154 |     .menu__nesting{
155 |         display: grid;
156 |         position: unset;
157 |         width: 100%;
158 |         transform: translateY(0);
159 |         height: 0;
160 |         transition: height .3s;
161 |     }
162 | 
163 |     .menu__link--inside{
164 |         width: 90%;
165 |         margin-left: auto;
166 |         border-left: 1px solid #798499;
167 |     }
168 | }


--------------------------------------------------------------------------------
/Menu desplegable/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Menu desplegable</title>
 8 |     <link rel="stylesheet" href="css/estilos.css">
 9 | </head>
10 | <body>
11 |     <nav class="menu">
12 |         <section class="menu__container">
13 |             <h1 class="menu__logo">Jordan Alex.</h1>
14 | 
15 |             <ul class="menu__links">
16 |                 <li class="menu__item">
17 |                     <a href="#" class="menu__link">Home</a>
18 |                 </li>
19 |     
20 |                 <li class="menu__item menu__item--show">
21 |                     <a href="#" class="menu__link">About <img src="assets/arrow.svg" class="menu__arrow"></a>
22 |     
23 |                     <ul class="menu__nesting">
24 |                         <li class="menu__inside">
25 |                             <a href="#" class="menu__link menu__link--inside">About 1</a>
26 |                         </li>
27 |                         <li class="menu__inside">
28 |                             <a href="#" class="menu__link menu__link--inside">About 2</a>
29 |                         </li>
30 |                         <li class="menu__inside">
31 |                             <a href="#" class="menu__link menu__link--inside">About 3</a>
32 |                         </li>
33 |                     </ul>
34 |                 </li>
35 |     
36 |                 <li class="menu__item  menu__item--show">
37 |                     <a href="#" class="menu__link">Projects  <img src="assets/arrow.svg" class="menu__arrow"></a>
38 |     
39 |                     <ul class="menu__nesting">
40 |                         <li class="menu__inside">
41 |                             <a href="#" class="menu__link menu__link--inside">Projects 1</a>
42 |                         </li>
43 |                         <li class="menu__inside">
44 |                             <a href="#" class="menu__link menu__link--inside">Projects 2</a>
45 |                         </li>
46 |                         <li class="menu__inside">
47 |                             <a href="#" class="menu__link menu__link--inside">Projects 3</a>
48 |                         </li>
49 |                     </ul>
50 |                 </li>
51 |     
52 |                 <li class="menu__item">
53 |                     <a href="#" class="menu__link">Contact</a>
54 |                 </li>
55 |     
56 |             </ul>
57 | 
58 |             <div class="menu__hamburguer">
59 |                 <img src="assets/menu.svg" class="menu__img">
60 |             </div>
61 |         </section>
62 | 
63 |       
64 |     </nav>
65 | 
66 |     <script src="js/app.js"></script>
67 | </body>
68 | </html>


--------------------------------------------------------------------------------
/Menu desplegable/js/app.js:
--------------------------------------------------------------------------------
 1 | (function(){
 2 |     const listElements = document.querySelectorAll('.menu__item--show');
 3 |     const list = document.querySelector('.menu__links');
 4 |     const menu = document.querySelector('.menu__hamburguer');
 5 | 
 6 |     const addClick = ()=>{
 7 |         listElements.forEach(element =>{
 8 |             element.addEventListener('click', ()=>{
 9 | 
10 |                 
11 |                 let subMenu = element.children[1];
12 |                 let height = 0;
13 |                 element.classList.toggle('menu__item--active');
14 | 
15 | 
16 |                 if(subMenu.clientHeight === 0){
17 |                     height = subMenu.scrollHeight;
18 |                 }
19 | 
20 |                 subMenu.style.height = `${height}px`;
21 | 
22 |             });
23 |         });
24 |     }
25 | 
26 |     const deleteStyleHeight = ()=>{
27 |         listElements.forEach(element=>{
28 | 
29 |             if(element.children[1].getAttribute('style')){
30 |                 element.children[1].removeAttribute('style');
31 |                 element.classList.remove('menu__item--active');
32 |             }
33 | 
34 |         });
35 |     }
36 | 
37 | 
38 |     window.addEventListener('resize', ()=>{
39 |         if(window.innerWidth > 800){
40 |             deleteStyleHeight();
41 |             if(list.classList.contains('menu__links--show'))
42 |                 list.classList.remove('menu__links--show');
43 | 
44 |         }else{
45 |             addClick();
46 |         }
47 |     });
48 | 
49 |     if(window.innerWidth <= 800){
50 |         addClick();
51 |     }
52 | 
53 |     menu.addEventListener('click', ()=> list.classList.toggle('menu__links--show'));
54 | 
55 | 
56 | 
57 | })();
58 | 
59 | 


--------------------------------------------------------------------------------
/Modal/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "liveServer.settings.port": 5501
3 | }


--------------------------------------------------------------------------------
/Modal/estilos.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@300;400;500;700&display=swap');
  2 | 
  3 | *{
  4 |     margin: 0;
  5 |     padding: 0;
  6 |     box-sizing: border-box;
  7 | }
  8 | 
  9 | body{
 10 |     font-family: 'Urbanist', sans-serif;
 11 | }
 12 | 
 13 | .container{
 14 |     width: 90%;
 15 |     max-width: 1200px;
 16 |     margin: 0 auto;
 17 |     overflow: hidden;
 18 | }
 19 | 
 20 | .hero{
 21 |     background-image: linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%);
 22 |     color: #fff;
 23 |     display: grid;
 24 |     grid-template-rows:max-content 1fr;
 25 |     grid-template-areas: 
 26 |     "nav"
 27 |     "content";
 28 |     min-height: 100vh;
 29 | }
 30 | 
 31 | .nav{
 32 |     grid-area: nav;
 33 |     display: grid;
 34 |     justify-content: space-between;
 35 |     grid-auto-flow: column;
 36 |     gap: 1em;
 37 |     align-items: center;
 38 |     height: 90px;
 39 | }
 40 | 
 41 | .nav__list{
 42 |     list-style: none;
 43 |     display: grid;
 44 |     grid-auto-flow: column;
 45 |     gap: 1em;
 46 | }
 47 | 
 48 | .nav__link{
 49 |     color:#fff;
 50 |     text-decoration: none;
 51 | }
 52 | 
 53 | .nav__logo{
 54 |     font-size: 1.8rem;
 55 |     font-weight: 300;
 56 | }
 57 | 
 58 | .nav__menu{
 59 |     display: none;
 60 | }
 61 | 
 62 | .nav__icon{
 63 |     width: 30px;
 64 | }
 65 | 
 66 | /* Hero main */
 67 | 
 68 | .hero__main{
 69 |     grid-area: content;
 70 |     display: grid;
 71 |     gap: 2em;
 72 |     /* grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); */
 73 |     grid-template-columns: 1fr 1fr;
 74 |     padding-bottom: 180px; 
 75 |     align-items: center;
 76 | }
 77 | 
 78 | .hero__waves{
 79 |     grid-area: content;
 80 |     align-self: end;
 81 | }
 82 | 
 83 | .hero__title{
 84 |     font-size: 2.6rem;
 85 |     letter-spacing: 2px;
 86 | }
 87 | 
 88 | .hero__subtitle{
 89 |     margin-top:1rem;
 90 |     margin-bottom: 1.5rem;
 91 |     font-size: 1.5rem;
 92 |     font-weight: 300;
 93 | }
 94 | 
 95 | .hero__cta{
 96 |     text-decoration: none;
 97 |     color: #fff;
 98 |     padding: 15px 60px;
 99 |     border: 1px solid;
100 |     border-radius: 6px;
101 |     display: inline-block;
102 |     font-weight: 500;
103 |     transition: background-color .3s;
104 | }
105 | 
106 | .hero__cta:hover{
107 |     background-color: #fff;
108 |     color: #1e3c72;
109 | }
110 | 
111 | .hero__img{
112 |     width: 100%;
113 | }
114 | 
115 | 
116 | .modal{
117 |     position: fixed;
118 |     top: 0;
119 |     left: 0;
120 |     background-color: #111111bd;
121 |     width: 100%;
122 |     height: 100%;
123 |     display: flex;
124 |     opacity: 0;
125 |     pointer-events: none;
126 |     transition: opacity .6s .9s;
127 |     --transform: translateY(-100vh);
128 |     --transition: transform .8s;
129 | }
130 | 
131 | .modal--show{
132 |     opacity: 1;
133 |     pointer-events: unset;
134 |     transition: opacity .6s;
135 |     --transform: translateY(0);
136 |     --transition: transform .8s .8s;
137 | }
138 | 
139 | 
140 | .modal__container{
141 |     margin: auto;
142 |     width: 90%;
143 |     max-height: 90%;
144 |     max-width: 600px;
145 |     background-color: #fff;
146 |     border-radius: 6px;
147 |     padding: 3em 2.5em;
148 |     text-align: center;
149 |     display: grid;
150 |     place-items: center;
151 |     grid-auto-columns: 100%;
152 |     gap: 1em;
153 |     position: relative;
154 |     transform: var(--transform);
155 |     transition: var(--transition);
156 | }
157 | 
158 | .modal__title{
159 |     font-size: 2.5rem;
160 | }
161 | 
162 | .modal__paragraph{
163 |     margin-bottom: 10px;
164 | }
165 | 
166 | .modal__img{
167 |     width: 90%;
168 |     max-width: 300px;
169 |     display: block;
170 | }
171 | 
172 | .modal__close{
173 |     text-decoration: none;
174 |     color: #fff;
175 |     padding: 15px 50px;
176 |     border: 1px solid;
177 |     border-radius: 6px;
178 |     display: inline-block;
179 |     font-weight: 500;
180 | 
181 |     background-color: #F26250;
182 |     transition: background-color .3s;
183 | }
184 | 
185 | .modal__close:hover{
186 |     background-color: #fff;
187 |     color: #F26250;
188 | }
189 | 
190 | 
191 | 
192 | @media (max-width:800px) {
193 |     .nav__list{
194 |         display: none;
195 |     }
196 | 
197 |     .nav__menu{
198 |         display: block;
199 |     }
200 | 
201 |     .hero__main{
202 |         grid-template-columns: 1fr;
203 |         grid-template-rows:max-content max-content ;
204 |         text-align: center;
205 |     }
206 | 
207 |     .hero__picture{
208 |         grid-row: 1/2;
209 |     }
210 | 
211 |     .hero__img{
212 |         max-width: 500px;
213 |         display: block;
214 |         margin: 0 auto;
215 |     }
216 | 
217 | 
218 |     
219 |     .modal__container{
220 |        
221 |         padding: 2em 1.5em;
222 |         
223 |     }
224 |     
225 |     .modal__title{
226 |         font-size: 2rem;
227 |     }
228 |     
229 |   
230 | }


--------------------------------------------------------------------------------
/Modal/images/close.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: #e92950;transform: ;msFilter:;"><path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm4.207 12.793-1.414 1.414L12 13.414l-2.793 2.793-1.414-1.414L10.586 12 7.793 9.207l1.414-1.414L12 10.586l2.793-2.793 1.414 1.414L13.414 12l2.793 2.793z"></path></svg>


--------------------------------------------------------------------------------
/Modal/images/illustration.svg:
--------------------------------------------------------------------------------
1 | <svg id="bb8a55da-36b7-4070-be8a-1e4e62c87f0e" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="916.77499" height="612.05507" viewBox="0 0 916.77499 612.05507"><polygon points="893.363 591.2 884.309 595.057 865.118 561.972 878.481 556.278 893.363 591.2" fill="#ffb6b6"/><polygon points="818.545 599.767 808.704 599.766 804.022 561.806 818.547 561.806 818.545 599.767" fill="#ffb6b6"/><path d="M960.504,754.0061,930.24,754.005v-.38273a11.78023,11.78023,0,0,1,11.77957-11.77939h.00073l5.52809-4.1939,10.31421,4.19454,2.64184.00009Z" transform="translate(-141.6125 -143.97246)" fill="#2f2e41"/><path d="M1040.4808,741.744l-27.84129,11.86459-.15006-.3521a11.7802,11.7802,0,0,1,6.21806-15.45469l.00067-.00029,3.44118-6.02552,11.133-.18521,2.43036-1.03571Z" transform="translate(-141.6125 -143.97246)" fill="#2f2e41"/><path d="M950.5036,519.07544l-14.95707,91.07525,4.07054,13.57179-5.34138,9.612,7.84393,84.41455-3.184,7.00992,8.89614,5.4865h18.10237l.96071-76.42116,4.47161-11.22028V636.4203l9.10287-46.59984,1.676,53.30441,2.64787,11.23785-2.22418,8.00141,2.90619,5.60568,24.906,53.47959h20.29867l-1.56994-12.09425h0c3.63681-1.8413-5.46025-7.22284-6.3344-11.2044l2.98891-6.72505-2.98891-12.70289-2.74056-24.82175,2.89017-52.39458-1.35994-70.55578c-6.8153-9.13739-14.37585-16.18448-23.74572-18.158Z" transform="translate(-141.6125 -143.97246)" fill="#2f2e41"/><circle id="e3f68381-4551-4dde-a951-c654c55667ae" data-name="ab6171fa-7d69-4734-b81c-8dff60f9761b" cx="845.31562" cy="234.64914" r="20.51334" fill="#ffb6b6"/><path d="M902.352,540.59378a8.07233,8.07233,0,0,1,7.54338-9.81388l8.26322-27.47058,9.55326,11.44352-9.31155,24.3321a8.11612,8.11612,0,0,1-16.04831,1.50884Z" transform="translate(-141.6125 -143.97246)" fill="#ffb6b6"/><path id="eb9b57ee-86ab-410d-b03f-f9f5ae1c3330" data-name="f348f81f-b961-4ae4-bc6b-758f6acfb12a" d="M955.95617,427.68036l-3.70326-6.76608-4.77238,1.59305s-5.26816,3.39945-12.64455,16.2327c-3.41169,5.93558-10.78677,43.9972-10.78677,43.9972L906.81028,528.384l17.57476,2.97122,14.66417-37.618,17-36Z" transform="translate(-141.6125 -143.97246)" fill="#ffffff"/><path d="M986.16786,518.788c14.44336,0,29.01612,2.84375,34.98389,13.00976-.15576-2.21045-.54687-6.04345-.95312-9.56006l-1.49317-9.44873,1.5127-8.66357,2-2-3.58155-3.58154,2.44336-18.08448,8.06495-42.60254A15.471,15.471,0,0,0,1020.62,421.0341l-7.74853-3.72607-12.561-11.65088-22.72168-.16992-7.41259,9.6372-19.51368,6.62793,3.27539,67.76074-2.147,5.00977c.48145.44189,1.49658,1.38623,2.04639,1.99463.77783.86035-.21289,5.29053-.87256,7.85449l-.90723,6.83057,2.855,2.03955-3.71142,4.38428-.7417,5.56494C954.14443,522.31974,970.07607,518.788,986.16786,518.788Z" transform="translate(-141.6125 -143.97246)" fill="#ffffff"/><path d="M992.17585,398.1305q.13144-.28942.26217-.58085c-.03359.00108-.06683.00591-.10042.00679Z" transform="translate(-141.6125 -143.97246)" fill="#2f2e41"/><path d="M1008.01193,359.0411a5.70955,5.70955,0,0,0-3.57661-1.54637c-1.32646.04275-2.67161,1.2408-2.39679,2.53922A21.08,21.08,0,0,0,976.67,350.52143c-3.29686,1.16315-6.52994,3.49015-7.28727,6.90315a6.21715,6.21715,0,0,1-.78319,2.54824,2.909,2.909,0,0,1-3.096.78436l-.03254-.00959a.96922.96922,0,0,0-1.17112,1.3682l.93283,1.73974a7.47535,7.47535,0,0,1-3.56145-.07574.9684.9684,0,0,0-1.02834,1.507,16.8794,16.8794,0,0,0,13.45889,6.91806c3.72717-.02273,7.49273-1.30728,11.12011-.45017a9.65935,9.65935,0,0,1,6.4968,13.55975c1.11435-1.21886,3.2685-.93029,4.4084.26478a6.04618,6.04618,0,0,1,1.32008,4.62629,21.46516,21.46516,0,0,1-2.20369,7.20511,21.53985,21.53985,0,0,0,12.76843-38.3695Z" transform="translate(-141.6125 -143.97246)" fill="#2f2e41"/><circle cx="203.43671" cy="87.48107" r="51" fill="#ffffff"/><path d="M201.70872,383.16319c-25.59007-56.60345-24.64653-128.351,15.06833-176.11541A286.20737,286.20737,0,0,0,319.21576,374.7344c20.44681,16.14488,44.86966,31.97288,50.45524,57.41965,3.4758,15.83352-1.45076,32.58093-9.96763,46.3732-8.51764,13.79273-20.39,25.13853-32.12733,36.32l-1.31689,3.82648C275.18636,483.31318,227.29878,439.76664,201.70872,383.16319Z" transform="translate(-141.6125 -143.97246)" fill="#f2f2f2"/><path d="M217.88249,207.73841c-9.1399,50.04833-2.35,103.34069,19.86564,149.19436,4.803,9.91346,10.53795,19.55186,18.21628,27.525,7.68176,7.97672,16.86644,12.99808,27.43221,16.083,9.65924,2.82022,19.86619,4.58642,28.67168,9.70555,9.28145,5.39582,15.04145,14.44962,17.28531,24.83225,2.74543,12.70342.76259,25.63573-1.616,38.21506-2.64093,13.96694-5.60532,28.43238-1.77837,42.47286.46369,1.7012-2.20311,2.32122-2.6661.62259-6.65825-24.428,6.2871-48.52061,4.47761-73.08032-.84434-11.46-5.14741-22.735-14.97357-29.37486-8.59254-5.80626-19.11648-7.63659-28.92135-10.40759-10.29529-2.9096-19.54116-7.354-27.40871-14.7263-8.04808-7.54142-14.172-16.97593-19.20732-26.72311-11.35593-21.98225-18.84186-46.20149-22.80245-70.586a248.96837,248.96837,0,0,1,.80878-84.56049c.31573-1.72884,2.93-.9095,2.61633.808Z" transform="translate(-141.6125 -143.97246)" fill="#fff"/><path d="M229.74072,342.40916A36.70233,36.70233,0,0,1,185.858,324.161c-.79628-1.57129,1.608-2.88248,2.40535-1.3091a33.98555,33.98555,0,0,0,40.85481,16.89115c1.67508-.54564,2.28808,2.12358.62258,2.6661Z" transform="translate(-141.6125 -143.97246)" fill="#fff"/><path d="M278.31066,399.75584a70.74075,70.74075,0,0,0,5.72232-51.23525c-.45765-1.70278,2.209-2.32331,2.6661-.62258a73.58106,73.58106,0,0,1-6.063,53.30281c-.82619,1.55987-3.14715.10642-2.32545-1.445Z" transform="translate(-141.6125 -143.97246)" fill="#fff"/><path d="M213.42259,264.35351a20.77528,20.77528,0,0,0,16.28079-11.11532c.806-1.56958,3.12622-.11438,2.32545,1.445a23.2804,23.2804,0,0,1-17.98365,12.33644,1.4149,1.4149,0,0,1-1.64434-1.02176,1.37583,1.37583,0,0,1,1.02175-1.64434Z" transform="translate(-141.6125 -143.97246)" fill="#fff"/><path d="M427.09946,207.60221c-.47542.99438-.95083,1.98876-1.41515,3.00347a273.59767,273.59767,0,0,0-15.61787,41.543c-.33236,1.09655-.65266,2.21285-.95282,3.31667a288.43464,288.43464,0,0,0-8.76178,105.83083,280.1062,280.1062,0,0,0,7.59847,41.87546c4.96053,18.98294,11.8494,39.17059,10.29493,58.12566a48.05372,48.05372,0,0,1-.78587,5.89521l-86.42993,52.79093c-.25663.0214-.50224.063-.75983.085l-3.3545,2.26557c-.23473-.696-.46321-1.42288-.69794-2.11886-.13783-.40316-.25641-.81808-.39425-1.22123-.08579-.2725-.1707-.54571-.26369-.7867-.0289-.0906-.05683-.18178-.07374-.25276-.093-.241-.15379-.47472-.23472-.696q-1.9326-6.0894-3.78631-12.22715c-.01206-.01974-.01206-.01974-.00486-.05124-9.3367-31.20179-16.15057-63.45718-17.85208-95.72136-.05087-.97073-.11476-1.96061-.12615-2.95545a267.28458,267.28458,0,0,1,1.50657-43.592,236.2913,236.2913,0,0,1,4.04637-23.56365,196.49219,196.49219,0,0,1,22.76342-57.06294c21.00231-35.30114,53.06076-63.49243,92.29634-73.72975C425.098,208.09376,426.0835,207.84364,427.09946,207.60221Z" transform="translate(-141.6125 -143.97246)" fill="#f2f2f2"/><path d="M427.57517,208.81786c-37.43025,34.45793-64.09457,81.09689-73.96371,131.08383-2.13368,10.80705-3.3576,21.95564-2.02727,32.94464,1.33092,10.99391,5.64116,20.533,12.22,29.35744,6.01441,8.06732,13.10071,15.62282,17.04933,25.01167,4.16206,9.89634,3.31008,20.59321-1.14937,30.23411-5.45627,11.79591-14.82561,20.92783-24.29838,29.53966-10.5177,9.5618-21.59379,19.32688-26.99152,32.84151-.654,1.63748-3.15659.52693-2.50357-1.10808,9.39112-23.51314,34.23265-34.95573,47.57452-55.65472,6.22556-9.65853,9.57812-21.25173,5.73014-32.4693-3.3649-9.80928-10.66569-17.60683-16.826-25.72253-6.46843-8.52162-11.17488-17.63691-13.01807-28.26007-1.88548-10.86689-1.09485-22.08682.75319-32.901,4.16776-24.38865,12.77232-48.23341,24.29118-70.08764a248.96829,248.96829,0,0,1,51.557-67.02988c1.293-1.19029,2.887,1.03788,1.60249,2.22039Z" transform="translate(-141.6125 -143.97246)" fill="#fff"/><path d="M355.96222,323.48439A36.70233,36.70233,0,0,1,331.911,282.49382c.31024-1.734,3.01936-1.33337,2.70871.40294a33.98555,33.98555,0,0,0,22.45063,38.08406c1.666.57285.54836,3.07314-1.10807,2.50357Z" transform="translate(-141.6125 -143.97246)" fill="#fff"/><path d="M360.21593,398.515A70.74074,70.74074,0,0,0,395.632,361.05171c.65978-1.63511,3.16256-.52506,2.50357,1.10808a73.58106,73.58106,0,0,1-36.93291,38.909c-1.59882.74805-2.5769-1.80983-.98677-2.55382Z" transform="translate(-141.6125 -143.97246)" fill="#fff"/><path d="M389.928,251.33668a20.77527,20.77527,0,0,0,19.69148.92719c1.58855-.76794,2.565,1.79088.98677,2.55382a23.28041,23.28041,0,0,1-21.78633-.97744,1.41491,1.41491,0,0,1-.69775-1.80582,1.37583,1.37583,0,0,1,1.80583-.69775Z" transform="translate(-141.6125 -143.97246)" fill="#fff"/><path d="M631.70872,321.16319c-25.59007-56.60345-24.64653-128.351,15.06833-176.11541A286.20737,286.20737,0,0,0,749.21576,312.7344c20.44681,16.14488,44.86966,31.97288,50.45524,57.41965,3.4758,15.83352-1.45076,32.58093-9.96763,46.3732-8.51764,13.79273-20.39,25.13853-32.12733,36.32l-1.31689,3.82648C705.18636,421.31318,657.29878,377.76664,631.70872,321.16319Z" transform="translate(-141.6125 -143.97246)" fill="#f2f2f2"/><path d="M647.88249,145.73841c-9.1399,50.04833-2.35,103.34069,19.86564,149.19436,4.803,9.91346,10.538,19.55186,18.21628,27.525,7.68176,7.97672,16.86644,12.99808,27.43221,16.083,9.65924,2.82022,19.86619,4.58642,28.67168,9.70555,9.28145,5.39582,15.04145,14.44962,17.28531,24.83225,2.74543,12.70342.76259,25.63573-1.616,38.21506-2.64093,13.96694-5.60532,28.43238-1.77837,42.47286.46369,1.7012-2.20311,2.32122-2.6661.62259-6.65825-24.428,6.2871-48.52061,4.47761-73.08032-.84434-11.46-5.14741-22.735-14.97357-29.37486-8.59254-5.80626-19.11648-7.63659-28.92135-10.40759-10.29529-2.9096-19.54116-7.354-27.40871-14.7263-8.04808-7.54142-14.172-16.97593-19.20732-26.72311-11.35593-21.98225-18.84186-46.20149-22.80245-70.586a248.96837,248.96837,0,0,1,.80878-84.56049c.31573-1.72884,2.93-.9095,2.61633.808Z" transform="translate(-141.6125 -143.97246)" fill="#fff"/><path d="M659.74072,280.40916A36.70233,36.70233,0,0,1,615.858,262.161c-.79628-1.57129,1.608-2.88248,2.40535-1.3091a33.98555,33.98555,0,0,0,40.85481,16.89115c1.67508-.54564,2.28808,2.12358.62258,2.6661Z" transform="translate(-141.6125 -143.97246)" fill="#fff"/><path d="M708.31066,337.75584a70.74075,70.74075,0,0,0,5.72232-51.23525c-.45765-1.70278,2.209-2.32331,2.6661-.62258a73.58106,73.58106,0,0,1-6.063,53.30281c-.82619,1.55987-3.14715.10642-2.32545-1.445Z" transform="translate(-141.6125 -143.97246)" fill="#fff"/><path d="M643.42259,202.35351a20.77528,20.77528,0,0,0,16.28079-11.11532c.806-1.56958,3.12622-.11438,2.32545,1.445a23.2804,23.2804,0,0,1-17.98365,12.33644,1.4149,1.4149,0,0,1-1.64434-1.02176,1.37583,1.37583,0,0,1,1.02175-1.64434Z" transform="translate(-141.6125 -143.97246)" fill="#fff"/><path d="M857.09946,145.60221c-.47542.99438-.95083,1.98876-1.41515,3.00347a273.59767,273.59767,0,0,0-15.61787,41.543c-.33236,1.09655-.65266,2.21285-.95282,3.31667a288.43464,288.43464,0,0,0-8.76178,105.83083,280.1062,280.1062,0,0,0,7.59847,41.87546c4.96053,18.98294,11.8494,39.17059,10.29493,58.12566a48.05372,48.05372,0,0,1-.78587,5.89521l-86.42993,52.79093c-.25663.0214-.50224.063-.75983.085l-3.3545,2.26557c-.23473-.696-.46321-1.42288-.69794-2.11886-.13783-.40316-.25641-.81808-.39425-1.22123-.08579-.2725-.1707-.54571-.26369-.7867-.0289-.0906-.05683-.18178-.07374-.25276-.093-.241-.15379-.47472-.23472-.696q-1.9326-6.0894-3.78631-12.22715c-.01206-.01974-.01206-.01974-.00486-.05124-9.3367-31.20179-16.15057-63.45718-17.85208-95.72136-.05087-.97073-.11476-1.96061-.12615-2.95545a267.28458,267.28458,0,0,1,1.50657-43.592,236.2913,236.2913,0,0,1,4.04637-23.56365,196.49219,196.49219,0,0,1,22.76342-57.06294c21.00231-35.30114,53.06076-63.49243,92.29634-73.72975C855.098,146.09376,856.0835,145.84364,857.09946,145.60221Z" transform="translate(-141.6125 -143.97246)" fill="#f0f0f0"/><path d="M857.57517,146.81786c-37.43025,34.45793-64.09457,81.09689-73.96371,131.08383-2.13368,10.80705-3.3576,21.95564-2.02727,32.94464,1.33092,10.99391,5.64116,20.533,12.22,29.35744,6.01441,8.06732,13.10071,15.62282,17.04933,25.01167,4.16206,9.89634,3.31008,20.59321-1.14937,30.23411-5.45627,11.79591-14.82561,20.92783-24.29838,29.53966-10.5177,9.5618-21.59379,19.32688-26.99152,32.84151-.654,1.63748-3.15659.52693-2.50357-1.10808,9.39112-23.51314,34.23265-34.95573,47.57452-55.65472,6.22556-9.65853,9.57812-21.25173,5.73014-32.4693-3.3649-9.80928-10.66569-17.60683-16.826-25.72253-6.46843-8.52162-11.17488-17.63691-13.01807-28.26007-1.88548-10.86689-1.09485-22.08682.75319-32.901,4.16776-24.38865,12.77232-48.23341,24.29118-70.08764a248.96829,248.96829,0,0,1,51.557-67.02988c1.293-1.19029,2.887,1.03788,1.60249,2.22039Z" transform="translate(-141.6125 -143.97246)" fill="#fff"/><path d="M785.96222,261.48439A36.70233,36.70233,0,0,1,761.911,220.49382c.31024-1.734,3.01936-1.33337,2.70871.40294a33.98555,33.98555,0,0,0,22.45063,38.08406c1.666.57285.54836,3.07314-1.10807,2.50357Z" transform="translate(-141.6125 -143.97246)" fill="#fff"/><path d="M790.21593,336.515A70.74074,70.74074,0,0,0,825.632,299.05171c.65978-1.63511,3.16256-.52506,2.50357,1.10808a73.58106,73.58106,0,0,1-36.93291,38.909c-1.59882.74805-2.5769-1.80983-.98677-2.55382Z" transform="translate(-141.6125 -143.97246)" fill="#fff"/><path d="M819.928,189.33668a20.77527,20.77527,0,0,0,19.69148.92719c1.58855-.76794,2.565,1.79088.98677,2.55382a23.28041,23.28041,0,0,1-21.78633-.97744,1.41491,1.41491,0,0,1-.69775-1.80582,1.37583,1.37583,0,0,1,1.80583-.69775Z" transform="translate(-141.6125 -143.97246)" fill="#fff"/><path d="M305.54921,740.95353l9.44673,7.31619,36.72906,6.37279L392.54921,653.1622s25-78.20867,95-62.20867l225-4s69.08338-7.08025,80.5,25.5c2.16244,6.17108,60.5,142.5,60.5,142.5l40.90158-5.77292-4.90158-116.22708-97.14567-225.5-168.85433-10.5433-174,12.0433Z" transform="translate(-141.6125 -143.97246)" fill="#3f3d56"/><circle cx="350.93671" cy="388.98107" r="65" fill="#2f2e41"/><circle cx="568.93671" cy="388.98107" r="65" fill="#2f2e41"/><path d="M416.54921,319.95353l26.7634-5.248s201.50432-28.752,328.87046,5.248l-9.63386,27-337-2Z" transform="translate(-141.6125 -143.97246)" fill="#e6e6e6"/><path d="M688.23818,459.45353H517.22939c-20.76367,0-38.709-14.37744-42.66992-34.18652l-18.71485-93.604a14.99081,14.99081,0,0,1,2.59033-11.82422,15.93792,15.93792,0,0,1,10.94874-6.43213c90.19238-11.19531,179.50195-11.21436,265.45019-.05811a15.69914,15.69914,0,0,1,10.79,6.35157,15.01285,15.01285,0,0,1,2.67139,11.67236l-17.27588,93.31689C727.29042,444.83293,709.29824,459.45353,688.23818,459.45353Z" transform="translate(-141.6125 -143.97246)" fill="#ffffff"/><path d="M340.4789,335.19279l.74463-13.395a12.9355,12.9355,0,0,1,6.14892-10.30615c10.79737-6.624,39.92334-21.208,77.09229-13.563a12.97676,12.97676,0,0,1,10.2124,10.84619l.99512,6.96973Z" transform="translate(-141.6125 -143.97246)" fill="#3f3d56"/><path d="M864.61953,335.19279l-95.19336-19.44824,1.59912-11.19727A6.69181,6.69181,0,0,1,776.036,298.978c42.86523-10.75733,75.67578,8.34619,84.71142,14.45752a6.76148,6.76148,0,0,1,2.95166,5.19726Z" transform="translate(-141.6125 -143.97246)" fill="#3f3d56"/><path d="M310.2538,749.68889a11.99528,11.99528,0,0,1-6.4917-1.82618c-25.48877-14.88379-41.37939-42.15918-47.19433-81.04589-4.80323-32.1211-2.79737-72.43848,5.96142-119.833C278.058,462.957,310.60488,378.96769,323.87734,346.75773a29.37562,29.37562,0,0,1,20.0708-17.28418c27.36181-6.73,75.12695-18.02,87.60107-18.02,17.09473,0,26.34424,16.09229,26.436,16.25489l.05127.13281,15.01269,65.10059v.93945c8.28223,28.02246,2.12842,48.26513-4.49707,60.313-7.19092,13.07714-16.4956,19.606-16.58838,19.67041-14.61084,11.123-38.415,46.95605-62.10547,93.50293-24.61865,48.37207-42.86865,96.10156-48.81787,127.67871-7.28173,38.64941-17.95605,50.48144-25.62841,53.60058A13.602,13.602,0,0,1,310.2538,749.68889Z" transform="translate(-141.6125 -143.97246)" fill="#e6e6e6"/><path d="M682.601,451.45353H521.02089a41.1678,41.1678,0,0,1-40.34472-33.2622l-17.68311-91.03614a15.01974,15.01974,0,0,1,12.81445-17.76855c85.22412-10.88818,169.61377-10.90674,250.8252-.05664a15.00551,15.00551,0,0,1,12.74121,17.543L723.05068,417.6298A41.06489,41.06489,0,0,1,682.601,451.45353Z" transform="translate(-141.6125 -143.97246)" fill="#e6e6e6"/><path d="M894.848,749.68986a13.60892,13.60892,0,0,1-5.16162-1.043c-7.67236-3.11914-18.34668-14.95117-25.62842-53.60058-5.94922-31.57715-24.19922-79.30664-48.81787-127.67871-23.69043-46.54688-47.49463-82.37989-62.12353-93.51612-.07471-.05127-9.3794-6.58008-16.57032-19.65722-6.62549-12.04786-12.77929-32.29053-4.49707-60.313l.0127-1.05176L747.078,327.77092l.03516-.0625c.09179-.1626,9.34131-16.25489,26.436-16.25489,12.47412,0,60.23926,11.29,87.60108,18.02a29.37993,29.37993,0,0,1,20.0708,17.28418h0c13.27246,32.21,45.81933,116.19922,61.34814,200.22608,8.75879,47.39453,10.76465,87.71191,5.96143,119.833-5.81494,38.88671-21.70557,66.1621-47.22949,81.06835A11.948,11.948,0,0,1,894.848,749.68986Z" transform="translate(-141.6125 -143.97246)" fill="#e6e6e6"/><circle cx="350.93671" cy="377.98107" r="39" fill="#3f3d56"/><circle cx="350.93671" cy="377.98107" r="26" fill="#2f2e41"/><circle cx="568.93671" cy="377.98107" r="39" fill="#3f3d56"/><circle cx="568.93671" cy="377.98107" r="26" fill="#2f2e41"/><circle cx="435.93671" cy="327.98107" r="3" fill="#2f2e41"/><circle cx="448.93671" cy="327.98107" r="3" fill="#2f2e41"/><circle cx="442.93671" cy="338.98107" r="3" fill="#2f2e41"/><circle cx="454.93671" cy="338.98107" r="3" fill="#2f2e41"/><circle cx="466.93671" cy="338.98107" r="3" fill="#2f2e41"/><circle cx="478.93671" cy="338.98107" r="3" fill="#2f2e41"/><circle cx="461.93671" cy="327.98107" r="3" fill="#2f2e41"/><circle cx="474.93671" cy="327.98107" r="3" fill="#2f2e41"/><circle cx="487.93671" cy="327.98107" r="3" fill="#2f2e41"/><path d="M615.54921,564.45353h-26a4.5,4.5,0,1,1,0-9h26a4.5,4.5,0,0,1,0,9Z" transform="translate(-141.6125 -143.97246)" fill="#2f2e41"/><path d="M443.393,368.83976a7.46431,7.46431,0,0,1-7.24414-5.74951l-3.9873-16.92822a7.45695,7.45695,0,0,1,14.5166-3.41943l3.9873,16.92822a7.46695,7.46695,0,0,1-7.27246,9.16894Z" transform="translate(-141.6125 -143.97246)" fill="#3f3d56"/><path d="M762.70546,367.83976a7.467,7.467,0,0,1-7.27246-9.16894l3.98731-16.92822a7.45695,7.45695,0,0,1,14.5166,3.41943l-3.98731,16.92822a7.46431,7.46431,0,0,1-7.24414,5.74951Z" transform="translate(-141.6125 -143.97246)" fill="#3f3d56"/><path d="M388.37783,418.80705a11.94249,11.94249,0,0,1-6.85791-2.16357l-8.36963-5.85889a11.96821,11.96821,0,0,1-5.10108-9.79736V383.04387a13.60583,13.60583,0,0,1,13.59033-13.59034h12.81934a13.60583,13.60583,0,0,1,13.59033,13.59034v18.11962a12.00227,12.00227,0,0,1-4.86523,9.627l-7.7124,5.6831A11.94157,11.94157,0,0,1,388.37783,418.80705Z" transform="translate(-141.6125 -143.97246)" fill="#3f3d56"/><path d="M394.45888,484.45353H381.63954a13.60583,13.60583,0,0,1-13.59033-13.59033V452.91984a11.96821,11.96821,0,0,1,5.10108-9.79736l8.36963-5.85889a11.95,11.95,0,0,1,13.95166.16992l7.7124,5.68311a12.00226,12.00226,0,0,1,4.86523,9.62695V470.8632A13.60583,13.60583,0,0,1,394.45888,484.45353Z" transform="translate(-141.6125 -143.97246)" fill="#3f3d56"/><path d="M434.45888,446.95353H416.51552a11.9682,11.9682,0,0,1-9.79736-5.10107l-5.85889-8.36963a11.94918,11.94918,0,0,1,.16992-13.95166l5.68311-7.7124a12.00224,12.00224,0,0,1,9.62695-4.86524h18.11963a13.60583,13.60583,0,0,1,13.59033,13.59034V433.3632A13.60583,13.60583,0,0,1,434.45888,446.95353Z" transform="translate(-141.6125 -143.97246)" fill="#3f3d56"/><path d="M358.5829,446.95353H340.63954a13.60583,13.60583,0,0,1-13.59033-13.59033V420.54387a13.60583,13.60583,0,0,1,13.59033-13.59034h18.11963a12.00226,12.00226,0,0,1,9.627,4.86524l5.6831,7.7124a11.94918,11.94918,0,0,1,.16992,13.95166l-5.85888,8.36963A11.9682,11.9682,0,0,1,358.5829,446.95353Z" transform="translate(-141.6125 -143.97246)" fill="#3f3d56"/><circle cx="675.93671" cy="231.98107" r="23" fill="#3f3d56"/><circle cx="726.93671" cy="284.98107" r="23" fill="#3f3d56"/><circle cx="675.93671" cy="334.98107" r="23" fill="#3f3d56"/><circle cx="624.93671" cy="283.98107" r="23" fill="#3f3d56"/><path d="M868.54921,443.95353a15,15,0,1,1,15-15A15.017,15.017,0,0,1,868.54921,443.95353Zm0-28a13,13,0,1,0,13,13A13.01443,13.01443,0,0,0,868.54921,415.95353Z" transform="translate(-141.6125 -143.97246)" fill="#e6e6e6"/><path d="M833.62148,387.1132l-30.14453-.42627,15.44189-25.89306Zm-26.65235-2.37744,23.2168.32861-11.32373-20.2705Z" transform="translate(-141.6125 -143.97246)" fill="#e6e6e6"/><path d="M778.54921,439.95353h-24v-24h24Zm-22-2h20v-20h-20Z" transform="translate(-141.6125 -143.97246)" fill="#e6e6e6"/><polygon points="688.348 345.307 677.353 334.333 687.049 324.655 685.635 323.239 675.937 332.919 666.238 323.239 664.825 324.655 674.521 334.333 663.526 345.307 664.939 346.723 675.937 335.746 686.935 346.723 688.348 345.307" fill="#e6e6e6"/><path d="M388.34449,217.81212a15,15,0,1,1,15-15A15.017,15.017,0,0,1,388.34449,217.81212Zm0-28a13,13,0,1,0,13,13A13.01443,13.01443,0,0,0,388.34449,189.81212Z" transform="translate(-141.6125 -143.97246)" fill="#e6e6e6"/><path d="M354.41675,192.97179l-30.14453-.42627,15.4419-25.89306Zm-26.65234-2.37744,23.2168.32861-11.32373-20.2705Z" transform="translate(-141.6125 -143.97246)" fill="#e6e6e6"/><path d="M310.04921,229.45353h-24v-24h24Zm-22-2h20v-20h-20Z" transform="translate(-141.6125 -143.97246)" fill="#e6e6e6"/><polygon points="190.143 130.165 179.148 119.191 188.844 109.514 187.431 108.098 177.732 117.778 168.033 108.098 166.62 109.514 176.316 119.191 165.321 130.165 166.734 131.581 177.732 120.604 188.73 131.581 190.143 130.165" fill="#e6e6e6"/><polygon points="867.437 344.481 828.622 373.694 872.437 354.481 867.437 344.481" opacity="0.2"/><polygon points="149.437 380.481 100.437 382.481 94.437 349.481 136.437 336.481 149.437 380.481" fill="#a0616a"/><path d="M273.03419,443.5775l-10.92912-11.12829,13.40058-20.48994,22.93595-38.17886a8.92578,8.92578,0,1,1,10.90394,4.78047l-18.93168,40.75925Z" transform="translate(-141.6125 -143.97246)" fill="#a0616a"/><path d="M260.92741,468.9824a12.31685,12.31685,0,0,1-12.152,5.50228,11.51513,11.51513,0,0,1-9.67515-8.11036,10.97913,10.97913,0,0,1,1.20968-9.16639c7.31128-12.32521,20.79575-28.60229,20.93094-28.76489l.21472-.25885,22.74329,4.92744Z" transform="translate(-141.6125 -143.97246)" fill="#ffffff"/><polygon points="137.758 597.772 151.347 597.771 157.811 545.356 137.755 545.357 137.758 597.772" fill="#a0616a"/><path d="M275.90371,737.30783l26.76189-.00109h.00108a17.05569,17.05569,0,0,1,17.05477,17.05451v.55421l-43.81693.00162Z" transform="translate(-141.6125 -143.97246)" fill="#2f2e41"/><polygon points="31.948 591.89 45.384 593.92 59.612 543.061 41.998 540.063 31.948 591.89" fill="#a0616a"/><path d="M170.79627,730.95705l26.46134,3.99952.00107.00017a17.0557,17.0557,0,0,1,14.31369,19.41236l-.08285.548-43.32483-6.54852Z" transform="translate(-141.6125 -143.97246)" fill="#2f2e41"/><path d="M240.04921,516.45353l47-8L301.5917,538.4296l.55422,195.63724-25.79512-.16146-10.78295-158.3435L196.84542,721.87415l-27.71066-3.32527L229.544,561.70656s-3.32527-27.71066,7.20478-41.566Z" transform="translate(-141.6125 -143.97246)" fill="#2f2e41"/><path d="M222.60086,457.39464a11.74351,11.74351,0,0,1,3.239-12.39511l6.67951-6.07145,18.831-3.17265,11.77432-2.14,18.9246,54.8381-45.96314,21.11725c-4.03376-.87091-5.645-3.0774-3.29791-7.46477Z" transform="translate(-141.6125 -143.97246)" fill="#ffffff"/><path d="M264.78366,475.89835l13.14833-8.39082,17.27483,17.34917L327.81556,515.194a8.92578,8.92578,0,1,1-6.93259,9.67925l-35.96162-26.95341Z" transform="translate(-141.6125 -143.97246)" fill="#a0616a"/><path d="M242.43229,458.7974a12.31545,12.31545,0,0,1-2.86915-13.0264,11.52135,11.52135,0,0,1,9.93625-7.78816,10.97935,10.97935,0,0,1,8.71782,3.07955c10.546,9.70244,23.68193,26.26284,23.81312,26.42841l.20858.26369-9.52538,21.23185Z" transform="translate(-141.6125 -143.97246)" fill="#ffffff"/><circle cx="101.4736" cy="264.44041" r="20.67092" fill="#a0616a"/><path d="M226.35063,437.861a79.19617,79.19617,0,0,1-9.58987-.58459l-.43626-.05315L212.99492,419.147a30.49642,30.49642,0,0,1,22.7895-35.16087,2.83362,2.83362,0,0,1,2.82194.87368l.7941-.27682a24.51831,24.51831,0,0,1,31.2245,15.07853l.19681.56474-5.2993,1.84781a11.76592,11.76592,0,0,0-6.212,17.16812l5.41815,9.02-.57686.28909A83.7489,83.7489,0,0,1,226.35063,437.861Z" transform="translate(-141.6125 -143.97246)" fill="#2f2e41"/><path d="M936.50927,524.36186a8.07235,8.07235,0,0,1,10.904-5.85811l18.8001-21.66724,4.02128,14.35437-18.46944,18.37488a8.11612,8.11612,0,0,1-15.256-5.2039Z" transform="translate(-141.6125 -143.97246)" fill="#ffb6b6"/><path id="fb39b7b9-f69c-40b6-9f40-8573a72b247d" data-name="f348f81f-b961-4ae4-bc6b-758f6acfb12a" d="M1020.40046,429.10263l7.702-.4165,1.15993,4.89571s-.11434,6.26871-7.13681,19.299-61.43373,71.045-61.43373,71.045l-11.78366-13.37332,29.12557-30.00031L995.672,449.10873Z" transform="translate(-141.6125 -143.97246)" fill="#ffffff"/><path id="b116d6b4-a736-490c-92f3-c8fac06531ff" data-name="Path 2960" d="M142.85951,756.02754h914.281a1.247,1.247,0,0,0,0-2.494h-914.281a1.247,1.247,0,1,0,0,2.494Z" transform="translate(-141.6125 -143.97246)" fill="#ccc"/></svg>


--------------------------------------------------------------------------------
/Modal/images/menu.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill:#fff;transform: ;msFilter:;"><path d="M4 6h16v2H4zm4 5h12v2H8zm5 5h7v2h-7z"></path></svg>


--------------------------------------------------------------------------------
/Modal/images/success.svg:
--------------------------------------------------------------------------------
1 | <svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 300" width="406" height="306" class="illustration styles_illustrationTablet__1DWOa"><defs><linearGradient id="linear-gradient" x1="136.41" y1="247.57" x2="162.05" y2="209.11" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffd62c"></stop><stop offset="1" stop-color="#f15a24"></stop></linearGradient><linearGradient id="linear-gradient-2" x1="165.89" y1="210.73" x2="193.87" y2="168.76" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f26250"></stop><stop offset="1" stop-color="#9e005d"></stop></linearGradient></defs><title>PP</title><path d="M194.28,287.39,14.56,181.17C8.84,178,3.93,172.68,9.51,169.22l180.37-104c2.71-1.68,6.82-2.78,9.57-1.18L388.11,173.58c5.72,3.32,6.75,12.6,1,15.93L218,287.22A23.9,23.9,0,0,1,194.28,287.39Z" fill="#ffd62c"></path><path d="M118.88,207.79c-4.23-2.8-8-6.18-12.3-8.91l-33.37,17,108.44,64.09L213.16,259C211.35,258,120.61,208.93,118.88,207.79Z" fill="url(#linear-gradient)"></path><path d="M282.29,218.83c.35,0,3.5-1.26.85-3.29a54.55,54.55,0,0,0-5.51-3.77" fill="#9a433a"></path><path d="M282.29,202.12s-2.65,9.82,0,15l-36,21.19L210.58,259V243.75" fill="#ffe8bc"></path><path d="M283.48,200.6q-.12,1-.26,2l-72.64,41.11V259l72.58-42.33c0,.6,0,1.21,0,1.81l-75.4,43.64V241.32Z" fill="#9a433a"></path><path d="M283.08,200.87l-74.91,42.88L103.05,182l73.31-42a7.23,7.23,0,0,1,7.28.05L283.09,199A1.09,1.09,0,0,1,283.08,200.87Z" fill="#f26250"></path><path d="M207.78,262.11s-105.05-61.87-104.73-62.16,0-17.91,0-17.91l105.12,61.71Z" fill="#9a433a"></path><path d="M283.09,199a2.67,2.67,0,0,1,1.1,1.9c.12,1.28-1.24,1.9-1.71,2.17" fill="#9a433a"></path><path d="M106.38,83.78l-6.88-6.88a4,4,0,0,0-5.71,5.71l6.88,6.88a4,4,0,0,0,5.71-5.71Z" fill="#68e1fd"></path><path d="M89.95,97.31h-11c-5.2,0-5.21,8.08,0,8.08h11C95.15,105.39,95.16,97.31,89.95,97.31Z" fill="#68e1fd"></path><path d="M106.84,115a4.1,4.1,0,0,0-5.71,0l-7.34,7.34A4,4,0,0,0,99.49,128l7.34-7.34A4.11,4.11,0,0,0,106.84,115Z" fill="#68e1fd"></path><path d="M273.08,121.54l6.88,6.88a4,4,0,0,0,5.71-5.71l-6.88-6.88a4,4,0,0,0-5.71,5.71Z" fill="#68e1fd"></path><path d="M289.51,108h11c5.2,0,5.21-8.08,0-8.08h-11C284.31,99.93,284.3,108,289.51,108Z" fill="#68e1fd"></path><path d="M272.62,90.33a4.1,4.1,0,0,0,5.71,0L285.68,83A4,4,0,1,0,280,77.28l-7.34,7.34A4.11,4.11,0,0,0,272.62,90.33Z" fill="#68e1fd"></path><polyline points="162.12 174.97 126.3 195.69 179.61 226.99 220.26 203.61" fill="url(#linear-gradient-2)"></polyline><path d="M232.59,44.89l2.67-4.26s.77-3.86,1.76-3.52.46,4.12.46,4.12,5.48-5.38,7-3.81S246.93,43,246,44.1s-11.08,5.5-11.08,5.5" fill="#fbb5ad"></path><path d="M168.18,21.65l1-4.09s1.85-2.73,1.07-3.11-2.73,2.14-2.73,2.14,0-6.42-1.85-6.42-4.77,1.85-4.87,3S164,23,164,23" fill="#fbb5ad"></path><path d="M160.88,180.34v12.2s7.12,17.73,33.68,17.73,35.74-17.11,35.74-17.11V182" fill="#68e1fd"></path><ellipse cx="195.59" cy="180.34" rx="34.71" ry="20.24" fill="#68e1fd"></ellipse><ellipse cx="195.59" cy="180.34" rx="34.71" ry="20.24" fill="#463f46" opacity="0.31"></ellipse><path d="M183.37,154.9V169s3.27,6,12.76,6,11.78-6.87,11.78-6.87v-16" fill="#68e1fd"></path><path d="M237.9,106l17.62,10.39s3.66,37.26-31.47,29.67l5.38-8.22s16.33,1.28,16.17-16.33l-9.44-5Z" fill="#68e1fd"></path><path d="M154.06,58.28l-17.31-9.56a4.69,4.69,0,0,0-3.33,4.78c.15,3.85-1.25,27.35,19.81,49v-15S144.79,76,143.73,64l8.6,5.15" fill="#68e1fd"></path><path d="M150.78,68l3.92,55.42s5.48,33,40.95,33,40.58-32.71,40.58-32.71L241.48,68" fill="#68e1fd"></path><path d="M213.2,91.06S227,89.34,233.45,80.18c0,0-1.54,61.24-11.88,68s-12.38,9.06-32.42,8.19C189.15,156.41,214.61,154.43,213.2,91.06Z" fill="#463f46" opacity="0.13"></path><ellipse cx="196.13" cy="68.02" rx="45.35" ry="26.05" fill="#68e1fd"></ellipse><ellipse cx="196.13" cy="68.02" rx="45.35" ry="26.05" fill="#0d77a0"></ellipse><ellipse cx="195.65" cy="67.94" rx="36.4" ry="17.81" fill="#023d4f"></ellipse><path d="M174.37,38c-.6-2.48-3.91-13.28-4.9-18.29-3.77-.57-5.6-.58-7.93,2.07.9,6.47,2.54,17.57,3.65,21.35C166.79,48.59,184.64,62,184.64,62l4.5-16.89S175.14,41.19,174.37,38Z" fill="#f26250"></path><path d="M232.05,43.14S219.56,57.44,216,57.7s-11.42-7.57-11.42-7.57l-12-4.59c.09,5.39.19,10.77.1,16.15L202.67,66S208,73.08,216,73.69s22.55-23.26,22.55-23.26C238.27,47.76,232.05,43.14,232.05,43.14Z" fill="#f26250"></path><path d="M201.8,82.79s8.44-24.53,5-30.14-17.07-10-23.62-9.46-2.35,39.32-1.31,39.6S192.6,89.72,201.8,82.79Z" fill="#f26250"></path><path d="M180.53,79.11V84.9s11.07,3.12,22.14.85L202,80.68S193.29,85.17,180.53,79.11Z" fill="#af2b38"></path><path d="M184,33.36s0,14.33,5.25,15.26c5.77,1,9-5.53,9-5.53s.74-12.66-5-13.77S184.12,31.53,184,33.36Z" fill="#fbb5ad"></path><path d="M184.58,35.14c-1.79-.48-3.92-1-5-2.69-1.6-2.53.16-5.16,2.27-6.69A11.22,11.22,0,0,1,190.59,24c4.11.7,10,2.45,11.09,7.1,1.56,6.42-4.59,14.52-4.59,14.52v-4s2.07-2.66,1-3.68-1.53,1.45-1.53,1.45.47-4.74-2.91-5.26c-1.4-.22-1.91.56-3.05,1.17a4.85,4.85,0,0,1-2.59.48A17.58,17.58,0,0,1,184.58,35.14Z" fill="#5c2e2e"></path></svg>


--------------------------------------------------------------------------------
/Modal/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Landing Page CSS Grid</title>
 8 |     <link rel="stylesheet" href="estilos.css">
 9 | </head>
10 | <body>
11 | 
12 |     <header class="hero">
13 |         <nav class="nav container">
14 |             <h2 class="nav__logo">Jordan Alex.</h2>
15 | 
16 |             <ul class="nav__list">
17 |                 <li class="nav__item"><a href="#" class="nav__link">Inicio</a></li>
18 |                 <li class="nav__item"><a href="#" class="nav__link">Acerca de</a></li>
19 |                 <li class="nav__item"><a href="#" class="nav__link">Contacto</a></li>
20 |             </ul>
21 | 
22 |             <figure class="nav__menu">
23 |                 <img src="images/menu.svg" class="nav__icon">
24 |             </figure>
25 |         </nav>
26 | 
27 |         <section class="hero__main container">
28 |             <div class="hero__texts">
29 |                 <h1 class="hero__title">Hello!, My name is Jordan</h1>
30 |                 <p class="hero__subtitle">Let me hep you grow your business with CSS Grid</p>
31 |                 <a href="#" class="hero__cta">Join us!</a>
32 |             </div>
33 | 
34 |             <figure class="hero__picture">
35 |                 <img src="images/illustration.svg" class="hero__img">
36 |             </figure>
37 |         </section>
38 | 
39 |         <div style="height: 150px; overflow: hidden;" class="hero__waves" ><svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;"><path d="M0.00,49.99 C262.08,217.40 378.89,-120.09 500.00,49.99 L500.00,150.00 L0.00,150.00 Z" style="stroke: none; fill: #fff;"></path></svg></div>
40 |     </header>
41 | 
42 |     <section class="modal">
43 |         <div class="modal__container">
44 |             <img src="images/success.svg" class="modal__img">
45 |             <h2 class="modal__title">¡Bienvenido al sitio!</h2>
46 |             <p class="modal__paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia saepe minima excepturi in. Veniam voluptates sint suscipit cum, aliquam sapiente! Voluptas obcaecati atque aliquam veritatis.</p>
47 |             <a href="#" class="modal__close">Cerrar modal</a>
48 | 
49 |         </div>
50 |     </section>
51 | 
52 | 
53 |     <script src="js/modal.js"></script>
54 | 
55 | </body>
56 | </html>


--------------------------------------------------------------------------------
/Modal/js/modal.js:
--------------------------------------------------------------------------------
 1 | const closeModal = document.querySelector('.modal__close');
 2 | const openModal = document.querySelector('.hero__cta');
 3 | const modal = document.querySelector('.modal');
 4 | 
 5 | openModal.addEventListener('click', (e)=>{
 6 |     e.preventDefault();
 7 |     modal.classList.add('modal--show');
 8 | });
 9 | 
10 | closeModal.addEventListener('click', (e)=>{
11 |     e.preventDefault();
12 |     modal.classList.remove('modal--show');
13 | });


--------------------------------------------------------------------------------
/Slider/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "liveServer.settings.port": 5501
3 | }


--------------------------------------------------------------------------------
/Slider/assets/leftarrow.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);transform: ;msFilter:;"><path d="M12.707 17.293 8.414 13H18v-2H8.414l4.293-4.293-1.414-1.414L4.586 12l6.707 6.707z"></path></svg>


--------------------------------------------------------------------------------
/Slider/assets/picture1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AlexCGDesign/3-proyectos-css/486c6c08197d91bedd6e9eb584f1080a80bd8063/Slider/assets/picture1.jpg


--------------------------------------------------------------------------------
/Slider/assets/picture2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AlexCGDesign/3-proyectos-css/486c6c08197d91bedd6e9eb584f1080a80bd8063/Slider/assets/picture2.jpg


--------------------------------------------------------------------------------
/Slider/assets/picture3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AlexCGDesign/3-proyectos-css/486c6c08197d91bedd6e9eb584f1080a80bd8063/Slider/assets/picture3.jpg


--------------------------------------------------------------------------------
/Slider/assets/rightarrow.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);transform: ;msFilter:;"><path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z"></path></svg>


--------------------------------------------------------------------------------
/Slider/estilos.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;700&display=swap');
  2 | 
  3 | 
  4 | * {
  5 |     margin: 0;
  6 |     padding: 0;
  7 |     box-sizing: border-box;
  8 | }
  9 | 
 10 | body{
 11 |     font-family: 'Raleway', sans-serif;
 12 | }
 13 | 
 14 | .container{
 15 |     width: 90%;
 16 |     min-height: 100vh;
 17 |     max-width: 1200px;
 18 |     margin: 0 auto;
 19 |     overflow: hidden;
 20 | }
 21 | 
 22 | .slider{
 23 |     background-color: #f2f2f2;
 24 |     padding: 40px 0;
 25 | }
 26 | 
 27 | .slider__container{
 28 |     display: grid;
 29 |     grid-template-columns: 50px 1fr 50px;
 30 |     align-items: center;
 31 |     gap: 1em;
 32 | }
 33 | 
 34 | .slider__body{
 35 |     grid-column: 2/3;
 36 |     grid-row: 1/2;
 37 |     opacity: 0;
 38 |     pointer-events: none;
 39 |     display: grid;
 40 |     background-color: #f2f2f2;
 41 |     grid-template-columns: 1fr max-content;
 42 |     align-items: center;
 43 |     transition: opacity 1.5s;
 44 | }
 45 | 
 46 | .slider__body--show{
 47 |     opacity: 1;
 48 |     pointer-events: unset;
 49 | }
 50 | 
 51 | .slider__texts{
 52 |     max-width: 600px;
 53 | }
 54 | 
 55 | .subtitle{
 56 |     font-size: 2.5rem;
 57 |     margin-bottom: 20px;
 58 | }
 59 | 
 60 | .slider__review{
 61 |     font-weight: 300;
 62 |     font-size: 20px;
 63 |     line-height: 1.7;
 64 | }
 65 | 
 66 | .slider__img{
 67 |     width: 230px;
 68 |     height: 230px;
 69 |     border-radius: 50%;
 70 |     object-fit: cover;
 71 |     display: block;
 72 |     margin: 0 auto;
 73 | }
 74 | 
 75 | .slider__arrow{
 76 |     cursor: pointer;
 77 |     width: 90%;
 78 | }
 79 | 
 80 | .slider__arrow:nth-of-type(2){
 81 |     justify-self: end;
 82 | }
 83 | 
 84 | @media (max-width:768px){
 85 |     .slider__body{
 86 |         grid-template-columns: 1fr;
 87 |         grid-template-rows: max-content 1fr;
 88 |         gap: 1em;
 89 |     }
 90 | 
 91 |     .slider__picture{
 92 |         grid-row: 1/2;
 93 |     }
 94 | 
 95 |     .slider__img{   
 96 |         width: 210px;
 97 |         height: 210px;
 98 |     }
 99 | }
100 | 
101 | @media (max-width:425px){
102 |     .slider__container{
103 |         grid-template-columns: 25px 1fr 25px;
104 |     }
105 | 
106 |     .slider__arrow{
107 |        width: 100%;
108 |     }
109 | 
110 |     .slider__img{   
111 |         width: 180px;
112 |         height: 180px;
113 |     }
114 | 
115 |     .subtitle{
116 |         font-size: 2rem;
117 |         margin-bottom: 15px;
118 |     }
119 | 
120 |     .slider__review{
121 |         font-size: 1rem;
122 |         line-height: 1.6;
123 |     }
124 | }


--------------------------------------------------------------------------------
/Slider/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Sliders</title>
 9 |     <link rel="stylesheet" href="estilos.css">
10 | </head>
11 | 
12 | <body>
13 |     <section class="slider">
14 |         <div class="slider__container container">
15 |             <img src="assets/leftarrow.svg" class="slider__arrow" id="before">
16 | 
17 |             <section class="slider__body slider__body--show" data-id="1">
18 |                 <div class="slider__texts">
19 |                     <h2 class="subtitle">¡Hola! Mi nombre es Jordan Alexander</h2>
20 |                     <p class="slider__review">
21 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed atque officiis totam modi, non
22 |                         maiores.
23 |                     </p>
24 |                 </div>
25 | 
26 |                 <figure class="slider__picture">
27 |                     <img src="assets/picture1.jpg" class="slider__img">
28 |                 </figure>
29 |             </section>
30 | 
31 |             <section class="slider__body" data-id="2">
32 |                 <div class="slider__texts">
33 |                     <h2 class="subtitle">¡Hola! Mi nombre es Alejandra Perez</h2>
34 |                     <p class="slider__review">
35 |                         Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam nesciunt odio, nihil quibusdam autem nam in veritatis voluptas nobis.
36 |                     </p>
37 |                 </div>
38 | 
39 |                 <figure class="slider__picture">
40 |                     <img src="assets/picture2.jpg" class="slider__img">
41 |                 </figure>
42 |             </section>
43 | 
44 |             <section class="slider__body" data-id="3">
45 |                 <div class="slider__texts">
46 |                     <h2 class="subtitle">¡Hola! Mi nombre es Pablo Gonzales</h2>
47 |                     <p class="slider__review">
48 |                         Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis quis accusantium perferendis vel cumque illum quia totam repellendus!
49 |                     </p>
50 |                 </div>
51 | 
52 |                 <figure class="slider__picture">
53 |                     <img src="assets/picture3.jpg" class="slider__img">
54 |                 </figure>
55 |             </section>
56 | 
57 |             <section class="slider__body" data-id="4">
58 |                 <div class="slider__texts">
59 |                     <h2 class="subtitle">¡Hola! Mi nombre es Pablo Gonzales 4</h2>
60 |                     <p class="slider__review">
61 |                         Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis quis accusantium perferendis vel cumque illum quia totam repellendus!
62 |                     </p>
63 |                 </div>
64 | 
65 |                 <figure class="slider__picture">
66 |                     <img src="assets/picture1.jpg" class="slider__img">
67 |                 </figure>
68 |             </section>
69 | 
70 |             <img src="assets/rightarrow.svg" class="slider__arrow" id="next">
71 |         </div>
72 |     </section>
73 | 
74 |     <script src="sliders.js"></script>
75 | </body>
76 | 
77 | </html>


--------------------------------------------------------------------------------
/Slider/sliders.js:
--------------------------------------------------------------------------------
 1 | (function(){
 2 |     const sliders = [...document.querySelectorAll('.slider__body')];
 3 |     const arrowNext = document.querySelector('#next');
 4 |     const arrowBefore = document.querySelector('#before');
 5 |     let value;
 6 | 
 7 |     arrowNext.addEventListener('click', ()=>changePosition(1));
 8 | 
 9 |     arrowBefore.addEventListener('click', ()=>changePosition(-1));
10 | 
11 |     function changePosition(change){
12 |         const currentElement = Number(document.querySelector('.slider__body--show').dataset.id);
13 |         // 4+1 = 5
14 |         value = currentElement;
15 |         value+= change;
16 | 
17 |         console.log(sliders.length)
18 |         if(value === 0 || value == sliders.length+1){
19 |             value = value === 0 ? sliders.length : 1;
20 |         }
21 | 
22 |         sliders[currentElement-1].classList.toggle('slider__body--show');
23 |         sliders[value-1].classList.toggle('slider__body--show');
24 |     }
25 | })()


--------------------------------------------------------------------------------