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

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

👨‍💻Icon Hover Effect Using 5 иконок с эффектом при наведении Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

🤯 Сложная теория простым языком в канале progway! Теоретические вопросы с реальных собесов, популярные задачи, простое описание сложных концепций с нуля! Подпишись и выделись среди конкурентов — @prog_way_blog

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

<div class="wrap">
  <h2>10 ways to surprise</h2>
  <div><a href="">discover how</a></div>
</div>

CSS:

body {
  margin: 0;
  height: 100vh;
  background: url('image.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
}
body:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(51,44,85,.4);
}
body:after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 10px;
  z-index: 1;
  border: 1px solid rgba(255,255,255,0.3);
}
.wrap {
  transform: translate(-50%, -50%);
  position: absolute; 
  top: 50%; 
  left: 50%;
  padding: 30px 50px;
  z-index: 3;
  text-align: center;
}
  h2 {
  color: white;
  font-size: 40px;
  font-weight: normal;
  letter-spacing: 2px;
  padding: 27px 0;
  margin: 0;
}
.wrap a {
  display: inline-block;
  background: #222222;
  border: 2px solid #222222;
  padding: 15px 28px;
  border-radius: 30px;
  text-decoration: none;
  font-size: 12px;
  color: #fff;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: .5s linear;
}
.wrap a:hover {animation: 1s tada infinite linear;}
@keyframes tada {
  0% {transform: scale3d(1, 1, 1);}
  10%, 20% {transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);}
  30%, 50%, 70%, 90% {transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);}
  40%, 60%, 80% {transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);}
  100% {transform: scale3d(1, 1, 1);}
}

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

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

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

👨‍💻Landing page HTML & CSS Лендинг с 4 страницами и переключением между ними Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

🔓 Давно хотел попробовать себя в IT, но нет средств на обучение? Доступ к знаниям разблокирован! 😎 IT Syndicate — лучшее место для поиска курсов по IT-технологиям совершенно бесплатно. У нас ты найдешь курсы по любым специальностям и уровням подготовки! 🔥 Заходи прямо сейчас, чтобы не потерять — IT Syndicate!

❔ Как сделать рамку для фото и текста в стиле профиля человека? HTML:

<div class="wrap">
  <h3>Мой профиль</h3>
  <p><img src="image.jpg"></p>
  <p>Lorem ipsum...</p>
  <p><a href="">Смотреть профиль</a></p>
</div>

CSS:

.wrap {
  width: 260px;
  height: 440px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
  background: white;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  position: relative;
}
.wrap:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 200px solid #CCF9F6;
  border-top: 220px solid #FFCE86;
  border-right: 200px solid #FF9B6C;
  border-bottom: 220px solid #CCF9F6;
  z-index: -1;
  left: -70px;
  top: 0;
}
.wrap p {
  font-size: 14px;
  line-height: 1.5;
}
.wrap a {
  text-decoration: none;
  color: #FF9B6C;
  font-weight: bold;
}

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

Ну все! Теперь не нужно тратить деньги на топовые курсы и книги по программированию — их выложили в Telegram бесплатно Все найденные курсы собирают тут — @portalToIT По этим курсам выучить любой язык за 7 дней вообще не проблема, находка для начинающих программистов.

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

✔️ CodeBase | Frontend - канал для начинающих веб-мастеров, которые хотят покорить FrontEnd! ➡️ У нас вы найдете: 🟢 крутые фишки для вёрстки 🟢 макеты проектов 🟢 полезные материалы и ресурсы 🟢 все о javascript, react 🟢 тонну годного материала 🔥 Заходи прямо сейчас, чтобы не потерять - CodeBase | Frontend!

👨‍💻CSS: has list filtering Список с функцией фильтра, изменения темы (ночь / день) и не только. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

🌟 В поиске источников вдохновения и знаний по IT? Тогда эта подборка каналов для тебя! 📚 1️⃣ Гайды по БД и SQL - готов разобраться с базами данных и SQL? Познакомься с лучшими гайдами и советами в нашем канале о базах данных. 2️⃣ Python | Программирование - твой страстный язык программирования Python? Получай уникальные примеры и полезные материалы для своего роста и развития в Python. 3️⃣ Книжки айтишки - любишь читать и увлекаешься книгами по IT? Наш подбор увлекательных книг и обзоров поможет тебе расширить свои горизонты. Присоединяйся к нам и узнавай много нового! 🚀 Подпишись на все три канала, чтобы быть в курсе всех актуальных материалов. Погружайся в мир новых знаний!

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

<ol class="list">
  <li><a href="">Элемент списка</a></li>
  <li><a href="">Элемент списка</a></li>
  <li><a href="">Элемент списка</a>
    <ol class="sublist">
      <li><a href="">Элемент вложенного списка первого уровня</a>
        <ol class="sublist2">
          <li><a href="">Элемент вложенного списка второго уровня</a></li>
          <li><a href="">Элемент вложенного списка второго уровня</a></li>
          <li><a href="">Элемент вложенного списка второго уровня</a></li>
        </ol>
      </li>
      <li><a href="">Элемент вложенного списка первого уровня</a></li>
      <li><a href="">Элемент вложенного списка первого уровня</a></li>
    </ol>
  </li>
  <li><a href="">Элемент списка</a></li>
  <li><a href="">Элемент списка</a></li>   
</ol>

CSS:

.list, .sublist, .sublist2 {
   margin: 0;
   padding: 0;
   counter-reset: li;
   list-style: none;
   font-family: 'Didact Gothic', sans-serif;
}
li:before {
   counter-increment: li;
   content: counters(li, ".") ". ";
   padding: 5px 0;
   display: inline-block;
   margin-right: 5px;
   border-radius: 20px;
   color: white;
   text-align: center;
   width: 50px;
}
.list a {
   display: inline-block;
   padding: 5px;
   text-decoration: none;
   color: #716B65;
   margin: 5px 0;
}
ol.list li:before {
   background: #65486C;
}
ol.sublist li:before {
   background: #7282A3;
   box-shadow: 10px 0 0 #97A8C2;
   margin-right: 15px;
   -webkit-transition: .4s linear;
   -moz-transition: .4s linear;
   -ms-transition: .4s linear;
   -o-transition: .4s linear;
   transition: .4s linear;
}
ol.sublist li:hover:before {
   box-shadow: none;
   margin-right: 5px;
}
ol.sublist2 li:before {
   background: #B9ACA6;
   box-shadow: 10px 0 0 #CEBEB1, 20px 0 0 #D9C9BC;
   margin-right: 25px;
   transition: .4s linear;
}
ol.sublist2 li:hover:before {
   box-shadow: none;
   margin-right: 5px;
}

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

Присоединяйтесь к нашему бесплатному курсу и начните увлекательное путешествие в мир Java! Изучайте основы, создавайте программы, разбирайтесь с методами и анализируйте ошибки в коде. Практика, упражнения и проверочные тесты помогут вам освоить навыки программирования. 🎓 Чему вы научитесь: — Создавать программы с использованием основных конструкций языка.  — Разделять код на методы для повторного использования.  — Анализировать ошибки в коде с использованием отладочной печати. 💼 Включено в курс: 29 уроков (видео и/или текст), 35 упражнений в тренажере, 95 проверочных тестов + дополнительные материалы. Вы с нами?😉

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

👨‍💻 Изучаешь Frontend? Я тоже! idk Frontend - канал, в котором я максимально подробно конспектирую весь мой путь обучения с самого старта. С меня: — Сложная теория простым языком; — Практические примеры и объяснения; — Крутые викторины по JS и шпаргалки; — Работа над ошибками. С тебя: — Подписка @idk_frontend Продолжим обучаться вместе! 👋

👨‍💻Circular Carousel MotionPath Колесо с боксами и возможностью вращения. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы