caster
armenia rusia usa
caster

Caster

Հայկական առաջին CSS և JS ֆրեմվորկ


Ինչ է իրենից ներկայացնում Caster ֆրեմվորկը

Caster-ը հայկական առաջին ֆրեմվորկն է այն կրճատում է ձեր CSS և JS կոդը։ Այն աշխատում է հետևյալ տրամաբանությամբ՝ ստեղծվաց է հատուկ կլասների անուներ որոնք կատարում են տարբեր ֆունկցիաներ դուք տեղադրում եք Caster-ի կապող լինկը ձեր HTML ֆայլի մեջ և ձեր բլոկներին տալիս եք այդ կլասների անուները։

Ինչպես կապել Caster-ը HTML ֆայլին

Կա 2 կարևոր ֆայլեր որոնք պետք է կցել HTML-ին մեկը CSS-ն է մյուսը JS-ը, առանց դրանք կցելու ոչ մի բան չի աշխատի։

CSS-ը

Սա պատճենեք(copy) է տեղադրեք HTML ֆայլի <head> թեգի մեջ

<link rel="stylesheet" href="https://gormkrtchyann.github.io/caster/cdn/caster.css">

JS-ը

Սա պատճենեք(copy) է տեղադրեք HTML ֆայլի <body> թեգի նեքևում

<script src="https://gormkrtchyann.github.io/caster/cdn/caster.js"></script>



Կոդերի Անվանուները

Container

  • cont Լայնություն 95%, վարևից և նեքևից 30px հեռավորություն, հավասարեցված կենտրոն
  • cont-s Լայնություն 80%, վարևից և նեքևից 30px հեռավորություն, հավասարեցված կենտրոն
  • cont-m Լայնություն 90%, վարևից և նեքևից 30px հեռավորություն, հավասարեցված կենտրոն

  • cont-x Լայնություն 0%, վարևից և նեքևից 30px հեռավորություն, հավասարեցված կենտրոն
  • cont-xs Լայնություն 0%, վարևից և նեքևից 10px հեռավորություն, հավասարեցված կենտրոն
  • cont-xm Լայնություն 0%, վարևից և նեքևից 20px հեռավորություն, հավասարեցված կենտրոն

  • cont-y Լայնություն 95%, վարևից և նեքևից 0px հեռավորություն, հավասարեցված կենտրոն
  • cont-ys Լայնություն 80%, վարևից և նեքևից 0px հեռավորություն, հավասարեցված կենտրոն
  • cont-ym Լայնություն 90%, վարևից և նեքևից 0px հեռավորություն, հավասարեցված կենտրոն

FlexBox

  • flex display: flex-ի փոխարեն

  • jc-fs justify-content: flex-start-ի փոխարեն կատարում է նաև աֆտոմատ display: flex
  • jc-fe justify-content: flex-end-ի փոխարեն կատարում է նաև աֆտոմատ display: flex
  • jc-c justify-content: center-ի փոխարեն կատարում է նաև աֆտոմատ display: flex
  • jc-sb justify-content: space-between-ի փոխարեն կատարում է նաև աֆտոմատ display: flex
  • jc-sa justify-content: space-around-ի փոխարեն կատարում է նաև աֆտոմատ display: flex
  • jc-se justify-content: space-evenly-ի փոխարեն կատարում է նաև աֆտոմատ display: flex

  • fd-r flex-direction: row-ի փոխարեն կատարում է նաև աֆտոմատ display: flex
  • fd-rr flex-direction: row-reverse-ի փոխարեն կատարում է նաև աֆտոմատ display: flex
  • fd-c flex-direction: column-ի փոխարեն կատարում է նաև աֆտոմատ display: flex
  • fd-cr flex-direction: column-reverse-ի փոխարեն կատարում է նաև աֆտոմատ display: flex

  • fw-nw flex-wrap: nowrap-ի փոխարեն կատարում է նաև աֆտոմատ display: flex
  • fw-w flex-wrap: wrap-ի փոխարեն կատարում է նաև աֆտոմատ display: flex
  • fw-wr flex-wrap: wrap-reverse-ի փոխարեն կատարում է նաև աֆտոմատ display: flex

  • ai-s align-items: stretch-ի փոխարեն կատարում է նաև աֆտոմատ display: flex
  • ai-c align-items: center-ի փոխարեն կատարում է նաև աֆտոմատ display: flex
  • ai-fs align-items: flex-start-ի փոխարեն կատարում է նաև աֆտոմատ display: flex
  • ai-fe align-items: flex-end-ի փոխարեն կատարում է նաև աֆտոմատ display: flex
  • ai-b align-items: baseline-ի փոխարեն կատարում է նաև աֆտոմատ display: flex

  • ac-s align-content: stretch-ի փոխարեն կատարում է նաև աֆտոմատ display: flex
  • ac-fs align-content: flex-start-ի փոխարեն կատարում է նաև աֆտոմատ display: flex
  • ac-fe align-content: flex-end-ի փոխարեն կատարում է նաև աֆտոմատ display: flex
  • ac-c align-content: center-ի փոխարեն կատարում է նաև աֆտոմատ display: flex
  • ac-sb align-content: space-between-ի փոխարեն կատարում է նաև աֆտոմատ display: flex
  • ac-sa align-content: space-around-ի փոխարեն կատարում է նաև աֆտոմատ display: flex
  • ac-se align-content: space-evenly-ի փոխարեն կատարում է նաև աֆտոմատ display: flex

Հավասրեցում

  • vhc հավասրեցնում է մեջտեղ ուղահայաց և հորիզոնական բայց երբ որ կոնտենտը պետք է կենտրոննա էկրանի կենտրոնում
  • dfc-x հավասրեցնում է մեջտեղ ուղահայաց և հորիզոնական և նրա մեջ գտնվող բլոկները դասավորվում են հորիզոնական
  • dfc-y հավասրեցնում է մեջտեղ ուղահայաց և հորիզոնական և նրա մեջ գտնվող բլոկները դասավորվում են ուղահայաց

Հղումներ

  • al հեռացնում է ընդգծվածությունը և գույնը դարձնում սև

Տեքստեր

Այստեղ բոլոր h-երը կարող եք գրել բոլոր տեքստային թեգերի և բլոկների որպես կլաս

  • h1 ամենամեծ վերնագիրը՝ 32px, ունի նաև րինսպոնսիվություն(էկրաների հանդեպ զգայնություն)
  • h2 ամենամեծ եկրորդական վերնագիրը՝ 25px, ունի նաև րինսպոնսիվություն(էկրաների հանդեպ զգայնություն)
  • h3 միջին չափի վերնագիր՝ 19px, ունի նաև րինսպոնսիվություն(էկրաների հանդեպ զգայնություն)
  • h4 միջին չափի վերնագիր՝ 16px, ունի նաև րինսպոնսիվություն(էկրաների հանդեպ զգայնություն)
  • h5 փոքր չափի վերնագիր՝ 14px, ունի նաև րինսպոնսիվություն(էկրաների հանդեպ զգայնություն)
  • h6 փոքր չափի վերնագիր՝ 11px, չունի րինսպոնսիվություն(էկրաների հանդեպ զգայնություն)

Կան նաև ավելի մեծ տառաչափեր բոլոր տեքստային թեգերի և բլոկների համար

  • fs-s ամենափոքր չափը այս շարքից բայց մեծ է վերանգրերից ՝ 35px, ունի նաև րինսպոնսիվություն(էկրաների հանդեպ զգայնություն)
  • fs-m միջին չափը այս շարքից բայց մեծ է վերանգրերից ՝ 45px, ունի նաև րինսպոնսիվություն(էկրաների հանդեպ զգայնություն)
  • fs-l ամենամեծ չափը այս շարքից և մեծ է վերանգրերից ՝ 55px, ունի նաև րինսպոնսիվություն(էկրաների հանդեպ զգայնություն)

Ստեղծվաց են նաև տեքստին ձևավորում ավելացնող HTML թեգեր

  • <td-c> </td-c> այս թեգի ներսում գրված տեքստին տալիս է այս տեսքը Text
  • Այս թեգի ձևավորման գույները կարող եք փոխել ավելացնելով այս կլասները թեգին blue, green, yellow, orange, purple, white, black

  • <td-r> </td-r> այս թեգի ներսում գրված տեքստին տալիս է այս տեսքը Text

      Այս թեքի ներսում գրված տեքստը և նրա ձևավորում կարող եք թեքել աջ կամ ձախ գրելով այս կլասները թեգին

    • toleft թեքում է դեպի ձախ Text
    • toleft թեքում է դեպի աջ Text
  • Այս թեգի ձևավորման գույները նույնպես կարող եք փոխել ավելացնելով այս կլասները թեգին blue, green, yellow, orange, purple, white, black


Կոճակներ

Բոլոր կոճակները ստանում են cursor: pointer հատկությունը, padding, :hover, շոխք(shadow)

  • btn-n Վերևից և ներքևից 7px աջից և ձախից 30px ներքին hեռավորություն(padding)
  • btn-m Վերևից և ներքևից 10px աջից և ձախից 40px ներքին hեռավորություն(padding)
  • btn-l Վերևից և ներքևից 15px աջից և ձախից 50px ներքին hեռավորություն(padding)

  • btn Վերևից և ներքևից 8px աջից և ձախից 30px ներքին hեռավորություն(padding), նարնջագույն
  • btn-cr Վերևից և ներքևից 8px աջից և ձախից 30px ներքին hեռավորություն(padding), կարմիր
  • btn-cb Վերևից և ներքևից 8px աջից և ձախից 30px ներքին hեռավորություն(padding), կապույտ
  • btn-cg Վերևից և ներքևից 8px աջից և ձախից 30px ներքին hեռավորություն(padding), կանաչ
  • btn-c0 Վերևից և ներքևից 8px աջից և ձախից 30px ներքին hեռավորություն(padding), սև
  • btn-cf Վերևից և ներքևից 8px աջից և ձախից 30px ներքին hեռավորություն(padding), սպիտակ

  • btn-sky Վերևից և ներքևից 8px աջից և ձախից 30px ներքին hեռավորություն(padding), կապույտ և մանուշակակգույն gradient
  • btn-fier Վերևից և ներքևից 8px աջից և ձախից 30px ներքին hեռավորություն(padding), կարմիր և նարնջագույն gradient
  • btn-forest Վերևից և ներքևից 8px աջից և ձախից 30px ներքին hեռավորություն(padding), կանաչի 2 երանգներով gradient
  • btn-sea Վերևից և ներքևից 8px աջից և ձախից 30px ներքին hեռավորություն(padding), կապույտի 2 երանգներով gradient կենտրոնացված դեպի կենտրոն

Մոբայլ Մենյու

Այստեղ բոլոր մոբայլ մենյուները scroll լինելուց անհետանում են

  • mobile-open Սա այն կոճակն է որը պետք է բացի մենյուն, այս կլասին անվանումը տվեք <div> թեգին։ / Հիմնական տեսքը
  • mobile-open bars-short Այլ տարբերակ
  • mobile-open bars-filter Այլ տարբերակ
  • mobile-open bars-stag Այլ տարբերակ
  • Կոճակնորն ունեն սկզբնական սև գույն որը կարող եք փոխել գրելով սա css ֆայլում .mobile-open div{background: #fff;}


  • mobile-close Սա մենյուն փակող կոճակն է
  • Այն սկզբնական սև գույն որը կարող եք փոխել գրելով սա css ֆայլում .mobile-close div{background: #fff;}


  • mobile-menu Սա մոբայլ մենյուի կմախքն է

Ինչպես հավաքել մոբայլ մենյու

mobile-open բլոկը կարող եք տաղադրեք այնտեղ որտեղ ուզում եք։

<div class="mobile-open" ></div>

<div class="mobile-menu">
<div class="mobile-close"></div>
<ul>
<li><a href="">Link 1></li>
<li><a href="">Link 2></li>
<li><a href="">Link 3></li>
<li><a href="">Link 4></li>
<li><a href="">Link 5></li>
<li><a href="">Link 6></li>
<ul>
</div>



Մոբայ մենյու տարբերակ 2

Այստեղ թվերի փոխարեն ցանկալի է icon-ներ տեղադրել

<div class="mobile-menu-cr">
<div class="mm-cr-logo"></div>
<ul>
<li><a href="">1></li>
<li><a href="">2></li>
<li><a href="">3></li>
<li><a href="">4></li>
<li><a href="">5></li>
<li><a href="">6></li>
<ul>
</div>


rusia armenia usa
caster

Caster

Первый армянский CSS и JS фреймворк


Что такое Caster фремворк

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

Как связать Caster с файлом HTML

Есть 2 важных файла которые нужно прикрепить к HTML один-это CSS другой JS, без их добавления ничего не получится

CSS

Это скопировать(copy), чтобы вставить HTML файл <head> в теге

<link rel="stylesheet" href="https://gormkrtchyann.github.io/caster/cdn/caster.css">

JS

Это скопировать (копировать), чтобы вставить HTML файл <body> тегов

<script src="https://gormkrtchyann.github.io/caster/cdn/caster.js"></script>



Кодовые Имена

Container

  • cont Ширина 95%, расстояние от верхней и нижней сторон 30px, выровненный центр
  • cont-s Ширина 80%, расстояние от верхней и нижней сторон 30px, выровненный центр
  • cont-m Ширина 90%, расстояние от верхней и нижней сторон 30px, выровненный центр

  • cont-x Ширина 0%, расстояние от верхней и нижней сторон 30px, выровненный центр
  • cont-xs Ширина 0%, расстояние от верхней и нижней сторон 10px, выровненный центр
  • cont-xm Ширина 0%, расстояние от верхней и нижней сторон 20px, выровненный центр

  • cont-y Ширина 95%, расстояние от верхней и нижней сторон 0px, выровненный центр
  • cont-ys Ширина 80%, расстояние от верхней и нижней сторон 0px, выровненный центр
  • cont-ym Ширина 90%, расстояние от верхней и нижней сторон 0px, выровненный центр

FlexBox

  • flex display: flex

  • jc-fs justify-content: flex-start, афтомат display: flex
  • jc-fe justify-content: flex-end, афтомат display: flex
  • jc-c justify-content: center, афтомат display: flex
  • jc-sb justify-content: space-between, афтомат display: flex
  • jc-sa justify-content: space-around, афтомат display: flex
  • jc-se justify-content: space-evenly, афтомат display: flex

  • fd-r flex-direction: row, афтомат display: flex
  • fd-rr flex-direction: row-reverse, афтомат display: flex
  • fd-c flex-direction: column, афтомат display: flex
  • fd-cr flex-direction: column-reverse, афтомат display: flex

  • fw-nw flex-wrap: nowrap, афтомат display: flex
  • fw-w flex-wrap: wrap, афтомат display: flex
  • fw-wr flex-wrap: wrap-reverse, афтомат display: flex

  • ai-s align-items: stretch, афтомат display: flex
  • ai-c align-items: center, афтомат display: flex
  • ai-fs align-items: flex-start, афтомат display: flex
  • ai-fe align-items: flex-end, афтомат display: flex
  • ai-b align-items: baseline, афтомат display: flex

  • ac-s align-content: stretch, афтомат display: flex
  • ac-fs align-content: flex-start, афтомат display: flex
  • ac-fe align-content: flex-end, афтомат display: flex
  • ac-c align-content: center, афтомат display: flex
  • ac-sb align-content: space-between, афтомат display: flex
  • ac-sa align-content: space-around, афтомат display: flex
  • ac-se align-content: space-evenly, афтомат display: flex

Выравнивание

  • vhc выравнивает середину прямой и горизонтальный но когда контент должен быть в центре экрана
  • dfc-x выравнивает середину прямой и горизонтальный и блоки в нем расположены горизонтально
  • dfc-y выравнивает середину прямой и горизонтальный и блоки в ней располагаются в направлении

Ссылки

  • al удаляет блики и делает цвет черным

Тексты

Здесь вы можете написать все h для всех текстовых тегов и блоков как класс

  • h1 самая большая название, 32px, также имеет rinsponsivity(чувствительность к экранам)
  • h2 самая большая название версия 2, 25px, также имеет rinsponsivity(чувствительность к экранам)
  • h3 название среднего размера, 19px, также имеет rinsponsivity(чувствительность к экранам)
  • h4 название среднего размера 2, 16px, также имеет rinsponsivity(чувствительность к экранам)
  • h5 малогабаритный название, 14px, также имеет rinsponsivity(чувствительность к экранам)
  • h6 малогабаритный название: 11px, без rinsponsivity(чувствительность к экранам)

Есть также большие размеры букв для всех текстовых тегов и блоков

  • fs-s самый маленький размер из этой серии, но больше, чем у римейков, 35px, также имеет rinsponsivity(чувствительность к экранам)
  • fs-m средний размер из этой серии, но больше, чем у римейков, 45px, также имеет rinsponsivity(чувствительность к экранам)
  • fs-l самый большой размер из этой серии и большой из римейков, 55px, также имеет rinsponsivity(чувствительность к экранам)

Также созданы HTML-теги, добавляющие дизайн к тексту

  • <td-c> </td-c> придает тексту, написанному внутри этого тега, такой вид Text
  • Вы можете изменить цвета этого дизайна тегов, добавив эти классы в тег blue, green, yellow, orange, purple, white, black

  • <td-r> </td-r> придает тексту, написанному внутри этого тега, такой вид Text

      Вы можете повернуть направо или налево, написав эти классы в теге

    • toleft согнуть к левому Text
    • toleft согнуть к вправо Text
  • Вы также можете изменить цвета этого дизайна тегов, добавив эти классы в тег blue, green, yellow, orange, purple, white, black


Кнопки

Все кнопки получают cursor: pointer функция, padding, :hover, тень(shadow)

  • btn-n Внутреннее расстояние(padding) 7px сверху и снизу справа и 30px слева
  • btn-m Внутреннее расстояние(padding) 10px сверху и снизу справа и 40px слева
  • btn-l Внутреннее расстояние(padding) 15px сверху и снизу справа и 50px слева

  • btn Внутреннее расстояние(padding) 8px сверху и снизу справа и 30px слева, оранжевый
  • btn-cr Внутреннее расстояние(padding) 8px сверху и снизу справа и 30px слева, красный
  • btn-cb Внутреннее расстояние(padding) 8px сверху и снизу справа и 30px слева, синий
  • btn-cg Внутреннее расстояние(padding) 8px сверху и снизу справа и 30px слева, зеленый
  • btn-c0 Внутреннее расстояние(padding) 8px сверху и снизу справа и 30px слева, черный
  • btn-cf Внутреннее расстояние(padding) 8px сверху и снизу справа и 30px слева, белый

  • btn-sky Внутреннее расстояние(padding) 8px сверху и снизу справа и 30px слева, синий и фиолетовый gradient
  • btn-fier Внутреннее расстояние(padding) 8px сверху и снизу справа и 30px слева, красный и оранжевый gradient
  • btn-forest Внутреннее расстояние(padding) 8px сверху и снизу справа и 30px слева, 2 оттенка зеленого gradient
  • btn-sea Внутреннее расстояние(padding) 8px сверху и снизу справа и 30px слева, 2 оттенка синего gradient сосредоточено в центре

Мобильное Меню

Здесь все мобильные меню scroll исчезают

  • mobile-open Это та кнопка, которая должна открыть меню, дайте этому классу имя в теге <div>. / Основной вид
  • mobile-open bars-short Другой вариант
  • mobile-open bars-filter Другой вариант
  • mobile-open bars-stag Другой вариант
  • Кнопка, которая имеет исходный черный цвет что вы можете изменить, написав это в файле css .mobile-open div{background: #fff;}


  • mobile-close Это кнопка закрытия меню
  • В исходный черный цвет что вы можете изменить, написав это в файле css .mobile-close div{background: #fff;}


  • mobile-menu Это скелет мобильного меню

Как собрать мобильное меню

mobile-open вы можете поставить блок там, где хотите.

<div class="mobile-open" ></div>

<div class="mobile-menu">
<div class="mobile-close"></div>
<ul>
<li><a href="">Link 1></li>
<li><a href="">Link 2></li>
<li><a href="">Link 3></li>
<li><a href="">Link 4></li>
<li><a href="">Link 5></li>
<li><a href="">Link 6></li>
<ul>
</div>



Мобай меню Вариант 2

Здесь вместо цифр желательно вставлять иконки

<div class="mobile-menu-cr">
<div class="mm-cr-logo"></div>
<ul>
<li><a href="">1></li>
<li><a href="">2></li>
<li><a href="">3></li>
<li><a href="">4></li>
<li><a href="">5></li>
<li><a href="">6></li>
<ul>
</div>


usa rusia armenia
caster

Caster

The first Armenian CSS and JS framework


What is Caster framework

Caster is the first Armenian framework that shortens your CSS and JS code. It works according to the following logic: a special class has been created names that perform various functions, you insert the Caster link into your HTML file and give your blocks the names of these classes.

How to link Caster to an HTML file

There are 2 important files that need to be attached to HTML, one is CSS, the other is JS, without adding them nothing will work

CSS

This is a copy to paste the HTML file <head> in the tag

<link rel="stylesheet" href="https://gormkrtchyann.github.io/caster/cdn/caster.css">

JS

This is a copy to paste the HTML file <body> tags

<script src="https://gormkrtchyann.github.io/caster/cdn/caster.js"></script>



Code Names

Container

  • cont Width 95%, distance from top and bottom sides 30px, aligned center
  • cont-s Width 80%, distance from top and bottom sides 30px, aligned center
  • cont-m Width 90%, distance from top and bottom sides 30px, aligned center

  • cont-x Width 0%, distance from top and bottom sides 30px, aligned center
  • cont-xs Width 0%, distance from top and bottom sides 10px, aligned center
  • cont-xm Width 0%, distance from top and bottom sides 20px, aligned center

  • cont-y Width 95%, distance from top and bottom sides 0px, aligned center
  • cont-ys Width 80%, distance from top and bottom sides 0px, aligned center
  • cont-ym Width 90%, distance from top and bottom sides 0px, aligned center

FlexBox

  • flex display: flex

  • jc-fs justify-content: flex-start, aftomat display: flex
  • jc-fe justify-content: flex-end, aftomat display: flex
  • jc-c justify-content: center, aftomat display: flex
  • jc-sb justify-content: space-between, aftomat display: flex
  • jc-sa justify-content: space-around, aftomat display: flex
  • jc-se justify-content: space-evenly, aftomat display: flex

  • fd-r flex-direction: row, aftomat display: flex
  • fd-rr flex-direction: row-reverse, aftomat display: flex
  • fd-c flex-direction: column, aftomat display: flex
  • fd-cr flex-direction: column-reverse, aftomat display: flex

  • fw-nw flex-wrap: nowrap, aftomat display: flex
  • fw-w flex-wrap: wrap, aftomat display: flex
  • fw-wr flex-wrap: wrap-reverse, aftomat display: flex

  • ai-s align-items: stretch, aftomat display: flex
  • ai-c align-items: center, aftomat display: flex
  • ai-fs align-items: flex-start, aftomat display: flex
  • ai-fe align-items: flex-end, aftomat display: flex
  • ai-b align-items: baseline, aftomat display: flex

  • ac-s align-content: stretch, aftomat display: flex
  • ac-fs align-content: flex-start, aftomat display: flex
  • ac-fe align-content: flex-end, aftomat display: flex
  • ac-c align-content: center, aftomat display: flex
  • ac-sb align-content: space-between, aftomat display: flex
  • ac-sa align-content: space-around, aftomat display: flex
  • ac-se align-content: space-evenly, aftomat display: flex

Alignment

  • vhc aligns the middle vertical and horizontal but when the content should be in the center of the screen
  • dfc-x aligns the middle vertical and horizontal and the blocks in it are arranged horizontally
  • dfc-y aligns the middle vertical and horizontal and the blocks in it are arranged vertical

Links

  • al removes decoretion and turns the color black

Texts

Here you can write all h for all text tags and blocks as a class

  • h1 the biggest header, 32px, also has a rinsponsivity (sensitivity to screens)
  • h2 the largest header version 2, 25px, also has a rinsponsivity (sensitivity to screens)
  • h3 the medium size header, 19px, also has a rinsponsivity (sensitivity to screens)
  • h4 the medium size header, 16px, also has a rinsponsivity (sensitivity to screens)
  • h5 the small size header, 14px, also has a rinsponsivity (sensitivity to screens)
  • h6 the small size header, 11px, also has a rinsponsivity (sensitivity to screens)

There are also large letter sizes for all text tags and blocks

  • fs-s the smallest size of this series, but larger than headers, 35px, also has a rinsponsivity (sensitivity to screens)
  • fs-m the average size of this series, but larger than headers, 45px, also has a rinsponsivity (sensitivity to screens)
  • fs-l the largest size of this series and the largest of headers is 55px, also has a rinsponsivity (sensitivity to screens)

HTML tags have also been created that add design to the text

  • <td-c> </td-c> gives the text written inside this tag the following appearance Text
  • You can change the colors of this tag design by adding these classes to the tag blue, green, yellow, orange, purple, white, black

  • <td-r> </td-r> gives the text written inside this tag the following appearance Text

      You can turn right or left by writing these classes in the tag

    • toleft bend to the left Text
    • toleft bend to the right Text
  • You can also change the colors of this tag design by adding these classes to the tag blue, green, yellow, orange, purple, white, black


Buttons

All buttons get cursor: pointer function, padding, :hover, shadow

  • btn-n Padding is 7px on the top and bottom 30px on the left and right
  • btn-m Padding is 10px on the top and bottom 40px on the left and right
  • btn-l Padding is 15px on the top and bottom 50px on the left and right

  • btn Padding is 8px on the top and bottom 30px on the left and right, orange
  • btn-cr Padding is 8px on the top and bottom 30px on the left and right, red
  • btn-cb Padding is 8px on the top and bottom 30px on the left and right, blue
  • btn-cg Padding is 8px on the top and bottom 30px on the left and right, green
  • btn-c0 Padding is 8px on the top and bottom 30px on the left and right, black
  • btn-cf Padding is 8px on the top and bottom 30px on the left and right, white

  • btn-sky Padding is 8px on the top and bottom 30px on the left and right, blue and purple gradient
  • btn-fier Padding is 8px on the top and bottom 30px on the left and right, red and orange gradient
  • btn-forest Padding is 8px on the top and bottom 30px on the left and right, 2 shades of green gradient
  • btn-sea Padding is 8px on the top and bottom 30px on the left and right, 2 shades of blue gradient concentrated in the center

Mobile Menu

Here all mobile scroll menus disappear

  • mobile-open This is the button that should open the menu, give this class a name in the <div> tag. / Main view
  • mobile-open bars-short Another option
  • mobile-open bars-filter Another option
  • mobile-open bars-stag Another option
  • A button that has the original black color that you can change by writing it in a css file .mobile-open div{background: #fff;}


  • mobile-close This is the menu close button
  • In the original black color that you can change by writing it in a css file .mobile-close div{background: #fff;}


  • mobile-menu This is the skeleton of the mobile menu

How to build a mobile menu

mobile-open you can put the block where you want.

<div class="mobile-open" ></div>

<div class="mobile-menu">
<div class="mobile-close"></div>
<ul>
<li><a href="">Link 1></li>
<li><a href="">Link 2></li>
<li><a href="">Link 3></li>
<li><a href="">Link 4></li>
<li><a href="">Link 5></li>
<li><a href="">Link 6></li>
<ul>
</div>



Mobile Menu Option 2

Here, instead of numbers, it is advisable to insert icons

<div class="mobile-menu-cr">
<div class="mm-cr-logo"></div>
<ul>
<li><a href="">1></li>
<li><a href="">2></li>
<li><a href="">3></li>
<li><a href="">4></li>
<li><a href="">5></li>
<li><a href="">6></li>
<ul>
</div>