therd commit

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 (
     <div className='app'>
       <Header />
       <ApartmentRentals />
+      <ApartmentOptions />
+      <ApartmentAmenities />
+      <NearbyAttractions />
     </div>
   );
 }

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

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(
+        <header className='apartment'>
+            <div className='apartment_header'>
+                <div className='apartment__Amenities'>
+                    <img className ='icon__Amenities' src={process.env.PUBLIC_URL + '/images/Icon.jpg'} alt='изображение' />
+                    <h1 className='heading__Amenities'>Apartment Amenities</h1>
+                    <p className='info__Amenities'>Enjoy a range of modern amenities in our apartments, from fully-equipped kitchens to en-suite laundry facilities, ensuring your comfort and convenience</p>
+                </div>
+                <div className='img__Amenitiess'>
+                    <div>
+                        <img className ='img__Amenities' src={process.env.PUBLIC_URL + '/images/Image2.png'} alt='изображение' />
+                        <p className='img_name'>Stunning Views</p>
+                        <p className='img_info'>Natural Lighting</p>
+                    </div>
+                    <div>
+                        <img className ='img__Amenities1' src={process.env.PUBLIC_URL + '/images/Image3.png'} alt='изображение' />
+                        <p className='img_name'>Relaxing Atmosphere</p>
+                        <p className='img_info'>Cozy Interiors</p>
+                    </div>
+                </div>
+            </div>
+        </header>
+    )
+}
+
+export default ApartmentAmenities;

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

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(
+        <header className='apartment'>
+            <img className ='img__options' src={process.env.PUBLIC_URL + '/images/Image1.png'} alt='изображение' />
+            <div className='apartment__options'>
+                <h1 className='heading__options'>Explore Our Diverse Apartment Options</h1>
+                <p className='info__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.</p>
+                <button className='button__options'>Reserve</button>
+            </div>
+        </header>
+    )
+}
+
+export default ApartmentOptions;

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

keynest/src/components/ApartmentRentals.js

@@ -6,8 +6,10 @@ function ApartmentRentals(){
     return(
         <header className='apartment'>
             <img className ='backround__section' src={process.env.PUBLIC_URL + '/images/Section.png'} alt='изображение' />
-            <div className=''>
+            <div className='Apartament__content'>
-
+                <h1 className='heading'>Short-term and Long-term Apartment Rentals</h1>
+                <p className='info'>Discover the perfect apartment for your needs, whether it's a quick stay or a long-term investment</p>
+                <button className='content__button'>Book Now</button>
             </div>
         </header>
     )

keynest/src/components/Header.css

@@ -5,12 +5,12 @@
 }
 
 body{
-font-family: 'Nunito';
+    font-family: 'Nunito';
-font-style: normal;
+    font-style: normal;
-font-weight: 600;
+    font-weight: 600;
-font-size: 16px;
+    font-size: 16px;
-line-height: 100%;  
+    line-height: 100%;  
-text-align: center;
+    text-align: center;
 
 
 }

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

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(
+        <header className='apartment'>
+            <div className='Attractions__header'>
+                <div className='Attractions__content'>
+                    <p className='the__subtitle'>Nearby Attractions</p>
+                    <p className='heading__Amenities Attractions'>Explore the City</p>
+                    <p className='info__Amenities Attractions1'>Discover the best of urban living with our centrally located apartments, offering easy access to top restaurants, entertainment, and cultural destinations</p>
+                </div>
+                <div>
+                    
+                </div>
+            </div>
+        </header>
+    )
+}
+
+export default NearbyAttractions;