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

🔥 Ваш цифровой компас в мире IT! 🧭 RECURA – это образовательные материалы, курсы, книги, полезные лайфхаки, актуальные новости из мира технологий, разработки и информационной безопасности. Подпишись - @recura_tech

👨‍💻 Google fonts that are bold. 10 жирных шрифтов для сайта. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

🖱Ты разбираешься в IT? У тебя есть страсть к деталям и стремление создавать качественные продукты? Тогда эта вакансия для тебя! ⭕️Курс даст тебе возможность влиться в одну из самых востребованных сфер в современном мире, ведь сайты и приложения сегодня - неотъемлемая часть нашей жизни. ❕Чему ты научишься? ➡️Тестировать сайты и приложения ➡️Основным методам автоматизации ➡️Писать простой код на Java, JavaScript или Python Не теряй времени! Присоединяйся прямо сейчас!

​​​​HTML, CSS, JS, Node.JS, 🤯 - пора бы всё объединить! Все для изучения веба 👉 Фронтенд - самый большой канал для изучения фронта 👉 Верстка - все о верстке 👉 Node.JS - для тех кто хочет писать бэк на JS Собрано всё, проверяй🔥

❔Как красиво оформить кнопку на сайте? HTML:

<button class="btn">Отправить</button>

CSS:

.btn {
   position: relative;
   height: 40px;
   line-height: 40px;
   padding: 0 30px 0 40px;
   margin: 0 20px;
   background: linear-gradient(-135deg, #00E5FE, #4463FE);
   box-shadow: 0 15px 65px #4753FF;
   border-width: 0;
   border-radius: 50px;
   font-family: 'Montserrat Alternates', sans-serif;
   font-size: 14px;
   color: white;
   outline: none;
   cursor: pointer;
}
.btn:before {
   content: "\f067";
   position: absolute;
   left: 5px;
   top: 5px;
   font-family: FontAwesome;
   color: white;
   width: 30px;
   height: 30px;
   line-height: 30px;
   text-align: center;
   border-radius: 50%;
   background: transparent;
   transition: .3s ease-in-out;
}
.btn:hover:before {
   background: white;
   color: #24D8F7;
}

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

Вам нравится читать контент на этом канале? Возможно, вы задумывались о том, чтобы купить на нем интеграцию? Следуйте 3 простым шагам, чтобы сделать это: 1) Регистрируйтесь по ссылке: https://telega.in/c/codewebx 2) Пополняйтесь удобным способом 3) Размещайте публикацию Если тематика вашего поста подойдет нашему каналу, мы с удовольствием опубликуем его.

👩‍💻 Новые единицы измерения svh, lvh, dvh в CSS для адаптивной верстки

Рассказываем, зачем нужны новые единицы измерения svh, lvh и dvh в CSS для адаптивной верстки, и чем они отличаются от прежней единицы vh.

Читать | @codewebx | #Прочее 🖥 Готовые шаблоны, плагины, темы (-70%)

🎄 Объявляем скидки в нашу приватку до Нового Года! Получи доступ к: 👩‍💻 Готовым шаблонам сайтов 👩‍💻 Полезным плагинам 👩‍💻 Премиум-темам 💬 Большому чату с веб-разботчиками

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

Цена по скидке: 300р 1000р 🔥 👉 Купить | Подробнее

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

Не трогайте, это на Новый год!   Профессия «Фронтенд-разработчик». 🎁  Скидка до 30 000 рублей и кэшбек на карту до 25 000 рублей при успешном прохождении обучения! Научитесь программировать на языке JavaScript и создавать пользовательские интерфейсы сайтов и приложений. Уже во время обучения вы вступите в программу «Карьерный трек», чтобы найти свою первую работу в IT. Мы регулярно мониторим, какие компетенции разработчиков востребованы на рынке и строим учебную программу в соответствии с этим знанием. 📌 Пройдите 5 бесплатных уроков и поймите, подходит ли вам профессия! Реклама. АНПОО "ХЕКСЛЕТ КОЛЛЕДЖ". ИНН 7839056670.

👨‍💻 CSS Spinners. 3 разных анимации загрузки для сайта. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

❔Как красиво оформить изображение на сайте? HTML:

<div class="image-wrapper">
<div class="image-inner">
<img src="image.jpg">
</div>
</div>

CSS:

* {
   box-sizing: border-box;
}
.image-wrapper {
   position: relative;
   max-width: 400px;
   margin: 50px auto;
   padding: 15px;
   background: #DAEBE8;
}
.image-inner {
   position: relative;
}
.image-wrapper img {
   display: block;
   width: 100%;
}
.image-wrapper:before, .image-wrapper:after, .image-inner:before, .image-inner:after {
   content: "";
   position: absolute;
   width: 50px;
   height: 50px;
}
.image-wrapper:before {
   bottom: 0;
   left: 0;
   border-left: 6px double #384D26;
   border-bottom: 6px double #384D26;
}
.image-wrapper:after {
   right: 0;
   top: 0;
   border-right: 6px double #384D26;
   border-top: 6px double #384D26;
}
.image-inner:before {
   bottom: -15px;
   right: -15px;
   border-right: 6px double #384D26;
   border-bottom: 6px double #384D26;
}
.image-inner:after {
   top: -15px;
   left: -15px;
   border-left: 6px double #384D26;
   border-top: 6px double #384D26;
}

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

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

👨‍💻 Modern Button Styles - 45 CSS only styles 45 кнопок в современном стиле для вашего сайта! Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

Я ПРОТИВ ПЛАТНЫХ КУРСОВ Я самоучка, прошел весь путь до Senior Frontend разработчика совершенно бесплатно и без профильного образования. У себя на канале рассказываю: - Где брать опыт и как искать работу? - Как освоить сложную теорию? - Какие ресурсы использовать для обучения? Изучайте Frontend правильно ✈️ Telegram Reactify — сложные темы простым языком. Теория, советы, истории с работы. 📹 YouTube Reactify — изучаем JavaScript, TypeScript, React, CSS. Создаем приложение новостей или курса криптовалюты. 🎓 Academy Reactify - платформа для обучения. Бесплатные курсы, тесты, практика и экзамены. [СКОРО]

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

<div class="d15"><h3>Заголовок 15</h3></div>

CSS:

.d15 h3 {
  display: table;
  width: auto;
  margin: 15px auto;
  letter-spacing: 2px;
}
.d15 h3:before {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -8px;
  left: -35px;
  width: 10px;
  height: 10px;
  border: 3px solid #fed57b;
  transform: rotate(45deg)
}
.d15 h3:after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -8px;
  right: -35px;
  width: 10px;
  height: 10px;
  border: 3px solid #fed57b;
  transform: rotate(45deg)
}

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