diff --git a/pairent_frontend_react/src/App.js b/pairent_frontend_react/src/App.js
index b418edd..de151da 100644
--- a/pairent_frontend_react/src/App.js
+++ b/pairent_frontend_react/src/App.js
@@ -1,6 +1,7 @@
import React from 'react';
import Header from './components/Header/Header';
import Footer from './components/Footer/Footer';
+import Favorites from './components/Favorites/Favorites';
import './App.css';
function App() {
@@ -9,6 +10,7 @@ function App() {
+
>
diff --git a/pairent_frontend_react/src/components/CardApartament/CardApartament.jsx b/pairent_frontend_react/src/components/CardApartament/CardApartament.jsx
new file mode 100644
index 0000000..804d4d6
--- /dev/null
+++ b/pairent_frontend_react/src/components/CardApartament/CardApartament.jsx
@@ -0,0 +1,115 @@
+import React from 'react';
+import './styles/CardApartament.css';
+
+const CardApartament = function (props) {
+ return (
+
+
+
+
+
{props.results.perimetrs} м², {props.results.rooms}-х комнатная
+
{props.results.address}, {props.results.floor} этаж из {props.results.floorHouse}
+
+
+
+
{props.results.timeToBus} мин
+
+
+
+
{props.results.timeToTrain} мин
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* TODO: добавить проверку на авторизацию */}
+
+
+
+
+
+
+
+
+
+
+
{props.results.price} ₽
+
+
в месяц
+
{props.results.description}
+
{props.results.dateCreate}
+
+
+ );
+}
+
+export default CardApartament;
\ No newline at end of file
diff --git a/pairent_frontend_react/src/components/CardApartament/styles/CardApartament.css b/pairent_frontend_react/src/components/CardApartament/styles/CardApartament.css
new file mode 100644
index 0000000..832ba46
--- /dev/null
+++ b/pairent_frontend_react/src/components/CardApartament/styles/CardApartament.css
@@ -0,0 +1,166 @@
+/*Квартира*/
+.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;
+}
\ No newline at end of file
diff --git a/pairent_frontend_react/src/components/Favorites/Favorites.jsx b/pairent_frontend_react/src/components/Favorites/Favorites.jsx
new file mode 100644
index 0000000..7107488
--- /dev/null
+++ b/pairent_frontend_react/src/components/Favorites/Favorites.jsx
@@ -0,0 +1,31 @@
+import React, { useEffect, useState } from 'react';
+import CardApartament from '../../components/CardApartament/CardApartament';
+import axios from 'axios'; /* БЛЯ 10 КБ СУКА */
+import './styles/Favorites.css';
+
+const Favorites = function () {
+ const [apartaments, setApartaments] = useState([])
+
+ async function fetchApartaments() {
+ const response = await axios.get('http://127.0.0.1:8000/api/apartaments/')
+ setApartaments(response.data.results)
+ }
+
+ useEffect(() => {
+ fetchApartaments()
+ })
+
+ return(
+ <>
+
Избранное
+ {apartaments.map((apartament, index) =>
+ <>
+
+
+ >
+ )}
+ >
+ );
+}
+
+export default Favorites;
\ No newline at end of file
diff --git a/pairent_frontend_react/src/components/Favorites/styles/Favorites.css b/pairent_frontend_react/src/components/Favorites/styles/Favorites.css
new file mode 100644
index 0000000..d4ee7be
--- /dev/null
+++ b/pairent_frontend_react/src/components/Favorites/styles/Favorites.css
@@ -0,0 +1,16 @@
+/*Заголовок страницы*/
+h2{
+ margin-top: 14px;
+ margin-bottom: 21px;
+ padding-left: 2%;
+ font-weight: 600;
+ font-size: 24px;
+ color: #222;
+}
+
+/*Разделение секции*/
+.separationLine{
+ margin-top: 22px;
+ margin-left: 34%;
+ border: 1px solid #ccc;
+}