You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
355 lines
6.1 KiB
355 lines
6.1 KiB
@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;
|
|
}
|
|
} |