---

offline version v3
Запись на курсы по HTML, CSS, JavaScript, PHP, фреймворкам и CMS,
а также: помощь в поиске работы и заказов, стажировка на реальных проектах→
Верстка JavaScript PHP TypeScript NodeJS Python Java C++ Rust SQL Vue React Angular jQuery Laravel Git Webpack Gulp Terminal Internet Глоссарий Сленг Соц. сети
Учебник по верстке для новичков
Основы HTML
Введение
mkPmHLInr
Язык HTML
mkPmHLLg
HTML теги
mkPmHLTg
Атрибуты
mkPmHLAt
Стили
mkPmHLSt
Основная структура страницы
mkPmHLPS
Основные теги
mkPmHLBT
Абзацы
mkPmHLPg
Заголовки
mkPmHLHd
Выделение текста жирным
mkPmHLBT
Выделение текста курсивом
mkPmHLIT
Неупорядоченные списки
mkPmHLUL
Упорядоченные списки
mkPmHLOL
Ссылки
mkPmHLLn
Внутренние ссылки
mkPmHLIL
Изображения
mkPmHLIg
Ширина картинки
mkPmHLIW
Высота картинки
mkPmHLIH
Установка ширины и высоты картинки
mkPmHLIWH
Таблицы
mkPmHLTb
Ширина и высота таблицы
mkPmHLTbWH
Ячейки-заголовки
mkPmHLHdC
Практикум
mkPmHLPrm
Основы CSS
Введение в CSS
mkPmCLInr
Как работать с CSS
mkPmCLUs
Значения для цвета
mkPmCLCV
Любые цвета
mkPmCLCl
Ширина и высота
mkPmCLWH
Выравнивание текста
mkPmCLTA
Выравнивание текста вправо
mkPmCLRTA
Выравнивание текста по центру
mkPmCLCTA
Выравнивание текста влево
mkPmCLLTA
Выравнивание текста одновременно вправо и влево
mkPmCLJTA
Практика на выравнивание текста
mkPmCLTAP
Жирность
mkPmCLTB
Курсив
mkPmCLTI
Размер шрифта
mkPmCLFS
Семейство шрифта
mkPmCLFF
Межстрочный интервал
mkPmCLLH
Значение line-height без единиц
mkPmCLLHWU
Свойство-сокращение font
mkPmCLFShP
Красная строка текста
mkPmCLFLI
Эффекты текста
mkPmCLTE
Нижнее подчеркивание текста
mkPmCLUnT
Верхнее подчеркивание текста
mkPmCLOvT
Перечеркивание текста
mkPmCLLTT
Отмена эффектов для текста
mkPmCLNTE
Практикум
mkPmCLPrm
Селекторы
Родственные связи тегов
mkPmSlTR
Наследование свойств
mkPmSlPI
Группировка селекторов
mkPmSlSG
Общие свойства
mkPmSlCP
Селекторы потомков
mkPmSlDS
Дочерний селектор
mkPmSlChS
Селектор класса
mkPmSlCS
Тег span
mkPmSlTS
Тег div
mkPmSlTD
Группировка классов
mkPmSlCG
Тег с заданным классом
mkPmSlTCS
Селектор потомков и классы
mkPmSlDSC
Сложные комбинации селектора потомков и классов
mkPmSlDSCC
Ошибка новичков в селекторе потомков
mkPmSlDSM
Элемент с несколькими классами
mkPmSlSCE
Селектор по id
mkPmSlIS
Селектор по id и классы
mkPmSlISC
Использование id
mkPmSlUIS
Селектор по нескольким классам
mkPmSlSCS
Несколько селекторов слитно
mkPmSlSST
Ошибка несколько селекторов
mkPmSlSSM
Группировка сложных селекторов
mkPmSlCSG
Ошибка при группировке
mkPmSlCSGM
Тренировка на комбинации селекторов
mkPmSlSCP
Приоритет селекторов
mkPmSlSP
Замечание к конфликту свойств
mkPmSlPCN
Правила специфичности
mkPmSlSRu
Приоритет селекторов потомков
mkPmSlDSP
Соседний селектор
mkPmSlASS
Родственный селектор
mkPmSlGSS
Универсальный селектор
mkPmSlUS
Селекторы атрибутов
mkPmSlAS
Состояния ссылок
mkPmSlLS
Нюансы последовательности состояния ссылок
mkPmSlNLSS
Состояния link и visited
mkPmSlLVS
Обычное использование состояния ссылок
mkPmSlLSOU
Сложные селекторы со ссылками
mkPmSlLCS
Ссылка с классом
mkPmSlLCls
Выборка по позиции элементов
mkPmSlPS
Выборка по позиции и типу элементов
mkPmSlPTS
Отрицание not
mkPmSlNS
Оформление
Фоновый цвет
mkPmDcBF
Основы работы с границами
mkPmDcBS
Сплошная граница
mkPmDcSldB
Точечная граница
mkPmDcDtdB
Граница в виде тире
mkPmDcDsdB
Выпуклая граница
mkPmDcRdgB
Двойная граница
mkPmDcDblB
Свойство-сокращение для границы
mkPmDcBShP
Границы для разных сторон
mkPmDcSB
Скругление границ блока
mkPmDcBlRn
Скругление границ фона
mkPmDcBcRn
Создание круга
mkPmDcCrCr
Скругление для разных углов
mkPmDcSR
Четыре значения
mkPmDcFSR
Два значения
mkPmDcTwSR
Три значения
mkPmDcThSR
Скругление в процентах
mkPmDcPR
Создание круга при скруглении в процентах
mkPmDcPRC
Картинка для фона
mkPmDcBI
Повторение картинки фона
mkPmDcBIR
Другие свойства для фона
mkPmDcBIP
Маркеры списков ul
mkPmDcUM
Квадратные маркеры списков ul
mkPmDcSqUM
Маркеры списков ul в виде кружков
mkPmDcCrUM
Маркеры списков ul в виде закрашенных кружков
mkPmDcDUM
Отсутствие маркеров списков ul
mkPmDcNUM
Маркеры списков ol
mkPmDcOM
Строчные римские цифры для списков ol
mkPmDcLROM
Заглавные римские цифры для списков ol
mkPmDcUROM
Строчные латинские буквы для списков ol
mkPmDcLAOM
Заглавные латинские буквы для списков ol
mkPmDcUAOM
Строчные греческие буквы для списков ol
mkPmDcLGOM
Числа с нулем впереди для списков ol
mkPmDcDLZOM
Блочная модель
Внешний отступ margin
mkPmBMMr
Отступы margin для разных сторон
mkPmBMMS
Несколько значений в margin
mkPmBMMSV
Четыре значения в margin
mkPmBMMFV
Два значения в margin
mkPmBMMTwV
Три значения в margin
mkPmBMMThV
Внутренний отступ padding
mkPmBMPd
Отступы padding для разных сторон
mkPmBMPS
Несколько значений в padding
mkPmBMPSV
Расширение элементов
mkPmBMEE
Влияние границы на расширение элементов
mkPmBMBEEE
Совместное влияние padding и границы на расширение элементов
mkPmBMPBEEE
Отмена расширения элементов
mkPmBMEEC
Блочные элементы
mkPmBMBE
Ширина и высота блочного элемента
mkPmBMBEWH
Ширина блочного элемента
mkPmBMBEW
Высота блочного элемента
mkPmBMBEH
Высота без содержимого
mkPmBMBEHWC
Несколько блочных элементов рядом
mkPmBMMBEN
Строчные элементы
mkPmBMIE
Ширина и высота строчного элемента
mkPmBMIEWH
Несколько строчных элементов рядом
mkPmBMMIEN
Отступы между строчными элементами
mkPmBMIES
Определение блочной модели
mkPmBMEM
Свойство display
mkPmBMDP
Строчно-блочные элементы
mkPmBMIBE
Ширина и высота строчно-блочного элемента
mkPmBMIBEWH
Ширина строчно-блочного элемента
mkPmBMIBEW
Высота строчно-блочного элемента
mkPmBMIBEH
Несколько строчно-блочных элементов рядом
mkPmBMMIBEN
Выравнивание блочных элементов
mkPmBMBA
Выравнивание блочного элемента с отступом слева
mkPmBMBAL
Выравнивание блочного элемента с отступом справа
mkPmBMBAR
Выравнивание строчных элементов
mkPmBMIA
Центрирование строчных элементов
mkPmBMIAC
Центрирование нескольких строчных элементов
mkPmBMMIAC
Выравнивание строчных элементов по правому краю
mkPmBMIAR
Выравнивание строчно-блочных элементов
mkPmBMIBA
Центрирование строчно-блочных элементов
mkPmBMIBAC
Выравнивание строчно-блочных элементов по правому краю
mkPmBMIBAR
Флекс элементы
mkPmBMFE
Высота родителя флекс элементов
mkPmBMFEPH
Ширина родителя флекс элементов
mkPmBMFEPW
Строчно-блочный родитель
mkPmBMIBP
Отступы padding родителя
mkPmBMFEPP
Отступы margin потомкам
mkPmBMFEPM
Выравнивание флекс элементов
mkPmBMFA
Выравнивание флекс элементов по центру
mkPmBMFAC
Выравнивание флекс элементов по родителю
mkPmBMFASB
Выравнивание флекс элементов по родителю с отступами
mkPmBMFASA
Выравнивание флекс элементов по родителю с равными отступами
mkPmBMFASE
Позиционирование
Абсолютное
mkPmPsAb
Относительное
mkPmPsRl
Абсолютное относительно родителя
mkPmPsARTP
Абсолютное относительно абсолюта
mkPmPsARTA
Абсолютное без координат
mkPmPsAWC
Центрирование через absolute текст!
mkPmPsCVA
Отрицательные значения absolute
mkPmPsANV
Фиксированное позиционирование
mkPmPsFx
Блок на всю ширину экрана
mkPmPsFSWB
Наложение элементов по оси Z
mkPmPsZA
Регулирование наложения элементов по оси Z
mkPmPsZAR
Нюансы применения отрицательного значения z-index
mkPmPsNZIUN
Флоаты
Введение в свойство float
mkPmFlInr
Свойство float и теги
mkPmFlPn
Сочетание float и margin
mkPmFlMC
Сочетание float и padding
mkPmFlPC
Отступы для картинки при сочетании float и padding
mkPmFlIPC
Отступы плавающему элементу
mkPmFlEI
Плавающие элементы под тегами
mkPmFlUE
Действие флоатов на родителя
mkPmFlPE
Высота родителя флоатов
mkPmFlPH
Текст в родителе флоатов
mkPmFlPT
Обтекание
mkPmFlPWr
Отмена обтекания
mkPmFlCl
Отдельный див с клиарфиксом
mkPmFlDCl
Высота родителя и клиарфикс
mkPmFlPHC
Свойство float для блоков
mkPmFlBF
Свойство float и несколько блоков
mkPmFlSB
Свойство float и родитель без текста
mkPmFlPWT
Флексы
Размещение в ряд или колонку
mkPmFxDr
Размещение флекс элементов в перевернутом ряду
mkPmFxRRDr
Размещение флекс элементов в колонку
mkPmFxCDr
Переворачивание колонки с флекс элементами
mkPmFxCRDr
Главная и поперечная оси
mkPmFxAx
Выравнивание по главной оси
mkPmFxMAA
Выравнивание по поперечной оси
mkPmFxCAA
Значение center свойства align-items
mkPmFxCAC
Центрирование без высоты блоков
mkPmFxCACWH
Центрирование с разной высотой блоков
mkPmFxCACDH
Значение stretch свойства align-items
mkPmFxCAS
Практика на выравнивание по осям
mkPmFxPrm
Выравнивание отдельного элемента
mkPmFxEA
Порядок flex блоков
mkPmFxBO
Гриды
Введение в гриды
mkPmGdInr
Треки и линии
mkPmGdTL
Отображение в отладчике
mkPmGdBD
Столбцы
mkPmGdCl
Единица fr
mkPmGdFU
Дробные fr
mkPmGdFF
Пиксели и fr
mkPmGdPxF
Проценты и fr
mkPmGdPcF
Функция repeat
mkPmGdFRp
Значение auto
mkPmGdSA
Значение auto-fill
mkPmGdAFlV
Функция minmax
mkPmGdFMM
Значение auto-fit
mkPmGdAFtV
Ряды
mkPmGdRw
Сокращение для рядов и столбцов
mkPmGdRCS
Объединение рядов
mkPmGdRC
Объединение столбцов
mkPmGdCC
Комбинации объединений
mkPmGdRCC
Перекрытие столбцов
mkPmGdCO
Расстояние между столбцами
mkPmGdCG
Расстояние между рядами
mkPmGdRG
Расстояние между столбцами и рядами
mkPmGdRCG
Плиточка
mkPmGdTl
Макеты
Создание меню
mkPmLtMn
Простые одноколоночные макеты сайтов
mkPmLtOCL
Схема макетов с несколькими врапперами
mkPmLtMW
Структурные блоки сайта
mkPmLtPS
Схема двухколоночного макета
mkPmLtTCS
Схема трехколоночного макета сайта
mkPmLtThCS
Специальные теги для элементов макета сайта
mkPmLtLT
Основные теги макета
mkPmLtMLT
Тег для секций
mkPmLtSLT
Практика на макетах
mkPmLtPrm
Трепачёв Дмитрий © 2012-2024
t.me/trepachev_dmitry
↑


<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Soundframe Design</title>
  <link rel="stylesheet" href="styles/main.css" />
  <link rel="stylesheet" href="styles/style.css" />
</head>
<body>
  <header class="site-header">
    <div class="container header-inner">
      <a class="logo" href="#" aria-label="Soundframe Design">
        <span class="logo__soundframe">SOUNDFRAME</span>
        <span class="logo__design">DESIGN</span>
      </a>

      <nav class="nav" aria-label="Основная навигация">
        <a href="#">Портфолио</a>
        <a href="#">Процесс</a>
        <a href="#">Для кого</a>
        <a href="#">Комьюнити</a>
        <a href="#">Контакты</a>
      </nav>

      <a class="header-login" href="#">ВОЙТИ</a>
    </div>
  </header>

  <main class="hero">
    <div class="container hero__inner">
      <section class="hero__content">
        <h1 class="hero__title">
          Визуальный<br>
          <span>андеграунд</span> для<br>
          вашего звука
        </h1>

        <p class="hero__text">
          Кураторская платформа, которая превращает нишевые треки в
          иммерсивные визуальные вселенные. Эксклюзивно для электроники,
          инди-рока и экспериментальной музыки.
        </p>

        <div class="hero__actions">
          <a href="#" class="btn btn--primary">СМОТРЕТЬ РАБОТЫ</a>
          <a href="#" class="btn btn--ghost">КАК ЭТО РАБОТАЕТ</a>
        </div>

        <div class="stats" aria-label="Статистика">
          <article class="stat-item">
            <div class="stat-item__value">2+</div>
            <div class="stat-item__label">ВЫПОЛНЕННЫХ<br>ПРОЕКТОВ</div>
          </article>
          <article class="stat-item">
            <div class="stat-item__value">2</div>
            <div class="stat-item__label">ДИЗАЙНЕРОВ В<br>КОМЬЮНИТИ</div>
          </article>
          <article class="stat-item">
            <div class="stat-item__value">5%</div>
            <div class="stat-item__label">ЮРИДИЧЕСКАЯ<br>ЗАЩИТА</div>
          </article>
        </div>
      </section>

      <section class="hero-art" aria-hidden="true">
        <div class="shape shape--one"></div>
        <div class="shape shape--two"></div>
        <div class="shape shape--three"></div>
        <div class="shape shape--four"></div>
      </section>
    </div>
  </main>
</body>
</html>

:root {
  --bg: #01030e;
  --surface: #070a15;
  --text: #f3f4f6;
  --muted: #9c9da7;
  --line: rgba(255, 255, 255, 0.06);
  --green: #69c242;
  --green-dark: #58b336;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body,
h1,
p {
  margin: 0;
}

body {
  min-width: 320px;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background: var(--bg);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.container {
  width: 100%;
  max-width: 1088px;
  margin: 0 auto;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 216px;
  height: 52px;
  padding: 0 28px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0.01em;
  transition: .2s ease;
}

.btn--primary {
  background: var(--green);
  color: #071006;
}

.btn--primary:hover {
  background: var(--green-dark);
}

.btn--ghost {
  border-color: var(--green);
  color: var(--green);
  background: transparent;
}

.btn--ghost:hover {
  background: rgba(105, 194, 66, 0.08);
}
body {
  background:
    radial-gradient(circle at 64% 36%, rgba(60, 78, 180, 0.04), transparent 18%),
    linear-gradient(180deg, #00020b 0%, #01030e 100%);
}

.site-header {
  height: 83px;
  border-bottom: 1px solid var(--line);
}

.header-inner {
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 50px;
}

.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0.02em;
}

.logo__soundframe {
  color: #f5f5f7;
}

.logo__design {
  color: var(--green);
}

.nav {
  display: flex;
  justify-content: center;
  gap: 35px;
  font-size: 15px;
  color: #b8b9c0;
}

.nav a:hover {
  color: #ffffff;
}

.header-login {
  width: 100px;
  height: 38px;
  border: 2px solid var(--green);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 18px;
  letter-spacing: 0.02em;
}

.hero {
  min-height: calc(100vh - 83px);
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  align-items: center;
  min-height: calc(100vh - 83px);
  padding-top: 12px;
}

.hero__content {
  padding-top: 18px;
}

.hero__title {
  font-size: 72px;
  line-height: 0.9;
  font-weight: 400;
  letter-spacing: -0.045em;
  max-width: 590px;
}

.hero__title span {
  color: var(--green);
}

.hero__text {
  margin-top: 36px;
  max-width: 558px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--muted);
}

.hero__actions {
  display: flex;
  gap: 20px;
  margin-top: 48px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 74px;
  margin-top: 72px;
}

.stat-item {
    display:flex;
    flex-direction: column;
    align-items: center;
}

.stat-item__value {
  color: var(--green);
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 34px;
  line-height: 1;
  letter-spacing: 0.02em;
}

.stat-item__label {
  margin-top: 22px;
  font-size: 14px;
  line-height: 1.45;
  color: #bdbec6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}

.hero-art {
  position: relative;
  height: 500px;
}

.shape {
  position: absolute;
  width: 177px;
  height: 177px;
  border-radius: 8px;
}

.shape--one {
  left: 106px;
  top: 56px;
  background: linear-gradient(135deg, #ff8249 0%, #a554d2 100%);
}

.shape--two {
  left: 285px;
  top: 95px;
  width: 186px;
  height: 186px;
  background: linear-gradient(135deg, #68bb49 0%, #41d8bf 100%);
}

.shape--three {
  left: 95px;
  top: 242px;
  width: 188px;
  height: 188px;
  background: linear-gradient(135deg, rgba(22, 24, 44, 0.72) 0%, rgba(2, 3, 10, 0.98) 100%);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.32);
}

.shape--four {
  left: 273px;
  top: 279px;
  width: 177px;
  height: 177px;
  background: linear-gradient(135deg, #a55df2 0%, #74ba54 100%);
}