From 0069004f7469c61064a6ff3c51d4fbc917866cea Mon Sep 17 00:00:00 2001 From: VitalyChy Date: Mon, 18 Mar 2024 13:33:13 +0300 Subject: [PATCH] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=BB?= =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=BE=D1=88=D0=B8=D0=B1=D0=BE=D0=BA?= =?UTF-8?q?=20=D0=BF=D0=BE=D1=81=D0=BB=D0=B5=20=D0=BF=D0=B5=D1=80=D0=B2?= =?UTF-8?q?=D0=BE=D0=B3=D0=BE=20=D0=9A=D0=BE=D0=B4=D0=A0=D0=B5=D0=B2=D1=8C?= =?UTF-8?q?=D1=8E=20/=20ver.3.1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- fonts/fonts.css | 4 +- index.html | 194 +++++++++++++++++++++--------------------- styles/animations.css | 22 ++--- styles/style.css | 46 +++++----- styles/themes.css | 10 +-- styles/variables.css | 2 +- 6 files changed, 134 insertions(+), 144 deletions(-) diff --git a/fonts/fonts.css b/fonts/fonts.css index 5b0f708..243f88a 100644 --- a/fonts/fonts.css +++ b/fonts/fonts.css @@ -10,8 +10,8 @@ font-family: 'Inter'; src: local('Inter'), - url('../fonts/Inter-Variable.woff2') format('woff2 supports variations'), - url('../fonts/Inter-Variable.woff2') format('woff2-variations'); + url('./Inter-Variable.woff2') format('woff2 supports variations'), + url('./Inter-Variable.woff2') format('woff2-variations'); font-display: swap; font-weight: 400 785; } \ No newline at end of file diff --git a/index.html b/index.html index d22eebe..8e09402 100644 --- a/index.html +++ b/index.html @@ -1,25 +1,25 @@ - - - + + + Закрывающий тег - - - - - - - - - + + + + + + + + +
-

</HTML>

-

закрывающий тег

+ </HTML> +

закрывающий тег

-
+

Фритрек и нулевой спринт: Подготовка к работе

@@ -58,7 +58,7 @@

src="./images/1.jpg" loading="lazy" alt="Столб с большой связкой проводов" - > + /> <Шаг в неизвестность>
@@ -68,11 +68,11 @@

знания могут повлиять на ваше будущее.

- Было страшно делать шаг в новое и неизведанное. + Место для ваших воспоминаний о начале обучения.

- -

-
-
+ +

1 спринт: Я — чистый лист

@@ -120,7 +120,7 @@

1 спринт: Я — чистый лист

src="./images/2.jpg" loading="lazy" alt="Вендинговый автомат на углу дома" - > + /> <Новое>
@@ -131,10 +131,12 @@

1 спринт: Я — чистый лист

за этим ощущением скрываются более глубокие вопросы: с чего начать? а вдруг будет слишком сложно? что, если я не справлюсь?

-

Большой интерес.

+

+ Место для ваших воспоминаний о начале первого спринта. +

- -
-
-
+ +

1 спринт: А если не получится?

@@ -182,7 +184,7 @@

1 спринт: А если не получится?

+ /> <Вдохновение>
@@ -192,11 +194,11 @@

1 спринт: А если не получится?

- Если не получится, будет пробовать снова и снова. + Место для ваших воспоминаний об окончании первого спринта.

- -
-
-
+ +

2 спринт: Погоня за идеалом

@@ -244,7 +246,7 @@

2 спринт: Погоня за идеалом

src="./images/4.jpg" loading="lazy" alt="Замок Хиросима" - > + /> <desigions>
@@ -256,11 +258,11 @@

2 спринт: Погоня за идеалом

старались просто сделать.

- Мой идеал, в моей голове, а все остальное дизайн. + Место для ваших воспоминаний о начале второго спринта.

- -
-
-
+ +

2 спринт: О тех, кто рядом

@@ -308,7 +310,7 @@

2 спринт: О тех, кто рядом

src="./images/5.jpg" loading="lazy" alt="Вид на Тойкийскую башню с высоты птичьего полета." - > + /> supervision
@@ -321,11 +323,11 @@

2 спринт: О тех, кто рядом

единомышленники, не правда ли?

- Окружают друзья, которых встретил в ЯндексПрактикуме. + Место для ваших воспоминаний об окончании второго спринта.

- -
-
-
+ +

3 спринт: Обходные стратегии

@@ -373,7 +375,7 @@

3 спринт: Обходные стратегии

src="./images/6.jpg" loading="lazy" alt="Пешеходный переход" - > + /> <relax>
@@ -382,10 +384,12 @@

3 спринт: Обходные стратегии

вам могло показаться, что решения просто иссякли. Значит, пришло время посмотреть на задачу под другим углом.

-

Утро вечера мудрене́е!

+

+ Место для ваших воспоминаний о начале третьего спринта. +

- -
-
-
+ +

3 спринт: Когда опускаются руки

@@ -433,7 +437,7 @@

3 спринт: Когда опускаются руки src="./images/7.jpg" loading="lazy" alt="Широкий перекресток в Японском стиле" - > + /> <Focus>

@@ -444,10 +448,12 @@

3 спринт: Когда опускаются руки пожить. В такие моменты очень нужна концентрация. Вспомните, откуда вы её черпали.

-

Сроки выполнения - главная концентрация.

+

+ Место для ваших воспоминаний об окончании третьего спринта. +

- -
-
-
+ +

«Сейчас я здесь»

@@ -495,7 +501,7 @@

«Сейчас я здесь»

src="./images/8.jpg" loading="lazy" alt="Дорожка ведущая через ворота Тори к храму" - > + /> <experience>
@@ -508,11 +514,12 @@

«Сейчас я здесь»

Ведь часто путь — и есть результат.

- Мир который хочется посетить и посмотреть красотищу. + Место, чтобы остановиться, подумать и написать, что вы чувствуете + в этой точке пути.

- -
-
+
- + + +
+
+ + + + Вставьте дискету, чтобы продолжить +
+ +
+ diff --git a/styles/animations.css b/styles/animations.css index 9a9f309..999757c 100644 --- a/styles/animations.css +++ b/styles/animations.css @@ -30,8 +30,13 @@ transition: fill 0.3s linear; } +.like-icon .contour { + fill: var(--heart-contour-color); + transition-delay: 0.06s; +} + .like-icon.is-liked .contour { - fill: var(--accent-color); + fill: var(--heart-sparks-color); transition: fill 0.3 linear; transition-delay: 0.6s; } @@ -74,21 +79,6 @@ transition-delay: 0.05s; } -.like-icon.is-liked .contour { - fill: var(--heart-sparks-color); - transition-delay: 0.06s; -} - -.like-icon .main-body { - transition: fill 0s linear; - transition-delay: 0s; -} - -.like-icon .core { - transition: fill 0s linear; - transition-delay: 0s; -} - .like-icon.is-liked .sparks { animation: sparks 0.3s ease-in 0.3s 1 alternate; } diff --git a/styles/style.css b/styles/style.css index 9198ca0..864e991 100644 --- a/styles/style.css +++ b/styles/style.css @@ -25,7 +25,7 @@ margin: 0 auto; padding-block-start: 100px; color: var(--accent-color, #000); - font-family: var(--font-Int), sans-serif; + font-family: var(--font-Int), sans-serif, Arial, Helvetica; font-size: var(--font-size-18px); background-color: var(--bg-color); background-image: var(--background-image); @@ -55,14 +55,19 @@ flex-direction: column; padding-block-start: clamp(7.5rem, 7.148rem + 1.502vw, 8.5rem); color: var(--accent-color); - font-family: var(--font-PS2P), sans-serif; + font-family: var(--font-PS2P), sans-serif, Arial, Helvetica; text-align: center; - -webkit-padding-before: clamp(7.5rem, 7.148rem + 1.502vw, 8.5rem); + -webkit-padding-before: clamp(7.5rem, 7.148rem + 1.502vw, 8.5rem); } .header__title { font-size: clamp(3.0625rem, 2.7104rem + 1.5023vw, 4.0625rem); text-align: center; + text-decoration: none; +} + +.header__title:focus { + outline: none; } .header__subtitle { @@ -81,8 +86,7 @@ gap: 8px; margin-inline-start: 20px; padding-block: 24px; - -webkit-margin-start: 20px; - + -webkit-margin-start: 20px; } .theme-menu__button { @@ -98,13 +102,12 @@ .theme-menu__button:disabled::before { content: '▶'; - position: absolute; - margin-inline-start: -18px; + position: absolute; + margin-left: -18px; -webkit-animation: cursor 0.5s infinite ease-in-out alternate; - animation: cursor 0.5s infinite ease-in-out alternate; /* Пвтор "Бесконеный", "медленно начинается и заканчивается, а в середине ускоряется", Четный/Нечётный повтор анимации */ + animation: cursor 0.5s infinite ease-in-out alternate; /* Повтор "Бесконеный", "медленно начинается и заканчивается, а в середине ускоряется", Четный/Нечётный повтор анимации */ -webkit-animation-name: cursor; - animation-name: cursor; /* Имя анимациии */ - -webkit-margin-start: -18px; + animation-name: cursor; /* Имя анимациии */ } .theme-menu__button:disabled { @@ -233,13 +236,12 @@ .watermark { position: absolute; - padding-block-start: 22px; + top: 22px; opacity: 50%; - font-family: var(--font-PS2P); + font-family: var(--font-PS2P), sans-serif, Arial, Helvetica; font-size: 14px; line-height: 14px; - text-shadow:-1px 0 var(--watermark), 0 1px var(--watermark), 1px 0 var(--watermark), 0 -1px var(--watermark); - -webkit-padding-before: 22px; + text-shadow:-1px 0 var(--watermark), 0 1px var(--watermark), 1px 0 var(--watermark), 0 -1px var(--watermark); inset-inline-end: min(13px); font-variation-settings: 'wght' var(--font-weight-text); mix-blend-mode: hard-light; @@ -257,7 +259,7 @@ display: flex; flex-direction: column; gap: 27px; - padding: 25px 25px 25px 25px; + padding: 25px 25px 0 25px; font-variation-settings: 'wght' var(--font-weight-text); } @@ -358,7 +360,7 @@ } .button__text { - font-family: var(--font-PS2P); + font-family: var(--font-PS2P), sans-serif, Arial, Helvetica; font-size: var(--font-size-14px); } @@ -373,13 +375,13 @@ .dialog-window[open] { display: flex; - align-items: center; + align-items: center; + min-height: 191px; border: 2px solid var(--contour-color); color: var(--accent-color); - font-family: var(--font-PS2P), sans-serif; + font-family: var(--font-PS2P), sans-serif, Arial, Helvetica; font-size: var(--font-size-14px); background-color: var(--bg-color); - block-size: 191px; inline-size: clamp(21.313rem, 21.049rem + 1.127vw, 22.063rem); } @@ -418,7 +420,7 @@ } .dialog__text { - font-family: var(--font-PS2P), sans-serif; + font-family: var(--font-PS2P), sans-serif, Arial, Helvetica; font-size: var(--font-size-14px); line-height: 21px; text-transform: uppercase; @@ -455,9 +457,7 @@ block-size: 700px; } - .watermark { - padding-block-start: 25px; - -webkit-padding-before: 25px; + .watermark { inset-inline-end: 25px; } diff --git a/styles/themes.css b/styles/themes.css index 005c8de..81932fc 100644 --- a/styles/themes.css +++ b/styles/themes.css @@ -15,7 +15,7 @@ --watermark: #fff; --bt-color: #fff; --heart-contour-color: #000; - --heart-sparks-color: red; + --heart-sparks-color: #ff0000; --heart-body-color: #000; --background-image: repeating-linear-gradient(#d3d3d3,#d3d3d3 2px, transparent 2px, transparent 4px), @@ -31,10 +31,10 @@ --bg-color: #000; --contour-heart: #00CC14; --core-heart: #ff0000; - --watermark: #00CC14; + --watermark: #FFF; --bt-color: #00CC14; --heart-contour-color: #00CC14; - --heart-sparks-color: red; + --heart-sparks-color: #ff0000; --heart-body-color: #00CC14; --background-image: repeating-linear-gradient(#000,#000 2px, transparent 2px, transparent 4px), @@ -52,10 +52,10 @@ --bg-color: #000; --contour-heart: #00CC14; --core-heart: #ff0000; - --watermark: #00CC14; + --watermark: #FFF; --bt-color: #00CC14; --heart-contour-color: #00CC14; - --heart-sparks-color: red; + --heart-sparks-color: #ff0000; --heart-body-color: #00CC14; --background-image: repeating-linear-gradient(#000,#000 2px, transparent 2px, transparent 4px), diff --git a/styles/variables.css b/styles/variables.css index f6fdda9..f5a3218 100644 --- a/styles/variables.css +++ b/styles/variables.css @@ -15,7 +15,7 @@ --watermark: #fff; --bt-color: #fff; /* */ --heart-contour-color: #000; - --heart-sparks-color: red; + --heart-sparks-color: #ff0000; --heart-body-color: #000; --background-image: repeating-linear-gradient(#d3d3d3,#d3d3d3 2px, transparent 2px, transparent 4px),