Compare commits
No commits in common. 'master' and 'project_banner' have entirely different histories.
master
...
project_ba
@ -1,133 +0,0 @@ |
||||
# Logs |
||||
logs |
||||
*.log |
||||
|
||||
# Runtime data |
||||
pids |
||||
*.pid |
||||
*.seed |
||||
*.pid.lock |
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover |
||||
lib-cov |
||||
|
||||
# Coverage directory used by tools like istanbul |
||||
coverage |
||||
|
||||
# nyc test coverage |
||||
.nyc_output |
||||
|
||||
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) |
||||
.grunt |
||||
|
||||
# Bower dependency directory (https://bower.io/) |
||||
bower_components |
||||
|
||||
# node-waf configuration |
||||
.lock-wscript |
||||
|
||||
# Compiled binary addons (https://nodejs.org/api/addons.html) |
||||
build/Release |
||||
|
||||
# Dependency directories |
||||
node_modules/ |
||||
jspm_packages/ |
||||
|
||||
# TypeScript v1 declaration files |
||||
typings/ |
||||
|
||||
# Optional npm cache directory |
||||
.npm |
||||
|
||||
# Optional eslint cache |
||||
.eslintcache |
||||
|
||||
# Optional REPL history |
||||
.node_repl_history |
||||
|
||||
# Output of 'npm pack' |
||||
*.tgz |
||||
|
||||
# Yarn Integrity file |
||||
.yarn-integrity |
||||
|
||||
# dotenv environment variables file |
||||
.env |
||||
|
||||
# parcel-bundler cache (https://parceljs.org/) |
||||
.cache |
||||
|
||||
# next.js build output |
||||
.next |
||||
|
||||
# nuxt.js build output |
||||
.nuxt |
||||
|
||||
# Nuxt generate |
||||
dist |
||||
|
||||
# vuepress build output |
||||
.vuepress/dist |
||||
|
||||
# Serverless directories |
||||
.serverless |
||||
|
||||
# IDE |
||||
.idea |
||||
.vscode |
||||
config.js |
||||
/yarn-error.log |
||||
package-lock.json |
||||
jsconfig.json |
||||
|
||||
|
||||
# GP | Files ext |
||||
*.sql |
||||
*.tgz |
||||
*.tar.gz |
||||
*.tar |
||||
*.rar |
||||
*.zip |
||||
*.wav |
||||
*.flv |
||||
*.db |
||||
*.psd |
||||
*.pdf |
||||
*.doc |
||||
*.docx |
||||
*.txt |
||||
*.text |
||||
*.log |
||||
*.config |
||||
*.xml |
||||
*.tbk |
||||
*.csv |
||||
*.json |
||||
|
||||
# GP | Dirs & files |
||||
/bower_components/ |
||||
/node_modules/ |
||||
/nbproject/ |
||||
/cache/ |
||||
.cache/ |
||||
/phpMyAdmin-* |
||||
/timthumb_cache/ |
||||
/webstat/ |
||||
/.idea/ |
||||
/.csscomb.json |
||||
/.htaccess |
||||
/sitemap*.xml |
||||
/sftp-config.json |
||||
/robots.txt |
||||
/bower.json |
||||
/.bowerrc |
||||
/backup_rsync/ |
||||
.bash_history |
||||
.idea/ |
||||
.fleet/ |
||||
.DS_Store |
||||
.config/ |
||||
.bash* |
||||
.vim* |
||||
test*.php |
||||
gp-test*.php |
||||
@ -1,14 +0,0 @@ |
||||
<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> |
||||
@ -0,0 +1,3 @@ |
||||
{ |
||||
"liveServer.settings.port": 5501 |
||||
} |
||||
@ -1,84 +0,0 @@ |
||||
## **Требования к верстке** |
||||
|
||||
### **С точки зрения веб-разработки:** |
||||
* верстаем на чистом HTML/CSS с использованием flex и grid (без подключение библиотек типа bootstrap и т.п.) |
||||
* соблюдаем Scope-ориентированный подход: |
||||
- каждую секцию/экран именуем **уникальным** классом-родителем, от которого строим CSS-селектор для дочерних элементов, что ограничивает область ваших стилей только внутри секции/экрана, не влияя на другие части сайта. |
||||
|
||||
- пример: <br> |
||||
|
||||
HTML: |
||||
``` |
||||
<section class="my-namespace"> |
||||
<h1>Новый заголовок</h1> |
||||
<button class="my-button">Кнопка</button> |
||||
</section> |
||||
``` |
||||
|
||||
CSS: |
||||
|
||||
``` |
||||
.my-namespace h1 { |
||||
font-size: 24px; |
||||
color: #333; |
||||
} |
||||
|
||||
.my-namespace .my-button { |
||||
background-color: #007BFF; |
||||
color: #fff; |
||||
} |
||||
``` |
||||
|
||||
|
||||
* чтобы дополнительно структурировать CSS при именовании блоков используем методологию **БЭМ в стиле "Two Dashes"**: |
||||
`block-name__elem-name--mod-name--mod-val` |
||||
+ имена записываются латиницей в нижнем регистре |
||||
+ для разделения слов в именах БЭМ-сущностей используется дефис (-) |
||||
+ имя элемента отделяется от имени блока двумя подчеркиваниями (__) |
||||
+ модификаторы отделяются от имения блока или элемента двумя дефисами (--) |
||||
+ значение модификатора отделяется от его имени двумя дефисами (--) |
||||
* из конечного HTML-файла убрать все комментарии, если такие имеются |
||||
* все медиазапросы пишутся в отдельных файлах (которые мы подготовили) для того чтобы оптимизировать скорость загрузки; если используется препроцессор, то не нужно в классе каждого блока использовать импорты медиа запросов, а наоборот выносим пример можно посмотреть на ["видео"](https://www.youtube.com/watch?v=9uaENbRyVT4) |
||||
* **частая ошибка:** верстальщик берет изображения/видео из макета и не задает им адаптивную ширину/высоту, и на моменте сдачи верстки не заметно косяков, а вот когда мы переходим к натяжке и медиаматериалы начинают выводиться в шаблон динамически и уже разных форматов (ШИРИНАxВЫСОТА), тогда верстка начинает плыть. Чтоб такое избежать проверяйте на как себя ведет элемент при замене слишком большой/маленькой картинки. |
||||
* **ВАЖНО:** если верстка делается для многостраничного сайта (особенно на CMS), то для всех страниц прописывать уникальный класс в \<body\>, от которого строить все CSS-правила на этой странице + для кажой станицы использовать свои отдельные CSS-файлы |
||||
* подключаем вначале normalize.min.css и reset.min.css, чтобы сбросить глобальные стили и устранить влияние наследуемых правил. |
||||
* шрифты и глобальные переменные выносим в отдельный файл (у нас это *gp-style-core.css*) |
||||
|
||||
### **С точки зрения SEO:** |
||||
* все теги использовать строго по назначению! Текстовые (strong, b, i, em, h1-h6… p) используем только в текстовых блоках и заголовках. Для дизайна используем div и span. Например не нужно втыкать в подвал, шапку или формы захвата h4 или закрывать просто крупный текст, который не является заголовком в h2. |
||||
* на странице должен быть только один заголовок первого уровня (h1) |
||||
* должны присутствовать все основные теги и атрибуты — html, head, body, title, description, lang=ru, content=html, charset=utf8 |
||||
* для кнопок, нажатие на которые не требует редиректа используем тег \<button\>, а не \<a\> |
||||
* для \<img\> самостоятельно проставляем атрибут alt="", со значением описывающим того что изображено на картинке |
||||
|
||||
|
||||
## **Порядок работы** |
||||
|
||||
### **Подготовка окружения для локальной разработки** |
||||
1. Выкачивать локально на свой компьютер один из 2х шаблонов (по веткам: 1 - master, 2 - with-phpmailer) командой: `git clone -b ${branch_name} https://git.good-production.xyz/Good-Production/template-for-verstka.git` |
||||
|
||||
заменить переменную: |
||||
`${branch_name}` -- на "master", если достаточно только отправки форм в ТГ, либо "with-phpmailer", если нужна отправка на почту средствами PHP (без использования плагинов CMS) |
||||
|
||||
2. Далее создать свою ветку командой: `git checkout -b ${project_name}--${name}` |
||||
3. Приступить к локальной разработке в созданной ветке |
||||
4. Для демонстрации работы пушить свои комиты в созданную ветку командой: `git push origin ${project_name}--${name}` |
||||
- во время push для авторизации понадобиться логин/пароль: `freelancer/freelancerfreelancer00` |
||||
5. Отписать в чат, чтоб руководитель проектом посмотрел результат и выкачал его на тестовый стенд |
||||
|
||||
в командах заменить переменные: |
||||
`${project_name}` -- условное названия проекта (как варинат использовать домен сайта) |
||||
`${name}` -- имя/ник исполнителя |
||||
|
||||
|
||||
## **Оптимальный порядок непосредственно в процессе верстки** |
||||
1. Сначала определить CSS-переменные для основных цветов/градиентов, начертаний шрифтов (толщина, размер, модификация, межтрочный интервал) и занести в специально подгтовленный CSS-файл `style-core.css` |
||||
2. Все шрифты выкачать и сохранить локально в директорию `/assets/fonts/` и подключить их в файле `style-core.css` |
||||
3. Далее начинать стоит с верстки UI kit (должен быть предоставлен в макете дизайнером), для того чтобы переиспользовать готовые элементы по ходу верстки макетов. Стили для UI kit писать так же в файл `style-core.css`. |
||||
Саму HTML-верстку для UI kit делать в файле `ui_kit.html` |
||||
3. Как UI kit будет готов, можно смело переходить к верстке основных листов макета "*.html" и просто использовать готовые классы из `style-core.css` |
||||
|
||||
|
||||
### **Примечания** |
||||
|
||||
Для работы с Figma рекомендуем использовать плагин ["Inspect Styles"](https://www.figma.com/community/plugin/1254262542670221199) для инспевтирования CSS-свойсв. |
||||
@ -1,16 +0,0 @@ |
||||
/* Переменные, шрифты, UI kit */ |
||||
|
||||
|
||||
|
||||
|
||||
/* |
||||
|
||||
ШАБЛОН использования глобальных переменных: |
||||
|
||||
:root { |
||||
--main-text: #e1667c; |
||||
--main-color: #8da6cb; |
||||
--font-family: "Craftwork Grotesk", sans-serif; |
||||
} |
||||
|
||||
*/ |
||||
@ -1,18 +0,0 @@ |
||||
/* Основные стили для компьютера */ |
||||
|
||||
|
||||
|
||||
/* писать сюда... */ |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Стили для лептопов */ |
||||
/* @media only screen and (min-width: 992px) and (max-width: 1400px) { |
||||
|
||||
} */ |
||||
@ -1,5 +0,0 @@ |
||||
/* Стили для мобильных устройств */ |
||||
@media only screen and (max-width: 576px) { |
||||
|
||||
|
||||
} |
||||
@ -1,5 +0,0 @@ |
||||
/* Стили для планшетов */ |
||||
@media only screen and (max-width: 992px) { |
||||
|
||||
|
||||
} |
||||
@ -1,4 +0,0 @@ |
||||
/* Стили для ультрашироких экранов */ |
||||
@media only screen and (min-width: 1400px) { |
||||
|
||||
} |
||||
@ -1,2 +0,0 @@ |
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none} |
||||
/*# sourceMappingURL=normalize.min.css.map */ |
||||
@ -1 +0,0 @@ |
||||
*{padding:0;margin:0;border:none}*,::after,::before{box-sizing:border-box}a,a:hover,a:link,a:visited{text-decoration:none}aside,footer,header,legend,main,nav,section{display:block}h1,h2,h3,h4,h5,h6,p{font-size:inherit;font-weight:inherit}ul,ul li{list-style:none}img{vertical-align:top}img,svg{max-width:100%;height:auto}address{font-style:normal}button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;background-color:transparent}input::-ms-clear{display:none}button,input[type=submit]{display:inline-block;box-shadow:none;background:0 0;cursor:pointer}button:active,button:focus,input:active,input:focus{outline:0}button::-moz-focus-inner{padding:0;border:0}label{cursor:pointer} |
||||
|
Before Width: | Height: | Size: 190 KiB |
@ -0,0 +1,48 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
<link rel="stylesheet" href="font/stylesheet.css"> |
||||
<link rel="stylesheet" href="style/normalize.css"> |
||||
<link rel="stylesheet" href="style/index.css"> |
||||
<title>Title</title> |
||||
</head> |
||||
<body> |
||||
<div class="wrapper"> |
||||
<div class="breadcrumbs"> |
||||
<div class="container"> |
||||
<div class="breadcrumb"> |
||||
<a href="#!" class="breadcrumb_link">Главная –</a> |
||||
<span class="breadcrumb_text">Наши авторы</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<section class="authors"> |
||||
<div class="container"> |
||||
<div class="authors_block"> |
||||
<h2 class="authors_block_title">Наши авторы</h2> |
||||
<div class="authors_cards"> |
||||
<a href="#!" class="authors_card"> |
||||
<img src="img/authors-img1.png" alt="" class="authors_card_img"> |
||||
<h3 class="authors_card_title">Екатерина Волкова</h3> |
||||
<p class="authors_card_text">Старший менеджер по продажам</p> |
||||
</a> |
||||
<a href="#!" class="authors_card"> |
||||
<img src="img/authors-img2.png" alt="" class="authors_card_img"> |
||||
<h3 class="authors_card_title">Анастасия Колесникова</h3> |
||||
<p class="authors_card_text">Менеджер по продажам</p> |
||||
</a> |
||||
<a href="#!" class="authors_card"> |
||||
<img src="img/authors-img3.png" alt="" class="authors_card_img"> |
||||
<h3 class="authors_card_title">Тимур Абдеев</h3> |
||||
<p class="authors_card_text">Менеджер по работе с клиентами</p> |
||||
</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
</div> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,236 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
<link rel="stylesheet" href="font/stylesheet.css"> |
||||
<link rel="stylesheet" href="style/normalize.css"> |
||||
<link rel="stylesheet" href="style/index.css"> |
||||
<title>Title</title> |
||||
</head> |
||||
<body> |
||||
<div class="wrapper"> |
||||
<div class="breadcrumbs"> |
||||
<div class="container"> |
||||
<div class="breadcrumb"> |
||||
<a href="#!" class="breadcrumb_link">Главная –</a> |
||||
<a href="#!" class="breadcrumb_link">Наши авторы –</a> |
||||
<span class="breadcrumb_text">Екатерина Волкова</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<section class="authors"> |
||||
<div class="container"> |
||||
<div class="authors_block"> |
||||
<div class="authors_top"> |
||||
<img src="img/box-img.png" alt="" width="183px" height="200px" class="authors_top_img"> |
||||
<div class="authors_top_info"> |
||||
<div class="info_title"> |
||||
<h3>Екатерина Волкова</h3> |
||||
<p>Старший менеджер по продажам</p> |
||||
</div> |
||||
<p>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит</p> |
||||
</div> |
||||
</div> |
||||
|
||||
<h2 class="authors_block_title">Екатерина Волкова</h2> |
||||
|
||||
<div class="items_block"> |
||||
<div class="authors_items"> |
||||
<a href="#!" class="authors_item"> |
||||
<img src="img/item-img1.png" alt="" class="authors_item_img"> |
||||
<div class="authors_item_info"> |
||||
<div class="authors_item_boxs"> |
||||
<span>22 августа 2024</span> |
||||
|
||||
<div class="authors_item_box"> |
||||
<span> |
||||
<img src="img/clock-circle.svg" alt=""> |
||||
5 минут |
||||
</span> |
||||
<span> |
||||
<img src="img/eye.svg" alt=""> |
||||
1064 |
||||
</span> |
||||
</div> |
||||
</div> |
||||
<h5 class="authors_item_title">Аккредитация и лицензирование учебных заведений </h5> |
||||
</div> |
||||
</a> |
||||
<a href="#!" class="authors_item"> |
||||
<img src="img/item-img2.png" alt="" class="authors_item_img"> |
||||
<div class="authors_item_info"> |
||||
<div class="authors_item_boxs"> |
||||
<span>22 августа 2024</span> |
||||
|
||||
<div class="authors_item_box"> |
||||
<span> |
||||
<img src="img/clock-circle.svg" alt=""> |
||||
5 минут |
||||
</span> |
||||
<span> |
||||
<img src="img/eye.svg" alt=""> |
||||
362 |
||||
</span> |
||||
</div> |
||||
</div> |
||||
<h5 class="authors_item_title">Как получить медицинскую лицензию? </h5> |
||||
</div> |
||||
</a> |
||||
<a href="#!" class="authors_item"> |
||||
<img src="img/item-img3.png" alt="" class="authors_item_img"> |
||||
<div class="authors_item_info"> |
||||
<div class="authors_item_boxs"> |
||||
<span>22 августа 2024</span> |
||||
|
||||
<div class="authors_item_box"> |
||||
<span> |
||||
<img src="img/clock-circle.svg" alt=""> |
||||
5 минут |
||||
</span> |
||||
<span> |
||||
<img src="img/eye.svg" alt=""> |
||||
1458 |
||||
</span> |
||||
</div> |
||||
</div> |
||||
<h5 class="authors_item_title">Как получить образовательную лицензию? </h5> |
||||
</div> |
||||
</a> |
||||
<a href="#!" class="authors_item"> |
||||
<img src="img/item-img4.png" alt="" class="authors_item_img"> |
||||
<div class="authors_item_info"> |
||||
<div class="authors_item_boxs"> |
||||
<span>22 августа 2024</span> |
||||
|
||||
<div class="authors_item_box"> |
||||
<span> |
||||
<img src="img/clock-circle.svg" alt=""> |
||||
5 минут |
||||
</span> |
||||
<span> |
||||
<img src="img/eye.svg" alt=""> |
||||
3221 |
||||
</span> |
||||
</div> |
||||
</div> |
||||
<h5 class="authors_item_title">Как провести оценку ООО перед продажей: советы эксперта</h5> |
||||
</div> |
||||
</a> |
||||
<a href="#!" class="authors_item"> |
||||
<img src="img/item-img5.png" alt="" class="authors_item_img"> |
||||
<div class="authors_item_info"> |
||||
<div class="authors_item_boxs"> |
||||
<span>22 августа 2024</span> |
||||
|
||||
<div class="authors_item_box"> |
||||
<span> |
||||
<img src="img/clock-circle.svg" alt=""> |
||||
5 минут |
||||
</span> |
||||
<span> |
||||
<img src="img/eye.svg" alt=""> |
||||
3220 |
||||
</span> |
||||
</div> |
||||
</div> |
||||
<h5 class="authors_item_title">Что лучше: ИП, ПБОЮЛ или ЧП, ЧОП, ЧОО, ООО ИЛИ АО </h5> |
||||
</div> |
||||
</a> |
||||
<a href="#!" class="authors_item"> |
||||
<img src="img/item-img6.png" alt="" class="authors_item_img"> |
||||
<div class="authors_item_info"> |
||||
<div class="authors_item_boxs"> |
||||
<span>22 августа 2024</span> |
||||
|
||||
<div class="authors_item_box"> |
||||
<span> |
||||
<img src="img/clock-circle.svg" alt=""> |
||||
5 минут |
||||
</span> |
||||
<span> |
||||
<img src="img/eye.svg" alt=""> |
||||
3075 |
||||
</span> |
||||
</div> |
||||
</div> |
||||
<h5 class="authors_item_title">Нужен ли допуск СРО для выполнения электромонтажных работ</h5> |
||||
</div> |
||||
</a> |
||||
<a href="#!" class="authors_item"> |
||||
<img src="img/item-img7.png" alt="" class="authors_item_img"> |
||||
<div class="authors_item_info"> |
||||
<div class="authors_item_boxs"> |
||||
<span>22 августа 2024</span> |
||||
|
||||
<div class="authors_item_box"> |
||||
<span> |
||||
<img src="img/clock-circle.svg" alt=""> |
||||
5 минут |
||||
</span> |
||||
<span> |
||||
<img src="img/eye.svg" alt=""> |
||||
4760 |
||||
</span> |
||||
</div> |
||||
</div> |
||||
<h5 class="authors_item_title">Список работ, при выполнении которых допуск СРО не требуется </h5> |
||||
</div> |
||||
</a> |
||||
<a href="#!" class="authors_item"> |
||||
<img src="img/item-img8.png" alt="" class="authors_item_img"> |
||||
<div class="authors_item_info"> |
||||
<div class="authors_item_boxs"> |
||||
<span>22 августа 2024</span> |
||||
|
||||
<div class="authors_item_box"> |
||||
<span> |
||||
<img src="img/clock-circle.svg" alt=""> |
||||
5 минут |
||||
</span> |
||||
<span> |
||||
<img src="img/eye.svg" alt=""> |
||||
3218 |
||||
</span> |
||||
</div> |
||||
</div> |
||||
<h5 class="authors_item_title">Сравнение различных видов сертификатов ISO: какой выбрать для своего бизнеса </h5> |
||||
</div> |
||||
</a> |
||||
<a href="#!" class="authors_item"> |
||||
<img src="img/item-img9.png" alt="" class="authors_item_img"> |
||||
<div class="authors_item_info"> |
||||
<div class="authors_item_boxs"> |
||||
<span>22 августа 2024</span> |
||||
|
||||
<div class="authors_item_box"> |
||||
<span> |
||||
<img src="img/clock-circle.svg" alt=""> |
||||
5 минут |
||||
</span> |
||||
<span> |
||||
<img src="img/eye.svg" alt=""> |
||||
1946 |
||||
</span> |
||||
</div> |
||||
</div> |
||||
<h5 class="authors_item_title">Получение лицензии на алкоголь в 2024: часто задаваемые вопросы </h5> |
||||
</div> |
||||
</a> |
||||
</div> |
||||
|
||||
<div class="item_pagination"> |
||||
<a href="#!" class="item_pagination_tab active">1</a> |
||||
<a href="#!" class="item_pagination_tab">2</a> |
||||
<a href="#!" class="item_pagination_tab">3</a> |
||||
<a href="#!" class="item_pagination_tab">4</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
</div> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,31 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
<link rel="stylesheet" href="font/stylesheet.css"> |
||||
<link rel="stylesheet" href="style/normalize.css"> |
||||
<link rel="stylesheet" href="style/index.css"> |
||||
<title>Title</title> |
||||
</head> |
||||
<body> |
||||
<div class="wrapper"> |
||||
<div class="banner"> |
||||
<div class="banner_block"> |
||||
<div> |
||||
<img src="img/num.svg" alt="" class="banner_block_number"> |
||||
<img src="img/num-mob.svg" alt="" class="banner_block_number2"> |
||||
</div> |
||||
<div class="info_block"> |
||||
<div class="banner_block_info"> |
||||
<h2 class="banner_block_title">Беспроцентная рассрочка <br> на все услуги!</h2> |
||||
<p class="banner_block_text">Оставьте заявку и получите консультацию!</p> |
||||
</div> |
||||
<button class="banner_block_btn">Оставить заявку</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
</body> |
||||
</html> |
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,441 @@ |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1"> |
||||
<meta name="robots" content="noindex, noarchive"> |
||||
<meta name="format-detection" content="telephone=no"> |
||||
<title>Transfonter demo</title> |
||||
<link href="stylesheet.css" rel="stylesheet"> |
||||
<style> |
||||
/* |
||||
http://meyerweb.com/eric/tools/css/reset/ |
||||
v2.0 | 20110126 |
||||
License: none (public domain) |
||||
*/ |
||||
html, body, div, span, applet, object, iframe, |
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre, |
||||
a, abbr, acronym, address, big, cite, code, |
||||
del, dfn, em, img, ins, kbd, q, s, samp, |
||||
small, strike, strong, sub, sup, tt, var, |
||||
b, u, i, center, |
||||
dl, dt, dd, ol, ul, li, |
||||
fieldset, form, label, legend, |
||||
table, caption, tbody, tfoot, thead, tr, th, td, |
||||
article, aside, canvas, details, embed, |
||||
figure, figcaption, footer, header, hgroup, |
||||
menu, nav, output, ruby, section, summary, |
||||
time, mark, audio, video { |
||||
margin: 0; |
||||
padding: 0; |
||||
border: 0; |
||||
font-size: 100%; |
||||
font: inherit; |
||||
vertical-align: baseline; |
||||
} |
||||
/* HTML5 display-role reset for older browsers */ |
||||
article, aside, details, figcaption, figure, |
||||
footer, header, hgroup, menu, nav, section { |
||||
display: block; |
||||
} |
||||
body { |
||||
line-height: 1; |
||||
} |
||||
ol, ul { |
||||
list-style: none; |
||||
} |
||||
blockquote, q { |
||||
quotes: none; |
||||
} |
||||
blockquote:before, blockquote:after, |
||||
q:before, q:after { |
||||
content: ''; |
||||
content: none; |
||||
} |
||||
table { |
||||
border-collapse: collapse; |
||||
border-spacing: 0; |
||||
} |
||||
/* common styles */ |
||||
body { |
||||
background: #f1f1f1; |
||||
color: #000; |
||||
} |
||||
.page { |
||||
background: #fff; |
||||
width: 920px; |
||||
margin: 0 auto; |
||||
padding: 20px 20px 0 20px; |
||||
overflow: hidden; |
||||
} |
||||
.font-container { |
||||
overflow-x: auto; |
||||
overflow-y: hidden; |
||||
margin-bottom: 40px; |
||||
line-height: 1.3; |
||||
white-space: nowrap; |
||||
padding-bottom: 5px; |
||||
} |
||||
h1 { |
||||
position: relative; |
||||
background: #444; |
||||
font-size: 32px; |
||||
color: #fff; |
||||
padding: 10px 20px; |
||||
margin: 0 -20px 12px -20px; |
||||
} |
||||
.letters { |
||||
font-size: 25px; |
||||
margin-bottom: 20px; |
||||
} |
||||
.s10:before { |
||||
content: '10px'; |
||||
} |
||||
.s11:before { |
||||
content: '11px'; |
||||
} |
||||
.s12:before { |
||||
content: '12px'; |
||||
} |
||||
.s14:before { |
||||
content: '14px'; |
||||
} |
||||
.s18:before { |
||||
content: '18px'; |
||||
} |
||||
.s24:before { |
||||
content: '24px'; |
||||
} |
||||
.s30:before { |
||||
content: '30px'; |
||||
} |
||||
.s36:before { |
||||
content: '36px'; |
||||
} |
||||
.s48:before { |
||||
content: '48px'; |
||||
} |
||||
.s60:before { |
||||
content: '60px'; |
||||
} |
||||
.s72:before { |
||||
content: '72px'; |
||||
} |
||||
.s10:before, .s11:before, .s12:before, .s14:before, |
||||
.s18:before, .s24:before, .s30:before, .s36:before, |
||||
.s48:before, .s60:before, .s72:before { |
||||
font-family: Arial, sans-serif; |
||||
font-size: 10px; |
||||
font-weight: normal; |
||||
font-style: normal; |
||||
color: #999; |
||||
padding-right: 6px; |
||||
} |
||||
pre { |
||||
display: block; |
||||
position: relative; |
||||
padding: 9px; |
||||
margin: 0 0 10px; |
||||
font-family: Monaco, Menlo, Consolas, "Courier New", monospace !important; |
||||
font-size: 13px; |
||||
line-height: 1.428571429; |
||||
color: #333; |
||||
font-weight: normal !important; |
||||
font-style: normal !important; |
||||
background-color: #f5f5f5; |
||||
border: 1px solid #ccc; |
||||
overflow-x: auto; |
||||
border-radius: 4px; |
||||
} |
||||
pre:after { |
||||
display: block; |
||||
position: absolute; |
||||
right: 0; |
||||
top: 0; |
||||
content: 'Usage'; |
||||
line-height: 1; |
||||
padding: 5px 8px; |
||||
font-size: 12px; |
||||
color: #767676; |
||||
background-color: #fff; |
||||
border: 1px solid #ccc; |
||||
border-right: none; |
||||
border-top: none; |
||||
border-radius: 0 4px 0 4px; |
||||
z-index: 10; |
||||
} |
||||
/* responsive */ |
||||
@media (max-width: 959px) { |
||||
.page { |
||||
width: auto; |
||||
margin: 0; |
||||
} |
||||
} |
||||
</style> |
||||
</head> |
||||
<body> |
||||
<div class="page"> |
||||
<div class="demo" style="font-family: 'MuseoSansCyrl-300'; font-weight: normal; font-style: normal;"> |
||||
<h1>☞MuseoSansCyrl-300</h1> |
||||
<pre>.your-style { |
||||
font-family: 'MuseoSansCyrl-300'; |
||||
font-weight: normal; |
||||
font-style: normal; |
||||
}</pre> |
||||
<div class="font-container"> |
||||
<p class="letters"> |
||||
abcdefghijklmnopqrstuvwxyz<br> |
||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> |
||||
0123456789.:,;()*!?'@#<>$%&^+-=~ |
||||
</p> |
||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p> |
||||
</div> |
||||
</div> |
||||
<div class="demo" style="font-family: 'MuseoSansCyrl-100Italic'; font-weight: normal; font-style: italic;"> |
||||
<h1>☞MuseoSansCyrl-100Italic</h1> |
||||
<pre>.your-style { |
||||
font-family: 'MuseoSansCyrl-100Italic'; |
||||
font-weight: normal; |
||||
font-style: italic; |
||||
}</pre> |
||||
<div class="font-container"> |
||||
<p class="letters"> |
||||
abcdefghijklmnopqrstuvwxyz<br> |
||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> |
||||
0123456789.:,;()*!?'@#<>$%&^+-=~ |
||||
</p> |
||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p> |
||||
</div> |
||||
</div> |
||||
<div class="demo" style="font-family: 'MuseoSansCyrl-300Italic'; font-weight: normal; font-style: italic;"> |
||||
<h1>☞MuseoSansCyrl-300Italic</h1> |
||||
<pre>.your-style { |
||||
font-family: 'MuseoSansCyrl-300Italic'; |
||||
font-weight: normal; |
||||
font-style: italic; |
||||
}</pre> |
||||
<div class="font-container"> |
||||
<p class="letters"> |
||||
abcdefghijklmnopqrstuvwxyz<br> |
||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> |
||||
0123456789.:,;()*!?'@#<>$%&^+-=~ |
||||
</p> |
||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p> |
||||
</div> |
||||
</div> |
||||
<div class="demo" style="font-family: 'MuseoSansCyrl-100'; font-weight: normal; font-style: normal;"> |
||||
<h1>☞MuseoSansCyrl-100</h1> |
||||
<pre>.your-style { |
||||
font-family: 'MuseoSansCyrl-100'; |
||||
font-weight: normal; |
||||
font-style: normal; |
||||
}</pre> |
||||
<div class="font-container"> |
||||
<p class="letters"> |
||||
abcdefghijklmnopqrstuvwxyz<br> |
||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> |
||||
0123456789.:,;()*!?'@#<>$%&^+-=~ |
||||
</p> |
||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p> |
||||
</div> |
||||
</div> |
||||
<div class="demo" style="font-family: 'MuseoSansCyrl-900Italic'; font-weight: normal; font-style: italic;"> |
||||
<h1>☞MuseoSansCyrl-900Italic</h1> |
||||
<pre>.your-style { |
||||
font-family: 'MuseoSansCyrl-900Italic'; |
||||
font-weight: normal; |
||||
font-style: italic; |
||||
}</pre> |
||||
<div class="font-container"> |
||||
<p class="letters"> |
||||
abcdefghijklmnopqrstuvwxyz<br> |
||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> |
||||
0123456789.:,;()*!?'@#<>$%&^+-=~ |
||||
</p> |
||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p> |
||||
</div> |
||||
</div> |
||||
<div class="demo" style="font-family: 'MuseoSansCyrl-500'; font-weight: normal; font-style: normal;"> |
||||
<h1>☞MuseoSansCyrl-500</h1> |
||||
<pre>.your-style { |
||||
font-family: 'MuseoSansCyrl-500'; |
||||
font-weight: normal; |
||||
font-style: normal; |
||||
}</pre> |
||||
<div class="font-container"> |
||||
<p class="letters"> |
||||
abcdefghijklmnopqrstuvwxyz<br> |
||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> |
||||
0123456789.:,;()*!?'@#<>$%&^+-=~ |
||||
</p> |
||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p> |
||||
</div> |
||||
</div> |
||||
<div class="demo" style="font-family: 'MuseoSansCyrl-500Italic'; font-weight: normal; font-style: italic;"> |
||||
<h1>☞MuseoSansCyrl-500Italic</h1> |
||||
<pre>.your-style { |
||||
font-family: 'MuseoSansCyrl-500Italic'; |
||||
font-weight: normal; |
||||
font-style: italic; |
||||
}</pre> |
||||
<div class="font-container"> |
||||
<p class="letters"> |
||||
abcdefghijklmnopqrstuvwxyz<br> |
||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> |
||||
0123456789.:,;()*!?'@#<>$%&^+-=~ |
||||
</p> |
||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p> |
||||
</div> |
||||
</div> |
||||
<div class="demo" style="font-family: 'MuseoSansCyrl-700Italic'; font-weight: normal; font-style: italic;"> |
||||
<h1>☞MuseoSansCyrl-700Italic</h1> |
||||
<pre>.your-style { |
||||
font-family: 'MuseoSansCyrl-700Italic'; |
||||
font-weight: normal; |
||||
font-style: italic; |
||||
}</pre> |
||||
<div class="font-container"> |
||||
<p class="letters"> |
||||
abcdefghijklmnopqrstuvwxyz<br> |
||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> |
||||
0123456789.:,;()*!?'@#<>$%&^+-=~ |
||||
</p> |
||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p> |
||||
</div> |
||||
</div> |
||||
<div class="demo" style="font-family: 'MuseoSansCyrl-700'; font-weight: normal; font-style: normal;"> |
||||
<h1>☞MuseoSansCyrl-700</h1> |
||||
<pre>.your-style { |
||||
font-family: 'MuseoSansCyrl-700'; |
||||
font-weight: normal; |
||||
font-style: normal; |
||||
}</pre> |
||||
<div class="font-container"> |
||||
<p class="letters"> |
||||
abcdefghijklmnopqrstuvwxyz<br> |
||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> |
||||
0123456789.:,;()*!?'@#<>$%&^+-=~ |
||||
</p> |
||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p> |
||||
</div> |
||||
</div> |
||||
<div class="demo" style="font-family: 'MuseoSansCyrl-900'; font-weight: normal; font-style: normal;"> |
||||
<h1>☞MuseoSansCyrl-900</h1> |
||||
<pre>.your-style { |
||||
font-family: 'MuseoSansCyrl-900'; |
||||
font-weight: normal; |
||||
font-style: normal; |
||||
}</pre> |
||||
<div class="font-container"> |
||||
<p class="letters"> |
||||
abcdefghijklmnopqrstuvwxyz<br> |
||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> |
||||
0123456789.:,;()*!?'@#<>$%&^+-=~ |
||||
</p> |
||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p> |
||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,120 @@ |
||||
@font-face { |
||||
font-family: 'MuseoSansCyrl'; |
||||
src: url('MuseoSansCyrl-300.eot'); |
||||
src: local('☞MuseoSansCyrl-300'), local('MuseoSansCyrl-300'), |
||||
url('MuseoSansCyrl-300.eot?#iefix') format('embedded-opentype'), |
||||
url('MuseoSansCyrl-300.woff2') format('woff2'), |
||||
url('MuseoSansCyrl-300.woff') format('woff'), |
||||
url('MuseoSansCyrl-300.ttf') format('truetype'); |
||||
font-weight: 300; |
||||
font-style: normal; |
||||
} |
||||
|
||||
@font-face { |
||||
font-family: 'MuseoSansCyrl'; |
||||
src: url('MuseoSansCyrl-100Italic.eot'); |
||||
src: local('☞MuseoSansCyrl-100Italic'), local('MuseoSansCyrl-100Italic'), |
||||
url('MuseoSansCyrl-100Italic.eot?#iefix') format('embedded-opentype'), |
||||
url('MuseoSansCyrl-100Italic.woff2') format('woff2'), |
||||
url('MuseoSansCyrl-100Italic.woff') format('woff'), |
||||
url('MuseoSansCyrl-100Italic.ttf') format('truetype'); |
||||
font-weight: normal; |
||||
font-style: italic; |
||||
} |
||||
|
||||
@font-face { |
||||
font-family: 'MuseoSansCyrl'; |
||||
src: url('MuseoSansCyrl-300Italic.eot'); |
||||
src: local('☞MuseoSansCyrl-300Italic'), local('MuseoSansCyrl-300Italic'), |
||||
url('MuseoSansCyrl-300Italic.eot?#iefix') format('embedded-opentype'), |
||||
url('MuseoSansCyrl-300Italic.woff2') format('woff2'), |
||||
url('MuseoSansCyrl-300Italic.woff') format('woff'), |
||||
url('MuseoSansCyrl-300Italic.ttf') format('truetype'); |
||||
font-weight: 300; |
||||
font-style: italic; |
||||
} |
||||
|
||||
@font-face { |
||||
font-family: 'MuseoSansCyrl'; |
||||
src: url('MuseoSansCyrl-100.eot'); |
||||
src: local('☞MuseoSansCyrl-100'), local('MuseoSansCyrl-100'), |
||||
url('MuseoSansCyrl-100.eot?#iefix') format('embedded-opentype'), |
||||
url('MuseoSansCyrl-100.woff2') format('woff2'), |
||||
url('MuseoSansCyrl-100.woff') format('woff'), |
||||
url('MuseoSansCyrl-100.ttf') format('truetype'); |
||||
font-weight: normal; |
||||
font-style: normal; |
||||
} |
||||
|
||||
@font-face { |
||||
font-family: 'MuseoSansCyrl'; |
||||
src: url('MuseoSansCyrl-900Italic.eot'); |
||||
src: local('☞MuseoSansCyrl-900Italic'), local('MuseoSansCyrl-900Italic'), |
||||
url('MuseoSansCyrl-900Italic.eot?#iefix') format('embedded-opentype'), |
||||
url('MuseoSansCyrl-900Italic.woff2') format('woff2'), |
||||
url('MuseoSansCyrl-900Italic.woff') format('woff'), |
||||
url('MuseoSansCyrl-900Italic.ttf') format('truetype'); |
||||
font-weight: normal; |
||||
font-style: italic; |
||||
} |
||||
|
||||
@font-face { |
||||
font-family: 'MuseoSansCyrl'; |
||||
src: url('MuseoSansCyrl-500.eot'); |
||||
src: local('☞MuseoSansCyrl-500'), local('MuseoSansCyrl-500'), |
||||
url('MuseoSansCyrl-500.eot?#iefix') format('embedded-opentype'), |
||||
url('MuseoSansCyrl-500.woff2') format('woff2'), |
||||
url('MuseoSansCyrl-500.woff') format('woff'), |
||||
url('MuseoSansCyrl-500.ttf') format('truetype'); |
||||
font-weight: 500; |
||||
font-style: normal; |
||||
} |
||||
|
||||
@font-face { |
||||
font-family: 'MuseoSansCyrl'; |
||||
src: url('MuseoSansCyrl-500Italic.eot'); |
||||
src: local('☞MuseoSansCyrl-500Italic'), local('MuseoSansCyrl-500Italic'), |
||||
url('MuseoSansCyrl-500Italic.eot?#iefix') format('embedded-opentype'), |
||||
url('MuseoSansCyrl-500Italic.woff2') format('woff2'), |
||||
url('MuseoSansCyrl-500Italic.woff') format('woff'), |
||||
url('MuseoSansCyrl-500Italic.ttf') format('truetype'); |
||||
font-weight: 500; |
||||
font-style: italic; |
||||
} |
||||
|
||||
@font-face { |
||||
font-family: 'MuseoSansCyrl'; |
||||
src: url('MuseoSansCyrl-700Italic.eot'); |
||||
src: local('☞MuseoSansCyrl-700Italic'), local('MuseoSansCyrl-700Italic'), |
||||
url('MuseoSansCyrl-700Italic.eot?#iefix') format('embedded-opentype'), |
||||
url('MuseoSansCyrl-700Italic.woff2') format('woff2'), |
||||
url('MuseoSansCyrl-700Italic.woff') format('woff'), |
||||
url('MuseoSansCyrl-700Italic.ttf') format('truetype'); |
||||
font-weight: 700; |
||||
font-style: italic; |
||||
} |
||||
|
||||
@font-face { |
||||
font-family: 'MuseoSansCyrl'; |
||||
src: url('MuseoSansCyrl-700.eot'); |
||||
src: local('☞MuseoSansCyrl-700'), local('MuseoSansCyrl-700'), |
||||
url('MuseoSansCyrl-700.eot?#iefix') format('embedded-opentype'), |
||||
url('MuseoSansCyrl-700.woff2') format('woff2'), |
||||
url('MuseoSansCyrl-700.woff') format('woff'), |
||||
url('MuseoSansCyrl-700.ttf') format('truetype'); |
||||
font-weight: 700; |
||||
font-style: normal; |
||||
} |
||||
|
||||
@font-face { |
||||
font-family: 'MuseoSansCyrl'; |
||||
src: url('MuseoSansCyrl-900.eot'); |
||||
src: local('☞MuseoSansCyrl-900'), local('MuseoSansCyrl-900'), |
||||
url('MuseoSansCyrl-900.eot?#iefix') format('embedded-opentype'), |
||||
url('MuseoSansCyrl-900.woff2') format('woff2'), |
||||
url('MuseoSansCyrl-900.woff') format('woff'), |
||||
url('MuseoSansCyrl-900.ttf') format('truetype'); |
||||
font-weight: 900; |
||||
font-style: normal; |
||||
} |
||||
|
||||
|
After Width: | Height: | Size: 266 KiB |
|
After Width: | Height: | Size: 273 KiB |
|
After Width: | Height: | Size: 189 KiB |
|
After Width: | Height: | Size: 43 KiB |
|
After Width: | Height: | Size: 59 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 138 KiB |
|
After Width: | Height: | Size: 134 KiB |
|
After Width: | Height: | Size: 123 KiB |
|
After Width: | Height: | Size: 134 KiB |
|
After Width: | Height: | Size: 153 KiB |
|
After Width: | Height: | Size: 123 KiB |
|
After Width: | Height: | Size: 122 KiB |
|
After Width: | Height: | Size: 110 KiB |
|
After Width: | Height: | Size: 138 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
@ -1,72 +0,0 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="ru"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
<title>SEO title</title> |
||||
<meta name="description" content="SEO Description"> |
||||
<link rel="shortcut icon" href="/assets/img/favicon.ico?v=1.0"> |
||||
|
||||
<!-- Сбрасываем глобальные стили --> |
||||
<link rel="stylesheet" href="/assets/css/normalize.min.css"> |
||||
<link rel="stylesheet" href="/assets/css/reset.min.css"> |
||||
<!-- Базовые стили --> |
||||
<link rel="stylesheet" href="/assets/css/gp-style-core.css?v=1.0"> |
||||
<link rel="stylesheet" href="/assets/css/gp-style-desktop.css?v=1.0"> |
||||
<!-- Адаптив --> |
||||
<link rel="stylesheet" media="screen and (min-width: 1400px)" href="/assets/css/gp-style-ultra.css?v=1.0"> |
||||
<link rel="stylesheet" media="screen and (max-width: 992px)" href="/assets/css/gp-style-tablet.css?v=1.0"> |
||||
<link rel="stylesheet" media="screen and (max-width: 576px)" href="/assets/css/gp-style-mobile.css?v=1.0"> |
||||
|
||||
|
||||
<!-- Яндекс.Вебмастер + Google Search Console --> |
||||
<meta name="yandex-verification" content="XXXXXXXXXXXXXXXXX" /> |
||||
<meta name="google-site-verification" content="XXXXXXXXXXXXXXXXX" /> |
||||
<!-- /Яндекс.Вебмастер + Google Search Console --> |
||||
|
||||
<!-- Yandex.Metrika counter --> |
||||
<script type="text/javascript"> |
||||
(function (m, e, t, r, i, k, a) { |
||||
m[i] = m[i] || function () { (m[i].a = m[i].a || []).push(arguments) }; |
||||
m[i].l = 1 * new Date(); |
||||
for (var j = 0; j < document.scripts.length; j++) { if (document.scripts[j].src === r) { return; } } |
||||
k = e.createElement(t), a = e.getElementsByTagName(t)[0], k.async = 1, k.src = r, a.parentNode.insertBefore(k, a) |
||||
}) |
||||
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); |
||||
|
||||
ym(XXXXXX, "init", { // XXXXXX - счетчик |
||||
clickmap: true, |
||||
trackLinks: true, |
||||
accurateTrackBounce: true, |
||||
webvisor: true, |
||||
ecommerce: "dataLayer" |
||||
}); |
||||
</script> |
||||
<noscript> |
||||
<div><img src="https://mc.yandex.ru/watch/85828806" style="position:absolute; left:-9999px;" alt="" /></div> |
||||
</noscript> |
||||
<!-- /Yandex.Metrika counter --> |
||||
|
||||
|
||||
</head> |
||||
<body> |
||||
|
||||
|
||||
<!-- Пример формы для отправки в Телеграмм (обработчик 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> |
||||
</body> |
||||
</html> |
||||
@ -1,38 +0,0 @@ |
||||
<?php |
||||
/* Пример из: https://vc.ru/dev/158136-kak-otpravlyat-zayavki-s-lendinga-pryamo-v-telegram */ |
||||
|
||||
|
||||
//В переменную $token нужно вставить токен, который нам прислал @botFather |
||||
$token = "1094153697:AAFiLXXXXXLl0hRDsxBij1lddKydKxSSsOg04"; |
||||
|
||||
//Сюда вставляем chat_id |
||||
$chat_id = "-40XXXX740"; |
||||
|
||||
//Определяем переменные для передачи данных из нашей формы |
||||
if ($_POST['phone'] !== '') { |
||||
$name = ($_POST['name']); |
||||
$phone = ($_POST['phone']); |
||||
|
||||
//Собираем в массив то, что будет передаваться боту |
||||
$arr = array( |
||||
'Имя:' => $name, |
||||
'Телефон:' => $phone |
||||
); |
||||
|
||||
//Настраиваем внешний вид сообщения в телеграме |
||||
foreach($arr as $key => $value) { |
||||
$txt .= "<b>".$key."</b> ".$value."%0A"; |
||||
}; |
||||
|
||||
//Передаем данные боту |
||||
$sendToTelegram = fopen("https://api.telegram.org/bot{$token}/sendMessage?chat_id={$chat_id}&parse_mode=html&text={$txt}","r"); |
||||
|
||||
//Выводим сообщение об успешной отправке |
||||
if ($sendToTelegram) { |
||||
echo 'Спасибо! Ваша заявка принята. Мы свяжемся с вами в ближайшее время.'; |
||||
}else{ |
||||
echo 'Что-то пошло не так. Попробуйте отправить форму ещё раз.'; |
||||
} |
||||
} |
||||
|
||||
?> |
||||
@ -0,0 +1,391 @@ |
||||
* { |
||||
margin: 0; |
||||
padding: 0; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
body { |
||||
margin: 0; |
||||
padding: 0; |
||||
background: #F9F9F9; |
||||
font-family: 'MuseoSansCyrl', sans-serif; |
||||
} |
||||
a{ |
||||
text-decoration: none; |
||||
} |
||||
button{ |
||||
border: none; |
||||
outline: none; |
||||
} |
||||
.container{ |
||||
max-width: 1256px; |
||||
padding: 0 24px; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
|
||||
/* Banner strat */ |
||||
.banner { |
||||
padding: 50px 24px; |
||||
} |
||||
.banner_block { |
||||
position: relative; |
||||
max-width: 592px; |
||||
padding: 0px 20px 0 11px; |
||||
border-radius: 8px; |
||||
background-image: url(../img/banner-bg.png); |
||||
background-repeat: no-repeat; |
||||
background-size: cover; |
||||
margin: 0 auto; |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 10px; |
||||
} |
||||
.banner .info_block { |
||||
display: flex; |
||||
align-items: end; |
||||
padding: 16px 0px 18px; |
||||
} |
||||
.banner_block_number { |
||||
display: block; |
||||
height: 100%; |
||||
} |
||||
.banner_block_number2 { |
||||
display: none; |
||||
position: absolute; |
||||
top: 24px; |
||||
right: 16px; |
||||
} |
||||
.banner_block_info { |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 12px; |
||||
} |
||||
.banner_block_title { |
||||
font-size: 20px; |
||||
font-weight: 600; |
||||
line-height: 20px; |
||||
color: #FFF; |
||||
max-width: 278px; |
||||
} |
||||
.banner_block_title br{ |
||||
display: none; |
||||
} |
||||
.banner_block_text { |
||||
font-size: 14px; |
||||
font-weight: 300; |
||||
line-height: 16.8px; |
||||
color: #FFF; |
||||
max-width: 233px; |
||||
} |
||||
.banner_block_btn { |
||||
font-size: 14px; |
||||
font-weight: 600; |
||||
line-height: 16.8px; |
||||
color: #0F1521; |
||||
background: #FFFFFF; |
||||
border-radius: 4px; |
||||
text-decoration: none; |
||||
cursor: pointer; |
||||
padding: 10px; |
||||
width: 160px; |
||||
height: 42px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
white-space: nowrap; |
||||
transition: .3s ease all; |
||||
} |
||||
.banner_block_btn:hover{ |
||||
background: #dedede; |
||||
} |
||||
|
||||
.breadcrumb{ |
||||
padding: 15px 0px 40px; |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 5px; |
||||
} |
||||
.breadcrumb_text, |
||||
.breadcrumb_link{ |
||||
font-size: 14px; |
||||
font-weight: 300; |
||||
line-height: 16.8px; |
||||
color: #878A90; |
||||
} |
||||
.breadcrumb_text{ |
||||
color: #000000; |
||||
} |
||||
|
||||
/* Authors start */ |
||||
.authors{ |
||||
padding: 0px 0px 100px; |
||||
} |
||||
.authors_block{ |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 60px; |
||||
} |
||||
.authors_block_title{ |
||||
font-size: 32px; |
||||
font-weight: 600; |
||||
line-height: 38.4px; |
||||
color: #0F1521; |
||||
} |
||||
.authors_cards{ |
||||
display: grid; |
||||
grid-template-columns: 32% 32% 32%; |
||||
gap: 20px; |
||||
} |
||||
.authors_card{ |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 20px; |
||||
} |
||||
.authors_card_img{ |
||||
width: 100%; |
||||
height: 500px; |
||||
border-radius: 8px; |
||||
object-fit: cover; |
||||
} |
||||
.authors_card_title{ |
||||
font-size: 32px; |
||||
font-weight: 600; |
||||
line-height: 32px; |
||||
color: #000000; |
||||
} |
||||
.authors_card_text{ |
||||
font-size: 16px; |
||||
font-weight: 300; |
||||
line-height: 16px; |
||||
color: #000000; |
||||
} |
||||
|
||||
|
||||
.authors_block .authors_top{ |
||||
display: flex; |
||||
background: #FFF; |
||||
border-radius: 8px; |
||||
} |
||||
.authors_top_img{ |
||||
border-radius: 8px; |
||||
object-fit: cover; |
||||
width: 183px; |
||||
height: 200px; |
||||
} |
||||
.authors_top_info{ |
||||
padding: 40px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 32px; |
||||
} |
||||
.authors_top .info_title{ |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 12px; |
||||
} |
||||
.authors_top_info h3{ |
||||
font-size: 24px; |
||||
font-weight: 600; |
||||
line-height: 24px; |
||||
color: #000000; |
||||
} |
||||
.authors_top p{ |
||||
font-size: 16px; |
||||
font-weight: 300; |
||||
line-height: 16px; |
||||
color: #000000; |
||||
} |
||||
|
||||
.authors_items{ |
||||
display: grid; |
||||
grid-template-columns: 32.2% 32.2% 32.2%; |
||||
gap: 20px; |
||||
} |
||||
.authors_item{ |
||||
background: #FFFFFF; |
||||
border-radius: 8px; |
||||
} |
||||
.authors_item_img{ |
||||
border-radius: 8px; |
||||
object-fit: cover; |
||||
width: 100%; |
||||
height: 200px; |
||||
} |
||||
.authors_item_info{ |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 25px; |
||||
padding: 25px 20px; |
||||
} |
||||
.authors_item_boxs{ |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
gap: 20px; |
||||
} |
||||
.authors_item_box{ |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 12px; |
||||
} |
||||
.authors_item_info span{ |
||||
font-size: 14px; |
||||
font-weight: 300; |
||||
line-height: 16.8px; |
||||
color: #777777; |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 8px; |
||||
white-space: nowrap; |
||||
} |
||||
.authors_item_title{ |
||||
font-size: 16px; |
||||
font-weight: 600; |
||||
line-height: 19.2px; |
||||
color: #0F1521; |
||||
} |
||||
|
||||
.items_block{ |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
gap: 40px; |
||||
} |
||||
.item_pagination{ |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 24px; |
||||
} |
||||
.item_pagination_tab{ |
||||
background: #F3F3F3; |
||||
width: 70px; |
||||
height: 71px; |
||||
border-radius: 8px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
border: none; |
||||
outline: none; |
||||
font-size: 16px; |
||||
font-weight: 500; |
||||
line-height: 19.2px; |
||||
color: #878A90; |
||||
cursor: pointer; |
||||
transition: .3s ease all; |
||||
} |
||||
.item_pagination_tab:hover, |
||||
.item_pagination_tab.active{ |
||||
background: linear-gradient(264.09deg, #88B23F 4.91%, #247238 91.1%); |
||||
color: #FFF; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
|
||||
|
||||
/* @Media start */ |
||||
@media (max-width: 1024px) { |
||||
.authors_items { |
||||
grid-template-columns: 49% 49%; |
||||
} |
||||
} |
||||
|
||||
@media (max-width: 768px) { |
||||
.banner .banner_block { |
||||
padding: 30px 20px; |
||||
display: block; |
||||
} |
||||
.banner .info_block { |
||||
padding: 0; |
||||
align-items: start; |
||||
flex-direction: column; |
||||
gap: 18px; |
||||
} |
||||
.banner_block_number { |
||||
display: none; |
||||
} |
||||
.banner_block_number2 { |
||||
display: block; |
||||
} |
||||
.banner_block_info { |
||||
padding-right: 103px; |
||||
gap: 16px; |
||||
} |
||||
.banner_block_text, |
||||
.banner_block_title { |
||||
max-width: 100%; |
||||
} |
||||
|
||||
|
||||
.authors_cards { |
||||
grid-template-columns: 48.5% 48.5%; |
||||
gap: 40px 20px; |
||||
} |
||||
|
||||
.authors_item .info { |
||||
gap: 15px; |
||||
} |
||||
.authors_item_info { |
||||
gap: 20px; |
||||
padding: 20px 15px; |
||||
} |
||||
.authors_items { |
||||
grid-template-columns: 100%; |
||||
} |
||||
|
||||
} |
||||
|
||||
@media (max-width: 568px) { |
||||
.banner .banner_block { |
||||
border-radius: 4px; |
||||
} |
||||
.banner_block_btn { |
||||
width: 100%; |
||||
border-radius: 4px; |
||||
} |
||||
.banner_block_text, |
||||
.banner_block_title { |
||||
max-width: 250px; |
||||
} |
||||
.banner_block_text{ |
||||
line-height: 14px; |
||||
max-width: 171px; |
||||
} |
||||
|
||||
.authors_cards { |
||||
grid-template-columns: 100%; |
||||
} |
||||
.authors_card { |
||||
gap: 15px; |
||||
} |
||||
.authors_card_img { |
||||
height: 400px; |
||||
} |
||||
.authors_card_title { |
||||
font-size: 26px; |
||||
line-height: 26px; |
||||
} |
||||
|
||||
.authors_block .authors_top{ |
||||
flex-direction: column; |
||||
} |
||||
.authors_top_img{ |
||||
margin: 30px 30px 0; |
||||
} |
||||
.authors_top_info { |
||||
padding: 30px 30px 38px; |
||||
gap: 30px; |
||||
} |
||||
.banner_block_title br{ |
||||
display: block; |
||||
} |
||||
|
||||
.item_pagination { |
||||
gap: 15px; |
||||
} |
||||
.item_pagination_tab { |
||||
width: 50px; |
||||
height: 51px; |
||||
border-radius: 4px; |
||||
} |
||||
} |
||||
@ -0,0 +1,379 @@ |
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ |
||||
|
||||
/* Document |
||||
========================================================================== */ |
||||
|
||||
/** |
||||
* 1. Correct the line height in all browsers. |
||||
* 2. Prevent adjustments of font size after orientation changes in iOS. |
||||
*/ |
||||
|
||||
html { |
||||
line-height: 1.15; |
||||
/* 1 */ |
||||
-webkit-text-size-adjust: 100%; |
||||
/* 2 */ |
||||
} |
||||
|
||||
/* Sections |
||||
========================================================================== */ |
||||
|
||||
/** |
||||
* Remove the margin in all browsers. |
||||
*/ |
||||
|
||||
body { |
||||
margin: 0; |
||||
} |
||||
|
||||
/** |
||||
* Render the `main` element consistently in IE. |
||||
*/ |
||||
|
||||
main { |
||||
display: block; |
||||
} |
||||
|
||||
/** |
||||
* Correct the font size and margin on `h1` elements within `section` and |
||||
* `article` contexts in Chrome, Firefox, and Safari. |
||||
*/ |
||||
|
||||
h1 { |
||||
font-size: 2em; |
||||
margin: 0.67em 0; |
||||
} |
||||
|
||||
/* Grouping content |
||||
========================================================================== */ |
||||
|
||||
/** |
||||
* 1. Add the correct box sizing in Firefox. |
||||
* 2. Show the overflow in Edge and IE. |
||||
*/ |
||||
|
||||
hr { |
||||
box-sizing: content-box; |
||||
/* 1 */ |
||||
height: 0; |
||||
/* 1 */ |
||||
overflow: visible; |
||||
/* 2 */ |
||||
} |
||||
|
||||
/** |
||||
* 1. Correct the inheritance and scaling of font size in all browsers. |
||||
* 2. Correct the odd `em` font sizing in all browsers. |
||||
*/ |
||||
|
||||
pre { |
||||
font-family: monospace, monospace; |
||||
/* 1 */ |
||||
font-size: 1em; |
||||
/* 2 */ |
||||
} |
||||
|
||||
/* Text-level semantics |
||||
========================================================================== */ |
||||
|
||||
/** |
||||
* Remove the gray background on active links in IE 10. |
||||
*/ |
||||
|
||||
a { |
||||
background-color: transparent; |
||||
} |
||||
|
||||
/** |
||||
* 1. Remove the bottom border in Chrome 57- |
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. |
||||
*/ |
||||
|
||||
abbr[title] { |
||||
border-bottom: none; |
||||
/* 1 */ |
||||
text-decoration: underline; |
||||
/* 2 */ |
||||
text-decoration: underline dotted; |
||||
/* 2 */ |
||||
} |
||||
|
||||
/** |
||||
* Add the correct font weight in Chrome, Edge, and Safari. |
||||
*/ |
||||
|
||||
b, |
||||
strong { |
||||
font-weight: bolder; |
||||
} |
||||
|
||||
/** |
||||
* 1. Correct the inheritance and scaling of font size in all browsers. |
||||
* 2. Correct the odd `em` font sizing in all browsers. |
||||
*/ |
||||
|
||||
code, |
||||
kbd, |
||||
samp { |
||||
font-family: monospace, monospace; |
||||
/* 1 */ |
||||
font-size: 1em; |
||||
/* 2 */ |
||||
} |
||||
|
||||
/** |
||||
* Add the correct font size in all browsers. |
||||
*/ |
||||
|
||||
small { |
||||
font-size: 80%; |
||||
} |
||||
|
||||
/** |
||||
* Prevent `sub` and `sup` elements from affecting the line height in |
||||
* all browsers. |
||||
*/ |
||||
|
||||
sub, |
||||
sup { |
||||
font-size: 75%; |
||||
line-height: 0; |
||||
position: relative; |
||||
vertical-align: baseline; |
||||
} |
||||
|
||||
sub { |
||||
bottom: -0.25em; |
||||
} |
||||
|
||||
sup { |
||||
top: -0.5em; |
||||
} |
||||
|
||||
/* Embedded content |
||||
========================================================================== */ |
||||
|
||||
/** |
||||
* Remove the border on images inside links in IE 10. |
||||
*/ |
||||
|
||||
img { |
||||
border-style: none; |
||||
} |
||||
|
||||
/* Forms |
||||
========================================================================== */ |
||||
|
||||
/** |
||||
* 1. Change the font styles in all browsers. |
||||
* 2. Remove the margin in Firefox and Safari. |
||||
*/ |
||||
|
||||
button, |
||||
input, |
||||
optgroup, |
||||
select, |
||||
textarea { |
||||
font-family: inherit; |
||||
/* 1 */ |
||||
font-size: 100%; |
||||
/* 1 */ |
||||
line-height: 1.15; |
||||
/* 1 */ |
||||
margin: 0; |
||||
/* 2 */ |
||||
} |
||||
|
||||
/** |
||||
* Show the overflow in IE. |
||||
* 1. Show the overflow in Edge. |
||||
*/ |
||||
|
||||
button, |
||||
input { |
||||
/* 1 */ |
||||
overflow: visible; |
||||
} |
||||
|
||||
/** |
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE. |
||||
* 1. Remove the inheritance of text transform in Firefox. |
||||
*/ |
||||
|
||||
button, |
||||
select { |
||||
/* 1 */ |
||||
text-transform: none; |
||||
} |
||||
|
||||
/** |
||||
* Correct the inability to style clickable types in iOS and Safari. |
||||
*/ |
||||
|
||||
button, |
||||
[type="button"], |
||||
[type="reset"], |
||||
[type="submit"] { |
||||
-webkit-appearance: button; |
||||
} |
||||
|
||||
/** |
||||
* Remove the inner border and padding in Firefox. |
||||
*/ |
||||
|
||||
button::-moz-focus-inner, |
||||
[type="button"]::-moz-focus-inner, |
||||
[type="reset"]::-moz-focus-inner, |
||||
[type="submit"]::-moz-focus-inner { |
||||
border-style: none; |
||||
padding: 0; |
||||
} |
||||
|
||||
/** |
||||
* Restore the focus styles unset by the previous rule. |
||||
*/ |
||||
|
||||
button:-moz-focusring, |
||||
[type="button"]:-moz-focusring, |
||||
[type="reset"]:-moz-focusring, |
||||
[type="submit"]:-moz-focusring { |
||||
outline: 1px dotted ButtonText; |
||||
} |
||||
|
||||
/** |
||||
* Correct the padding in Firefox. |
||||
*/ |
||||
|
||||
fieldset { |
||||
padding: 0.35em 0.75em 0.625em; |
||||
} |
||||
|
||||
/** |
||||
* 1. Correct the text wrapping in Edge and IE. |
||||
* 2. Correct the color inheritance from `fieldset` elements in IE. |
||||
* 3. Remove the padding so developers are not caught out when they zero out |
||||
* `fieldset` elements in all browsers. |
||||
*/ |
||||
|
||||
legend { |
||||
box-sizing: border-box; |
||||
/* 1 */ |
||||
color: inherit; |
||||
/* 2 */ |
||||
display: table; |
||||
/* 1 */ |
||||
max-width: 100%; |
||||
/* 1 */ |
||||
padding: 0; |
||||
/* 3 */ |
||||
white-space: normal; |
||||
/* 1 */ |
||||
} |
||||
|
||||
/** |
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera. |
||||
*/ |
||||
|
||||
progress { |
||||
vertical-align: baseline; |
||||
} |
||||
|
||||
/** |
||||
* Remove the default vertical scrollbar in IE 10+. |
||||
*/ |
||||
|
||||
textarea { |
||||
overflow: auto; |
||||
} |
||||
|
||||
/** |
||||
* 1. Add the correct box sizing in IE 10. |
||||
* 2. Remove the padding in IE 10. |
||||
*/ |
||||
|
||||
[type="checkbox"], |
||||
[type="radio"] { |
||||
box-sizing: border-box; |
||||
/* 1 */ |
||||
padding: 0; |
||||
/* 2 */ |
||||
} |
||||
|
||||
/** |
||||
* Correct the cursor style of increment and decrement buttons in Chrome. |
||||
*/ |
||||
|
||||
[type="number"]::-webkit-inner-spin-button, |
||||
[type="number"]::-webkit-outer-spin-button { |
||||
height: auto; |
||||
} |
||||
|
||||
/** |
||||
* 1. Correct the odd appearance in Chrome and Safari. |
||||
* 2. Correct the outline style in Safari. |
||||
*/ |
||||
|
||||
[type="search"] { |
||||
-webkit-appearance: textfield; |
||||
/* 1 */ |
||||
outline-offset: -2px; |
||||
/* 2 */ |
||||
} |
||||
|
||||
/** |
||||
* Remove the inner padding in Chrome and Safari on macOS. |
||||
*/ |
||||
|
||||
[type="search"]::-webkit-search-decoration { |
||||
-webkit-appearance: none; |
||||
} |
||||
|
||||
/** |
||||
* 1. Correct the inability to style clickable types in iOS and Safari. |
||||
* 2. Change font properties to `inherit` in Safari. |
||||
*/ |
||||
|
||||
::-webkit-file-upload-button { |
||||
-webkit-appearance: button; |
||||
/* 1 */ |
||||
font: inherit; |
||||
/* 2 */ |
||||
} |
||||
|
||||
/* Interactive |
||||
========================================================================== */ |
||||
|
||||
/* |
||||
* Add the correct display in Edge, IE 10+, and Firefox. |
||||
*/ |
||||
|
||||
details { |
||||
display: block; |
||||
} |
||||
|
||||
/* |
||||
* Add the correct display in all browsers. |
||||
*/ |
||||
|
||||
summary { |
||||
display: list-item; |
||||
} |
||||
|
||||
/* Misc |
||||
========================================================================== */ |
||||
|
||||
/** |
||||
* Add the correct display in IE 10+. |
||||
*/ |
||||
|
||||
template { |
||||
display: none; |
||||
} |
||||
|
||||
/** |
||||
* Add the correct display in IE 10. |
||||
*/ |
||||
|
||||
[hidden] { |
||||
display: none; |
||||
} |
||||
@ -1,39 +0,0 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
<title>UI kit</title> |
||||
<link rel="stylesheet" type="text/css" href="/assets/css/style-core.css"> |
||||
</head> |
||||
<style> |
||||
/* Стили для выравнивания UI-элеметнов для данной страницы */ |
||||
.ui__ui-wrapper{ |
||||
display: grid; |
||||
grid-template-columns: repeat(4, 1fr); |
||||
grid-column-gap: 30px; |
||||
grid-row-gap: 30px; |
||||
width: 100vw; |
||||
min-height: 100vh; |
||||
} |
||||
|
||||
.ui, |
||||
.ui__item{ |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
|
||||
/* ВСЕ ОСТАЛЬНЫЕ СТИЛИ ПИШЕМ В style-core.css!!! */ |
||||
</style> |
||||
<body class="ui"> |
||||
<div class="ui__ui-wrapper"> |
||||
<div class="ui__item"></div> |
||||
<div class="ui__item"></div> |
||||
<div class="ui__item"></div> |
||||
<!-- ... --> |
||||
<div class="ui__item"></div> |
||||
</div> |
||||
</body> |
||||
</html> |
||||
Loading…
Reference in new issue