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

❔ Как сделать анимированный переход? CSS:

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #F8B83C;
}
div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #F5F5F5;
  box-shadow: 0 0 0 5px #F8B83C, 0 0 0 10px #EB7722;
  transition: border-radius 1s linear, box-shadow 1s 1s ease-in-out, transform 1s 2s linear, background 1s 3s linear;
}
div:hover {
  border-radius: 0;
  box-shadow: 0 0 0 10px #F8B83C, 0 0 0 25px #EB7722;
  transform: scale(1.1) rotate(45deg) ;
  background: #DACFCB;
}

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

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

👨‍💻Encrypted Password Reveal Окно для ввода пароля с возможностью скрытия Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

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

<ul class="category-list">
  <li><a href="">Видео</a><span>5</span></li>
  <li><a href="">Фотошоп</a><span>3</span></li>
  <li><a href="">Дизайн</a><span>2</span></li>
  <li><a href="">Путешествия</a><span>2</span></li>
  <li><a href="">Музыка</a><span>2</span></li>
</ul>

CSS:

.category-list * {transition: .4s linear;}
.category-list {
  background: white;
  list-style-type: circle;
  list-style-position: inside;
  padding: 0 10px;
  margin: 0;
}
.category-list li {
  font-family: "Trebuchet MS", "Lucida Sans";
  border-bottom: 1px solid #efefef;
  padding: 10px 0;
}
.category-list a {
  text-decoration: none;
  color: #555;
}
.category-list li span {
  float: right;
  display: inline-block;
  border: 1px solid #efefef;
  padding: 0 5px;
  font-size: 13px;
  color: #999;
}
.category-list li:hover a {color: #c93961;}
.category-list li:hover span {
  color: #c93961;
  border: 1px solid #c93961;
}

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

👩‍💻 Landing page with scroll-driven animation Одностраничный лендинг с анимацией прокрутки 🟠 Сложность: Средний 🟠 Адаптивность: Нет Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

На css и js можно делать крутые отзывчивые интерфейсы Если знать, как 💥 Приручить вёрстку поможет Нестыдный код. Создавай классные эффекты в своих работах, даже если с фантазией все плохо Несколько сотен готовых решений для вдохновения и использования  Личный помощник фронтендеру прямо в мессенджере!

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

❔ Как сделать блок с кратким содержанием? Блок с кратким содержанием статьи Продолжаем оформление нашей страницы Анонс статей обернём элементом <article id="post-1" class="post">: HTML:

<div class="container">
  <div class="posts-list">
    <article id="post-1" class="post">
      <div class="post-image"><a href=""><img src="image.jpg"></a></div>
      <div class="post-content">
        <div class="category"><a href="">Дизайн</a></div>
        <h2 class="post-title">Весна</h2>
        <p>Очень богат русский язык словами, относящимися к временам года и к природным явлениям, с ними связанным.</p>
        <div class="post-footer">
          <a class="more-link" href="">Продолжить чтение</a>
          <div class="post-social">
            <a href="" target="_blank"><i class="fa fa-facebook"></i></a>
            <a href="" target="_blank"><i class="fa fa-twitter"></i></a>
            <a href="" target="_blank"><i class="fa fa-pinterest"></i></a>
          </div>
        </div>
      </div>
    </article>
    <article id="post-2" class="post">
      ...
    </article>
  </div> <!-- конец div class="posts-list"-->

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

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

📂 Вся База по IT в одном месте! IT База — новый канал со всем нужным как айтишникам, так и тем, кто давно хотел вкатиться. Заходите, и вы узнаете: ✅ Сколько сейчас зарабатывает кодер? ✅ Как с нуля вкатиться в IT в 2024? ✅ Какие есть секреты при работе в IT? Вопросов много, все ответы — уже на Базе🧑‍💻

👨‍💻Adjustable Text Emphasis with CSS Регулируемый градиентный текст Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

👨‍💻 Изучай фронтенд по мини-гайдам! Канал WebTaverna ежедневно публикуют полезные обучающие мини-гайды в картинках, а также различные полезные шпаргалки и советы по HTML, CSS и JavaScript ➡️ Подписывайся на WebTaverna 😮

❔ Как добавить и оформить метатеги и шапку страницы? 1️⃣Метатеги и раздел <head> Добавим в раздел <head> необходимые файлы — ссылку на используемые шрифты, библиотеку jQuery, а также плагин prefixfree (чтобы не писать для свойств браузерные префиксы): HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Адаптивная вёрстка сайта</title>
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic|Playfair+Display:400,700&subset=latin,cyrillic">
  <link rel="stylesheet" type="text/css" href="image.jpg">
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="image.jpg"></script>
  <script src="image.jpg"></script>
</head>
<body>

2️⃣ Шапка страницы В шапке страницы <header> поместим следующие элементы-контейнеры: • логотип <a class="logo">; • кнопку для показа/скрытия главного меню <div class="nav-toggle">; • главное меню <ul id="menu">; • форму поиска по сайту <form id="searchform">. HTML:

<header>
    <nav class="container">
      <a class="logo" href="">
        <span>L</span>
        <span>O</span>
        <span>G</span>
        <span>O</span>
      </a>
      <div class="nav-toggle"><span></span></div>
      <form action="" method="get" id="searchform">
        <input type="text" placeholder="Искать на сайте...">
        <button type="submit"><i class="fa fa-search"></i></button>
      </form>
      <ul id="menu">
        <li><a href="">Блог</a></li>
        <li><a href="">Портфолио</a></li>
        <li><a href="">Об авторе</a></li>
      </ul>
    </nav>
  </header>

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

erid: LjN8K9ki7 Быть руководителем это не только зарплата или премии. Это целый пласт знаний во многих областях. Надо иметь многожество Soft и Hard навыков, разбираться с бизнесом, мотивировать и обучать персонал и еще многое другую. В своем телеграмм канале рассказываю про свой опыт руководства в ИТ (которому уже более 10 лет) и знания. Затрагиваю такие темы: Как мотивировать сотрудника Какие стили управления бывают Как контролировать эффективность сотрудников Как планировать работы Как управлять продуктом и многое другое. Подписывайся на канал, чтобы узнать ответы на эти и многие другие вопросы: https://t.me/ch_agaltsovav

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

​​Занимаетесь веб-программированием? Канал @drbrain4dev - источник полезной информации не только для новичков, но и для опытных разработчиков. Здесь вы найдете: 1. интересные заметки, 2. кейсы, 3. тренды, 4. актуальные статьи. Каждый день мы размещаем для Вас материалы про frontend, backend, инструменты разработчика и многое другое на канале dr.Brain

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

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