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

👨‍💻 ASK EXPERTS Сайт по поиску экспертов. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

👨‍💻 No script accordion animation Карточки с анимацией при наведении. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

❔ Как размыть фон у изображения? Размытый фон также создаёт ощутимый контраст между фоном и текстом, не отвлекая глаза от важного контента на странице. HTML:

<div class="wrap">
<h2>Helen<br>Parker</h2>
  <p>Visual Design &amp; Strategy</p>
</div>

CSS:

body {
  margin: 0;
  background-image: url(image.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  position: relative;
  height: 100vh;
}
body:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(https://html5book.ru/wp-content/uploads/2017/01/photo-roses.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  -webkit-filter: blur(15px) opacity(90%);
  filter: blur(15px) opacity(90%);
}
.wrap {
  transform: translate(-50%, -50%);
  position: absolute; 
  top: 50%; 
  left: 50%;
  text-align: center;
}
.wrap h2 {
  font-size: 40px;
  color: white;
  letter-spacing: 2px;
  border: 8px solid;
  padding: 12px 15px;
  margin: 0;
  text-transform: uppercase;
  text-align: center;
  font-family: arial;
}
.wrap p {
  font-style: italic;
  color: rgba(0,0,0,.5);
  font-size: 24px;
  font-weight: bold;
  padding-top: 16px;
  margin: 0;
}

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

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

👨‍💻 Apple Production Электронное письмо в стиле Apple. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

❔ Как поднять ценность на рынке, если ты фронтендер?  В 2024 году Web стремительно развивается, и чтобы оставаться в рынке мало лишь уметь верстать и знать JS Достаточно выучить азы бэкенда, принципов HTTP и MySql, как вы очень компетентный сотрудник, о котором будет мечтать любой тимлид На PHP написано 80% сайтов в интернете, язык максимально похож на JavaScript, а главное супер востребована связка Full-stack PHP + JS Мы бесплатно обучаем PHP: подписывайтесь, расскажем, покажем и поможем найти оффер

👨‍💻 Drag-to-Reorder Widget Виджеты с возможностью перемещения. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

💬 У вас есть сайт? 🔝 Хотите, чтобы он стрелял в поисковых системах сразу после индексации? Предварительная подготовка, о чем стоит позаботиться: ✔️ выстроить структуру; ✔️ семантическое ядро; ✔️ посадочные страницы; ✔️ техническая оптимизация; ✔️ уникальный контент - фундамент SEO. Это основные главные вещи, которые необходимы поисковикам для корректного определения релевантности страниц и запросов. После чего можно начинать работу с поведенческими факторами... да-да... ссылки ушли в прошлое!  ❕ В данный момент существует только одна действенная технология быстрого продвижения в поисковых системах - поведенческие факторы. ✔️ Быстрое улучшение ваших позиций в ТОП! ✔️ Сайт должен быть оптимизирован внутренне по SEO и технически. ✔️ Улучшайте уже существующие позиции и получайте новый целевой трафик и клиентов. 👍 На канале также поделимся актуальными новостями из мира SEO и современными тенденциями поисковых систем. 🔝 Подписаться! 🍀 Узнать больше полезной оптимизации!

❔ Как красиво оформить кнопку с анимацией для сайта? Сегодня сделаем кнопку с эффектом волны при наведении. HTML:

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

CSS:

.btn {
   position: relative;
   overflow: hidden;
   z-index: 1;
   padding: 10px 40px;
   margin: 0 20px;
   font-family: 'Montserrat Alternates', sans-serif;
   font-weight: 600;
   line-height: 30px;
   color: white;
   font-size: 15px;
   text-transform: uppercase;
   background: #f5b08f;
   border-width: 0;
   box-shadow: 5px 5px 0 #532831;
   outline: none;
   cursor: pointer;
   transition: 1.5s;
}
.btn:before, .btn:after {
   content: "";
   position: absolute;
   height: 200px;
   left: -50%;
   margin-top: -100px;
   top: 50%;
   width: 200px;
   border-radius: 50%;
   opacity: 0.3;
   z-index: -1;
   transform: scale(0);
}
.btn:before {
   background: #ffeede;
   transition: .8s ease-out;
}
.btn:after {
   transition: .4s ease-in .3s;
}
.btn:hover {
   color: #532831;
}
.btn:hover:before, .btn:hover:after {
   opacity: 1;
   transform: scale(4);
}

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

🖥 45+ IT-компаний ищут стажёров и джунов  Карьерные форумы "Найти IT" — это шанс пообщаться с топовыми компаниями и получить оффер. Среди работодателей будут Сбер, Яндекс, Kaspersky, Avito и многие другие. Что вас ждёт: 🔹 Мастер-классы, кейсы и Q&A-сессии. 🔹 Розыгрыш призов среди участников. 🔹 Обширное пространство для общения и обмена опытом. 🔹 Карьерные консультации от HR-ов. Участие бесплатное!  Выбирайте город и регистрируйтесь👇🏻 📍 Москва — 6 марта 📍 Санкт-Петербург — 6 апреля 📍 Новосибирск — 10 апреля

👨‍💻 Hostus Pocus Простой сайт о хостинге. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

Каждому фронтендеру будет полезно ⚠️ True Frontender – канал, который поможет поднять грейд и вырасти как разработчику. Авторские статьи, разбор задач с собеседований, шпаргалки и многое другое. 🪩 Присоединяйся и становись лучше с @TrueFrontender

👨‍💻 Card Inspirations - Meet the team Карточки сотрудников с анимацией. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

Тимофей знает где найти супер выгодные покупки! Для этого он каждый день мониторит маркетплейсы и делится у себя на канале. Так же делится новыми фичами на ваших устройствах, о которых вы не знали.

❔ Как красиво оформить блок на сайте? Сегодня сделаем блок со скриншотом веб-страницы. HTML:

<div class="portfolio-item">
<div class="portfolio-wrapper">
<div class="heading">
<h3>Адаптивный дизайн</h3>
</div>
<div class="thumbnail">
<a href="" target="_blank">
<img src="image.jpg">
</a>
</div>
</div>
</div>

CSS:

* {
   box-sizing: border-box;
   margin: 0;
}
body {
   background: #EAE7D8;
}
.portfolio-item {
   max-width: 300px;
   margin: 50px auto;
}
.portfolio-wrapper {
   position: relative;
   background: #CFC9BA;
}
.portfolio-wrapper:after {
   content: "";
   position: absolute;
   right: 0;
   bottom: -29px;
   left: 0;
   width: 105%;
   height: 50px;
   background: #EAE7D8;
   transform: rotate(-4deg);
}
.heading h3 {
   font-family: 'Montserrat Alternates', sans-serif;
   font-size: 12px;
   line-height: 16px;
   color: white;
   text-align: center;
   text-transform: uppercase;
   font-weight: 300;
   padding: 20px 0;
}
.thumbnail {
   position: relative;
   padding-bottom: 98%;
   overflow: hidden;
}
.thumbnail img {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   cursor: pointer;
   transform: translateY(0%);
   transition: 3.5s;
}
.thumbnail:hover img {
   transform: translateY(-100.5%);
}

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

Изучаешь frontend? Подпишись на канал CCODE, где ты найдешь все, что нужно для развития в этой увлекательной области программирования! 👉Подписаться на канал

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

🚀 Готовы погрузиться в мир JavaScript? 💻 Присоединяйтесь к нашему Telegram-каналу, где каждый день вы найдете увлекательные статьи, полезные советы и интересные задачи по JavaScript! 🌟  - Как создать креативный GitHub. - Подборка полезных плагинов для VS Code. - 8 советов, которые сделают JavaScript-код чище. Не упустите шанс стать настоящим гуру программирования! 💡 Присоединяйтесь прямо сейчас: JavaScript Notes.

👨‍💻 12 Column Grid Layout Макеты сетки из 12 столбцов. Может подойти, как отзывы клиентов на сайте. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы