Заголовок H1 - Стиль Заголовок H5

Заголовок H6 = Стиль тоже Заголовок H6 - шрифт Kabarett Decor

Полезные советы

Необходимо исправить ощибки указанные в PageSpeed Insights

Настройка цвета букв строки кода < > находится в YOOtheme - НАСТРОЙКИ - ЕЩЕ - ПОДСВЕТКА СИНТАКСИСА = none и потом в настройке самого кода присвоил класс blak_box

-----------------------------

YOOtheme Pro: возможности и настройки = https://joomla.center/knowledge-base/templates/yootheme-pro

-----------------------------

Обзор YOOtheme builder (часть 2) = https://aleksius.com/joomla/rasshireniya/yootheme
Как сделать мультиязычный сайт = https://www.youtube.com/watch?v=X5ktPGBjiD0

Переключатель языков = https://gtranslate.io/

Сначала нужно Создать файвикон на этом сервисе = https://realfavicongenerator.net/

Загрузить на хостинг в папку public_html файлы с готовыми файвиконами и затем редактировать index.php

В фаиле /templates/yootheme/index.php вставить правильные meta теги со своими данными в строки от (head>) до (/head>)

<head>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="shortcut icon" href="/favicon.ico">
        <jdoc:include type="head" />
 <meta property="og:site_name" content="Создание и продвижение сайтов"/>
 <meta property="og:title" content="Создание и продвижение сайтов" />
 <meta property="og:description" content="Создание и продвижение сайтов" />
 <meta property="og:url" content="https://kruolart.ru" /> 
 <meta property="og:type" content="article" />
 <meta property="twitter:title" content="Создание и продвижение сайтов" />
 <meta property="twitter:description" content="Создание и продвижение сайтов" />
 <meta property="twitter:url" content="https://kruolart.ru" />
 <meta property="twitter:card" content="summary" />
<meta name="geo.placename" content="Moscow, Russia" />
<meta name="geo.position" content="" />
<meta name="geo.region" content="RU" />
<meta name="ICBM" content="" />
 <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
 <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
 <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
 <link rel="manifest" href="/site.webmanifest">
 <meta name="msapplication-TileColor" content="#da532c">
 <meta name="theme-color" content="#ffffff">
 </head>

YOOtheme добавить позицию top1 встанет выше основного меню. Пример на сайте = https://pgn-spb.ru/
1. в файле /templates/yootheme/templateDetails.xml в строке 47 после строки <position>navbar</position> вставить строку с кодом =
```
<position>top1</position>
```
2. в файле /templates/yootheme/index.php строка 109 вставить строку с кодом =
```
<jdoc:include type="modules" name="top1" style="section" />
```
Сместить позицию с меню

3. и в файле /templates/yootheme/config.php строка 28 после (positions) вставить строку с кодом с кодом =
```
'top1' => 'Top1',
```
Пример
```
'navbar' => 'Navbar',
'top1' => 'Top1', 
'header' => 'Header',
```
YOOtheme сдвинуть позицию меню сверху на низ
Поменять позицию (header) меню на фоне видео через стили, так как в шаблоне нет настройки вставить (header) между блоками.
Править файл `templates/yootheme/less/theme.less`, строка 180 или 183.
Добавить следующие стили: заменить на =
```
* Header
 */
 .tm-header,
.tm-header-mobile {
 // Make sure media overlay is always below
 position: relative;
}
/*
.tm-header {
 position: absolute;
 top: 70px;
 z-index: 100;
 width: 100%;
}
```
* и обязательно войти в настройку стилей и в самом низу нажать кнопку RECOMPILE STYLE
На мобильных устройствах он останется на старом месте.

Загрузить шрифты в папку /templates/yootheme/fonts/ и затем прописать в (Настройки-Пользовательский код) свой код. Пример расположен ниже.

.display_none {
    display: none;
}
@font-face {
 font-display: swap;
 font-family: 'Roboto local';
 font-style: normal;
 font-weight: 400;
 src: url('../fonts/Roboto local.eot'); /* IE9 Compat Modes */
 src: url('../fonts/Roboto local.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
 url('../fonts/Roboto local.woff2') format('woff2'), /* Super Modern Browsers */
 url('../fonts/Roboto local.woff') format('woff'), /* Modern Browsers */
 url('../fonts/Roboto local.ttf') format('truetype'), /* Safari, Android, iOS */
 url('../fonts/Roboto local.svg#Roboto') format('svg'); /* Legacy iOS */
}
@font-face {
	font-family: 'Kabarett Decor';
	src: url('../fonts/Kabarett Decor.eot'); /* IE 9 Compatibility Mode */
	src: url('../fonts/Kabarett Decor.eot?#iefix') format('embedded-opentype'), /* IE < 9 */
	src: url('../fonts/Kabarett Decor.woff2') format('woff2'), /* Super Modern Browsers */
	src: url('../fonts/Kabarett Decor.woff') format('woff'), /* Firefox >= 3.6, any other modern browser */
	src: url('../fonts/Kabarett Decor.ttf') format('truetype'), /* Safari, Android, iOS */
	src: url('../fonts/Kabarett Decor.svg#Kabarett Decor') format('svg'); /* Chrome < 4, Legacy iOS */
	    font-display: swap;
}
@font-face {
	font-family: 'GoodVibesPro';
	src: url('../fonts/GoodVibesPro.eot');
	src: local('O'), url('../fonts/GoodVibesPro.woff') format('woff'),
	src: url('../fonts/GoodVibesPro.ttf') format('truetype'),
	src: url('../fonts/GoodVibesPro.svg') format('svg');
	    font-display: swap;
}
.h1_fon {
	background: #F2F2F2 none repeat scroll 0%;
    padding:10px;
}
.blu_box {
background: #131240;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#131240', endColorstr='#083363');
background: -ms-linear-gradient(center top , #131240 10%,  #083363 100%);
background-image: -webkit-linear-gradient(bottom, #131240 10%,  #083363 100%);
background: -moz-linear-gradient(center top , #083363 10%, #131240 100%);
background-image: -o-linear-gradient(bottom, #131240 10%,  #083363 100%);
	color:#ffffff;
	padding:5px;
}
.blak_box {
background: #333645;
    color:#ffffff;
	padding:8px;
}
.zel_box {
background: #507262;
    color:#ffffff;
	padding:8px;
}
.fffdf3_box {
background: #fffdf3;
	padding:8px;
}
.menu_box {
background: #eeeeee;
	padding:8px;
}
.whisky-shadow {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    height: 32rem;
    transform: scale(.96);
    transition-duration: .6s;
    transition-property: transform,opacity;
    transition-timing-function: ease;
    width: 25rem;
}
.text_art {
    -webkit-box-shadow: 0 8px 10px -10px rgba(0,0,0,1),0 0 0 1px rgba(0,0,0,.3);
    -moz-box-shadow: 0 8px 10px -10px rgba(0,0,0,1),0 0 0 1px rgba(0,0,0,.3);
    box-shadow: 0 8px 10px -10px rgba(0,0,0,1),0 0 0 1px rgba(0,0,0,.3);
	background:#F6F6F6 none repeat scroll 0%;
    color:#000000;
    padding: 4px;
	font-size: 16px;
	margin-left: 4px; 
	margin-right: 4px;
}
.text_art:hover  {
	background:#c4eafc none repeat scroll 0%;
    color:#fffccc;
}
.text_16px{
    background:#E7EAED none repeat scroll 0%;
    padding: 4px;
	font-size: 16px;
}
.fon_text_center {
    background:#fff none repeat scroll 0%;
    padding:3px;
	text-align: center;
}
.foto {
    background:#E6E6E6 none repeat scroll 0%;
    padding:5px;
	text-align: center;
    margin-right: 10px;
    margin-left: 10px;
}
.foto_02 {
    background:rgba(0,0,0,0.2);
    color:#ffffff;
    padding:5px;
    margin-right: 10px;
    margin-left: 10px;
}
.foto_03 {
    background:rgba(0,0,0,0.3);
    color:#ffffff;
    padding:5px;
    margin-right: 10px;
    margin-left: 10px;
}
.foto_05 {
    background:rgba(0,0,0,0.5);
    color:#ffffff;
    padding:5px;
    margin-right: 10px;
    margin-left: 10px;
}
.red_box {
background: #870503;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#870503', endColorstr='#430807');
background: -ms-linear-gradient(center top , #870503 10%,  #430807 100%);
background-image: -webkit-linear-gradient(bottom, #870503 10%,  #430807 100%);
background: -moz-linear-gradient(center top , #430807 0%, #870503 100%);
background-image: -o-linear-gradient(bottom, #870503 10%,  #430807 100%);
	border-top:solid 1px #FFFFCC;
	border-bottom:solid 1px #FFFFCC;
	color:#fff;
	padding:8px;
}
.red2_box {
background: #870503;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#870503', endColorstr='#430807');
background: -ms-linear-gradient(center top , #870503 10%,  #430807 100%);
background-image: -webkit-linear-gradient(bottom, #870503 10%,  #430807 100%);
background: -moz-linear-gradient(center top , #430807 0%, #870503 100%);
background-image: -o-linear-gradient(bottom, #870503 10%,  #430807 100%);
	border-top:solid 1px #FFFFCC;
	border-bottom:solid 1px #FFFFCC;
	color:#fffccc;
	padding:8px;
}
.red3_box {
background: #E1BFB7;
	color:#646464;
	padding:8px;
}
.text_a{
color:#fff;
text-shadow: 0 1px 0 #ccc,
               0 1px 0 #c9c9c9,
               0 1px 0 #bbb,
               0 1px 0 #b9b9b9,
               0 1px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}
.text_b{
color:#fff;
text-shadow: 0 1px 0 #ccc,
               0 1px 0 #c9c9c9,
               0 1px 0 #bbb,
               0 1px 0 #b9b9b9,
               0 1px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}
.text_b:hover  {
	color: #CC0000 none repeat scroll 0%;
}
.text_no {
    color:#fff;
}
/* +++ Style для таблиц center +++ */
.td_rezin_center {width: 100%; text-align: center;}
.td_rezin_center td {padding: 0.6rem 1rem;}
@media screen and (max-width: 800px) {
.td_rezin_center thead {display: none;}
.td_rezin_center tr {display: block; margin-bottom: 1rem;}
.td_rezin_center td {display: block;}
.td_rezin_center td:before {content: attr(aria-label); float: left;}
}
/* +++ Style для таблиц без выравнивания по center +++ */
.td_rezin {width: 100%;}
.td_rezin td {padding: 0.6rem 1rem;}
@media screen and (max-width: 800px) {
.td_rezin thead {display: none;}
.td_rezin tr {display: block; margin-bottom: 1rem;}
.td_rezin td {display: block;}
.td_rezin td:before {content: attr(aria-label); float: left;}
}
/* +++++++ CSS  style END  ++++++ */

Как создать свои шрифты и избавиться от шрифтов гугл и любого обращения к их CDN и Как создать свою less тему в yootheme pro на основе существующей? = https://hika.su/blog/kak-sozdat-svoyu-less-temu-v-yootheme-pro-na-osnove-sushchestvuyushej#kak-sozdat-pereopredelenie-dlya-less-fajla-osnovnoj-temy-yootheme-pro

Скачать шрифт и CSS = https://gwfh.mranftl.com/fonts/roboto-serif?subsets=cyrillic-ext,latin

===
Конструктор форм и квизов. Принимайте заказы с сайта, Facebook, ВК, Instagram и любого мессенджера, изучайте свою аудиторию и помогайте ей с выбором. https://stepform.io/ru

-------------

Создание форм от = https://docs.google.com/forms/
Удобный конструктор кнопок "Поделиться" и "Мне нравится" для вашего сайта https://usocial.pro/

Соц-сети самодел снизу

Учим Базы Данных за 1 час! #От Профессионала =  Учим Базы Данных за 1 час! #От Профессионала
Командная строка = %windir%\system32\cmd.exe
Установка Apache 2.4, PHP 7.3, MySQL 8 и phpMyAdmin = Установка MySQL и phpMyAdmin
Установка MySQL и phpMyAdmin = https://www.youtube.com/watch?v=QiAzu3lfOj0
denwer джентльменский набор web-разработчика = https://github.com/liberborn/denwer
Скачать denwer  ? = http://www.denwer.ru/ Установка denwer = http://www.denwer.ru/base.html
 localhost = https://yandex.ru/search/?from=chromesearch&clid=2196598&text=localhost&lr=10746  = https://www.phpmyadmin.net = https://windows.php.net
https://demo.phpmyadmin.net/master-config/ 
https://www.mysql.com/ 
https://dev.mysql.com/doc/refman/8.0/en/data-directory-initialization.html
localhost = https://yandex.ru/search/?from=chromesearch&clid=2196598&text=localhost&lr=10746 
Создание типовой базы данных MySQL в PHPmyAdmin = https://www.youtube.com/watch?v=XaKpFyLnS8E
#10 Связи между таблицами в phpMyAdmin на MySQL, Базы данных MySQL = https://www.youtube.com/watch?v=t8urNZJpWhE&t=92s
Как связать таблицы в phpmyadmin - mysql = https://yandex.ru/video/preview/11117949874167868590
и здесь= https://www.youtube.com/watch?v=2EmdP8sn_Aw
Уроки MS SQL Server. Отношения между таблицами = https://www.youtube.com/watch?v=KHbPWLgc_80

Настройка цвета букв строки кода < > находится в YOOtheme - НАСТРОЙКИ - ЕЩЕ - ПОДСВЕТКА СИНТАКСИСА = none и потом в настройке самого кода - на данный момент присвоил класс blak_box

<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSei1beQv3CG2HQ6yQU8ELk-CDpI9ilXw6PQPyh339HiOjVmJg/viewform?embedded=true" width="640" height="1052" frameborder="0" marginheight="0" marginwidth="0">Загрузка…</iframe>

Расположенный выше на чёрном фоне это Код фрейма созданного мной на сервисе = https://docs.google.com/forms/

Загрузка…

Ниже пример обязательного кода для вставки на сайт от schema.org. Не открывать в редакторе - не сохраняется вставлять кодом) Прописать стиль class="display_none"

<div itemscope="" itemtype="https://schema.org/Organization">
    <div class="display_none" itemprop="address" itemscope="" itemtype="https://schema.org/PostalAddress">
        <span itemprop="name">Создание и продвижение сайтов</span>
        <span itemprop="postalCode">Здесь индекс, например = 142500</span>
        <span itemprop="addressLocality">Здесь регион, например = Московская область,</span>
		<span itemprop="streetAddress">Здесь адрес, например = Павловский Посад, ул. Привокзальная дом 1.</span>
        <span itemprop="telephone">(Здесь номер телефона организации) Например +7 555 555-55-55</span>
        <span itemprop="email">Здесь имя почты например Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в вашем браузере должен быть включен Javascript.</span>
</div>

<div itemscope="" itemtype="https://schema.org/Organization">
    <div class="display_none" itemprop="address" itemscope="" itemtype="https://schema.org/PostalAddress">
        <span itemprop="name">Создание и продвижение сайтов</span>
        <span itemprop="postalCode">Здесь индекс, например = 142500</span>
        <span itemprop="addressLocality">Здесь регион, например = Московская область,</span>
		<span itemprop="streetAddress">Здесь адрес, например = Павловский Посад, ул. Привокзальная дом 1.</span>
        <span itemprop="telephone">(Здесь номер телефона организации) Например +7 555 555-55-55</span>
        <span itemprop="email">Здесь имя почты например Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в вашем браузере должен быть включен Javascript.</span>
</div>