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

🔥 GPT-4o (Omni) теперь в Telegram! Собрали все лучшие нейросети в одном месте: · Midjourney V6 · Stable Duffusion · DALL·E 3 · ChatGPT-4о Пользуйтесь : @GPT5_BOT 👈

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

<div class="post">
  <div class="post-top">
    <a href="#">
      <img src="image.jpg" class="post-top-img">
    </a>
    <p class="post-top-angle">Скидка</p>
    <p class="post-top-price"><span>500 &#8381;</span></p>
  </div>
  <div class="post-content">
    <h3>Букет цветов</h3>
    <p>В нашем магазине вы можете купить свежие цветы любого вида, от традиционных до экзотических.</p>
  </div>
</div>

CSS:

* {
  box-sizing: border-box;
}
p, h3 {margin: 0}
.post {
  width: 300px;
  margin: 50px auto 0;
  position: relative;
  background: white;
  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
  border-radius: 3px;
  font-family: 'Scada', sans-serif;
}
.post-top {
  min-height: 45px;
  position: relative;
  overflow: hidden;
}
.post-top a {
  text-decoration: none;
  display: block;
}
.post-top-img {
  border-radius: 3px 3px 0 0;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
.post-top-angle {
  width: 180px;
  height: 30px;
  line-height: 30px;
  position: absolute;
  top: 20px;
  right: -50px;
  transform:rotate(45deg);
  color: #fefefe;
  text-align: center;
  background: #F8CF82;
  font-size: 16px;
  font-weight:bold;
}
.post-top-price {
  width: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
  text-align: right;
}
.post-top-price span {
display: inline-block;
  height: 45px;
  line-height: 45px;
  padding: 0 20px;
  background: #F8CF82;
  border-radius: 3px 0 0 0;
  color: #fefefe;
  font-size: 1.5em;
  font-weight: bold;
}
.post-top-price:after {
  content: " ";
  display: block;
  height: 5px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #F8CF82;
}
.post-content {
  padding: 20px;
  font-family: 'Scada', sans-serif;
}
.post-content h3 {
  font-size: 1.5em;
}
.post-content p {
  margin-top: 10px;
  color: #6e6e6e;
  line-height: 1.5em;
}

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

🖥 Javascript - первый канал для FrontEnd разработчиков. По контенту: 1. Готовые примеры c кодом: карусели, паралаксы. 2. Frontend курсы 2024 года бесплатно. 3. 2000 реальных задач с собесов с разбором от Senior разработчика. Ещё мы собрали маст-хэв папку Frontend разработчика. Подписывайтесь, такие знания в 2024-м году на вес золота: @javascriptv

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

👨‍💻 HTML Tag Syntax Синтаксис тегов HTML. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

Устал от поиска интересного контента по JavaScript? WEBIK - Это интересные материалы, полезные и готовые рецепты кода, смешные мемы, топовые шпаргалки и познавательные викторины 😎 Подпишись, чтобы не потерять 😉

❔ Как сделать границы границы для текста? Элегантное решение, как сделать градиентные границы для элемента с помощью свойства border-image. За толщину рамки отвечает свойство border: 1px solid; HTML:

<div class="gradient-border">Градиентные границы</div>

CSS:

.gradient-border {
  padding: 20px;
  letter-spacing: 0.2em;
  border: 1px solid;
  border-image: linear-gradient(20deg, #f92056 38%, #00deff 65%);
  border-image-slice: 1;
}

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

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

👨‍💻Glossy button Стильная кнопка с тенью и анимацией Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

👨‍💻 Music Player with slider Музыкальный плеер со слайдером и выбором песен. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

⚡️ Frontend теперь в Telegram! Подписывайся: @frontend

❔ Как сделать всплывающую подсказку с помощью CSS? HTML:

<a href="" data-tooltip="600Кб">
  <span>
    <em>Скачать</em><i class="fa fa-cloud-download"></i>
  </span>
</a>

CSS:

.two {
  background: #E4E5D2;
  padding: 50px 20px;
  text-align: center;
} 
.two h1 {
  font-family: 'Open Sans', sans-serif;
  position: relative;
  color: #5C2610;
  font-size: 3em;
  font-weight: normal;
  line-height: 1;
  padding: 10px 0;
  margin: 0;
  display: inline-block;
}
.two h1:before {
  content: ""; 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 80%;
  height: 200%;
  border-radius: 50%/30%;
  border: 6px solid #5C2610;
  border-left-color: transparent;
  border-right-color: transparent;
}
@media (max-width: 420px) {
  .two h1 {font-size: 2em;}
}

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

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

Ваша личная карта для оплат за границей и сервисов Спасение для граждан РФ — зарубежная мультивалютная карта. Для оплаты сервисов, заказов на сайтах и покупок в путешествиях. • Дистанционное оформление • Бесплатная доставка карты по РФ • Бесплатное обслуживание • Работет с Apple Pay, GPay, Samsung Pay и т.д Без вашего визита в банк. Подходит для любых целей и работает по всему миру. Узнайте подробности и вспомните, как жить без ограничений: @neokartabot

👨‍💻Pure CSS 3D Interactive Todo List Интерактивный список дел Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

У топовых айтишников есть секрет Они работают не 8 часов, а головой. Вы можете так же с правильной библиотекой знаний: → Сайтодел для веб-разработчиков. Готовые макеты, анимации, палитры — и боты, которые автоматизируют часть кода и удаляют баги. Остаётся только внедрить в свой проект. → Английский для программистов откроет доступ к международным хакатонам и командировкам. В первый же месяц увидите, как выросли с бесплатным репетитором. Отдыхайте и зарабатывайте больше. Всё просто, два клика: → Сайтодел → Английский для программистов Первым, кто подпишется, бонусные гайды в подарок 🎁

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

<div class="two"><h1>Burger Heroes</h1></div>

CSS:

.two {
  background: #E4E5D2;
  padding: 50px 20px;
  text-align: center;
} 
.two h1 {
  font-family: 'Open Sans', sans-serif;
  position: relative;
  color: #5C2610;
  font-size: 3em;
  font-weight: normal;
  line-height: 1;
  padding: 10px 0;
  margin: 0;
  display: inline-block;
}
.two h1:before {
  content: ""; 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 80%;
  height: 200%;
  border-radius: 50%/30%;
  border: 6px solid #5C2610;
  border-left-color: transparent;
  border-right-color: transparent;
}
@media (max-width: 420px) {
  .two h1 {font-size: 2em;}
}

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

⚡️ Парень за минуту нарисовал конвертер валют, а нейросеть FlutterFlow сделала из скетча готовое приложение Поверьте, ChatGPT — «цветочки» по сравнению с сегодняшними разработками. ⁕ Нейросеть Great Leveler с показала эффективность 93,7% в борьбе с раком. ⁕ Новая ИИ SocialBee сможет вести соц. сети, полностью копируя манеры и стиль хозяина страницы. ⁕ HierSpeech+++ умеет быстро клонировать голоса, озвучивая ими любой текст. Прикоснитесь к революционным разработкам уже сейчас. Авторы «Газеты IT и технологий» не просто пишут про новые нейросети, но и дают на них ссылки. Знакомьтесь и пользуйтесь!