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

👨‍💻 Rolling Check Toggle Современный переключатель Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

🔥Тесты для подготовки к собеседованию🔥 Выбери своё направление: 1. Frontend 2. Python 3. Java 4. Тестировщик QA 5. Data Science 6. DevOps 7. C# 8. C/C++ 9. Golang 10. PHP 11. Kotlin 12. Swift

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

<div class="product-wrap">
  <div class="product-item">
    <img src="image.jpg">
    <div class="product-buttons">
      <a href="" class="button">В корзину</a>
    </div>
  </div>
  <div class="product-title">
    <a href="">Маленькое черное платье</a>
    <span class="product-price">₽ 1999</span>
  </div>
</div>

CSS:

* {
   box-sizing: border-box;
}
.product-wrap {
   width: 300px;
   margin: 0 auto;
   background: white;
   padding: 0 0 20px;
   text-align: center;
   font-size: 14px;
   font-family: Lora;
   text-transform: uppercase;
}
.product-item {
   position: relative;
   overflow: hidden;
}
.product-wrap img {
   display: block;
   width: 100%;
}
.product-buttons {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, .8);
   opacity: 0;
   transition: .3s ease-in-out;
}
.button {
   text-decoration: none;
   color: #c0a97a;
   font-size: 12px;
   width: 140px;
   height: 40px;
   line-height: 40px;
   position: absolute;
   top: 50%;
   left: 50%;
   border: 2px solid #c0a97a;
   transform: translate(-50%, -50%) scale(0);
   transition: .3s ease-in-out;
}
.button:before {
   content: "\f07a";
   font-family: FontAwesome;
   margin-right: 10px;
}
.product-item:hover .product-buttons {
   opacity: 1;
}
.product-item:hover .button {
   transform: translate(-50%, -50%) scale(1);
}
.button:hover {
   background: black;
}
.product-title {
   color: #5e5e5e;
}
.product-title a {
   text-decoration: none;
   color: #2e2e2e;
   font-weight: 600;
   margin: 15px 0 5px;
   padding-bottom: 7px;
   display: block;
   position: relative;
   transition: .3s ease-in-out;
}
.product-title a:after {
   content: "";
   position: absolute;
   width: 40px;
   height: 2px;
   background: #2e2e2e;
   left: 50%;
   margin-left: -20px;
   bottom: 0;
   transition: .3s ease-in-out;
}
.product-title a:hover {
   color: #c0a97a;
}
.product-title:hover a:after {
   background: #c0a97a;
}
.product-price {
   font-size: 20px;
   color: #c0a97a;
   font-weight: 700;
}

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

👩‍💻 MOXA Портфолио для креативного дизайнера 🟠 Сложность: Средний 🟠 Адаптивность: Есть Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

👨‍💻 SVG Circle Clock Часы в виде колец Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

👨‍💻 SVG Circle Clock Часы в виде колец Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

⚡️ YouTube больше не нужен! Блогеры переезжают в Telegram, а разработчики из Big Tech не остались в стороне и уже перенесли терабайты платного контента в свои каналы: 📱 Frontend: @frontend 📱 Python: @python 📱 Java: @java 📱 Дизайн: @design 📱 Английский в IT: @english 📱 IT Библиотека: @library 📱 IT Мемы: @memes

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

<p class="gradient-text">Градиентный текст</p>

CSS:

@import url(https://fonts.googleapis.com/css?family=Rubik+One&subset=latin,cyrillic);
.gradient-text {
  font-family: 'Rubik One', sans-serif;
  font-size: 50px;
  text-transform: uppercase;
  background: linear-gradient(45deg, #0B2349 33%, #0D61BC 66%, #8AA9D6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #0B2349;
  display: table;
  margin: 20px auto;
}

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

Frontend теперь в телеграм! Собрали крупные русскоязычные каналы, где вы найдете всю информацию о последних трендах и лучших практиках: Логово Верстальщика — научит верстать продающие сайты. Node.JS — поможет узнать все тонкости и секреты JavaScript и его фреймворков. Frontender's notes — советы и полезные приемы для каждого разработчика.

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

👨‍💻 Responsive Image Carousel (Animation) Отзывчивая карусель с фото и анимацией Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

🔥 824 ГБ платного контента для Frontend-разработчиков выложили бесплатно в Telegram Выбирай нужное и обучайся: 98 ГБ — JavaScript 62 ГБ — TypeScript 33 ГБ — HTML 71 ГБ — CSS 62 ГБ — React 47 ГБ — Vue 51 ГБ — Angular 17 ГБ — Flexbox 31 ГБ — Grid 14 ГБ — Git & GitHub 22 ГБ — Webpack 37 ГБ — Figma 279 ГБ — Многое другое... 🔒 Успей подписаться, пока не удалили

❔ Как оформить полупрозрачный фон? HTML:

<div class="image-caption">
  <div class="category"><a href="">Lifestyle</a></div>
  <h2 class="post-title"><a href="">Understand Your Girl Needs</a></h2>
  <div class="post-readmore"><a href="">Read more</a></div>
</div>

CSS:

body {
  margin: 0;
  background-image: url(image.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  height: 100vh;
  text-align: center;
}
.image-caption {
  transform: translate(-50%, -50%);
  position: absolute; 
  top: 50%; 
  left: 50%;
  padding: 30px 50px;
  background: rgba(255,255,255,.6);
}
.image-caption a {
  text-decoration: none;
  color: #212121;
  transition: .25s ease-in-out;
}
.image-caption a:hover,
.image-caption a:focus {
  color: #f17d80;
  outline: 0;
}
.category {
  position: relative;
  padding: 0 25px;
  display: inline-block;
}
.category a {
  font-weight: bold;
  text-transform: uppercase;
  display: inline-block;
  padding: 0 .75em;
  line-height: 1.2em;
  margin: 0 .3em;
  letter-spacing: 2px;
}
.category:before, .category:after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -2px;
  width: 25px;
  border-bottom: 2px solid;
}
.category:before {left: 0;}
.category:after {right: 0;}
.post-title {margin-bottom: 30px;}
.post-title a {
  text-transform: capitalize;
  font-size: 26px;
  letter-spacing: .05em;
  font-weight: normal;
  line-height: 1.35;
}
.post-readmore a {
  display: inline-block;
  padding: 5px 25px;
  border-top: 1px solid;
  border-bottom: 1px solid;
}
.post-readmore a:hover {
  background: #f17d80;
  color: #fff;
  border-color: #f17d80;
}

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

🧐 Кто стоит за этим каналом? Всем привет! Меня зовут Владислав. Я автор канала КодВеб. И вот уже почти 2 года моя команда делает для вас много полезного контента по веб-разработке.

🤖 Сам я раньше ей много занимался, однако нашел свое призвание в разработке чат-ботов и открыл свое агентство!

Всех кому интересны новости Telegram, IT и бизнеса, прошу подписаться на мой блог: @swiftagencyru Со всех старых подписчиков — ❤️

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

Станьте AI-разработчиком на Python и зарабатывайте от 150.000₽ в месяц 🔥🔥🔥 Мы научим вас создавать и тренировать нейронные сети, и вы сможете: 1️⃣ Устроиться разработчиком в крупную компанию и зарабатывать от 150 тыс. ₽ в месяц 2️⃣ Разрабатывать такие проекты на заказ и зарабатывать от 500 тыс. ₽ за проект 3️⃣ Создать нейро-сотрудника в вашей компании и вырасти на +30-100% в зарплате На интенсиве будет много практики: создадим 9 нейросетей за 1 вечер: 🧬 Оценка выброса CO2 по параметрам машины 🧬 Сегментация изображения для робота доставщика 🧬 Трекинг людей на видео 🧬 Распознавание речи и другие Ведущий интенсива - Senior AI-разработчик и основатель Университета искусственного интеллекта 🔥 Регистрируйтесь на бесплатный интенсив! Встречаемся в ближайшую среду. Вы узнаете, как освоить самую востребованную профессию!

👩‍💻 CALIFORNIA Магазин техники Apple 🟠 Сложность: Средний 🟠 Адаптивность: Есть Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы