Создание сайта в html: Как создать простой HTML сайт в блокноте

Содержание

HTML, CSS, JS и другие важные технологии

Что нужно знать, чтобы создать сайт? Достаточно ли знаний HTML? Какие еще технологии применяются при разработке? Ответы на эти вопросы и небольшая хитрость, связанная простым созданием собственного сайта ждут вас далее.

Заказать создание сайта

Ваше имя* Ваш телефон* Ваш Email*

Принимаю условия обработки персональных данных

Из чего состоит сайт

Абсолютно любой сайт, каким бы простым или сложным он ни был, можно разделить на две половины: техническую и пользовательскую.

Техническая часть

Эту часть также называют back-end, то есть то, что обеспечивает работу сайта, но не видно пользователю. Серверная часть состоит из файлов, написанных на различных языках программирования. Их общая функция – работа с пользовательскими данными. Также с их помощью могут генерироваться динамические страницы сайта.

Наиболее простой пример – страница интернет-магазина, описание, изображение и цена товара на которой отображаются из базы данных. К слову, бэк-энд также работает с базой данных сайта и в других случаях. В ней хранятся не только товары, но и различные данные о пользователях, настройки сайта и много всего прочего.

Суть «невидимой» технической части заключается в обеспечении работы сайта. Обычный пользователь этого не видит и может наблюдать только результаты работы бэк-энда.

Что нужно знать для создания технической части? Прежде всего, необходимо уметь программировать на самом популярном среди веб-разработчиков языке программирования – PHP. Среди других языков можно выделить Python, Ruby или даже C.

Front-end

Вторую половину сайта, фронт-энд, также называют клиентской частью. К ней можно отнести абсолютно все элементы, которые мы видим на экране при открытии сайта, то есть то, с чем непосредственно взаимодействует пользователь. Соответственно, сюда же относятся и технологии, без которых не обходится создание сайта: HTML, CSS и JavaScript (JS). Рассмотрим их подробнее.

HTML

Несмотря на то, что интернет полнится вопросами: «Как создать сайт на HTML?» — не стоит думать, что он является полноценным языком программирования. Вовсе нет. Его главные функции – задание расположения всех элементов страницы, указание их типа (заголовок, абзац, список) и расстановка ссылок для связи страниц сайта.

CSS

Изменить стиль и размер элементов и вообще сделать их «красивыми» призваны стили CSS. В них указываются параметры каждого элемента, содержащегося на странице. Пользователь сайта видит текст, заголовки и прочие элементы страницы именно такими, какими они прописаны в таблице CSS.

JavaScript

Для создания относительно простого фронт-энда знания HTML и CSS достаточно, но если взглянуть на современные сайты, можно заметить множество движущихся элементов: плавно выпадающие меню, сменяющие друг друга изображения в фотогалерее и другое. За их наличие и «поведение» отвечает полноценный язык программирования – JavaScript.

Это лишь самые основные технологии, применяющиеся в веб-разработке. На самом деле их достаточно много, и они очень разнообразны, что создает дополнительные проблемы для разработчиков клиентской части. Им необходимо тщательно тестировать ее и учитывать множество мелочей, чтобы сайт не «поехал» и выглядел так, как было задумано в любом браузере на любом устройстве.

Если вы начали читать эту статью в надежде освоить создание сайта на HTML, сожалеем – это попросту невозможно. Но мы можем предложить вам отличную альтернативу, которая позволит создать полноценный сайт с современным дизайном, при этом, не требуя от вас знаний всех вышеперечисленных технологий.

Fastsite: простота и широкие возможности

Fastsite по своей сути является конструктором сайтов, но позволяет создать по-настоящему сложные проекты, такие как интернет-магазины и СМИ.

Вы можете абсолютно бесплатно зарегистрировать домен для своего сайта и запустить прототип всего за 1 минуту. Все, что вам останется – это зайти в удобную панель администратора и настроить внешний вид и функционал.

Все элементы вашего сайта – это блоки, меняющие отображение определенных элементов на страницах (меню, навигация, слайдеры) или добавляющие функционал (формы сбора данных, регистрация, RSS). Вам нужно только разместить их в необходимой последовательности.

Работа с разделами и страницами так же проста, как использование стандартного проводника Windows. Вы можете создавать папки (разделы) и перемещать в них материалы (страницы). Работа с содержимым страниц может вестись в визуальном редакторе, то есть вам не нужно прописывать стили всех отображаемых элементов.

И еще одно веское преимущество: ваш сайт будет по умолчанию иметь адаптивную верстку, то есть им будет одинаково удобно пользоваться как на компьютере, так на планшете или смартфоне.

Создайте и запустите сайт прямо сейчас!

Запустить сайт за 1 минуту

CMS для интернет-магазина

Fastsite

Бесплатная российская система управления интернет-магазинами с открытым исходным кодом.

Технологии

HTML

На базе технологии HTML верстают сайты — их разметку и отображение в браузере. Комбинируя различные коды, разрабатывают уникальные дизайны и добавляют разнообразные функции. С кодами html работают как в специальных фреймворках, так и в простом файле txt.

CSS

Технология CSS была создана с целью разделить оформление сайта и его структуру. Это необходимый отдельный язык для стилей. Поскольку у HTML минимальные возможности стилизации.

JavaScript

JavaScript — мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили. Является реализацией стандарта ECMAScript.

Создание сайтов

Создание сайтов

Предлагаем ИНДИВИДУАЛЬНУЮ разработку сайтов с маркетинговым подходом и персональным отношением. Большое портфолио по корпоративным сайтам.


Поделиться в соц. сетях:  

 

Создание сайта на HTML и CSS — уроки для новичков

Как открыть зарубежную банковскую карту онлайн? Рассказываю личный опыт

х

Наверх

  1. Главная
  2. Создание сайта на HTML

Внимательно изучив этот раздел, вы научитесь самостоятельно создавать сайты с нуля, без всяких конструкторов и CMS, а с помощью исключительно HTML 5 и CSS 3. В дальнейшем, когда уже будете делать проекты с использованием популярных CMS, применяя полученные знания, вы сможете вмешаться в исходный код сайта, переделав оформление и структуру под свои нужды.

Курс состоит из 25 уроков. Первая его часть научит понимать и писать код HTML, вторая познакомит с каскадными таблицами стилей (CSS). Именно с этих материалов и рекомендую начать изучать сайтостроение.

  • 1Как создать сайт в Блокноте

    Сделайте свою первую HTML-страницу, не прибегая ни к чему, кроме известного всем простейшего текстового редактора, встроенного в любую Windows — Блокнота. Но не просто сделайте, а поймите, как это работает.

  • 2Adobe Dreamweaver — программа для создания сайта

    Вы познакомитесь с одним из самых популярных и многофункциональных средств, призванных упростить рабочие будни верстальщикам и веб-дизайнерам — программой Adobe Dreamweaver.

  • 3Что такое HTML

    Основные вопросы, мучающие новичков. Что такое HTML? Зачем он нужен? Что позволяет делать? Что лучше — HTML4 или HTML5? Все ответы — в статье.

  • 4Теги

    Теги — основная единица языка HTML. Без них не обходится ни одна веб-страница. Статья познакомит вас с основными контейнерами HTML. Из неё вы узнаете, как правильно записываются теги, научитесь частично понимать HTML-код.

  • 5Атрибуты

    У тегов есть не только содержимое, но также атрибуты, которые, в свою очередь, наделены значениями.

    Обо всём этом и пойдёт речь в статье. Где искать атрибуты? Как правильно записывать? Какие атрибуты можно присвоить любому без исключения тегу? А ещё вы узнаете, как разрешить пользователю редактировать любой элемент страницы, как задать для каждого объекта уникальное контекстное меню и как скрыть содержимое элемента, чтобы оно не отображалось в браузере.

  • 6Форматирование текста в HTML

    Всё, что связано с оформлением текста: как сделать заголовки, назначить полужирный шрифт или курсив, уменьшить/увеличить размер текста или что-нибудь процитировать. В статье вас ждёт ещё много интересных секретов форматирования текста средствами HTML. А главное — всё это показано на наглядных примерах.

  • 7Создание списков

    Маркированные, нумерованные, вложенные — какие хотите. Также вы узнаете, как нумеровать список большими латинскими буквами или римскими цифрами, да ещё и в обратную сторону, как начинать нумерацию не с единицы и тому подобные вещи. А ещё вас ждёт знакомство с мало кому известным списком определений.

  • 8Создание ссылок

    Ссылки — чуть ли не основной элемент Интернета, без которого никакой связности страниц бы и не было. Научитесь создавать ссылки на примерах, узнайте, чем относительные пути отличаются от абсолютных, познакомьтесь с внутренними и графическими ссылками, научитесь ставить их на e-mail и Skype.

  • 9Вставка изображений

    Картинки украшают страницу, поэтому уметь добавлять их — навык очень полезный. А если превратить изображение в навигационную карту, то оно становится не только симпатичным, но и очень полезным элементом. Научитесь создавать такие объекты на наглядных примерах, которые есть в статье.

  • 10Вставка таблиц

    Внимательно изучив этот раздел, вы научитесь самостоятельно работать с таблиц. На основе таблиц когда-то создавались целые структуры сайтов, но об этом будет идти речь в следующем уроке.

  • 11Табличная вёрстка сайта

    Как вообще можно сверстать целый сайт? Способов есть много, один из них — делать его с помощью таблиц. О том, что представляет собой такой метод, вы и узнаете. Наглядные примеры, как всегда, присутствуют, и помогут без труда освоить табличный подход.

  • 12Фреймы

    Статья для тех, кто хочет научиться отображать в одном HTML документе совершенно другую страницу. Вы узнаете, что такое фреймы, как они создавались раньше и как создаются сейчас, а также познакомитесь с доступными им атрибутами.

  • 13Что такое CSS

    Какие основные операторы и элементы присутствуют в документе каскадных таблиц стилей, что вообще такое этот CSS, зачем он нужен и чем отличается от HTML, а главное — как связать каскадную таблицу стилей с HTML-элементом.

  • 14CSS текст

    На примерах показано, как выровнять текст по горизонтали и вертикали, изменить отступ и междустрочный интервал, добавить подчёркивание или надчёркивание, увеличить расстояние между символами и сменить регистр.

  • 15CSS шрифты

    Прочтя статью, вы поймёте принципы группировки шрифтов в CSS, узнаете, какие из них поддерживает любой браузер, научитесь менять их размер и стиль, цвет и насыщенность. Разберётесь с аббревиатурами RGB и HSL, а также узнаете, зачем к ним иногда добавляют букву A.

  • 16CSS ссылки

    Читать стоит после того, как освоили ссылки в HTML, потому что эта статья научит их не создавать, а оформлять, причём задать внешний вид вы можете не только для разных ссылок, но и для одной и той же, находящейся в разных состояниях. Пусть если по ней ещё не переходили, она будет синей, если навели указатель — зелёной с подчёркнутым текстом, щёлкнули — жёлтой и полужирной, а перешли — курсивной и фиолетовой.

  • 17CSS таблицы

    Всё о правильном оформлении таблиц: ширина и высота, расположение заголовка, удаление двойных границ, определение расстояний, скрытие фона и многое другое, подкреплённое живыми примерами.

  • 18CSS списки

    А вы знали, что в качестве маркера списку можно задавать не только круг, но и окружность или даже квадрат? Да хоть произвольную картинку. А знали, что помимо стандартных нумераций можно установить, например, традиционную армянскую? А как превратить маркер из вынесенного в обтекаемый? Нет? Тогда загляните в статью, там ждёт не только теория, но и примеры.

  • 19CSS фон

    Всё о фоне. Цвет, на фоне которого пишется текст. Картинка, на фоне которой отображается вся страница: повторяющаяся по горизонтали, по вертикали, по всем направлениям одновременно, позиционированная, масштабируемая и т. д.

  • 20CSS рамки

    Ширина границ, их стиль, цвет. Вы узнаете, как сделать вместо внутренней границы внешнюю, как её раскрасить, как добавить рамки только с двух или трёх сторон и как сделать так, чтобы слева она была пунктирной, а справа — сплошной.

  • 21Блочная вёрстка сайта

    Статья объяснит, в чём смысл блочной вёрстки, чем она отличается от табличной и лучше ли она. По каким принципам создаётся и в чём её суть. Но самое главное — большой пример блочной вёрстки, благодаря которому вы сможете окончательно в ней разобраться и запомните метод навсегда.

  • 22Создание блочной структуры сайта с помощью инструкции php include

    Почему нельзя обойтись только HTML/CSS? Что даёт язык PHP современным сайтам? Какие страницы называют статическими, а какие — динамическими, и что это означает? А самое основное — описание функции include() и пример её использования.

  • 23Как создать шаблон сайта

    Делаем PSD-макет настоящего сайта в программе Photoshop.

  • 24Вёрстка шаблона из PSD

    В предыдущей статье мы создали макет сайта, в этой будем делать из картинки работающий шаблон с помощью изученных ранее HTML и CSS.

  • 25Создание сайта на CMS

    Хотя сайт «голыми руками» сделать можно, всё чаще для этой цели сейчас используются системы управления содержимым — CMS. О том, что это такое, как классифицируются и какие дают преимущества, какими бывают и какую CMS лучше выбрать расскажет статья.

    Если вы прошли все уроки, то можете легко создать с нуля даже достаточно сложный сайт, а также разобраться в чужом коде, отрисовать и сверстать шаблон, вмешаться в тему оформления любой CMS и отредактировать её под свои нужды. С полученными знаниями вы всегда будете на шаг впереди любого веб-мастера, сразу начавшего работать с CMS и не освоившего основных инструментов веб-разработки.

Полезные ссылки:

  • Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
  • Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
  • Вёрстка сайта с нуля 2. 0 — полноценный платный курс;
  • Создание приложений для Android — для тех, кто давно хотел попробовать себя в мобильной разработке (не для новичков).

Как создать сайт HTML в блокноте? Пошаговая инструкция с нуля для чайников

HTML – это язык гипертекстовой разметки, которые позволяет создавать сайты людям, а браузерам на их компьютерах и телефонах считывать и отображать эти сайты. По факту HTML не является языком программирования даже. Он очень прост, и вы сможете освоить его на базовом уровне всего за 1 неделю!

Чтобы сделать сайт на языке HTML нужно подготовить файл формата index.html. Потребуется вставить в этот документ стандартный код, называемый скелетом и подключить к нему файл style.css. Впоследствии формируется меню, разрабатывается логотип и готовятся основные разделы: подвал, шапка сайта, блок контента. Приступим!

Содержание руководства

Создание HTML-сайта в блокноте

Чтобы понять, как сделать сайт html, надо уяснить правила использования разметки гипертекста. Данный формат, помимо текста содержит теги, позволяющие задавать команды для браузера, который руководствуясь ими, отображает информацию в определённом виде, например, как заголовок первого уровня: <h2>…</h2>.

Файл index.html можно делать в программе «Блокнот», но лучше воспользуйтесь бесплатной программой Notepad++, подсвечивающей синтаксис и ошибки языка HTML. Создайте новый файл и сохраните его в формате *.html  Впоследствии его нужно открыть в окне браузера, который и отобразит представленный на веб-странице контент. Надо вставить в этот документ стандартный код:

<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы для браузера</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div>
<h2>Мой заголовок страницы</h2>
<p>Мой текст.</p>
</div>
</body>
</html>

Теперь осталось подключить «style.css» – файл со стилями, а для этого придётся прописать перед тегом </head>:

<link rel="stylesheet" href="style. css">

У тега могут быть различные свойства, например, класс, идентификатор, высота и другие. Но в современном интернете обходятся классом, а любые параметры – цвет, размер, бордюр, фон и другие – задаются в CSS стилях через класс.

Создаем меню

Надо создать меню сайта, используя списки HTML, указывая для каждого из включаемых в него разделов ссылку на страницу, к которой будет переходить посетитель при нажатии на соответствующую надпись.

<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы для браузера</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
  <li>Главная</li>
  <li>Новости</li>
  <li>Контакты</li>
</ul>
<div>
<h2>Мой заголовок страницы</h2>
<p>Мой текст.</p>
</div>
</body>
</html>

Чтобы создать логотип надо сделать папку «image», в которой будут находиться все картинки, имеющие отношение к сайту.

Внимание! Примерный размер логотипа составляет 200х100 px, скачайте и загрузите выбранную картинку в папку.

Логотипу нужно присвоить имя и сделать для него разрешение в формате png или jpg (а начиная с 2019 года в обиход входит формат webp, которые является более современным и легким).

<img src="image/logo.png" alt="Наш логотип">

Чтобы сделать на сайте подвал внедряем с помощью HTML следующее содержание:

<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы для браузера</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
  <li><img src="image/logo.png" alt="Наш логотип"></li>
  <li>Главная</li>
  <li>Новости</li>
  <li>Контакты</li>
</ul>
<div>
<h2>Мой заголовок страницы</h2>
<p>Мой текст.</p>
</div>
<div>
<p>© 2019 Копирайт.  <a href="https://goodlifer.ru/">Блог Гудлайфера</a>.</p>
</div>
</body>
</html>

Внимание! Именно в подвале при создании сайтов делается копирайт.

Сформированная нами первая страница станет шаблоном, на основании которой мы создаём остальные, на которых теперь будет размещаться блог, новостной, информационный или коммерческий сайт.

Работа с таблицами стилей CSS

Нами ранее была сформирована таблица стилей CSS, но вот что-либо добавить туда, мы пока не удосужились.  Начнём с написания для сайта такого кода HTML:

* {
box-sizing:border-box;
}
.main {
width:1170px;
margin:0 auto;
border: 5px solid black;
}

Звездочка обозначает – любые элементы, то есть все. Теперь рамки, отступы, не будут увеличивать ширину блоков, а для установления правил, определяющих внешний вид веб-страницы, нам придётся обратиться к классу main, задав ряд команд:

  • ширина контейнера;
  • отображение по центру;
  • добавление рамок чёрного цвета с каждой из сторон.

Теперь можно с помощью HTML задать внешний вид ключевых структурных блоков:

.menu {
margin:0 0 40px 0;
padding:0px;
}
.menu li {
display:inline-block;
width:auto;
padding:7px 15px;
}
.footer {
background-color:#f4f4f4;
}

Принцип работы заключается в обращении к существующим элементам, у каждого из которых есть персональный идентификатор или класс. У тега класс прописывается в свойстве class=”myname” и в CSS файле записывается .myname, а идентификатор по аналогии id=”myname2″ и #myname2.

Изначально задаём стиль для шапки сайта, сделав для неё рамку, позволяющую визуально отделить этот раздел от прочих блоков. Теперь основная задача заключается в смещении в сторону боковой колонки, которая по умолчанию будет отображаться сверху вниз, то есть так, как прописана в нашем коде. Добиться отображения блока в требуемом формате можно задав для сайдбара основные показатели:

  • ширина;
  • высота;
  • правило float: left – прижатие компонента к левой стороне родительского компонента.

Внимание! Идентичное свойство задаётся разделу с контентом, прижимающемуся с той же стороны, но после колонки.

После этого пишем блок «Подвал»,  который по умолчанию не высокий и имеет свойство clear, препятствующее наезду на разделы «Контент» и  «Боковая колонка», считающиеся плавающими. «Подвал» теперь будет видеть эти блоки и всегда размещаться под ними, но при условии, что ему будет задана команда clear: both.

Однако пока наш сайт на HTML чёрно-белый, как немое кино с Чарли Чаплином. Разукрасить его можно двумя методами:

  1. Фон прописывается контейнеру по классу .content и задаётся сразу для всего сайта.
  2. Отдельно задаётся для каждого из блоков, для подвала, шапки, контента и т.д.

Рекомендую дать сайт общий цвет, воспользовавшись одним кодом:

.main {backgroun-color:#f9f9f9;}

В видео уроке я немного дописал таблицу стилей и вот что получилось.

Скачать готовый HTML-сайт, разработанный в уроке можно по ссылке ниже:

Архивархив с готовым сайтом на HTML

Видео-урок разработки сайта

Просмотр HTML-страницы в браузере.

Если вы выполнили все 8 шагов, у вас должна быть работающая HTML-страница, которой вы должны гордиться.

Шаг 9. Добавьте ссылку на ваш источник информации

Если вы скопировали некоторый контент с другой веб-страницы, считается целесообразным добавить URL-адрес, указывающий на исходный источник информации.

Вы можете добавить ссылку, используя слов, объясняющих, что вы найдете, если щелкнете по ссылке HTML-тег.

 Проект HTML и CSS Cricket
 

Просмотр HTML-страницы в браузере. Теперь у вас должна быть ссылка внизу со словами: «Проект HTML и CSS Cricket».

Полный код для создания веб-сайта с использованием HTML

 

  <голова>
    Ваше название здесь
  
  <тело>
    

Поедание насекомых: полное руководство по поеданию сверчков

Когда вы слышите о поедании насекомых, большинство людей приходит в ярость. Однако насекомые считаются деликатесом во многих частях мира. Большинство съеденных насекомых выращиваются на фермах, но в некоторых местах они не уклоняются от употребления в пищу насекомых, собранных в дикой природе.

Поедание насекомых считается:

<ул>
  • полезны для здоровья, так как в насекомых меньше жира.
  • экологичность: для выращивания насекомых требуется меньше пищи/растений по сравнению с коровами.
  • люди, которые не едят молоко и мясные продукты, могут попробовать насекомых в качестве заменителя белка.
  • Жареные сверчки на витрине Проект HTML и CSS Cricket

    Дополнительные советы

    • Проверьте свои ссылки, чтобы убедиться, что они работают. Вы можете проверить свою ссылку, щелкнув по ней, чтобы увидеть, ведут ли они вас на нужную страницу.
    • Необязательно: Опубликовать веб-страницу в Интернете. Когда вы будете готовы, вы можете поделиться своими работами в Интернете. Вы можете использовать Codepen или Github, чтобы опубликовать свою веб-страницу в Интернете.
    • Необязательно: Добавьте CSS, чтобы веб-страница выглядела великолепно. После того, как вы закончите работу над HTML, вы можете приступить к стилизации веб-страницы с помощью CSS. Вот некоторые вещи, которые вы можете сделать, чтобы сделать веб-страницу великолепной:
    • Отрегулируйте размер шрифта и тип шрифта текста.
    • Отрегулируйте размер изображений.

    Всем привет! Я Авик Ндугу .

    Я опубликовал более 100 сообщений в блогах по HTML, CSS, Javascript, React и другим связанным темам. Когда я не пишу, я люблю читать, ходить в походы и слушать подкасты.

    Разработка веб-страницы с использованием HTML и CSS

     

    < html >

     

    < head >

         < title >Simple web Development Template title >

    < Стиль >

    * {

    * {

    0078              поля: 0;

                 заполнение: 0;

    }

    . Navbar {

    Дисплей: Flex;

                 align-items: center;

                 justify-content: center;

                 положение: липкое;

                 верх: 0;

                 курсор: указатель;

    }

    . Background {

    Фон: черный;

                 background-blend-mode: затемнить;

                 background-size: обложка;

    }

    . Нав.

                 дисплей: гибкий;

                 align-items: center;

    }

    .logo {

    Дисплей: Flex;

                 justify-content: center;

                 align-items: center;

    }

    .logo img {

    Ширина: 180px;

                 радиус границы: 50 пикселей;

             }

     

             . nav-list li {

                 стиль списка: нет;

                 заполнение: 26 пикселей 30 пикселей;

    }

    .

                 цвет: белый;

             }

     

             .nav-list li a:hover {

                 ; цвет: серый

    }

    .rightNav {

    Ширин: 30%;

                 text-align: right;

             }

     

             #search {

                 padding: 5px;

                 размер шрифта: 17 пикселей;

                 граница: 2 пикселя сплошного серого цвета;

                 радиус границы: 9 пикселей;

    }

    . Первое время {

    цвет фона: зеленый;

                 высота: 400 пикселей;

    }

    .Secondsection {

    ПРИНЕСА: БЛИЧЕСКИЙ;

                 высота: 400 пикселей;

             }

     

             .box-main {

                 дисплей: гибкий;

                 justify-content: center;

                 align-items: center;

                 цвет: черный;

                 макс. ширина: 80%;

                 поле: авто;

                 высота: 80%;

    }

    .FIRSTHALF {

    Шид: 100%;

                 дисплей: гибкий;

                 flex-direction: столбец;

                 justify-content: center;

             }

     

             .secondhalf {

                 ширина: 30%;

    }

    .

                 граница: 4 пикселя сплошного белого цвета;

                 радиус границы: 150 пикселей;

                 дисплей: блок;

                 поле: авто;

    }

    .Text-Big {

    FONT-Family: 'Piazzolla', Serif;

                 вес шрифта: полужирный;

                 размер шрифта: 35 пикселей;

             }

     

             . text-small {

                 размер шрифта: 18 пикселей;

    }

    .BTN {

    Padding: 8px 20px;

                 поле: 7 пикселей 0;

                 граница: 2 пикселя сплошного белого цвета;

                 радиус границы: 8px;

                 фон: нет;

                 цвет: белый;

                 курсор: указатель;

    }

    . BTN-SM {

    Padding: 6px 10px;

                 выравнивание по вертикали: посередине;

    }

    . Раздел {

    Высота: 400PX;

                 дисплей: гибкий;

                 align-items: center;

                 justify-content: center;

                 макс. ширина: 90%;

                 поле: авто;

    }

    .

    }

    .Paras {

    Padding: 0px 65px;

             }

     

             .thumbnail img {

                 ширина: 250 пикселей;

                 граница: 2 пикселя сплошного черного цвета;

                 радиус границы: 26 пикселей;

                 margin-top: 19px;

             }

     

             . center {

                 text-align: center;

    }

    .Text-Footer {

    Text-Align: Center;

                 padding: 30px 0;

                 семейство шрифтов: 'Ubuntu', без засечек;

                 дисплей: гибкий;

                 justify-content: center;

                 цвет: белый;

             }

         style >

    head >

     

    < body >

    < навигация Класс = "Навигарный фоновой Класс = «Логотип» >

    < IMG SRC = ". 0079 >

    DIV >

    < LI > A LI > A LI > A. . Технология A > LI >

    < LI > < A 0078 href = "#program" >C Programming a > li >

                 < li >< a HREF = "#Course" > Курсы A > LI >

    >

    9898198 . >

     

             < div class = "rightNav" >

                 < input type = "text" Имя = "Поиск" ID = "Поиск" >

    < Кнопка

    < 0079 class = "btn btn-sm" >Search button >

             div >

         NAV >

    < Раздел Класс = "Первичная серия" >

    >

    >

    9 < Div Класс = "Box-Main" >

    < DIV < DIV < DIV < DIV < DIV < DIV . < h2 class = "text-big" id = "web" 7 h2090 80Web 0 >0079 >

    < P Класс = "Текст-SMALL" >

    >

    >

    >

    HTML.

                        Используется для разработки веб-страниц с использованием языка разметки

                         . HTML представляет собой комбинацию гипертекста

                         и Язык разметки. Гипертекст определяет

                         связь между веб-страницами. Язык разметки

                        используется для определения текстового документа в теге

                                                                                                                     

                        HTML – это язык разметки, используемый

                        браузер для работы с текстом, изображениями и другими данными

                        

                     p >

     

     

                 div >

             div >

         section >

     

         < section class = "secondsection" >

             < div class = "box-main" >

                             

  • <
    9 div class = "firstHalf" >

                     < h2 class = "text-big" id = "program" >

    C программирование

    H2 >

    < p class = "text-small" >

                                        IT

    был первоначально разработан Деннисом Ричи

    в качестве языка системного программирования для написания

    Операционная система. Основные особенности С

                         language include low-level access to memory,

                         simple set of keywords, and clean style,

                         these features make C language suitable for

                         system программирование, такое как операционная система или

                         разработка компилятора.

                     p >

     

     

                 div >

             div >

    секция >

     

         < секция класс = "section" >

             < div class = "paras" >

                 < h2 class = "SECEAGTAG TEXT-BIG" > Java H2 >

    < P Классия < P < P < P < P 0079 = "SectionSubtag Text-Small" >

    Java была одним из самых популярных

    .

                     Java является объектно-ориентированным. Однако

                     не считается чисто объектно-ориентированным

                     , так как он обеспечивает поддержку примитивного

    Типы данных (например, Int, Char и т. Д.). Затем

                     байт-код выполняется на Java Virtual

                     Машина (JVM) независимо от

                     базовая архитектура.

                 p >

     

     

             div >

     

             < div class = "миниатюра" >

                 < img src = "img. png" alt = "laptop image" >

             div >

    Секция >

    < ИНГАЛА КЛАСС = "ФОНАРИ 999 = " ФОНАТА > = ".0079

             < p class = "text-footer" >

                 Copyright ©-All rights are reserved

             p >

    Пелье >

    Body

    . 0078 >

     

    html >

  • HTML Builder | HTML Website Builder

    Создавайте HTML-сайты с лучшим бесплатным wysiwyg HTML конструктором сайтов и редактором страниц. Начните с одного из 7000+ бесплатных HTML-шаблонов.
    Подходит для мобильных устройств. Нет кодирования. Создать HTML-сайт.

    Загрузить сейчас

    Используйте HTML Creator для создания веб-сайта без программирования

    Простой HTML-редактор с функцией перетаскивания позволяет реализовать любые идеи для HTML-шаблонов. Используйте адаптивную галерею изображений, видеофоны, параллакс, меню-гамбургер, липкий заголовок и анимацию, чтобы оживить сайты.

    все функции

    Ваш браузер не поддерживает видео HTML5.

    Что такое


    Веб-дизайн 3. 0?

    Узнайте, как создавать самые модные HTML-сайты в Интернете. Нет необходимости нанимать профессиональных веб-дизайнеров с HTML-генератором Nicepage.

    Открой секрет

    Все, что вам нужно для создания сайтов с помощью генератора HTML

    Наш конструктор HTML обеспечивает интеграцию с социальными сетями, Google Maps, Google Fonts, Icons, YouTube, контактными формами и многими другими встроенными мощными функциями. Используйте наш WYSIWYG-редактор и генератор кода, чтобы запускать веб-сайты и легко настраивать их с помощью визуального конструктора перетаскивания.

    1000 из

    веб-шаблонов

    Выберите из огромного разнообразия дизайнерских шаблонов.

    Easy Drag-n-Drop

    Настройте что угодно на своем веб-сайте простым перетаскиванием.

    Без кода

    Визуально добавляйте, редактируйте, перемещайте и изменяйте без кода!

    Mobile-Friendly

    Создавайте веб-сайты, которые отлично смотрятся на всех современных устройствах.

    Посмотреть все характеристики

    Познакомьтесь с нашими лучшими многоцелевыми шаблонами, отобранными профессиональными дизайнерами. Все шаблоны страниц отлично смотрятся на всех современных устройствах. Выберите любой шаблон и настройте его с помощью мощного редактора веб-страниц.

    Получить шаблоны

    Идеальные результаты с помощью HTML Maker на любом устройстве

    Веб-страницы абсолютно удобны для мобильных устройств, готовы к работе с сетчаткой и отлично выглядят на всех устройствах. Сгенерированные веб-сайты имеют версию, оптимизированную для мобильных устройств, которая прекрасно выглядит на небольших экранах. Вы можете легко настроить все представления рабочего стола, ноутбука и телефона по отдельности.

    Nicepage — обязательный инструмент для любого пользователя HTML. Он расширяет любой веб-сайт HTML, добавляя к нему дизайнерский штрих. Он прост в использовании и работает быстро.

    Эрик Смит

    Веб-разработчик и пользователь joomler

    Больше довольных клиентов

    Создавайте современные HTML-сайты и шаблоны, чтобы привлечь больше клиентов

    Компании, которые используют наш конструктор HTML-сайтов:

    Бесплатный конструктор HTML

    Загрузите лучший бесплатный редактор HTML для Windows или Mac OS сегодня. Создавайте веб-сайты, удобные для мобильных устройств, которые отлично смотрятся на всех современных устройствах и во всех браузерах. Кроме того, настройте свои проекты с помощью мощного редактора перетаскивания без программирования.

    Загрузить сейчас

    Лучшие бесплатные HTML-шаблоны

    Выбирайте из более чем 7000 HTML-шаблонов для бизнеса, медицины, портфолио, технологий, образования, путешествий и других популярных категорий. Все шаблоны, созданные с помощью HTML Designer, обновляются ежедневно и доступны бесплатно.

    Имя

    Спасибо! Ваше сообщение было отправлено.

    Невозможно отправить ваше сообщение. Исправьте ошибки и повторите попытку.

    • Нас легко найти

    • Инновационное строительное искусство

    • Модные идеи и продвижение

    • Счетчик символов медицины

    • Напишите нам лично

    • Текст с социальными иконками

    • Лейк Кэмп Резорт

    • Поиск и покупка идеального дома

    • Начать

    • Современный конструктор сайтов по аренде автомобилей

    • О Путеводителе

    • Подписывайтесь на меня

    • Студия элитных персональных тренировок‎

    • Контактная форма с изображениями

    • Вкусные макаруны

    • Эксклюзивные украшения для дома

    • Продвинутые курсы английского языка

    • О деловом человеке

    • Путешествия и покупки

    • Многопрофильная строительная фирма Конструктор HTML-сайтов

    • Идеальные процедуры для лица

    • Обратно в школу

    • Деловые отзывы

    • Самый необычный тур в мире

    • Рецепты миндального печенья

    • Наши творческие люди

    • Качественные логистические услуги

    • Креативная форма подписки

    • Жилищное строительство и ремонтg

    • Два столбца текста на фоне Html Website Builder

    • Африканские сафари-туры

    • Медицинский центр рядом со мной

    • Бесплатные пробные уроки

    • Лучшие услуги по брендингу

    • О здравоохранении и медицине

    • Информация о сотруднике

    • Быстрое и надежное такси

    • Общие рабочие пространства

    • Тренинги и консультации

    • Уход за лесом Конструктор HTML-сайтов

    • Логотип и контактная форма

    • Мы развиваемся вместе

    • Академия моды и дизайна

    • Эффективные бизнес-стратегии

    • Бутик Отель & Спа

    • Как получить клиентов

    • Подробная информация о внутреннем продукте

    • Изучайте поэзию

    • Командообразующие упражнения и мероприятия

    • Мороженое дома Конструктор сайтов

    Создатель HTML-страницы

    9Конструктор 0002 HMTL поможет вам создать собственный сайт без особых усилий! Скачайте конструктор HTML-страниц Nicepage бесплатно прямо сейчас!

    Загрузить сейчас

    Создание и просмотр веб-страницы на вашем компьютере

    Создание и просмотр веб-страницы на вашем компьютере

    Требования:
    • Текстовый редактор
    • Интернет-браузер
    • Пройден раздел 1 курса Codecademy Learn HTML & CSS
    • .
    Введение

    Когда вы переходите на веб-страницу в Интернете, браузер выполняет большую работу. Браузер читает все необходимые файлы (HTML, CSS и JavaScript) и интерпретирует эти необработанные ресурсы, чтобы нарисовать сложную страницу, которую вы видите.

    В этой статье вы узнаете, как создать веб-страницу с помощью текстового редактора на своем компьютере, а затем просмотреть веб-страницу в браузере. Если вы хотите опубликовать свою веб-страницу во всемирной паутине (Интернете) для всеобщего обозрения, ознакомьтесь с этой статьей после того, как вы поймете шаги, описанные ниже.

    Шаг 1. Откройте текстовый редактор

    Первый шаг — открыть текстовый редактор. Важно использовать «сырой» текстовый редактор, а не форматированный текстовый процессор.

    Текстовые процессоры вставляют символы, которые улучшают внешний вид страницы, но не являются допустимым HTML. Это отличные инструменты для создания стильных документов, таких как академические статьи и листовки, но они также вставляют символы, которые не являются допустимыми HTML. Поскольку файл веб-страницы должен содержать действительный HTML, текстовый редактор является лучшим инструментом для создания веб-страниц, чем текстовый процессор.

    Шаг 2. Напишите свой HTML-скелет

    Теперь, когда ваш текстовый редактор открыт, вы можете приступить к написанию HTML-кода. Как вы узнали из первого урока курса HTML и CSS, есть несколько вещей, которые всегда присутствуют в хорошо отформатированном HTML-файле. Вот все вместе:

     
     

    Моя первая веб-страница!

    Hello World!

    Вы можете использовать этот точный скелет, если хотите. Просто скопируйте и вставьте его в текстовый редактор. Убедитесь, что вы включили все!

    Шаг 3: Сохраните файл

    Теперь ваша веб-страница готова, но пока она существует только внутри вашего текстового редактора. Следующим шагом будет сохранение файла на ваш компьютер. Если вы сейчас закроете текстовый редактор без сохранения, ваша новая веб-страница будет потеряна! При сохранении файла следует помнить о нескольких важных вещах:

    1. Используйте расширение файла HTML .html , например about_me.html
    2. Не используйте пробелы или специальные символы в имени файла. Вместо этого используйте символы подчеркивания (_) или тире (-).
    3. Решите, где на вашем компьютере вы сохраните файл, и обязательно запомните это место!
    Использовать расширение файла
    .html HTML

    Расширение файла является суффиксом имени файла и описывает тип файла. Расширение файла всегда представляет собой последние 3 или 4 символа в имени файла, которым предшествует точка. Например, расширение HTML-файла — 9.0078 .html , и он указывает браузеру (и другим приложениям) интерпретировать содержимое файла как веб-страницу. Обратите внимание, что на старых веб-страницах вы можете увидеть .htm , но это архаично и больше не используется.

    Не используйте пробелы или специальные символы в имени файла.

    При выборе имени файла соблюдайте простоту. Придерживайтесь цифр и букв. Используйте символы подчеркивания ( _ ) или тире ( - ) вместо пробелов. Не используйте знаки процента, косые черты, знаки вопроса, восклицательные знаки, запятые и другие «специальные символы». Браузер должен найти файл по его имени, а специальные символы в имени файла могут прервать этот процесс. Имена файлов должны быть простыми и следовать соглашениям, чтобы сделать навигацию по вашей веб-странице более надежной.

    Решите, где на вашем компьютере вы сохраните файл

    После выбора имени файла выберите подходящее место в вашей файловой системе для сохранения веб-страницы. Рекомендуется создать новую папку для размещения этой веб-страницы. Если вы создаете новую папку, используйте те же соглашения об именах, которые были изложены выше, чтобы свести к минимуму головную боль в будущем. Самое главное при выборе места для сохранения запомнить, где вы его сохранили . Если вы уже сохранили его, но не помните, где, просто нажмите Файл > Сохранить как... , выберите новое место для сохранения и обязательно запомните это время.

    Шаг 4. Откройте веб-страницу в браузере

    Теперь вы готовы просмотреть новую страницу в браузере! Сначала откройте браузер. В верхнем меню нажмите «Файл » > «Открыть файл ». Перейдите к месту, где вы сохранили свою веб-страницу. Нажмите на файл веб-страницы, а затем нажмите Открыть . Вы должны увидеть свою веб-страницу!

    Обзор

    За это короткое время вы научились использовать то, что изучаете на Codecademy, на своем персональном компьютере. Вы также узнали о расширениях файлов, текстовых редакторах и сохранении и просмотре локальных файлов. Теперь вы готовы проверить все, чему научились в Codecademy, и попрактиковаться самостоятельно!

    Узнайте больше о Codecademy

    Только Pro

    путь навыков

    Code Foundations

    Подходит для начинающих,

    15 Уроки

    Только Pro

    Карьера

    Full-Stack Engineer

    Подходит для начинающих,

    168 Уроки

    Создание веб-сайта-портфолио с использованием HTML, CSS и JavaScript

    Если вы ищете работу веб-разработчика полезно иметь сайт-портфолио. Также может быть полезно иметь проекты, которые вы создали, чтобы показать их потенциальным работодателям. Вы можете выполнить обе задачи одновременно, создав собственный веб-сайт портфолио с помощью HTML, CSS и JavaScript.

    Мы только что опубликовали курс на YouTube-канале freeCodeCamp.org, который поможет вам улучшить свои навыки разработки внешнего интерфейса, научив вас создавать сайт-портфолио.

    MacLinz разработал этот курс. Он опытный разработчик внешнего интерфейса, который создал множество отличных курсов на своем канале YouTube.

    В этом курсе вы узнаете, как создать адаптивный веб-сайт портфолио с современным дизайном и крутыми эффектами на основе JavaScript. Вы можете использовать то, что вы узнали в этом курсе, и настроить свой веб-сайт портфолио, чтобы продемонстрировать свою историю работы и навыки дизайна.

    Это отличный проект для начинающих для людей, которые хотят улучшить свои навыки работы с HTML, CSS и JavaScript.

    Курс включает в себя следующие разделы:

    • ВВЕДЕНИЕ
    • Переключение между разделами
    • Содержание заголовка
    • Облизости
    • Секция портфолио. или на YouTube-канале freeCodeCamp.org (3 часа просмотра).

      Стенограмма

      (сгенерирована автоматически)

      В этом курсе вы улучшите свои навыки HTML, CSS и JavaScript, создав веб-сайт-портфолио.

      Всем привет. В сегодняшнем видео мы собираемся создать сайт-портфолио с использованием HTML, CSS и JavaScript.

      Итак, это главная страница портфолио. Итак, у нас есть несколько хороших эффектов при наведении курсора. О кнопках и изображениях. Мы также можем переключаться между светлой и темной темой.

      Итак, следующий раздел будет верхним, у нас будет некоторая информация с хорошими эффектами. И здесь у нас будет статистика с индикаторами прогресса. И у них также будет временная шкала.

      Хорошо, на светлой теме тоже красиво смотрится.

      Хорошо, а затем следующим разделом будет раздел портфолио с эффектом SRO, один из этих шаблонов может привести нас к любой работе, которую вы предлагаете связать с ней, хорошо, например, вы хотите попасть на GitHub , вы можете щелкнуть, и тогда он попадет на GitHub или YouTube, куда угодно.

      Итак, следующим разделом будет раздел блога. У нас также есть хороший эффект наведения на изображения в элементе блога. И, наконец, у нас есть раздел контактов, здесь вы можете разместить свою контактную информацию.

      Все, что вы хотите, зависит от вас.

      Этот веб-сайт также является адаптивным, он будет поддерживать несколько экранов, вы даже можете сделать его более адаптивным, насколько пожелаете.

      Итак, когда я уменьшу ширину, он проверит эти элементы управления здесь, а затем поместит их здесь, вы можете как бы переключаться между страницами внутри элементов управления здесь, вместо того, чтобы быть справа сторона.

      Итак, как видите, все будет хорошо реагировать на разные размеры экрана.

      Хорошо.

      Итак, Сэм собирается ответить НАСА.

      А также портфолио будет вложенным адаптивным.

      Ага, тоже все отзывчиво.

      Итак, я покажу вам все, чтобы сделать его еще более отзывчивым, у вас есть знания, чтобы изменить ситуацию.

      Так что да, я думаю, что это для этой быстрой демонстрации.

      Увидимся на видео.

      Здесь у меня есть папка с изображениями.

      Итак, изображений немного.

      Вот изображения, которые мы собираемся использовать в этом проекте. Я начну с создания нового файла HTML, проиндексирую точку HTML, затем создам новую папку.

      Итак, это будет хранить все наши стили внутри стилей для них, когда нужно создать новый стиль.

      Итак, расширение, которое мы собираемся использовать для этого, — это s CSS.

      Итак, это препроцессор sass.

      Создавать стили намного быстрее, чем в обычном CSS.

      Итак, чтобы иметь возможность использовать Sass, вам нужно перейти к расширениям и найти SAS, а затем найти SAS и затем установить его.

      А еще есть живой компилятор.

      Таким образом, нам не нужно перезапускать каждый раз, когда мы вносим изменения в код.

      Итак, мы можем просто скомпилировать жизнь кода.

      Хорошо.

      Итак, я, вы также можете загрузить фрагменты кода HTML CSS.

      Итак, будущая поддержка HTML и CSS, просто установите эти два.

      Хорошо, я думаю, что пока все, нам просто нужно перейти к стилям и сделать базовую перезагрузку страницы.

      Итак, я собираюсь установить поле равным нулю, потому что по умолчанию страница имеет нулевые поля и отступы, размер поля, нулевое поле, на самом деле, поле, а затем стиль списка равен нулю.

      Итак, в теле я просто задам ему красный цвет фона, просто чтобы проверить, работают ли наши стили.

      Итак, нам нужно скомпилировать этот файл Sass в папку стилей.

      Итак, здесь вы увидите кнопку, которая говорит, что Sass нажимает на кнопку.

      Хорошо, а затем здесь будет создан CSS-файл стилей.

      Итак, давайте перейдем к индексу и сгенерируем шаблон HTML.

      Итак, чтобы сделать это, удерживайте Shift и один, а затем нажмите Enter.

      Shift, удерживать Shift, один, ввод.

      Итак, я собираюсь назвать этот портфель.

      Портфель.

      Хорошо, теперь я просто свяжу стили файла стилей css.

      Начать с CSS.

      Итак, я собираюсь запустить это на реальном сервере.

      Итак, вы можете перейти к расширениям и найти расширение плагина для живого сервера.

      Хорошо, сейчас я запущу это.

      С живым сервером.

      Вот оно.

      Итак, наши стили работают.

      Так что я собираюсь избавиться от цвета фона красной Маргариды, что, я собираюсь сначала получить некоторые шрифты.

      Google Fonts, Google Fonts, я собираюсь купить шрифт под названием Poppins.

      Итак, вам нужно выбрать толщину шрифта.

      Итак, мы собираемся использовать обычные 405 и 400 500, только обычные, вплоть до 800.

      Итак, как только вы это сделаете, вам просто нужно скопировать эту ссылку, , перейдите к указателю под стилями, а затем вставьте значения Толщины шрифта.

      Итак, я также собираюсь скопировать название семейства шрифтов, а затем, когда я помещу его в тело.

      Итак, теперь, когда мы сделали шрифты, мы сможем переключаться между темным и светлым режимами.

      Итак, чтобы сделать это, мы будем использовать некоторые переменные, некоторые переменные CSS, чтобы сделать переменные, мы собираемся ввести root, а затем мы собираемся поместить некоторые переменные в корень.

      Итак, в основном переменные будут использоваться для цветов.

      Итак, вы можете сделать переменную буквально для чего угодно, в основном в этом видео, я собираюсь сделать цвета.

      Итак, первый будет основным цветом.

      Таким образом, эта основная обложка будет темного цвета 191 И затем от D до B, я думаю, это цвет.

      Да.

      Итак, это цвет, я собираюсь вставить остальные цвета, потому что я не трачу ваше время на ввод, потому что один за другим.

      Итак, вот переменные, которые мы собираемся использовать.

      Теперь для тела я собираюсь задать цвет фона.

      Так чтобы можно было использовать переменную дува.

      Первичный, то есть основной цвет VA, мы собираемся использовать эту переменную, которая является точечным цветом.

      Итак, я пошел, чтобы также сделать размер шрифта, размер шрифта по умолчанию будет 1,1 RM.

      Так что это будет наш размер шрифта по умолчанию.

      Также я дам другой цвет, по умолчанию будет белый.

      Так по умолчанию текст должен быть белым, ладно, а то хочу еще и переход.

      Переход.

      Таким образом, переход будет длиться все целых четыре секунды.

      Ладно, вот так.

      Теперь, когда мы это сделали, давайте перейдем к индексу.

      Итак, здесь я дам класс основного содержимого, так что основное содержимое, так что это тело.

      Затем в теле у нас будет заголовок заголовка с классом раздела.

      А затем еще одно имя класса раздела сек, один, один раздел, а затем еще один класс заголовка.

      А потом у него будет еще один класс активных, они хотят посмотреть, почему мы используем активные, я объясню по ходу дела, мы нажмем ввод.

      Итак, теперь, если бы у нас было подчеркивание и подчеркивание для вашего основного, в основном будет сеанс, раздел точек.

      В разделе будет класс раздела, а затем doats, еще один класс, второй раздел, а затем еще один класс о.

      Хорошо, теперь я нажму Enter.

      Итак, теперь у нас есть раздел.

      Итак, у нас будет еще пять секций.

      Итак, у нас есть раздел, раздел второй, о каком-то десерте, это название класса, я его продублирую.

      Помидор еще три раза 123.

      Итак, все они будут содержать класс раздела, все они.

      Я просто собираюсь изменить это с сектора на третий, четвертый и пятый секторы.

      Хорошо, вы можете просто изменить здесь названия классов с «около» на «портфолио».

      И еще один, этот будет блогом.

      А потом этот будет контактным.

      Контакты.

      Хорошо.

      Так и есть.

      Теперь у нас есть секции, нам нужно, начнем с продажи всех этих секций.

      Прежде чем мы добавим какой-либо контент.

      Давайте поработаем над функциональностью переключения между разделами, ну ладно, с помощью JavaScript.

      Я познакомлю вас с Font Awesome.

      Я бы сказал шрифт, отличный CDN.

      CDN.

      А затем найдите CDN Font Awesome, найдите версию, версию 5.5, пункт один, а затем скопируйте тег ссылки, а затем перейдите под шрифты Google еще выше, а затем просто вставьте ссылку. Хорошо, так что теперь мы' вставил ссылку на шрифт awesome font, awesome.

      Мы можем, например, получить иконки из шрифта awesome font, awesome.

      Instagram, допустим, мы хотим использовать значок Instagram.

      Итак, мы можем скопировать этот значок Instagram, давайте посмотрим, работает ли он, я просто вставлю его сюда.

      А когда сохраню, посмотрим в превью работает или нет.

      Посмотрим, вот оно.

      Значит работает.

      Итак, он белый.

      Это цвет сайта по умолчанию.

      Иконка работает.

      Это означает, что некоторые из них успешно установлены.

      Итак, теперь начнем с установки разделов, хорошо.

      Большинство из них будут нацелены на все ссылки, теги привязки, я бы сказал, отображение, встроенный блок, девять блоков, а затем оформление текста до нуля.

      И затем я собираюсь сказать, что на самом деле это было так, я забыл название, цвет цвет будет унаследован, мы унаследуем цвет, который у нас есть в теле.

      И тогда семейство шрифтов будет передаваться по наследству.

      Итак, теперь давайте приступим к каждому отдельному разделу.

      Таким образом, эти разделы смогут переключаться между разделами, из-за их позиционирования они будут иметь процент абсолютного значения.

      Таким образом, каждая секция будет иметь минимальную высоту 100 VH.

      Итак, это минимальная высота, а затем ширина 100%.

      А потом мы займемся положением абсолютов.

      И затем мы собираемся сделать слева, ноль, сверху до нуля наш верхний ноль.

      А потом мы займемся дополнением.

      Таким образом, интервал заполнения.

      Итак, верх и низ, расстояние между верхом и низом будет равно трем ОЗУ, а затем 18 ОЗУ слева и справа.

      Итак, каждую секунду будут появляться эти плитки, хорошо.

      И собственно, нам нужно сделать еще и заголовок.

      Итак, голова будет иметь фиксированную высоту 100 VH.

      Итак, высота головы будет фиксированной.

      Хорошо, а затем мы сделаем цвет, цвет для этого будет белым.

      Белый цвет.

      Белый, я не знаю, почему у меня не было автозаполнения.

      И затем у нас также будет переполнение hidden на случай, если что-то переполнится.

      Итак, теперь ничего не происходит.

      Когда я осматриваю это, у нас есть все это, все эти разделы, которые находятся друг над другом.

      Хорошо, потому что мы используем абсолютную позицию.

      Итак, теперь они все лежат друг на друге.

      Итак, чтобы создать эффект переключения между этими разделами, нам нужен способ скрыть остальные разделы, а затем отображать только тот, на который мы нажали.

      Хорошо, мы займемся светом и JavaScript.

      А теперь продолжим.

      Я собираюсь выбрать класс раздела.

      Итак, этот раздел класса я собираюсь сделать по умолчанию, я хотел быть подальше от этого экрана, я хотел быть вне экрана.

      Итак, я собираюсь использовать преобразование для этого.

      А потом я переведу в y минус единица.

      Потому что по умолчанию только за кадром.

      Хорошо, а затем я также собираюсь сделать переход, вы можете создать переменную для этого перехода, если хотите, потому что мы собираемся использовать это много раз в этом видео.

      Так что вы можете упростить задачу, создав для этого переменную.

      Хорошо, теперь у нас переход.

      А еще нам нужен цвет фона.

      Итак, для этого будет основной цвет VA.

      Основной цвет, ладно, вот он.

      Таким образом, мы можем стилизовать каждый отдельный раздел по-разному, мы можем присвоить им другой цвет фона, что угодно другое.

      Так что я собираюсь пометить раздел один, сек, один, сек один.

      Так вот, вы можете присвоить ему другой цвет фона, если хотите, по умолчанию только чтобы он не отображался.

      Я не хочу ничего отображать, потому что хочу иметь возможность переключаться между этими разделами.

      Ладно, я сделаю трансформацию, как все переведу.

      Переведите Y листов, y один, чтобы перевести y ноль на данный момент.

      А потом займемся масштабированием.

      Мы собираемся сделать один.

      Итак, теперь, когда второй активен, мы вернемся на место по умолчанию.

      Итак, здесь мы выполнили трансформацию, Translate Y минус 100% и масштаб, который здесь равен нулю.

      Итак, как только мы вернемся к месту по умолчанию, вы знаете, это будет похоже на анимацию, которая появляется, за пределами экрана и масштабируется до единицы. Таким образом, эта шкала работает от единицы, нуля до между нулем и единицей. .

      Итак, нам нужно сделать это для остальных секций.

      Итак, я просто вставлю код для остальных разделов.

      Итак, этим разделам, каждому отдельному разделу, вы можете присвоить другой цвет фона.

      Хорошо, вы можете, знаете ли, дать ему другой цвет фона, просто чтобы он вам понравился.

      Ладно, ничего особенного, ничего особенного здесь не происходит, ничего особенного.

      Итак, пока что, давайте сделаем кнопки, которые позволят нам управлять этими секциями.

      Итак, эти кнопки, я буду управлять точками.

      Так что убедитесь, что контролируете давление, это неправильное написание, ну это не имеет значения.

      Итак, внутри элементов управления у нас будут кнопки, так что каждая отдельная кнопка будет иметь класс элемента управления.

      Так что я собираюсь сделать голландский контроль.

      Управление.

      Итак, у этой кнопки будет элемент управления.

      И тогда он получит контроль.

      Таким образом, первый будет управлять номером один, второй будет управлять номером три и так далее.

      Так я и говорю, контроль.

      Итак, это Ctrl.

      Во-первых, я собираюсь использовать знак доллара.

      Таким образом, знак доллара означает автоматическое увеличение чисел в зависимости от того, сколько классов в скольких div мы создали.

      Итак, контроль, а затем будет еще один класс, на самом деле не победит ни один другой класс.

      И да, я просто нажму войти в игру, я просто поставлю активный класс BTN.

      Итак, у первого будет класс активной кнопки, я умножу это на пять.

      Итак, нам не нужна кнопка Active на остальных дифференциалах.

      Итак, если вы хотите избавиться от этого, нужно, чтобы у первого были активные кнопки.

      Итак, у нас есть контроль, контроль один, контроль два, три, вплоть до пяти.

      Итак, внутри каждого из этих элементов я поместил соответствующий значок.

      Итак, в этом случае вы можете перейти к Font Awesome, а затем, например, выполнить поиск, скажем, дома, вы можете найти иконку, которую вы ищете, в данном случае, эту, и тогда ты просто скопируешь это, а потом вставишь вот так.

      Вот иконка, которую мы ищем.

      Это будет вставка в эти данные вместо того, чтобы я делал номер один.

      Итак, мы используем теплую открытую газету в портфеле, согласитесь на это позже.

      Хорошо, теперь я сохраню это, как вы можете видеть по значкам.

      Так для нас когда эти значки будут здесь с правой стороны.

      Итак, чтобы сделать это, мы будем использовать фиксированную позицию, потому что нам нужно быть в фиксированной позиции.

      Итак, мы нацелимся на элементы управления.

      Вы можете сделать комментарий здесь, скажем, управление, управление, а затем здесь, вы просто контролируете контроль грязи.

      Итак, это родитель.

      Итак, позиция, мы собираемся сделать человека фиксированным, так что это родительский контейнер, а затем Z-индекс будет равен 10, только чтобы он всегда был вверху.

      А потом я сделаю 50%.

      Хорошо, тогда точно будет 3%.

      Итак, когда вы были выровнены по живому пространству на 3% справа.

      Вот они.

      Итак, теперь живые 3% пространства с правой стороны.

      Итак, теперь мы собираемся сделать display, flex, flex direction, column.

      И затем мы также собираемся, я думаю, что когда-нибудь позже мы сможем указать ему размер шрифта, но я хочу на самом деле отправить это по оси Y.

      Таким образом, чтобы центрировать это по оси y, мы можем сделать преобразование, Перевести Y минус 50%, чтобы отцентрировать это по оси y, чтобы я сохранил, как вы можете видеть, теперь они обновлены, теперь они хорошо центрированы .

      Итак, мы отцентрированы, я собираюсь выровнять элементы по центру, а затем только содержимое по центру.

      Итак, я нацелился на контрольный класс.

      Класс управления.

      Итак, для управляющего класса я добавлю отступ, так что вокруг него будет пробел.

      Таким образом, интервал будет равен одной комнате, а курсор будет указателем.

      Итак, указатель, а затем я собираюсь придать ему цвет фона.

      Цвет фона будет таким, за что спасибо.

      Так что будем благодарны.

      Это цвет фона.

      Таким образом, ширина и высота будут равны 55 пикселям, потому что я хочу, чтобы они были округлены.

      Итак, внутри должно быть то же самое, мы хотим сделать что-то округлое.

      Итак, радиус границы будет 50%, чтобы сделать их закругленными.

      Хорошо, теперь вы можете видеть закругленные, но я хочу центрировать эти значки, которые хорошо центрированы.

      Итак, чтобы сделать это, мы просто будем использовать flex, это простое отображение, flex и выравнивание, и только для того, чтобы содержимое располагалось по центру, хорошо, поэтому я также собираюсь сделать интервал между этими значками.

      Таким образом, интервал, который мы собираемся использовать, — это поля.

      Таким образом, верх и низ будут равны четырем точкам 0,7, Rem, а затем нулю, левому и правому краю.

      Хорошо, также мы собираемся задать тень блока тень блока, мы могли бы также захотеть поместить эту тень блока в переменную, если честно.

      Я собираюсь создать здесь, я скажу, ребята, Shadow Shadow One.

      А потом это значения или ноль по оси x, три пикселя по Y 15 пикселей для размытия и затем непрозрачность 0,3.

      Итак, это процессор, который мы собираемся использовать.

      И это будет сделано заново, а затем я просто вставлю переменную на случай, если нам не понравится переделывать эту картинку, потому что я хочу многократно использовать этого продавца книг в этом видео.

      Итак, они хорошо видны.

      Итак, я хочу также изменить размер этого значка, размер значка.

      Итак, чтобы сделать это, я нацелюсь на глаз, который находится внутри значка.

      Если вы еще не знаете о Sass, мы можем вкладывать элементы.

      Итак, мы можем вложить некоторые HTML-элементы.

      Вот чем я сейчас занимаюсь.

      Итак, я скажу размер шрифта, я поставлю его на 1,2.

      Рэм, я хочу, чтобы он был немного больше.

      И затем я собираюсь также дать ему цвет, и события указателя ни одного.

      Итак, события указателя, значит я хочу, если когда я нажимаю, мне ничего не нужно делать, он не реагирует ни на щелчок, ни на мышь, что угодно.

      Итак, теперь с сохранением все выглядит хорошо.

      Все выглядит на месте.

      Итак, теперь я собираюсь, поэтому, если вы помните, здесь я присвоил этому класс активной кнопки.

      Итак, любая кнопка, я хочу, чтобы этот активный класс применялся к любому элементу, на который я нажал, а также одновременно удалял другие элементы с этим классом, хорошо, поэтому, когда я нажимаю это, на только эта кнопка, чтобы иметь эту кнопку действия класса, активную кнопку, а затем удалить оставшиеся активные кнопки, имена классов.

      Так что эта функция определенно немного сложна для новичков, но на самом деле это легко сделать.

      Итак, что мы собираемся делать сейчас, на самом деле, я сначала скажу Активной кнопке.

      Итак, какая бы ни была активная кнопка, вот здесь, над элементом управления, я скажу, точки, активная версия, я остановлю это.

      Так что это просто цвет фона и переход.

      Итак, цвет фона будет вторичным цветом, то есть зеленым цветом.

      А затем я собираюсь переключить значок внутри глаза.

      Так что я просто выберу иконку и задам ей белый цвет.

      Итак, вот оно.

      Итак, это активная кнопка.

      Кажется, теперь все хорошо отцентровано.

      Да, теперь кнопка Активировать будет зеленой.

      Итак, теперь, когда кнопка на самом деле зеленая, нам просто нужно перейти к JavaScript.

      И давайте создадим новый файл JavaScript.

      Итак, давайте создадим новый файл, он будет до j s.

      Итак, этот объект будет выбирать некоторые элементы HTML.

      Итак, я собираюсь выбрать все элементы или элементы, используя класс раздела.

      Таким образом, const section документирует селектор запросов, селектор запросов, все, что говорит о классе раздела.

      Итак, помните, мы дали всем разделам класс раздела, так что это означает, что я выбираю все с классом раздела.

      Итак, я нацелился на это.

      Я также собираюсь выбрать Я также собираюсь выбрать кнопки плохого раздела.

      Итак, вторая кнопка является родительским контейнером этой из этих кнопок.

      Итак, элементы управления, так что это кнопки раздела, так что это похоже на родителя, я выбираю этот родительский контейнер, а затем внутри, и мы также должны выбрать каждую отдельную кнопку с классом управления.

      Ладно, так что я просто собираюсь Окей, так что есть вторая кнопка управления.

      Итак, это родитель. Это фактическая кнопка. Я также собираюсь выбрать тело, тело — это класс основного содержимого.

      Итак, есть основное содержимое тела, это класс.

      Итак, здесь я просто создам новую функцию.

      Я собираюсь использовать функцию function для создания новой функции.

      И тогда мы скажем страница.

      Переходные переходы.

      Может быть, мы можем назвать эту функцию как угодно.

      Решать вам, правда.

      Итак, теперь мы собираемся войти сюда, я хочу сказать, кнопка.

      Щелчок, активный класс.

      Активный класс.

      Итак, что я хочу, чтобы произошло, когда я нажму кнопку? Итак, я хочу иметь возможность избавиться от класса, который не является активным, только от активного класса, вот что я хочу иметь класс один.

      Итак, мы собираемся сделать петлю, мы собираемся сделать четыре.

      Итак, мы собираемся создать новую переменную.

      Итак, пусть i Хорошо, так что первоначально он будет установлен на ноль, а затем мы собираемся сказать, что i меньше, чем до тех пор, пока i меньше, чем меньше, чем длина, длина кнопки, хорошо? В раздел БТН.

      Сессионная кнопка — вот эта.

      Хорошо, пока i меньше этого.

      Мы собираемся увеличить шаг.

      Хорошо, теперь так.

      Итак, здесь, я бы сказал, кнопка для больных.

      Итак, вторая кнопка набора предназначена для поиска указателя, глаза.

      Ладно, по какому бы индексу мы ни работали.

      И тогда я скажу, что это проходит.

      На самом деле, я собираюсь добавить прослушиватель событий к любому индексу, по которому мы щелкнули.

      Так это индекс? Хорошо, поэтому я собираюсь добавить точку прослушивания событий.

      Итак, обработчик событий займет два.

      Первым будет щелчок, а вторым будет функция обратного вызова.

      Что я делаю? Это будет кубическая функция.

      Итак, в этой функции обратного вызова.

      Хорошо, в этом случае я выберу текущую кнопку, какая бы кнопка ни была нажата на текущей кнопке, вы можете хорошо нажать на текущую BTN.

      И тогда я скажу, что близко к документу.

      Итак, мы собираемся сделать селектор запроса с классом активной кнопки, хорошо, если вы помните, кнопки будут иметь класс активной кнопки BTN.

      Итак, я выбираю это с названием текущей кнопки.

      Итак, я назову текущую кнопку.

      Первый, с нулевым индексом индекса, я собираюсь сказать имя класса, затем я собираюсь сказать текущий номер индекса ноль, затем я собираюсь сделать имя класса, я собираюсь не указывать имя класса.

      А потом я заменю это пустой строкой.

      Раз мы вышли из единиц, то не активны, активны, B, TN, а потом я пошел заменить на пустую строку.

      Итак, какая бы кнопка ни была нажата, когда мы больше не будем нажимать на нее, мы пойдем в класс и нажмем пустую строку.

      Так вот, я собираюсь сделать это точечное имя класса.

      Итак, это относится к этой функции.

      Итак, это запутанная тема для изучения ключевого слова this в JavaScript.

      Как-то странно.

      И тогда я собираюсь сделать плюс, равный активному лицу, активному BTN.

      Вот так.

      Итак, теперь, когда я сохраняю, нам нужно вызвать эту функцию, страница пациентов пациентов.

      Итак, приступим к функции.

      Давайте на самом деле хуже, мне нужно связать этот файл JavaScript, идущий к сценариям.

      Скрипты, а потом перейдем к исходникам и далее до js.

      Тогда давайте все сохраним и перейдем на страницу осмотра.

      И затем, когда мы нажмем эту кнопку или освободим класс, вы должны появиться на любой кнопке, на которую нажали.

      И тогда он избавится от этой активности. 9Шаблон 0003

      здесь.

      Ладно, это статистика.

      Ошибка.

      Но мы скажем, что это не сработало.

      Итак, когда я нажимаю, класс отключается, но не работает.

      Позвольте мне проверить, что происходит.

      Канарские свойства неопределенного имени класса.

      Хорошо и предпочитает этот.

      Это ключевое слово.

      Имя класса для замены.

      Ладно, что-то не так со списком классов.

      О, это не облако должно быть именем класса, а не списком.

      Хорошо, давайте сохраним это.

      Надеюсь, проблема сработает, клик.

      Ничего не происходит, опять ошибка.

      не определено.

      Странно.

      Текущее имя класса BTN заменяет активный BTN.

      Так что вам просто нужно удостовериться, позвольте мне еще раз проверить, может быть, просто еще раз проверить правильность имен.

      Я просто скопирую, вставлю и заменю все, кроме Ну, я думаю, название правильное.

      Ладно, попробуем разобраться, что происходит.

      Неопределенная текущая кнопка в evaton Хорошо, класс назван правильно.

      Селектор запросов документов.

      Все не понимают что, что? Undefined здесь Я только что понял что-то, чего я не нашел, я не нашел ошибку, но, должно быть, предполагал использовать здесь функцию стрелки.

      Я почти уверен.

      Я должен использовать обычную функцию.

      Я сделаю такую ​​функцию, а не , потому что это ключевое слово не существует в стрелочной функции.

      Итак, он существует только в обычной функции.

      Ой, почему я нажал? Хорошо, позвольте мне просто показать вам запись.

      Только сразу после того, как я остановил видео, я понял, что использовал функцию ошибки.

      Итак, когда я захожу в консоль, все работает нормально.

      Итак, теперь все работает как положено.

      Только, поэтому функции ошибок Дженни для, если вы хотите использовать это ключевое слово, не существует в функциях стрелок.

      Хорошо.

      Итак, теперь давайте, давайте перейдем к следующему шагу к следующему шагу.

      Итак, на следующем этапе давайте коснемся фактического создания контента.

      Но чтобы сделать это, нам нужно иметь возможность переключаться между этими разделами.

      Итак, теперь мы создали активный класс для кнопки.

      Теперь нам нужно заняться контентом.

      Таким образом, у каждой кнопки будет нечто, называемое идентификатором данных данных.

      А потом этот ID данных.

      Итак, когда я нажму на кнопку, будет искать раздел с этим идентификатором.

      Итак, в этом случае он будет искать раздел about с идентификатором о портфолио о портфолио, блогах и контактах.

      Поэтому убедитесь, что вы добавили идентификатор данных рядом с кодом в класс после класса.

      И затем здесь я также добавлю идентификатор данных, так что этот будет заголовком, а этот будет искать заголовок.

      На самом деле, мы можем сделать главное, дом.

      Это зависит от вас домой.

      Хорошо, я дам удостоверения личности, так что дайте удостоверение личности.

      Итак, этот будет дома, поэтому дайте идентификатор Рождества, убедитесь, что этот идентификатор соответствует идентификатору данных здесь.

      Итак, для дома первым, первым шаблоном будет дом.

      Второй о-о.

      Итак, этот раздел о разделе, один, два ID, ID, так что этот будет о, а затем третий, ID, Портфолио, затем Id, этот будет блогами.

      И вот, наконец, у нас есть контакт, ID, контакт.

      Итак, эти идентификаторы помогут нам перемещаться по этим разделам.

      Итак, теперь, когда у нас есть эти идентификаторы, мы сделали эти разделы, давайте я проверю этот раздел.

      Они есть, но расположены прямо друг над другом.

      Для основных разделов, которые там есть, на самом деле нам нужно стилизовать их разными цветами фона.

      Хорошо, вы знаете, что мы хотим дать им другой цвет фона, цвет фона, сланцево-синий, чтобы вы могли видеть разницу, но мы ее пока не видим.

      Потому что шкала шкалы равна нулю.

      А на самом деле перевод минус 100%.

      Значит, они за кадром, и масштаб тоже нулевой.

      Итак, вы их еще не видите, поэтому нам просто нужно немного написать JavaScript.

      Так что мы сможем увидеть их позже.

      Хорошо, просто чтобы вы посмотрели эти разделы.

      Ладно, я сохраню это.

      Так что мы не видим эти разделы.

      Теперь нам просто нужно сделать активный класс.

      Таким образом, когда мы нажимаем на каждую кнопку, происходит активный класс.

      Итак, активный класс будет активным классом, который будет добавлен в секции.

      Хорошо? Так вот, я собираюсь сказать разделы.

      Активный класс.

      Итак, у нас есть все разделы, мы выбираем все эти разделы здесь.

      Итак, этот раздел является таргетингом.

      Итак, основное содержимое здесь — это тело.

      Итак, тело.

      Вот и весь этот раздел является родителем всех этих разделов.

      Итак, я собираюсь сказать, все секции, все эти секции, точка для каждой, так что я собираюсь перебрать все, что находится внутри тела.

      Хорошо.

      Итак, в данном случае все секции находятся внутри тела.

      Итак, он будет использовать функцию обратного вызова, я бы сказал, раздел.

      Итак, у нас есть раздел, на самом деле, нам нужно добавить прослушиватель событий, мы рассмотрим позже добавление прослушивателя событий.

      А потом, когда я нажимаю внутрь, в чем прикол? Итак, вы можете выполнять свою функцию прикрытия здесь, а потом мы отправимся на мероприятие.

      Итак, буква E означает событие.

      Итак, я собираюсь, я просто скажу E, контрольный журнал здесь, я собираюсь сказать e точка цели.

      Хорошо, так что я собираюсь сохранить, пойдем в консоль, дайте мне просто щелкнуть в любом месте.

      Значит пока ничего не делает, потому что сеансы снаружи.

      Ладно, значит, не увидишь, не увидишь, не увидишь.

      Но теперь он нацелен на любой элемент элемента ведения журнала консоли, на который я нажал, как вы можете видеть, а затем показывает класс или любой другой элемент во имя разработки, на который нажал.

      Итак, мы просто добавляем прослушиватель событий к любому элементу, но в этом случае мы хотим настроить таргетинг на эти кнопки здесь.

      Ладно, давай избавимся от этого.

      Итак, здесь я хочу сказать const.

      Идент.

      И затем мы собираемся сказать, является ли стоимость e для целевого набора данных с точками, подобного этому, а затем.id.

      Таким образом, набор данных как бы ссылается на что угодно.

      Я нажал на любой элемент, нажал на цель, что будет нацелено на набор данных.

      Вот этот набор данных.

      Получите идентификатор данных здесь.

      Итак, какой бы элемент я ни нажал, я хочу настроить таргетинг на наборы данных, на какой бы элемент я ни нажал, особенно на эти кнопки, я хочу получить для него набор данных.

      Итак, я хочу взять здесь имена этих наборов данных.

      Итак, вот о чем идет речь.

      Итак, я беру набор данных и помещаю его в переменную с именем ID.

      Итак, я собираюсь сказать, если бы это было правдой, или если бы у нас был идентификатор, что бы мы ни собирались делать, мы сначала удалим Удалить, выбранный, выбранный из другого кнопка.

      Что-то вроде того.

      Итак, я сделаю раздел кнопок, который является контейнером кнопок.

      Но я хочу просмотреть каждую отдельную кнопку внутри.

      Итак, чтобы сделать это, мы просто собираемся сделать для каждого, поэтому для каждой кнопки, для каждой кнопки, я собираюсь сделать с помощью кнопки btn is для класса этот список классов, а затем я собираюсь чтобы удалить класс активной кнопки, активная на самом деле, активная активная кнопка - это другой класс для стиля кнопок.

      Но это относится к классу.

      Итак, этот активный класс мы будем использовать для разделов, а не для таких активных стилей.

      Итак, это другая вещь, другое имя класса.

      Итак, мы прокручиваем кнопку, каждую отдельную кнопку.

      Если мы нажмем кнопку «Создать», мы просто избавимся от класса.

      А потом мы просто скажем есть или целиться.

      И затем мы собираемся сказать список классов, мы просто хотим добавить класс к любой кнопке, на которую нажали.

      Итак, мы просто собираемся сделать целевое или бесклассовое событие.

      Хорошо? Итак, мы собираемся добавить класс active.

      Итак, теперь, когда мы добавили класс, я также собираюсь скрыть другие разделы.

      Прочие разделы.

      Итак, как мы делаем, так что мы уже сделали это, но, типа, я просто собираюсь сделать эти разделы.

      Итак, разделов мы пока не видим.

      Но когда я нажимаю кнопку «Активно», я хочу иметь возможность установить отображение и транскрипцию перевода по умолчанию.

      Итак, я собираюсь сделать разделы.

      Я собираюсь сделать это для каждого раздела.

      Итак, если вы помните, разделы идут сюда из раздела.

      Так что я каждую секунду просматриваю каждый раздел.

      Итак, для каждого раздела я скажу раздел, я разделю список классов.

      Теперь добавьте или удалите, это то же самое, что мы сделали с кнопкой.

      Я бы сказал активный.

      Хорошо, так что почти все сделано.

      Да, я собираюсь сделать еще одну вещь, постоянные элементы.

      элемент, а дальше будешь просто документ делать.

      документ.

      И затем мы собираемся получить элемент по идентификатору, элемент по идентификатору.

      А потом мы передадим ID.

      Таким образом, любой идентификатор, полученный из набора данных, будет находиться внутри элемента, переменной элемента, мы сохраняем идентификатор.

      Итак, помните, здесь мы даем здесь идентификатор, идентификатор портфолио.

      Таким образом, на каком бы элементе мы ни находились, мы собираемся передать идентификатор.

      А также этот идентификатор данных связан с этими идентификаторами.

      Итак, на каком бы элементе мы ни находились, мы нацеливаемся на ID.

      Итак, сейчас мы просто назовем элемент.

      Вы можете назвать, а затем мы сделаем класс и список классов.

      А тут еще и просто активно добавляю.

      Хорошо, сейчас я сохраню, давайте посмотрим, что у нас есть.

      Итак, давайте осмотрим наши секции.

      Итак, мы надеемся, что home должен иметь активный заголовок класса.

      Мы добавили это вручную, но когда я нажимаю что-то еще, надеюсь, нужно избавиться от этого и поместить в другое место.

      Когда я нажимаю Да, активность исчезает.

      Последняя из шапки, сейчас активна эта.

      Когда я нажимаю, этот активен, теперь он избавляется от существующего класса на другом.

      Итак, теперь мы можем использовать актив только для одного элемента.

      Но мы не видим здесь наших разделов.

      Они есть, но мы их не видим.

      Поскольку они скрыты, нам просто нужно отобразить эти разделы.

      Итак, я пойду в поиск SEC пять, я просто активирую точку.

      Таким образом, это говорит об активном блоке отображения, поэтому мы хотим отображать только тот элемент, который активен.

      Хорошо.

      Теперь, допустим, теперь голова активна, она имеет зеленый цвет.

      Работает.

      Итак, все работает.

      Мы можем переключаться между разделами.

      Хорошо? Но эти разделы, они не анимационные? Нет, нет, это не то, чего мы хотим.

      Так вот, я просто скажу, анимация.

      Я бы сказал масштаб.

      И его.

      Так что это никогда не анимация, продолжительность будет одна секунда.

      А потом у нас будет послабление и облегчение.

      Итак, я собираюсь сделать здесь анимацию.

      Я сделаю это по ключевым кадрам, а этот будет масштабироваться.

      И его.

      Итак, это имя масштабатора анимации.

      И тогда я собираюсь сделать на 0% То, что мы хотим, это ноль, преобразовать, перевести.

      Франция, позднее преобразование, преобразование, перевод 0%.

      Перевести Y.

      Итак, для Y здесь то же самое, что мы делали раньше.

      Шкала, ноль.

      Итак, у него будет только два состояния: 10% 0% и 100%.

      Ладно, что у меня математика сломалась, кстати, он дважды щелкает, когда мне не нужно.

      Итак, когда я попытался сделать один щелчок в двойном щелчке автоматически и получить новую мышь, хорошо, так что здесь просто сбрасываются значения до нуля, а масштабируется до единицы.

      Хорошо, давайте сохраним это.

      Надеюсь, это сработает.

      Сейчас.

      Как видите, мы можем масштабироваться.

      Ладно, мы видим, но это не те эффекты, которые нам нужны.

      Мы ищем шкалу Y.

      Итак, мы ищем шкалу Y.

      Хорошо, мы все измеряем.

      Итак, мы хотим масштабировать только ось Y.

      Итак, когда контент исходит, знаете ли, вверх.

      Как видите, теперь мы можем делать эти эффекты.

      Хорошо, вот и все, эффекты теперь можно пролистывать по разделам.

      Сейчас я сделаю перерыв.

      А потом я вернусь, просто попью воды.

      А потом мы продолжим с того места, на котором остановились.

      Хорошо, я вернулся.

      Итак, теперь давайте сделаем заголовок.

      Итак, давайте кинем заголовок к содержимому, вставим заголовок, а затем перейдем к другим разделам.

      Итак, для заголовка у нас в основном будут только изображения и прочее.

      Итак, я собираюсь создать содержимое заголовка класса.

      Таким образом, содержимое заголовка будет иметь левую часть и правый левый заголовок, а затем у нас будет правый заголовок, поэтому правая сторона.

      Итак, они будут отображать сетку.

      Итак, для левой стороны ничего нет, здесь просто изображение.

      Мы собираемся сделать форму заголовка.

      А потом ниже нужно сделать изображение внутри изображения TIFF.

      IMG, герой IMG, делает имя изображения, а затем переходит к правой стороне.

      Так вот просто куча текста.

      Итак, у нас будет h2 с именем.

      Я просто вставлю имя. Хорошо, так что это панорамирование окружает имя, потому что я хочу раскрасить этот цвет в имени, только этот немного отличается от цвета, который я окружаю этим панорамированием.

      Итак, это панорамирование или сохранение имени класса, я не знаю, у меня такое же, я собираюсь избавиться от класса span, имя класса будет звучать как расширение.

      Хорошо.

      Ниже у нас будет тег p p p, который я также собираюсь вставить в некоторый текст.

      Извините, извините за фоновый шум, мои товарищи, я играю в видеоигру, когда нажимаю точку, главную, главную BTN.

      Итак, это якорный тег.

      Итак, у него будет значок.

      И у него будет два промежутка, это первое панорамирование, у него будет класс текста btn.

      Итак, это просто текст, в тексте будет написано скачать резюме, вы можете поместить любой текст, который хотите.

      Таким образом, этот тег привязки является ссылкой, вы можете сделать так, чтобы она шла куда-нибудь, или на Google Диск, где бы вы ни сохраняли свое резюме, или что-то еще, вы можете отправить его туда.

      А затем еще один диапазон будет иметь значок для значка загрузки из Font Awesome.

      Итак, вот и все, что касается содержимого заголовка, нам просто нужно сделать стили, я собираюсь избавиться от этого зеленого цвета здесь.

      Итак, это было просто в целях тестирования, чтобы вы увидели, чтобы показать вам, что секции работают, я просто собираюсь избавиться от этого парня, прочитав, когда я избавлюсь от всего.

      Итак, теперь у нас остались цвета по умолчанию.

      Итак, теперь давайте коснемся создания заголовка.

      Итак, содержимое заголовка.

      После элементов управления я просто скажу содержимое заголовка и содержимое, а затем я сделаю еще один дубликат, я скажу в компонентах содержимого, так что некоторые компоненты, которые мы могли бы использовать повторно, мы собираешься положить их здесь.

      Итак, теперь я собираюсь настроить таргетинг на содержимое заголовка.

      Содержимое заголовка.

      Итак, для другого контента мы собираемся отображать сетку, мы собираемся поместить сетку из двух столбцов, столбцы шаблона сетки, мы собираемся сделать повтор, так что один-два столбца, а затем один о.

      Так что все они будут равны.

      Итак, когда я сохраняю, теперь у нас есть два столбца, когда я просматриваю это, как вы можете видеть, у нас есть два столбца, один, два.

      Итак, это то, что нам нужно.

      И тогда да, высота будет составлять 1 или 2% от высоты, и затем я нацелюсь на левый заголовок, левша.

      Итак, для этого отображения сгибаем, выравниваем элементы, выравниваем элементы относительно центра.

      Хорошо, тогда позиция будет относительной, потому что когда позиционировать абсолютную фигуру, она будет позади нашего изображения.

      Итак, за этим сохранением изображения будет стоять форма.

      Итак, вот почему мы делаем персону относительно родительского контейнера.

      Итак, фигура, которую мы назвали этой фигурой, ах, фигура, если вы помните, просто фигура заголовка, фигура будет иметь переход, который мы использовали раньше, я просто собираюсь вставить переход а затем высота одного представляет с 65%.

      Неправильный цвет будет далеко, это будет вторичный цвет, это будет цвет фона, а затем абсолютная позиция, а затем мы собираемся сделать слева, ноль, верхний нуль, верхний ноль.

      И затем мы собираемся сделать Z-индекс хотел быть позади образа один минус один на самом деле хотел быть позади.

      А потом я сделаю clip path.

      Так обрезай путь, я тебе покажу что, что он делает, я просто вставлю в угол и тогда я тебе покажу.

      Итак, это путь отсечения, эти значения используют путь отсечения, это похоже на изменение формы.

      Итак, чтобы сделать это, мы можем сделать генератор клипа.

      И тогда мы можем создать что-то вроде траектории клипа.

      Например, то эта трапеция, трапеция название, как-то путано читать.

      И тогда мы можем, знаете ли, создать форму, которую мы ищем.

      Затем вы можете просто скопировать этот код, а затем вставить его в любое место любой фигуры, которую вы хотите настроить.

      В данном случае это те значения, которые я использую.

      И после этого, после формы, я нацелюсь на изображение.

      Итак, для изображения я дам ему радиус границы.

      Итак, радиус границы будет VA, я собираюсь сделать MD, радиус границы не помню.

      Тоже маленький.

      Таким образом, отсутствие второго радиуса границы является переменной.

      Хорошо? Когда я делаю ширину и высоту, это будет 90%, высота 100, высота 90% с 68%.

      И потом я большой любитель цвета, цвет фона будет далеко.

      Таким образом, цвет фона будет черным.

      Это будет цвет фона, а потом переход при переходе.

      Итак, мы использовали этот переход несколько раз, а затем я собираюсь отредактировать изображение.

      Внутри контейнера изображения у нас есть изображение, фактическое изображение, ширина и высота будут установлены на 1%.

      Хорошо, а затем объект подгони под укрытие, чтобы оно не вытягивалось из-под ног, чтобы укрыться.

      Итак, это изображение будет растягиваться, мы также хотим снова сделать переход для этого изображения, скопируйте этот переход, который мы собираемся прочитать, вы можете поместить его в переменную, чтобы вам не приходилось копировать и вставлять вот так.

      А затем нужно, чтобы это изображение было в оттенках серого для кого-то, скажем, будущих оттенков серого.

      А потом я поставлю вину, Грейс, оттенки серого на 100%.

      Затем, когда у нас есть изображение и наведение.

      Итак, в этом прелесть sass, мы можем вкладывать компоненты, элементы HTML, а затем установить фильтр.

      оттенки серого, ноль.

      Ладно, сохраним.

      Посмотрим, что получится.

      Ладно, когда у меня изображение меняет цвет.

      Хорошо.

      Не избавляет от них.

      Так что да, оставь меня циничным.

      Итак, теперь пойдем направо.

      Итак, на правую сторону.

      Это в основном, так что у нас есть левый заголовок, я собираюсь свернуть левый заголовок.

      Я собираюсь сохранить правый заголовок.

      Итак, для правильного заголовка, и когда я отображаю flex, отображаю это воспроизведение flex, flex direction to column, потому что я хочу, чтобы все было в направлении столбца.

      Хорошо, а затем только для содержимого по центру, а затем отступы, верно? Чтобы поставить большое значение здесь, хм, я думаю, что работает имя, затем размер шрифта.

      Так как имя является основным заголовком, я его увеличу.

      Хорошо, а потом я нацелюсь на эту кастрюлю внутри нее.

      Итак, здесь есть промежуток.

      Итак, у этой сковороды будет цвет, другой цвет, цвет, этот цвет будет вторичным цветом.

      Вторичный, то есть через вторичный цвет.

      Вот это цвет.

      И затем, после имени, у нас есть абзац, я собираюсь дать им поле, верхнее и нижнее будут 1,5 Ram.

      И тогда слева или справа будет ноль.

      И после этого я дам вам высоту строки.

      Итак, восьмая строка — это интервал между строками текста.

      Итак, письмо будет примерно таким, что я собираюсь сохранить, посмотрим, что у нас получится.

      Вот оно.

      Красиво выглядит.

      Итак, нам просто нужно запустить этот шаблон.

      Чтобы запустить кнопку, мы собираемся повторно использовать эту кнопку, чтобы она стала независимым компонентом.

      Итак, я собираюсь сказать dot main btn Хорошо, так что на самом деле это main btn, я думаю, было бы разумно поместить его в контейнер dot btn container вот так.

      Итак, теперь мы можем попытаться приступить к стилизации главной кнопки.

      Итак, у этой кнопки будет много стилей.

      Хорошо.

      Таким образом, радиус границы будет 30 пикселей.

      Хотел красиво округлить, не то чтобы не 20 на 30.

      Размер шрифта нормальный.

      Сделаем цвет.

      Inherit, а затем мы собираемся установить толщину шрифта, это будет 600 для текста, чтобы он был толстым.

      Хорошо? И тогда я собираюсь сделать процент хорошо. И затем я собираюсь дать вам границу с одним пикселем и цветом вторичного.

      Это граница, я собираюсь сделать display flex и выровнять все по центру.

      Хорошо, а потом я скажу, что переполнение скрыто.

      Хорошо.

      Итак, внутри кнопки у нас есть текст btn или BTN.

      Текст, а затем я просто добавлю к нему отступы, верхний и нижний нули в REM слева или справа.

      Итак, в кнопке у нас тоже есть, у нас тоже есть точка btn, у нас есть иконка.

      Хорошо.

      Значок кнопки.

      Итак, если вы не помните названия классов, вот этот значок.

      Итак, значок кнопки, он будет иметь зеленый цвет, вторичный, а затем отправленный, все во Flex.

      Итак, мы делали это снова и снова.

      Так что иногда мне просто приходится копировать и вставлять.

      Таким образом, чтобы установить все, просто отобразите элементы с гибким выравниванием по центру, выровняйте центр содержимого.

      Таким образом, заполнение в то время как ОЗУ, так что это похоже на интервал вокруг.

      Сохраню, посмотрим, что у нас получилось.

      Вот и наша кнопка, но она заполняет всю ширину, потому что мы используем flex в родительском контейнере.

      Итак, чтобы избавиться от этого эффекта, мы можем сделать btn can be tn container, если вы помните, поместить в видимый контейнер под названием BT и кукурузу.

      Вот, вот, между кукурузой, мы просто собираемся сделать display flex на этом дисплее.

      Гибкий.

      А потом мы скажем, выровнять себя.

      Давление.

      Конечно.

      флекстер.

      Да.

      Итак, теперь, теперь, нам нужно что-то привнести сюда, когда у вас есть приведение в виде формы, похожей на кнопку.

      Итак, мы собираемся использовать псевдо-псевдоэлемент перед псевдо-элементом, скажем, конец для четырех.

      И затем мы собираемся сказать содержимое пустой строке.

      Итак, мы можем начать с любого стиля, который пожелаем.

      Пачино салютует топ 00 А потом писать будет ноль.

      Прямо ноль, а затем мы собираемся сделать преобразование, Перевести X.

      Итак, мы собираемся убрать сдвиг от кнопки, чувак, а также процент уйдет как бы в сторону с кнопки, человек как один из процентов.

      Мы также собираемся сделать переход.

      Я просто вставлю переход.

      А то я собираюсь сделать Z индекс хотел быть за текстом кнопки, а так один ладно.

      Итак, теперь эта форма есть, но у нее нет ни ширины, ни высоты, ничего определенного.

      Итак, я собираюсь сказать и навести курсор, когда у меня есть кнопка.

      Имеем кнопку и берем псевдоэлемент before.

      Что мне нужно для масла Что я хочу, чтобы произошло? Я собираюсь поставить вашу ширину и высоту на 100%, а затем установить цвет фона на вторичный цвет.

      Итак, теперь, когда я проверю, позвольте мне проверить это.

      Давайте поищем до того, есть ли до, suderman Есть ли, но помните, что мы переводим по оси x минус единица, поэтому нам нужно вернуть ее в позицию по умолчанию, которая равна нулю.

      Хорошо, когда у нас есть, а затем, когда у нас нет, он вернется к прочь от кнопки.

      Строка A, создающая этот эффект с неверного направления.

      Итак, это от минуса, это на самом деле 100% Потому что мы идем на один 2% При положительном значении минус становится отрицательным.

      Итак, я хотел изменить положительное, чтобы теперь оно исходило с правой стороны.

      Вот видите, но да, вот оно.

      Думаю, нужно где-то добавить переход.

      Здесь тоже.

      Нам нужно перейти сюда, в безопасное место.

      Безопасный скретч не знаю глючит иногда глючит не делал до перехода.

      Я думаю, что в ховере, вот когда нам нужно перейти, скажем, начать делать это.

      Если не работает, если не работает, то на иконке не выглядит умным Ладно, не беда, но работает.

      Итак, теперь нам нужно перейти к следующему разделу, разделу «О программе».

      Этот раздел ABA, это, это, это просто, я просто говорю, что это слишком.

      Там так много контента.

      Ладно, я пойду в раздел "О себе" и проверю, как долго я записываюсь, я так устал.

      Я записывал это видео пару раз, а потом сделал ошибку, которая была очень плохой, я даже не мог отредактировать, так что теперь я собираюсь перейти в раздел «О программе», так что в лабораториях Mac там примерно я собираюсь создать новый div под названием main title.

      Итак, мы хотим иметь возможность повторно использовать этот заголовок, чтобы он был похож на заголовок, а панорама внутри него была похожа на основной заголовок.

      Итак, у нас есть обо мне, а затем у нас есть промежуток, покрывающий меня.

      Итак, когда раскрасить это по-другому.

      Итак, мы сначала изучаем что-то с помощью span, это означает, что мы собираемся по-разному стилизовать это различие, проверяя этот конкретный элемент.

      Итак, независимые компоненты, мы закончили работу над кнопкой, чтобы сделать основной заголовок.

      Итак, для сопровождающего.

      Просто текст выровнен по центру.

      текст выравнивается по центру, а затем теперь мы собираемся привязать к краю относительное положение заголовка, а затем мы собираемся преобразовать текст в верхний регистр.

      Поменяйте местами верхний регистр, а затем мы собираемся сделать вес шрифта, размер шрифта первого форума.

      вес шрифта будет 700.

      И на этом пока все, давайте приведем в порядок эти кастрюли.

      Итак, для этой сковороды я сделаю цвет, это будет VA, это будет вторичный цвет.

      Итак, после этого мы нацелимся на PG, текст PG, чтобы большой Текс перешел в абсолютную позицию, как за основным тестом.

      Я собираюсь сказать 50% лучших И затем мы также собираемся делать подъемы 50%.

      И затем мы собираемся сделать цвет, серый цвет, а затем переход, хорошо, я просто собираюсь вставить, так что переход обычно представляет собой индекс Z минус один, я хочу, чтобы он был за текстом Хорошо, а затем вес шрифта 800 Таким образом, это преобразование переводит минор C в процент костюма кино, что означает, когда отправлять или что-то в этом роде.

      Хорошо? И тогда размер шрифта будет 6.3 Ram.

      Хорошо, давайте сохраним это.

      Посмотрим, что получится.

      Итак, вот оно.

      Ладно, так обо мне то да моя статистика на заднем фоне.

      Итак, теперь у нас есть главный заголовок, большой заголовок.

      Теперь поговорим о содержании.

      Так что это похоже на div, который будет содержать все о контейнере container, а затем у меня будет левый контейнер, левый, правый, левый и правый.

      Итак, у нас будет h5 в абзаце.

      Я просто вставлю это.

      Итак слева примерно, ладно, это то, с чего мы начинаем с h5 В абзаце h5 это заголовок.

      Хорошо? И затем я снова скопирую эту кнопку, кнопку, которую мы использовали в заголовке.

      Итак, ниже, под абзацем, я поставлю кнопку основной кнопки контейнера кнопок.

      Ладно, я просто повторно использую дубинку.

      Я сохраню это.

      Вот оно.

      Итак, мы снова и снова используем одну и ту же кнопку.

      Думаю, это хорошо.

      Итак, с правой стороны я собираюсь свернуть этот шаблон.

      А потом я сверну этот абзац.

      И тогда я останусь с рейтингом.

      Итак, здесь, и мы просто собираемся сказать об этом предмете.

      Итак, элемент бота будет иметь класс точек, A, T.

      Текст.

      Итак, здесь у нас будет просто большой текст с точками.

      Хорошо, я скажу, может быть, проекты 650 или 560 Plus.

      Хорошо.

      Итак, я просто вставлю в другой абзац класс мелкого, мелкого текста, а затем мы перейдем к строке нейрона br Это означает Разрыв, разрыв строки, переход на новую строку.

      А потом да, мы просто ломаем текст.

      Ладно, на этом все.

      Итак, в основном справа у нас будет сетка.

      Итак, мы перейдем к независимым компонентам, я скажу здесь о контейнере.

      Итак, в контейнере я собираюсь сделать дисплей, отображать сетку.

      Затем сетка, столбцы шаблона, тоже повторы, у меня будет два столбца.

      Два, а затем один EFA.

      Все они будут одинакового размера.

      И затем я собираюсь сделать отступ сверху и отступ снизу, я просто вставлю это.

      Так что ежу понятно, отступы, сверху 345 отступы, снизу слева и справа примерно.

      Итак, справа тоже будет сетка.

      Хорошо, отобразите сетку, затем сетку, кто-то столбцы, так что это будет TFT.

      То же самое.

      Повторить два столбца, один о.

      Вот так.

      И затем ниже этого мы собираемся сделать зазор сетки.

      Это похоже на расстояние между элементами сетки.

      Мы пропускаем термин, так что это похоже на расстояние между двумя элементами.

      Хорошо.

      Теперь сохраним.

      Пошли туда.

      Вот и все о предмете, вот он.

      Запись о предмете, нам просто нужно продолжать.

      Итак, мы поговорим об элементе, я дам ему границу один пиксель на пиксель, радиус границы, трансформацию и тень, те, что мы использовали для одного пикселя и цвет серого .

      Хорошо, так что И тем не менее, когда у нас есть это, когда у нас есть, я просто скажу курсор по умолчанию.

      Хорошо, а потом я скажу трансформируй, переводи, я не буду переводить y минус 50 минут осталось, минус пять исправлений.

      Минус пять пикселей, я хочу иметь, а затем идет вверх.

      Вот такой эффект я и ищу.

      И затем граница, я собираюсь изменить цвет границы с основного на дополнительный.

      А затем тень коробки.

      Я просто увеличу интенсивность, непрозрачность Итак, с открытого один на открытый три, два.

      Хорошо, я сохраню это, перейдите в раздел «О программе».

      Вот оно.

      Итак, теперь у нас есть граница вокруг вас, только она становится зеленой.

      Итак, ниже этого, ниже наведения.

      Мы собираемся сделать текст вершины, ладно, заполнение.

      Padding 1.5 REM Теперь мы собираемся сделать display flex, display to flex.

      И затем мы также изменим направление на столбец.

      Итак, теперь мы будем искать крупный текст.

      Итак, левый текст, я просто изменю размер шрифта на три REM, вес шрифта на 700.

      И затем мы также изменим цвет, цвет Тува, вторичный цвет Саундра.

      Хорошо, теперь мы нацелимся на мелкий текст.

      Для этого небольшого текста у меня будет отступ слева от трех REM через ОЗУ, а затем, когда положение относительно, а затем преобразование текста, преобразование текста в верхний регистр, поэтому я хотел, чтобы текст был в верхнем регистре.

      И затем, когда размер шрифта 1.2 REM, цвет будет серым.

      И затем поздний интервал между буквами, интервал между буквами, я хочу, чтобы они были два пикселя, а затем в конце я собираюсь дать ему перед псевдоэлементом.

      Это будет небольшая очередь.

      Хорошо, абсолютный человек, я просто вставлю код для этого.

      Итак, содержимое пустой строки person абсолютный левый ноль, верхние 250 пикселей с двумя RAM, верхние два пикселя, я собираюсь сохранить это.

      Итак, вот оно.

      Итак, это псевдоэлемент before, буквальная строка здесь, я проверю это.

      Вот оно.

      Итак, это сетка, в которой у нас есть два столбца.

      Итак, нам нужны еще три объекта.

      Чтобы у нас было четыре штуки.

      Таким образом, вы можете клонировать эти элементы сетки здесь, вы можете об элементе, вы можете клонировать это еще три раза 123, безопасно, а затем просто изменить данные на любые данные, соответствующие вашим потребностям.

      Вот оно.

      Теперь у нас больше предметов.

      Для меня, чтобы изменить каждый элемент здесь, я не собираюсь этого делать, я просто вставлю элементы, которые я уже изменил данные.

      Поэтому я не хочу тратить ваше время на изменение информации об этих предметах.

      Я просто вставлю все элементы, для которых уже есть данные.

      Итак, идея о том, чтобы как бы уже передать данные.

      Итак, теперь пойдем налево.

      Хорошо, так это правильно.

      А что делать потом в сумерках.

      Примерно так осталось, просто там не так много.

      Итак, мы собираемся сделать заполнение, верно? Заполнение, правильно, это будет from, а затем один тег в теге p, высота строки.

      Итак, высота строки для этого тега p, я собираюсь установить ее равной двум REM Azhar, а затем мы собираемся сделать заполнение сверху и снизу, это будет наша RAM или RAM, а затем цвет будет быть серым.

      Хорошо, а потом я скажу вам, что h5 просто переводит текст в верхний регистр, h5 и затем контейнер кнопки.

      Собственно Должен ли я вам сказать контейнер, кнопка просто сохранить все должно быть хорошо уже.

      Вот оно.

      Так что все выглядит красиво.

      Мы около.

      Итак, теперь нам просто нужно добавить больше, больше материала ниже.

      Итак, у нас есть индикаторы выполнения на временной шкале.

      Давайте так и сделаем.

      Сейчас.

      Итак, давайте перейдем к HTML.

      Я собираюсь свернуть контейнер about Я собираюсь свернуть это.

      Итак, теперь я просто хочу добавить статистику, сначала я займусь статистикой, все в порядке.

      Итак, здесь статистика автобуса ничего особенного здесь ничего особенного не происходит.

      Просто h5 Видя мои навыки.

      И затем, когда я создаю класс, который называется индикаторами выполнения, блок div, программа, индикаторы выполнения, а затем еще один блок под названием progress.

      Бар.

      Индикатор прогресса.

      Итак, это другой класс.

      Там у нас есть заголовок P.

      Прогресс.

      Название.

      Итак, это заголовок прогресса P, я собираюсь сказать HTML пять для этого.

      Хорошо.

      А ниже этого у нас будет контейнер прогресса.

      Итак, мы собираемся получить текст прогресса, P делает Frog, frog text.

      Итак, это текст, это будет 80% или 90, это зависит от вас, что угодно, с любым процентом вашего мастерства.

      Так что в этом случае я могу просто сказать, может быть, 90%.

      Это как тэг p.

      А затем, ниже, у меня будет кластерный прогресс.

      Итак, это фактический индикатор выполнения.

      И затем в этом всякий раз, и тогда класс для этого плана будет на самом деле M L.

      Итак, это элемент индикатора выполнения.

      Мы можем дублировать это столько раз, в зависимости от того, сколько индикаторов выполнения вы хотите сделать.

      Итак, теперь давайте просто перейдем к стилям.

      Итак, о контейнере.

      После этого я просто скажу многоточие о статистике.

      Выше стат.

      Итак, я просто собираюсь сделать отступ внизу форума, я хочу немного пробела, я скажу прогресс.

      Индикаторы выполнения.

      Итак, я просто собираюсь сделать сетку отображения, мы сделали это со столбцами.

      А затем, ниже, я собираюсь переключить индикатор выполнения вот так.

      Здесь я просто собираюсь отображать, сгибать, сгибать направление к столбцу Хорошо, я хочу, чтобы они были один за другим.

      Вот что мы используем в столбце, а затем я выберу название прогресса, название препарата.

      Здесь я просто собираюсь дать это, вы знаете, преобразование текста, преобразование текста в верхний регистр, поэтому я собираюсь перевести его в вес шрифта в верхнем регистре, я поставлю его пять сотен. Хорошо, поэтому после заголовка прогресса, Я собираюсь сказать, что контейнер прогресса прогресса, класс значков прогресса отображает элементы гибкого выравнивания по центру, поэтому там у нас есть текст подсказки или текст программы, поэтому текст никогда не бывает просто отличным цветом.

      Хорошо, теперь давайте сохраним и посмотрим, что у нас есть.

      Итак, вот здесь рядом с этим текстом есть индикатор выполнения.

      Итак, здесь чего-то не хватает, мои навыки. Ладно, ничего не упущено, вам просто нужно остановить этот h5. Итак, теперь нам просто нужно позволить мне проверить заголовок статистики h5.

      А, ладно, так у нас класс был, что за название для h5, я бы сказал крахмал.

      Тугой крахмал.

      Ладно, его там нет.

      Хотя мы должны начать это позже.

      Итак, теперь нам нужно сделать индикатор выполнения.

      Итак, если текст прогресса после этого у нас есть прогресс.

      Таким образом, фактический прогресс, я бы сказал, ширина с одним или 2%.

      Итак, для этой высоты это будет точка четыре, для этой высоты пять, а затем цвет фона.

      Я собираюсь поставить относительную позицию, потому что сохраните это Хорошо, давайте посмотрим, что у нас получится.

      Вот оно.

      Это наш индикатор выполнения.

      Но нам тоже нужно что-то внутри, чтобы показывать прогресс, реальный прогресс.

      Итак, вот как у нас есть этот интервал внутри этого внутри прогресса.

      Таким образом, span будет отвечать за заполнение ширины.

      Итак, этот Пан будет человеком абсолюта.

      Вот почему здесь мы сделали относительные проценты.

      Значит, слева и сверху будет ноль, а высота будет равна 100%.

      Хорошо, тогда фоновый цвет будет вторичным зеленым.

      Но если я выставлю здесь ширину, скажем, может быть с 60% Как видите, есть.

      Но если я хочу создать здесь больше элементов, если я увижу индикатор выполнения, я скажу 12345, я сохраню, когда пойду, как видите, все они имеют одинаковую ширину, я хочу их иметь разную ширину в зависимости от, возможно, другого языка программирования или чего-то еще, другую ширину.

      Итак, чтобы сделать это, нам нужно дать каждому отдельному индикатору выполнения, я собираюсь повторить эту отмену.

      Итак, вы видите эту панораму, это класс HTML.

      Итак, какой бы язык вы ни создавали, присвойте ему соответствующий класс.

      И затем после этого панорамирования, а затем вы нацеливаете каждый отдельный язык и назначаете ему разную ширину в соответствии с любыми данными, которые вы хотите.

      Значит в данном случае 90%.

      Хорошо, теперь он будет в безопасности, потому что я не сохранил.

      Итак, теперь это будет 90%.

      Как видите, это 90.

      И они хотят сделать другой язык программирования, когда я копирую индикатор выполнения.

      Итак, это фактический индикатор выполнения, который мне нужно скопировать несколько раз.

      Мне просто нужно изменить имена классов для диапазона прогресса.

      Итак, этот веер, мне просто нужно изменить имя класса, а затем установить div другой ширины.

      В данном случае я просто вставлю статистику.

      Это работает.

      Я просто вставлю статистику.

      Итак, индикаторы выполнения.

      Вот так вот, теперь я сделал индикаторы выполнения вне камеры.

      Итак, теперь у нас должно быть шесть разных индикаторов выполнения.

      Хорошо, вот.

      Но теперь чего-то не хватает.

      Посмотрите, у этого индикатора выполнения есть разные имена классов.

      Хорошо, я просто скопирую сюда имена классов и дам им другую ширину.

      Итак, мы уже сделали HTML.

      И это будет вставлено в HTML, CSS, JavaScript.

      Так что убедитесь, что ваша ширина, поэтому наше полное имя, так что это должно быть 90%.

      На самом деле, для себя, я поставил HTML 280.

      Ну а остальные классы, решать вам, что с ними делать.

      Как видите, теперь у нас разные индикаторы выполнения.

      Так что это всего лишь вопрос присвоения другого имени класса другому индикатору выполнения, потому что мы используем сетку.

      Итак, каждому индикатору выполнения я могу дать другое имя класса, вы можете сделать столько индикаторов выполнения, сколько захотите.

      Количество не ограничено шестью, ведь это сетка, верно? Таким образом, вы можете делать столько, сколько хотите.

      Сколько хотите.

      Вам решать.

      Хорошо.

      Итак, давайте сделаем этот заголовок здесь.

      Почему мы назвали это название? Я собираюсь свернуть индикаторы выполнения.

      Итак, мы видим то, что ищем.

      Итак, статистика называется.

      Так что на самом деле это название статистики.

      Ладно, значит, этот стул поплотнее.

      Чтобы быть независимым, я хотел быть вне этого контейнера.

      Я просто выйду на улицу.

      Я просто сделаю это здесь.

      Я сказал преобразовать текст в верхний регистр.

      Затем я дам ему размер шрифта 1,4.

      Rem, а затем выровняйте текст, чтобы сказать Enter.

      А потом я займусь дополнением.

      Сверху и снизу будет 3,5 3,5, слева, слева и справа зомби ноль.

      А потом положение относительно.

      Потому что я хочу создать перед этим элемент внутри него.

      Итак, я скажу раньше.

      Итак, вы знаете упражнение.

      Прежде чем мы сделали это раньше, я собираюсь сказать содержание, установить содержание в пустую строку.

      И затем слева, я просто собираюсь установить некоторые свойства здесь, слева 50%, вверху 0% Когда я задам фоновый цвет серого, а затем я собираюсь центрировать его по оси X.

      Итак, я говорю, трансформируйте, переведите X, а затем минус 50%.

      , чтобы отцентрировать это по оси X, хорошо, теперь я собираюсь перейти к Хорошо, так что теперь мы назвали мой навык.

      Хорошо, но нам нужна их граница.

      На самом деле, я думаю, нам нужна граница.

      Таким образом, мы можем дать этому заголовку, может быть, верхнюю границу границы или что-то в этом роде.

      Не знаю.

      Ага, сделаем границу.

      Я думаю, что это лучший способ сделать это на самом деле не граница.

      Итак, это раньше, поэтому за это отвечает элемент.

      содержание.

      Итак, нам просто нужно указать ширину с процентом абсолютных значений, позвольте мне проверить, почему он не отображается.

      Проверка перед псевдоэлементами.

      говорит, есть ли трансформация Translate X? Осталось 50% Знаешь почему О это высота? цвет кости.

      Я думаю, что с одним большим цветом что-то не так.

      Фон Нет, пустая строка неподвижного содержимого не отображается.

      Родственник человека понятия не имеет, почему он не отображается.

      Снова все сохранить.

      Я проверю.

      Это интересно.

      Попробую изменить цвет фона.

      Тем не менее, это не работает.

      Кажется, я где-то сделал что-то не так.

      А перед этим проверьте свое имя.

      Начните плотнее.

      Я просто пытаюсь понять, почему дайте мне посмотреть, есть ли у меня эта переменная.

      Верно? Это здесь.

      Ладно, займемся чем-нибудь другим.

      Я разберусь Я потом разберусь, что происходит.

      Почему не работает.

      Давайте займемся чем-нибудь еще.

      Итак, теперь нам нужно сделать временную шкалу.

      Так что я хотел поставить здесь строку в заголовке, но по какой-то причине она не отображается.

      Попробую разобраться почему.

      В дальнейшем не отображается.

      Давайте сосредоточимся на программе.

      Вот я и рухну.

      Итак, теперь нам нужно сделать временную шкалу.

      Для временной шкалы.

      Я просто скажу точечная шкала времени.

      Итак, для временной шкалы мы просто собираемся сделать сетку.

      То же самое, что и то, что мы делали.

      Итак, это будет сетка, и у нас будет два столбца сетки.

      Итак, у нас будет временная шкала, элемент временной шкалы.

      Итак, это элемент сетки.

      Итак, элемент временной шкалы.

      Итак, каждый раз, когда я делаю элемент временной шкалы и когда, скажем, значок временной шкалы с точками, у нас также будет значок.

      И тогда иконка будет похожа на иконку портфеля.

      Я собираюсь вытащить, что вы можете перейти в папку Summon, найти любую иконку, которую вы ищете.

      И затем P точек на шкале времени, чтобы порционировать.

      И затем здесь вы можете указать продолжительность, когда вы начали работать в компании и прочее, бла, бла, бла.

      А потом у нас будет h пять с пролетом внутри.

      А потом абзац с каким-то случайным, исправленным текстом.

      Хорошо, все.

      Вот и все для элемента временной шкалы.

      Вот и все.

      Хорошо, нам просто нужно добавить заголовок над временной шкалой.

      Здесь.

      Можно просто сказать, моя хронология.

      Ладно, давай сохраним.

      Посмотрим, что у нас получилось.

      Вот оно.

      Итак, моя временная шкала, поэтому нам просто нужно определить элемент, чтобы сделать сетку для этого конечного элемента.

      Хорошо.

      Итак, для этого нам просто нужно перейти к стилям.

      Главное здесь, я просто скажу временную шкалу.

      Итак, точка на временной шкале.

      И когда я говорю отображать сетку для столбцов, мы делали это, так что я потрачу ваше время на переписывание.

      А потом я скажу точки на временной шкале, элемент временной шкалы.

      Итак, для терминала элемент, я бы сказал, для удобства, потому что я собираюсь выделить значок, код слева, отступ слева будет три REM, слева три rem, а затем граница из одного граница пикселя слева.

      Итак, я дам вам границу слева от одного пикселя серого цвета пять, а затем я переключу значок на отдельный значок, фактический значок, и я скажу процент от абсолютного.

      И затем я собираюсь сказать, что слева минус 27 пикселей, вы можете поиграть с этим значением, чтобы найти то значение, которое вам подходит.

      Ладно, я сохраню, просто покажу, что я имею в виду.

      Итак, я собираюсь я проверю.

      Итак, это иконка T, ладно, я еще не сохранил.

      Итак, иконка Итак, вот наша иконка, хорошо, так что вы можете как бы поиграть с этим значением левое левое значение, чтобы увидеть все, что вам нужно.

      Таким образом, минус 27 был значением, которое я нашел лучшим.

      Итак, я скажу ноль, а затем я скажу дать ему строительный цвет вторичного, а затем я хотел, чтобы он был закруглен, поэтому ширина и высота должны быть одинаковыми, чтобы он был закруглен, а затем радиус границы 50 % убедитесь, что он округлен.

      Итак, поэтому я сделал ширину и высоту одинаковыми.

      Вот оно.

      Итак, мы просто хотим установить этот значок с помощью flex.

      Итак, отображайте элементы с гибким выравниванием и просто для содержимого, чтобы центрировать значок по центру. Хорошо, а затем я просто набрал сам значок, а затем присвоил ему размер шрифта 1,3 Ram немного больше.

      Хорошо, вот и все, иконка должна выглядеть красиво.

      Вот оно.

      Итак, теперь нам просто нужно стилизовать этот текст и заголовок.

      Хорошо, так что после этого я просто собираюсь оценить продолжительность, чтобы показать, что все в порядке.

      Таким образом, для продолжительности, когда я задаю отступ и цвет, отступы сверху и снизу будут указывать на раму влево и вправо, шесть ОЗУ, а затем радиус границы будет составлять 15 пикселей.

      Я хочу, чтобы он был округлен, а затем отображался как встроенный блок.

      Хорошо, а затем размер шрифта, который я хочу уменьшить.

      размер шрифта будет равен восьми десятых ОЗУ, а затем мы собираемся преобразовать текст в верхний регистр, в верхний регистр, а затем мы просто изменим вес шрифта на 500 с чем-то, вы знаете, толще.

      Давайте теперь просто все сохраним.

      Итак, у нас есть элемент значка временной шкалы, я имею в виду, хорошо, поэтому нам просто нужно сделать заголовок в абзаце.

      Итак, после определенной продолжительности есть h5.

      Итак, их пять, есть только множество стилей, отступы, преобразование текста в размер шрифта, просто стандартные вещи.

      Ладно, чувак, я скажу тебе диапазон внутри, а затем дам ему цвет, толщину шрифта и размер шрифта, просто стандартные нормальные вещи.

      Хорошо, после f5, я скажу вам абзац, я закрашу его серым цветом, используя переменный цвет.

      Серый, чтобы изменить цвет зеленого номера два для абзаца.

      Итак, я снова пойду.

      Итак, все красиво оформлено.

      Итак, теперь нам просто нужно продублировать это несколько раз, а затем изменить значения.

      Итак, что вам нужно сделать, вернитесь назад, а затем перейдите к определению элемента, необходимого для дублирования фактического элемента строки термина, потому что мы сделали эту сетку отображения на этой временной шкале, две колонки.

      Итак, нам просто нужно продублировать для продвижения элементов сетки 12345.

      И затем вам просто нужно изменить данные на то, что вам нужно.

      Хорошо, в этом случае я также собираюсь снова вставить некоторые значения, потому что я не хочу тратить ваше время на изменение этих значений снова и снова.

      Таким образом, вы можете установить любые значения, какие захотите.

      Итак, Верити, так что для меня я изменил все данные или просто сделал случайным образом.

      Чтобы это выглядело, знаете ли, несколько случайно.

      Хорошо, что касается линии, мы вернемся к ней позже, потому что я не знаю, что показать.

      Да, думаю, я пока отдохну.

      Увидимся на следующем сеансе.

      Итак, пришло время поработать над страницей портфолио.

      Так что это будет очень быстро и легко.

      Это как сетка.

      Итак, давайте перейдем к разделу портфолио.

      Итак, в этом разделе мы поместим несколько элементов сетки.

      Итак, в основном, вы собираетесь поставить заголовок, мы повторно используем заголовок, который мы уже создали.

      А тут просто поставь, поменяй название на моё портфолио просто скопировал название, откуда мы это делали раньше.

      А потом, да, вставьте его туда.

      Итак, мой портфель с названием.

      А потом, когда я захожу на страницу портфолио, вы можете увидеть название моего портфолио.

      Вот оно.

      Итак, теперь займемся содержанием.

      Итак, я хочу, чтобы здесь был абзац, P с классом портфолио, текст, просто поместите какой-нибудь текст в абзац, например случайный текст.

      Хорошо, в данном случае я просто вставлю случайный текст.

      Так я и говорю, точки, что? Что Фолео-фолио, что-то в этом роде.

      И затем здесь, мы будем говорить о пункте портфолио.

      Итак, в элементе портфолио у нас будет изображение к его изображению.

      И затем IMG, имиджевое портфолио одно.

      Итак, у нас есть портфолио до семи изображений.

      И затем под ним, под изображением, будут элементы с точками при наведении.

      Итак, когда у меня есть элемент портфолио, я хочу отображать ссылки, по которым вы можете скачать проект, если хотите, если пользователь захочет.

      Итак, я собираюсь поставить h4.

      Я хочу сказать, источник проекта.

      Итак, источник проекта, например, исходный код или что-то в этом роде, возможно, ваши ссылки на GitHub.

      Хорошо, ниже у меня будет класс с иконками, иконками.

      Итак, здесь у меня будет якорный тег для ссылки.

      Таким образом, каждая ссылка ведет на любой веб-сайт, на который вы хотите.

      Например, если я скажу, что WWE занимается google.com, то я скажу «Цель, цель».

      А когда я ставлю цель на пустую, так это значит открыть новую страницу.

      Итак, если цель близка к пустой, она откроет новую страницу.

      А потом я просто добавлю иконку.

      Итак, вы можете поставить столько значков, сколько захотите.

      В этом случае я собираюсь использовать GitHub.

      Хочу сделать GitHub, YouTube.

      Хорошо, GitHub, YouTube и GitHub выпускают Behance.

      Это значки, которые я буду использовать.

      Итак, теперь у нас есть один элемент сетки.

      Итак, нам нужно шесть элементов сетки или больше, как бы там ни было, решать вам.

      Итак, у нас будет сетка с тремя столбцами.

      Потому что, как только у вас будет три элемента, активируемых сеткой, в строке, хорошо, так что давайте перейдем к стилям, я собираюсь сказать, поместите фолио, чтобы это было по-моему, я собираюсь начать делать портфолио.

      Так что я буду говорить точечные тексты портфолио.

      Поместите текст портфолио text, я собираюсь дать ему отступы, отступы сверху и снизу будут таранить левый и правый ноль.

      А затем выравнивание текста.

      выравнивание текста, оно будет по центру.

      И затем, после этого, я нацелюсь на фолианты портфолио в контейнере.

      А потом я сделаю сетку отображения.

      Мы делали это в течение веков столбцы шаблона сетки.

      Затем мы собираемся сделать повторы, а затем я добавлю один fr Итак, у нас будет три столбца, а затем расстояние сетки между элементами сетки.

      Итак, как обычно, будет два REM.

      И затем я собираюсь рассказать вам о максимальной марже. Я собираюсь дать ей маржинальную верхнюю тройку ОЗУ, а затем я пошел делать, чтобы поместить элемент фолио в фактический отдельный элемент, элемент портфеля, и мы будем делать относительное процентное соотношение. а затем я собираюсь пометить изображение внутри как элемент портфолио, и мы дадим ему ширину 40%, хорошо, высоту 300 пикселей, а затем я собираюсь сделать объект подходящим для покрытия, а затем какой радиус, но скорость будет 15 пикселей 15 пикселей, хорошо? А затем, под этим изображением, я собираюсь сказать точки, наведите курсор на элементы, наведите элементы. Хорошо, так что на самом деле, прежде чем я это сделаю, я только что сохранил сохранить сохранить сохранить сохранить Хорошо, вот оно.

      Выглядит красиво.

      Говорит хорошо выглядит.

      Итак, изображение, нам просто нужно продолжать, радиус границы по некоторым причинам не применили радиус границы 15 пикселей, нам также нужно поставить, я думаю, вам нужно поместить это также на сам элемент, убеждение, что это не работает, позвольте мне проверить это для радиуса, кажется, не работает, переупорядочить ли Радиус границы хорошо, мы исправим это позже.

      Итак, теперь о предметах.

      Элемент портфолио, позвольте мне еще раз проверить название класса.

      Так что убедитесь, что имена классов Хорошо, это нормально.

      Есть предметы с 1 или 2% Правильный 1 или 2%.

      Цвет фона будет основным, а позиция будет абсолютной.

      Итак, когда у нас есть ОК, это еще не показывает.

      Хорошо.

      радиус границы, который также будет отправлен.

      Радиус границы 15 пикселей.

      Итак, у них есть элементы, расположенные относительно друг друга.

      Позвольте мне еще раз проверить.

      Inspect О, это есть предмет или это так? Итак, вот наш предмет, вот этот, вот этот зеленый цвет здесь.

      Итак, мы собираемся сосредоточить весь этот контент здесь, в центре.

      Итак, вы уже знаете, как это сделать, мы собираемся использовать flex, flex align items to center и flex direction to column.

      Хорошо, вот так.

      А потом посмотрим, что у нас получится.

      Идет загрузка.

      Идет компиляция стилей.

      Иногда он так делает.

      Итак, все элементы выровнены.

      Итак, теперь нам просто нужно стилизовать отдельные значки.

      Хорошо.

      Итак, чтобы сделать это, я начну с h4, заголовок h4 внутри там внутри, и просто хочу увеличить размер шрифта и придать ему цвет на полях.

      Таким образом, у первого будет 1,5 ОЗУ, а у нижнего края 1,5 ОЗУ.

      Хорошо, а затем после этого, после трех, нацельтесь на значки, я хочу сказать, что хочу, я хочу выровнять элементы, как все дисплеи, по центру.

      А потом иконка, индивидуальная иконка, я хочу придать ей основной цвет фона.

      Таким образом, ширина и высота должны быть одинаковыми, чтобы мы могли округлить две меры радиуса границы округления, 50%, ширина и высота должны быть одинаковыми.

      Таким образом, какую бы ширину и высоту вы ни указали, сетка была одинаковой для нас, чтобы убедиться, что значки красиво округлены.

      Вот, например, значки вокруг него, поэтому нам просто нужно центрировать это посередине с помощью Flex.

      Итак, вы должны сделать это, а затем мы собираемся дать ему поле слева и справа, чтобы мы могли разместить их.

      И тогда случай, это будет указатель, и затем мы собираемся сделать преобразование.

      Переход, то есть переход, буква Z для этого.

      Итак, вот оно.

      Итак, мы можем захотеть изменить размер шрифта этого значка, этих значков, поэтому я собираюсь нацелиться на глаз.

      Таким образом, вы можете вставить значок и все, что я изменю размер шрифта и цвет на белый, а затем дать поля слева и справа.

      Один, вот так.

      Итак, когда у нас будет этот значок, я скажу конец.

      Однако то, что мы хотим, чтобы произошло, когда я просто хочу изменить цвет фона значка, а фактический значок я помечаю, хорошо, так что это просто цвет.

      Итак, посмотрим.

      Теперь он меняет цвет.

      Итак, я не хочу отображать это по умолчанию, хорошо, я хочу отображать это только тогда, когда у меня есть этот элемент сетки.

      Так что и здесь я собираюсь избавиться от этого, чтобы избавиться от него.

      Итак, чтобы избавиться от этого, я скажу, что я скажу, иди на три, я дам пастору ноль, непрозрачность, ноль, это означает, что мне нравится прятаться, стоять там, заботясь о делимости, кто пастор ноль.

      И затем я также собираюсь сделать нулевой масштаб, Преобразовать, трансформировать, масштабировать, ноль.

      Хорошо.

      А затем давайте также сделаем переход, тот, который мы использовали.

      Итак, я хочу иметь элемент сетки.

      Я хочу вернуть эти два значения по умолчанию, непрозрачность и масштаб.

      Хорошо, для этого я просто прокрутю вниз.

      Я просто скажу, здесь снаружи, я просто скажу портфель.

      Элемент портфеля.

      Хорошо, зависаю.

      Итак, когда у меня есть элемент портфолио, это элемент сетки.

      И затем я скажу, что у точек есть элементы на непрозрачности, и мы установим это на один масштаб и на один.

      Ладно, посмотрим, что у нас получилось.

      Итак, когда он у меня есть, он отображается, но мне просто нужно исправить это изображение.

      Проблема с изображением Я не знаю, почему это не работает, позвольте мне просто проверить изображение.

      Изображение отправлено Uber высотой 30 пикселей.

      Итак, это родитель изображения, а затем само изображение, я собираюсь установить высоту самого изображения на 100%.

      Происходит что-то подозрительное.

      Если вы не установите объект высоты, подходящий, о, он содержится, он должен быть укрытием, умной ошибкой или автономным, содержащимся объектом, подходящим для предполагаемого покрытия.

      Таким образом, он покроет весь элемент сетки.

      Хорошо, теперь он покрывает весь элемент сетки.

      Итак, все работает как положено.

      Теперь нам нужно просто продублировать эти элементы портфолио.

      Хорошо, мы можем продублировать их, вы также можете анимировать вращение, но я не буду этого делать в этом видео.

      Итак, давайте перейдем к HTML.

      Итак, если мы сделали отображение сетки, сетки, мы отображаем три, три столбца.

      Сейчас я просто продублирую и изменю значения.

      Итак, у нас есть изображения портфолио, так что изображение может измениться из портфолио 123445, вы можете использовать свои собственные изображения, если хотите.

      Итак, вам просто нужно изменить значения.

      Итак, элемент портфолио, я собираюсь свернуть элемент портфолио.

      И затем я просто скопирую это несколько раз 12345 Столько раз, сколько вы хотите, сохраните, а затем вернитесь назад, надеюсь, у нас должно быть больше портфолио, а затем вам просто нужно изменить эти изображения, как Что ж.

      Хорошо, так что да, я оставлю все остальное на ваше усмотрение.

      Элемент портфеля.

      Хорошо, я просто распаковываю эти портфели.

      Итак, я вставил дату изменения данных.

      Итак, я изменил все изображения.

      Так что вам просто нужно сделать то же самое, что и вам просто нужно изменить на свои собственные изображения по своему вкусу.

      Итак, я изменил изображения.

      Итак, теперь да, давайте перейдем к следующему разделу, если вы помните это раньше, поэтому элемент не показывался, потому что я забыл что-то сделать, когда я ожидал, что забыл сделать процент абсолютного значения для первого элемента.

      Убедитесь, что вы указали абсолютную позицию, и тогда она будет отображаться где-то внизу.

      Вот оно.

      Так что идти по ступенькам начинает плотнее.

      плотнее, а затем содержание здесь в позиции абсолютной.

      Надеюсь, теперь линия должна появиться.

      Итак, теперь мы должны когда-нибудь выровняться.

      Вот это линия здесь.

      Хорошо.

      Вот и все портфели.

      Теперь давайте перейдем к блокам, блоки чем-то похожи на портфолио, потому что это отличный Ажар, который будет, у него будет три, три столбца.

      Итак, нам просто нужно также перейти к блогам, портфолио, я собираюсь свернуть это.

      И когда я перейду к блогам, я скажу точечные блоги, контент-контент, похожий на родительский, основной родительский контейнер.

      Итак, я собираюсь вставить заголовок, а затем заголовок, просто изменить его на мой блог.

      Итак, мы уже создавали этот заголовок.

      Итак, это внутри заголовка, это то место, где на самом деле находится раздел about, здесь мы впервые создали этот заголовок.

      Так что просто скопируйте название main title.

      Мы уже начали это без этого названия.

      Так что вам просто нужно изменить текст.

      Итак, надеюсь, у нас должно быть основное название в разделе блога.

      Вот оно.

      Мои блоги.

      Итак, у нас есть основной заголовок.

      Это как раздел блога.

      Итак, теперь, после заголовка, я просто буду делать точечные блоги.

      Итак, в блогах я буду вести блоги, там я буду вести все блоги.

      Итак, в блогах я поставлю точку, чтобы не блокировать каждый отдельный блог.

      Итак, блог — отличная штука.

      Я собираюсь продублировать это несколько раз, чтобы создать несколько элементов сетки.

      Итак, блог, у меня будет изображение img, я скажу блог один.

      Итак, вы можете установить любое изображение, которое хотите использовать.

      Итак, после этого я собираюсь вести точечный блог, текст.

      А потом у меня будет h5.

      Вы можете поместить любой текст, который вы хотите, все, что вы хотите.

      И затем, после этого, у нас будет абзац со случайным текстом, вот так.

      Хорошо, это все для пункта блога, нам просто нужно начать это, в этом нет ничего особенного, нам просто нужно начать это, а затем мы можем перейти к следующему разделу.

      Итак, нам просто нужно перейти к стилям и начать работу с блогами.

      Итак, портфолио, портфолио, а потом сюда, как раз собираюсь делать раздел блогов.

      Итак, здесь мы можем делать точки, блоги.

      Итак, блог будет отображаться в виде сетки.

      Итак, это родитель каждого отдельного блога, сетка.

      Здесь у нас будет три столбца.

      Итак, стандартные вещи, которые мы делали раньше, а затем каждый отдельный блог, у нас будет относительный процент.

      Затем цвет фона будет серый пять.

      И мы собираемся задать радиус границы в пять пикселей, чтобы углы были скруглены.

      И затем мы придадим ему тень блока, вы можете использовать переменную или можете использовать эту.

      Итак, один пиксель, один пиксель, один пиксель по Y, один пиксель по x и затем 20 пикселей для размытия.

      Хорошо, а затем, когда у нас будет этот пункт в блоге, что мы хотим сделать? Итак, когда у нас есть одно изображение, которое должно как бы выскочить из синего контейнера, я на самом деле также собираюсь увеличить тень блока или скопировать эту тень блока, вставить.

      А потом я просто увеличу непрозрачность тени коробки с точки один до точки три.

      И затем, после этого, я также собираюсь преобразовать это, а затем перевести, почему я хотел, чтобы блог немного поднялся на высоту, так что минус 50 пикселей, я хотел подняться на минус 55 пикселей.

      А потом я собираюсь применить переход.

      Итак, тот, который мы использовали, а затем внутри, внутри этого мы также собираемся целевое изображение.

      Итак, фильтр изображения, фильтр, я собираюсь сделать оттенки серого, я собираюсь сделать ноль.

      Ладно, а что тогда делать трансформировать, переводить, собственно, масштаб учитесь масштабировать изображение.

      Я хочу, чтобы он был больше.

      Так по 1.1.

      Таким образом, изображение в нормальном масштабе равно единице, поэтому я хочу, чтобы оно было немного больше на единицу.

      Хорошо, значит 10 больше на 10%.

      Не знаю.

      Да.

      10%.

      Хорошо, а потом еще и боксера сделаем.

      Мы собираемся сделать боксера для изображения.

      Итак, главный боксер находится на оси Y, что составляет четыре пикселя.

      Итак, мы хотели показать много теней по оси Y.

      Хорошо.

      Итак, давайте сохраним и посмотрим, что у нас получилось.

      Когда захожу в раздел блога кажется где-то глюк.

      Да, глюк.

      Я не знаю, что случилось.

      Заглушки.

      Я освежу это.

      Я не знаю, почему он глючит.

      Хорошо, вилки.

      Странно.

      Позвольте мне еще раз проверить имена классов.

      Блоги.

      Элемент блога.

      Упс, плюс контент.

      Я не знаю, что происходит.

      Хорошо.

      Кажется, я знаю, что происходит.

      Вернуться.

      Проверьте идентификатор класса.

      Итак, ID блогов.

      Класс.

      О, это имя класса совпадает с названием класса нашего блога.

      Так что избавьтесь от этого имени класса неправильно.

      Мы не собираемся его использовать.

      Так что избавься от этого.

      Я не знаю, почему это.

      Это имя класса не повлияло на это.

      Портфель.

      вещь.

      Вы можете избавиться от этих имен классов.

      Мы не будем их использовать.

      Посмотрим, повлияет ли это на что-нибудь.

      Сохраним.

      Да, ничего не изменилось.

      Да, здесь ничего не изменилось.

      Хорошо.

      Да, поэтому мы не использовали эти имена классов здесь.

      Так что просто избавься от них.

      Думаю, мы используем это для имен классов.

      Так что пока оставьте это.

      Если это влияет на это, или если это влияет на что-то, значит, мы повышаем класс, просто избавься от этого.

      Ладно, теперь без глюков.

      Вот оно.

      Таким образом, изображение как бы выскакивает из элемента сетки, например, бум, бум, но нам нужно сделать его плавным переходом.

      Для этого вернемся к стилям.

      Итак, после того, как мы закончили с наведением, нам нужно теперь стилизовать изображение или вид наведения.

      Итак, я собираюсь сделать изображение со 100%.

      И затем я собираюсь сделать высоту 300 пикселей.

      А потом я подгоню объект.

      Объект подходит от крышки к крышке и что дальше делать, я хочу дать вам, как углы наверху, вверху справа и вверху слева была граница, радиус сверху, сверху.

      Радиус границы, верх.

      Радиус.

      Ну, радиус вверху, вверху слева, так что вверху слева будут змеи вверху слева, просто дайте пять пикселей.

      И затем мы собираемся сделать пять верхних пикселей справа.

      Итак, давайте сохраним и посмотрим, что у нас есть.

      Итак, у нас есть верхняя граница, верхняя правая и левая.

      Вот оно.

      Итак, теперь нам просто нужно указать переход и задать фильтр.

      Итак, когда у нас есть фильтр.

      Нам нужно воздействовать на фильтр прямо сейчас, так что будущее одно из настоящего.

      Итак, здесь мы сказали, что фильтр в градациях серого равен нулю, а затем у него вроде один или 2%, а затем переход сделать медленный переход медленно.

      Ой.

      Итак, переход будет медленным.

      Итак, оттенки серого.

      Хорошо, когда у нас есть, он будет идти до одного или двух до нуля.

      Таким образом, по умолчанию оттенки серого составляют 1%.

      Когда у вас есть шкала серого, она становится равной нулю, то есть черно-белой.

      Ладно, так изображение вроде как выскакивает.

      Итак, после изображения я собираюсь вести блог.

      Текст.

      Итак, для блочного текста я назначу ему поле margin top, на самом деле margin top.

      Итак, для верхнего поля я уберу минус семь пикселей.

      Таким образом, вы можете поиграть с этим значением, мы можем попытаться найти любое значение, которое вы считаете подходящим.

      Но для этого я в порядке, как семь пикселей минус семь пикселей, чтобы получить хорошее значение.

      И затем я собираюсь сделать отступ сверху и снизу, чтобы было 1,1 REM.

      На самом деле прокладка, нет верха и низа вокруг всего.

      Итак, я хочу заблокировать заполнение текстур для 4.1 Ram.

      Позвольте мне показать вам, что я имею в виду.

      Итак, как вы видите здесь, вокруг текста есть пробелы.

      Итак, это заполнение 1.1 Ram.

      Хорошо, вот и все.

      Итак, теперь давайте, я просто сделаю границу.

      Бордюр сверху.

      Хорошо.

      Итак, я собираюсь сделать вот такой топ, он в пикселях.

      Итак, это граница.

      Итак, всякий раз, когда граница закрывается, потому что это эффект, который мы ищем.

      А тут вроде приятная тень.

      Хорошо, кажется, что когда тени по оси X слишком много, я мог бы избавиться от этого.

      тень блока X, Y четыре пикселя.

      Итак, на оси X я собираюсь обнулить ось X или что-нибудь на оси X.

      Хорошо, поскольку вы не вносили никаких изменений, но вы всегда можете уменьшить размытие.

      Может быть, до 15.

      Хорошо, мы можем просто размыть до 15 Да, я думаю, это выглядит хорошо.

      Итак, теперь давайте скажем текст.

      Итак, теперь в блоке, блоки текста и мы привязаны к h5.

      Я просто поменяю шрифт и цвет.

      Итак, шрифт, а затем, когда у нас есть, когда у нас есть, я собираюсь установить зеленый цвет. Так что это просто цвет, цвет вторичен.

      Хорошо, вот так.

      И затем, после края денежного абзаца, я также собираюсь установить цвет.

      Цвет на серый, тоже серый, а потом дайте высоту линии.

      Итак интервал строк в ОЗУ.

      И затем мы также собираемся заполнить нижнюю часть нашей оперативной памяти.

      Так что просто немного отступа.

      Итак, давайте сохраним.

      Итак, это наш блог, он полностью оформлен.

      Итак, что мы делаем, все, что нам нужно сделать сейчас, это просто заполнить элементы блога.

      Хорошо.

      Чтобы сделать это, мы делали это всегда.

      Итак, нам просто нужно получить этот элемент сетки и заполнить его несколько раз для любого количества блогов, которые вы ищете.

      В этом случае я просто поставлю их несколько раз и изменю значения и изображения на любые значения, которые соответствуют вашим потребностям.

      Так что просто заполните это несколько раз и измените значения.

      Хорошо.

      А потом я просто поставлю свои собственные значения, я не трачу ваше время на это на экране.

      Итак, я сделал это сейчас.

      Вот оно.

      Итак, теперь у меня есть другой контент для элементов блога.

      Хорошо, да, это все для блога.

      Давайте теперь перейдем к контактам.

      Так же, как и секция контактов, у нас будет две секции слева и справа, потому что мы собираемся вводить некоторые данные.

      Хорошо.

      Итак, для раздела контактов перейдите сюда.

      А потом мы займемся заголовком.

      Итак, мы, как обычно, поместим заголовок, но сначала я собираюсь сделать контейнер контактов Министерства юстиции.

      А потом я вставлю заголовок.

      Итак, заголовок будет контактным.

      Если вы все еще не знаете, мы сделали этот заголовок с самого начала в заголовке, поэтому мы просто повторно используем этот компонент заголовка снова и снова, просто изменив значения.

      Хорошо, а потом я сделаю точки, контакт, содержимое контакта, контейнер, контейнер содержимого контакта.

      Итак, у нас будут только левые контакты, а затем у нас будут левый и правый контакты.

      Левый и правый контакты слева.

      Это верно.

      Контакты.

      Хорошо.

      Итак, начнем с левых контактов.

      Итак, левые контакты у нас должны быть h5 в абзаце первым.

      Итак, h5 в п.

      Итак, h5 говорит, свяжитесь со мной здесь, а абзац просто случайный абзац.

      Хорошо, а затем, ниже, у нас будет еще одна контактная информация с точками кода div.

      Итак, в контактной информации будет несколько значков, много значков для контактной информации.

      Хорошо, я просто скажу, коснитесь Контакты.

      Товар.

      Хорошо.

      И затем у нас будет иконка, иконка с точками, элемент поведения, а затем у нас будет настоящая иконка.

      Итак, здесь мне нужна иконка местоположения.

      И затем под местоположением я скажу местоположение.

      Хорошо, я сохраню, посмотрим, что у нас есть.

      Итак, когда я иду, он говорит о местоположении, см. здесь значок элемента местоположения.

      Я имею в виду значок элемента местоположения перед текстом местоположения, хорошо, поэтому я хочу, чтобы рядом с ним было несколько значков и текста.

      Итак, чтобы сделать это, нам просто нужно продублировать контакт несколько раз и изменить значки.

      Хорошо.

      Итак, в данном случае, фактически после значка и когда до вашего абзаца.

      И когда я говорю Лондон, Великобритания.

      Итак, мы все еще находимся в пункте контракта.

      Итак, нам просто нужно несколько раз дублировать элемент контракта.

      Хорошо, у нас есть несколько элементов.

      Хорошо, я просто вставлю некоторые элементы контента, я не хочу тратить ваше время на выполнение этих действий на экране.

      Так проведите пункт мимо того, что несколько раз меняйте иконки и меняйте информацию на что хотите.

      Вот оно.

      Вот значки, которые я использую.

      Итак, мы сделали это.

      Теперь приступим к стилям.

      Я собираюсь сказать контакт контакт раздел.

      Итак, давайте начнем с контакта.

      Итак, для контакта мы собираемся сделать display flex, dots, контейнер содержимого контакта.

      Итак, мы собираемся сделать display flex, когда все будет рядом друг с другом.

      Опять же, обивка сверху 3,5 3,5.

      Хорошо, тогда мы сначала нацелимся на левый контент.

      Так что на самом деле остались контакты смертей.

      Контакты.

      Итак, для левых контактов я собираюсь сделать flex to, я хочу, чтобы они были меньше, чем правые.

      Итак, правильный. Я собираюсь установить для этого flex значение 1, чтобы оно покрывало основное пространство.

      Так что теперь это настолько меньше, это потому, что я не поместил содержание на другой.

      Вот почему сейчас это выглядит странно.

      Итак, теперь позвольте мне сначала рассказать о содержании.

      Итак, чтобы мы могли видеть, как продвигаются дела, позвольте мне разместить весь контент, весь контент, который нам нужен.

      Итак, под элементом поведения здесь.

      После этого после контактной информации после контактной информации я собираюсь поставить еще один div.

      Итак, это будут контакты.

      Контакты.

      Контакт, I минус.

      Итак, как только у вас появятся какие-то значки, которые будут вести к социальным сетям, хорошо, так что здесь, я хочу сказать, точечные контакты. 9Значок 0003

      .

      Итак, это значки контактов.

      А то вот это иконка контакта, ладно, вот так.

      И затем мы сделаем якорный тег, который приведет нас к любой платформе WWE dot face book facebook.com, зависит от того, куда вы хотите перейти, просто поместите туда ссылку.

      Хорошо, а потом я вставлю вашу ссылку на Facebook.

      Затем убедитесь, что вы поставили цель на пустое место, если хотите открыть ее на новой вкладке.

      нацелен на пустое место.

      Итак, это иконка Facebook.

      Я вставлю остальные элементы.

      Итак, у нас есть Твиттер и прочее.

      Ладно, с левой стороны все.

      Так что нам просто нужно идти в правую сторону.

      Итак, правая сторона будет иметь форму.

      Когда я говорю форма, к контакту, контактная форма формы вот так.

      Итак, здесь мы просто внесем некоторые данные.

      И всякий раз, когда div вызывает управление вводом, точка ввода, управление, ладно, вот так.

      И тогда у нас будет два входа.

      Первый - это вводимый текст, а затем нам понадобится. Требуется

      , а затем заполнитель для заполнителя будет похож на ваше имя.

      Итак, мы собираемся сделать еще один ввод.

      По порядку можем просто продублировать тот, что у нас есть.

      А второй будет электронной почтой.

      Ваш адрес электронной почты.

      Хорошо, вот так.

      Итак, теперь нам нужно еще раз продублировать этот элемент управления вводом.

      Вообще-то, ни разу.

      Вот, я избавлюсь от электронной почты.

      Здесь я просто скажу В подтипе темы, я не знаю введите, тема, тема и так далее.

      А потом я как раз собираюсь еще и контроль ввода сделать.

      А затем это будет текстовая область, текстовая область.

      И тогда вы можете оставить имя пустым, если хотите.

      А потом столбики, я буду делать 15 и потом 8 рядов.

      Вот так.

      Хорошо, вот и все, нам просто нужна кнопка, кнопка, которую мы создали раньше.

      И когда я вставлю это в a, я поставлю код класса точка отправки btn Я просто вставлю кнопку, которую мы создали ранее.

      Итак, это называется главная кнопка, мы создали нашу кнопку перед посещением несколько раз.

      Я просто сохраню это, чтобы посмотреть, во что мы должны вступить.

      Итак, приступим.

      Вот почему у нас получилось так, что теперь нам просто нужно приступить к стилизации этого материала.

      Итак, переходим к стилям.

      Ладно, так оставил контакты.

      Где точки? Верно? Контакт.

      Хорошо, так что правильный контакт.

      А потом справа, скажу флекс, три.

      Итак, этот гибкий номер два, а этот гибкий номер три.

      Ну вот.

      Так что это занимает больше места.

      Хорошо, согните три, а затем маржу.

      Осталось что-то около трех ОЗУ.

      Хорошо, а затем ниже я собираюсь ввести данные.

      Контроль.

      Управление классом управления вводом.

      Хорошо, я собираюсь сделать поле, верхнее и нижнее поля будут равны 1,5 REM буквально нулю.

      А потом я нацелюсь на входы внутри Окей.

      И делаем границы радиусом в пикселях.

      А потом я собираюсь сделать вес шрифта. Вес шрифта

      наследует семейство шрифтов Eretz одного размера.

      Наследовать, хорошо, а затем я собираюсь сделать отступы, сверху и снизу будет восьмая десятая ОЗУ.

      Слева и справа будет одна точка, в то время как ОЗУ, вы можете изменить эти значения, чтобы поставить значения, которые вы хотите.

      Контуры, их не будет.

      Граница, тоже никому не отдам.

      Но если нет, то нам просто нужно сделать цвет фона, а ширина одного представляет цвет фона и цвет белого.

      А затем измените размер одного, чтобы он был пустым.

      Потому что мы не хотим изменять размер формы и текстуры.

      Итак, я поставлю запятую, а затем и текстовую область в текстовой области, чтобы это говорило нам О, я собираюсь сохранить, сохранить все.

      Посмотрим, что у нас есть.

      Вот оно.

      Хорошо, но я хочу, чтобы ваше имя и адрес электронной почты были рядом друг с другом.

      Итак, я хочу, чтобы они были рядом друг с другом.

      Итак, чтобы сделать это, я собираюсь дать элементу управления вводом этот, другой класс, называемый элементом управления вводом.

      На самом деле, мне просто нравится второй элемент управления вводом.

      Итак, управление вводом два после управления вводом.

      Здесь я скажу, что когда делать display, flex, хорошо, а затем я скажу последний дочерний элемент, последний ввод, последний ввод, я дам ему оставшееся поле.

      запас слева 1,5 от последнего дочернего элемента.

      Ладно, пойдем посмотрим, что у нас есть.

      Вот оно.

      Итак, последний ребенок, у этого останется запас 1,5.

      Вот так все выглядит одинаково.

      Итак, мы можем увеличить толщину этого шрифта или этого текста, может быть, до 500, сделав толще, или вы можете оставить все как есть.

      Вам решать, чего вы хотите.

      Хорошо, о, вы также можете текстовое поле, вы можете сказать, замещающее сообщение здесь, как это.

      И тогда у вас может быть хороший заполнитель везде, если вы хотите вот так, вы можете сделать сообщение здесь вот так.

      Хорошо, вот и все.

      Теперь кнопка, нам просто нужно, знаете ли, центрировать кнопку.

      Итак, чтобы сделать кнопку после после этого после управления вводом, вы можете сделать точку отправки BTN.

      Так что просто отображать flex, отображать flex, только для содержимого flex.

      Итак, вернемся назад, там хорошо видна кнопка.

      Так что теперь нам просто нужно сделать левую сторону.

      Итак, давайте перейдем к левой стороне, которая просто стилизует текст и все такое.

      Итак, левая сторона, где взять некоторые элементы контекста.

      Итак, мы делаем flex два слева, а затем, когда я переключаю h5 Итак, для поля h5 сверху я собираюсь сделать один ram, размер шрифта в RAM.

      А потом я собираюсь преобразовать текст, преобразовать в верхний регистр.

      Хорошо, после этого я переключу абзац, я дам ему поле сверху и снизу по одному REM Lanre высота строки два REM, мы читали это, мы должны были сделать это в глобальный глобальный стиль, но это нормально.

      Продолжаем.

      И два контакта сделаем.

      Информация.

      Итак, в контактной информации у нас есть контактная информация.

      Этот пункт контактов, если вы помните имена классов, так просто хотите сделать отображение.

      Flex не выравнивал элементы по центру, выравнивал пространство между содержимым и перемещал их.

      пробел между давайте посмотрим, что у нас есть.

      Итак, это расстояние между ними.

      Итак, теперь нам просто нужно выбрать абзац внутри цитаты, сделать p margin.

      поле, верх и низ 1,3.

      Затем ноль слева и справа, а затем мы собираемся переопределить существующий, используя важный лад, а затем мы собираемся сделать заполнение сверху и снизу.

      Заполнение сверху и снизу будет равно нулю, а левая рука пишет фактически все заполняет.

      Просто заполните все, что нужно, чтобы сбросить его до нуля.

      И затем мы переопределяем важное ключевое слово.

      Итак, теперь у нас есть три точки поля, сверху и снизу.

      Ладно по каждому пункту, так там вроде запас сверху 3.3 ОЗУ.

      Все выглядит красиво.

      Теперь нам осталось запустить иконки.

      Хорошо.

      Итак, после абзаца я скажу значок точки.

      Хорошо, так что для значка, я собираюсь сказать, я собираюсь поместить их в сетку, отображать сетку, отображать сетку, а затем в столбцах шаблона сетки я собираюсь, поэтому я помещаю это в сетке, потому что я хочу восстановить это.

      Хорошо, это не показывает, почему, потому что я уже буду использовать сетку.

      Итак, я просто покажу вам, почему столбцы шаблона сетки, я собираюсь сказать, что 40 пикселей для первого столбца, а затем один fr для второго столбца, где находится текст для исправлений для значка.

      Хорошо.

      А потом я вернусь.

      Итак, причина, по которой я сделал сетку, заключается в том, что я хотел, чтобы эти текстовые элементы соответствовали друг другу.

      Итак, если это сетка, убедитесь, что они выровнены.

      Итак, когда я просматриваю это, как вы видите, это элемент сетки.

      Итак, каждый элемент сетки, каждый элемент будет иметь первый столбец сетки. С пикселями, независимо от того, какой из этих элементов сетки, каждый будет иметь столбец, первый из 40 пикселей.

      Таким образом, они будут иметь равные пространства, и они будут жить, они будут на одной линии, вот так.

      Итак, вы поняли.

      И затем иконка номер два, глаз, иконка внутри, я скажу Показать, согнуть, а затем выровнять элементы, по центру.

      И затем я собираюсь сделать размер шрифта, размер шрифта, я собираюсь изменить его на что-то вроде линейного изменения компонентов.

      Итак, вот оно.

      Теперь значки стали намного больше.

      Теперь нам просто нужно сделать вот эти значки.

      На этом мы закончили со страницей контактов.

      Хорошо, так напишите содержание, контакт, контактную информацию.

      Итак, контактная информация.

      После контактной информации нам нужно сделать значок контакта точка контакта значок.

      Итак, если вы забыли, что это такое, значок контакта.

      Где это? Где это, где-то здесь внизу.

      Итак, вот этот вот этот контейнер, контактный значок контейнера здесь.

      Вот чем мы сейчас занимаемся.

      Итак, теперь мы делаем значок контакта контейнера.

      Итак, мы собираемся сделать display, flex, display flex, а затем я собираюсь сделать margin top.

      Таким образом, для margin top будет что-то вроде ram, а затем мы нацелимся на тег привязки, который приведет нас к внешним веб-сайтам, я просто собирался сделать display flex и дать ему цвет, центр всего, мы делаем это с Flex.

      И затем, чтобы убедиться, что он закруглен, мы делали, что ширина и высота должны быть одинаковыми.

      И радиус границы границы до 50%.

      Итак, я собираюсь сделать отступ сверху и снизу нуля, сверху и снизу, точки для ОЗУ слева и справа.

      Хорошо, а потом мы сделаем переход, тот, который мы делали.

      Ладно, а потом на халфе.

      Когда у нас есть это, мы просто хотим изменить цвет фона.

      А также для значка, поэтому мы просто хотим изменить цвет на основной цвет.

      Ладно, а потом после ховера, просто в общем, не в ховере, запустим иконку глаза, будем показывать флекс, выравнивать элементы, центрировать, выравнивать размер шрифта по центру контента 1.3 Ram.

      Итак, вот оно.

      Теперь у нас есть красивая анимация.

      Да, на этом наш сайт заканчивается.

      Теперь нам просто нужно поработать над темной темой, светлым и темным режимом.

      И все готово.

      Хорошо, теперь я просто перейду к HTML.

      И я просто поставлю лайк после элементов управления, поставлю точку, скажу тему BTN.

      Здесь я просто поставлю как значок для двух, чтобы переключать темный режим светлый и темный режим.

      Итак, тема БТН.

      Так что мне просто нужно стилизовать это.

      И все готово.

      Нам просто нужно запустить тему BTN.

      Хорошо.

      Итак, элементы управления Итак, после элементов управления я коснусь темы BTN.

      Итак, я собираюсь сделать заполнение, один баран, а затем курсор к указателю.

      А потом фон.

      Ширина и Высота должны быть одинаковыми, чтобы сделать их закругленными.

      Итак, я хочу, чтобы кнопка была закругленной.

      Хорошо, вот так.

      А потом отобразить.

      Flex one, чтобы отправить все с помощью flex, чтобы вы знали, что это уже есть, а затем маржа.

      Верх и низ будут равны семи десятым очкам бэр, а затем нулям слева и справа.

      Мышца собирается вставить в тень коробки.

      Вы можете поместить это в переменную, чтобы вам не пришлось этого делать.

      А потом я переключу глаз.

      Меняются только силы, а цвет устанавливает нулевые события указателя.

      Так что мы не щелкаем по нему Хорошо, так что да, я имею в виду, вы знаете, кем я был.

      Посмотрим, что у нас есть, о, этого не существует, потому что я справлялся с неправильными стилями.

      Извините, это моя, это моя, это моя вина, я смотрел не на тот элемент, я собираюсь сделать первые 5%.

      Правый 3%.

      И затем я собираюсь сделать 70 пикселей.

      То же, что и высота.

      Итак, когда нужно убедиться, что это закруглено, высота в порядке, а затем мы собираемся сделать радиус границы 50%.

      Итак, он будет округлен, затем я установлю цвет фона и присвою ему фиксированное положение, а затем центр, центр с помощью Flex.

      Хорошо, вот так.

      Таким образом, положение указателя курсора фиксировано.

      Теперь он будет здесь, наверху, верно? Итак, мы хотим придать ему коробчатую тень.

      То же, что мы сделали при преобразовании текста.

      Итак, вот оно.

      Так я буду делать, когда активен.

      Итак, когда я нажимаю Что не произойдет, когда я нажму кнопку.

      Итак, я собираюсь трансформироваться.

      А то буду переводить на Y.

      Так что буду делать вроде минус пять фикс фиксов.

      И тогда это должно быть точка одна секунда, убедитесь, что оно очень низкое, а не высокое.

      Так что если вы поставите слишком большое значение, вы не увидите эффекта.

      Так, например, позвольте мне сказать точку, пять 5,6 пикселей, а не шесть пикселей, секунды, целых шесть секунд, когда я нажму, вы не увидите эффекта.

      Но когда я держу, это занимает как очки, требуется много времени, чтобы сделать эффекты, которые вы должны удерживать, но по умолчанию, чтобы быть быстрым, когда я нажимаю.

      Вот почему я использую точку в одну секунду, чтобы убедиться, что вы видите эффект при нажатии.

      Итак, когда я нажимаю, как вы видите, как будто кнопка движется.

      Или можно уменьшить это не ширину, а высоту перевода до минус трех.

      Итак, когда вы щелкаете, это похоже на перевод, ладно, вот и все.

      Теперь нам просто нужно сделать иконку.

      Итак, значок просто меняет размер шрифта и цвет.

      Конечно, инструмент.

      Итак, вот оно.

      Теперь нам просто нужно поработать над переключателем.

      Так что это будет очень быстро, нам просто нужно перейти к JavaScript.

      JavaScript после сеанса активен, можно сказать переключить тему.

      Переключить тему.

      И затем здесь мы собираемся сказать, что тема класса btn равна документу.

      Документ.

      Точечный селектор запросов.

      селектор запросов.

      И вот, мы собираемся сделать тему точек BTN.

      Это имя класса, которому мы дали.

      Итак, я хочу сказать кнопку настройки, я собираюсь добавить прослушиватель событий.

      добавить прослушиватель событий, а затем он будет прослушивать щелчок.

      И затем он примет функцию обратного вызова.

      Не волнуйтесь, мы можем сделать функцию стрелки.

      Теперь, потому что мы используем это ключевое слово.

      Теперь я скажу, давайте выровняем, затем я скажу документ, элемент будет задокументирован телом, телом.

      Хорошо? Задокументируйте тело.

      И затем здесь я просто переключу элемент класса, который является списком классов точек тела.

      Переключатель точки разговора.

      On Click, ладно, так что мы просто говорим об одном клике, я просто собираюсь добавить класс, называемый легким режимом.

      Итак, когда я нажму на нее, этот класс будет включаться и выключаться, включаться и выключаться, включаться и выключаться.

      Итак, позвольте мне сохранить.

      Итак, позвольте мне проверить это.

      Итак, давайте остерегаемся элемента body.

      Итак, тело здесь, поэтому мы как бы выбирали элемент тела в JavaScript.

      Итак, теперь, когда я нажимаю, включается индикатор класса.

      Это редактирование класса и удаление класса, добавление и удаление класса.

      Итак, теперь нам просто нужно установить класс светового режима.

      Итак, что касается легкого режима, я собираюсь пройти весь путь до приложения, которое хочу услышать, я собираюсь использовать легкий режим, это имя класса, о котором мы говорим.

      Я скопирую сюда все эти цвета.

      Хорошо, тогда я вставлю их сюда.

      Итак, для светлого режима вам просто нужно поменять местами цвета, которые вы использовали, например, для фона я использовал вот этот темный цвет.

      Так что не меняйте имя переменной, просто нужно изменить свойство.

      Так что я собираюсь изменить его с черного цвета.

      Ой, до белого цвета.

      Хорошо, вот так, а затем сохраните, когда я нажму, фон изменится на белый.

      Итак, это класс облегченного режима.

      Итак, вам просто нужно изменить значения переменных на разные вещи, просто перемешайте их.

      Итак, я использую белый цвет в качестве основного фона.

      А затем для вторичного я использую другой цвет, вроде розового.

      Хорошо, для вторичного.

      Итак, когда я переключаю свет, он меняет цвет на этот, розовый.

      Хорошо, все вторичные цвета изменятся на этот розовый цвет.

      Ладно, продолжим.

      Мне также нужно изменить цвет текста, который является белым.

      Итак, для белого, думаю, я использую какой-то серый номер.

      Белый, я собираюсь вставить это для белого, я на самом деле с благодарностью.

      Так благодарен.

      Вот куда вы собираетесь поместить белый цвет.

      Хорошо, пока все отлично.

      Так что это просто имя переменной все еще используется, но вам просто нужно изменить его значение.

      Хорошо.

      Да, позвольте мне посмотреть, нужно ли нам еще что-то изменить.

      Итак, позвольте мне перейти к другим компонентам.

      Итак, да, нам может понадобиться изменить некоторые цвета.

      Знаешь, вместо того, чтобы идти этим путем, меняя цвета один за другим, я просто скопирую и вставлю цвета, которые мне подошли, вы можете изменить эти цвета на любые, какие захотите.

      Так что вам просто нужно их смешать.

      Не изменяйте имя переменной, потому что мы использовали эти переменные не просто так.

      Итак, нам просто нужно изменить значение переменной на другой цветовой режим.

      Хорошо, в данном случае мне подходит этот цвет, цветовая схема.

      вещь действительно работает для меня очень хорошо.

      Вы можете использовать другую цветовую схему, какую хотите.

      Это действительно зависит от вас.

      Но этот действительно идеален для меня.

      Ладно, все нормально.

      Да, я имею в виду, что этот проект не отвечает.

      У меня нет времени, чтобы сделать его отзывчивым.

      Это единственный раз, когда мне пришлось снимать видео.

      Но я Это зависит от того, сколько людей попросили в комментариях.

      Если вы хотите, чтобы я, если вы хотите увидеть, как я делаю адаптивные вещи, вы можете? Дай мне знать в комментариях.

      А потом я подумаю о том, чтобы сделать видео об этом или посмотреть, сколько человек запросило.

      Да, если у вас есть вопросы или что-то в этом роде.

      Не забудьте спросить меня в комментариях, или вы можете отправить мне по электронной почте.

      Да, это так.

      Пожалуйста, не забудьте поставить лайк, подписаться, если вы новый дом, вы на следующем.

      Итак, теперь давайте поработаем над медиа-запросами.

      Давайте попробуем сделать этот сайт адаптивным.

      Как вы можете видеть, где мы остановились, веб-сайт вообще не отвечает.

      Итак, мы просто хотим сделать так, чтобы он адаптировался к любой ширине, которую мы используем.

      На самом деле я использую другие проекты, но все будет по-прежнему.

      Все то же самое классы все то же самое.

      Это просто другое имя папки.

      Итак, теперь давайте перейдем к стилям и создадим новый стиль.

      Тогда поместите, это будет партиал SASS, чтобы создать партиал, мы будем использовать подчеркивание, затем я скажу media, а затем точку CSS.

      Итак, это файл, этот файл будет отвечать за медиа-запросы.

      Итак, я уже рассмотрел работу с экраном, где мне нужно сделать несколько точек останова.

      Но если я этого не сделал, вам придется найти точки останова, которые ваш сайт начнет ломать.

      Итак, я начну с экрана меньшего размера.

      Я начну с 600 пикселей.

      Так что я собираюсь сделать на медиа и медиа экрана экран, экран, а затем конец.

      И тут я хочу сказать максимальная ширина, максимальная ширина макс.

      Так что максимальная ширина для этого, я хочу поставить 600 пикселей.

      Итак, убедитесь, что расстояние здесь правильное.

      Значит, если мы так поступим, ничего не получится.

      Таким образом, расстояние должно быть правильным, как я это сделал.

      Убедитесь, что все правильно.

      Итак, я собираюсь начать с заголовка.

      Посмотрим в шапке.

      Итак, при 600 пикселях это 600.

      Итак, это размер 600.

      Я хочу иметь нулевое заполнение.

      Итак, как видите, здесь много отступов.

      Если я проверю в стилях, это должно где-то быть.

      Итак, это заполнение, верно? Да, я собираюсь установить это на ноль.

      Хорошо, так должно быть Да, поэтому я собираюсь установить здесь каждый отступ равным нулю.

      Итак, я скажу заголовок.

      Я собираюсь установить нулевой отступ.

      Хорошо.

      Кроме того, чтобы использовать эти медиа-запросы, нам нужно импортировать этот файл.

      Итак, давайте перейдем к частичному импорту, просто сделайте это при импорте.

      А потом я скажу СМИ.

      Итак, вам нужно включить расширение файла, потому что Sassari знает, что это такое, это особенное.

      Таким образом, вам не нужно включать здесь расширение.

      Как сохраняю, так и собираюсь обновить, ничего не работает.

      Потому что для меня аккорды должны работать, всегда всегда должны быть внизу все должно быть здесь внизу после всего, потому что все выполняется построчно.

      Таким образом, медиа-запросы должны быть внизу.

      И тогда вам придется импортировать их здесь, внизу, а не наверху.

      Итак, теперь сохраняйте и сохраняйте носитель.

      А, да, давайте посмотрим, если отправленная Милика работает для шапки, нажмите на шапку.

      Посмотрим.

      Так что посредственность есть.

      Итак, теперь заполнение равно нулю.

      Для заголовка.

      На самом деле это прямое содержимое заголовка, полученное из заголовка, которое нам также нужно установить для заполнения равным нулю, я полагаю, что это, правый контакт заголовка, верно? На самом деле нам нужно установить это значение равным нулю.

      Итак, мы будем говорить заголовок, целевой заголовок, заголовок, а затем точку справа.

      заголовок.

      И затем я собираюсь добавить к этому ноль.

      Итак, правильный заголовок, нулевой отступ.

      Что-то странное происходит с родителем 00.

      Они все еще дерутся, верно? На самом деле, нам нужно переопределить все.

      Значит, он важен.

      Так что используйте это важное только тогда, когда это действительно важно, когда вам нужно.

      Итак, теперь мы переопределили все, все стили, все пары.

      Хорошо, на самом деле, мы могли бы установить это на таран, может быть, просто добавить немного отступов.

      Ага, скажем, таранить.

      Итак, мы также хотим избавиться от этих элементов управления здесь.

      Чтобы сделать это, можно сказать, точечное управление.

      Это имя класса.

      Итак, если я хочу дважды проверить селектор, проверить элементы управления и найти имя класса.

      Вот это управление.

      Итак, что касается элементов управления, я должен сказать, что это верх, я должен добавить это к авто к авто к авто.

      И затем мы собираемся сказать «нижний», потому что нижний нуль, я хочу, чтобы он был внизу, а затем направление сгибания теперь будет строкой по умолчанию или начальным, вы можете сказать начальным.

      И затем мы скажем, обосновать содержание.

      И затем я отправлю это, а затем мы скажем, что осталось, мы собираемся дать 50%, потому что хотим быть в центре.

      И затем мы собираемся передать преобразование и перевести X преобразование и перевести X минус 50%.

      Только по оси x.

      Так что переведи Х безопасно.

      Посмотрим, что у нас получилось.

      Вот они.

      Здесь внизу пульты управления.

      И да, там.

      На самом деле, нам также нужно установить ширину на 100%.

      И тогда мы могли бы также захотеть дать ему цвет фона, чтобы отличить его от черного с нашим содержимым.

      А потом мы будем использовать серый пять, серый пять, это неправильный цвет.

      И тогда мы также будем контролировать индивидуальный контроль.

      Итак, индивидуальное управление, мы дадим ему маржу, единицу, Rem сверху и снизу.

      А потом точка три REM влево и вправо.

      Итак, теперь они там, элементы управления здесь внизу, а не вверху.

      Итак, когда я перехожу по ширине, ее больше нет.

      Итак, теперь они там.

      Хорошо.

      Итак, теперь органы управления захотят, чтобы они были такими.

      Я также продолжу оформление заголовка.

      На самом деле любой, чтобы уменьшить ширину кнопки темы.

      Итак, я собираюсь сказать, что тема BTN.

      Итак, мы уменьшим ширину до 50 пикселей и высоту до 250 пикселей.

      Итак, ширина и высота 50 пикселей.

      Хорошо, теперь, скажем, позвольте мне еще раз проверить запись.

      Хорошо, теперь, как вы можете видеть, меньше на меньшем устройстве.

      Итак, мы также хотим настроить таргетинг на содержимое заголовка, заголовок, содержимое или содержимое, если вы не знаете, что это такое, я собираюсь проверить еще раз, чтобы показать вам проверку содержимого заголовка.

      Итак, это содержимое заголовка.

      Как видите, это здорово, я отмечу это.

      Итак, содержимое заголовка, мы собираемся изменить сетку.

      Итак, мы просто скажем сетка, столбцы шаблона.

      Я просто скажу один от одного о.

      Один ТФ.

      Две колонки.

      На самом деле, нет, нет, никто, если я просто хочу fr, потому что сейчас мы просто хотим иметь один столбец вместо двух.

      Так что да, когда угодно.

      Итак, теперь у нас есть один столбец.

      Ладно, пусть будет грязно.

      Скажем, может нижняя шестерка ОЗУ.

      Хорошо.

      Так что да, так И еще, я хочу, может быть, я хочу, чтобы текст был на самом верху.

      Для этого нам просто нужно изменить эти элементы сетки, изменить их или поменять местами.

      Итак, продолжим.

      Итак, теперь я нацелюсь на левый заголовок, я скажу левый заголовок, я собираюсь пометить его.

      Я собираюсь сказать, точка H, я собираюсь избавиться от этой зеленой формы.

      А потом я собираюсь, я собираюсь отключить этот дисплей.

      Так что я больше не хочу.

      Итак, как видите, его больше нет.

      Итак, после левого заголовка переходим к правому.

      Итак, правильный заголовок.

      Итак, для правильного заголовка я перехожу к статистике, я хочу, чтобы правильный заголовок был вверху.

      Итак, как нам это сделать.

      Итак, нам просто нужно изменить сетку.

      Так сказать ряд сетки.

      Это элемент сетки.

      Итак, я хочу, чтобы это была отправная точка зрения.

      Итак, я покажу вам, что это значит.

      Итак, когда я осматривал сетку.

      Так это сетка, верно? Итак, он начинается с единицы, к которой он идет, поэтому я хочу, чтобы в этом ряду было два, чтобы он был в одном, чтобы быть в первом ряду.

      Итак, мы также хотим установить ширину с шириной, я установлю ее на 90%, может быть, 90%.

      Хорошо, а затем я собираюсь установить нулевое поле автоматически для центрального поля, ноль и автоматический только для центрирования содержимого.

      Хорошо, теперь проверим.

      Итак, все было хорошо.

      Хорошо, а теперь продолжим.

      В основном нужно переключить имя.

      Название, размер шрифта.

      Я просто собираюсь изменить это на 2.5 2.5.

      Рам.

      Итак, РАМ Линсей.

      Давайте посмотрим, что проверить размер шрифта имени этого носителя.

      Значит, этот не работает.

      Нам нужно переопределить это с помощью Important, поэтому, когда это было включено, иногда вам может понадобиться переопределить это.

      Хорошо, вот так.

      И да, продолжим.

      Итак, после правого заголовка мы нацелимся на содержимое заголовка.

      Итак, содержимое заголовка, а затем левый заголовок.

      Затем мы нацелимся на изображение.

      И затем мы также собираемся установить нулевую автоматическую ширину поля, как сказано, равной 90%.

      А 2%.

      Итак, вот оно.

      Хорошо.

      Таким образом, нам также нужно исправить высоту на самом деле, есть проблема с заголовком проверки высоты.

      Позвольте мне посмотреть, если высота установлена ​​в заголовке.

      Таким образом, высота набора заголовков должна быть минимальной.

      Таким образом, минимальная высота будет 100 VH, а не фиксированная высота.

      Возможно, мы хотим иметь возможность прокручивать вот так.

      Итак, давайте перейдем к заголовку и найдем заголовок.

      На самом деле, я просто поищу 100 ВХ, где я уже говорил, что долина 100 ВХ.

      Итак, здесь, вместо высоты, мы собираемся установить, что означает высоту, когда медиа-запрос действительно попадает на медиа-экран, и максимальную ширину, максимальную ширину, а затем мы собираемся сделать 600 пикселей.

      Итак, это будет 600 пикселей или шесть, а затем доступ к 10 пикселям.

      Макс с медиаэкраном.

      И макс. ширина.

      О, о да, я не знаю, почему это не работает.

      Экран и все это не то.

      Вырежьте это, PR здесь, вот так, а затем сохраните.

      И здесь мы скажем минимальную высоту.

      100 ВХ.

      Итак, вы действительно можете выполнять медиа-запросы внутри элемента или элемента, который вы хотите сделать.

      Это когда вы редактируете.

      Вы можете вкладывать только в Sass, тогда вы можете сделать это с помощью обычного CSS.

      Нельзя так вкладывать.

      Итак, это не работает.

      Отменить.

      Просто установите обычную полночь на обычный заголовок.

      Ладно, так что да, теперь если средняя высота, то все работает.

      Хорошо, теперь давайте проверим другие страницы.

      Надежда о теперь пойдем к О.

      Итак, вернемся к медиа-запросам.

      А потом мы будем говорить многоточие о контейнере.

      Итак, давайте посмотрим на контейнер about, чтобы увидеть, о каком из них идет речь, о нашем сеансе здесь.

      Насчет контейнера, вот этот, вот на что мы смотрим.

      Итак, это тоже сетка.

      Итак, мы собираемся исправить это с контейнером, столбцами шаблона сетки, мы просто установим это на один Fr.

      Хорошо, а потом мы скажем прямо о том, о чем написать, мы скажем, заполнение топ-10 сверху.

      Итак, что касается набивки, мы сказали, что 2.5 Ram 2.5 Ram, вот что такое набивка.

      Итак, я также собираюсь установить право на столбцы шаблона сетки или предположил, что вы хотите иметь один, только один столбец для ссылки.

      Хорошо, теперь давайте перейдем к примерно хорошо, вы еще не можете его увидеть.

      Но все работает, нам просто нужно избавиться от отступов и всего, что касается контейнера, второй раздел.

      Итак, я собираюсь избавиться от набивки.

      Так что избавьтесь от набивки.

      А я просто раздел раздел выберу раздел.

      Итак, для дополнения я собираюсь сделать дополнение, я собираюсь сказать REM 2.5, Rem, влево и вправо, а затем я собираюсь переопределить существующие пары.

      Итак, да, как видите, выглядит неплохо.

      Итак, если иногда, когда вы делаете вот так, иногда это не переопределяет старые, к настоящему времени вам не нужно это делать, потому что нам не нужно переопределять, нам не нужно это делать.

      Хорошо, выглядит хорошо.

      Итак, теперь давайте перейдем к тому, что нам нужно писать о меньшем здесь.

      Идем сюда нам нужно сделать левую сторону.

      Итак, давайте сделаем левые вещи, о которых левые я скажу в ожидании, верно? Я собираюсь установить это на ноль.

      И затем я нацелюсь на этот абзац.

      Я собираюсь сказать, что заполнение оставил г-н до нуля также Хорошо.

      Хорошо, все выглядит хорошо.

      Хорошо.

      Итак, нам также нужно ориентироваться на временную шкалу.

      Итак, здесь после этого, я просто скажу временную шкалу.

      Итак, для временной шкалы я просто изменю сетку.

      Итак, я собираюсь сделать только один fr, я просто хочу иметь один столбец для временной шкалы.

      А потом я просто установлю нижний отступ на шесть, РЭМ.

      И давайте экономить.

      Давайте посмотрим, как выглядит наша временная шкала.

      Да, вот оно.

      Красиво выглядит.

      Хорошо.

      Итак, после этого мы могли бы также заняться статистикой.

      Хорошо, давайте закончим здесь после временной шкалы.

      О статистике.

      Итак, в статистике автобуса мы пометим индикаторы выполнения.

      Индикаторы выполнения, запомните имена классов.

      И затем мы просто собираемся сделать один, если это то, что вы хотите иметь как один столбец, извините меня.

      Вроде все хорошо.

      Итак, теперь давайте перейдем к разделу блогов, посмотрим, как ведут себя блоги.

      Это блоги.

      Итак, нам также нужна одна колонка в блогах.

      Итак, примерно, тогда мы просто скажем блоги.

      Таким образом, столбцы шаблона просто помещаются в один столбец, а затем даются отступы снизу из шести нижних ОЗУ.

      Итак, теперь вы видите, что если я перейду к блогам, теперь у нас будет один столбец.

      Ладно, все хорошо.

      Хорошо, вот и все.

      Теперь нам нужно также сделать раздел контекста.

      Итак, на самом деле портфели, мы пропустили портфели.

      Итак, портфели, которых здесь быть не должно, портфели.

      Итак, мы работаем над этим разделом.

      Теперь портфолио, мы хотим сделать то же самое.

      Как здесь, просто скопируйте это и поместите сюда.

      Итак, это очень похоже.

      Теперь посмотрим, что у нас получилось.

      портфели.

      Доходит все выглядит красиво.

      Хорошо.

      Итак, мы могли бы также захотеть дать этому портфелю максимальную маржу, но не сейчас.

      Итак, это почти все, кроме контакта.

      Контакт.

      контент, контейнер контента.

      Итак, теперь давайте искать контейнер содержимого контекста.

      Хорошо, вот оно.

      Осмотр.

      Есть сетка.

      Итак, продолжаем.

      Нам нужно изменить направление изгиба.

      Направление изгиба.

      Идем в безопасную колонну.

      Хорошо, обращайтесь.

      Таким образом, на самом деле поведение было гибким, а не сеткой.

      Контейнер контактов гибкий не согласен.

      Итак, нам нужно просто изменить направление изгиба.

      Хорошо, так что да, я дам вам нужные контакты.

      Правильно.

      Контакт.

      Итак, правильные контакты.

      Правый контакт после того, как край слева.

      А мы сказали, что ноль, маржа осталась нулевой.

      И тут я хочу сказать маржа разговоров была что до 2.5? РЕМ.

      Поэтому я экспериментировал с этими значениями вне камеры, чтобы сделать видео быстрее.

      Но вы можете поэкспериментировать со значениями, если хотите.

      Хорошо.

      Так что да, это за правильный контент.

      Итак, если я хочу нацелить проверку на один из этих входов, я хочу взять на себя управление вводом.

      Вот это, я хочу пометить это.

      Итак, я собираюсь скопировать селектор запроса селектора.

      Я собираюсь вставить его после контейнера контактов здесь, селектора, поэтому я ищу элемент управления вводом номер два Итак, элемент управления вводом два.

      Итак, это имя класса, на самом деле это ввод, управляйте двумя вот так, я вижу два.

      Я так его назвал.

      Итак, но для этого проекта, который я использую, я назвал другое, так что это два элемента управления вводом, как это.

      Но в проекте нам нужно получить в видео свой входной контроль до входного контроля, как видите, я вижу два.

      Итак, здесь я использую второй элемент управления.

      Хорошо, я просто скажу направление гибкости, я поставлю этот столбец так, чтобы он тоже относился к контроллеру ввода.

      И затем я нацелю последнего дочернего элемента этого элемента управления вводом, и мы скажем, что это псевдоселектор, скажем, последний дочерний элемент, поэтому я хочу взять последний дочерний элемент в элементе управления вводом для последней задачи, и когда я скажем, поле слева, ноль, а затем я также хочу, чтобы поле сверху Извините.

      маржа сверху так для маржи сверху и мы скажем что одна идеальная комната ладно, так что давайте перейдем к контакту.

      Как видите, все идет хорошо.

      Итак, здесь нужно проверить, чтобы осталось поле и визуальное значение, чтобы оно было равно нулю.

      margin top zero должен быть равен нулю.

      Входные левые свяжутся с этим.

      маржа оставила то, что договорное, поскольку дочерняя маржа верхняя маржа оставила ноль, что происходит? У этого уничтожения, которое проверяет снова, кажется, что по какой-то причине остался запас.

      Последний заряд в прошлом году последний заряд Я не знаю, почему он все еще имеет О, я думаю, что медиа-запрос не применяется.

      Позвольте мне обновить это снова.

      А потом я проверю столбец направления гибкости, хорошо.

      Итак, это последний дочерний элемент, поэтому я скопирую селектор сюда, скопирую селектор, вырежу это и заменю тем, который вы скопировали онлайн из браузера.

      Хорошо, сохрани.

      Хорошо, теперь все работает.

      Я думаю, это из-за пробелов.

      Здесь действительно нужно указать интервал.

      Так что здесь нужно поставить пробел.

      Пробел и тогда да, все работает.

      Итак, да, все работает Отлично.

      Все работает нормально.

      Так что теперь нам просто нужно повозиться с этим заголовком.

      Хорошо, давайте сделаем это.

      Название является кодом.

      На самом деле.

      Пункт контракта.

      Контрактный предмет, который вы знаете, давайте сначала разберемся с названием.

      Это основное название.

      Итак, здесь мы говорим о h3, а затем о размере шрифта.

      Мы собираемся установить это на баран, а также скажем, выбрать эту сковороду.

      Размер шрифта 2.5 Ram.

      Ладно, а потом этот PG текст 2.5 от такого размера шрифта.

      Теперь сохраните.

      Теперь посмотрим, что у нас получится.

      Ага.

      Вот оно.

      Я думаю, нам просто нужно, чтобы Оман увеличил это немного отчаянно до трех раундов Хорошо.

      Да, я думаю Так что вы можете как-то возиться с этим размером шрифта, да, так что при таком размере этого медиа-запроса точка останова выглядит очень хорошо.

      Таким образом, вы можете решить, какие точки останова вам нужны для внесения изменений, вы знаете, я имею в виду, что в этом случае нам нужно исправить эту проверку.

      Левый заголовок.

      Левый заголовок, нам нужно установить высоту содержимого заголовка, нужно установить минимальную высоту, подумайте о минимальной высоте.

      Или нам действительно нужно установить высоту 100 VH для содержимого заголовка.

      Хорошо, да, все подходит к нашей точке останова, точке останова, сексуальной минимальной высоте, содержимому заголовка, нам нужно установить здесь минимальную высоту.

      мин. высота.

      Итак, давайте найдем содержимое заголовка.

      Содержимое заголовка лучше содержания содержания содержания.

      Итак, здесь нам нужно установить минимальную высоту.

      min height, мы установим его на 100 VH.

      Хорошо, так что да.

      Итак, теперь мы можем войти, попытаться найти некоторые точки останова, которые нам также нужны, чтобы вы знали, немного повозиться со стилями.

      Я думаю, что здесь заголовок - это поле, которое мне не нужно.

      Правый заголовок, который является дополнением, которое мне не нужно.

      Так что тут надо искать не так ли? заголовок.

      Заголовок новый.

      Итак, здесь следует сказать родитель 00.

      обновить это.

      Происходит что-то странное? Да, это ноль и важно.

      Хорошо, так что да, теперь все должно работать хорошо.

      Можно работать с размером шрифта, можно уменьшить размер шрифта на определенную ширину, можно использовать процент размера шрифта.

      Итак, все выглядит хорошо.

      Итак, нам просто нужно поработать над тем, чтобы, скажем, найти точку останова, где все начинает ломаться, и начинать, знаете ли, делать там какие-то медиа-запросы.

      Например, я, может быть, сделаю еще одну точку останова.

      Ладно, так я типа контакт когда вообще контакт говорит разорвать.

      Итак, для этого контакта он слишком рано прерывается.

      Итак, я собираюсь сделать еще одну точку останова для контакта.

      Так вот, я собираюсь сказать, что это медиа. Я на самом деле собираюсь скопировать эту копию этой вставки сюда.

      И затем здесь я собираюсь изменить это на 1432.

      Хорошо, так что для эксперимента с этими значениями камеры, так что здесь контакт разрывается слишком рано.

      Итак, я буду копировать контракт каждый раз, когда он будет сокращаться.

      И затем я собираюсь сделать это в начале этого адреса размером 1432 и вставить сюда контрактный материал.

      Хорошо, так что когда я захожу в контакты, теперь это задача, чтобы вы знаете, адаптироваться раньше красиво.

      Таким образом, мы также можем возиться с отступами раздела.

      Итак, в этом случае я также собираюсь возиться с отступами разделов.

      И один раз в разделе я буду делать отступы сверху и снизу.

      Я собираюсь сделать семь баранов 11 баранов влево и вправо.

      Хорошо, обновите.

      Происходит что-то странное.

      Раздел.

      Окей, максимальная ширина Давайте проверим, чтобы увидеть тело О, тело — это класс сессий.

      Итак, тело наследует то есть заголовок наследует стили этого раздела.

      Итак, в заголовке нам нужно избавиться от этого.

      Итак, здесь я скажу, что заполнение заголовка — ноль.

      Итак, нам действительно нужно переопределить, потому что заголовок на самом деле наследует класс раздела.

      Итак, да, вот оно.

      Итак, теперь, когда я, знаете, начинаю уменьшаться, все идет медленно, но это будет, это сработает.

      Ладно, посмотрим.

      Итак, для раздела контактов я собираюсь сделать еще один медиа-запрос.

      Я просто собираюсь сделать медиа-запрос, чтобы как бы разделить.

      Итак, в этом размере, в этом разделе, я знаю, что этот размер, я на самом деле собираюсь поставить другой размер, может быть, 1070.

      Или, да, давайте сделаем этот размер 1070 пикселей здесь.

      А мы поговорим о контейнере.

      Итак, это примерно, а затем столбцы шаблона сетки, я собираюсь установить это на один Fr.

      А потом в я вам скажу написать о том, что я просто собираюсь изменить верх отступа, чтобы подтвердить.

      Для подтверждения, так это для родительского верха в о, так что здесь 1000 пикселей, вот это.

      Таким образом, все будет хорошо отображаться в одной колонке.

      Хорошо, и я также нацелюсь на основной заголовок здесь.

      Я бы сказал главный Титан, х два.

      А потом размер шрифта.

      Для БДГ-размаха, а затем для БДГ-сейфа Ладно, большой Текс.

      Размер объекта для мышц.

      Посмотрим, как это будет выглядеть.

      Хорошо, мы собираемся увеличить это значение, может быть, до 4,5 кадра или 645.

      Ага.

      Хорошо.

      Думаю остановиться на 4.5.

      Хорошо, так что вы можете, вы знаете, как бы указать верхнее поле содержимого здесь, вы можете указать это верхнее поле, чтобы указать между этим заголовком здесь.

      Так что решать вам.

      Хорошо, позвольте мне проверить.

      Давайте устроим показ портфолио.

      портфели.

      Давайте сделаем сетку столбцов шаблона сетки.

      Давайте просто сделаем один фр., один фр.

      Итак, это две колонки.

      Итак, теперь у нас есть две колонки портфелей.

      Давайте сделаем то же самое для блогов, можно продублировать это и объединить эти два блога.

      Итак, в блогах также будет две колонки.

      Хорошо, вот так.

      Итак, две колонки для блога? С чем нам снова возиться? Итак, да, на самом деле, давайте сделаем еще один медиа-запрос.

      Вы можете разрешить мне столько медиа-запросов, сколько захотите, и вы можете настроить и изменить все, что вы хотите изменить.

      Итак, я собираюсь сделать 9970 пикселей, почти 70 пикселей.

      Итак, вот раздел section.

      Собираюсь поменять обивку что-то сверху и снизу 07 Рэм, шесть РАМ Клифден, верно.

      Вот так.

      Теперь, скажем, уменьшим ширину.

      Хорошо, вот оно.

      Все выглядит красиво.

      Хорошо.

      Так что нам тоже надо с этим делом повозиться.

      Виндовс просто сломать.

      Знаешь, мне кажется, я действительно хочу, чтобы это произошло пораньше.

      Но то, что мы сделали с контентом, заголовок содержимого заголовка, кнопка темы имели заголовок подъема контента.

      Ладно, думаю, я хочу, чтобы этот заголовок был вырезан раньше.

      Итак, я вставлю это в девятку в 970.

      И мы вставим это туда.

      Итак, это происходит рано.

      Хорошо, вот так.

      Поэтому я думаю, что это должно произойти раньше, чем предполагалось.

      Да, думаю, в этом есть смысл.

      То же самое нужно сделать и для элементов управления.

      Элементы управления, вырезать элементы управления.

      Убери это.

      И тогда мы сделаем это раньше.

      Итак, вы знаете, возитесь со значениями и смотрите, с чего вы хотите начать, вы знаете, что влияет на ваши медиа-запросы.

      Так что я думаю, что идея пайки этого размера.

      Хорошо, я мог бы также указать элементы управления вокруг них.

      Таким образом, каждая вещь управления может переосмыслить.

      Я собираюсь сказать "таранить" ради этого.

      Ладно, контролируй запас на таран.

      Ладно, барана вроде мало.

      Посмотрим, шестерка почему-то не работает.

      Давайте переопределим это.

      Все еще не работает? Посмотрим, почему.

      Контроль.

      Маржа.

      О, верх и низ должны быть левыми и правыми.

      Значит, должно быть наоборот.

      Итак, давайте вернемся к оперативной памяти, так что это верх и низ.

      Это слева и справа.

      Итак, я хочу применить поля слева и справа.

      Хорошо.

      Итак, вот оно.

      Итак, верх и низ, на самом деле, я собираюсь увеличить это значение, может быть, до 6,6.

      Итак, все будет выглядеть вот так красиво.

      Хорошо, так что да, вы можете возиться со всем, просто чтобы искать точки останова, где вы хотите, знаете ли, влияет на ваши стили и элементы, что угодно.

      Я уменьшу это значение до 1,5.

      Или один на самом деле, да, вы можете немного возиться с медиа-запросами, точками останова, например, где ваш материал начинает ломаться.

      Это то, с чего вы начинаете, вы знаете, выполнение медиа-запросов, вы можете просто создать для этого точку останова.

      Для блогов взлом довольно ранний.

      Так что это что-то вроде определенного размера, вы можете, знаете, поместить блоки в один столбец.

      Хорошо.

      Так что да, я сделаю еще один.

      Я сделаю еще один.

      Я не хотел делать это видео длинным.

      Сейчас я сделаю еще один.

      И все.

      Итак, давайте сделаем 700 пикселей.

      Итак, здесь, в этом разделе, я собираюсь изменить этот раздел здесь, просто скопируйте этот раздел.

      Здесь мы просто изменим отступ.

      Итак, два три.

      Итак, мы также хотим сделать раздел о статистике, давайте сделаем статистику.

      И затем мы собираемся сделать индикаторы выполнения.

      На самом деле, я думаю, что мы уже сделали прогресс, плюс позвольте мне еще раз проверить индикаторы выполнения.

      Да, я думаю да, мы могли бы захотеть использовать индикаторы прогресса.

      Индикаторы выполнения.

      Я думаю, вместо того, чтобы делать индикаторы выполнения позже, прогресс, индикаторы выполнения здесь, вместо того, чтобы делать это здесь, скопируйте этот разрез, а затем мы сделаем это здесь раньше, а не позже.

      Итак, здесь мы просто меняем отображение индикаторов выполнения.

      Мы поместим их в один столбец по 700. Что-то большое, они точно пикселей.

      Итак, поиск.

      Все выглядит красиво.

      Думаю, да, все выглядит красиво.

      Итак, временная шкала затрагивает 600 пикселей.

      Итак, я имею в виду, я думаю, что теперь все действительно хорошо, если идея о том, как делать медиа-запросы и все такое, мы также можем немного возиться с основным заголовком здесь.

      Итак, нам просто нужно установить размер шрифта, может быть, поменьше.

    Добавить комментарий

    Ваш адрес email не будет опубликован.