├── .github └── workflows │ ├── .DS_Store │ └── cicd.yml ├── README.md ├── audio └── super-mario.mp3 ├── css ├── resetStyle.css └── style.css ├── fonts ├── NineteenNinetySeven.otf ├── NineteenNinetySeven.ttf ├── NineteenNinetySeven.woff └── NineteenNinetySeven.woff2 ├── image ├── cloud.png ├── cuesor_on_link.png ├── default__cursor.png ├── favicon__mario.png ├── floor.jpg ├── fon_1024.jpg ├── fon_1440.jpg ├── foto.jpg ├── foto__frame.jpg ├── fotoq.jpg ├── green__pipe.png ├── mario.png └── shelf.jpg ├── index.html └── js └── script.js /.github/workflows/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artiftw/-HTML-CSS/d44367a4bf4187ce871d8ccb94f6168e5c7c9723/.github/workflows/.DS_Store -------------------------------------------------------------------------------- /.github/workflows/cicd.yml: -------------------------------------------------------------------------------- 1 | name: Telegram и HTML5-Validator 2 | on: 3 | push: 4 | branches: 5 | - main 6 | pull_request: 7 | types: [opened, reopened] 8 | workflow_dispatch: 9 | 10 | jobs: 11 | build: 12 | name: Уведомление и валидация 13 | runs-on: ubuntu-latest 14 | steps: 15 | - name: Send telegram message on push 16 | uses: appleboy/telegram-action@master 17 | with: 18 | to: ${{ secrets.TG_ID }} 19 | token: ${{ secrets.TG_TOKEN }} 20 | message: | 21 | ${{ github.actor }} создал новый коммит: ${{ github.event.commits[0].message }} 22 | Ссылка на коммит: https://github.com/${{ github.repository }}/commit/${{github.sha}} 23 | Репозиторий: https://github.com/${{ github.repository }} 24 | 25 | CI/CD github actions: https://github.com/${{ github.repository }}/actions 26 | https://github.com/${{ github.repository }}/actions/runs/${{github.run_id}} 27 | - name: Checkout 28 | uses: actions/checkout@v4 29 | - name: Пройти проверки HTML5 Validator 30 | uses: Cyb3r-Jak3/html5validator-action-experimental@master 31 | with: 32 | root: / 33 | continue-on-error: true -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # -HTML-CSS -------------------------------------------------------------------------------- /audio/super-mario.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artiftw/-HTML-CSS/d44367a4bf4187ce871d8ccb94f6168e5c7c9723/audio/super-mario.mp3 -------------------------------------------------------------------------------- /css/resetStyle.css: -------------------------------------------------------------------------------- 1 | /*Сброс стилей браузеров*/ 2 | * { 3 | padding: 0; 4 | margin: 0; 5 | border: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | *, 10 | *:before, 11 | *:after { 12 | -moz-box-sizing: border-box; 13 | -webkit-box-sizing: border-box; 14 | box-sizing: border-box; 15 | } 16 | 17 | :focus, 18 | :active { 19 | outline: none; 20 | } 21 | 22 | a:focus, 23 | a:active { 24 | outline: none; 25 | } 26 | 27 | nav, 28 | footer, 29 | header, 30 | aside { 31 | display: block; 32 | } 33 | 34 | html, 35 | body { 36 | height: 100%; 37 | width: 100%; 38 | font-size: 100%; 39 | line-height: 1; 40 | font-size: 14px; 41 | -ms-text-size-adjust: 100%; 42 | -moz-text-size-adjust: 100%; 43 | -webkit-text-size-adjust: 100%; 44 | } 45 | 46 | input, 47 | button, 48 | textarea { 49 | font-family: inherit; 50 | } 51 | 52 | input::-ms-clear { 53 | display: none; 54 | } 55 | 56 | button { 57 | cursor: pointer; 58 | } 59 | 60 | button::-moz-focus-inner { 61 | padding: 0; 62 | border: 0; 63 | } 64 | 65 | a, 66 | a:visited { 67 | text-decoration: none; 68 | } 69 | 70 | a:hover { 71 | text-decoration: none; 72 | } 73 | 74 | ul li { 75 | list-style: none; 76 | } 77 | 78 | img { 79 | vertical-align: top; 80 | } 81 | 82 | h1, 83 | h2, 84 | h3, 85 | h4, 86 | h5, 87 | h6 { 88 | font-size: inherit; 89 | font-weight: 400; 90 | } -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | /* подключение файлов шрифта с разными вариантами форматов для отображения в разных браузерах */ 2 | @font-face { 3 | font-family: "Nineteen Ninety Seven"; 4 | font-style: normal; 5 | font-weight: 400; 6 | src: local("Nineteen Ninety Seven"), 7 | /* Пути к файлам шрифта */ 8 | url("../fonts/NineteenNinetySeven.otf") format("otf"), 9 | url("../fonts/NineteenNinetySeven.ttf") format("ttf"), 10 | url("../fonts/NineteenNinetySeven.woff") format("woff"), 11 | url("../fonts/NineteenNinetySeven.woff2") format("woff2"); 12 | } 13 | 14 | /* замена изображения курсора */ 15 | html { 16 | cursor: url("../image/default__cursor.png"), auto; 17 | } 18 | 19 | /* замена изображения курсора при наведения на ссылки*/ 20 | .mario-img, 21 | a { 22 | cursor: url("../image/cuesor_on_link.png") 18 0, auto; 23 | } 24 | 25 | /* установка шрифта для всего документа */ 26 | body { 27 | font-family: "Nineteen Ninety Seven"; 28 | overflow-x: hidden; 29 | } 30 | 31 | .main { 32 | position: relative; 33 | /* размеры блока, который формирует размер страницы отображения на экране */ 34 | /* ширина блока равна ширине экрана */ 35 | width: 100vw; 36 | /* высота блока равна минимум высоте экрана */ 37 | min-height: 100vh; 38 | /* а также высота может быть больше высоты экрана если требуется вместить содержимое страницы */ 39 | height: 100%; 40 | /* картинка фона */ 41 | background-image: url(../image/fon_1440.jpg); 42 | /* настройки отображения картинки */ 43 | background-repeat: no-repeat; 44 | background-size: cover; 45 | overflow: hidden; 46 | } 47 | 48 | /* Медиа запрос. Применяются стили указанные в медиазапросе при ширине экрана меньше указанного (1440px) */ 49 | @media (max-width: 1439.98px) { 50 | .main { 51 | /* картинка фона */ 52 | background-image: url(../image/fon_1024.jpg); 53 | padding-bottom: 40vw; 54 | } 55 | } 56 | 57 | /* при еще более меньшем экране снова стили поменяются, но только те, которые записаны в медиазапросе */ 58 | @media (max-width:1023.98px) { 59 | .main { 60 | padding-bottom: 50vw; 61 | } 62 | } 63 | 64 | .floor { 65 | position: absolute; 66 | /* позиционирование каменного пола от низа экрана (в процентах относительно высоты экрана) */ 67 | bottom: 0vw; 68 | /* высота пола*/ 69 | height: 4.93vw; 70 | /* ширина пола */ 71 | width: 100%; 72 | z-index: 3; 73 | } 74 | 75 | @media (max-width:1439.98px) { 76 | .floor { 77 | height: 6.93vw; 78 | } 79 | } 80 | 81 | @media (max-width:1023.98px) { 82 | .floor { 83 | height: 11.11vw; 84 | } 85 | } 86 | 87 | .floor-img { 88 | /* позиционирование картинки пола, такой набор стилей применяется 89 | для адаптивного отображения картинки внутри блока floor */ 90 | position: absolute; 91 | top: 0; 92 | left: 0; 93 | width: 100%; 94 | height: 100%; 95 | object-fit: cover; 96 | } 97 | 98 | /* Облака */ 99 | 100 | [class^="cloud"] { 101 | position: absolute; 102 | } 103 | 104 | /* позиционирование облаков и их размеры */ 105 | .cloud_1 { 106 | /* координаты позиционирования */ 107 | top: 7.08vw; 108 | left: 16.04vw; 109 | /* размер */ 110 | width: 19.03vw; 111 | height: 9.58vw; 112 | } 113 | 114 | @media (max-width:1439.98px) { 115 | .cloud_1 { 116 | top: 9.96vw; 117 | left: 22.56vw; 118 | width: 26.76vw; 119 | height: 13.48vw; 120 | } 121 | } 122 | 123 | .cloud_2 { 124 | top: 3.4vw; 125 | left: 53.96vw; 126 | width: 12.71vw; 127 | height: 6.39vw; 128 | } 129 | 130 | @media (max-width:1439.98px) { 131 | .cloud_2 { 132 | top: 22.8vw; 133 | left: 68.07vw; 134 | width: 17.87vw; 135 | height: 8.98vw; 136 | } 137 | } 138 | 139 | @media (max-width:1023.98px) { 140 | .cloud_2 { 141 | top: 4.72vw; 142 | left: 58.06vw; 143 | width: 30vw; 144 | height: 15vw; 145 | } 146 | } 147 | 148 | .cloud_3 { 149 | top: 17.01vw; 150 | left: 48.4vw; 151 | width: 12.71vw; 152 | height: 6.39vw; 153 | } 154 | 155 | @media (max-width:1439.98px) { 156 | .cloud_3 { 157 | top: 4.79vw; 158 | left: 75.88vw; 159 | width: 17.87vw; 160 | height: 8.98vw; 161 | } 162 | } 163 | 164 | @media (max-width:1023.98px) { 165 | .cloud_3 { 166 | top: 44.17vw; 167 | left: 43vw; 168 | width: 30vw; 169 | height: 15vw; 170 | } 171 | } 172 | 173 | .cloud_4 { 174 | top: 9.17vw; 175 | right: 6.87vw; 176 | width: 19.03vw; 177 | height: 9.58vw; 178 | } 179 | 180 | @media (max-width:1439.98px) { 181 | .cloud_4 { 182 | top: 33.2vw; 183 | right: -14vw; 184 | width: 26.76vw; 185 | height: 13.48vw; 186 | } 187 | } 188 | 189 | @media (max-width:1023.98px) { 190 | .cloud_4 { 191 | top: 30vw; 192 | right: -5.5vw; 193 | width: 23.89vw; 194 | height: 11.94vw; 195 | } 196 | } 197 | 198 | /* блок, который задаёт размеры области для содержания страницы. В нем находятся фото, текст и ссылки */ 199 | .container { 200 | width: 100%; 201 | padding: 5.56vw; 202 | } 203 | 204 | @media (max-width:1439.98px) { 205 | .container { 206 | display: block; 207 | padding: 7.81vw; 208 | } 209 | } 210 | 211 | /* Зелёная труба */ 212 | .green__pipe { 213 | /* позиционирование картинки */ 214 | position: absolute; 215 | bottom: 0vw; 216 | right: 5.56vw; 217 | z-index: 2; 218 | /* размер картинки */ 219 | width: 9.03vw; 220 | height: 18.06vw; 221 | } 222 | 223 | @media (max-width:1439.98px) { 224 | .green__pipe { 225 | right: 29.59vw; 226 | width: 12.7vw; 227 | height: 25.39vw; 228 | } 229 | } 230 | 231 | @media (max-width:1023.98px) { 232 | .green__pipe { 233 | bottom: -10vw; 234 | right: 16.67vw; 235 | width: 19.44vw; 236 | height: 38.89vw; 237 | } 238 | } 239 | 240 | /* полка, на которой стоит Марио */ 241 | .shelf { 242 | position: absolute; 243 | bottom: 21.81vw; 244 | right: 16.67vw; 245 | width: 14.79vw; 246 | height: 4.93vw; 247 | } 248 | 249 | @media (max-width:1439.98px) { 250 | .shelf { 251 | bottom: 19vw; 252 | right: 49.51vw; 253 | width: 20.8vw; 254 | height: 6.93vw; 255 | } 256 | } 257 | 258 | @media (max-width:1023.98px) { 259 | .shelf { 260 | bottom: 17.78vw; 261 | right: 44.72vw; 262 | width: 33.33vw; 263 | height: 11.11vw; 264 | } 265 | } 266 | 267 | /* Блок с картинкой Марио, этот блок применяется для анимации движения Марио. 268 | Этот блок будет поворачиватся и перемещать Марио */ 269 | .mario { 270 | /* позиционирование */ 271 | position: absolute; 272 | bottom: 20.5vw; 273 | right: 9.3vw; 274 | z-index: 1; 275 | /* размеры */ 276 | width: 14vw; 277 | height: 14vw; 278 | } 279 | 280 | /* картинка Марио */ 281 | .mario-img { 282 | /* размеры */ 283 | width: 4.1vw; 284 | height: 7.85vw; 285 | } 286 | 287 | @media (max-width:1439.98px) { 288 | .mario { 289 | bottom: 13vw; 290 | right: 34vw; 291 | width: 24vw; 292 | height: 24vw; 293 | } 294 | 295 | .mario-img { 296 | width: 5.76vw; 297 | height: 11.04vw; 298 | } 299 | } 300 | 301 | @media (max-width:1023.98px) { 302 | .mario { 303 | bottom: 10vw; 304 | right: 25vw; 305 | width: 35vw; 306 | height: 35vw; 307 | } 308 | 309 | .mario-img { 310 | width: 8.33vw; 311 | height: 15.83vw; 312 | } 313 | } 314 | 315 | /* общий блок, внутри которого находится блки с текстом */ 316 | .data { 317 | position: relative; 318 | display: flex; 319 | align-items: center; 320 | column-gap: 4.17vw; 321 | } 322 | 323 | @media (max-width:1439.98px) { 324 | .data { 325 | column-gap: 5.86vw; 326 | } 327 | } 328 | 329 | @media (max-width:1023.98px) { 330 | .data { 331 | display: block; 332 | } 333 | } 334 | 335 | /* размеры блока с фотографией */ 336 | .foto { 337 | position: relative; 338 | width: 20.28vw; 339 | height: 25.35vw; 340 | } 341 | 342 | @media (max-width:1439.98px) { 343 | .foto { 344 | width: 28.52vw; 345 | height: 35.64vw; 346 | } 347 | } 348 | 349 | @media (max-width:1023.98px) { 350 | .foto { 351 | width: 44.44vw; 352 | height: 55.56vw; 353 | } 354 | } 355 | 356 | .foto__frame, 357 | .foto__foto { 358 | /* задаёт размеры рамки и фото, они должны быть по размеру блока foto, 359 | т.е. 100% ширины и высоты */ 360 | position: absolute; 361 | width: 100%; 362 | height: 100%; 363 | } 364 | 365 | /* Рамка для фотографии */ 366 | .foto__frame img { 367 | position: absolute; 368 | top: 0; 369 | left: 0; 370 | width: 100%; 371 | height: 100%; 372 | object-fit: cover; 373 | } 374 | 375 | /* Адаптивное позиционирование фотографии, 376 | для того, что бы при загрузке любого размера 377 | и соотношения сторон фотографии она отображалась правильно*/ 378 | .foto__foto img { 379 | position: absolute; 380 | /* засположение фото по центру рамки */ 381 | top: 50%; 382 | left: 50%; 383 | transform: translate(-50%, -50%); 384 | /* object-fit: cover это свойство поместит фото руководствуясь либо шириной, 385 | лобо высотой фотографии так, что бы фото заняло всё пространство */ 386 | object-fit: cover; 387 | /* размер фотографии */ 388 | width: 83.5%; 389 | height: 83.5%; 390 | } 391 | 392 | .name { 393 | /* размер шрифта имени */ 394 | font-size: 3.333vw; 395 | font-weight: 500; 396 | /* отступы между строчками с именем */ 397 | padding-bottom: 0.1em; 398 | } 399 | 400 | @media (max-width:1439.98px) { 401 | .name { 402 | font-size: 4.79vw; 403 | } 404 | } 405 | 406 | @media (max-width:1023.98px) { 407 | .name { 408 | font-size: 6.12vw; 409 | margin-top: 9.72vw; 410 | } 411 | } 412 | 413 | .name div { 414 | margin-bottom: 0.3em; 415 | /* текст выводится заглавными буквами */ 416 | text-transform: uppercase; 417 | } 418 | 419 | .list { 420 | /* текст выводится заглавными буквами */ 421 | text-transform: uppercase; 422 | /* размер шрифта */ 423 | font-size: 1.25vw; 424 | /* отступы между строчками */ 425 | margin: 1.39em 0px; 426 | } 427 | 428 | @media (max-width:1439.98px) { 429 | .list { 430 | font-size: 1.76vw; 431 | } 432 | } 433 | 434 | @media (max-width:1023.98px) { 435 | .list { 436 | font-size: 3.89vw; 437 | } 438 | } 439 | 440 | /* цвет наименований */ 441 | .list span:first-child { 442 | color: #666666; 443 | } 444 | 445 | .list span:nth-child(2) { 446 | padding: 0vw 1.11em; 447 | } 448 | 449 | .links { 450 | display: flex; 451 | column-gap: 2.78vw; 452 | } 453 | 454 | /* Ссылки */ 455 | a { 456 | display: inline-block; 457 | /* текст заглавными буквами */ 458 | text-transform: uppercase; 459 | /* внешние отступы от соседних элементов */ 460 | margin-top: 6.94vw; 461 | /* отступы со всех стором от текста до рамки */ 462 | padding: 2.08vw; 463 | font-size: 1.11vw; 464 | /* цвет шрифта */ 465 | color: #101010; 466 | /* рамка ссылки: толщина линии, вид рамки, цвет */ 467 | border: 0.28vw solid rgb(0, 0, 0); 468 | /* цвет фона */ 469 | background-color: #FFFFFF; 470 | } 471 | 472 | @media (max-width:1439.98px) { 473 | .links { 474 | width: 100%; 475 | display: block; 476 | margin-top: 5.37vw; 477 | } 478 | 479 | a { 480 | font-size: 2.25vw; 481 | width: 100%; 482 | text-align: center; 483 | border-width: 0.39vw; 484 | margin-top: 2.44vw; 485 | } 486 | } 487 | 488 | @media (max-width:1023.98px) { 489 | .links { 490 | display: block; 491 | margin-top: 5.37vw; 492 | } 493 | 494 | a { 495 | font-size: 3.89vw; 496 | width: 100%; 497 | text-align: center; 498 | border-width: 1.11vw; 499 | margin-top: 4.17vw; 500 | padding: 5.56vw; 501 | } 502 | } 503 | 504 | /* Изменение цвета при наведении на ссылку */ 505 | a:hover { 506 | color: #D02F21; 507 | } 508 | 509 | /* ======= Анимация прыжка Mario ======= */ 510 | /* при изменении скорости анимации, необходимо поменять время в анимациях 511 | под именами jump и rotate_img для сохранения синхронности */ 512 | .mario.jump { 513 | /* animation: 514 | jump - имя анимации 515 | 1.5s - длительнасть в секундах 516 | linear - линейность воспроизведения (можно заменить на ease) 517 | forwards - после проигрывания остаётся конечное положение Марио 518 | */ 519 | animation: jump 1.5s linear 1 forwards; 520 | } 521 | 522 | .mario.jump .mario-img { 523 | position: relative; 524 | animation: rotate_img 1.5s linear 1 forwards; 525 | } 526 | 527 | @keyframes jump { 528 | 0% { 529 | transform: rotate(0deg); 530 | } 531 | 532 | 40% { 533 | transform: rotate(130deg); 534 | } 535 | 536 | 100% { 537 | transform: rotate(130deg); 538 | } 539 | } 540 | 541 | @keyframes rotate_img { 542 | 0% { 543 | transform: rotate(0deg); 544 | } 545 | 546 | 40% { 547 | transform: rotate(-130deg) translate(0%, 0%); 548 | } 549 | 550 | 100% { 551 | transform: rotate(-130deg) translate(0%, 200%); 552 | } 553 | } 554 | 555 | /* анимация двойного прыжка */ 556 | .mario.duble_jump { 557 | animation: duble_jump 5s linear infinite; 558 | } 559 | 560 | @keyframes duble_jump { 561 | 0% { 562 | transform: translate(0vw, 0vw); 563 | } 564 | 565 | 8% { 566 | transform: translate(0vw, -1.5vw); 567 | } 568 | 569 | 16% { 570 | transform: translate(0vw, 0vw); 571 | } 572 | 573 | 24% { 574 | transform: translate(0vw, -1.5vw); 575 | } 576 | 577 | 32% { 578 | transform: translate(0vw, 0vw); 579 | } 580 | 581 | 100% {} 582 | } -------------------------------------------------------------------------------- /fonts/NineteenNinetySeven.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artiftw/-HTML-CSS/d44367a4bf4187ce871d8ccb94f6168e5c7c9723/fonts/NineteenNinetySeven.otf -------------------------------------------------------------------------------- /fonts/NineteenNinetySeven.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artiftw/-HTML-CSS/d44367a4bf4187ce871d8ccb94f6168e5c7c9723/fonts/NineteenNinetySeven.ttf -------------------------------------------------------------------------------- /fonts/NineteenNinetySeven.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artiftw/-HTML-CSS/d44367a4bf4187ce871d8ccb94f6168e5c7c9723/fonts/NineteenNinetySeven.woff -------------------------------------------------------------------------------- /fonts/NineteenNinetySeven.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artiftw/-HTML-CSS/d44367a4bf4187ce871d8ccb94f6168e5c7c9723/fonts/NineteenNinetySeven.woff2 -------------------------------------------------------------------------------- /image/cloud.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artiftw/-HTML-CSS/d44367a4bf4187ce871d8ccb94f6168e5c7c9723/image/cloud.png -------------------------------------------------------------------------------- /image/cuesor_on_link.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artiftw/-HTML-CSS/d44367a4bf4187ce871d8ccb94f6168e5c7c9723/image/cuesor_on_link.png -------------------------------------------------------------------------------- /image/default__cursor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artiftw/-HTML-CSS/d44367a4bf4187ce871d8ccb94f6168e5c7c9723/image/default__cursor.png -------------------------------------------------------------------------------- /image/favicon__mario.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artiftw/-HTML-CSS/d44367a4bf4187ce871d8ccb94f6168e5c7c9723/image/favicon__mario.png -------------------------------------------------------------------------------- /image/floor.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artiftw/-HTML-CSS/d44367a4bf4187ce871d8ccb94f6168e5c7c9723/image/floor.jpg -------------------------------------------------------------------------------- /image/fon_1024.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artiftw/-HTML-CSS/d44367a4bf4187ce871d8ccb94f6168e5c7c9723/image/fon_1024.jpg -------------------------------------------------------------------------------- /image/fon_1440.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artiftw/-HTML-CSS/d44367a4bf4187ce871d8ccb94f6168e5c7c9723/image/fon_1440.jpg -------------------------------------------------------------------------------- /image/foto.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artiftw/-HTML-CSS/d44367a4bf4187ce871d8ccb94f6168e5c7c9723/image/foto.jpg -------------------------------------------------------------------------------- /image/foto__frame.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artiftw/-HTML-CSS/d44367a4bf4187ce871d8ccb94f6168e5c7c9723/image/foto__frame.jpg -------------------------------------------------------------------------------- /image/fotoq.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artiftw/-HTML-CSS/d44367a4bf4187ce871d8ccb94f6168e5c7c9723/image/fotoq.jpg -------------------------------------------------------------------------------- /image/green__pipe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artiftw/-HTML-CSS/d44367a4bf4187ce871d8ccb94f6168e5c7c9723/image/green__pipe.png -------------------------------------------------------------------------------- /image/mario.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artiftw/-HTML-CSS/d44367a4bf4187ce871d8ccb94f6168e5c7c9723/image/mario.png -------------------------------------------------------------------------------- /image/shelf.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artiftw/-HTML-CSS/d44367a4bf4187ce871d8ccb94f6168e5c7c9723/image/shelf.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Super Artemis 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 | 21 | Облако 22 | 23 | Облако 24 | 25 | Облако 26 | 27 | Облако 28 | 29 | Полка на которой стоит Mario 30 | 31 |
32 | Марио 33 |
34 | 35 | Зеленая труба 36 | 37 |
38 | Пол из камней 39 |
40 | 41 | 42 | 43 |
44 |
45 |
46 |
47 | 48 | Рамка для фотографии из камней 49 |
50 |
51 | 52 | Фотография 53 |
54 |
55 |
56 | 57 |
58 |
Artemis
59 |
Alexandrov
60 |
61 |
62 |
age:30
63 |
work:qa-engineer
64 |
Power:Postman
65 |
location:Earth
66 | 67 |
68 |
69 |
70 | 71 |
72 |
Telegram
73 |
Vkontakte
74 |
Email
75 |
X.com
76 | 77 |
78 |
79 |
80 |
81 | 82 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /js/script.js: -------------------------------------------------------------------------------- 1 | let audio = document.querySelector('audio'); 2 | let mario = document.querySelector('.mario'); 3 | document.addEventListener('click', (event) => { 4 | if (event.target.closest('.mario-img')) { 5 | mario.classList.remove('duble_jump'); 6 | mario.classList.add('jump'); 7 | audio.play(); 8 | } 9 | if (event.target.closest('.green__pipe')) { 10 | mario.classList.remove('jump'); 11 | mario.classList.add('duble_jump'); 12 | } 13 | }) --------------------------------------------------------------------------------