diff --git a/keynest/public/images/Icon.jpg b/keynest/public/images/Icon.jpg new file mode 100644 index 0000000..7716e16 Binary files /dev/null and b/keynest/public/images/Icon.jpg differ diff --git a/keynest/public/images/Image1.png b/keynest/public/images/Image1.png new file mode 100644 index 0000000..2bf4da4 Binary files /dev/null and b/keynest/public/images/Image1.png differ diff --git a/keynest/public/images/Image2.png b/keynest/public/images/Image2.png new file mode 100644 index 0000000..b398409 Binary files /dev/null and b/keynest/public/images/Image2.png differ diff --git a/keynest/public/images/Image3.png b/keynest/public/images/Image3.png new file mode 100644 index 0000000..85803a8 Binary files /dev/null and b/keynest/public/images/Image3.png differ diff --git a/keynest/src/App.js b/keynest/src/App.js index 1bd0898..cc59d4f 100644 --- a/keynest/src/App.js +++ b/keynest/src/App.js @@ -2,12 +2,18 @@ import React from 'react'; import './App.css'; import Header from './components/Header'; import ApartmentRentals from './components/ApartmentRentals'; +import ApartmentOptions from './components/ApartmentOptions'; +import ApartmentAmenities from './components/ApartmentAmenities'; +import NearbyAttractions from './components/NearbyAttractions'; function App() { return (
+ + +
); } diff --git a/keynest/src/components/ApartmentAmenities.css b/keynest/src/components/ApartmentAmenities.css new file mode 100644 index 0000000..4e6d61b --- /dev/null +++ b/keynest/src/components/ApartmentAmenities.css @@ -0,0 +1,83 @@ +.apartment_header{ + background-color: #FCFBFC; +} +.apartment__Amenities{ + position: absolute; + width: 1290px; + height: 187px; + top: 800px; + text-align: center; + left: 290px; + margin-bottom: 30px; +} +.icon__Amenities{ + position: absolute; + width: 43px; + height: 44px; + left: 624px; +} +.heading__Amenities{ + position: absolute; + width: 1290px; + height: 56px; + top: 61px; + font-family: 'Instrument Serif'; + font-style: italic; + font-weight: 400; + font-size: 46px; + line-height: 120%; + text-align: center; + color: #1F1E1F; +} +.info__Amenities{ + position: absolute; + width: 608px; + height: 54px; + left: 341px; + top: 131px; + font-family: 'Nunito'; + font-style: normal; + font-weight: 500; + font-size: 18px; + line-height: 150%; + text-align: center; + color: #999798; +} +.img__Amenitiess{ + position: absolute; + width: 1281px; + height: 587px; + left: 379px; + top: 1000px; + display: flex; + text-align: center; +} +.img__Amenities{ + width: 377px; + height: 506px; + align-self: stretch; + padding-right: 25px; +} +.img__Amenities1{ + width: 779px; + height: 506px; + border-radius: 0px; + align-self: stretch; +} +.img_name{ + font-family: 'Nunito'; + font-style: normal; + font-weight: 500; + font-size: 19px; + line-height: 120%; + color: #666464; + flex: none; +} +.img_info{ + font-family: 'Nunito'; + font-style: normal; + font-weight: 400; + font-size: 17px; + line-height: 120%; + color: #727174; +} \ No newline at end of file diff --git a/keynest/src/components/ApartmentAmenities.js b/keynest/src/components/ApartmentAmenities.js new file mode 100644 index 0000000..ce88e49 --- /dev/null +++ b/keynest/src/components/ApartmentAmenities.js @@ -0,0 +1,31 @@ +import React from 'react'; +import { Link, useNavigate } from 'react-router-dom'; +import './ApartmentAmenities.css'; + +function ApartmentAmenities(){ + return( +
+
+
+ изображение +

Apartment Amenities

+

Enjoy a range of modern amenities in our apartments, from fully-equipped kitchens to en-suite laundry facilities, ensuring your comfort and convenience

+
+
+
+ изображение +

Stunning Views

+

Natural Lighting

+
+
+ изображение +

Relaxing Atmosphere

+

Cozy Interiors

+
+
+
+
+ ) +} + +export default ApartmentAmenities; \ No newline at end of file diff --git a/keynest/src/components/ApartmentOptions.css b/keynest/src/components/ApartmentOptions.css new file mode 100644 index 0000000..d2b0256 --- /dev/null +++ b/keynest/src/components/ApartmentOptions.css @@ -0,0 +1,53 @@ +.img__options{ + position: absolute; + width: 533px; + height: 550px; + left: 1035px; + top: 120px; +} +.apartment__options{ + position: absolute; + width: 554px; + height: 339px; + left: 126px; + top: 225.5px; +} +.heading__options{ + position: absolute; + width: 502px; + height: 115px; + left: 260px; + top: 0px; + font-family: 'Instrument Serif'; + font-style: italic; + font-weight: 400; + font-size: 44px; + line-height: 109.62%; + color: #292829; + text-align: left; +} +.info__options{ + position: absolute; + width: 545px; + height: 137px; + left: 260px; + top: 122px; + font-family: 'Nunito'; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 170.31%; + color: #9B999B; + text-align: left; +} +.button__options{ + position: absolute; + width: 181px; + height: 55px; + left: 260px; + top: 254px; + color: aliceblue; + background: #202020; + border-radius: 0px; + +} \ No newline at end of file diff --git a/keynest/src/components/ApartmentOptions.js b/keynest/src/components/ApartmentOptions.js new file mode 100644 index 0000000..416ab4b --- /dev/null +++ b/keynest/src/components/ApartmentOptions.js @@ -0,0 +1,18 @@ +import React from 'react'; +import { Link, useNavigate } from 'react-router-dom'; +import './ApartmentOptions.css'; + +function ApartmentOptions(){ + return( +
+ изображение +
+

Explore Our Diverse Apartment Options

+

From cozy studios to spacious lofts, our apartments cater to every lifestyle and budget. With a wide range of amenities and locations, you're sure to find the perfect home away from home.

+ +
+
+ ) +} + +export default ApartmentOptions; \ No newline at end of file diff --git a/keynest/src/components/ApartmentRentals.css b/keynest/src/components/ApartmentRentals.css index 2e986ce..9275526 100644 --- a/keynest/src/components/ApartmentRentals.css +++ b/keynest/src/components/ApartmentRentals.css @@ -1,4 +1,79 @@ +body{ + font-family: 'Nunito'; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 100%; + text-align: center; +} .backround__section{ height: 680px; width: 1440px; + +} +.content__button{ + width: 184px; + height: 52px; + background-color: #242323; + align-items: center; + color: aliceblue; + position: absolute; + width: 184px; + height: 52px; + left: 50px; + top: 176px; + background: #1F1F1F; + border-radius: 0px; + align-items: center; +} +.apartment{ + position: relative; + display: inline-block; + width: 100%; + text-align: center; +} +.Apartament__content{ + position: absolute; + top: 50%; + transform: translate(50%, -50%); + width: 519px; + height: 228px; + left: 87px; + top: 326px; + +} +.heading{ + font-size: 44px; + line-height: normal; + text-align: left; + padding-left: 50px; + position: absolute; + left: 0px; + + font-family: 'Instrument Serif'; + font-style: italic; + font-weight: 400; + font-size: 44px; + line-height: 125%; + + color: #FEFEFE; + + +} +.info{ + position: absolute; + width: 519px; + height: 20px; + left: 50px; + top: 128px; + + text-align: left; + font-family: 'Nunito'; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 120%; + color: #EDECEA; + + } \ No newline at end of file diff --git a/keynest/src/components/ApartmentRentals.js b/keynest/src/components/ApartmentRentals.js index 5f75dcc..31a7795 100644 --- a/keynest/src/components/ApartmentRentals.js +++ b/keynest/src/components/ApartmentRentals.js @@ -6,8 +6,10 @@ function ApartmentRentals(){ return(
изображение -
- +
+

Short-term and Long-term Apartment Rentals

+

Discover the perfect apartment for your needs, whether it's a quick stay or a long-term investment

+
) diff --git a/keynest/src/components/Header.css b/keynest/src/components/Header.css index f00d45f..b1cb6ad 100644 --- a/keynest/src/components/Header.css +++ b/keynest/src/components/Header.css @@ -5,12 +5,12 @@ } body{ -font-family: 'Nunito'; -font-style: normal; -font-weight: 600; -font-size: 16px; -line-height: 100%; -text-align: center; + font-family: 'Nunito'; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 100%; + text-align: center; } diff --git a/keynest/src/components/NearbyAttractions.css b/keynest/src/components/NearbyAttractions.css new file mode 100644 index 0000000..cb93967 --- /dev/null +++ b/keynest/src/components/NearbyAttractions.css @@ -0,0 +1,33 @@ +.the__subtitle{ + position: absolute; + width: 1180px; + height: 20px; + left: 341px; + top: 1600px; + font-family: 'Nunito'; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 120%; + text-align: center; + color: #B8B7B9; +} +.Attractions__header{ + text-align: center; +} +.Attractions{ + width: 1180px; + height: 56px; + left: 347px; + top: 1645px; + color: #292729; + + +} +.Attractions1{ + padding-top: 10px; + width: 711px; + height: 81px; + left: calc(50% - 760px/2 + 0.5px); + top: 1700px; +} \ No newline at end of file diff --git a/keynest/src/components/NearbyAttractions.js b/keynest/src/components/NearbyAttractions.js new file mode 100644 index 0000000..f7245ea --- /dev/null +++ b/keynest/src/components/NearbyAttractions.js @@ -0,0 +1,22 @@ +import React from 'react'; +import { Link, useNavigate } from 'react-router-dom'; +import './NearbyAttractions.css'; + +function NearbyAttractions(){ + return( +
+
+
+

Nearby Attractions

+

Explore the City

+

Discover the best of urban living with our centrally located apartments, offering easy access to top restaurants, entertainment, and cultural destinations

+
+
+ +
+
+
+ ) +} + +export default NearbyAttractions; \ No newline at end of file