diff --git a/images/1.jpg b/images/1.jpg new file mode 100644 index 0000000..191a91d Binary files /dev/null and b/images/1.jpg differ diff --git a/images/2.jpg b/images/2.jpg new file mode 100644 index 0000000..1f2ad99 Binary files /dev/null and b/images/2.jpg differ diff --git a/images/3.jpg b/images/3.jpg new file mode 100644 index 0000000..8cd0fc1 Binary files /dev/null and b/images/3.jpg differ diff --git a/images/4.jpg b/images/4.jpg new file mode 100644 index 0000000..183d3f4 Binary files /dev/null and b/images/4.jpg differ diff --git a/images/5.jpg b/images/5.jpg new file mode 100644 index 0000000..5b7761b Binary files /dev/null and b/images/5.jpg differ diff --git a/images/6.jpg b/images/6.jpg new file mode 100644 index 0000000..66d4222 Binary files /dev/null and b/images/6.jpg differ diff --git a/images/7.jpg b/images/7.jpg new file mode 100644 index 0000000..a1f9180 Binary files /dev/null and b/images/7.jpg differ diff --git a/images/8.jpg b/images/8.jpg new file mode 100644 index 0000000..5703dff Binary files /dev/null and b/images/8.jpg differ diff --git a/index.html b/index.html index c66a4b5..fc83e9b 100644 --- a/index.html +++ b/index.html @@ -5,22 +5,21 @@ Закрывающий тег - - - + + + -
+

</HTML>

-

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

+

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

-
+
+
+

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

+
+
+ Фургон в ночи + <Шаг в неизвестность> +
+
+

+ Это было самое начало пути. На этом этапе важно было проникнуться + основами и настроиться на учёбу. И, возможно, подумать, как новые + знания могут повлиять на ваше будущее. +

+

+ Было страшно делать шаг в новое и неизведанное. +

+
+
+ + +
+
+
+
+

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

+
+
+ Вендинговый автомат на углу дома + <Новое> +
+
+

+ На первых этапах мы работали со страхами и сомнениями, которые + часто испытывают новички. Один из них — страх перед чистым листом. + Это, конечно же, намного сложнее, чем боязнь куска бумаги. Часто + за этим ощущением скрываются более глубокие вопросы: с чего + начать? а вдруг будет слишком сложно? что, если я не справлюсь? +

+

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

+
+
+ + +
+
+
+
+

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

+
+
+ Ворота Тори на берегу моря + <Вдохновение> +
+
+

+ Первый проект — позади! Но это всё ещё самое начало пути. Радость + могла быстро померкнуть и смениться ожиданием провала. Или вы, + наоборот, могли вдохновиться успехами и поверить в себя. +

+

+ Если не получится, будет пробовать снова и снова. +

+
+
+ + +
+
+
+
+

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

+
+
+ Замок Хиросима + <desigions> +
+
+

+ На этом этапе вы уже достаточно разбирались в основах вёрстки, + чтобы понять, как много ещё впереди. Вы могли попытаться погнаться + за идеалом и понять, что он недостижим. А, может, вы вовсе и не + подвержены перфекционизму и вместо того, чтобы сделать идеально, + старались просто сделать. +

+

+ Мой идеал, в моей голове, а все остальное дизайн. +

+
+
+ + +
+
+
+
+

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

+
+
+ Вид на Тойкийскую башню с высоты птичьего полета. + supervision +
+
+

+ Всё это время вы были не одиноки (хотя, возможно, иногда и + чувствовали, что одни против целого мира). Вас окружали + одногруппники, команда сопровождения и просто близкие люди, + которым можно пожаловаться, если очередной макет просто так не + поддавался. Осваивать что-то новое легче, когда рядом есть + единомышленники, не правда ли? +

+

+ Окружают друзья, которых встретил в ЯндексПрактикуме. +

+
+
+ + +
+
+
+
+

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

+
+
+ Пешеходный переход + <relax> +
+
+

+ На этом курсе вы постоянно решали разные задачи. В какой-то момент + вам могло показаться, что решения просто иссякли. Значит, пришло + время посмотреть на задачу под другим углом. +

+

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

+
+
+ + +
+
+
+
+

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

+
+
+ Широкий перекресток в Японском стиле + <Focus> +
+
+

+ Во время учёбы часто возникает чувство, когда не знаешь, за что + хвататься. Вроде и проектную пора сдавать, и задачи хочется + порешать, и в теории получше разобраться, и жизнь не забыть + пожить. В такие моменты очень нужна концентрация. Вспомните, + откуда вы её черпали. +

+

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

+
+
+ + +
+
+
+
+

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

+
+
+ Дорожка ведущая через ворота Тори к храму + <experience> +
+
+

+ Сейчас вы уже очень много знаете о вёрстке. Но это только начало. + Во-первых, впереди ещё много материала про «красотищу». Во-вторых, + с окончанием курса учёба не заканчивается. Вёрстка — это целый + мир. И этот мир постоянно меняется. Познать его полностью не + получится, но это тот случай, когда важен сам процесс познания. + Ведь часто путь — и есть результат. +

+

+ Мир который хочется посетить и посмотреть красотищу. +

+
+
+ + +
+
+
+
+ diff --git a/styles/animations.css b/styles/animations.css index e40f117..93c7e32 100644 --- a/styles/animations.css +++ b/styles/animations.css @@ -12,3 +12,14 @@ Кроме этого, не меняйте HTML переключателя тем. Его разметка также гарантирует работу своего скрипта. */ + +@keyframes cursor { + + from { + left: 0; + } + + to { + left: 4px; + } +} \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index 7bc0945..20cb54b 100644 --- a/styles/style.css +++ b/styles/style.css @@ -19,46 +19,53 @@ /* 3. Блок Footer */ /* 4. Медиазапросы */ -.page { +.page { + display: flex; + flex-direction: column; + margin: 0 auto; padding-block-start: 100px; color: var(--accent-color, #000); - font-family: var(--font-Int), serif; - font-size: var(--font-size); + font-family: var(--font-Int), sans-serif; + font-size: var(--font-size-18px); background-color: var(--bg-color); background-image: var(--background-image); background-repeat: no-repeat; background-position: center; background-size: cover; background-attachment: fixed; + inline-size: var(--width-size); min-inline-size: 320px; min-block-size: 100dvb; font-variation-settings: 'wght' var(--font-weight-title), var(--font-weight-text); + } /* ########################################## /* /* 1. Блок Header Начало */ /* ########################################## */ +.decorative__frame { + border: 2px solid var(--contour-color); + background-color: var(--bg-color); +} + .header { display: flex; - flex-direction: column; - border: 2px solid var(--contour-color); - padding-inline: 14px; - font-family: var(--font-PS2P); - background-color: #fff; + 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; + text-align: center; } -.header__title { - padding-block-start: 120px; +.header__title { font-size: clamp(3.0625rem, 2.7104rem + 1.5023vw, 4.0625rem); text-align: center; } -.header__paragraph { +.header__subtitle { padding-block-start: 20px; - font-size: clamp(0.875rem, 0.6769rem + 0.8451vw, 1.4375rem); - text-align: center; + font-size: clamp(0.875rem, 0.6769rem + 0.8451vw, 1.4375rem); text-transform: uppercase; } @@ -68,22 +75,317 @@ flex-wrap: wrap; align-items: flex-start; align-content: center; - gap: 14px; -} - -.header__theme-menu { - padding-block: 25px; + gap: 8px; + margin-inline-start: 20px; + padding-block: 24px; + } .theme-menu__button { + position: relative; border: none; - font-size: 14px; + outline: none; + color: var(--accent-color); + font-size: var(--font-size-14px); text-transform: uppercase; background-color: transparent; - cursor: pointer; + cursor: pointer; +} + +.theme-menu__button:disabled::before { + content: '▶'; + position: absolute; + margin-inline-start: -18px; + animation: cursor 0.5s infinite ease-in-out alternate; /* Пвтор "Бесконеный", "медленно начинается и заканчивается, а в середине ускоряется", Четный/Нечётный повтор анимации */ + animation-name: cursor; /* Имя анимациии */ +} + +.theme-menu__button:disabled { + opacity: 60%; + pointer-events: none ; +} + +.theme-menu__button::after { + content: ""; + position: absolute; + right: 8px; + display: block; + border-block-end: 2px solid var(--accent-color); + background-color: var(--accent-color); + transition: transform 0.3s ease; + transform: scale(0, 1); + transform-origin: left; + inset-inline-start: 6px; +} + +.theme-menu__button:focus { + outline: none; + opacity: 0.6; +} +.theme-menu__button:focus-visible::after { + transform: scale(1, 1); +} + +.theme-menu__button:hover { + opacity: 60%; } /* ########################################## */ /* Блок Header Конец */ -/* ########################################## */ \ No newline at end of file +/* ########################################## */ + +/* ########################################## /* +/* 2. Блок Main Начало */ +/* ########################################## */ + +.main { + display: flex; + flex-direction: column; + margin: 0 auto; /* Выравнивание по центру */ + padding-block-start: 50px; +} + +.card { + margin-block-start: 50px; +} + +.card__section { + display: flex; + flex-direction: column; +} + +.section { + border-top: 2px solid var(--accent-color); + border-bottom: 2px solid var(--accent-color); + block-size: clamp(23.438rem, 10.586rem + 54.836vw, 59.938rem); +} + +.card__title { + padding: 4px 10px 6px; + font-size: var(--font-size-18px); + font-variation-settings: 'wght' var(--font-weight-title); +} + +.card__picture-image { + border-bottom: 2px solid var(--accent-color); + object-fit: cover; + inline-size: 100%; + block-size: 100%; + +} + +/* #### Фильтры #### */ + +.brightness { + filter: brightness(50%); +} + +.contrast { + filter: contrast(20%); +} + +.blur { + filter: blur(0.5rem) opacity(0.8); +} + +.grayscale { + filter: grayscale(0.8); +} + +.saturate { + filter: saturate(170%); +} + +.hue-rotate { + filter: hue-rotate(-90deg); +} + +.sepia { + filter: sepia(80%); +} + +.invert { + filter: invert(0.6); +} + +.watermark { + content: ''; + position: absolute; + padding-block-start: 22px; + opacity: 50%; + font-family: var(--font-PS2P); + font-size: 14px; + line-height: 14px; + text-shadow:-1px 0 var(--watermark), 0 1px var(--watermark), 1px 0 var(--watermark), 0 -1px var(--watermark); + inset-inline-end: 13px; + font-variation-settings: 'wght' var(--font-weight-text); + mix-blend-mode: hard-light; +} + +@supports((text-stroke: 1px var(--watermark)) or (-webkit-text-stroke: 1px var(--watermark))) { + .watermark { + text-shadow: none; + -webkit-text-stroke: 1px var(--watermark); + text-stroke: 1px var(--watermark); + } +} + +.card__content { + display: flex; + flex-direction: column; + gap: 27px; + padding: 25px 25px 25px 25px; + font-variation-settings: 'wght' var(--font-weight-text); +} + +.button_like { + display: flex; + justify-content: flex-end; + align-items: center; + gap: 7px; + margin-inline-end: 25px; + margin-block-end: 25px; +} + +.card__like-button { + min-width: 130px; + min-height: 38px; + border: 2px solid var(--accent-color); + font-family: var(--font-PS2P), sans-serif; + font-size: var(--font-size-14px); + background-color: transparent; +} + +.card__icon-button { + border: none; + padding-block-start: 5px; + background-color: transparent; +} + +/* ########################################## */ +/* Блок Main Конец */ +/* ########################################## */ + +/* ########################################## */ +/* 3. Блок Footer Начало */ +/* ########################################## */ + +.save__button { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 8px; + margin: clamp(3.125rem, 3.125rem + 0vw, 3.125rem) clamp(2.156rem, -1.068rem + 13.757vw, 11.313rem) clamp(6.25rem, 6.184rem + 0.282vw, 6.438rem) clamp(2.156rem, -1.046rem + 13.662vw, 11.25rem); + border: 2px solid var(--contour-color); + color: var(--accent-color); + background-color: var(--bg-color); + cursor: pointer; + inline-size: clamp(19.25rem, 18.656rem + 2.536vw, 20.938rem); + block-size: min(84px); +} + +.button__text { + font-family: var(--font-PS2P); + font-size: var(--font-size-14px); +} + +.save__floppy { + color: var(--accent-color); +} + +/* #### Модельное окно #### */ + +.dialog-window[open] { + display: flex; + align-items: center; + border: 2px solid var(--contour-color); + color: var(--accent-color); + font-family: var(--font-PS2P), sans-serif; + 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); +} + +.dialog-window::backdrop { + background-color: rgb(0 0 0 / 0.75); +} + +.dialog-container { + display: flex; + flex-direction: column; + align-items: center; + gap: 30px; +} + +.dialog-content { + display: flex; + flex-direction: row; + align-items: center; + gap: 20px; + border: none; + padding-inline-start: 25px; +} + +.dialog-floppy { + flex-shrink: 0; + max-width: 39px; + max-height: 39px; + color: var(--accent-color); + inline-size: 100%; + block-size: 100%; +} + +.dialog__text { + font-family: var(--font-PS2P), sans-serif; + font-size: var(--font-size-14px); + line-height: 21px; + text-transform: uppercase; +} + +.window-close { + border: 2px solid var(--contour-color); + padding-inline: 42px; + text-transform: uppercase; + background-color: var(--bg-color); + cursor: pointer; + block-size: 38px; + inline-size: clamp(16.063rem, 15.271rem + 3.38vw, 18.313rem); +} + +/* ########################################## */ +/* Блок Footer Конец */ +/* ########################################## */ + +/* ########################################## */ +/* 4. Медиазапросы */ +/* ########################################## */ + +@media (width >= 1440px) { + + .section { + block-size: 700px; + } + + .watermark { + inset-inline-end: 395px; + padding-block-start: 25px; + } + + .save__button { + flex-direction: row; + inline-size: clamp(19.25rem, 18.546rem + 3.005vw, 21.25rem); + block-size: max(55px); + } + + .save__floppy { + max-width: 21px; + max-height: 21px; + color: var(--accent-color); + inline-size: 100%; + block-size: 100%; + } +} + diff --git a/styles/themes.css b/styles/themes.css index 863f80f..0509ad5 100644 --- a/styles/themes.css +++ b/styles/themes.css @@ -11,6 +11,8 @@ --font-weight-text: 400; --font-weight-title: 700; --bg-color: #fff; + --contour-heart: #000; + --watermark: #fff; --background-image: repeating-linear-gradient(#d3d3d3,#d3d3d3 2px, transparent 2px, transparent 4px), repeating-linear-gradient(90deg,#d3d3d3,#d3d3d3 2px, transparent 2px, transparent 4px), @@ -20,9 +22,12 @@ :root.theme-dark { --accent-color: #00CC14; --contour-color: #00CC14; - --font-weight-text: 400; + --font-weight-text: 465; --font-weight-title: 785; - --bg-color: #000; + --bg-color: #000; + --contour-heart: #00CC14; + --core-heart: #ff0000; + --watermark: #00CC14; --background-image: repeating-linear-gradient(#000,#000 2px, transparent 2px, transparent 4px), repeating-linear-gradient(90deg,#000,#000 2px, transparent 2px, transparent 4px), @@ -34,12 +39,17 @@ :root { --accent-color: #00CC14; --contour-color: #00CC14; - --font-weight-text: 400; + --font-weight-text: 465; --font-weight-title: 785; - --bg-color: #000; + --bg-color: #000; + --contour-heart: #00CC14; + --core-heart: #ff0000; + --watermark: #00CC14; --background-image: repeating-linear-gradient(#000,#000 2px, transparent 2px, transparent 4px), repeating-linear-gradient(90deg,#000,#000 2px, transparent 2px, transparent 4px), linear-gradient(#007f0c, #004306); } -} \ No newline at end of file +} + + diff --git a/styles/variables.css b/styles/variables.css index 13f0e35..b862a21 100644 --- a/styles/variables.css +++ b/styles/variables.css @@ -5,10 +5,14 @@ --font-PS2P: 'PressStart2P'; --font-weight-text: 400; --font-weight-title: 700; - --font-size: 18px; + --font-size-18px: 18px; + --font-size-14px: 14px; --accent-color: #000; /* Цвет основного текста */ --contour-color: #000; /* Цвет Контура */ - --bg-color: #fff; /* Цвет фона */ + --bg-color: #fff; /* Цвет фона */ + --width-size: clamp(23.438rem, 16.286rem + 30.516vw, 43.75rem); + --contour-heart: #000; + --watermark: #fff; --background-image: repeating-linear-gradient(#d3d3d3,#d3d3d3 2px, transparent 2px, transparent 4px), repeating-linear-gradient(90deg,#d3d3d3,#d3d3d3 2px, transparent 2px, transparent 4px), diff --git a/svg/favicon.ico b/svg/favicon.ico deleted file mode 100644 index b0f6289..0000000 Binary files a/svg/favicon.ico and /dev/null differ diff --git a/svg/favicon.svg b/svg/favicon.svg index a0483b5..18ecb14 100644 --- a/svg/favicon.svg +++ b/svg/favicon.svg @@ -1,10 +1,16 @@ + - + + + diff --git a/svg/floppy-mini.svg b/svg/floppy-mini.svg deleted file mode 100644 index aa38f85..0000000 --- a/svg/floppy-mini.svg +++ /dev/null @@ -1,82 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/svg/floppy.svg b/svg/floppy.svg index 148d093..79f6b92 100644 --- a/svg/floppy.svg +++ b/svg/floppy.svg @@ -1,82 +1,83 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/svg/floppy39.svg b/svg/floppy39.svg new file mode 100644 index 0000000..22a508a --- /dev/null +++ b/svg/floppy39.svg @@ -0,0 +1,83 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +