From Fedya With 💚
Open in Telegram
Привет! Я - Катя Федяева @kate_stoltz ✨, frontend и веб-дизайнер. Тут я делюсь своей жизнью, котами и немного работой. А еще делаю сайты на тильде и webflow, люблю чистую верстку, веду стримы.
Show more766
Subscribers
No data24 hours
No data7 days
+630 days
Posts Archive
\n\n\nБуду рада вашим реакциям под постом ❣️ \nСказать спасибо: кинуть на общак 😻. \nПробустить уровень канала\n\n*эффект превратится в брутальный, если задать высоту полоске выше 5px и сделать mix-blend-mode. Такой код будет в комментариях.","datePublished":"2024-03-20T08:20:34Z","dateModified":"2024-03-20T08:20:34Z","author":{"@type":"Organization","name":"From Fedya With 💚","url":"https://telemetr.io/en/channels/1621766865-from_fedya","image":"https://img.tlmtr.io/c/1LKLE5/5233298186116915428?ty=x"},"publisher":{"@type":"Organization","name":"From Fedya With 💚","url":"https://telemetr.io/en/channels/1621766865-from_fedya","image":"https://img.tlmtr.io/c/1LKLE5/5233298186116915428?ty=x"},"commentCount":0}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1621766865-from_fedya/posts/969","url":"https://telemetr.io/en/channels/1621766865-from_fedya/posts/969","mainEntityOfPage":"https://telemetr.io/en/channels/1621766865-from_fedya/posts/969","headline":"Зашла утром на местный новостной портал прочитать статью, в которой есть сделанные моими лапками фотографии,…","articleBody":"Зашла утром на местный новостной портал прочитать статью, в которой есть сделанные моими лапками фотографии, а увидела новость о том, что на месте мастерской мужа начнут строить престижный район.\n\n😞 \n\nВо-первых, \"приятно\" узнавать такие вещи из новостей, а не от арендодателя. Во-вторых, месяц назад мы вложились в новую покрасочную, почти закрыли кредит на новый станок. В третьих, подали заявку на получение субсидии и оставили заявку на добавление мастерской в реестр местных бизнесменов {вероятнее всего, получим отказ}. Как видите, плана переехать на окраины города (в которые даже общественный транспорт не ходит), взять новый кредит на оборудование мастерской — не было. как я усталъ от постоянных проблем 😭.\n\n\nмой муж — гитарный мастер, делающий гитары и ремонтирующий их","datePublished":"2024-03-18T07:39:02Z","dateModified":"2024-03-18T07:39:02Z","author":{"@type":"Organization","name":"From Fedya With 💚","url":"https://telemetr.io/en/channels/1621766865-from_fedya","image":"https://img.tlmtr.io/c/1LKLE5/5233298186116915428?ty=x"},"publisher":{"@type":"Organization","name":"From Fedya With 💚","url":"https://telemetr.io/en/channels/1621766865-from_fedya","image":"https://img.tlmtr.io/c/1LKLE5/5233298186116915428?ty=x"},"commentCount":0}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1621766865-from_fedya/posts/968","url":"https://telemetr.io/en/channels/1621766865-from_fedya/posts/968","mainEntityOfPage":"https://telemetr.io/en/channels/1621766865-from_fedya/posts/968","headline":"\"До/После\" в этот раз получилось не таким ярким, как это было со слайдером. Но это хороший пример, как можно…","articleBody":"\"До/После\" в этот раз получилось не таким ярким, как это было со слайдером. Но это хороший пример, как можно не скучно вывести новости на страницу или же оформить каталог {покажу вам на следующей неделе очень стильную переделку блока, сделанную на заказ}.\n\nПризнаюсь, что переделывать не переделываемое мне нравится больше. Но банка идей была добита выгоранием, нужно восстановиться как-то 😖\n\n#переверстка","datePublished":"2024-03-16T13:21:19Z","dateModified":"2024-03-16T13:21:19Z","author":{"@type":"Organization","name":"From Fedya With 💚","url":"https://telemetr.io/en/channels/1621766865-from_fedya","image":"https://img.tlmtr.io/c/1LKLE5/5233298186116915428?ty=x"},"publisher":{"@type":"Organization","name":"From Fedya With 💚","url":"https://telemetr.io/en/channels/1621766865-from_fedya","image":"https://img.tlmtr.io/c/1LKLE5/5233298186116915428?ty=x"},"commentCount":0}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1621766865-from_fedya/posts/967","url":"https://telemetr.io/en/channels/1621766865-from_fedya/posts/967","mainEntityOfPage":"https://telemetr.io/en/channels/1621766865-from_fedya/posts/967","headline":"Вчера за 100 минут стрима получилось переделать сетку в блоке FD301 {я, честно, сама не ожидала что успею сде…","articleBody":"Вчера за 100 минут стрима получилось переделать сетку в блоке FD301 {я, честно, сама не ожидала что успею сделать всё за стрим 🥳}\n\n📎посмотреть страницу\n\n\nЧто сделала помимо сетки:\n— подружила блок с автоскейлом, чтобы его ширина всегда совпадала с шириной контента в нулевых блоках\n— добавила легкий параллакс карточками новостей\n— сделала скролл в стиле слизеринского* галстука\n\n* Геллерт превратился в Геральда потому что это другой человек, ибо Геллерт учился в Дурмстранге и вообще не подходил под зеленую концепцию \n\nНапоминаю вам, что копировать код решений — такая же кража, как взять ваш дизайн и разместить у меня (если делаете так кидайте мне сразу свои работы, размещу у себя в портфолио 😏). \n\nЗаказать крутую переделку можно у меня @kate_stoltz. А также я буду благодарна за рекомендацию меня своим коллегам и товарищам ❤️\n\n\nвсе решения с переделкой блоков теперь живут под тегом #переверстка","datePublished":"2024-03-16T13:15:56Z","dateModified":"2024-03-16T13:15:56Z","author":{"@type":"Organization","name":"From Fedya With 💚","url":"https://telemetr.io/en/channels/1621766865-from_fedya","image":"https://img.tlmtr.io/c/1LKLE5/5233298186116915428?ty=x"},"publisher":{"@type":"Organization","name":"From Fedya With 💚","url":"https://telemetr.io/en/channels/1621766865-from_fedya","image":"https://img.tlmtr.io/c/1LKLE5/5233298186116915428?ty=x"},"commentCount":0}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1621766865-from_fedya/posts/966","url":"https://telemetr.io/en/channels/1621766865-from_fedya/posts/966","mainEntityOfPage":"https://telemetr.io/en/channels/1621766865-from_fedya/posts/966","headline":"Стрим 😏 https://youtube.com/live/agBWTm1BzEE?feature=share https://youtube.com/live/agBWTm1BzEE?feature=share","articleBody":"Стрим 😏\n\nhttps://youtube.com/live/agBWTm1BzEE?feature=share\nhttps://youtube.com/live/agBWTm1BzEE?feature=share","datePublished":"2024-03-15T13:16:15Z","dateModified":"2024-03-15T13:16:15Z","author":{"@type":"Organization","name":"From Fedya With 💚","url":"https://telemetr.io/en/channels/1621766865-from_fedya","image":"https://img.tlmtr.io/c/1LKLE5/5233298186116915428?ty=x"},"publisher":{"@type":"Organization","name":"From Fedya With 💚","url":"https://telemetr.io/en/channels/1621766865-from_fedya","image":"https://img.tlmtr.io/c/1LKLE5/5233298186116915428?ty=x"},"commentCount":0}}]}
+1+1+1+1
+1🤪 Думаете котам нужны магазинные игрушки? Нет, свалянная собственная шерсть в шарик круче (внутри шарик подшипника для тяжести).
Крякает на нее, как на птицу, носит в зубах, отгоняет собратьев, рычит чтобы не трогали. Остальных правда привлекают другие вещи. Пожалуй, я никогда до конца котов не пойму. Но это лучше, чем сушеная мышь, которую он достал с чердака у мамы.
#котаны
Наливаю чаёк и начинаем )
Забегайте поздороваться и поболтать.
https://youtube.com/live/fvDQ84Aeotw?feature=share
https://youtube.com/live/fvDQ84Aeotw?feature=share
https://youtube.com/live/fvDQ84Aeotw?feature=share
Сегодня вечером (и днем по МСК) проведу стрим, который отпал в прошлую пятницу из-за обрыва кабеля от внезапного мокрого снегопада.
Расскажу о том: как я вынужденно превратилась в разработчика на 1C-Bitrix, как меня слайдер на webflow шатал, "баги приколы фейлы" обнаруженные на webflow. А еще расскажу кое-что новое про TapTop {я закончила все материалы для обучения и пишу сейчас анимации, которые передам всем бонусом}. И о том, что лучше таки получить практику и только потом брать проекты (GSAP тоже меня пошатал отменно).
А еще приходите познакомиться, если еще не знакомы 😘 (заранее чмаф всем, кто заходит сказать "Дратути").
16:00 по МСК
https://youtube.com/live/fvDQ84Aeotw?feature=share
😊 Важные тезисы об умывании
🟢 Смывка гидрофильного масла/бальзама без предварительного эмульгирования с водой грозит забитыми порами. По этой причине смывать масло пенкой обязательно даже в том случае, если лицо кажется вам чистым.
🟢 Применять г.ф./бальзам можно и утром, если у вас забиваются поры на ночь. Я практикую такое умывание после плотного крема с керамидами или когда хочу получить максимально-чистые поры.
🟢 Если вы ходили днем без косметики, то умываться все равно нужно. Потому что на коже скопилось кожное сало и частички пыли (а еще вы явно кучу раз трогали лицо руками).
🟢 Если вам лень использовать гидрофильное масло, но есть очищающая вода — используйте её вместо первого этапа. Это лучше чем смывать косметику просто пенкой {но я бы крутого результата не ждала в таком случае}. Помните, что пенка вообще не обязана полностью смывать SPF и косметику.
🟢 Уход за собой — это дисциплина и в первую очередь я бы привыкала именно стабильно умываться.
В процессе поиска подходящего бальзама вы можете столкнуться с неподходящими средствами (меня, к примеру, сыпет от кокосового масла в составе). Это нормально и никто не назовет средство, которое 100% подойдет именно вам. Любую банку можно использовать для тела в крайнем случае 👍
+1Про уход базово, часть [1]
Начнем с базы, вклинивая отзывы на банки в использовании. Мужчины, не спешите отписываться, вам тоже нужно умываться 🚰.
Про кожу: мне почти 31, кожа тонкая и сухая, есть купероз, воюю с широкими порами и гиперкератозом. Бывают высыпания от стресса и проблем с ЖКТ.Первое, что нужно отладить в уходе — качественное очищение. 1 этап (вечер) — гидрофильный бальзам, масло, молочко. Важно смыть SPF, косметику и кожное сало, которое усиленно вырабатывалось весь день. Нужно нанести бальзам на кожу, помассировать минутку, намочить руки в тёплой воде, помассировать еще минуту и умыться. *Если вам неприятно наносить масло на глаза, то можно стереть косметику очищающей водой. ✨Eсли хочется выжать с гидрофильного масла максимум — рекомендую смывать его не руками, а теплым полотенцем. При таком способе поры очищаются качественнее {после такого я не вижу поры на носу}. Нужно намочить полотенце в теплой воде, отжать и удалить бальзам с лица. использование масла всего 2-3 раза в неделю сделало поры мужа значительно чище (чаще не заставить) 😌. 〰️ 2 этап (вечер и утро) — мягкие пенки, гели. Вечером нужно смыть остатки гидрофильного масла. Утром кожное сало, вечерний уход и пыль. Помните, что пенка не должна очищать до скрипа {я скукожусь после такой, а жирная кожа выдаст еще больше кожного сала и расширенные поры}. Я выбираю мягкие средства, которые не дают большое количество пены. 💚Если хочется получить чуть более гладкий рельеф и чистые поры — можно умываться пару раз в неделю пенкой с кислотами/энзимами (будет в комментариях). Такой способ подойдет, если использовать кислоты вы пока боитесь. ежели ваш мужчина удирает от слова косметика, но готов умываться, то такая пенка покажет ему что такое чистые поры. Все названия продуктов (тут только мои любимчики), любимые магазины и моё лицо после умывания будут в комментариях. Завтра продолжим первую часть важными тезисами и отзывами на банки. Тег пока не придуман, его можно предложить в комментариях ❤️
😏 Продолжим тему эффектов наведения в #уверстка №19
После прошлого выпуска уверстки я покопалась в своих закромах и нашла еще целую кучу разных эффектов наведения (где-то мы даже вернемся к истокам — эффектам, которые использовали ранее и забыли о них).
*️⃣живой пример лежит по ссылке
Нужно задать ссылке класс
nav__link (вы можете без проблем написать свой класс в стилях) и вставить стили в блок T123. По возможности переносим стили в <head> страницы.
Давайте разберемся в переменных:
1. Высота полоски до наведения на элемент. Если указать 0px, то изначальное подчеркивание ссылки исчезнет, но эффект будет работать.
2. Высота полоски при наведении. В моем случае указано -2em, что равняется двум высотам размера текста родительского элемента. Вы можете указать свое значение в пикселях.
3. Цвет полоски.
4. Цвет текста при наведении {имитируем mix-blend-mode}.
5. Длительность анимации и функция скорости, которые вы можете заменить.
💛Если в первой и второй переменной поставить положительные значения (без ➖), то эффект будет работать сверху вниз.
<style>
:root {
--shadow-height: -1px;
--shadow-hover-height: -2em;
--shadow-color: #000;
--text-color: #FFF;
--transition: 0.3s cubic-bezier(1, 0.19, 1, 1);
}
.nav__link .tn-atom{display:inline;box-shadow:inset 0 var(--shadow-height) 0 var(--shadow-color);transition:var(--transition)}.nav__link:hover .tn-atom{box-shadow:inset 0 var(--shadow-hover-height) 0 var(--shadow-color);color:var(--text-color)!important}
</style>@media (hover: hover). Готовый код будет в комментариях.
Буду рада вашим реакциям под постом, делитесь им с товарищами, кидайте в избранное ❤️ Сказать спасибо (я сейчас в очень больших проблемах и буду рада поддержке): кинуть на общак. Пробустить уровень канала
😰 Вроде и наступил мой день-старенческий месяц, снег уже начал таять и точно оттает к июлю, небо голубое, коты жрут мох от пересаженных цветов, но я что-то в щи.
То ли витаминов не хватает, то ли надо перестать работать и учиться по 10 часов в сутки (и вариантов не делать это не так много, потому что или вы жизнь, или она вас). Как вы там, держитесь или уже всё?
Я решила закончить быстрее всю верстку (пишу пятистраничник, доверстываю сайт на webflow) и уйти на неделю выходных. Потому что делаю все в 10 раз медленнее, прокрастинирую, зависаю на простых задачах и вообще не могу проснуться.
а, у вас спина белая
По причине обрыва кабеля с интернетом стрим переносится на следующую пятницу (возможно, это будет не зыринг, а верстка).
Время починки в приложении переместилось с 18 часов на 11 часов завтрашнего дня. Делайте ваши ставки, будет ли кто-то чинить кабель в субботу под дождичком с мокрым снегом 😢
⭐️ В эту пятницу на стриме я буду разбирать остатки своих сохраненных сайтов, изучать агрегаторы и искать идеи для новых постов с уверсткой.
Напоминаю, что на этих стримах я не занимаюсь версткой и поэтому могу ответить на любые ваши вопросы. Цель — просто разобрать ссылочный завал и найти что-то интересное.
🔵ссылка на стрим 29 марта 16:00 (запись стрима будет, ссылки на просмотренные сайты появятся на канале после стрима)
#стрим
не спрашивайте что меня так вштырило с обложкой
🤣 Так много вопросов и так мало ответов. Обратите внимание на ник.
На самом деле я удивлена, что до сих пор никто не обкекал меня за работу на тильде. Хотя просмотры откуда-то идут потихоньку.
✨ Реакции под комментариями показывают, что тема крутых банок для лица интересна и я набросала такие темки постов.
Если кому-то кажется, что это только женское, то мой бородатый викинг и коллега не согласятся {оба были в шоке от фотографий "деду 70 лет, он носил рубашку, а лицо запекалось всю жисть"}.
Голосуйте за интересующий пост, ставя реакции:
❤️ — кратко о любимых банках
🔥 — про уход так, словно рассказываю все подруге {а она сидит в шоке целый час и просто просит скинуть ссылки}
🍌 — моя схема мазюканья морды лица
🦄 — почему не хожу к косметологам и, мягко говоря, их недолюбливаю
+1🥺 У нас таки перестал каждый день идти снег и у меня получилось выгулять ушастый чепчик.
В голове всю дорогу звучала бабуля, которая очень уж хотела, чтобы к 30 я не вылезала из деловых костюмов. Но что-то пошло не так и я местный сумасшедший в неоновой шапке и чепчике.
Фотку чепчика уже традиционно закину в комментарии.
муж сказал, что это рожки и как бы ему виднее 😆
но я увеличила фотографию, чтобы словить шок от своей кожи. на лице только новенький SPF Onion IsnTree (я вообще не держу в косметичке тональное средство). когда-нибудь я наберусь смелости и расскажу про все любимые банки.
Получила такое сообщение (очевидно, это был вопрос о последней переделке из поста выше).
Сразу скажу, что человек ошибся в названиях и имел в виду wordpress (что никак не уменьшает количество работ по сайту на webflow).
Очень хочется сказать, что в беседе я объяснила все моменты и в конце мы пришли к тому, что даже самая обычная верстка не может стоить дешево. Но человек остался при своем мнении, ведь на биржах так много предложений за 3 копейки.
Такая позиция не только обесценивает труд разработчиков (просто помните, что без разрабов не будет конструкторов и их развития), но и на корню обесценивает желание многих ребят развиваться.
оставляю ссылку на видео о минусах в разработке, которое всегда будет по закрытой по ссылке. но, возможно, откроет для вас глаза на то, что у нас не всё заебис
✨ Таки закончила самую необычную переделку стандартных блоков на тильде с раздельной перемоткой.
Напоминаю, что весь контент находится в стандартных блоках. На странице есть пара блоков T123 и солянка ME201, ME103, TE210, TX101, TL05 😏.
🟡 посмотреть готовую верстку
🟡 дизайн на всех разрешениях
Сайт не просто разделен на два экрана, но и сохраняет эффект с перемоткой соседней секции на телефоне. Весь контент можно свободно редактировать, не пытаясь что-то двигать в дурацком нулевом блоке. Минусы тоже есть: вложенность получилась совсем не такой, как хотелось бы (минус не только в валидации, но и времени рендеринга страницы). Еще я не уменьшила размер точек до задуманного потому что во время отрисовки макета не задумалась о том сколько проблем из-за них будет 😭
Но эксперимент считаю удачным, хочется сделать еще что-то необычное {с открытием popup новости, сдвигая контент, к примеру}. Поэтому в следующую пятницу буду изучать сайты в поиске новых идей.
Вместо сегодняшнего стрима оставляю запись .
🔵 часть 3
🔵 часть 4
🔵 часть 5
Помните, что если вам в край надоелаостопизделаобычная верстка на тильде, хочется переделанных до неузнаваемости блоков — пишите мне в личку @kate_stoltz С мая я поднимаю цену на кастомизацию блоков, которая держалась 2 года и сейчас самое время поработать по старым ценам.
+1😍 Простите, но этот кошачий мужчина очень хорош*
Хочу сказать, что стрима сегодня не будет. Ибо я спала сегодня три часа, после которых повезла Сёму на полный осмотр и капельницу, просидев в клинике 4 часа. И просто хочу после рабочего дня упасть и уснуть.
Немного про Семёна.
Сёма доказательство того, что с МКБ после риска отказа почек кот может еще долго жить. В нашем доме стало еще больше питьевых банок (представьте, что вы лежите на диване и умирать как хотите пить, но никуда не идете ибо вода в другой комнате), а кормёжка превратилась в постоянный контроль "как бы кто не сожрал чужое". Но я очень хочу, чтобы эта булошка жила еще очень долго 😢
*твое лицо, когда хозяева опять потратили на тебя шикарного двадцать тыщ
✨ часть постов с котами я собрала по тегу #котаны
✨ чекнуть историю Сёмы
🕺 Простёхонький эффект наведения и #уверстка №18.
Я продолжаю в свободные вечера тренировать насмотренность в создании анимаций на GSAP (который мне нужен прямо сейчас и это попаболь 😢). В одном из учебных примеров написался простой эффект, в котором обводка проводится слева-направо, а после отведения мыши уезжает направо c концами.
🧷 Живой пример можно посмотреть на этой странице
Нужно задать ссылке класс
page__nav и вставить немного строк кода на страницу. Стили в начало страницы, скрипт в конец. В стилях есть две переменные, чтобы задать толщину линии* и цвет.
<style>
:root {
--line-height: 1px;
--color-line: #345f2a;
}
.page-footer__nav a{position:relative;display:inline-block!important;overflow:hidden}.page-footer__nav a::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:var(--line-height);border-bottom:var(--line-height)solid var(--color-line);transform:translateX(-101%)}.page-footer__nav:hover a::after{transform:translateX(0);transition:transform 0.3s ease-in-out}.page-footer__nav--animate-out a::after{transform:translateX(100%);transition:transform 0.3s ease-in-out}
</style><script>
document.addEventListener("DOMContentLoaded",()=>{const navItem=document.querySelectorAll('.page__nav');navItem.forEach((item)=>{item.addEventListener("mouseleave",()=>{item.classList.add('page__nav--animate-out');setTimeout(()=>{item.classList.remove('page__nav--animate-out')},300)})})})
</script>Буду рада вашим реакциям под постом ❣️ Сказать спасибо: кинуть на общак 😻. Пробустить уровень канала*эффект превратится в брутальный, если задать высоту полоске выше 5px и сделать mix-blend-mode. Такой код будет в комментариях.
Зашла утром на местный новостной портал прочитать статью, в которой есть сделанные моими лапками фотографии, а увидела новость о том, что на месте мастерской мужа начнут строить престижный район.
😞
Во-первых, "приятно" узнавать такие вещи из новостей, а не от арендодателя. Во-вторых, месяц назад мы вложились в новую покрасочную, почти закрыли кредит на новый станок. В третьих, подали заявку на получение субсидии и оставили заявку на добавление мастерской в реестр местных бизнесменов {вероятнее всего, получим отказ}. Как видите, плана переехать на окраины города (в которые даже общественный транспорт не ходит), взять новый кредит на оборудование мастерской — не было. как я усталъ от постоянных проблем 😭.
мой муж — гитарный мастер, делающий гитары и ремонтирующий их
"До/После" в этот раз получилось не таким ярким, как это было со слайдером. Но это хороший пример, как можно не скучно вывести новости на страницу или же оформить каталог {покажу вам на следующей неделе очень стильную переделку блока, сделанную на заказ}.
Признаюсь, что переделывать не переделываемое мне нравится больше. Но банка идей была добита выгоранием, нужно восстановиться как-то 😖
#переверстка
Вчера за 100 минут стрима получилось переделать сетку в блоке FD301 {я, честно, сама не ожидала что успею сделать всё за стрим 🥳}
📎посмотреть страницу
Что сделала помимо сетки:
— подружила блок с автоскейлом, чтобы его ширина всегда совпадала с шириной контента в нулевых блоках
— добавила легкий параллакс карточками новостей
— сделала скролл в стиле слизеринского* галстука
* Геллерт превратился в Геральда потому что это другой человек, ибо Геллерт учился в Дурмстранге и вообще не подходил под зеленую концепцию
Напоминаю вам, что копировать код решений — такая же кража, как взять ваш дизайн и разместить у меня (если делаете так кидайте мне сразу свои работы, размещу у себя в портфолио 😏).
Заказать крутую переделку можно у меня @kate_stoltz. А также я буду благодарна за рекомендацию меня своим коллегам и товарищам ❤️все решения с переделкой блоков теперь живут под тегом #переверстка
