КодВеб | Дизайн База

Когда-нибудь видели максимально странную рекламу канала по фронтенду? Теперь точно да @prog_way_blog

❔Как сделать диагональный блок для сайта? HTML:

<section>
<h3>Диагональный фон</h3>
</section>

CSS:

* {
   box-sizing: border-box;
}
body {
   background: #FFEFD7;
}
section {
   position: relative;
   margin-top: 200px;
   padding: 100px 0;
   overflow: hidden;
   background: #F1B6A8;
   text-align: center;
}
section:before, section:after {
   content: "";
   position: absolute;
   left: 0;
   border-width: 0 0 50px 100vw;
   border-style: solid;
}
section:before {
   top: 0;
   border-color: #FFEFD7 #FFEFD7 #F1B6A8 #FFEFD7;
}
section:after {
   bottom: 0;
   border-color: #F1B6A8 #F1B6A8 #FFEFD7 #F1B6A8;
}
section h3 {
   margin: 0;
   color: #FFEFD7;
   font-family: 'Playfair Display', serif;
   font-weight: normal;
   font-size: 40px;
   background: #F1B6A8;
}

@codewebx | #tutorial 🖥 Готовые шаблоны, плагины, темы

👩‍💻 COMPANY Сайт транспортной компании. 🟠 Сложность: Легкий 🟠 Адаптивность: Нет Исходники | @codewebx | #figma 🖥 Готовые шаблоны, плагины, темы

🤬Зачем платить за ChatGPT4, когда есть куча бесплатных альтернатив? В канале Tips AI | IT & AI, есть всё для взлома и обхода ChatGPT. Автор раньше всех публикует новости и находки из мира ИИ, которые пропустили другие каналы. Так же, он сделал своего ChatGPT в телеграм, совершенно бесплатно, но только для подписчиков: проверьте! Подписывайтесь и забирайте годный канал @tips_ai

🎁 Открываем доступ в наш закрытый чат веб-разработчиков БЕСПЛАТНО! Впускаем всех только 48 часов! 👇 https://t.me/+fF0jK9659WkwODQ6 https://t.me/+fF0jK9659WkwODQ6 https://t.me/+fF0jK9659WkwODQ6

👨‍💻 Text Glitch animation Тест с анимацией глитча Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

Присоединяйтесь к нашему бесплатному курсу и начните увлекательное путешествие в мир Java! Изучайте основы, создавайте программы, разбирайтесь с методами и анализируйте ошибки в коде. Практика, упражнения и проверочные тесты помогут вам освоить навыки программирования. 🎓 Чему вы научитесь: — Создавать программы с использованием основных конструкций языка.  — Разделять код на методы для повторного использования.  — Анализировать ошибки в коде с использованием отладочной печати. 💼 Включено в курс: 29 уроков (видео и/или текст), 35 упражнений в тренажере, 95 проверочных тестов + дополнительные материалы. Вы с нами?😉

❔Как красиво оформить акцию в интернет-магазине? HTML:

<div class="sale-wrap">
<div class="sale-inner">
<div class="sale-block">
<h3>30%<span>скидка</span></h3>
</div>
</div>
</div>

CSS:

.sale-wrap {
  width: 400px;
  height: 300px;
  padding: 20px;
  margin: 50px auto 0;
  background: #ffffff;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.07);
}
.sale-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: #db5638;
}
.sale-block {
  border: 8px solid #f9f7f6;
  border-radius: 3px;
  display: inline-block;
}
.sale-block h3 {
  line-height: 1;
  padding: 10px 15px;
  margin: 5px;
  background: #2d3549;
  font-size: 40px;
  color: #f9f7f6;
  font-family: 'Days One', sans-serif;
  transform: rotate(-2deg);
}
.sale-block span {
  display: block;
  text-transform: uppercase;
  font-size: 20px;
  letter-spacing: 2px;
}

@codewebx | #tutorial 🖥 Готовые шаблоны, плагины, темы

👩‍💻 Big theatre Сайт большого театра. 🟠 Сложность: Легкий 🟠 Адаптивность: Нет Исходники | @codewebx | #figma 🖥 Готовые шаблоны, плагины, темы

🤑 Хватит тратить деньги на дизайнера! 👨‍💻 Верстальщики, знаем ли мы, сколько стоит хороший дизайн? И как часто вам приходится жертвовать качеством из-за бюджетных ограничений? 💵 Пришло время экономить! 🔗 Подписывайтесь на TEMPLATICA.PRO и получите доступ к тысячам готовых макетов сайтов в Figma.

🚀Прокачайте свой уровень разработки веб-приложений — освойте мощный фреймворк Nest.Js Начните с бесплатного практического онлайн-урока от опытного программиста. Открытый вебинар пройдет в рамках большого курса для JS-разработчиков, вы получите выгодные условия на обучение ⏰Встречаемся 17 апреля в 20:00 (мск). 👉Регистрируйтесь прямо сейчас, чтобы посетить бесплатный урок и получить спец. цену на курс: РЕГИСТРАЦИЯ.

👨‍💻 CSS scroll-driven scroll-snapping animations Страницы для сайта с возможностью перелистывания. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

🔴Не используешь библиотеку Quasar в JS? Фатальная ошибка! А ведь UI-фреймворки сильно сокращают время на построение интерфейсов, оставляя его для работы над продуктом! Поэтому пора прокачать квалификацию и добавить в свой инструментарий разработку на Vue.js. ✔️Начни с бесплатного практического урока «Форма входа на Quasar и аутентификация пользователя на сайте» от OTUS. Спикер Илья Нуруллин — FingerprintJS, Software engineer. ⏰Занятие пройдёт 16 апреля в 20:00 мск в рамках курса «Vue.js разработчик». После урока у вас будет возможность стать студентом программы по специальной цене и даже в рассрочку! Для бесплатного участия и получения записи регистрируйтесь прямо сейчас. ➡️РЕГИСТРАЦИЯ

❔Поле поиска для сайта. Как создать разметку для поля? Поле поиска для сайта — один из важнейших элементов пользовательского интерфейса на веб-странице. С его помощью пользователь может найти нужный контент на вашем сайте. В этом уроке вы узнаете, как создать разметку для поля поиска с помощью HTML5.

<form action="" method="get">
  <input name="s" placeholder="Искать здесь..." type="search">
  <button type="submit">Поиск</button>
</form>

Элемент <form> является контейнером для формы поиска, поле поиска создается при помощи элемента <input type="search"> или <input type="text">, а кнопка отправки данных на сервер может создаваться с помощью элемента <input type="submit"> или <button type="submit">. Текст в поля формы можно добавлять двумя способами: 1️⃣<input type="text" placeholder="текст"> Цвет отображаемого текста будет серого цвета. С помощью следующих правил можно задать тексту-подсказке любой цвет, поменять начертание и фон поля. Эти селекторы нельзя совмещать в одно правило, иначе они не будут работать.

input::-webkit-input-placeholder {
  color: #B6C0A5; 
  font-style: italic; 
  background: #E0EFCA;
}
input:-moz-placeholder {
  color: #B6C0A5; 
  font-style: italic; 
  background: #E0EFCA;
}
input:-ms-input-placeholder {
  color: #B6C0A5; 
  font-style: italic; 
  background: #E0EFCA;
}

2️⃣<input type="text" value="текст"> Цвет отображаемого текста будет черного цвета. Задать свой цвет можно при помощи свойства color, например:

input {
  color: white;
}

@codewebx | #tutorial 🖥 Готовые шаблоны, плагины, темы

Регистрируйся на бесплатный онлайн-интенсив по фронтенд-разработке от METHED! В рамках интенсива мы с 0 создадим посадочную страницу "Лендинг интернет-магазина Petplanet": - Используем технологии HTML,CSS; - Реализуем адаптивный дизайн под различные устройства; - Уделим особое внимание доступности сайта для пользователей; - Проведем оптимизацию файлов и изображений для улучшения производительности и скорости загрузки страницы. Наша дружная команда ждет тебя в числе учеников! Регистрация на интенсив по ссылке: https://tglink.io/51282a694fbf 

Загляните в захватывающий мир UX/UI-дизайна! Бесплатный мини-курс Skillbox — идеальное место для веб-дизайнеров, желающих расширить свои горизонты. Узнайте, как создавать потрясающие пользовательские интерфейсы, которые завоюют сердца клиентов! Зарегистрируйтесь на мини-курс сейчас и получите гайд «Figma: воркбук для начинающих»: https://epic.st/HQm3z3?erid=2Vtzqx4ozJB Какую пользу принесёт мини-курс: — Сделаете первый проект для портфолио — интерфейс сайта и приложения — Узнаете, почему UX/UI-дизайнеры так нужны IT-компаниям, и поймёте, почему им так много платят — Познакомитесь с Figma — самой востребованной программой UX-дизайнера — Получите большой список источников, которые помогут быть в курсе трендов индустрии — Поймёте, какие навыки нужны UX/UI-дизайнеру, чтобы быстрее расти в доходах — Сможете в прямом эфире задать вопросы опытному дизайнеру 🎉 Вас ждут бонусы: скидка 10 000 рублей на любой курс Skillbox, гайды и книги для старта в профессии, персональная карьерная консультация и год бесплатного изучения английского языка. Реклама. ЧОУ ДПО «Образовательные технологии «Скилбокс (Коробка навыков)», ИНН: 9704088880

👩‍💻 The loop Сайт интернет-магазина одежды. 🟠 Сложность: Легкий 🟠 Адаптивность: Нет Исходники | @codewebx | #figma 🖥 Готовые шаблоны, плагины, темы