├── README.md
├── image
    ├── cloud.png
    ├── floor.jpg
    ├── foto.jpg
    ├── fotoq.jpg
    ├── mario.png
    ├── shelf.jpg
    ├── fon_1024.jpg
    ├── fon_1440.jpg
    ├── foto__frame.jpg
    ├── green__pipe.png
    ├── cuesor_on_link.png
    ├── default__cursor.png
    └── favicon__mario.png
├── audio
    └── super-mario.mp3
├── .github
    └── workflows
    │   ├── .DS_Store
    │   └── cicd.yml
├── fonts
    ├── NineteenNinetySeven.otf
    ├── NineteenNinetySeven.ttf
    ├── NineteenNinetySeven.woff
    └── NineteenNinetySeven.woff2
├── js
    └── script.js
├── css
    ├── resetStyle.css
    └── style.css
└── index.html


/README.md:
--------------------------------------------------------------------------------
1 | # -HTML-CSS


--------------------------------------------------------------------------------
/image/cloud.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/artiftw/-HTML-CSS/HEAD/image/cloud.png


--------------------------------------------------------------------------------
/image/floor.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/artiftw/-HTML-CSS/HEAD/image/floor.jpg


--------------------------------------------------------------------------------
/image/foto.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/artiftw/-HTML-CSS/HEAD/image/foto.jpg


--------------------------------------------------------------------------------
/image/fotoq.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/artiftw/-HTML-CSS/HEAD/image/fotoq.jpg


--------------------------------------------------------------------------------
/image/mario.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/artiftw/-HTML-CSS/HEAD/image/mario.png


--------------------------------------------------------------------------------
/image/shelf.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/artiftw/-HTML-CSS/HEAD/image/shelf.jpg


--------------------------------------------------------------------------------
/image/fon_1024.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/artiftw/-HTML-CSS/HEAD/image/fon_1024.jpg


--------------------------------------------------------------------------------
/image/fon_1440.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/artiftw/-HTML-CSS/HEAD/image/fon_1440.jpg


--------------------------------------------------------------------------------
/audio/super-mario.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/artiftw/-HTML-CSS/HEAD/audio/super-mario.mp3


--------------------------------------------------------------------------------
/image/foto__frame.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/artiftw/-HTML-CSS/HEAD/image/foto__frame.jpg


--------------------------------------------------------------------------------
/image/green__pipe.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/artiftw/-HTML-CSS/HEAD/image/green__pipe.png


--------------------------------------------------------------------------------
/image/cuesor_on_link.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/artiftw/-HTML-CSS/HEAD/image/cuesor_on_link.png


--------------------------------------------------------------------------------
/image/default__cursor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/artiftw/-HTML-CSS/HEAD/image/default__cursor.png


--------------------------------------------------------------------------------
/image/favicon__mario.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/artiftw/-HTML-CSS/HEAD/image/favicon__mario.png


--------------------------------------------------------------------------------
/.github/workflows/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/artiftw/-HTML-CSS/HEAD/.github/workflows/.DS_Store


--------------------------------------------------------------------------------
/fonts/NineteenNinetySeven.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/artiftw/-HTML-CSS/HEAD/fonts/NineteenNinetySeven.otf


--------------------------------------------------------------------------------
/fonts/NineteenNinetySeven.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/artiftw/-HTML-CSS/HEAD/fonts/NineteenNinetySeven.ttf


--------------------------------------------------------------------------------
/fonts/NineteenNinetySeven.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/artiftw/-HTML-CSS/HEAD/fonts/NineteenNinetySeven.woff


--------------------------------------------------------------------------------
/fonts/NineteenNinetySeven.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/artiftw/-HTML-CSS/HEAD/fonts/NineteenNinetySeven.woff2


--------------------------------------------------------------------------------
/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 | })


--------------------------------------------------------------------------------
/.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


--------------------------------------------------------------------------------
/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 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="ru">
 3 | 
 4 | <head>
 5 |    <!-- Название страницы, которое отображается в верху вкладки браузера -->
 6 |    <title>Super Artemis</title>
 7 |    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
 8 |    <meta name="viewport" content="width=device-width" initial-scale=1.0>
 9 |    <!-- изображение Марио, отображается перед названием страницы вверху вкладки браузера -->
10 |    <link rel="icon" href="./image/favicon__mario.png" type="image/png">
11 |    <!-- подключение файла стилей, который убирает настройки браузера для одинакового отображения страницы во всех браузерах -->
12 |    <link rel="stylesheet" href="css/resetStyle.css">
13 |    <!-- подключение файла стилей -->
14 |    <link rel="stylesheet" href="css/style.css?_v=1">
15 | </head>
16 | 
17 | <body>
18 |    <div class="wrapper">
19 |       <main class="main">
20 |          <!-- Облако -->
21 |          <img class="cloud_1" src="./image/cloud.png" alt="Облако">
22 |          <!-- Облако -->
23 |          <img class="cloud_2" src="./image/cloud.png" alt="Облако">
24 |          <!-- Облако -->
25 |          <img class="cloud_3" src="./image/cloud.png" alt="Облако">
26 |          <!-- Облако -->
27 |          <img class="cloud_4" src="./image/cloud.png" alt="Облако">
28 |          <!-- Полка на которой стоит Марио -->
29 |          <img class="shelf" src="./image/shelf.jpg" alt="Полка на которой стоит Mario">
30 |          <!-- Изображение Марио -->
31 |          <div class="mario duble_jump">
32 |             <img class="mario-img" src="./image/mario.png" alt="Марио">
33 |          </div>
34 |          <!-- Зелёная труба -->
35 |          <img class="green__pipe" src="./image/green__pipe.png" alt="Зеленая труба">
36 |          <!-- Пол -->
37 |          <div class="floor">
38 |             <img class="floor-img" src="./image/floor.jpg" alt="Пол из камней">
39 |          </div>
40 | 
41 |          <!-- аудио файл, воспроизводится при прыжке Марио -->
42 |          <audio src="./audio/super-mario.mp3" preload></audio>
43 |          <div class="container">
44 |             <section class="data">
45 |                <div class="foto">
46 |                   <div class="foto__frame">
47 |                      <!-- Рамка для фото -->
48 |                      <img src="./image/foto__frame.jpg" alt="Рамка для фотографии из камней">
49 |                   </div>
50 |                   <div class="foto__foto">
51 |                      <!-- Фото -->
52 |                      <img src="./image/foto.jpg" alt="Фотография">
53 |                   </div>
54 |                </div>
55 |                <div class="text">
56 |                   <!-- Имя -->
57 |                   <div class="name">
58 |                      <div>Artemis</div>
59 |                      <div>Alexandrov</div>
60 |                   </div>
61 |                   <div>
62 |                      <div class="list"><span>age</span><span>:</span><span>30</span></div>
63 |                      <div class="list"><span>work</span><span>:</span><span>qa-engineer</span></div>
64 |                      <div class="list"><span>Power</span><span>:</span><span>Postman</span></div>
65 |                      <div class="list"><span>location</span><span>:</span><span>Earth</span></div>
66 | 
67 |                   </div>
68 |                </div>
69 |             </section>
70 |             <!-- Ссылки -->
71 |             <section class="links">
72 |                <div class="link"><a href="https://t.me/artiftw">Telegram</a></div>
73 |                <div class="link"><a href="https://vk.com/art1ftw">Vkontakte</a></div>
74 |                <div class="link"><a href="mailto:kapantin@yahoo.com">Email</a></div>
75 |                <div class="link"><a href="https://x.com/art1ftw93">X.com</a></div>
76 | 
77 |             </section>
78 |          </div>
79 |       </main>
80 |    </div>
81 |    <!-- подключение файла javascript -->
82 |    <script src="js/script.js"></script>
83 | </body>
84 | 
85 | </html>


--------------------------------------------------------------------------------
/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 | }


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