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