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

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

👨‍💻 Ripped 404 page animation Дизайн страницы "ошибка 404" с анимацией. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

Забудьте про эти сраные курсы по программированию 90% "курсантов" на самом деле забивают на полпути, либо не работают по специальности. И это проблема всех курсов. Если хотите реально загореться ITшкой и найти себя в индустрии — вот вам канал C#-о-мания. Авторы собрали топовые обучалки для самостоятельного старта и вовлекающие материалы по теме. Уже через пару месяцев сможете делать 70000-90000₽ в месяц на простых задачах, а через 6-12 месяцев выйти на доход от 200000₽. И всё это без платных курсов! Сохраняйте и осваивайте профессию будущего: @CSharp

❔Как сделать купон-этикетку для сайта или интернет-магазина? HTML:

<div class="tag-container">
<div class="tag-inner">
<h1>Купон</h1>
<ul>
<li>Скидка 5%</li>
<li>На всю посуду</li>
<li>С 20 по 30 мая</li>
</ul>
</div>
</div>

CSS:

* {
   box-sizing: border-box;
}
.tag-container {
   position: relative;
   width: 280px;
   margin: 110px auto 0;
   box-shadow: 1px 2px 5px rgba(0, 0, 0, .1)
}
.tag-container:before, .tag-container:after {
   content: "";
   position: absolute;
   top: -60px;
   right: 50px;
   left: 50px;
   background: #FEFEFF;
   height: 60px;
   transform: skew(-40deg);
   transform-origin: 0 0;
}
.tag-container:after {
   transform: skew(40deg);
}
.tag-inner {
   position: relative;
   padding-top: 20px;
   background: #FEFEFF;
}
.tag-inner:before {
   content: "";
   position: absolute;
   z-index: 5;
   top: -35px;
   left: calc(50% - 8px);
   width: 16px;
   height: 16px;
   border-radius: 50%;
   background: #FEC461;
   box-shadow: inset 2px 2px 4px rgba(0, 0, 0, .3), 0 0 0 7px #2a2050, 0 0 0 10px #F170A6;
}
.tag-inner h1 {
   margin: 0;
   padding-bottom: 35px;
   font-family: 'Oswald', sans-serif;
   font-size: 60px;
   text-align: center;
   letter-spacing: 3px;
   text-transform: uppercase;
   color: #E6C6C7;
   border-bottom: 8px solid #2a2050
}
.tag-inner ul {
   margin: 0;
   padding: 0;
   list-style: none;
   text-align: center;
}
.tag-inner li {
   padding: 12px 20px;
   background: #F170A6;
   border-bottom: 5px solid #FEFEFF;
   font-family: 'Open Sans', sans-serif;
   color: #FEFEFF;
   text-transform: uppercase;
}
.tag-inner li:last-child {
   border-bottom: none;
}

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

Дайте старт вашей карьере с нашим бесплатным курсом по JavaScript! 🎓 Курс включает 39 уроков, 46 упражнений и 129 тестов для закрепления знаний. Вы освоите создание программ с использованием основных конструкций языка, сможете составлять программы из нескольких модулей и научитесь анализировать ошибки в коде с помощью отладочной печати. 💡 Научитесь не только теории, но и применять знания на практике. Поддержка в «Обсуждениях» поможет вам разобраться с темами, которые вызывают трудности. Обучение с самого нуля, с акцентом на практику. Подходит для начинающих программистов! Добро пожаловать в мир JavaScript😉 Реклама. АНПОО "ХЕКСЛЕТ КОЛЛЕДЖ". ИНН 7839056670.

👩‍💻 8 полезных библиотек React, которые упрощают жизнь разработчику В этой статье вы узнаете о 8 полезных библиотеках React, которые помогут упростить работу разработчику. Читать | @codewebx | #Статьи

В России создан цифровой чай Приветствую, я — автор "Цифрового чая", и я 20 лет в IT. Помню даже Интернет без Роскомнадзора. Веду свой канал для обычных людей, занимаюсь неприкрытой пропагандой IT-грамотности. Иногда шучу, иногда занудствую. Но моё кредо — доступность и понятность. 🎓 Как работают нейросети? Объясняю технологии человеческим языком. 📈 Что не так с цифровым рублём? Анализирую ключевые тренды мира IT. 🔑 Какие пароли используют профи? Делюсь лайфхаками по цифровой безопасности. Только для тех, кто хочет ориентироваться в цифровом мире. Присоединяйтесь: "Цифровой чай"

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

👨‍💻 Scretching selector Неплохой переключатель для сайта. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

Ищу веб-дизайнеров, которые устали сидеть без клиентов и на низких чеках Специально для вас я провожу закрытый онлайн-воркшоп «5 шагов, чтобы завалить себя клиентами в веб-дизайне» 🕓 Дата: 31 января в 18:00 по мск https://t.me/+cf5zW6OCjuc1MDY6 💸 Кстати, в канале уже лежит статья «Эти ошибки совершают 90% веб-дизайнеров и не могут найти клиентов» После 2-х часов плотной работы: -Простая связка, которая даст клиентов уже на этой неделе - В чем отличие между сайтами за 10/30/60/120к₽? - Самая эффективная стратегия поиска клиентов в 2024 году Зафиналим все стратегией как за 2 месяца пройти путь от 0₽ до 80.000₽ в дизайне Доступ открыт на 24 часа⏳ https://t.me/+cf5zW6OCjuc1MDY6

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

<div class="sale-wrap">
<div class="sale-inner">
<div class="sale-text"><h2>Весеннее предложение</h2>
<p>40% <span>скидка*</span></p>
<a class="button" href="">Перейти к акции</a>
<p class="sale-text-info">*Используйте купон для участия в акции</p>
</div>
</div>
</div>

CSS:

.sale-wrap {
  position: relative;
  width: 400px;
  height: 300px;
  padding: 30px 40px;
  margin: 50px auto 0;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.07);
  box-sizing: border-box;
  overflow: hidden;
}
.sale-wrap:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 760px;
  height: 760px;
  background: rgb(240,96,96);
  border-radius: 50%;
}
.sale-inner {
  position: relative;
  height: 100%;
  background: linear-gradient(45deg, rgb(240,96,96), rgb(243,181,96));
  box-shadow: 0 10px 45px rgba(240,96,96, 0.3), 0 -10px 45px rgba(240,96,96, 0.3);
}
.sale-inner:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: white;
  border-bottom-right-radius: 150px;
  box-shadow: 3px 3px 20px rgba(0,0,0,.06);
}
.sale-text {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 5;
  padding: 40px 10px 0 40px;
  box-sizing: border-box;
}
.sale-text h2 {
  margin: 0 0 5px;
  color: #888888;
  font-family: 'Comfortaa', cursive;
  font-size: 13px;
  font-weight: normal;
  letter-spacing: 1px;
}
.sale-text p {
  margin: 0;
  font-family: 'Merriweather', serif;
  font-size: 40px;
  font-weight: bold;
  color: rgb(240,96,96);
}
.sale-text p span {
  font-size: 20px;
  ont-weight: normal;
}
.button {
  display: inline-block;
  margin: 20px 0;
  padding: 5px 10px;
  text-decoration: none;
  color: rgb(240,96,96);
  font-family: 'Comfortaa', cursive;
  text-transform: lowercase;
  font-size: 12px;
  border: 1px solid rgb(240,96,96);
}
.sale-text .sale-text-info {
  color: #888888;
  font-family: 'Comfortaa', cursive;
  font-size: 10px;
  font-weight: normal;
}

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

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

- Как думаешь, изучить фронтед самостоятельно - реально? - Вероятно, что да, но мы не советуем. -А если нет возможности оплатить курс? -Готов сразу взяться за дело? Привет, это команда ICHY School и мы обучаем фронтенд разработке. О тебе: хочешь стать разработчиком с нуля, изучаешь программирование самостоятельно или планируешь перейти в разработку из другой IT-профессии. О нас: ⚡️Сначала трудоустройство, оплата потом. Все для твоей уверенности. ⚡️Куратор, с которым ты обсудишь все тонкости разработки и узнаешь все о работе в ведущих IT-компаниях ⚡️Реальные проекты в портфолио. ⚡️Живое общение и классное комьюнити ⚡️Подготовка и помощь в трудоустройстве Интересно? Нам тоже! Оставляй заявку здесь, продолжим наше знакомство! Реклама. ИП Панкратов И.В  ИНН: 500915684952 Erid:2VtzqxMGxkn

👨‍💻 Лучшие идеи для портфолио с CodePen за 2023 год Лучшие веб-проекты CodePen 2023 года: карусели, 3D-карты, стили кнопок на все случаи жизни и многое другое. Станут вдохновением для портфолио. @codewebx | #Статьи

Знаете ли вы, что благодаря нейросетям в мире технологий и бизнеса уже активно совершенствуются следующие процессы: 🔧 Улучшение разработки: Нейросети ускоряют и оптимизируют процесс, позволяя программистам фокусироваться на творческих задачах. 📈 Прогнозирование данных: Нейросети выявляют тренды, анализируя большие объемы данных, помогая в принятии обоснованных решений. 🛠 Автоматизация задач: Нейросети автоматизируют рутинные задачи, освобождая время для творческой работы. Обо все этом знают не понаслышке знают наши друзья, на канале которых вы найдете: 🔹актуальные новости из мира искусственного интеллекта; 🔹обзоры нейроинструментов для выполнения любых видов задач; 🔹единомышленников для обмена опытом и идеями. Подписывайтесь, будет интересно!😉

👨‍💻 Avatar input Иконка Аватара с возможностью добавления своего из галереи. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

📣 Стань экспертом веб-дизайна c телеграм каналом наших друзей «Макеты сайтов в Figma»! На канале ежедневно публикуются свежие макеты Интернет-магазинов, Лендингов и многостраничных сайтов доступные для скачивания 📥. 💡 Все макеты удобно отсортированы по тематикам и форматам сайтов, чтобы вам было легко найти нужный вариант 💻. Больше не нужно тратить время на бесконечные поиски, все уже сделано за вас! 🚀 Присоединяйтесь к каналу прямо сейчас. 😍

❔Как добавить эффект виньетки к вашему изображению? HTML:

<div class="vignette">
    <img src="image.jpg">
</div>

CSS:

* {box-sizing: border-box;}
.vignette {
  width: 400px;
  margin: 50px auto 0;
  position: relative;
}
.vignette img{
  border-radius: 50%;
  max-width: 100%;
  height: auto;
  display: block;
}
.vignette:after  {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: radial-gradient(50% 50%, hsla(0, 0%, 100%, 0) 50%, #F1EBDF 100%);
}

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