подключение шрифтов

.htaccess

@@ -0,0 +1,14 @@
+<IfModule mod_rewrite.c>
+    # Редирект: ...// -> .../
+    RewriteCond %{REQUEST_URI} (.*)\/\/$
+    RewriteRule ^(.*)$ https://%{HTTP_HOST}/%1/ [R=301,L]
+
+    # Редирект: с www -> без www
+    RewriteCond %{HTTP_HOST} ^www\.(.*)$
+    RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L]
+
+    # Редирект: HTTP -> HTTPS
+    RewriteCond %{HTTP:X-Forwarded-Proto} !https
+    RewriteCond %{HTTPS} off
+    RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
+</IfModule>

README.md

@@ -1,6 +1,6 @@
-## Требования к верстке
+## **Требования к верстке**
 
-### С точки зрения веб-разработки:
+### **С точки зрения веб-разработки:**
 * верстаем на чистом HTML/CSS с использованием flex и grid (без подключение библиотек типа bootstrap и т.п.)
 * при именовании блоков используем методологию **БЭМ в стиле "Two Dashes"**:
     `block-name__elem-name--mod-name--mod-val`
@@ -11,10 +11,10 @@
     + значение модификатора отделяется от его имени двумя дефисами (--)
 * из конечного HTML-файла убрать все комментарии, если такие имеются 
 * все медиазапросы пишутся в отдельных файлах (которые мы подготовили) для того чтобы оптимизировать скорость загрузки; если используется препроцессор, то не нужно в классе каждого блока использовать импорты медиа запросов, а наоборот выносим  пример можно посмотреть на ["видео"](https://www.youtube.com/watch?v=9uaENbRyVT4)
-<!-- * для всех страниц прописывать уникальный класс в \<body\>, от которого строить CSS-правила  -->
+* **ВАЖНО:** если верстка делается для многостраничного сайта (особенно на CMS), то для всех страниц прописывать уникальный класс в \<body\>, от которого строить все CSS-правила на этой странице + для кажой станицы использовать свои отдельные CSS-файлы   
 
 
-### С точки зрения SEO:
+### **С точки зрения SEO:**
 * все теги использовать строго по назначению! Текстовые (strong, b, i, em, h1-h6… p) используем только в текстовых блоках и заголовках. Для дизайна используем div и span. Например не нужно втыкать в подвал, шапку или формы захвата h4 или закрывать просто крупный текст, который не является заголовком в h2.
 * на странице должен быть только один заголовок первого уровня (h1) 
 * должны присутствовать все основные теги и атрибуты — html, head, body, title, description, lang=ru, content=html, charset=utf8
@@ -22,9 +22,9 @@
 * для \<img\> самостоятельно проставляем атрибут alt="", со значением описывающим того что изображено на картинке
 
 
-## Порядок работы
+## **Порядок работы**
 
-### Подготовка окружения для локальной разработки
+### **Подготовка окружения для локальной разработки**
 1. Выкачивать локально на свой компьютер шаблон командой: `git clone https://git.good-production.xyz/Good-Production/template-for-verstka.git`
 2. Далее создать свою ветку командой: `git checkout -b ${project_name}--${name}`
 3. Приступить к локальной разработке в созданной ветке
@@ -37,7 +37,7 @@
 `${name}` -- имя/ник исполнителя
 
 
-## Оптимальный порядок непосредственно в процессе верстки
+## **Оптимальный порядок непосредственно в процессе верстки**
 1. Сначала определить CSS-переменные для основных цветов/градиентов, начертаний шрифтов (толщина, размер, модификация, межтрочный интервал) и занести в специально подгтовленный CSS-файл `style-core.css` 
 2. Все шрифты выкачать и сохранить локально в директорию `/assets/fonts/` и подключить их в файле `style-core.css`
 3. Далее начинать стоит с верстки UI kit (должен быть предоставлен в макете дизайнером), для того чтобы переиспользовать готовые элементы по ходу верстки макетов. Стили для UI kit писать так же в файл `style-core.css`. 
@@ -45,6 +45,6 @@
 3. Как UI kit будет готов, можно смело переходить к верстке основных листов макета "*.html" и просто использовать готовые классы из `style-core.css`
 
 
-### Примечания
+### **Примечания**
 
 Для работы с Figma рекомендуем использовать плагин ["Inspect Styles"](https://www.figma.com/community/plugin/1254262542670221199) для инспевтирования CSS-свойсв.

assets/css/gp-style-core.css

@@ -1,16 +1,89 @@
 /* Переменные, шрифты, UI kit */
 
-
-
-
 /* 
+700 - Bold
+600 - SemiBold / Demi
+500 - Medium
+400 - Regular
+*/
 
-ШАБЛОН использования глобальных переменных:
+/* Craftwork Grotesk */
+@font-face {
+    font-family: "Craftwork Grotesk";
+    src: local("Craftwork Grotesk Bold"),
+      url("/assets/fonts/craftwork/CraftworkGrotesk-SemiBold.woff2") format("woff2"),
+      url("/assets/fonts/craftwork/CraftworkGrotesk-Bold.woff") format("woff"),
+      url("/assets/fonts/craftwork/craftwork-grotesk-bold.ttf") format("ttf");
+    font-weight: 700;
+}
+@font-face {
+    font-family: "Craftwork Grotesk";
+    src: local("Craftwork Grotesk SemiBold"),
+      url("/assets/fonts/craftwork/CraftworkGrotesk-SemiBold.woff2") format("woff2"),
+      url("/assets/fonts/craftwork/CraftworkGrotesk-SemiBold.woff") format("woff"),
+      url("/assets/fonts/craftwork/craftwork-grotesk-semi-bold.ttf") format("ttf");
+    font-weight: 600;
+}
+@font-face {
+    font-family: "Craftwork Grotesk";
+    src: local("Craftwork Grotesk Medium"),
+      url("/assets/fonts/craftwork/CraftworkGrotesk-Medium.woff2") format("woff2"),
+      url("/assets/fonts/craftwork/CraftworkGrotesk-Medium.woff") format("woff"),
+      url("/assets/fonts/craftwork/craftwork-grotesk-medium.ttf") format("ttf");
+    font-weight: 500;
+}
+@font-face {
+    font-family: "Craftwork Grotesk";
+    src: local("Craftwork Grotesk Regular"),
+      url("/assets/fonts/craftwork/CraftworkGrotesk-Regular.woff2") format("woff2"),
+      url("/assets/fonts/craftwork/CraftworkGrotesk-Regular.woff") format("woff"),
+      url("/assets/fonts/craftwork/craftwork-grotesk-regular.ttf") format("ttf");
+    font-weight: 400;
+}
+/* Craftwork Grotesk */
+
+/* din 2014 */
+@font-face {
+    font-family: "DIN 2014 Rounded";
+    src: local("DIN 2014 Rounded Demi"),
+      url("/assets/fonts/din-2014/din-2014-rounded-demi.woff2") format("woff2"),
+      url("/assets/fonts/din-2014/din-2014-rounded-demi.woff") format("woff"),
+      url("/assets/fonts/din-2014/din-2014-rounded-demi.ttf") format("ttf");
+    font-weight: 600;
+}
+@font-face {
+    font-family: "DIN 2014 Rounded";
+    src: local("DIN 2014 Rounded Regular"),
+      url("/assets/fonts/din-2014/din-2014-rounded-regular.woff2") format("woff2"),
+      url("/assets/fonts/din-2014/din-2014-rounded-regular.woff") format("woff"),
+      url("/assets/fonts/din-2014/din-2014-rounded-regular.ttf") format("ttf");
+    font-weight: 400;
+}
+/* din 2014 */
+
+/* roboto */
+@font-face {
+    font-family: "Roboto";
+    src: local("Roboto Medium"),
+      url("/assets/fonts/roboto/Roboto-Medium.woff2") format("woff2"),
+      url("/assets/fonts/roboto/Roboto-Medium.woff") format("woff"),
+      url("/assets/fonts/roboto/roboto-medium.ttf") format("ttf");
+    font-weight: 500;
+}
+@font-face {
+    font-family: "Roboto";
+    src: local("Roboto Regular"),
+      url("/assets/fonts/roboto/Roboto-Regular.woff2") format("woff2"),
+      url("/assets/fonts/roboto/Roboto-Regular.woff") format("woff"),
+      url("/assets/fonts/roboto/roboto-medium.ttf") format("ttf");
+    font-weight: 400;
+}
+/* roboto */
+
+/* Глобальные переменные: */
 
 :root {
-    --main-text: #e1667c;
-    --main-color: #8da6cb;
     --font-family: "Craftwork Grotesk", sans-serif;
+    --second-family: "DIN 2014 Rounded", sans-serif;
+    --third-family: "Roboto", sans-serif
 } 
-
-*/

index.html

@@ -48,20 +48,7 @@
     
     </head>
     <body>
-
+        <p>test</p>
-        
-        <!-- Пример формы для отправки в Телеграмм (обработчик send-telegram.php) -->
-        <form class="form" method="post" action="/send-telegram.php">
-            <div class="form__item">
-                <input class="form__input" type="text" name="name" required>
-                <label class="form__label">Ваше имя</label>
-            </div>
-            <div class="form__item">
-                <input class="form__input" type="text" name="phone" required>
-                <label class="form__label">Номер телефона</label>
-            </div>
-            <input class="form__input btn" type="submit" value="Отправить">
-        </form>
 
 
         <script src="/assets/js/gp-main.js"></script>