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;
|
||
}
|