<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">
<meta http-equiv="Content-Type" content="application/xhtml+xml">
<title>SPS-Expert</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="fonts/gilroy.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header_body">
<div class="container">
<div class="header">
<a href="#" class="logo">
<img src="libs/img/sps-logo.svg" alt="">
</a>
<div class="burger_menu">
<span></span>
<span></span>
<span></span>
</div>
<nav class="nav">
<ul>
<li class="nav_list">Услуги</li>
<li class="nav_list">Специалисты</li>
<li class="nav_list">Работы</li>
<li class="nav_list">Документы</li>
<li class="nav_list">Новости</li>
<li class="nav_list">Контакты</li>
</ul>
<button class="btn-close">Закрыть</button>
</nav>
</div>
</div>
</header>
<main class="experts_body">
<div class="container">
<div class="experts_item">
<div class="experts_name">
<p class="name">Плешко Михаил Степанович</p>
<p class="description_data">Доктор технических наук, профессор</p>
</div>
<div class="experts_data">
<div class="data_items">
<p class="title_data">Квалификация:</p>
<p class="description_data">Горный инженер-строитель</p>
</div>
<div class="data_items">
<p class="title_data">Направление деятельности:</p>
<p class="description_data">23. Инженерно-геологические изыскания и инженерно-геотехнические изыскания</p>
</div>
<div class="data_items">
<p class="title_data">Номер аттестата</p>
<p class="description_data">МС-Э-22-23-13903</p>
</div>
<div class="data_items">
<p class="title_data">Период действия:</p>
<p class="description_data">15.10.2020 - 15.10.2025</p>
</div>
</div>
</div>
<div class="experts_item">
<div class="experts_name">
<p class="name">Гергарт Юрий Александрович</p>
<p class="description_data">Кандидат технических наук</p>
</div>
<div class="experts_data">
<div class="data_items">
<p class="title_data">Квалификация:</p>
<p class="description_data">Гидрогеолог</p>
</div>
<div class="data_items">
<p class="title_data">Направление деятельности:</p>
<p class="description_data">2. Инженерно-геологические изыскания и инженерно-геотехнические изыскания</p>
</div>
<div class="data_items">
<p class="title_data">Номер аттестата</p>
<p class="description_data">МС-Э-51-2-13070</p>
</div>
<div class="data_items">
<p class="title_data">Период действия:</p>
<p class="description_data">20.12.2019 - 20.12.2024</p>
</div>
</div>
</div>
<div class="experts_item">
<div class="experts_name">
<p class="name">Николаев Петр Владимирович</p>
<p class="description_data">Кандидат технических наук, доцент</p>
</div>
<div class="experts_data">
<div class="data_items">
<p class="title_data">Квалификация:</p>
<p class="description_data">Горный инженер</p>
</div>
<div class="data_items">
<p class="title_data">Направление деятельности:</p>
<p class="description_data">2. Инженерно-геологические изыскания и инженерно-геотехнические изыскания</p>
</div>
<div class="data_items">
<p class="title_data">Номер аттестата</p>
<p class="description_data">МС-Э-16-2-13825</p>
</div>
<div class="data_items">
<p class="title_data">Период действия:</p>
<p class="description_data">15.10.2020 - 15.10.2025</p>
</div>
</div>
</div>
<div class="experts_item">
<div class="experts_name">
<p class="name">Плешко Марианна Викторовна</p>
<p class="description_data">Кандидат технических наук</p>
</div>
<div class="experts_data">
<div class="data_items">
<p class="title_data">Квалификация:</p>
<p class="description_data">Экономист-менеджер</p>
</div>
</div>
</div>
</div>
</main>
<footer class="footer_body">
<p>Общество с ограниченной ответственностью «СПС-Экспертиза»<span>© 2021</span></p>
<p>ООО «СПС-Экспертиза»<br>
© 2021</p>
</footer>
<!--------------- Скрипты --------------->
<script type="text/javascript" src="libs/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="libs/scripts/main.js"></script>
</body>
</html>.experts_body{
width: 100vw;
min-height: 100vh;
position: relative;
background-color: #f5f5f5;
overflow-x: hidden;
padding: 50px 0;
}
.experts_body::after{
content: '';
width: 100%;
height: 75%;
position: absolute;
background: url('../libs/img/lines2.svg') no-repeat;
top: 0;
left: 30%;
}
.experts_body::before{
content: '';
position: absolute;
width: 100%;
height: 75%;
background: url('../libs/img/linesd.svg') no-repeat bottom center;
bottom: 0;
}
.experts_item{
position: relative;
padding-bottom: 100px;
}
.experts_item::after{
content: '';
position: absolute;
bottom: 48px;
width: 100%;
height: 2px;
background-color: #c3c1c1;
}
.experts_item:last-child::after{
background-color: transparent;
}
.experts_name{
display: flex;
flex-direction: column;
cursor: pointer;
}
.experts_name p.name{
font-family: 'Gilroy-ExtraBold';
font-size: 32px;
color: #182263;
}
p.description_data{
font-family: 'Gilroy-Regular';
font-size: 18px;
color: #212121;
}
.experts_data{
}
.data_items{
padding-top: 35px;
}
p.title_data{
user-select: none;
font-family: 'Gilroy-Bold';
font-size: 18px;
color: #182263;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.