├── imagenes ├── family.png ├── luigi.png ├── luigi.webp ├── mario.png ├── mario.webp ├── marioa.png ├── mariob.png ├── marioc.png ├── family.webp ├── marioa.webp ├── mariob.webp ├── marioc.webp ├── cards-back.png ├── cards-back.webp ├── hongo-cafe.png ├── hongo-cafe.webp ├── personajes.png ├── personajes.webp ├── tortuga-nube.png ├── tortuga-nube.webp ├── cerrar-menu.svg └── abrir-menu.svg ├── index.js ├── estilos ├── normalize.css └── index.css └── index.html /imagenes/family.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CapiDeveloper/Proyecto-11-CapiDev/HEAD/imagenes/family.png -------------------------------------------------------------------------------- /imagenes/luigi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CapiDeveloper/Proyecto-11-CapiDev/HEAD/imagenes/luigi.png -------------------------------------------------------------------------------- /imagenes/luigi.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CapiDeveloper/Proyecto-11-CapiDev/HEAD/imagenes/luigi.webp -------------------------------------------------------------------------------- /imagenes/mario.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CapiDeveloper/Proyecto-11-CapiDev/HEAD/imagenes/mario.png -------------------------------------------------------------------------------- /imagenes/mario.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CapiDeveloper/Proyecto-11-CapiDev/HEAD/imagenes/mario.webp -------------------------------------------------------------------------------- /imagenes/marioa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CapiDeveloper/Proyecto-11-CapiDev/HEAD/imagenes/marioa.png -------------------------------------------------------------------------------- /imagenes/mariob.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CapiDeveloper/Proyecto-11-CapiDev/HEAD/imagenes/mariob.png -------------------------------------------------------------------------------- /imagenes/marioc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CapiDeveloper/Proyecto-11-CapiDev/HEAD/imagenes/marioc.png -------------------------------------------------------------------------------- /imagenes/family.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CapiDeveloper/Proyecto-11-CapiDev/HEAD/imagenes/family.webp -------------------------------------------------------------------------------- /imagenes/marioa.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CapiDeveloper/Proyecto-11-CapiDev/HEAD/imagenes/marioa.webp -------------------------------------------------------------------------------- /imagenes/mariob.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CapiDeveloper/Proyecto-11-CapiDev/HEAD/imagenes/mariob.webp -------------------------------------------------------------------------------- /imagenes/marioc.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CapiDeveloper/Proyecto-11-CapiDev/HEAD/imagenes/marioc.webp -------------------------------------------------------------------------------- /imagenes/cards-back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CapiDeveloper/Proyecto-11-CapiDev/HEAD/imagenes/cards-back.png -------------------------------------------------------------------------------- /imagenes/cards-back.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CapiDeveloper/Proyecto-11-CapiDev/HEAD/imagenes/cards-back.webp -------------------------------------------------------------------------------- /imagenes/hongo-cafe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CapiDeveloper/Proyecto-11-CapiDev/HEAD/imagenes/hongo-cafe.png -------------------------------------------------------------------------------- /imagenes/hongo-cafe.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CapiDeveloper/Proyecto-11-CapiDev/HEAD/imagenes/hongo-cafe.webp -------------------------------------------------------------------------------- /imagenes/personajes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CapiDeveloper/Proyecto-11-CapiDev/HEAD/imagenes/personajes.png -------------------------------------------------------------------------------- /imagenes/personajes.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CapiDeveloper/Proyecto-11-CapiDev/HEAD/imagenes/personajes.webp -------------------------------------------------------------------------------- /imagenes/tortuga-nube.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CapiDeveloper/Proyecto-11-CapiDev/HEAD/imagenes/tortuga-nube.png -------------------------------------------------------------------------------- /imagenes/tortuga-nube.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CapiDeveloper/Proyecto-11-CapiDev/HEAD/imagenes/tortuga-nube.webp -------------------------------------------------------------------------------- /imagenes/cerrar-menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /imagenes/abrir-menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const btnMenu = document.getElementById('btn--menu'); 2 | const navegacion = document.getElementById('navegacion'); 3 | 4 | btnMenu.addEventListener('click',()=>{ 5 | 6 | if(btnMenu.src.split('/')[4] ==='abrir-menu.svg'){ 7 | btnMenu.src = 'imagenes/cerrar-menu.svg'; 8 | }else{ 9 | btnMenu.src = 'imagenes/abrir-menu.svg'; 10 | } 11 | navegacion.classList.toggle('navegacion--dinamico'); 12 | }); 13 | 14 | // SELECCION 15 | const imagenes = document.querySelectorAll('.personaje--seleccionar'); 16 | const imagenActual = document.getElementById('imagen--actual'); 17 | 18 | imagenes.forEach(selector=>{ 19 | selector.addEventListener('click',()=>{ 20 | imagenActual.src = selector.src.replace('png','webp'); 21 | }); 22 | }); -------------------------------------------------------------------------------- /estilos/normalize.css: -------------------------------------------------------------------------------- 1 | /* Document 2 | * ========================================================================== */ 3 | 4 | /** 5 | * 1. Correct the line height in all browsers. 6 | * 2. Prevent adjustments of font size after orientation changes in 7 | * IE on Windows Phone and in iOS. 8 | */ 9 | 10 | html { 11 | line-height: 1.15; /* 1 */ 12 | -ms-text-size-adjust: 100%; /* 2 */ 13 | -webkit-text-size-adjust: 100%; /* 2 */ 14 | } 15 | 16 | /* Sections 17 | * ========================================================================== */ 18 | 19 | /** 20 | * Correct the font size and margin on `h1` elements within `section` and 21 | * `article` contexts in Chrome, Edge, Firefox, and Safari. 22 | */ 23 | 24 | h1 { 25 | font-size: 2em; 26 | margin: 0.67em 0; 27 | } 28 | 29 | /* Grouping content 30 | * ========================================================================== */ 31 | 32 | /** 33 | * Remove the margin on nested lists in Chrome, Edge, IE, and Safari. 34 | */ 35 | 36 | dl dl, 37 | dl ol, 38 | dl ul, 39 | ol dl, 40 | ul dl { 41 | margin: 0; 42 | } 43 | 44 | /** 45 | * Remove the margin on nested lists in Edge 18- and IE. 46 | */ 47 | 48 | ol ol, 49 | ol ul, 50 | ul ol, 51 | ul ul { 52 | margin: 0; 53 | } 54 | 55 | /** 56 | * 1. Add the correct box sizing in Firefox. 57 | * 2. Correct the inheritance of border color in Firefox. 58 | * 3. Show the overflow in Edge 18- and IE. 59 | */ 60 | 61 | hr { 62 | box-sizing: content-box; /* 1 */ 63 | color: inherit; /* 2 */ 64 | height: 0; /* 1 */ 65 | overflow: visible; /* 3 */ 66 | } 67 | 68 | /** 69 | * Add the correct display in IE. 70 | */ 71 | 72 | main { 73 | display: block; 74 | } 75 | 76 | /** 77 | * 1. Correct the inheritance and scaling of font size in all browsers. 78 | * 2. Correct the odd `em` font sizing in all browsers. 79 | */ 80 | 81 | pre { 82 | font-family: monospace, monospace; /* 1 */ 83 | font-size: 1em; /* 2 */ 84 | } 85 | 86 | /* Text-level semantics 87 | * ========================================================================== */ 88 | 89 | /** 90 | * Remove the gray background on active links in IE 10. 91 | */ 92 | 93 | a { 94 | background-color: transparent; 95 | } 96 | 97 | /** 98 | * Add the correct text decoration in Edge 18-, IE, and Safari. 99 | */ 100 | 101 | abbr[title] { 102 | text-decoration: underline; 103 | text-decoration: underline dotted; 104 | } 105 | 106 | /** 107 | * Add the correct font weight in Chrome, Edge, and Safari. 108 | */ 109 | 110 | b, 111 | strong { 112 | font-weight: bolder; 113 | } 114 | 115 | /** 116 | * 1. Correct the inheritance and scaling of font size in all browsers. 117 | * 2. Correct the odd `em` font sizing in all browsers. 118 | */ 119 | 120 | code, 121 | kbd, 122 | samp { 123 | font-family: monospace, monospace; /* 1 */ 124 | font-size: 1em; /* 2 */ 125 | } 126 | 127 | /** 128 | * Add the correct font size in all browsers. 129 | */ 130 | 131 | small { 132 | font-size: 80%; 133 | } 134 | 135 | /* Embedded content 136 | * ========================================================================== */ 137 | 138 | /** 139 | * Add the correct display in IE 9-. 140 | */ 141 | 142 | audio, 143 | video { 144 | display: inline-block; 145 | } 146 | 147 | /** 148 | * Add the correct display in iOS 4-7. 149 | */ 150 | 151 | audio:not([controls]) { 152 | display: none; 153 | height: 0; 154 | } 155 | 156 | /** 157 | * Remove the border on images within links in IE 10-. 158 | */ 159 | 160 | img { 161 | border-style: none; 162 | } 163 | 164 | /** 165 | * Hide the overflow in IE. 166 | */ 167 | 168 | svg:not(:root) { 169 | overflow: hidden; 170 | } 171 | 172 | /* Tabular data 173 | * ========================================================================== */ 174 | 175 | /** 176 | * 1. Correct table border color inheritance in all Chrome, Edge, and Safari. 177 | * 2. Remove text indentation from table contents in Chrome, Edge, and Safari. 178 | */ 179 | 180 | table { 181 | border-color: inherit; /* 1 */ 182 | text-indent: 0; /* 2 */ 183 | } 184 | 185 | /* Forms 186 | * ========================================================================== */ 187 | 188 | /** 189 | * Remove the margin on controls in Safari. 190 | */ 191 | 192 | button, 193 | input, 194 | select { 195 | margin: 0; 196 | } 197 | 198 | /** 199 | * 1. Show the overflow in IE. 200 | * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE. 201 | */ 202 | 203 | button { 204 | overflow: visible; /* 1 */ 205 | text-transform: none; /* 2 */ 206 | } 207 | 208 | /** 209 | * Correct the inability to style buttons in iOS and Safari. 210 | */ 211 | 212 | button, 213 | [type="button"], 214 | [type="reset"], 215 | [type="submit"] { 216 | -webkit-appearance: button; 217 | } 218 | 219 | /** 220 | * Correct the padding in Firefox. 221 | */ 222 | 223 | fieldset { 224 | padding: 0.35em 0.75em 0.625em; 225 | } 226 | 227 | /** 228 | * Show the overflow in Edge 18- and IE. 229 | */ 230 | 231 | input { 232 | overflow: visible; 233 | } 234 | 235 | /** 236 | * 1. Correct the text wrapping in Edge 18- and IE. 237 | * 2. Correct the color inheritance from `fieldset` elements in IE. 238 | */ 239 | 240 | legend { 241 | box-sizing: border-box; /* 1 */ 242 | color: inherit; /* 2 */ 243 | display: table; /* 1 */ 244 | max-width: 100%; /* 1 */ 245 | white-space: normal; /* 1 */ 246 | } 247 | 248 | /** 249 | * 1. Add the correct display in Edge 18- and IE. 250 | * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox. 251 | */ 252 | 253 | progress { 254 | display: inline-block; /* 1 */ 255 | vertical-align: baseline; /* 2 */ 256 | } 257 | 258 | /** 259 | * Remove the inheritance of text transform in Firefox. 260 | */ 261 | 262 | select { 263 | text-transform: none; 264 | } 265 | 266 | /** 267 | * 1. Remove the margin in Firefox and Safari. 268 | * 2. Remove the default vertical scrollbar in IE. 269 | */ 270 | 271 | textarea { 272 | margin: 0; /* 1 */ 273 | overflow: auto; /* 2 */ 274 | } 275 | 276 | /** 277 | * 1. Add the correct box sizing in IE 10-. 278 | * 2. Remove the padding in IE 10-. 279 | */ 280 | 281 | [type="checkbox"], 282 | [type="radio"] { 283 | box-sizing: border-box; /* 1 */ 284 | padding: 0; /* 2 */ 285 | } 286 | 287 | /** 288 | * 1. Correct the odd appearance in Chrome, Edge, and Safari. 289 | * 2. Correct the outline style in Safari. 290 | */ 291 | 292 | [type="search"] { 293 | -webkit-appearance: textfield; /* 1 */ 294 | outline-offset: -2px; /* 2 */ 295 | } 296 | 297 | /** 298 | * Correct the cursor style of increment and decrement buttons in Safari. 299 | */ 300 | 301 | ::-webkit-inner-spin-button, 302 | ::-webkit-outer-spin-button { 303 | height: auto; 304 | } 305 | 306 | /** 307 | * Correct the text style of placeholders in Chrome, Edge, and Safari. 308 | */ 309 | 310 | ::-webkit-input-placeholder { 311 | color: inherit; 312 | opacity: 0.54; 313 | } 314 | 315 | /** 316 | * Remove the inner padding in Chrome, Edge, and Safari on macOS. 317 | */ 318 | 319 | ::-webkit-search-decoration { 320 | -webkit-appearance: none; 321 | } 322 | 323 | /** 324 | * 1. Correct the inability to style upload buttons in iOS and Safari. 325 | * 2. Change font properties to `inherit` in Safari. 326 | */ 327 | 328 | ::-webkit-file-upload-button { 329 | -webkit-appearance: button; /* 1 */ 330 | font: inherit; /* 2 */ 331 | } 332 | 333 | /** 334 | * Remove the inner border and padding of focus outlines in Firefox. 335 | */ 336 | 337 | ::-moz-focus-inner { 338 | border-style: none; 339 | padding: 0; 340 | } 341 | 342 | /** 343 | * Restore the focus outline styles unset by the previous rule in Firefox. 344 | */ 345 | 346 | :-moz-focusring { 347 | outline: 1px dotted ButtonText; 348 | } 349 | 350 | /** 351 | * Remove the additional :invalid styles in Firefox. 352 | */ 353 | 354 | :-moz-ui-invalid { 355 | box-shadow: none; 356 | } 357 | 358 | /* Interactive 359 | * ========================================================================== */ 360 | 361 | /* 362 | * Add the correct display in Edge 18- and IE. 363 | */ 364 | 365 | details { 366 | display: block; 367 | } 368 | 369 | /* 370 | * Add the correct styles in Edge 18-, IE, and Safari. 371 | */ 372 | 373 | dialog { 374 | background-color: white; 375 | border: solid; 376 | color: black; 377 | display: block; 378 | height: -moz-fit-content; 379 | height: -webkit-fit-content; 380 | height: fit-content; 381 | left: 0; 382 | margin: auto; 383 | padding: 1em; 384 | position: absolute; 385 | right: 0; 386 | width: -moz-fit-content; 387 | width: -webkit-fit-content; 388 | width: fit-content; 389 | } 390 | 391 | dialog:not([open]) { 392 | display: none; 393 | } 394 | 395 | /* 396 | * Add the correct display in all browsers. 397 | */ 398 | 399 | summary { 400 | display: list-item; 401 | } 402 | 403 | /* Scripting 404 | * ========================================================================== */ 405 | 406 | /** 407 | * Add the correct display in IE 9-. 408 | */ 409 | 410 | canvas { 411 | display: inline-block; 412 | } 413 | 414 | /** 415 | * Add the correct display in IE. 416 | */ 417 | 418 | template { 419 | display: none; 420 | } 421 | 422 | /* User interaction 423 | * ========================================================================== */ 424 | 425 | /** 426 | * Add the correct display in IE 10-. 427 | */ 428 | 429 | [hidden] { 430 | display: none; 431 | } -------------------------------------------------------------------------------- /estilos/index.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | border: 0; 5 | font-family: 'DynaPuff', cursive; 6 | } 7 | ul{ 8 | padding-left: 0; 9 | list-style: none; 10 | } 11 | a{ 12 | text-decoration: none; 13 | } 14 | img{ 15 | width: 100%; 16 | object-fit: cover; 17 | } 18 | svg{ 19 | width: 100%; 20 | } 21 | /* Header */ 22 | .header{ 23 | background-image: radial-gradient(#2a2929 2px, transparent 2px), radial-gradient(#2a2929 2px, transparent 2px); 24 | background-size: 32px 32px; 25 | background-position: 0 0, 16px 16px; 26 | background-color: #302f2f; 27 | position: sticky; 28 | top: 0; 29 | z-index: 1000; 30 | } 31 | .menu{ 32 | width: 95%; 33 | margin-inline: auto; 34 | padding-block: 10px; 35 | display: flex; 36 | flex-direction: column; 37 | } 38 | @media (min-width:768px) { 39 | .menu{ 40 | flex-direction: row; 41 | } 42 | } 43 | .logo{ 44 | flex: 1; 45 | display: flex; 46 | justify-content: space-between; 47 | } 48 | .logo a{ 49 | color: white; 50 | font-weight: 900; 51 | font-size: 18px; 52 | border: 3px solid white; 53 | padding: 5px; 54 | border-radius: 8px; 55 | } 56 | .logo img{ 57 | width: 40px; 58 | height: 40px; 59 | cursor: pointer; 60 | } 61 | @media (min-width:768px) { 62 | .logo img{ 63 | display: none; 64 | } 65 | } 66 | .navegacion{ 67 | background-color: red; 68 | flex: 1; 69 | position: absolute; 70 | left: 0; 71 | width: 100%; 72 | transform: translateY(-130%); 73 | transition: transform .5s ease; 74 | background-image: radial-gradient(#2a2929 2px, transparent 2px), radial-gradient(#2a2929 2px, transparent 2px); 75 | background-size: 32px 32px; 76 | background-position: 0 0, 16px 16px; 77 | background-color: #302f2f; 78 | } 79 | @media (min-width:768px) { 80 | .navegacion{ 81 | position: static; 82 | transform: translateY(0%); 83 | } 84 | } 85 | .navegacion--dinamico{ 86 | top: 60px; 87 | transform: translateY(0%); 88 | } 89 | .navegacion--lista{ 90 | padding-block: 30px; 91 | display: flex; 92 | flex-direction: column; 93 | justify-content: space-between; 94 | align-items: center; 95 | gap: 40px; 96 | } 97 | @media (min-width:768px) { 98 | .navegacion--lista{ 99 | flex-direction: row; 100 | padding-block:0 ; 101 | } 102 | } 103 | .navegacion--lista li{ 104 | width: 100%; 105 | text-align: center; 106 | } 107 | .navegacion--lista li a{ 108 | display: block; 109 | padding: 10px; 110 | border-radius: 10px; 111 | color: white; 112 | font-weight:700; 113 | } 114 | .navegacion--lista li a:hover{ 115 | background-color: rgba(0, 0, 0, 0.33); 116 | } 117 | /* Banner */ 118 | .banner{ 119 | background-image: linear-gradient(45deg, #ff4747 50%, transparent 50%); 120 | background-size: 20px 20px; 121 | background-color: #E70112; 122 | overflow: hidden; 123 | } 124 | .banner--contenedor{ 125 | width: 90%; 126 | margin-inline: auto; 127 | display: flex; 128 | flex-direction: column; 129 | align-items: center; 130 | justify-content: space-between; 131 | } 132 | @media (min-width:768px) { 133 | .banner--contenedor{ 134 | flex-direction: row; 135 | } 136 | } 137 | .banner--info{ 138 | display: flex; 139 | flex-direction: column; 140 | align-items: center; 141 | gap: 15px; 142 | text-align: center; 143 | padding-block: 20px; 144 | color: white; 145 | } 146 | @media (min-width:768px) { 147 | .banner--info{ 148 | align-items: start; 149 | text-align: start; 150 | width: 50%; 151 | } 152 | } 153 | .banner--info h1{ 154 | color: white; 155 | font-size: 30px; 156 | font-weight: 900; 157 | } 158 | .banner--info a{ 159 | border: 5px solid white; 160 | background-color: white; 161 | font-weight: 900; 162 | color: black; 163 | border-radius: 10px; 164 | padding-block: 5px; 165 | padding-inline: 15px; 166 | transition: all .5s ease; 167 | 168 | } 169 | .banner--info a:hover{ 170 | transform: scale(1.2); 171 | background-color: #302f2f; 172 | color: white; 173 | border-color: white; 174 | } 175 | .banner--imagen{ 176 | position: relative; 177 | } 178 | .banner--imagen picture:first-child img{ 179 | animation: imagenUno 5s infinite linear; 180 | } 181 | .banner--imagen picture:last-of-type img{ 182 | position: absolute; 183 | left: 0; 184 | right: 0; 185 | top: 0; 186 | bottom: 0; 187 | margin: auto; 188 | width: 80%; 189 | height: 100%; 190 | animation: imagenDos 5s infinite linear; 191 | } 192 | @keyframes imagenUno{ 193 | 0%{ 194 | transform: scale(0); 195 | opacity: 0; 196 | } 197 | 50%{ 198 | transform: scale(1); 199 | opacity: 1; 200 | } 201 | 100%{ 202 | transform: scale(0); 203 | opacity: 0; 204 | } 205 | } 206 | @keyframes imagenDos{ 207 | 0%{ 208 | transform: scale(1); 209 | opacity: 1; 210 | } 211 | 50%{ 212 | transform: scale(0); 213 | opacity: 0; 214 | } 215 | 100%{ 216 | transform: scale(1); 217 | opacity: 1; 218 | } 219 | } 220 | 221 | /* Nubes */ 222 | .nubes-svg{ 223 | background-image: linear-gradient(45deg, #ff4747 50%, transparent 50%); 224 | background-size: 20px 20px; 225 | background-color: #E70112; 226 | } 227 | /* Main */ 228 | .personajes{ 229 | background-color: red; 230 | margin-top: -10px; 231 | padding: 50px; 232 | overflow: hidden; 233 | background-image: radial-gradient(rgba(41, 40, 40, 0.15) 2px, transparent 2px); 234 | background-size: 32px 32px; 235 | background-color: #ffffff; 236 | } 237 | .personajes h2{ 238 | text-align: center; 239 | } 240 | .personajes p{ 241 | color: #2a2929; 242 | text-align: center; 243 | padding: 20px; 244 | } 245 | .cards{ 246 | display: grid; 247 | width: 60%; 248 | margin-inline: auto; 249 | gap: 10px; 250 | } 251 | @media (min-width:480px) { 252 | .cards{ 253 | grid-template-columns: 1fr 1fr; 254 | width: 80%; 255 | gap: 50px; 256 | } 257 | } 258 | @media (min-width:768px) { 259 | .cards{ 260 | grid-template-columns: 1fr 1fr 1fr 1fr; 261 | width: 90%; 262 | gap: 80px; 263 | } 264 | } 265 | .cards li{ 266 | position: relative; 267 | } 268 | .card{ 269 | transition: all .3s ease; 270 | } 271 | .card picture:first-child img{ 272 | box-shadow: 0 60px 60px -60px rgba(41, 40, 40, 0.15); 273 | border-radius: 4px; 274 | } 275 | .card picture:last-child img{ 276 | position: absolute; 277 | left: 0; 278 | right: 0; 279 | bottom: 20px; 280 | width: 80%; 281 | margin-inline:auto; 282 | transition: all .5s ease; 283 | } 284 | .card:before{ 285 | content: ''; 286 | width: 100%; 287 | height: 100%; 288 | position: absolute; 289 | background: linear-gradient(to bottom, transparent 10%,rgba(0, 0, 0, 0.626) 50%,black 100%); 290 | transition: all .8s ease; 291 | opacity: 0; 292 | } 293 | .card:hover::before{ 294 | opacity: 1; 295 | } 296 | .card:hover{ 297 | transform: 298 | perspective(250px) 299 | rotateX(30deg) 300 | translateY(-5%) 301 | translateZ(0) 302 | ; 303 | } 304 | .card:hover picture:last-child img{ 305 | transform: 306 | perspective(10px) 307 | rotateX(-1deg) 308 | translateY(-5%) 309 | translateZ(0) 310 | ; 311 | } 312 | /* Sleccion de images */ 313 | .seleccion{ 314 | background: 315 | conic-gradient(at 10% 50%,#0000 75%,#302f2f 0), 316 | conic-gradient(at 10% 50%,#0000 75%,#302f2f 0) calc(1*32px) calc(3*32px), 317 | conic-gradient(at 10% 50%,#0000 75%,#302f2f 0) calc(2*32px) calc(1*32px), 318 | conic-gradient(at 10% 50%,#0000 75%,#302f2f 0) calc(3*32px) calc(4*32px), 319 | conic-gradient(at 10% 50%,#0000 75%,#302f2f 0) calc(4*32px) calc(2*32px), 320 | conic-gradient(at 50% 10%,#0000 75%,#302f2f 0) 0 calc(4*32px), 321 | conic-gradient(at 50% 10%,#0000 75%,#302f2f 0) calc(1*32px) calc(2*32px), 322 | conic-gradient(at 50% 10%,#0000 75%,#302f2f 0) calc(2*32px) 0, 323 | conic-gradient(at 50% 10%,#0000 75%,#302f2f 0) calc(3*32px) calc(3*32px), 324 | conic-gradient(at 50% 10%,#0000 75%,#302f2f 0) calc(4*32px) calc(1*32px), 325 | #2a2929; 326 | background-size: 160px 160px; 327 | padding: 20px; 328 | overflow: hidden; 329 | } 330 | .seleccion h2{ 331 | color: white; 332 | text-align: center; 333 | padding: 20px; 334 | } 335 | .seleccion--container{ 336 | width: 90%; 337 | margin-inline: auto; 338 | display: flex; 339 | flex-direction: column; 340 | align-items: center; 341 | justify-content: center; 342 | gap: 20px; 343 | } 344 | @media (min-width:768px) { 345 | .seleccion--container{ 346 | flex-direction: row; 347 | } 348 | } 349 | #imagen--actual{ 350 | min-width: 200px; 351 | min-width: 200px; 352 | object-fit: contain; 353 | } 354 | .imagenes--personajes{ 355 | display: flex; 356 | } 357 | .imagenes--personajes img{ 358 | width: 100px; 359 | height: 100px; 360 | object-fit: contain; 361 | transition: all .5s ease; 362 | } 363 | .imagenes--personajes img:hover{ 364 | transform: scale(1.2); 365 | cursor: pointer; 366 | } 367 | .potencial{ 368 | backdrop-filter: blur(10px); 369 | border-radius: 10px; 370 | padding: 20px; 371 | } 372 | .potencial h3{ 373 | color: white; 374 | padding: 10px; 375 | } 376 | .potencial--info{ 377 | color: #ff4747; 378 | } 379 | .porcentaje{ 380 | color: white; 381 | text-align: end; 382 | width: 100%; 383 | background-color: #E70112; 384 | border-radius: 5px; 385 | padding: 5px; 386 | } 387 | /* Footer */ 388 | .footer{ 389 | background: 390 | conic-gradient(at 10% 50%,#0000 75%,#302f2f 0), 391 | conic-gradient(at 10% 50%,#0000 75%,#302f2f 0) calc(1*32px) calc(3*32px), 392 | conic-gradient(at 10% 50%,#0000 75%,#302f2f 0) calc(2*32px) calc(1*32px), 393 | conic-gradient(at 10% 50%,#0000 75%,#302f2f 0) calc(3*32px) calc(4*32px), 394 | conic-gradient(at 10% 50%,#0000 75%,#302f2f 0) calc(4*32px) calc(2*32px), 395 | conic-gradient(at 50% 10%,#0000 75%,#302f2f 0) 0 calc(4*32px), 396 | conic-gradient(at 50% 10%,#0000 75%,#302f2f 0) calc(1*32px) calc(2*32px), 397 | conic-gradient(at 50% 10%,#0000 75%,#302f2f 0) calc(2*32px) 0, 398 | conic-gradient(at 50% 10%,#0000 75%,#302f2f 0) calc(3*32px) calc(3*32px), 399 | conic-gradient(at 50% 10%,#0000 75%,#302f2f 0) calc(4*32px) calc(1*32px), 400 | #2a2929; 401 | background-size: 160px 160px; 402 | } 403 | .footer--contenedor{ 404 | border-top: 5px solid rgba(246, 241, 241, 0.15); 405 | color: white; 406 | padding-block: 20px; 407 | display: flex; 408 | align-items: center; 409 | flex-direction: column; 410 | gap: 20px; 411 | width: 90%; 412 | margin-inline: auto; 413 | justify-content: space-between; 414 | } 415 | @media (min-width:768px) { 416 | .footer--contenedor{ 417 | flex-direction: row; 418 | } 419 | } 420 | .navegacion--footer{ 421 | gap: 10px; 422 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | 21 | 30 |
31 |
32 | 53 | 68 |
69 |

Lorem Ipsum

70 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, illum eligendi debitis sint.

71 | 129 |
130 |
131 |

Lorem Ipsum

132 |
133 |
134 | Imagen personaje 135 |
136 | 137 | 138 | 139 | Imagen family 140 | 141 | 142 | 143 | 144 | Imagen family 145 | 146 | 147 | 148 | 149 | Imagen family 150 | 151 |
152 |
153 |
154 |

Lorem Ipsum

155 |
    156 |
  • 157 |

    Potencial

    158 |
    159 | 100% 160 |
    161 |
    • 162 |
  • 163 |

    Rapidez

    164 |
    165 | 100% 166 |
    167 |
    • 168 |
  • 169 |

    Altura Salto

    170 |
    171 | 100% 172 |
    173 |
    • 174 |
175 |
176 |
177 |
178 | 189 | 190 | 191 | --------------------------------------------------------------------------------