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

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

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

Настройка цвета букв строки кода < > находится в 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>

Настройка цвета букв строки кода < > находится в 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">
 <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">
        <jdoc:include type="head" />
 </head>

Пример на фото = https://alex3.krugloff.ru/images/body.jpg

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-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 */
  src: url('../fonts/Roboto local.woff2') format('woff2'), /* Super Modern Browsers */
  src: url('../fonts/Roboto local.woff') format('woff'), /* Modern Browsers */
  src: url('../fonts/Roboto local.ttf') format('truetype'), /* Safari, Android, iOS */
  src: url('../fonts/Roboto local.svg#Roboto') format('svg'); /* Legacy iOS */
      font-display: swap;
}
@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

===
Конструктор форм и квизов. Принимайте заказы с сайта, 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

Contact Directions FAQs Merchandise Whiskey Drop

ПОЗИЦИЯ FOOTER

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+7 926 532-20-50

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

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

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