487 lines
7.9 KiB
CSS
487 lines
7.9 KiB
CSS
|
*{
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
font-family: 'Inter', sans-serif;
|
|||
|
|
color: #000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
button{
|
|||
|
|
cursor: pointer;
|
|||
|
|
border: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
a{
|
|||
|
|
text-decoration: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
header{
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
align-items: center;
|
|||
|
|
margin: 18px 0px 11px 0px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.logoSection{
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*Логотип*/
|
|||
|
|
.logoSection img{
|
|||
|
|
width: 100px;
|
|||
|
|
height: 32px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.verticalLine{
|
|||
|
|
width: 3px;
|
|||
|
|
height: 37px;
|
|||
|
|
margin: 0px 17px 0px 17px;
|
|||
|
|
background-color: #A9A9A9;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*Название сервиса*/
|
|||
|
|
.logoSection h1{
|
|||
|
|
font-weight: 700;
|
|||
|
|
font-size: 32px;
|
|||
|
|
color: #222;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*Кнопка локации*/
|
|||
|
|
.btnLocation{
|
|||
|
|
width: 150px;
|
|||
|
|
height: 28px;
|
|||
|
|
margin-left: 37px;
|
|||
|
|
border-radius: 40px;
|
|||
|
|
background-color: #CCC;
|
|||
|
|
font-size: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*Навигация*/
|
|||
|
|
nav {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
nav div{
|
|||
|
|
margin-right: 55px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
nav a, nav svg{
|
|||
|
|
transition: 0.3s;
|
|||
|
|
fill: #222;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
nav svg:hover{
|
|||
|
|
fill: #0050A1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
nav a:hover{
|
|||
|
|
color: #0050A1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*Личный кабинет*/
|
|||
|
|
.userIcon{
|
|||
|
|
border-radius: 20px;
|
|||
|
|
background-color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
main{
|
|||
|
|
margin: 0 5% 0 5%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*Горизонтальная линия под шапкой*/
|
|||
|
|
.horizontalLine{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 1px;
|
|||
|
|
background-color: #CCC;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*Заголовок страницы*/
|
|||
|
|
h2{
|
|||
|
|
margin-top: 14px;
|
|||
|
|
margin-bottom: 21px;
|
|||
|
|
padding-left: 2%;
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 24px;
|
|||
|
|
color: #222;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*Квартира*/
|
|||
|
|
.apartmentSection{
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-top: 22px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.apartmentSectionLeft{
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*Фото квартиры*/
|
|||
|
|
.apartmentSectionLeft img{
|
|||
|
|
width: 350px;
|
|||
|
|
height: 250px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*Площадь квартиры*/
|
|||
|
|
.characteristics h3{
|
|||
|
|
margin-left: 34px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 24px;
|
|||
|
|
color: #222;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*Адрес*/
|
|||
|
|
.address{
|
|||
|
|
margin-top: 4px;
|
|||
|
|
margin-left: 34px;
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #222;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*Транспорт*/
|
|||
|
|
.transport{
|
|||
|
|
display: flex;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
margin-left: 34px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*Время транспорта*/
|
|||
|
|
.transport p{
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 15px;
|
|||
|
|
color: #A9A9A9;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.transportBas, .transportSubway{
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
align-items: center;
|
|||
|
|
width: 96px;
|
|||
|
|
height: 32px;
|
|||
|
|
border: 2px solid #A9A9A9;
|
|||
|
|
border-radius: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.transportSubway{
|
|||
|
|
margin-left: 11px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*Удобства*/
|
|||
|
|
.amenities{
|
|||
|
|
margin-top: 23px;
|
|||
|
|
margin-left: 18px;
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.amenitiesBlock{
|
|||
|
|
max-width: 95px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.amenitiesBlock svg{
|
|||
|
|
margin-left: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*Вертикальная линия*/
|
|||
|
|
.amenitiesLine{
|
|||
|
|
width: 2px;
|
|||
|
|
height: 55px;
|
|||
|
|
background-color: #A9A9A9;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*Кнопки*/
|
|||
|
|
.apartmentBtn{
|
|||
|
|
display: flex;
|
|||
|
|
margin-top: 43px;
|
|||
|
|
margin-left: 34px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*Кнопка "Показать телефон"*/
|
|||
|
|
.contactBtn{
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
align-items: center;
|
|||
|
|
width: 192px;
|
|||
|
|
height: 32px;
|
|||
|
|
background: #E3F0FF;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #007EFF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*Кнопка "Избранное", "Закладки" и "Заметки"*/
|
|||
|
|
.favoritesBtn, .markBtn, .noteBtn{
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-left: 12px;
|
|||
|
|
width: 32px;
|
|||
|
|
height: 32px;
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 20px;
|
|||
|
|
border: 1px solid #ccc;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.apartmentSectionRight{
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*Цена квартиры*/
|
|||
|
|
.apartmentPrice{
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: end;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.apartmentPrice svg{
|
|||
|
|
margin-right: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.apartmentPrice h3{
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 24px;
|
|||
|
|
color: #222;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*Частота оплаты*/
|
|||
|
|
.month{
|
|||
|
|
margin-right: 25px;
|
|||
|
|
font-size: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*Описание квартиры*/
|
|||
|
|
.description{
|
|||
|
|
margin-top: 56px;
|
|||
|
|
font-size: 15px;
|
|||
|
|
line-height: 18px;
|
|||
|
|
word-wrap: break-word;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*Дата публикации*/
|
|||
|
|
.date{
|
|||
|
|
margin-top: 45px;
|
|||
|
|
font-size: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.month, .description, .date{
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #A9A9A9;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*Разделение секции*/
|
|||
|
|
.separationLine{
|
|||
|
|
margin-top: 22px;
|
|||
|
|
margin-left: 34%;
|
|||
|
|
border: 1px solid #ccc;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*Кнопки выбора страницы*/
|
|||
|
|
.btnSection{
|
|||
|
|
display: flex;
|
|||
|
|
margin-top: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*Кнопка "Показать весь список*/
|
|||
|
|
.allBtn{
|
|||
|
|
width: 208px;
|
|||
|
|
height: 32px;
|
|||
|
|
background-color: #fff;
|
|||
|
|
border: 1px solid #ccc;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*Кнопки переключения страниц*/
|
|||
|
|
.choiceBtn{
|
|||
|
|
display: flex;
|
|||
|
|
margin-left: auto;
|
|||
|
|
margin-right: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*Кнопки "предыдущая" и "следующая"*/
|
|||
|
|
.btnPrevious, .btnNext {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
width: 32px;
|
|||
|
|
height: 32px;
|
|||
|
|
border-radius: 20px;
|
|||
|
|
background: #fff;
|
|||
|
|
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.25);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btnNext{
|
|||
|
|
margin-left: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pageBtn{
|
|||
|
|
width: 36px;
|
|||
|
|
height: 36px;
|
|||
|
|
margin-left: 10px;
|
|||
|
|
background: #D9D9D9;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
font-weight: 700;
|
|||
|
|
font-size: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.activePage{
|
|||
|
|
border: 2px solid #175FA9;
|
|||
|
|
background-color: #fff;
|
|||
|
|
color: #175FA9;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*Кнопки с вопросами*/
|
|||
|
|
.questionBtnSection{
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-top: 55px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.questionBtn{
|
|||
|
|
width: 323px;
|
|||
|
|
height: 128px;
|
|||
|
|
padding: 2% 5% 2% 3%;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
text-align: left;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.questionBtn h3{
|
|||
|
|
font-size: 18px;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.questionBtn p{
|
|||
|
|
margin-top: 16px;
|
|||
|
|
font-size: 16px;
|
|||
|
|
line-height: 19px;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.orangeBtn{
|
|||
|
|
background: linear-gradient(180deg, #F76D09 0%, #FFA800 100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.orangeBtn:active{
|
|||
|
|
background: linear-gradient(180deg, #FFA800 0%, #F76D09 100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.greenBtn{
|
|||
|
|
background: linear-gradient(180deg, #107A34 0%, #51A633 100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.greenBtn:active{
|
|||
|
|
background: linear-gradient(180deg, #51A633 0%, #107A34 100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.blueBtn{
|
|||
|
|
background: linear-gradient(180deg, #2E50A7 0%, #0993F7 100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.blueBtn:active{
|
|||
|
|
background: linear-gradient(180deg, #0993F7 0%, #2E50A7 100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*Недавно просмотренные*/
|
|||
|
|
.viewedSection{
|
|||
|
|
margin-top: 46px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.viewedTittle{
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.viewedTittle h2{
|
|||
|
|
font-weight: 700;
|
|||
|
|
font-size: 20px;
|
|||
|
|
color: #222;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.viewedTittle span{
|
|||
|
|
margin-left: 30px;
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #A9A9A9;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*Кнопки*/
|
|||
|
|
.viewedBtnSection{
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*Кнопка "посмотреть все недавние"*/
|
|||
|
|
.btnViewed{
|
|||
|
|
width: 208px;
|
|||
|
|
height: 32px;
|
|||
|
|
margin-top: 15px;
|
|||
|
|
margin-right: 22px;
|
|||
|
|
background: #fff;
|
|||
|
|
border: 1px solid #CCCCCC;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #ccc;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*Кнопки "предыдущие" и "следующие"*/
|
|||
|
|
.viewedBtn{
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*Недавно просмотренные квартиры*/
|
|||
|
|
.viewedBlock{
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-top: 27px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*Квартира*/
|
|||
|
|
.viewedElem{
|
|||
|
|
width: 24%;
|
|||
|
|
padding-bottom: 1%;
|
|||
|
|
background: #fff;
|
|||
|
|
border: 2px solid #ccc;
|
|||
|
|
border-radius: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.viewedElem img{
|
|||
|
|
width: 100%;
|
|||
|
|
margin-bottom: 3%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.viewedElem h3, .viewedElem p{
|
|||
|
|
margin-left: 5%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.viewedElem h3{
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 24px;
|
|||
|
|
color: #222;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.viewedElem p{
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #222;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*Домики на футере*/
|
|||
|
|
.footerHouses{
|
|||
|
|
margin: 5% 0 0 5%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*Футер*/
|
|||
|
|
.footerBlock{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 250px;
|
|||
|
|
margin-top: -0.5%;
|
|||
|
|
background-color: #D9D9D9;
|
|||
|
|
}
|