Skip to content

Commit

Permalink
corrections avant soutenance
Browse files Browse the repository at this point in the history
fatydm committed Jul 28, 2024
1 parent 588e262 commit f1cb706
Showing 70 changed files with 2,879 additions and 17 deletions.
2 changes: 2 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -4,6 +4,8 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://kit.fontawesome.com/d6b9f53705.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
<title>Vite + React</title>
</head>
<body>
266 changes: 266 additions & 0 deletions package-lock.json

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -10,6 +10,7 @@
"preview": "vite preview"
},
"dependencies": {
"axios": "^1.7.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.23.1"
@@ -22,6 +23,7 @@
"eslint-plugin-react": "^7.34.1",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.6",
"sass": "^1.77.5",
"vite": "^5.2.0"
}
}
Binary file added src/assets/arrowLeft.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/arrowRight.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/etoile-pleine.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/etoile-vide.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/fleche-bas.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/fleche-haut.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/img-about.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/img-home.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/logoFooter.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/logoKasa.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
23 changes: 23 additions & 0 deletions src/components/CardLocation.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import React from "react";
import { Link } from "react-router-dom";
import '../sass/cardLocation.scss';
import '../data/dataloges.json'


function LogementCard(props) {

return (
<Link
to={`/logement/${props.id}`}
state={{logementById: props.id}}
className="logementCard">

<img src={props.imageUrl} alt={props.title} className="logementCard__image"/>
<h3 className="logementCard__title">{props.title}</h3>

</Link>
);
};


export default LogementCard;
50 changes: 50 additions & 0 deletions src/components/Carousel.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import React, { useState, useEffect } from "react";
import { useParams } from 'react-router-dom';

import "../sass/carousel.scss";
import Dataloges from '../data/dataloges.json';

import arrowLeft from '../assets/arrowLeft.png';
import arrowRight from '../assets/arrowRight.png';

const Carousel = () => {
const [src, setSrc] = useState(0);
let { id } = useParams();

const logement = Dataloges.find((element) => element.id == id);

useEffect(() => {
setSrc(0);
}, [id]);

const previousClick = () => {
setSrc((prevIndex) =>
prevIndex === 0 ? logement.pictures.length - 1 : prevIndex - 1
);
};

const nextClick = () => {
setSrc((prevIndex) =>
prevIndex === logement.pictures.length - 1 ? 0 : prevIndex + 1
);
};

return (
<div className="carousel">
<button className="carousel__button carousel__button--left" onClick={previousClick}>
<img src={arrowLeft} alt="Image précédente" />
</button>
<div className="carrousel__image--container">
<img className="carousel__image" src={logement.pictures[src]} alt="Logement" />
<div className="carousel__counter">
{src + 1} / {logement.pictures.length}
</div>
</div>
<button className="carousel__button carousel__button--right" onClick={nextClick}>
<img src={arrowRight} alt="Image suivante" />
</button>
</div>
);
};

export default Carousel;
40 changes: 40 additions & 0 deletions src/components/Collapse.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import React from "react";
import { useState } from "react";

import "../sass/collapse.scss";

import ArrowUp from '../assets/fleche-haut.png';
import ArrowDown from '../assets/fleche-bas.png';


const Collapse = ({description, title, className}) => {

const [openDescription, setOpenDescription] = useState(false);

const toggleDescription = () => {
setOpenDescription(!openDescription);
};

return (
<div className={`collapse ${className}`}>
<button onClick={toggleDescription} className="collapse__button">
{title} <img src={openDescription ? ArrowDown : ArrowUp} alt="Toggle Arrow" />
</button>
{openDescription && (
<div className="collapse__content">
{Array.isArray(description) ? (
<ul className="collapse__list">
{description.map((item, index) => (
<li key={index} className="collapse__list-item">{item}</li>
))}
</ul>
) : (
<p>{description}</p>
)}
</div>
)}
</div>
);
}

export default Collapse;
16 changes: 16 additions & 0 deletions src/components/Footer.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import React from "react";
import '../sass/footer.scss';
import logoFooter from '../assets/logoFooter.png'


const Footer = () => {
return (

<section className="footer">
<img className="logoFooter"src={logoFooter} alt='Logo Kasa' />
<p> <i className="fa-regular fa-copyright"/> 2020 Kasa. All rights reserved </p>
</section>
);
}

export default Footer;
18 changes: 18 additions & 0 deletions src/components/Logements.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import CardLocation from '../components/CardLocation'
import dataLogements from '../data/dataloges.json';

const Logements = () => {

return (
<div className='gallery-logement'>
{dataLogements.map((logement) => (
<CardLocation title={logement.title} key={logement.id}
imageUrl={logement.cover}
id={logement.id} />
))}
</div>
);
};

export default Logements;

24 changes: 22 additions & 2 deletions src/components/Navigation.jsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,24 @@
import React from "react";
import {NavLink} from 'react-router-dom'
import { NavLink } from 'react-router-dom';
import logoKasa from '../assets/logoKasa.png';
import '../sass/navigation.scss'

const
const Navigation = () => {
return (
<div className="navigation">
<img src={logoKasa} alt='Logo Kasa' />
<nav>
<ul>
<NavLink to="/" className={({isActive}) => (isActive ? "underline" : "" )}>
<li>Accueil</li>
</NavLink>
<NavLink to="/about" className={({isActive}) => (isActive ? "underline" : "" )}>
<li>À Propos</li>
</NavLink>
</ul>
</nav>
</div>
);
};

export default Navigation;
20 changes: 20 additions & 0 deletions src/components/Rating.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import EtoileActive from '../assets/etoile-pleine.png';
import EtoileInactive from '../assets/etoile-vide.png';
import '../sass/rating.scss'

function Rating({ rating }) {

const stars = [];

for (let i = 1; i <= 5; i++) {
if (i <= rating) {
stars.push(<img className='stars' key={i} src={EtoileActive} />); // étoile pleine
} else {
stars.push(<img className='stars' key={i} src={EtoileInactive} />); // étoile vide
}
}

return <div className='rating'>{stars}</div>;
}

export default Rating;
45 changes: 45 additions & 0 deletions src/css/about.css
1 change: 1 addition & 0 deletions src/css/about.css.map
1 change: 1 addition & 0 deletions src/css/aboutJson.css.map
6 changes: 0 additions & 6 deletions src/css/app.css

This file was deleted.

2 changes: 1 addition & 1 deletion src/css/app.css.map
3 changes: 3 additions & 0 deletions src/css/cardLocation.css
1 change: 1 addition & 0 deletions src/css/cardLocation.css.map
73 changes: 73 additions & 0 deletions src/css/carousel.css
1 change: 1 addition & 0 deletions src/css/carousel.css.map
50 changes: 50 additions & 0 deletions src/css/collapse.css
1 change: 1 addition & 0 deletions src/css/collapse.css.map
26 changes: 26 additions & 0 deletions src/css/error.css
1 change: 1 addition & 0 deletions src/css/error.css.map
23 changes: 23 additions & 0 deletions src/css/footer.css
1 change: 1 addition & 0 deletions src/css/footer.css.map
61 changes: 61 additions & 0 deletions src/css/home.css
1 change: 1 addition & 0 deletions src/css/home.css.map
1 change: 1 addition & 0 deletions src/css/home.map
129 changes: 129 additions & 0 deletions src/css/location.css
1 change: 1 addition & 0 deletions src/css/location.css.map
57 changes: 57 additions & 0 deletions src/css/logement.css
1 change: 1 addition & 0 deletions src/css/logement.css.map
1 change: 1 addition & 0 deletions src/css/logementCard.css.map
528 changes: 528 additions & 0 deletions src/css/main.css

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions src/css/main.css.map
51 changes: 51 additions & 0 deletions src/css/navigation.css
1 change: 1 addition & 0 deletions src/css/navigation.css.map
1 change: 1 addition & 0 deletions src/css/navigation.map
18 changes: 18 additions & 0 deletions src/css/rating.css
1 change: 1 addition & 0 deletions src/css/rating.css.map
18 changes: 18 additions & 0 deletions src/data/data-about.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
[
{
"title": "Fiabilité",
"description": "Les annonces postées sur Kasa garantissent une fiabilité totale. Les photos sont conformes aux logements, et toutes les informations sont régulièrement vérifiées par nos équipes."
},
{
"title": "Respect",
"description": "La bienveillance fait partie des valeurs fondatrices de Kasa. Tout comportement discriminatoire ou de perturbation du voisinage entraînera une exclusion de notre plateforme."
},
{
"title": "Service",
"description": "Nos équipes se tiennent à votre disposition pour vous fournir une expérience parfaite. N'hésitez pas à nous contacter si vous avez la moindre question."
},
{
"title": "Sécurité",
"description": "La sécurité est la priorité de Kasa. Aussi bien pour nos hôtes que pour les voyageurs, chaque logement correspond aux critères de sécurité établis par nos services. En laissant une note aussi bien à l'hôte qu'au locataire, cela permet à nos équipes de vérifier que les standards sont bien respectés. Nous organisons également des ateliers sur la sécurité domestique pour nos hôtes."
}
]
619 changes: 619 additions & 0 deletions src/data/dataloges.json

Large diffs are not rendered by default.

9 changes: 8 additions & 1 deletion src/main.jsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,23 @@
// IMPORTS
import React from 'react'
import ReactDOM from 'react-dom/client'
import './css/app.css'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
// SASS
import './css/main.css'
// PAGES
import Home from './pages/Home'
import About from './pages/About'
import Location from './pages/Location'
import Error from './pages/Error'

ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<BrowserRouter>
<Routes>
<Route path='/' element={<Home />} />
<Route path='/about' element={<About />} />
<Route path='/logement/:id' element={<Location />} />
<Route path='*' element={<Error />} />
</Routes>
</BrowserRouter>
</React.StrictMode>
30 changes: 28 additions & 2 deletions src/pages/About.jsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,37 @@
import React from "react";
import Navigation from "../components/Navigation";
import Banner from '../assets/img-about.png';
import '../sass/about.scss'
import Footer from "../components/Footer";
import Collapse from "../components/Collapse";
import aboutJson from "../data/data-about.json"

const About = () => {

const fiabilite = aboutJson.find((element) => element.title == "Fiabilité")
const respect = aboutJson.find((element) => element.title == "Respect")
const service = aboutJson.find((element) => element.title == "Service")
const securite = aboutJson.find((element) => element.title == "Sécurité")

return (
<div>
<h1>À propos</h1>
<Navigation />
<div className="about">
<div className="banner">
<img src={Banner} alt="Paysage" />
</div>
<div className="collapse">
<Collapse description={fiabilite.description} title={fiabilite.title} />
<Collapse description={respect.description} title={respect.title} />
<Collapse description={service.description} title={service.title} />
<Collapse description={securite.description} title={securite.title} />
</div>
</div>
<Footer />
</div>
);
};

export default About;
export default About;

//
24 changes: 24 additions & 0 deletions src/pages/Error.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@

import { Link } from 'react-router-dom';
import '../sass/error.scss'
import Navigation from '../components/Navigation';
import Footer from '../components/Footer';

function Error() {

return (
<div>
<Navigation />

<section className="contenuError">
<h1 className="titleError">404</h1>
<p className="textError">Oups! La page que vous demandez n'hésite pas</p>
<Link to='/' className="linkError">Retourner sur la page d'accueil</Link>
</section>

<Footer />
</div>
)
}

export default Error;
20 changes: 19 additions & 1 deletion src/pages/Home.jsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,28 @@

import React from "react";
import Banner from '../assets/img-home.png';
import '../sass/home.scss';

import Navigation from "../components/Navigation";
import Logements from "../components/Logements";
import Footer from "../components/Footer.jsx"


const Home = () => {
return (
<div>
<h1 className="app">Accueil</h1>
<Navigation />

<div className="home">
<div className="banner">
<img src={Banner} alt="Paysage" />
<h1>Chez vous, partout et ailleurs</h1>
</div>
</div>
<Logements />
<Footer />
</div>

);
};

70 changes: 70 additions & 0 deletions src/pages/Location.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import React, { useEffect } from "react";
import { useNavigate } from "react-router-dom";

import Navigation from "../components/Navigation";
import '../sass/location.scss'
import '../sass/collapse.scss'
import Carousel from "../components/Carousel";
import Rating from "../components/Rating";
import Footer from "../components/Footer";
import Error from "./Error";

//import Error from "./Error";
import { Routes, Route, useParams } from 'react-router-dom';

import Dataloges from '../data/dataloges.json'
import Collapse from "../components/Collapse";

const Location = () => {

// Get the userId param from the URL.
let { id } = useParams();
const navigate = useNavigate();

const logement = Dataloges.find((element) => element.id == id)

if (!logement) {
return <Error />
}

return (
<div>
<Navigation />

<section className="cardLogement">
<Carousel />
<div className="container">
<div className="container__infoLocation">
<h1 className="container__infoLocation--title">{logement.title}</h1>
<p className="container__infoLocation--localisation">{logement.location}</p>
<ul className="container__infoLocation--ul">
{logement.tags.map(tag => (
<li className="container__infoLocation--li" key={tag}>{tag}</li>
))}
</ul>
</div>

<div className="cardOwner">
<div className="mediaQueries">
<div className="cardOwner__info">
<p className="cardOwner__info--name">{logement.host.name}</p>
<img className="cardOwner__info--img" src={logement.host.picture} />
</div>
<div className="rating">
<Rating rating={logement.rating} />
</div>
</div>
</div>
</div>
<div className="collapseLocation">
<Collapse className="collapseLocation__description" description={logement.description} title="Description" />
<Collapse className="collapseLocation__equipements" description={logement.equipments} title="Équipements" />
</div>
</section>

<Footer />
</div>
);
};

export default Location;
47 changes: 47 additions & 0 deletions src/sass/about.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
.about {
margin-left: 25px;
margin-right: 25px;

.banner {
width: 100%;
height: 150px;
position: relative;
margin-top: 20px;
margin-bottom: 50px;
@media (max-width: 700px) {
margin-top: 30px;
margin-bottom: 5px;
}

img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 20px;
@media (max-width: 700px) {
height: 80%;
}
}

&::after {
content: "";
position: absolute;
//top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(71, 70, 70, 0.629); // Couleur gris clair avec transparence
border-radius: 20px;
z-index: 1;
//pointer-events: none; // Assure que l'overlay n'intercepte pas les clics
@media (max-width: 700px) {
height: 80%;
}
}
}
}





4 changes: 0 additions & 4 deletions src/sass/app.scss

This file was deleted.

Empty file added src/sass/cardLocation.scss
Empty file.
69 changes: 69 additions & 0 deletions src/sass/carousel.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
.carousel {
position: relative;
//margin: auto;

&__image {
width: 100%;
height: 450px;
object-fit: cover;
border-radius: 25px;
//margin-left: 5px;
margin-top: 30px;
@media (max-width: 700px) {
margin-top: 20px;
border-radius: 15px;
height: 280px;
}
}

&__counter {
position: absolute;
bottom: 10px;
left: 50%;

color: #fff;
padding: 5px 10px;
border-radius: 5px;
font-size: 16px;
@media (max-width: 700px) {
display: none;
}
}

&__button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
outline: none;
width: 60px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;

&--left {
left: 10px;@media (max-width: 700px) {
left: 0;
}
}

&--right {
right: 10px;
@media (max-width: 700px) {
right: 0;
}
}
@media (max-width: 700px){
width: 20px;
height: 10px;
}

img {
width: 100%;
height: auto;
}
}
}
52 changes: 52 additions & 0 deletions src/sass/collapse.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@

.collapse {
margin-bottom: 20px;

&__button {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
font-size: 1.2em;
background-color: #FF6060;
color: white;
border: none;
border-radius: 10px;
cursor: pointer;
transition: background 0.3s ease;
width: 97%;
margin: auto;
height: 50px;
@media (max-width: 700px) {
margin-left: 0;
width: 100%;
}
}

&__button img {
margin-left: auto;
width: 25px;
height: 15px;
}

&__button:hover {
background: rgb(166, 70, 70);
}

&__content {
margin: auto;
padding: 5px;
background: #fafafa;
width: 96%;
border-radius: 10px;
}

&__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
}
28 changes: 28 additions & 0 deletions src/sass/error.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
.contenuError {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 50vh;
text-align: center;


.titleError {
font-size: 13rem;
margin: 0;
color: #FF6060;
}

.textError {
font-size: 1.5rem;
color: #FF6060;
}

.linkError {
margin-top: 20px;
font-size: 1.2rem;
color: black;
text-decoration: underline;
cursor: pointer;
}
}
23 changes: 23 additions & 0 deletions src/sass/footer.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
.footer {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: 30px;
height: 250px;
background-color: black;
color: white;

img {
width: 100%;
height: 250px;
object-fit: cover;
margin-top: 30px;
}

.logoFooter {
color: white;
width: 140px;
height: 40px;
}
}
59 changes: 59 additions & 0 deletions src/sass/home.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
.home {
margin-left: 25px;
margin-right: 25px;

.banner {
width: 100%;
height: 150px;
position: relative;
//overflow: hidden;
margin-bottom: 50px;
@media (max-width: 700px) {
margin-top: 30px;
margin-bottom: 5px;
}

img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 20px;
@media (max-width: 700px) {
height: 80%;
}
}

&::after {
content: "";
position: absolute;
//top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(10, 9, 9, 0.629); // Couleur gris clair avec transparence
border-radius: 20px;
z-index: 1;
//pointer-events: none; // Assure que l'overlay n'intercepte pas les clics
@media (max-width: 700px) {
height: 80%;
}
}
}

h1 {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.7rem;
color: white;
z-index: 2;

@media (max-width: 700px) {
font-size: 1.5em;
left: 0;
margin-left: 20px;
transform: translateY(-100%);
}
}
}
147 changes: 147 additions & 0 deletions src/sass/location.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
.cardLogement {
margin-left: 25px;
margin-right: 25px;

.container {
display: flex;
justify-content: space-between;
margin-top: 30px;

@media (max-width: 700px) {
margin-top: 5px;
flex-direction: column;
}


&__infoLocation {
flex: 1;
margin-left: 5px;

&--title {
color: #FF6060;
font-size: 1.7em;

@media (max-width: 700px) {
font-size: 1.2em;
}
}

&--localisation {
margin-top: -10px;
}

&--ul {
display: flex;
gap: 10px;
list-style: none;
padding: 0;
flex-wrap: wrap;
}

&--li {
border: 1px solid #FF6060;
background-color: #FF6060;
color: white;
border-radius: 10px;
padding: 5px 15px;

@media (max-width: 700px) {
font-size: 0.6em;
}
}
}
}

.cardOwner {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-end;

&__info {
display: flex;
align-items: center;
margin-bottom: 10px;

&--name {
display: flex;
color: #FF6060;
margin-right: 10px;
font-size: 1.7em;

@media (max-width: 700px) {
font-size: 1em;
margin-right: 3px;
}
}

&--img {
border-radius: 50%;
width: 50px;
height: 50px;
object-fit: cover;

@media (max-width: 700px) {
width: 30px;
height: 30px;
}
}
}

.rating {
display: flex;
gap: 20px;

@media (max-width: 700px) {
//justify-content: flex-start;
}
}

.mediaQueries {
@media (max-width: 700px) {
margin: auto;
display: flex;
flex-direction: row-reverse;
gap: 200px;
margin-left: 0;
//align-items: stretch;
//justify-content: space-between;

&__info {
margin: 0;
align-items: center;
justify-content: space-between;
}

}
}
}

.collapseLocation {
display: flex;
flex-direction: row;
width: 100%;
margin-top: 30px;

&__description {
width: 80%;
}

&__equipements {
width: 80%;
}

@media (max-width: 700px) {
display: flex;
flex-direction: column;

&__description {
width: 100%;
}

&__equipements {
width: 100%;
}
}
}
}
54 changes: 54 additions & 0 deletions src/sass/logement.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
.gallery-logement {
display: flex;
flex-wrap: wrap;
align-content: space-around;
justify-content: center;
gap: 30px;
background-color: rgb(241, 240, 240);
border-radius: 20px;
margin: 25px;
padding-top: 30px;
padding-left: 10px;
padding-right: 10px;
cursor: pointer;
@media (max-width: 700px) {
background-color: white;
}

a {
text-decoration: none;
color: black;
position: relative;

img {
background: linear-gradient(#FF6060, #040404);
padding: 5px;
object-fit: cover;
border-radius: 15px;
width: 350px;
height: 300px;
@media (max-width: 700px) {
width: 300px;
height: 250px;
}
}

h3 {
position: absolute;
bottom: 4px;
left: 0px;
font-size: 1.3rem;
color: white;
background-color: rgba(129, 54, 54, 0.5);
margin: 0;
height: 20%;
width: 100%;
border-radius: 0 0 15px 15px;
text-align: center;
padding-top: 10px;
&:hover{
background-color: rgba(90, 58, 58, 0.8);
}
}
}
}
16 changes: 16 additions & 0 deletions src/sass/main.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
@use "./about.scss";
@use "./cardLocation.scss";
@use "./carousel.scss";
@use "./collapse.scss";
@use "./error.scss";
@use "./footer.scss";
@use "./home.scss";
@use "./location.scss";
@use "./logement.scss";
@use "./navigation.scss";
@use "./rating.scss";

body {
font-family: 'Montserrat';
}

44 changes: 44 additions & 0 deletions src/sass/navigation.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
.navigation {
display: flex;
justify-content: space-between;
align-items: center;
margin: 30px;
@media (max-width: 700px) {
margin-bottom: 5px;
}
img{
object-fit: contain;
height: 50px;
width: 130px;
}

nav{
ul{
display: flex;
gap: 30px;
@media (max-width: 700px) {
gap: 5px;
}
a{
font-size: 1.5em;
text-decoration: none;
color: black;
&.underline{
text-decoration: underline;
}
@media (max-width: 700px) {
font-size: 0.6em;
}
}
li{
margin: 0 20px;
list-style: none;
font-family: 'Montserrat';
@media (max-width : 700px) {
text-transform: uppercase;
margin: 0 6px;
}
}
}
}
}
14 changes: 14 additions & 0 deletions src/sass/rating.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
.rating {
display: flex;
gap: 25px;
.stars {
object-fit: contain;
margin-top: 10px;
height: 25px;
width: 25px;
color:#FF6060;
}
@media (max-width: 700px) {
margin-top: 0;
}
}

0 comments on commit f1cb706

Please sign in to comment.