Aliaksei Karzhou
1 year ago
parent
24da9d4df0
commit
8653542a07
@ -0,0 +1,133 @@ |
||||
# 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 +1,34 @@ |
||||
# triumph-clinic |
||||
# Требования к верстке |
||||
|
||||
|
||||
## С точки зрения веб-разработки: |
||||
* верстаем на чистом HTML/CSS с использованием flex и grid (без подключение библиотек типа bootstrap и т.п.) |
||||
* при именовании блоков используем методологию **БЭМ в стиле "Two Dashes"**: |
||||
`block-name__elem-name--mod-name--mod-val` |
||||
+ имена записываются латиницей в нижнем регистре |
||||
+ для разделения слов в именах БЭМ-сущностей используется дефис (-) |
||||
+ имя элемента отделяется от имени блока двумя подчеркиваниями (__) |
||||
+ модификаторы отделяются от имения блока или элемента двумя дефисами (--) |
||||
+ значение модификатора отделяется от его имени двумя дефисами (--) |
||||
* из конечного HTML-файла убрать все комментарии, если такие имеются |
||||
<!-- * для всех страниц прописывать уникальный класс в \<body\>, от которого строить 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. Сначала определить CSS-переменные для основных цветов/градиентов, начертаний шрифтов (толщина, размер, модификация, межтрочный интервал) и занести в специально подгтовленный CSS-файл style-core.css |
||||
2. Все шрифты выкачать и сохранить локально в директорию /assets/fonts/ и подключить их в файле style-core.css |
||||
3. Далее начинать стоит с верстки UI kit (должен быть предоставлен в макете дизайнером), для того чтобы переиспользовать готовые элементы по ходу верстки макетов. Для удобства подготовлен файл "ui_kit.html" |
||||
3. Как UI kit будет готов, можно смело переходить к верстке основных листов макета "*.html" |
||||
|
||||
|
||||
### Примечания |
||||
|
||||
Для работы с Figma рекомендуем использовать плагин ["Inspect Styles"](https://www.figma.com/community/plugin/1254262542670221199) для инспевтирования CSS-свойсв. |
||||
@ -0,0 +1,11 @@ |
||||
/* |
||||
|
||||
ШАБЛОН использования глобальных переменных: |
||||
|
||||
:root { |
||||
--main-text: #e1667c; |
||||
--main-color: #8da6cb; |
||||
--font-family: "Craftwork Grotesk", sans-serif; |
||||
} |
||||
|
||||
*/ |
||||
@ -0,0 +1,4 @@ |
||||
/* Стили для лептопов */ |
||||
@media only screen and (max-width: 1720px) { |
||||
|
||||
} |
||||
@ -0,0 +1,5 @@ |
||||
/* Стили для мобильных устройств */ |
||||
@media only screen and (max-width: 480px) { |
||||
|
||||
|
||||
} |
||||
@ -0,0 +1,5 @@ |
||||
/* Стили для планшетов */ |
||||
@media only screen and (max-width: 1024px) { |
||||
|
||||
|
||||
} |
||||
@ -0,0 +1,2 @@ |
||||
/* Стили для ультрашироких экранов */ |
||||
@media only screen and (min-width: 1720px) {} |
||||
@ -0,0 +1,157 @@ |
||||
html { |
||||
font-size: 16px; |
||||
font-family: "Montserrat", sans-serif; |
||||
font-weight: 400; |
||||
font-style: normal; |
||||
scroll-behavior: smooth; |
||||
} |
||||
|
||||
body { |
||||
position: relative; |
||||
margin: 0; |
||||
overflow-y: scroll; |
||||
color: #2d2d2d; |
||||
background-color: #ededed; |
||||
} |
||||
|
||||
a, |
||||
button, |
||||
input, |
||||
textarea { |
||||
font-family: "Montserrat", sans-serif; |
||||
text-decoration: none; |
||||
} |
||||
|
||||
a { |
||||
transition: all ease-in-out 0.1s; |
||||
} |
||||
a:hover { |
||||
color: #609eff; |
||||
} |
||||
a:active { |
||||
color: #3081ff; |
||||
} |
||||
|
||||
figure { |
||||
margin: 0; |
||||
} |
||||
|
||||
img { |
||||
max-width: 100%; |
||||
height: auto; |
||||
} |
||||
|
||||
.container { |
||||
max-width: 1236px; |
||||
width: 100%; |
||||
margin: 0 auto; |
||||
padding: 0 15px; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
.logo__link { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 22px; |
||||
} |
||||
.logo__figure { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
.logo__figure-image { |
||||
display: block; |
||||
max-width: 100%; |
||||
width: 35px; |
||||
height: auto; |
||||
} |
||||
.logo__text { |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 5px; |
||||
} |
||||
.logo__text-name { |
||||
font-weight: 600; |
||||
font-size: 26px; |
||||
letter-spacing: 0.04em; |
||||
text-transform: uppercase; |
||||
color: #2d2d2d; |
||||
} |
||||
.logo__text-slogan { |
||||
font-weight: 400; |
||||
font-size: 9px; |
||||
letter-spacing: 0.05em; |
||||
text-transform: uppercase; |
||||
color: #878787; |
||||
} |
||||
|
||||
.social-link { |
||||
display: inline-block; |
||||
height: 29px; |
||||
width: 29px; |
||||
border-radius: 32px; |
||||
background-position: center; |
||||
background-repeat: no-repeat; |
||||
} |
||||
.social-link--whatsapp { |
||||
background-image: url(../img/icons/whatsapp.svg); |
||||
background-color: #2aa81a; |
||||
} |
||||
.social-link--whatsapp:active { |
||||
background-color: #42d030; |
||||
} |
||||
.social-link--tg { |
||||
background-image: url(../img/icons/telegram.svg); |
||||
background-color: #178ec9; |
||||
} |
||||
.social-link--tg:active { |
||||
background-color: #45b3ea; |
||||
} |
||||
.social-link--phone { |
||||
width: auto; |
||||
height: auto; |
||||
margin-left: 17px; |
||||
font-weight: 600; |
||||
font-size: 24px; |
||||
color: #2d2d2d; |
||||
} |
||||
|
||||
.button { |
||||
border-radius: 100px; |
||||
background-color: #ffffff; |
||||
transition: all ease-in-out 0.1s; |
||||
cursor: pointer; |
||||
} |
||||
.button--order { |
||||
display: inline-block; |
||||
padding: 14px 29px; |
||||
font-weight: 500; |
||||
font-size: 14px; |
||||
letter-spacing: 0.01em; |
||||
border: 1px solid #cacaca; |
||||
} |
||||
|
||||
.header { |
||||
padding: 26px 0 29px; |
||||
} |
||||
.header .container { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
gap: 24px; |
||||
} |
||||
.header__nav { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 36px; |
||||
padding: 0 30px 0 35px; |
||||
} |
||||
.header__nav-link { |
||||
font-weight: 400; |
||||
font-size: 15px; |
||||
} |
||||
.header__social { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 17px; |
||||
} |
||||
|
After Width: | Height: | Size: 190 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 722 B |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
@ -0,0 +1,29 @@ |
||||
@mixin desktop { |
||||
@media (max-width: 1240px) { |
||||
@content; |
||||
} |
||||
} |
||||
|
||||
@mixin laptop { |
||||
@media (max-width: 992px) { |
||||
@content; |
||||
} |
||||
} |
||||
|
||||
@mixin tablet { |
||||
@media (max-width: 768px) { |
||||
@content; |
||||
} |
||||
} |
||||
|
||||
@mixin mobile { |
||||
@media (max-width: 576px) { |
||||
@content; |
||||
} |
||||
} |
||||
|
||||
@mixin mobilesm { |
||||
@media (max-width: 400px) { |
||||
@content; |
||||
} |
||||
} |
||||
@ -0,0 +1,44 @@ |
||||
html { |
||||
font-size: 16px; |
||||
font-family: 'Montserrat', sans-serif; |
||||
font-weight: 400; |
||||
font-style: normal; |
||||
scroll-behavior: smooth; |
||||
} |
||||
|
||||
body { |
||||
position: relative; |
||||
margin: 0; |
||||
overflow-y: scroll; |
||||
color: $black; |
||||
background-color: $greybg; |
||||
} |
||||
|
||||
a, |
||||
button, |
||||
input, |
||||
textarea { |
||||
font-family: 'Montserrat', sans-serif; |
||||
text-decoration: none; |
||||
} |
||||
|
||||
a { |
||||
transition: all ease-in-out 0.1s; |
||||
|
||||
&:hover { |
||||
color: $blue; |
||||
} |
||||
|
||||
&:active { |
||||
color: $darkblue; |
||||
} |
||||
} |
||||
|
||||
figure { |
||||
margin: 0; |
||||
} |
||||
|
||||
img { |
||||
max-width: 100%; |
||||
height: auto; |
||||
} |
||||
@ -0,0 +1,9 @@ |
||||
// colors |
||||
|
||||
$black: #2d2d2d; |
||||
$grey: #878787; |
||||
$lightgrey: #cacaca; |
||||
$blue: #609eff; |
||||
$darkblue: #3081ff; |
||||
$greybg: #ededed; |
||||
$white: #ffffff; |
||||
@ -0,0 +1,2 @@ |
||||
.footer { |
||||
} |
||||
@ -0,0 +1,28 @@ |
||||
.header { |
||||
padding: 26px 0 29px; |
||||
|
||||
& .container { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
gap: 24px; |
||||
} |
||||
|
||||
&__nav { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 36px; |
||||
padding: 0 30px 0 35px; |
||||
|
||||
&-link { |
||||
font-weight: 400; |
||||
font-size: 15px; |
||||
} |
||||
} |
||||
|
||||
&__social { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 17px; |
||||
} |
||||
} |
||||
@ -0,0 +1,2 @@ |
||||
.main { |
||||
} |
||||
@ -0,0 +1,15 @@ |
||||
.button { |
||||
border-radius: 100px; |
||||
background-color: $white; |
||||
transition: all ease-in-out 0.1s; |
||||
cursor: pointer; |
||||
|
||||
&--order { |
||||
display: inline-block; |
||||
padding: 14px 29px; |
||||
font-weight: 500; |
||||
font-size: 14px; |
||||
letter-spacing: 0.01em; |
||||
border: 1px solid #cacaca; |
||||
} |
||||
} |
||||
@ -0,0 +1,7 @@ |
||||
.container { |
||||
max-width: 1236px; |
||||
width: 100%; |
||||
margin: 0 auto; |
||||
padding: 0 15px; |
||||
box-sizing: border-box; |
||||
} |
||||
@ -0,0 +1,42 @@ |
||||
.logo { |
||||
&__link { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 22px; |
||||
} |
||||
|
||||
&__figure { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
|
||||
&-image { |
||||
display: block; |
||||
max-width: 100%; |
||||
width: 35px; |
||||
height: auto; |
||||
} |
||||
} |
||||
|
||||
&__text { |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 5px; |
||||
|
||||
&-name { |
||||
font-weight: 600; |
||||
font-size: 26px; |
||||
letter-spacing: 0.04em; |
||||
text-transform: uppercase; |
||||
color: $black; |
||||
} |
||||
|
||||
&-slogan { |
||||
font-weight: 400; |
||||
font-size: 9px; |
||||
letter-spacing: 0.05em; |
||||
text-transform: uppercase; |
||||
color: $grey; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,35 @@ |
||||
.social-link { |
||||
display: inline-block; |
||||
height: 29px; |
||||
width: 29px; |
||||
border-radius: 32px; |
||||
background-position: center; |
||||
background-repeat: no-repeat; |
||||
|
||||
&--whatsapp { |
||||
background-image: url(../img/icons/whatsapp.svg); |
||||
background-color: #2aa81a; |
||||
|
||||
&:active { |
||||
background-color: #42d030; |
||||
} |
||||
} |
||||
|
||||
&--tg { |
||||
background-image: url(../img/icons/telegram.svg); |
||||
background-color: #178ec9; |
||||
|
||||
&:active { |
||||
background-color: #45b3ea; |
||||
} |
||||
} |
||||
|
||||
&--phone { |
||||
width: auto; |
||||
height: auto; |
||||
margin-left: 17px; |
||||
font-weight: 600; |
||||
font-size: 24px; |
||||
color: $black; |
||||
} |
||||
} |
||||
@ -0,0 +1,18 @@ |
||||
// Base |
||||
|
||||
@import './b-vars'; |
||||
@import './b-mixins'; |
||||
@import './b-reset'; |
||||
|
||||
// Modules |
||||
|
||||
@import './m-container'; |
||||
@import './m-logo'; |
||||
@import './m-social-link'; |
||||
@import './m-button'; |
||||
|
||||
// Layouts |
||||
|
||||
@import './l-header'; |
||||
@import './l-main'; |
||||
@import './l-footer'; |
||||
@ -0,0 +1,49 @@ |
||||
<!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>Триумф</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/index.css" /> |
||||
</head> |
||||
|
||||
<body> |
||||
<header class="header"> |
||||
<div class="container"> |
||||
<div class="logo"> |
||||
<a class="logo__link" href="./"> |
||||
<figure class="logo__figure"> |
||||
<img class="logo__figure-image" src="./assets/img/logo.svg" alt="logo" /> |
||||
</figure> |
||||
<div class="logo__text"> |
||||
<span class="logo__text-name">Триумф</span> |
||||
<span class="logo__text-slogan">Cобственная победа</span> |
||||
</div> |
||||
</a> |
||||
</div> |
||||
|
||||
<nav class="header__nav"> |
||||
<a class="header__nav-link" href="#">О центре</a> |
||||
<a class="header__nav-link" href="#">Цены</a> |
||||
<a class="header__nav-link" href="#">Частые вопросы</a> |
||||
<a class="header__nav-link" href="#">Контакты</a> |
||||
</nav> |
||||
|
||||
<div class="header__social"> |
||||
<a class="social-link social-link--whatsapp" href="#"></a> |
||||
<a class="social-link social-link--tg" href="#"></a> |
||||
<a class="social-link social-link--phone" href="tel:88001012127">8 (800) 101-21-27</a> |
||||
</div> |
||||
|
||||
<div class="header__buttons"> |
||||
<button class="button button--order">Заказать звонок</button> |
||||
</div> |
||||
</div> |
||||
</header> |
||||
|
||||
<script src="/assets/js/main.js"></script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,37 @@ |
||||
<!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> |
||||
<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