@ -0,0 +1,39 @@ |
|||||||
|
<!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/index.css"> |
||||||
|
<title>Title</title> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div class="wrapper"> |
||||||
|
<section class="authors"> |
||||||
|
<div class="container"> |
||||||
|
<div class="authors_block"> |
||||||
|
<h2 class="title">Наши авторы</h2> |
||||||
|
<div class="authors_cards"> |
||||||
|
<div class="authors_card"> |
||||||
|
<img src="img/authors-img1.png" alt=""> |
||||||
|
<h3>Екатерина Волкова</h3> |
||||||
|
<p>Старший менеджер по продажам</p> |
||||||
|
</div> |
||||||
|
<div class="authors_card"> |
||||||
|
<img src="img/authors-img2.png" alt=""> |
||||||
|
<h3>Анастасия Колесникова</h3> |
||||||
|
<p>Менеджер по продажам</p> |
||||||
|
</div> |
||||||
|
<div class="authors_card"> |
||||||
|
<img src="img/authors-img3.png" alt=""> |
||||||
|
<h3>Тимур Абдеев</h3> |
||||||
|
<p>Менеджер по работе с клиентами</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
</div> |
||||||
|
|
||||||
|
</body> |
||||||
|
</html> |
@ -0,0 +1,225 @@ |
|||||||
|
<!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/index.css"> |
||||||
|
<title>Title</title> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div class="wrapper"> |
||||||
|
<section class="authors"> |
||||||
|
<div class="container"> |
||||||
|
<div class="authors_block"> |
||||||
|
<div class="top_box"> |
||||||
|
<img src="img/box-img.png" alt=""> |
||||||
|
<div class="info"> |
||||||
|
<div class="info_title"> |
||||||
|
<h3>Екатерина Волкова</h3> |
||||||
|
<p>Старший менеджер по продажам</p> |
||||||
|
</div> |
||||||
|
<p>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<h2 class="title">Екатерина Волкова</h2> |
||||||
|
|
||||||
|
<div class="items_block"> |
||||||
|
<div class="authors_items"> |
||||||
|
<div class="authors_item"> |
||||||
|
<img src="img/item-img1.png" alt="" class="item-img"> |
||||||
|
<div class="info_wrap"> |
||||||
|
<div class="info"> |
||||||
|
<span>22 августа 2024</span> |
||||||
|
|
||||||
|
<div class="info_box"> |
||||||
|
<span> |
||||||
|
<img src="img/clock-circle.svg" alt=""> |
||||||
|
5 минут |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
<img src="img/eye.svg" alt=""> |
||||||
|
1064 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<h5>Аккредитация и лицензирование учебных заведений </h5> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="authors_item"> |
||||||
|
<img src="img/item-img2.png" alt="" class="item-img"> |
||||||
|
<div class="info_wrap"> |
||||||
|
<div class="info"> |
||||||
|
<span>22 августа 2024</span> |
||||||
|
|
||||||
|
<div class="info_box"> |
||||||
|
<span> |
||||||
|
<img src="img/clock-circle.svg" alt=""> |
||||||
|
5 минут |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
<img src="img/eye.svg" alt=""> |
||||||
|
362 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<h5>Как получить медицинскую лицензию? </h5> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="authors_item"> |
||||||
|
<img src="img/item-img3.png" alt="" class="item-img"> |
||||||
|
<div class="info_wrap"> |
||||||
|
<div class="info"> |
||||||
|
<span>22 августа 2024</span> |
||||||
|
|
||||||
|
<div class="info_box"> |
||||||
|
<span> |
||||||
|
<img src="img/clock-circle.svg" alt=""> |
||||||
|
5 минут |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
<img src="img/eye.svg" alt=""> |
||||||
|
1458 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<h5>Как получить образовательную лицензию? </h5> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="authors_item"> |
||||||
|
<img src="img/item-img4.png" alt="" class="item-img"> |
||||||
|
<div class="info_wrap"> |
||||||
|
<div class="info"> |
||||||
|
<span>22 августа 2024</span> |
||||||
|
|
||||||
|
<div class="info_box"> |
||||||
|
<span> |
||||||
|
<img src="img/clock-circle.svg" alt=""> |
||||||
|
5 минут |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
<img src="img/eye.svg" alt=""> |
||||||
|
3221 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<h5>Как провести оценку ООО перед продажей: советы эксперта</h5> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="authors_item"> |
||||||
|
<img src="img/item-img5.png" alt="" class="item-img"> |
||||||
|
<div class="info_wrap"> |
||||||
|
<div class="info"> |
||||||
|
<span>22 августа 2024</span> |
||||||
|
|
||||||
|
<div class="info_box"> |
||||||
|
<span> |
||||||
|
<img src="img/clock-circle.svg" alt=""> |
||||||
|
5 минут |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
<img src="img/eye.svg" alt=""> |
||||||
|
3220 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<h5>Что лучше: ИП, ПБОЮЛ или ЧП, ЧОП, ЧОО, ООО ИЛИ АО </h5> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="authors_item"> |
||||||
|
<img src="img/item-img6.png" alt="" class="item-img"> |
||||||
|
<div class="info_wrap"> |
||||||
|
<div class="info"> |
||||||
|
<span>22 августа 2024</span> |
||||||
|
|
||||||
|
<div class="info_box"> |
||||||
|
<span> |
||||||
|
<img src="img/clock-circle.svg" alt=""> |
||||||
|
5 минут |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
<img src="img/eye.svg" alt=""> |
||||||
|
3075 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<h5>Нужен ли допуск СРО для выполнения электромонтажных работ</h5> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="authors_item"> |
||||||
|
<img src="img/item-img7.png" alt="" class="item-img"> |
||||||
|
<div class="info_wrap"> |
||||||
|
<div class="info"> |
||||||
|
<span>22 августа 2024</span> |
||||||
|
|
||||||
|
<div class="info_box"> |
||||||
|
<span> |
||||||
|
<img src="img/clock-circle.svg" alt=""> |
||||||
|
5 минут |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
<img src="img/eye.svg" alt=""> |
||||||
|
4760 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<h5>Список работ, при выполнении которых допуск СРО не требуется </h5> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="authors_item"> |
||||||
|
<img src="img/item-img8.png" alt="" class="item-img"> |
||||||
|
<div class="info_wrap"> |
||||||
|
<div class="info"> |
||||||
|
<span>22 августа 2024</span> |
||||||
|
|
||||||
|
<div class="info_box"> |
||||||
|
<span> |
||||||
|
<img src="img/clock-circle.svg" alt=""> |
||||||
|
5 минут |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
<img src="img/eye.svg" alt=""> |
||||||
|
3218 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<h5>Сравнение различных видов сертификатов ISO: какой выбрать для своего бизнеса </h5> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="authors_item"> |
||||||
|
<img src="img/item-img9.png" alt="" class="item-img"> |
||||||
|
<div class="info_wrap"> |
||||||
|
<div class="info"> |
||||||
|
<span>22 августа 2024</span> |
||||||
|
|
||||||
|
<div class="info_box"> |
||||||
|
<span> |
||||||
|
<img src="img/clock-circle.svg" alt=""> |
||||||
|
5 минут |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
<img src="img/eye.svg" alt=""> |
||||||
|
1946 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<h5>Получение лицензии на алкоголь в 2024: часто задаваемые вопросы </h5> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="item_pagination"> |
||||||
|
<button class="pagination_tab active">1</button> |
||||||
|
<button class="pagination_tab">2</button> |
||||||
|
<button class="pagination_tab">3</button> |
||||||
|
<button class="pagination_tab">4</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
</div> |
||||||
|
|
||||||
|
</body> |
||||||
|
</html> |
@ -0,0 +1,192 @@ |
|||||||
|
<!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"> |
||||||
|
<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; |
||||||
|
} |
||||||
|
/* demo styles */ |
||||||
|
body { |
||||||
|
background: #f0f0f0; |
||||||
|
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; |
||||||
|
padding: 9px; |
||||||
|
margin: 0 0 12px; |
||||||
|
font-family: Monaco, Menlo, Consolas, "Courier New", monospace; |
||||||
|
font-size: 13px; |
||||||
|
line-height: 1.428571429; |
||||||
|
color: #333; |
||||||
|
font-weight: normal; |
||||||
|
font-style: normal; |
||||||
|
background-color: #f5f5f5; |
||||||
|
border: 1px solid #ccc; |
||||||
|
overflow-x: auto; |
||||||
|
border-radius: 4px; |
||||||
|
} |
||||||
|
/* responsive */ |
||||||
|
@media (max-width: 959px) { |
||||||
|
.page { |
||||||
|
width: auto; |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div class="page"> |
||||||
|
<div class="demo"> |
||||||
|
<h1 style="font-family: 'Museo Sans Cyrl 100'; font-weight: 200; font-style: normal;">Museo Sans Cyrl 100</h1> |
||||||
|
<pre title="Usage">.your-style { |
||||||
|
font-family: 'Museo Sans Cyrl 100'; |
||||||
|
font-weight: 200; |
||||||
|
font-style: normal; |
||||||
|
}</pre> |
||||||
|
<pre title="Preload (optional)"> |
||||||
|
<link rel="preload" href="MuseoSansCyrl-100.woff" as="font" type="font/woff" crossorigin></pre> |
||||||
|
<div class="font-container" style="font-family: 'Museo Sans Cyrl 100'; font-weight: 200; font-style: normal;"> |
||||||
|
<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,32 @@ |
|||||||
|
@font-face { |
||||||
|
font-family: 'Museo Sans Cyrl'; |
||||||
|
src: url('MuseoSansCyrl-100.woff') format('woff'), |
||||||
|
url('MuseoSansCyrl-100.ttf') format('truetype'); |
||||||
|
font-weight: 200; |
||||||
|
font-style: normal; |
||||||
|
font-display: swap; |
||||||
|
} |
||||||
|
@font-face { |
||||||
|
font-family: 'Museo Sans Cyrl'; |
||||||
|
src: url('MuseoSansCyrl-400.woff') format('woff'), |
||||||
|
url('MuseoSansCyrl-400.ttf') format('truetype'); |
||||||
|
font-weight: 400; |
||||||
|
font-style: normal; |
||||||
|
font-display: swap; |
||||||
|
} |
||||||
|
@font-face { |
||||||
|
font-family: 'Museo Sans Cyrl'; |
||||||
|
src: url('MuseoSansCyrl-500.woff') format('woff'), |
||||||
|
url('MuseoSansCyrl-500.ttf') format('truetype'); |
||||||
|
font-weight: 500; |
||||||
|
font-style: normal; |
||||||
|
font-display: swap; |
||||||
|
} |
||||||
|
@font-face { |
||||||
|
font-family: 'Museo Sans Cyrl'; |
||||||
|
src: url('MuseoSansCyrl-600.woff') format('woff'), |
||||||
|
url('MuseoSansCyrl-600.ttf') format('truetype'); |
||||||
|
font-weight: 600; |
||||||
|
font-style: normal; |
||||||
|
font-display: swap; |
||||||
|
} |
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 |
@ -0,0 +1,30 @@ |
|||||||
|
<!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/index.css"> |
||||||
|
<title>Title</title> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div class="wrapper"> |
||||||
|
<div class="banner"> |
||||||
|
<div class="banner_block"> |
||||||
|
<div class="number"> |
||||||
|
<img src="img/num.svg" alt="" class="number1"> |
||||||
|
<img src="img/num-mob.svg" alt="" class="number-mob"> |
||||||
|
</div> |
||||||
|
<div class="info_block"> |
||||||
|
<div class="info"> |
||||||
|
<h3>Беспроцентная рассрочка на все услуги!</h3> |
||||||
|
<p>Оставьте заявку и получите консультацию!</p> |
||||||
|
</div> |
||||||
|
<a href="#!" class="info_btn">Оставить заявку</a> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</body> |
||||||
|
</html> |
@ -0,0 +1,355 @@ |
|||||||
|
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"); |
||||||
|
|
||||||
|
* { |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
|
||||||
|
body { |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
background: #F9F9F9; |
||||||
|
font-family: "Museo Sans Cyrl", sans-serif; |
||||||
|
} |
||||||
|
.container{ |
||||||
|
max-width: 1256px; |
||||||
|
padding: 0 24px; |
||||||
|
margin: 0 auto; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
/* Banner strat */ |
||||||
|
.banner { |
||||||
|
padding: 50px 24px; |
||||||
|
} |
||||||
|
.banner .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 .number1 { |
||||||
|
display: block; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
.banner_block .number-mob { |
||||||
|
display: none; |
||||||
|
position: absolute; |
||||||
|
top: 24px; |
||||||
|
right: 16px; |
||||||
|
} |
||||||
|
.banner_block .info { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
gap: 12px; |
||||||
|
} |
||||||
|
.banner_block .info h3 { |
||||||
|
font-size: 20px; |
||||||
|
font-weight: 600; |
||||||
|
line-height: 20px; |
||||||
|
color: #FFF; |
||||||
|
max-width: 278px; |
||||||
|
} |
||||||
|
.banner_block .info p { |
||||||
|
font-family: Inter; |
||||||
|
font-size: 14px; |
||||||
|
font-weight: 400; |
||||||
|
line-height: 16.8px; |
||||||
|
color: #FFF; |
||||||
|
max-width: 233px; |
||||||
|
} |
||||||
|
.banner_block .info_btn { |
||||||
|
font-family: "Museo Sans Cyrl", sans-serif; |
||||||
|
font-size: 14px; |
||||||
|
font-weight: 600; |
||||||
|
line-height: 16.8px; |
||||||
|
color: #0F1521; |
||||||
|
background: #FFFFFF; |
||||||
|
border-radius: 4px; |
||||||
|
text-decoration: none; |
||||||
|
padding: 10px; |
||||||
|
width: 160px; |
||||||
|
height: 42px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
/* Authors start */ |
||||||
|
.authors{ |
||||||
|
padding: 40px 0px 100px; |
||||||
|
} |
||||||
|
.authors .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_block .authors_cards{ |
||||||
|
display: grid; |
||||||
|
grid-template-columns: 32% 32% 32%; |
||||||
|
gap: 20px; |
||||||
|
} |
||||||
|
.authors_block .authors_card{ |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
gap: 25px; |
||||||
|
} |
||||||
|
.authors_card img{ |
||||||
|
width: 100%; |
||||||
|
height: 500px; |
||||||
|
border-radius: 8px; |
||||||
|
object-fit: cover; |
||||||
|
} |
||||||
|
.authors_card h3{ |
||||||
|
font-size: 32px; |
||||||
|
font-weight: 600; |
||||||
|
line-height: 38.4px; |
||||||
|
color: #000000; |
||||||
|
} |
||||||
|
.authors_card p{ |
||||||
|
font-size: 16px; |
||||||
|
font-weight: 300; |
||||||
|
line-height: 19.2px; |
||||||
|
color: #000000; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.authors_block .top_box{ |
||||||
|
display: flex; |
||||||
|
background: #FFF; |
||||||
|
border-radius: 8px; |
||||||
|
} |
||||||
|
.top_box img{ |
||||||
|
border-radius: 8px; |
||||||
|
object-fit: cover; |
||||||
|
} |
||||||
|
.top_box .info{ |
||||||
|
padding: 40px 40px 58px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
gap: 32px; |
||||||
|
} |
||||||
|
.top_box .info_title{ |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
gap: 12px; |
||||||
|
} |
||||||
|
.top_box .info_title h3{ |
||||||
|
font-size: 24px; |
||||||
|
font-weight: 600; |
||||||
|
line-height: 28.8px; |
||||||
|
color: #000000; |
||||||
|
} |
||||||
|
.top_box p{ |
||||||
|
font-size: 16px; |
||||||
|
font-weight: 300; |
||||||
|
line-height: 19.2px; |
||||||
|
color: #000000; |
||||||
|
} |
||||||
|
|
||||||
|
.authors_block .authors_items{ |
||||||
|
display: grid; |
||||||
|
grid-template-columns: 31% 31% 31%; |
||||||
|
gap: 20px; |
||||||
|
} |
||||||
|
.authors_items .authors_item{ |
||||||
|
background: #FFFFFF; |
||||||
|
border-radius: 8px; |
||||||
|
} |
||||||
|
.authors_item .item-img{ |
||||||
|
border-radius: 8px; |
||||||
|
object-fit: cover; |
||||||
|
width: 100%; |
||||||
|
height: 200px; |
||||||
|
} |
||||||
|
.authors_item .info_wrap{ |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
gap: 25px; |
||||||
|
padding: 25px 20px; |
||||||
|
} |
||||||
|
.authors_item .info{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
gap: 20px; |
||||||
|
} |
||||||
|
.authors_item .info_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 h5{ |
||||||
|
font-size: 16px; |
||||||
|
font-weight: 600; |
||||||
|
line-height: 19.2px; |
||||||
|
color: #0F1521; |
||||||
|
} |
||||||
|
|
||||||
|
.authors .items_block{ |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
gap: 40px; |
||||||
|
} |
||||||
|
.items_block .item_pagination{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
gap: 24px; |
||||||
|
} |
||||||
|
.item_pagination .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: 400; |
||||||
|
line-height: 19.2px; |
||||||
|
color: #878A90; |
||||||
|
cursor: pointer; |
||||||
|
transition: .3s ease all; |
||||||
|
} |
||||||
|
.item_pagination .pagination_tab:hover, |
||||||
|
.item_pagination .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_block .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 .number1 { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.banner_block .number-mob { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
.banner .info_block .info { |
||||||
|
padding-right: 103px; |
||||||
|
gap: 16px; |
||||||
|
} |
||||||
|
.banner_block .info p, |
||||||
|
.banner_block .info h3 { |
||||||
|
max-width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.authors_block .authors_cards { |
||||||
|
grid-template-columns: 48.5% 48.5%; |
||||||
|
gap: 40px 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.authors_item .info { |
||||||
|
gap: 15px; |
||||||
|
} |
||||||
|
.authors_item .info_wrap { |
||||||
|
gap: 20px; |
||||||
|
padding: 20px 15px; |
||||||
|
} |
||||||
|
.authors_block .authors_items { |
||||||
|
grid-template-columns: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
@media (max-width: 568px) { |
||||||
|
.banner .banner_block { |
||||||
|
border-radius: 4px; |
||||||
|
} |
||||||
|
.banner_block .info_btn { |
||||||
|
width: 100%; |
||||||
|
border-radius: 4px; |
||||||
|
} |
||||||
|
.banner_block .info p, |
||||||
|
.banner_block .info h3 { |
||||||
|
max-width: 250px; |
||||||
|
} |
||||||
|
|
||||||
|
.authors_block .authors_cards { |
||||||
|
grid-template-columns: 100%; |
||||||
|
} |
||||||
|
.authors_block .authors_card { |
||||||
|
gap: 15px; |
||||||
|
} |
||||||
|
.authors_card img { |
||||||
|
height: 400px; |
||||||
|
} |
||||||
|
.authors_card h3 { |
||||||
|
font-size: 26px; |
||||||
|
line-height: 26px; |
||||||
|
} |
||||||
|
|
||||||
|
.authors_block .top_box{ |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
.top_box img{ |
||||||
|
height: 350px; |
||||||
|
} |
||||||
|
.top_box .info { |
||||||
|
padding: 30px 30px 38px; |
||||||
|
gap: 30px; |
||||||
|
} |
||||||
|
|
||||||
|
.items_block .item_pagination { |
||||||
|
gap: 15px; |
||||||
|
} |
||||||
|
.item_pagination .pagination_tab { |
||||||
|
width: 50px; |
||||||
|
height: 51px; |
||||||
|
border-radius: 4px; |
||||||
|
} |
||||||
|
} |