diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..eabfe7e --- /dev/null +++ b/.gitignore @@ -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 \ No newline at end of file diff --git a/README.md b/README.md index 678af0c..8b1d9c2 100644 --- a/README.md +++ b/README.md @@ -1 +1,34 @@ -# triumph-clinic \ No newline at end of file +# Требования к верстке + + +## С точки зрения веб-разработки: +* верстаем на чистом HTML/CSS с использованием flex и grid (без подключение библиотек типа bootstrap и т.п.) +* при именовании блоков используем методологию **БЭМ в стиле "Two Dashes"**: + `block-name__elem-name--mod-name--mod-val` + + имена записываются латиницей в нижнем регистре + + для разделения слов в именах БЭМ-сущностей используется дефис (-) + + имя элемента отделяется от имени блока двумя подчеркиваниями (__) + + модификаторы отделяются от имения блока или элемента двумя дефисами (--) + + значение модификатора отделяется от его имени двумя дефисами (--) +* из конечного HTML-файла убрать все комментарии, если такие имеются + + + +## С точки зрения SEO: +* все теги использовать строго по назначению! Текстовые (strong, b, i, em, h1-h6… p) используем только в текстовых блоках и заголовках. Для дизайна используем div и span. Например не нужно втыкать в подвал, шапку или формы захвата h4 или закрывать просто крупный текст, который не является заголовком в h2. +* на странице должен быть только один заголовок первого уровня (h1) +* должны присутствовать все основные теги и атрибуты — html, head, body, title, description, lang=ru, content=html, charset=utf8 +* для кнопок, нажатие на которые не требует редиректа используем тег \, а не \ +* для \ самостоятельно проставляем атрибут 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-свойсв. \ No newline at end of file diff --git a/assets/css/gp-style-core.css b/assets/css/gp-style-core.css new file mode 100644 index 0000000..17b7034 --- /dev/null +++ b/assets/css/gp-style-core.css @@ -0,0 +1,11 @@ +/* + +ШАБЛОН использования глобальных переменных: + +:root { + --main-text: #e1667c; + --main-color: #8da6cb; + --font-family: "Craftwork Grotesk", sans-serif; +} + +*/ diff --git a/assets/css/gp-style-desktop.css b/assets/css/gp-style-desktop.css new file mode 100644 index 0000000..1c11a4e --- /dev/null +++ b/assets/css/gp-style-desktop.css @@ -0,0 +1,4 @@ +/* Стили для лептопов */ +@media only screen and (max-width: 1720px) { + +} \ No newline at end of file diff --git a/assets/css/gp-style-mobile.css b/assets/css/gp-style-mobile.css new file mode 100644 index 0000000..ca8d1c6 --- /dev/null +++ b/assets/css/gp-style-mobile.css @@ -0,0 +1,5 @@ +/* Стили для мобильных устройств */ +@media only screen and (max-width: 480px) { + + +} \ No newline at end of file diff --git a/assets/css/gp-style-tablet.css b/assets/css/gp-style-tablet.css new file mode 100644 index 0000000..b6835e3 --- /dev/null +++ b/assets/css/gp-style-tablet.css @@ -0,0 +1,5 @@ +/* Стили для планшетов */ +@media only screen and (max-width: 1024px) { + + +} \ No newline at end of file diff --git a/assets/css/gp-style-ultra.css b/assets/css/gp-style-ultra.css new file mode 100644 index 0000000..60aa1f7 --- /dev/null +++ b/assets/css/gp-style-ultra.css @@ -0,0 +1,2 @@ +/* Стили для ультрашироких экранов */ +@media only screen and (min-width: 1720px) {} \ No newline at end of file diff --git a/assets/css/index.css b/assets/css/index.css new file mode 100644 index 0000000..66735ad --- /dev/null +++ b/assets/css/index.css @@ -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; +} \ No newline at end of file diff --git a/assets/img/favicon.ico b/assets/img/favicon.ico new file mode 100644 index 0000000..5517fde Binary files /dev/null and b/assets/img/favicon.ico differ diff --git a/assets/img/icons/phone.svg b/assets/img/icons/phone.svg new file mode 100644 index 0000000..90d8501 --- /dev/null +++ b/assets/img/icons/phone.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/assets/img/icons/telegram.svg b/assets/img/icons/telegram.svg new file mode 100644 index 0000000..beb94db --- /dev/null +++ b/assets/img/icons/telegram.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/assets/img/icons/vk.svg b/assets/img/icons/vk.svg new file mode 100644 index 0000000..47642ff --- /dev/null +++ b/assets/img/icons/vk.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/assets/img/icons/whatsapp.svg b/assets/img/icons/whatsapp.svg new file mode 100644 index 0000000..3cba046 --- /dev/null +++ b/assets/img/icons/whatsapp.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/icons/youtube.svg b/assets/img/icons/youtube.svg new file mode 100644 index 0000000..b06b196 --- /dev/null +++ b/assets/img/icons/youtube.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/assets/img/logo.svg b/assets/img/logo.svg new file mode 100644 index 0000000..ba84a88 --- /dev/null +++ b/assets/img/logo.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..e69de29 diff --git a/assets/scss/_b-mixins.scss b/assets/scss/_b-mixins.scss new file mode 100644 index 0000000..bbc61ca --- /dev/null +++ b/assets/scss/_b-mixins.scss @@ -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; + } +} diff --git a/assets/scss/_b-reset.scss b/assets/scss/_b-reset.scss new file mode 100644 index 0000000..f7363c1 --- /dev/null +++ b/assets/scss/_b-reset.scss @@ -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; +} diff --git a/assets/scss/_b-vars.scss b/assets/scss/_b-vars.scss new file mode 100644 index 0000000..31184ad --- /dev/null +++ b/assets/scss/_b-vars.scss @@ -0,0 +1,9 @@ +// colors + +$black: #2d2d2d; +$grey: #878787; +$lightgrey: #cacaca; +$blue: #609eff; +$darkblue: #3081ff; +$greybg: #ededed; +$white: #ffffff; diff --git a/assets/scss/_l-footer.scss b/assets/scss/_l-footer.scss new file mode 100644 index 0000000..ee9fb41 --- /dev/null +++ b/assets/scss/_l-footer.scss @@ -0,0 +1,2 @@ +.footer { +} diff --git a/assets/scss/_l-header.scss b/assets/scss/_l-header.scss new file mode 100644 index 0000000..1cf76a4 --- /dev/null +++ b/assets/scss/_l-header.scss @@ -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; + } +} diff --git a/assets/scss/_l-main.scss b/assets/scss/_l-main.scss new file mode 100644 index 0000000..662ecf8 --- /dev/null +++ b/assets/scss/_l-main.scss @@ -0,0 +1,2 @@ +.main { +} diff --git a/assets/scss/_m-button.scss b/assets/scss/_m-button.scss new file mode 100644 index 0000000..189e428 --- /dev/null +++ b/assets/scss/_m-button.scss @@ -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; + } +} diff --git a/assets/scss/_m-container.scss b/assets/scss/_m-container.scss new file mode 100644 index 0000000..d9fc9a4 --- /dev/null +++ b/assets/scss/_m-container.scss @@ -0,0 +1,7 @@ +.container { + max-width: 1236px; + width: 100%; + margin: 0 auto; + padding: 0 15px; + box-sizing: border-box; +} diff --git a/assets/scss/_m-logo.scss b/assets/scss/_m-logo.scss new file mode 100644 index 0000000..bc6e177 --- /dev/null +++ b/assets/scss/_m-logo.scss @@ -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; + } + } +} diff --git a/assets/scss/_m-social-link.scss b/assets/scss/_m-social-link.scss new file mode 100644 index 0000000..f32d879 --- /dev/null +++ b/assets/scss/_m-social-link.scss @@ -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; + } +} diff --git a/assets/scss/index.scss b/assets/scss/index.scss new file mode 100644 index 0000000..efc8707 --- /dev/null +++ b/assets/scss/index.scss @@ -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'; diff --git a/index.html b/index.html new file mode 100644 index 0000000..956cd23 --- /dev/null +++ b/index.html @@ -0,0 +1,49 @@ + + + + + + + Триумф + + + + + + +
+
+ + + + + + +
+ +
+
+
+ + + + diff --git a/ui_kit.html b/ui_kit.html new file mode 100644 index 0000000..9ecea8f --- /dev/null +++ b/ui_kit.html @@ -0,0 +1,37 @@ + + + + + + + UI kit + + + + +
+
+
+
+ +
+
+ + \ No newline at end of file