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

❔ Как оформить split-кнопки? HTML:

<button class="btn">  
<span class="text">В корзину</span> 
</button>

CSS:

.btn {
   position: relative;
   padding: 15px 30px;
   margin: 0 20px;
   font-family: 'Montserrat Alternates', sans-serif;
   color: white;
   font-weight: 600;
   background: #c81965;
   border-width: 0;
   outline: none;
   cursor: pointer;
}
.btn:before, .btn:after {
   content: "";
   position: absolute;
   height: 50%;
   width: 100%;
   background: #c81965;
   transition: .3s cubic-bezier(.75, .24, .01, .9);
}
.btn:before {
   top: 0;
   right: -5px;
}
.btn:after {
   bottom: 0;
   left: -5px;
}
.btn:hover:before {
   transform: translateX(-5px);
}
.btn:hover:after {
   transform: translateX(5px);
}
.btn2, .btn2:before, .btn2:after {
   background: #1f0b2f;
}
.text {
   position: relative;
   z-index: 2;
}

@codewebx | #tutorial 💸 Как программисту выйти на доход больше 100.000р/мес. на фрилансе?

👩‍💻 FEATHER Сайт на тему моделирования интерьера 🟠 Сложность: Сложный 🟠 Адаптивность: Нет Исходники | @codewebx | #codepen 💸 Как программисту выйти на доход больше 100.000р/мес. на фрилансе?

👨‍💻Sticky Navigation Меню навигации Исходники | @codewebx | #codepen 💸 Как программисту выйти на доход больше 100.000р/мес. на фрилансе?

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

<div class="post-wrap">
<div class="post-item">
<div class="post-item-wrap">
<a href="" class="post-link">
<h3 class="post-title">Title</h3>
<p class="post-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel arcu purus. Duis egestas purus et ex interdum lobortis. Quisque nec magna viverra, interdum dolor at, congue augue. Quisque sed interdum augue, a lacinia nulla. Sed risus nibh, vestibulum eu nisi eu, imperdiet tempor quam.</p>
</a>
</div>
</div>

<div class="post-item">
<div class="post-item-wrap">
<a href="" class="post-link">
<h3 class="post-title">Title</h3>
<p class="post-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel arcu purus. Duis egestas purus et ex interdum lobortis. Quisque nec magna viverra, interdum dolor at, congue augue. Quisque sed interdum augue, a lacinia nulla. Sed risus nibh, vestibulum eu nisi eu, imperdiet tempor quam.</p>
</a>
</div>
</div>

<div class="post-item">
<div class="post-item-wrap">
<a href="" class="post-link">
<h3 class="post-title">Title</h3>
<p class="post-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel arcu purus. Duis egestas purus et ex interdum lobortis. Quisque nec magna viverra, interdum dolor at, congue augue. Quisque sed interdum augue, a lacinia nulla. Sed risus nibh, vestibulum eu nisi eu, imperdiet tempor quam.</p>
</a>
</div>
</div>
</div>

CSS:

* {
   margin: 0;
   box-sizing: border-box;
}
.post-wrap {
   max-width: 1120px;
   margin: 0 auto;
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
}
.post-item {
   padding: 10px;
}
.post-item-wrap {
   background: #F7F7F2;
   position: relative;
}
.post-item-wrap:after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
   background: #C9F2C7;
   transform: rotate(1deg);
   transform-origin: left bottom;
   transition: .3s ease-in-out;
}
.post-item-wrap:hover:after {
   top: 5px;
   left: 5px;
   transform: rotate(2deg);
}
.post-link {
   text-decoration: none;
   display: block;
   padding: 30px;
}
.post-title {
   color: #33261D;
   margin-bottom: 15px;
   transition: .3s ease-in-out;
}
.post-item-wrap:hover .post-title {
   color: #C9F2C7;
}
.post-content {
   color: #A69888;
   font-size: 14px;
}
@media (min-width: 768px) {
   .post-item {
      flex-basis: 50%;
      flex-shrink: 0;
   }
}
@media (min-width: 960px) {
   .post-item {
      flex-basis: 33.333333333%;
   }
}

@codewebx | #tutorial 💸 Как программисту выйти на доход больше 100.000р/мес. на фрилансе?

Готовишься к Frontend или Backend собеседованию? Разбираем для тебя самые актуальные вопросы для подготовки к собеседованию Выбирай свое направление: 👩‍💻 Frontend 👩‍💻 Python 👩‍💻 Go 👩‍💻 Java 👩‍💻 C/C++ 👩‍💻 C# 👩‍💻 PHP

👩‍💻 WORKOUT Сайт спортивной тематики 🟠 Сложность: Легкий 🟠 Адаптивность: Нет Исходники | @codewebx | #codepen 💸 Как программисту выйти на доход больше 100.000р/мес. на фрилансе?

👨‍💻Search with morphing button Поле поиска Исходники | @codewebx | #codepen 💸 Как программисту выйти на доход больше 100.000р/мес. на фрилансе?

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

<article class="slide">
  <img src="image.jpg">
  <div class="slide-content">
    <div class="slide-item">              
 <h3>Полевые цветы</h3>
        <p>Полевые цветы на зелёном лугу...</p>
    </div>
  </div>
</article>

CSS:

*, *:after, *:before {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
}
.slide {
  display: block;
  width: 400px; 
  margin: 50px auto 0;
  position: relative;
}
.slide img {
  display: block;
  position: relative;
  max-width: 100%;
  height: auto;
}
.slide-content {
  margin: -10px 20px 0;
  position: relative;
  z-index: 3;
  text-align: center;
  transform: translateY(0);
  transition: transform .4s ease-in-out;
}
.slide-content:before, .slide-content:after {
  content: "";
  position: absolute;
  bottom: 0;
  margin: 0 0 2px;
  height: 1px;
  box-shadow: 0 0 7px 0 rgba(0,0,0,0.6);
  transition: .4s ease-in-out;
}
.slide-content:before {
  left: 0;
  right: 50%;
  transform: rotate(1deg);
}
.slide-content:after {
  right: 0;
  left: 50%;
  transform: rotate(-1deg);
}
.slide-item {
  background: #FBFAF1;
  padding: 20px 20px 18px;
  position: relative;
  z-index: 5;
  border-radius: 0;
  transition: .4s ease-in-out;
}
.slide-item h3 {
  font-family: 'Playfair Display', serif;
  color: #B4111A;
  font-size: 28px;
  margin-bottom: 15px;
}
.slide-item p {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  line-height: 1.5em;
  color: #1E2630;
}
.slide:hover .slide-content{
  transform:translateY(-10%);
}
.slide:hover .slide-item{
  border-radius: 0 0 200px 200px/0 0 10px 10px;
}
.slide:hover .slide-content:before {
  left: 10px;
}
.slide:hover .slide-content:after {
  right: 10px;
}
.slide:hover .slide-content:before, .slide:hover .slide-content:after {
  box-shadow: 0 0 16px 3px rgba(0,0,0,0.6);
  margin: 0 0 6px;
}
.slide:hover .slide-content:before {
  right: 50.4%;
}
.slide:hover .slide-content:after {
  left: 50.4%;
}

@codewebx | #tutorial 💸 Как программисту выйти на доход больше 100.000р/мес. на фрилансе?

👩‍💻 CREATIVE Макет целевой страницы 🟠 Сложность: Легкий 🟠 Адаптивность: Нет Исходники | @codewebx | #codepen 💸 Как программисту выйти на доход больше 100.000р/мес. на фрилансе?

👨‍💻Clocktober Day 2: Scale Еще одни часы, но в более современном стиле Исходники | @codewebx | #codepen 💸 Как программисту выйти на доход больше 100.000р/мес. на фрилансе?

❔ Как сделать выезжающее поле поиска? Поле поиска появляется при нажатии на кнопку с иконкой. HTML:

<form>
  <input type="text" placeholder="Искать здесь...">
  <button type="submit"></button>
</form>

CSS:

* {box-sizing: border-box;}
form {
  position: relative;
  width: 300px;
  margin: 0 auto;
  height: 42px;
}
input {
  height: 42px;
  width: 0;
  padding: 0 42px 0 15px;
  border: none;
  border-bottom: 2px solid transparent;
  outline: none;
  background: transparent;
  transition: .4s cubic-bezier(0, 0.8, 0, 1);
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
}
input:focus {
  width: 300px;
  z-index: 1;
  border-bottom: 2px solid #F9F0DA;
}
button {
  background: #683B4D;
  border: none;
  height: 42px;
  width: 42px;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}
button:before {
  content: "\f002";
  font-family: FontAwesome;
  font-size: 16px;
  color: #F9F0DA;
}

@codewebx | #tutorial 💸 Как программисту выйти на доход больше 100.000р/мес. на фрилансе?

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

1️⃣ Мы запускаем обучение для программистов Если у тебя уже есть опыт в программировании и ты хочешь выйти на доход больше 100.000₽/мес, то мы сможем тебе помочь! Coders Academy — это: ✅ 15 видео-уроков с практическими заданиями на темы: Как находить клиентов? Как продавать свои услуги дорого? Как быть продуктивным и успевать больше других? ✅ 4 интервью с экспертами в сферах: программирования, продаж, нетворкинга и продуктивности ✅ 21 макет в Figma для обложек твоих услуг, шапок профиля на Kwork, а также обложек для статей и кейсов ✅ Сообщество программистов, стремящихся к выскому доходу. Ты сможешь каждую неделю проводить онлайн-встречу с одним из участиноков академии.

🔥 Прямо сейчас ты можешь получить беспалтно топовый шаблон для отклика и 2 обложки твоих услуг на фрилансе — @academycodersbot

Господи, да в чём проблема стать фронтендером? Подписался на эти три канала: 👉 Фронтенд 👉 Верстка 👉 Node.JS Заходишь каждый день, тратишь 15 минут и изучаешь актуальную информацию. Можешь сразу применять на практике. ВСЁ! Это настолько просто, что даже твой кот справится. Подпишись сейчас, потом спасибо скажешь.

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

❔ Как создать вложенную таблицу? Чтобы вложить одну таблицу в другую, нужно поместить код вложенной таблицы в выбранную ячейку основной таблицы, например: HTML:

<table class="nesting">
  <tr>
    <th>ячейка заголовка таблицы</th>
    <th>ячейка заголовка таблицы</th>
  </tr>
  <tr>
    <td>ячейка таблицы</td>
    <td>
      <table>
        <tr>
          <th>ячейка заголовка вложенной таблицы</th>
        </tr>
        <tr>
          <td>ячейка вложенной таблицы</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

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

🔹 Пора перестать теряться в мире React — вступайте в ReactJS Daily! Наш канал — это настоящий клад для тех, кто хочет покорить React! Мы собрали всё, что нужно для разработки: простые объяснения, эффективные методы и вдохновляющие примеры. Что вас ждет?   - Подробные гайды: разбираем сложные концепции React, как хуки и оптимизацию, по шагам. - Практика с примерами: каждый пост помогает прокачивать знания и применять их в реальных проектах. - Актуальные новости и тренды: React развивается, и вы будете в курсе всех новинок. Подписывайтесь на ReactJS Daily, чтобы идти вперед вместе с единомышленниками и уверенно строить крутые приложения! 🚀