Iro2024-2025/KeyNest
12
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

therd commit

Browse Source
This commit is contained in:
denis
2025-04-10 00:11:50 +03:00
parent bb68757acf
commit c05d369d8a
14 changed files with 331 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
keynest/public/images/Icon.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
keynest/public/images/Image1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 252 KiB

BIN
keynest/public/images/Image2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 140 KiB

BIN
keynest/public/images/Image3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 310 KiB

6
keynest/src/App.js
View File

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

83
keynest/src/components/ApartmentAmenities.css Normal file
View File

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

31
keynest/src/components/ApartmentAmenities.js Normal file
View File

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

53
keynest/src/components/ApartmentOptions.css Normal file
View File

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

18
keynest/src/components/ApartmentOptions.js Normal file
View File

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

75
keynest/src/components/ApartmentRentals.css
View File

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

6
keynest/src/components/ApartmentRentals.js
View File

@@ -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>
)

33
keynest/src/components/NearbyAttractions.css Normal file
View File

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

22
keynest/src/components/NearbyAttractions.js Normal file
View File

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