From afb955fb40a5125bbefabee08dc7b376f2e4242f Mon Sep 17 00:00:00 2001 From: Quentin Della mattia Date: Fri, 1 Mar 2024 17:27:54 +0800 Subject: [PATCH 01/50] Ajout des deux lien et du logo dans le header --- index.html | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 53512c75..89e41f65 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,13 @@
-
+
+
logo Booki
+
+ Hébergements + Activités +
+
From a00bf2523a276eeb2a8691d046c8966207549053 Mon Sep 17 00:00:00 2001 From: Quentin Della mattia Date: Fri, 1 Mar 2024 17:51:25 +0800 Subject: [PATCH 02/50] simulation de lien avec attribut href=# header --- index.html | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 89e41f65..46c273b1 100644 --- a/index.html +++ b/index.html @@ -19,8 +19,8 @@
logo Booki
@@ -94,6 +94,14 @@

Hôtel Bleu et Blanc

+
+
+
+

Activités à Marseille

+
+ +
+
From 144392dbc0b99e2c0e57638d7944e76af765e582 Mon Sep 17 00:00:00 2001 From: Quentin Della mattia Date: Fri, 1 Mar 2024 18:16:46 +0800 Subject: [PATCH 03/50] =?UTF-8?q?Ajout=20des=20les=20=C3=A9l=C3=A9ments=20?= =?UTF-8?q?Activit=C3=A9s=20html?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 29 +++++++++++++++++++++++++++-- 1 file changed, 27 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 46c273b1..d103993d 100644 --- a/index.html +++ b/index.html @@ -17,7 +17,7 @@
-
logo Booki
+
logo Booki
Hébergements Activités @@ -99,7 +99,32 @@

Hôtel Bleu et Blanc

Activités à Marseille

- +
+ +
+ vieux-port de Marseille +

Vieux-port

+
+ + +
+ Fort de Pomègues +

Fort de Pomègues

+
+ + +
+ Parc national des Calanques +

Parc national des Calanques

+
+ + +
+ Notre Dame de la Garde +

Notre-Dame-de-la-Garde

+
+ +
From 0d3b2740e5e1881e1900430036d9b5fd3f59a560 Mon Sep 17 00:00:00 2001 From: Quentin Della mattia Date: Fri, 1 Mar 2024 18:43:04 +0800 Subject: [PATCH 04/50] ajout section hebergement --- index.html | 118 ++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 117 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index d103993d..176b017d 100644 --- a/index.html +++ b/index.html @@ -26,7 +26,123 @@
- +
+

Hébergements à Mareseille

+
+
+ +
+ Image de la chambre d'hôtel montrant un lit +
+
+

Hôtel du port

+

Nuit à partir de 52€

+
+
+ + + + + + Note de 4 sur 5 +
+
+
+ +
+ Image de la chambre d'hôtel montrant un lit +
+
+

Hôtel Chez Amina

+

Nuit à partir de 96€

+
+
+ + + + + + Note de 4 sur 5 +
+
+
+ +
+ Image de la chambre d'hôtel montrant un lit +
+
+

Hôtel Les mouettes

+

Nuit à partir de 76€

+
+
+ + + + + + Note de 4 sur 5 +
+
+
+ + +
+ Image de la chambre d'hôtel montrant un lit +
+
+

Hôtel de la mer

+

Nuit à partir de 46€

+
+
+ + + + + + Note de 4 sur 5 +
+
+
+ + +
+ Image de la chambre d'hôtel montrant un lit +
+
+

Auberge La Canebière

+

Nuit à partir de 25€

+
+
+ + + + + + Note de 4 sur 5 +
+
+
+ + +
+ Image de la chambre d'hôtel montrant un lit +
+
+

Auberge Le Panier

+

Nuit à partir de 23€

+
+
+ + + + + + Note de 4 sur 5 +
+
+
+ +
From a889fb3b7d9a624db0aff01591c37501cf3873f2 Mon Sep 17 00:00:00 2001 From: Quentin Della mattia Date: Fri, 1 Mar 2024 20:02:40 +0800 Subject: [PATCH 05/50] Partit CSS lien hebergements et activites :hover --- css/style.css | 21 +++++++++++++++++++++ index.html | 6 ++++-- 2 files changed, 25 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index f6c96c4d..82da3d54 100644 --- a/css/style.css +++ b/css/style.css @@ -58,6 +58,20 @@ a { color: var(--main-bg-color) } +/****** CSS HEADER ***************/ +.header-logo-link{ + display: flex; + justify-content: space-between; +} + +.link-hebergement-activities a{ + margin: 0 50px 0 50px; +} + +.link-hebergement-activities a:hover{ + color: #0065FC; + border-top: #0065FC solid 2px; +} /****** Hebergements And Populaires ***********/ .hebergements-and-populaires { display: flex; @@ -76,6 +90,13 @@ a { width: 65%; } + +.hebergements-card img{ + width: 30%; + height: 124px; + border-radius: 20px 20px 0 0; +} + /****** Populaires ***********/ .populaires { width: 32%; diff --git a/index.html b/index.html index 176b017d..1c91f99a 100644 --- a/index.html +++ b/index.html @@ -16,9 +16,11 @@
-
-
logo Booki
+
+ logo Booki +
+
Hébergements Activités
From c6c3bb44347828221d2686115f29384744f10ab5 Mon Sep 17 00:00:00 2001 From: Quentin Della mattia Date: Tue, 5 Mar 2024 12:29:40 +0800 Subject: [PATCH 06/50] changement de la taille image --- css/style.css | 9 ++++++++- index.html | 2 +- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index 82da3d54..ec0d7778 100644 --- a/css/style.css +++ b/css/style.css @@ -65,13 +65,20 @@ a { } .link-hebergement-activities a{ - margin: 0 50px 0 50px; + margin: 0 50px 0 50px; /*make the gap btw links*/ } .link-hebergement-activities a:hover{ color: #0065FC; border-top: #0065FC solid 2px; } +.booki-image{ + padding: 30px 50px 30px 50px; +} +.booki-image img{ + width: 61.09px; + height: 19px; +} /****** Hebergements And Populaires ***********/ .hebergements-and-populaires { display: flex; diff --git a/index.html b/index.html index 1c91f99a..297da259 100644 --- a/index.html +++ b/index.html @@ -17,7 +17,7 @@
-
+
logo Booki
From ed4b825a7234afadf0825d45b06ea7bf5e881d27 Mon Sep 17 00:00:00 2001 From: Quentin Della mattia Date: Tue, 5 Mar 2024 12:38:34 +0800 Subject: [PATCH 07/50] sortir balise header de div class main --- css/style.css | 1 + index.html | 5 +++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index ec0d7778..71228bb8 100644 --- a/css/style.css +++ b/css/style.css @@ -16,6 +16,7 @@ body { display: flex; justify-content: center; + flex-direction: column; } .main-container { diff --git a/index.html b/index.html index 297da259..14c2d7d1 100644 --- a/index.html +++ b/index.html @@ -15,8 +15,7 @@ -
-
+
logo Booki
@@ -25,6 +24,8 @@ Activités
+
+
From 7efee80cec66a7d140fef6cc3ff3bda3d3a1ada3 Mon Sep 17 00:00:00 2001 From: Quentin Della mattia Date: Tue, 5 Mar 2024 16:55:09 +0800 Subject: [PATCH 08/50] Ajout SVG icon, Parti NAV filtre et recherche --- css/style.css | 127 +++++++++++++++++-- images/icons-boostrap/cash.svg | 4 + images/icons-boostrap/fire.svg | 3 + images/icons-boostrap/geo-alt-fill.svg | 3 + images/icons-boostrap/heart-fill.svg | 3 + images/icons-boostrap/info-circle.svg | 4 + images/icons-boostrap/person-raised-hand.svg | 4 + index.html | 47 ++++++- 8 files changed, 180 insertions(+), 15 deletions(-) create mode 100644 images/icons-boostrap/cash.svg create mode 100644 images/icons-boostrap/fire.svg create mode 100644 images/icons-boostrap/geo-alt-fill.svg create mode 100644 images/icons-boostrap/heart-fill.svg create mode 100644 images/icons-boostrap/info-circle.svg create mode 100644 images/icons-boostrap/person-raised-hand.svg diff --git a/css/style.css b/css/style.css index 71228bb8..46cb404d 100644 --- a/css/style.css +++ b/css/style.css @@ -31,9 +31,11 @@ a { text-decoration: none; } -.section-title { +.section-title { margin: 0; font-size: 22px; + font-weight: 700; + line-height: 25.83px; } .card { @@ -59,12 +61,16 @@ a { color: var(--main-bg-color) } -/****** CSS HEADER ***************/ +.side-padding{ + padding: 30px 50px 30px 50px; /* add this to add padding on the side of the page*/ +} +/****** CSS HEADER *************************************************************************/ .header-logo-link{ display: flex; justify-content: space-between; } + .link-hebergement-activities a{ margin: 0 50px 0 50px; /*make the gap btw links*/ } @@ -73,14 +79,110 @@ a { color: #0065FC; border-top: #0065FC solid 2px; } + .booki-image{ - padding: 30px 50px 30px 50px; -} -.booki-image img{ width: 61.09px; height: 19px; } -/****** Hebergements And Populaires ***********/ +/****** Nav filter css ****************************************************/ +.search-bar{ + display: flex; + align-items: center; + margin-top: 20px; + width: 377px; + height: 49px; +} + +.text-nav{ + font-weight: 700; + font-size: 18px; + line-height: 21.13px; +} +/* Headline CSS*/ +.headline h2{ + margin-bottom: 10px; /*make space btw H2 and P from the nav*/ +} +.icon-location{ /* this part is for the icon side */ + width: 14px; + height: 18px; +} +.container-icon-location{ /*this part is for background of the icon location and centered it*/ + width: 50px; + height: 49px; + border-radius: 15px 0 0 15px; + background-color: #F2F2F2; + display: flex; + justify-content: center; + align-items: center; +} + +/* Div input css*/ +.input{ + text-align: center; + height: 46px; + border: solid 1px #F2F2F2 ; +} + +/* Div search button CSS*/ +.search-button{ + display: flex; + align-items: center; + font-size: 18px; + height: 49px; + border-radius: 0 15px 15px 0; + padding: 15px 16px 15px 16px; + background-color: #0065FC; + color: white; + border: 1px solid #0065FC; +} + +/****** Filtres CSS ************/ +.filter-bar{ + display: flex; + gap: 15px; + height: 50px; + margin-top: 20px; +} + +.filter-button{ + display: flex; + align-items: center; + gap: 10px; + border-radius: 25px; + border: solid 2px #D9D9D9; + padding: 4px 19px 4px 19px; +} + +.text-button{ + font-size: 17px; + font-weight: 700; + line-height: 19.96px; +} + +.filter-image { + width: 22px; + height: 22px; +} + +.filter-button:hover{ /* when pass over change background and cursor, on the filter button*/ + background-color: #DEEBFF; + cursor: pointer; +} +/* Div info-bar CSS */ +.info-bar{ + display: flex; + align-items: center; + gap: 10px; + margin-top: 20px; +} +.information{ + font-size: 16px; + font-weight: 400; + line-height: 19px; + margin: 0px; +} + +/****** Hebergements And Populaires *******************************************/ .hebergements-and-populaires { display: flex; justify-content: space-between; @@ -93,7 +195,7 @@ a { box-sizing: border-box; } -/****** Hebergements ***********/ +/****** Hebergements *****************************************************/ .hebergements { width: 65%; } @@ -105,7 +207,7 @@ a { border-radius: 20px 20px 0 0; } -/****** Populaires ***********/ +/****** Populaires *********************************************************/ .populaires { width: 32%; } @@ -142,10 +244,15 @@ a { margin-bottom: 4px; } -.populaires-cards .card-subtitle { +.populaires-cards { margin: 0; } - +.card-subtitle{ + margin: 0; + font-weight: 400; + font-size: 16px; + line-height: 18.78px; +} .populaires-cards .card-rating { margin-bottom: 5px; } diff --git a/images/icons-boostrap/cash.svg b/images/icons-boostrap/cash.svg new file mode 100644 index 00000000..525554af --- /dev/null +++ b/images/icons-boostrap/cash.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/images/icons-boostrap/fire.svg b/images/icons-boostrap/fire.svg new file mode 100644 index 00000000..e1f50085 --- /dev/null +++ b/images/icons-boostrap/fire.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/images/icons-boostrap/geo-alt-fill.svg b/images/icons-boostrap/geo-alt-fill.svg new file mode 100644 index 00000000..7307b778 --- /dev/null +++ b/images/icons-boostrap/geo-alt-fill.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/images/icons-boostrap/heart-fill.svg b/images/icons-boostrap/heart-fill.svg new file mode 100644 index 00000000..77b3786b --- /dev/null +++ b/images/icons-boostrap/heart-fill.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/images/icons-boostrap/info-circle.svg b/images/icons-boostrap/info-circle.svg new file mode 100644 index 00000000..6de62380 --- /dev/null +++ b/images/icons-boostrap/info-circle.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/images/icons-boostrap/person-raised-hand.svg b/images/icons-boostrap/person-raised-hand.svg new file mode 100644 index 00000000..ca2167b8 --- /dev/null +++ b/images/icons-boostrap/person-raised-hand.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/index.html b/index.html index 14c2d7d1..57260824 100644 --- a/index.html +++ b/index.html @@ -16,21 +16,58 @@
-
- logo Booki +
+ logo Booki
Hébergements Activités
-
+
+
-
-

Hébergements à Mareseille

+

Hébergements à Marseille

From 6ab5b670820508ae61a2391dacd525b8e4f93b85 Mon Sep 17 00:00:00 2001 From: Quentin Della mattia Date: Tue, 5 Mar 2024 17:38:25 +0800 Subject: [PATCH 09/50] changement de l'agencement du main, ajout 2section --- css/style.css | 11 ++- index.html | 221 ++++++++++++++++++++++++++------------------------ 2 files changed, 124 insertions(+), 108 deletions(-) diff --git a/css/style.css b/css/style.css index 46cb404d..cbb07e42 100644 --- a/css/style.css +++ b/css/style.css @@ -196,13 +196,20 @@ a { } /****** Hebergements *****************************************************/ -.hebergements { +.hebergements { /* Take 65% of page widht*/ width: 65%; } +.hebergements-card-section-one { + display: flex; + gap: 4px; +} +.hebergements-card-section-one a{ + width: 100%; +} .hebergements-card img{ - width: 30%; + width: 100%; height: 124px; border-radius: 20px 20px 0 0; } diff --git a/index.html b/index.html index 57260824..85046cc7 100644 --- a/index.html +++ b/index.html @@ -70,118 +70,127 @@

Nos pépites

Hébergements à Marseille

- -
- Image de la chambre d'hôtel montrant un lit -
-
-

Hôtel du port

-

Nuit à partir de 52€

-
-
- - - - - - Note de 4 sur 5 -
-
-
- -
- Image de la chambre d'hôtel montrant un lit -
-
-

Hôtel Chez Amina

-

Nuit à partir de 96€

-
-
- - - - - - Note de 4 sur 5 -
-
-
- - - - -
- Image de la chambre d'hôtel montrant un lit -
-
-

Hôtel de la mer

-

Nuit à partir de 46€

+
+ + +
+ Image de la chambre d'hôtel montrant un lit +
+
+

Hôtel Chez Amina

+

Nuit à partir de 96€

+
+
+ + + + + + Note de 4 sur 5 +
-
- - - - - - Note de 4 sur 5 +
+ + +
+ Image de la chambre d'hôtel montrant un lit +
+
+

Hôtel Les mouettes

+

Nuit à partir de 76€

+
+
+ + + + + + Note de 4 sur 5 +
-
- - - -
- Image de la chambre d'hôtel montrant un lit -
-
-

Auberge La Canebière

-

Nuit à partir de 25€

+
+ +
+ +
+ +
+ Image de la chambre d'hôtel montrant un lit +
+
+

Hôtel de la mer

+

Nuit à partir de 46€

+
+
+ + + + + + Note de 4 sur 5 +
-
- - - - - - Note de 4 sur 5 +
+ + +
+ Image de la chambre d'hôtel montrant un lit +
+
+

Auberge La Canebière

+

Nuit à partir de 25€

+
+
+ + + + + + Note de 4 sur 5 +
-
- - - -
- Image de la chambre d'hôtel montrant un lit -
-
-

Auberge Le Panier

-

Nuit à partir de 23€

-
-
- - - - - - Note de 4 sur 5 +
+ + +
+ Image de la chambre d'hôtel montrant un lit +
+
+

Auberge Le Panier

+

Nuit à partir de 23€

+
+
+ + + + + + Note de 4 sur 5 +
-
- - + + +
+ +
From e8ac1277d58de50b73f100cc721e99be100c118a Mon Sep 17 00:00:00 2001 From: Quentin Della mattia Date: Tue, 5 Mar 2024 18:13:22 +0800 Subject: [PATCH 10/50] ajustement des lien hebergements --- css/style.css | 29 ++++++++++++++++++++++++----- 1 file changed, 24 insertions(+), 5 deletions(-) diff --git a/css/style.css b/css/style.css index cbb07e42..2dd3f786 100644 --- a/css/style.css +++ b/css/style.css @@ -200,21 +200,40 @@ a { width: 65%; } -.hebergements-card-section-one { +section .hebergements-card-section-one, .hebergements-card-section-two {/* Make the first section of card flex */ display: flex; - gap: 4px; + gap: 25px; + margin-top: 33px; + padding: inherit; +} + +section .hebergements-card-section-two{ + padding: inherit; +} + +.hebergements-card-section-one a{/* make the card block take all the width of is parent*/ + width: 100%; } -.hebergements-card-section-one a{ +.hebergements-card-section-two a{/* make the card block take all the width of is parent*/ width: 100%; } -.hebergements-card img{ +.hebergements-card img{/* make the image take all widht of is parent and have fixed height*/ width: 100%; height: 124px; border-radius: 20px 20px 0 0; } -/****** Populaires *********************************************************/ +.card-txt, .card-rating{ + padding: 0px 15px 0px 15px; + margin: 8px 0; /* Make gap btw rating and txt card */ +} + +.card-title{ + margin: 8px 0; /* Make gap btw hotel title and price room*/ +} + +/****** Populaires **********************************************************************************/ .populaires { width: 32%; } From b6d69d6fc95b5d5308d8b65270edb258bff0876f Mon Sep 17 00:00:00 2001 From: Quentin Della mattia Date: Thu, 7 Mar 2024 16:23:17 +0800 Subject: [PATCH 11/50] =?UTF-8?q?Creation=20partie=20activit=C3=A9e=20et?= =?UTF-8?q?=20son=20css?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 32 ++++++++++++++++++++++++++++++-- index.html | 47 +++++++++++++++++++++++++++++++++++++---------- 2 files changed, 67 insertions(+), 12 deletions(-) diff --git a/css/style.css b/css/style.css index 2dd3f786..f5ba9edc 100644 --- a/css/style.css +++ b/css/style.css @@ -45,7 +45,7 @@ a { filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1)); } -.card img { +.card img {/* Images cannot distort*/ object-fit: cover; } @@ -231,7 +231,7 @@ section .hebergements-card-section-two{ .card-title{ margin: 8px 0; /* Make gap btw hotel title and price room*/ -} +} /****** Populaires **********************************************************************************/ .populaires { @@ -283,8 +283,36 @@ section .hebergements-card-section-two{ margin-bottom: 5px; } +/***********Activities section ***************************************************/ +.activities{ + display: flex; + flex-direction: column; + margin-top: 100px; + gap: 50px; +} +.activities-cards{/*Position Cards activities block*/ + display: flex; + gap: 30px; +} +.activities-cards a {/* Ajust widht max*/ + width: 300px; +} +.card-img{ /* Inherit the pading from class .card*/ + padding: inherit; +} + +.card-img img{ /*Images from activities card css*/ + width: 100%; + height: 380px; + border-radius: 20px 2 0px 0 0; + +} + +.title-card-activities{ + padding: 20px 19px 20px 19px; +} /* Le code ci-dessous correspond à la version responsive uniquement */ diff --git a/index.html b/index.html index 85046cc7..46d3b8cc 100644 --- a/index.html +++ b/index.html @@ -259,41 +259,68 @@

Hôtel Bleu et Blanc

-
+ +

Activités à Marseille

-
-
+
+
+
+
    +

    À propos

    +
  • Fonctionnement du site
    • +
  • Conditions générales
    • +
  • Données et confidentialité
    • +
+
+
+
    +

    Nos hébergements

    +
  • Charte qualité
    • +
  • Proposer votre hôtel
    • +
+
+
+
    +

    Assistance

    +
  • Centre d'aide
    • +
  • Nous contacter
    • +
+
+
+ +
From 71eecc14c54623142a2a64dcb1d8cad19b0a3f43 Mon Sep 17 00:00:00 2001 From: Quentin Della mattia Date: Thu, 7 Mar 2024 17:50:47 +0800 Subject: [PATCH 12/50] CSS du footer --- css/style.css | 43 ++++++++++++++++++++++++++++++++++++++++--- index.html | 11 +++++------ 2 files changed, 45 insertions(+), 9 deletions(-) diff --git a/css/style.css b/css/style.css index f5ba9edc..e5ee89b1 100644 --- a/css/style.css +++ b/css/style.css @@ -51,6 +51,8 @@ a { .card-title { font-size: 16px; + font-weight: 700; + line-height: 18.78px; } .euro { @@ -64,6 +66,10 @@ a { .side-padding{ padding: 30px 50px 30px 50px; /* add this to add padding on the side of the page*/ } + +h3{/* Inherit all H3 margin*/ + margin: 0px; +} /****** CSS HEADER *************************************************************************/ .header-logo-link{ display: flex; @@ -287,8 +293,9 @@ section .hebergements-card-section-two{ .activities{ display: flex; flex-direction: column; - margin-top: 100px; + margin-top: 50px; gap: 50px; + padding: 30px; } .activities-cards{/*Position Cards activities block*/ @@ -297,16 +304,17 @@ section .hebergements-card-section-two{ } .activities-cards a {/* Ajust widht max*/ - width: 300px; + width: 100%; } .card-img{ /* Inherit the pading from class .card*/ padding: inherit; + height: 100%; } .card-img img{ /*Images from activities card css*/ width: 100%; height: 380px; - border-radius: 20px 2 0px 0 0; + border-radius: 20px 20px 0 0; } @@ -314,6 +322,28 @@ section .hebergements-card-section-two{ padding: 20px 19px 20px 19px; } +/****** Footer CSS *******************************************/ +.footer-content{/* Flex container of footer*/ + display: flex; + background-color: #F2F2F2; + margin-top: 50px; +} + +.footer-content section{ + width: 100%; + padding: 20px; + +} + +ul{/* Sup liste style and padding */ + list-style: none; + padding-left: 0px; +} + +li{/* Put Gap btw each listes*/ + margin-top: 15px; +} + /* Le code ci-dessous correspond à la version responsive uniquement */ /****** Media queries ***********/ @@ -349,6 +379,13 @@ section .hebergements-card-section-two{ .populaires-cards .card-subtitle { font-size: 13px; } + + .card-img img{ /*Images from activities card css*/ + width: 100%; + height: 200px; + + } + } /* Small devices (phones, less than 768px) */ diff --git a/index.html b/index.html index 46d3b8cc..f15220e7 100644 --- a/index.html +++ b/index.html @@ -267,25 +267,25 @@

Activités à Marseille

-
- From eedbd07b5e02f2c133f0e93cdf89d89eb0dc6985 Mon Sep 17 00:00:00 2001 From: Quentin Della mattia Date: Thu, 7 Mar 2024 18:45:26 +0800 Subject: [PATCH 13/50] media query tablette version --- css/style.css | 7 ++++++- index.html | 12 ++++++------ 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/css/style.css b/css/style.css index e5ee89b1..b68ec5df 100644 --- a/css/style.css +++ b/css/style.css @@ -43,6 +43,7 @@ a { border-radius: 20px; padding: 5px; filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1)); + } .card img {/* Images cannot distort*/ @@ -239,6 +240,9 @@ section .hebergements-card-section-two{ margin: 8px 0; /* Make gap btw hotel title and price room*/ } +.height-adujst{ + height: 100%; +} /****** Populaires **********************************************************************************/ .populaires { width: 32%; @@ -367,7 +371,7 @@ li{/* Put Gap btw each listes*/ flex-direction: row; justify-content: space-between; } - + .populaires-cards a { width: 30%; } @@ -391,4 +395,5 @@ li{/* Put Gap btw each listes*/ /* Small devices (phones, less than 768px) */ @media (max-width: 767.98px) { /* ... */ + } \ No newline at end of file diff --git a/index.html b/index.html index f15220e7..313122fa 100644 --- a/index.html +++ b/index.html @@ -72,7 +72,7 @@

Hébergements à Marseille

-
+
Image de la chambre d'hôtel montrant un lit
@@ -91,7 +91,7 @@

Hôtel du port

 -
+
Image de la chambre d'hôtel montrant un lit
@@ -110,7 +110,7 @@

Hôtel Chez Amina

 -
+
Image de la chambre d'hôtel montrant un lit
@@ -132,7 +132,7 @@

Hôtel Les mouettes

-
+
Image de la chambre d'hôtel montrant un lit
@@ -151,7 +151,7 @@

Hôtel de la mer

 -
+
Image de la chambre d'hôtel montrant un lit
@@ -170,7 +170,7 @@

Auberge La Canebière

 -
+
Image de la chambre d'hôtel montrant un lit
From e4de79d0cadf537d0770284502bb822e191d8aa7 Mon Sep 17 00:00:00 2001 From: Quentin Della mattia Date: Thu, 7 Mar 2024 18:51:23 +0800 Subject: [PATCH 14/50] Phone device header ajuster --- css/style.css | 276 +++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 275 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index b68ec5df..42e828ff 100644 --- a/css/style.css +++ b/css/style.css @@ -395,5 +395,279 @@ li{/* Put Gap btw each listes*/ /* Small devices (phones, less than 768px) */ @media (max-width: 767.98px) { /* ... */ - + /****** CSS HEADER *************************************************************************/ +.header-logo-link{ + display: flex; + justify-content: space-between; + align-items: center; + flex-direction: column; +} + +.link-hebergement-activities a:hover{ + color: #0065FC; + border-bottom: #0065FC solid 2px; + border-top: none; +} + +.booki-image{ + width: 61.09px; + height: 19px; +} +/****** Nav filter css ****************************************************/ +.search-bar{ + display: flex; + align-items: center; + margin-top: 20px; + width: 377px; + height: 49px; +} + +.text-nav{ + font-weight: 700; + font-size: 18px; + line-height: 21.13px; +} +/* Headline CSS*/ +.headline h2{ + margin-bottom: 10px; /*make space btw H2 and P from the nav*/ +} +.icon-location{ /* this part is for the icon side */ + width: 14px; + height: 18px; +} +.container-icon-location{ /*this part is for background of the icon location and centered it*/ + width: 50px; + height: 49px; + border-radius: 15px 0 0 15px; + background-color: #F2F2F2; + display: flex; + justify-content: center; + align-items: center; +} + +/* Div input css*/ +.input{ + text-align: center; + height: 46px; + border: solid 1px #F2F2F2 ; +} + +/* Div search button CSS*/ +.search-button{ + display: flex; + align-items: center; + font-size: 18px; + height: 49px; + border-radius: 0 15px 15px 0; + padding: 15px 16px 15px 16px; + background-color: #0065FC; + color: white; + border: 1px solid #0065FC; +} + +/****** Filtres CSS ************/ +.filter-bar{ + display: flex; + gap: 15px; + height: 50px; + margin-top: 20px; +} + +.filter-button{ + display: flex; + align-items: center; + gap: 10px; + border-radius: 25px; + border: solid 2px #D9D9D9; + padding: 4px 19px 4px 19px; +} + +.text-button{ + font-size: 17px; + font-weight: 700; + line-height: 19.96px; +} + +.filter-image { + width: 22px; + height: 22px; +} + +.filter-button:hover{ /* when pass over change background and cursor, on the filter button*/ + background-color: #DEEBFF; + cursor: pointer; +} +/* Div info-bar CSS */ +.info-bar{ + display: flex; + align-items: center; + gap: 10px; + margin-top: 20px; +} +.information{ + font-size: 16px; + font-weight: 400; + line-height: 19px; + margin: 0px; +} + +/****** Hebergements And Populaires *******************************************/ +.hebergements-and-populaires { + display: flex; + justify-content: space-between; +} + +.hebergements-and-populaires section { + background-color: var(--main-bg-color); + border-radius: 20px; + padding: 30px; + box-sizing: border-box; +} + +/****** Hebergements *****************************************************/ +.hebergements { /* Take 65% of page widht*/ + width: 65%; +} + +section .hebergements-card-section-one, .hebergements-card-section-two {/* Make the first section of card flex */ + display: flex; + gap: 25px; + margin-top: 33px; + padding: inherit; +} + +section .hebergements-card-section-two{ + padding: inherit; +} + +.hebergements-card-section-one a{/* make the card block take all the width of is parent*/ + width: 100%; +} + +.hebergements-card-section-two a{/* make the card block take all the width of is parent*/ + width: 100%; +} +.hebergements-card img{/* make the image take all widht of is parent and have fixed height*/ + width: 100%; + height: 124px; + border-radius: 20px 20px 0 0; +} + +.card-txt, .card-rating{ + padding: 0px 15px 0px 15px; + margin: 8px 0; /* Make gap btw rating and txt card */ +} + +.card-title{ + margin: 8px 0; /* Make gap btw hotel title and price room*/ +} + +.height-adujst{ + height: 100%; +} +/****** Populaires **********************************************************************************/ +.populaires { + width: 32%; +} + +.populaires-title { + display: flex; + justify-content: space-between; + align-items: center; +} + +.populaires-cards .card { + display: flex; + margin-top: 33px; +} + +.populaires-cards img { + width: 33%; + height: 136px; + border-top-left-radius: 20px; + border-bottom-left-radius: 20px; +} + +.populaires-cards .card-content { + width: 67%; + padding-left: 15px; + display: flex; + flex-direction: column; + justify-content: space-between; + box-sizing: border-box; +} + +.populaires-cards .card-title { + margin-top: 10px; + margin-bottom: 4px; +} + +.populaires-cards { + margin: 0; +} +.card-subtitle{ + margin: 0; + font-weight: 400; + font-size: 16px; + line-height: 18.78px; +} +.populaires-cards .card-rating { + margin-bottom: 5px; +} + +/***********Activities section ***************************************************/ +.activities{ + display: flex; + flex-direction: column; + margin-top: 50px; + gap: 50px; + padding: 30px; +} + +.activities-cards{/*Position Cards activities block*/ + display: flex; + gap: 30px; +} + +.activities-cards a {/* Ajust widht max*/ + width: 100%; +} +.card-img{ /* Inherit the pading from class .card*/ + padding: inherit; + height: 100%; +} + +.card-img img{ /*Images from activities card css*/ + width: 100%; + height: 380px; + border-radius: 20px 20px 0 0; + +} + +.title-card-activities{ + padding: 20px 19px 20px 19px; +} + +/****** Footer CSS *******************************************/ +.footer-content{/* Flex container of footer*/ + display: flex; + background-color: #F2F2F2; + margin-top: 50px; +} + +.footer-content section{ + width: 100%; + padding: 20px; + +} + +ul{/* Sup liste style and padding */ + list-style: none; + padding-left: 0px; +} + +li{/* Put Gap btw each listes*/ + margin-top: 15px; +} + } \ No newline at end of file From fd8f3fd0de9e8f5f6fc98bb6c01d53714f0ef9e5 Mon Sep 17 00:00:00 2001 From: Quentin Della mattia Date: Thu, 7 Mar 2024 22:24:31 +0800 Subject: [PATCH 15/50] =?UTF-8?q?solution=20pour=20le=20bug=20du=20filtre?= =?UTF-8?q?=20mise=20=C3=A0=20jour=20et=20suppression=20de=20ligne=20de=20?= =?UTF-8?q?code=20dans=20le=20media=20query=20phone,=20car=20inutile.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 230 +++++--------------------------------------------- index.html | 2 +- 2 files changed, 20 insertions(+), 212 deletions(-) diff --git a/css/style.css b/css/style.css index 42e828ff..7c78f4a8 100644 --- a/css/style.css +++ b/css/style.css @@ -105,6 +105,7 @@ h3{/* Inherit all H3 margin*/ font-size: 18px; line-height: 21.13px; } + /* Headline CSS*/ .headline h2{ margin-bottom: 10px; /*make space btw H2 and P from the nav*/ @@ -147,7 +148,7 @@ h3{/* Inherit all H3 margin*/ .filter-bar{ display: flex; gap: 15px; - height: 50px; + width: 100%; margin-top: 20px; } @@ -155,6 +156,7 @@ h3{/* Inherit all H3 margin*/ display: flex; align-items: center; gap: 10px; + height: 50px; border-radius: 25px; border: solid 2px #D9D9D9; padding: 4px 19px 4px 19px; @@ -397,36 +399,23 @@ li{/* Put Gap btw each listes*/ /* ... */ /****** CSS HEADER *************************************************************************/ .header-logo-link{ - display: flex; - justify-content: space-between; align-items: center; flex-direction: column; } -.link-hebergement-activities a:hover{ +.link-hebergement-activities a:hover{/* show the border bottom phone screen*/ color: #0065FC; border-bottom: #0065FC solid 2px; border-top: none; } -.booki-image{ - width: 61.09px; - height: 19px; -} /****** Nav filter css ****************************************************/ .search-bar{ - display: flex; - align-items: center; - margin-top: 20px; - width: 377px; - height: 49px; + width: 300px;/*Ajust the widht*/ + border: solid 2px #F2F2F2; + border-radius: 25px; } -.text-nav{ - font-weight: 700; - font-size: 18px; - line-height: 21.13px; -} /* Headline CSS*/ .headline h2{ margin-bottom: 10px; /*make space btw H2 and P from the nav*/ @@ -435,7 +424,7 @@ li{/* Put Gap btw each listes*/ width: 14px; height: 18px; } -.container-icon-location{ /*this part is for background of the icon location and centered it*/ +.container-icon-location{ /*this part is for background of the icon location and center it*/ width: 50px; height: 49px; border-radius: 15px 0 0 15px; @@ -447,50 +436,28 @@ li{/* Put Gap btw each listes*/ /* Div input css*/ .input{ - text-align: center; - height: 46px; - border: solid 1px #F2F2F2 ; + border: none; } /* Div search button CSS*/ .search-button{ - display: flex; - align-items: center; - font-size: 18px; - height: 49px; - border-radius: 0 15px 15px 0; - padding: 15px 16px 15px 16px; - background-color: #0065FC; - color: white; - border: 1px solid #0065FC; + border-radius: 15px; + width: 49px; + box-shadow: 0px 4px 4px 0px #00000040; + } /****** Filtres CSS ************/ .filter-bar{ - display: flex; - gap: 15px; - height: 50px; + display: grid; + grid-template-columns: 1fr 1fr; /* Deux colonnes de largeur égale */ + grid-template-rows: repeat(3, auto); /* Trois lignes de hauteur automatique */ + gap: 10px; /* Espacement entre les éléments */ margin-top: 20px; } -.filter-button{ - display: flex; - align-items: center; - gap: 10px; - border-radius: 25px; - border: solid 2px #D9D9D9; - padding: 4px 19px 4px 19px; -} - -.text-button{ - font-size: 17px; - font-weight: 700; - line-height: 19.96px; -} - -.filter-image { - width: 22px; - height: 22px; +.grid-adjust{ + grid-column: 1 / span 2; /* Le titre occupe deux colonnes */ } .filter-button:hover{ /* when pass over change background and cursor, on the filter button*/ @@ -511,163 +478,4 @@ li{/* Put Gap btw each listes*/ margin: 0px; } -/****** Hebergements And Populaires *******************************************/ -.hebergements-and-populaires { - display: flex; - justify-content: space-between; -} - -.hebergements-and-populaires section { - background-color: var(--main-bg-color); - border-radius: 20px; - padding: 30px; - box-sizing: border-box; -} - -/****** Hebergements *****************************************************/ -.hebergements { /* Take 65% of page widht*/ - width: 65%; -} - -section .hebergements-card-section-one, .hebergements-card-section-two {/* Make the first section of card flex */ - display: flex; - gap: 25px; - margin-top: 33px; - padding: inherit; -} - -section .hebergements-card-section-two{ - padding: inherit; -} - -.hebergements-card-section-one a{/* make the card block take all the width of is parent*/ - width: 100%; -} - -.hebergements-card-section-two a{/* make the card block take all the width of is parent*/ - width: 100%; -} -.hebergements-card img{/* make the image take all widht of is parent and have fixed height*/ - width: 100%; - height: 124px; - border-radius: 20px 20px 0 0; -} - -.card-txt, .card-rating{ - padding: 0px 15px 0px 15px; - margin: 8px 0; /* Make gap btw rating and txt card */ -} - -.card-title{ - margin: 8px 0; /* Make gap btw hotel title and price room*/ -} - -.height-adujst{ - height: 100%; -} -/****** Populaires **********************************************************************************/ -.populaires { - width: 32%; -} - -.populaires-title { - display: flex; - justify-content: space-between; - align-items: center; -} - -.populaires-cards .card { - display: flex; - margin-top: 33px; -} - -.populaires-cards img { - width: 33%; - height: 136px; - border-top-left-radius: 20px; - border-bottom-left-radius: 20px; -} - -.populaires-cards .card-content { - width: 67%; - padding-left: 15px; - display: flex; - flex-direction: column; - justify-content: space-between; - box-sizing: border-box; -} - -.populaires-cards .card-title { - margin-top: 10px; - margin-bottom: 4px; -} - -.populaires-cards { - margin: 0; -} -.card-subtitle{ - margin: 0; - font-weight: 400; - font-size: 16px; - line-height: 18.78px; -} -.populaires-cards .card-rating { - margin-bottom: 5px; -} - -/***********Activities section ***************************************************/ -.activities{ - display: flex; - flex-direction: column; - margin-top: 50px; - gap: 50px; - padding: 30px; -} - -.activities-cards{/*Position Cards activities block*/ - display: flex; - gap: 30px; -} - -.activities-cards a {/* Ajust widht max*/ - width: 100%; -} -.card-img{ /* Inherit the pading from class .card*/ - padding: inherit; - height: 100%; -} - -.card-img img{ /*Images from activities card css*/ - width: 100%; - height: 380px; - border-radius: 20px 20px 0 0; - -} - -.title-card-activities{ - padding: 20px 19px 20px 19px; -} - -/****** Footer CSS *******************************************/ -.footer-content{/* Flex container of footer*/ - display: flex; - background-color: #F2F2F2; - margin-top: 50px; -} - -.footer-content section{ - width: 100%; - padding: 20px; - -} - -ul{/* Sup liste style and padding */ - list-style: none; - padding-left: 0px; -} - -li{/* Put Gap btw each listes*/ - margin-top: 15px; -} - } \ No newline at end of file diff --git a/index.html b/index.html index 313122fa..56c9515e 100644 --- a/index.html +++ b/index.html @@ -39,7 +39,7 @@

Trouvez votre hébergement pour des vacances de

-

Filtres

+

Filtres

icon billet de monnaie

Économique

From 1e73fb02fae5f13b1a6c72b64db7ac419415c408 Mon Sep 17 00:00:00 2001 From: Quentin Della mattia Date: Sat, 9 Mar 2024 17:55:30 +0800 Subject: [PATCH 16/50] diplay phone partie hebergements et populaires --- css/style.css | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 55 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index 7c78f4a8..d017194c 100644 --- a/css/style.css +++ b/css/style.css @@ -300,7 +300,7 @@ section .hebergements-card-section-two{ display: flex; flex-direction: column; margin-top: 50px; - gap: 50px; + gap: 30px; padding: 30px; } @@ -397,6 +397,10 @@ li{/* Put Gap btw each listes*/ /* Small devices (phones, less than 768px) */ @media (max-width: 767.98px) { /* ... */ + .main-container{ /* Inherit padding make the main no padding */ + padding: 0%; + } + /****** CSS HEADER *************************************************************************/ .header-logo-link{ align-items: center; @@ -410,6 +414,10 @@ li{/* Put Gap btw each listes*/ } /****** Nav filter css ****************************************************/ +.info-group{ + padding: 0 20px 0 20px; + margin-top: 35px; +} .search-bar{ width: 300px;/*Ajust the widht*/ border: solid 2px #F2F2F2; @@ -478,4 +486,50 @@ li{/* Put Gap btw each listes*/ margin: 0px; } +/****** Hebergements And Populaires *******************************************/ +.hebergements-and-populaires { /* direction changement*/ + flex-direction: column-reverse; +} + +.hebergements-and-populaires section{/* Delete section content radius + background-color */ + border-radius: 0px; + background-color: inherit; +} + +/****** Hebergements *****************************************************/ +.hebergements { /* Take 100% of page widht phone display*/ + width: 100%; +} + +section .hebergements-card-section-one, .hebergements-card-section-two {/* Make the first section of card flex */ + display: flex; + flex-direction: column; +} +/****** Populaires **********************************************************************************/ + +/*Delete widht 32% from class populaire for phone display*/ + +.hebergements-and-populaires .populaires {/* give back the color to populaires section */ + background-color: var(--main-bg-color); +} + +.populaires-cards{/* card of populaires column direction with display flex */ + flex-direction: column; +} + +.populaires-cards a{/*all card take 100% of his parent*/ + width: 100%; +} + +.populaires-cards img {/* image same height */ + height: 146px; +} + +.populaires-cards .card-content { + padding: 0%; +} + +/***********Activities section ***************************************************/ + + } \ No newline at end of file From 976290da8e385ff71ae692069ce0a992bb48ff31 Mon Sep 17 00:00:00 2001 From: Quentin Della mattia Date: Sat, 9 Mar 2024 18:02:40 +0800 Subject: [PATCH 17/50] =?UTF-8?q?Display=20phone=20ajustement=20CSS=20part?= =?UTF-8?q?ie=20activit=C3=A9s?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/css/style.css b/css/style.css index d017194c..f463a51a 100644 --- a/css/style.css +++ b/css/style.css @@ -531,5 +531,17 @@ section .hebergements-card-section-one, .hebergements-card-section-two {/* Make /***********Activities section ***************************************************/ +.activities-cards{/*Position Cards activities in column */ + flex-direction: column; +} + +.card-img{ /* Inherit the pading from class .card*/ + padding: inherit; + height: 100%; +} + +.card-img img{ /* Ajust height Images from activities card css*/ + height: 141px; +} } \ No newline at end of file From a056200f64ecd772d422172f9b13c6b5bbfcd8d1 Mon Sep 17 00:00:00 2001 From: Quentin Della mattia Date: Sat, 9 Mar 2024 18:13:02 +0800 Subject: [PATCH 18/50] Display phone CSS partie FOOTER --- css/style.css | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index f463a51a..5f0f3c5a 100644 --- a/css/style.css +++ b/css/style.css @@ -333,12 +333,11 @@ section .hebergements-card-section-two{ display: flex; background-color: #F2F2F2; margin-top: 50px; + padding: 20px; } .footer-content section{ width: 100%; - padding: 20px; - } ul{/* Sup liste style and padding */ @@ -544,4 +543,14 @@ section .hebergements-card-section-one, .hebergements-card-section-two {/* Make height: 141px; } +/****** Footer CSS *******************************************/ +.footer-content{/* changement Flex direction container of footer + add 10px of padding each section*/ + flex-direction: column; + padding: 30px; +} + +.footer-content section{/* Add a margin top to separate each section */ + margin-top: 30px; +} + } \ No newline at end of file From d5f1a82d814cd072b194dff960ede563f11a68bb Mon Sep 17 00:00:00 2001 From: Quentin Della mattia Date: Sat, 9 Mar 2024 18:18:44 +0800 Subject: [PATCH 19/50] Ajustement margin top dans les sections de la NAV --- css/style.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/css/style.css b/css/style.css index 5f0f3c5a..7f7cf989 100644 --- a/css/style.css +++ b/css/style.css @@ -95,7 +95,7 @@ h3{/* Inherit all H3 margin*/ .search-bar{ display: flex; align-items: center; - margin-top: 20px; + margin-top: 35px; width: 377px; height: 49px; } @@ -149,7 +149,7 @@ h3{/* Inherit all H3 margin*/ display: flex; gap: 15px; width: 100%; - margin-top: 20px; + margin-top: 35px; } .filter-button{ @@ -182,7 +182,7 @@ h3{/* Inherit all H3 margin*/ display: flex; align-items: center; gap: 10px; - margin-top: 20px; + margin-top: 35px; } .information{ font-size: 16px; From 40aecdbebd5b12b4c02d162f30840b28defb1e2e Mon Sep 17 00:00:00 2001 From: Quentin Della mattia Date: Sat, 9 Mar 2024 18:31:40 +0800 Subject: [PATCH 20/50] Ajout du H3 Afficher plus dans la section heberge- ment --- css/style.css | 3 +++ index.html | 1 + 2 files changed, 4 insertions(+) diff --git a/css/style.css b/css/style.css index 7f7cf989..577bd4f0 100644 --- a/css/style.css +++ b/css/style.css @@ -216,6 +216,9 @@ section .hebergements-card-section-one, .hebergements-card-section-two {/* Make padding: inherit; } +.hebergements .show-more{ + margin-top: 30px; +} section .hebergements-card-section-two{ padding: inherit; } diff --git a/index.html b/index.html index 56c9515e..5dc7593a 100644 --- a/index.html +++ b/index.html @@ -190,6 +190,7 @@

Auberge Le Panier
+

Afficher plus

From 6aa5026c9e64a53b0e3c2cb3a434811c136409c8 Mon Sep 17 00:00:00 2001 From: Quentin Della mattia Date: Sat, 9 Mar 2024 18:50:58 +0800 Subject: [PATCH 21/50] Ajout dans la partie nav>filter un display grid pour mettre le filtre au dessus des boutons. --- css/style.css | 25 ++++++++++++++++++++----- 1 file changed, 20 insertions(+), 5 deletions(-) diff --git a/css/style.css b/css/style.css index 577bd4f0..262c38d5 100644 --- a/css/style.css +++ b/css/style.css @@ -357,6 +357,20 @@ li{/* Put Gap btw each listes*/ /****** Media queries ***********/ /* Medium devices (tablets, less/equal than 1024px) */ @media (max-width: 1024px) { + /* filter CSS */ + .filter-bar{/* display flex replace by grid */ + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; /* 4 column with egal widht */ + grid-template-rows: repeat(2, auto); /* 3 automatic height lines */ + gap: 10px; /* Spacing between elements */ + margin-top: 20px; + } + + .grid-adjust{ + grid-column: 1 / span 4; /* Title hold the 4 column */ + } + + /* *************** Hebergement and Popular CSS ***********************/ .hebergements-and-populaires { flex-direction: column; } @@ -420,6 +434,7 @@ li{/* Put Gap btw each listes*/ padding: 0 20px 0 20px; margin-top: 35px; } + .search-bar{ width: 300px;/*Ajust the widht*/ border: solid 2px #F2F2F2; @@ -458,16 +473,16 @@ li{/* Put Gap btw each listes*/ } /****** Filtres CSS ************/ -.filter-bar{ +.filter-bar{/* Add one more ROWS and delete one column*/ display: grid; - grid-template-columns: 1fr 1fr; /* Deux colonnes de largeur égale */ - grid-template-rows: repeat(3, auto); /* Trois lignes de hauteur automatique */ - gap: 10px; /* Espacement entre les éléments */ + grid-template-columns: 1fr 1fr; /* Two columns of equal width */ + grid-template-rows: repeat(3, auto); /* Three automatic height lines */ + gap: 10px; /* Spacing between elements */ margin-top: 20px; } .grid-adjust{ - grid-column: 1 / span 2; /* Le titre occupe deux colonnes */ + grid-column: 1 / span 2; /* Title hold the 2 column */ } .filter-button:hover{ /* when pass over change background and cursor, on the filter button*/ From 9806238c2888dcd131146ef13a84f5212a934163 Mon Sep 17 00:00:00 2001 From: Quentin Della mattia Date: Sat, 9 Mar 2024 19:21:25 +0800 Subject: [PATCH 22/50] Ajout icon de recherche, remplacement du text 'Rechercher' par l'icon en css au niveau display phone. --- css/style.css | 11 +++++++++++ images/icons-boostrap/search.svg | 3 +++ 2 files changed, 14 insertions(+) create mode 100644 images/icons-boostrap/search.svg diff --git a/css/style.css b/css/style.css index 262c38d5..61563411 100644 --- a/css/style.css +++ b/css/style.css @@ -441,6 +441,17 @@ li{/* Put Gap btw each listes*/ border-radius: 25px; } +.search-button { + /* Use an icon image as a background*/ + background-image: url(/images/icons-boostrap/search.svg); + /* Center the icon horizontally and vertically in the button */ + background-position: center; + background-repeat: no-repeat; + /* Hide text */ + text-indent: -9999px; /* Cette valeur doit être suffisamment grande pour cacher le texte */ + cursor: pointer; +} + /* Headline CSS*/ .headline h2{ margin-bottom: 10px; /*make space btw H2 and P from the nav*/ diff --git a/images/icons-boostrap/search.svg b/images/icons-boostrap/search.svg new file mode 100644 index 00000000..9798fc43 --- /dev/null +++ b/images/icons-boostrap/search.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file From 6284fb629e78f1bb32c90678cf6eee254bb06652 Mon Sep 17 00:00:00 2001 From: Quentin Della mattia Date: Sat, 9 Mar 2024 20:32:41 +0800 Subject: [PATCH 23/50] centrer le contenu par rapport au html --- css/style.css | 12 ++++++++++-- index.html | 2 +- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/css/style.css b/css/style.css index 61563411..a48701cf 100644 --- a/css/style.css +++ b/css/style.css @@ -1,4 +1,8 @@ /****** General ***********/ +html{ /* when widht of screen more than 1440 px, the body is in center of html */ + display: flex; + justify-content: center; +} * { font-family: 'Raleway', sans-serif; } @@ -17,11 +21,11 @@ body { display: flex; justify-content: center; flex-direction: column; + max-width: 1440px; } .main-container { width: 100%; - max-width: 1440px; padding: 0 50px; box-sizing: border-box; } @@ -71,6 +75,10 @@ a { h3{/* Inherit all H3 margin*/ margin: 0px; } + +@media (min-width: 320px) and (max-width: 1440px) { + +} /****** CSS HEADER *************************************************************************/ .header-logo-link{ display: flex; @@ -411,7 +419,7 @@ li{/* Put Gap btw each listes*/ } /* Small devices (phones, less than 768px) */ -@media (max-width: 767.98px) { +@media (max-width: 768px) { /* ... */ .main-container{ /* Inherit padding make the main no padding */ padding: 0%; diff --git a/index.html b/index.html index 5dc7593a..b2ef5a63 100644 --- a/index.html +++ b/index.html @@ -36,7 +36,7 @@

Trouvez votre hébergement pour des vacances de
- +

Filtres

From 1f856e1d0960798a64028050efda492da63d3c5e Mon Sep 17 00:00:00 2001 From: Quentin Della mattia Date: Sat, 9 Mar 2024 20:52:02 +0800 Subject: [PATCH 24/50] =?UTF-8?q?ajustment=20des=20deux=20liens=20H=C3=A9b?= =?UTF-8?q?=C3=A9rgement=20et=20activit=C3=A9s=20pour=20un=20padding=20ent?= =?UTF-8?q?re=20la=20bordure=20et=20les=20liens?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 4 ++++ index.html | 4 ++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index a48701cf..a594f501 100644 --- a/css/style.css +++ b/css/style.css @@ -85,9 +85,13 @@ h3{/* Inherit all H3 margin*/ justify-content: space-between; } +.link-hebergement-activities{ + display: flex; +} .link-hebergement-activities a{ margin: 0 50px 0 50px; /*make the gap btw links*/ + padding: 15px 0 0 0; } .link-hebergement-activities a:hover{ diff --git a/index.html b/index.html index b2ef5a63..2e0b078e 100644 --- a/index.html +++ b/index.html @@ -20,8 +20,8 @@ logo Booki
- Hébergements - Activités +

Hébergements

 +

Activités
From 4e58137d991304657cc9d64dbc3212fa16dd9c1a Mon Sep 17 00:00:00 2001 From: Quentin Della mattia Date: Mon, 11 Mar 2024 13:22:43 +0800 Subject: [PATCH 31/50] Update des boutons dans la partie filtre en css --- css/style.css | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/css/style.css b/css/style.css index d5cb55c6..46dc93e3 100644 --- a/css/style.css +++ b/css/style.css @@ -72,7 +72,9 @@ a { .side-padding{ padding: 30px 50px 30px 50px; /* add this to add padding on the side of the page*/ } - +h2{ + margin: 0px; +} h3{/* Inherit all H3 margin*/ margin: 0px; } @@ -158,8 +160,10 @@ h3{/* Inherit all H3 margin*/ } /****** Filtres CSS ************/ + .filter-bar{ display: flex; + align-items: center; gap: 15px; width: 100%; margin-top: 35px; @@ -167,9 +171,7 @@ h3{/* Inherit all H3 margin*/ .filter-button{ display: flex; - align-items: baseline; gap: 10px; - height: 50px; border-radius: 25px; border: solid 2px #D9D9D9; padding: 4px 19px 4px 19px; @@ -182,7 +184,9 @@ h3{/* Inherit all H3 margin*/ line-height: 19.96px; } -.filter-image { +.filter-image { /* make all icon align to the center zith fixed height and width*/ + display: flex; + align-items: center; width: 22px; height: 22px; } @@ -192,6 +196,7 @@ h3{/* Inherit all H3 margin*/ cursor: pointer; } /* Div info-bar CSS */ + .icon-information{ width: 24px; height: 24px; @@ -208,6 +213,7 @@ h3{/* Inherit all H3 margin*/ gap: 10px; margin-top: 35px; } + .information{ font-size: 16px; font-weight: 400; From 3866544c7b581646833dcd15fd0e074932cd6ae4 Mon Sep 17 00:00:00 2001 From: Quentin Della mattia Date: Mon, 11 Mar 2024 13:47:37 +0800 Subject: [PATCH 32/50] Update icon localisation dans la partie rechercher dans la balise nav. --- css/style.css | 19 ++++++++++--------- index.html | 2 +- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/css/style.css b/css/style.css index 46dc93e3..c124a991 100644 --- a/css/style.css +++ b/css/style.css @@ -118,24 +118,25 @@ h3{/* Inherit all H3 margin*/ line-height: 21.13px; } -/* Headline CSS*/ +/****************** Headline CSS ******************************************************/ + .headline h2{ margin-bottom: 10px; /*make space btw H2 and P from the nav*/ } -.icon-location{ /* this part is for the icon side */ - width: 14px; - height: 18px; + +.container-icon-localisation{ /*this part is for background of the icon location and centered it*/ + border-radius: 15px 0 0 15px; + background-color: #F2F2F2; } -.container-icon-location{ /*this part is for background of the icon location and centered it*/ + +.container-icon-localisation i{ /* center icon with flexbox and fixed widht widht*/ width: 50px; height: 49px; - border-radius: 15px 0 0 15px; - background-color: #F2F2F2; display: flex; justify-content: center; align-items: center; + color: black; /* color black for icon localisation*/ } - /* Div input css*/ .input{ text-align: center; @@ -159,7 +160,7 @@ h3{/* Inherit all H3 margin*/ border: 1px solid #0065FC; } -/****** Filtres CSS ************/ +/************************ Filtres CSS *******************************************************/ .filter-bar{ display: flex; diff --git a/index.html b/index.html index f325ec00..ce761f1f 100644 --- a/index.html +++ b/index.html @@ -30,7 +30,7 @@

Trouvez votre hébergement pour des vacances de

En plein centre-ville ou en pleine nature

-
+
From da0011e2a7e814bac986a8659f4550ea10f860fd Mon Sep 17 00:00:00 2001 From: Quentin Della mattia Date: Mon, 11 Mar 2024 14:04:36 +0800 Subject: [PATCH 33/50] changement du padding des boutons partie filtres, balise nav --- css/style.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index c124a991..568b6f7c 100644 --- a/css/style.css +++ b/css/style.css @@ -166,7 +166,6 @@ h3{/* Inherit all H3 margin*/ display: flex; align-items: center; gap: 15px; - width: 100%; margin-top: 35px; } @@ -175,7 +174,7 @@ h3{/* Inherit all H3 margin*/ gap: 10px; border-radius: 25px; border: solid 2px #D9D9D9; - padding: 4px 19px 4px 19px; + padding: 10px 19px; text-wrap: nowrap; } From 6cdbf2a0958c247e86150c85ca7448aed18b785e Mon Sep 17 00:00:00 2001 From: Quentin Della mattia Date: Mon, 11 Mar 2024 14:31:52 +0800 Subject: [PATCH 34/50] suppression des images exporter de boostrap --- css/style.css | 18 ++++-------------- images/icons-boostrap/cash.svg | 4 ---- images/icons-boostrap/fire.svg | 3 --- images/icons-boostrap/geo-alt-fill.svg | 3 --- images/icons-boostrap/heart-fill.svg | 3 --- images/icons-boostrap/info-circle.svg | 4 ---- images/icons-boostrap/person-raised-hand.svg | 4 ---- images/icons-boostrap/search.svg | 3 --- images/icons-maquette-figma/Vector.png | Bin 0 -> 323 bytes index.html | 2 +- 10 files changed, 5 insertions(+), 39 deletions(-) delete mode 100644 images/icons-boostrap/cash.svg delete mode 100644 images/icons-boostrap/fire.svg delete mode 100644 images/icons-boostrap/geo-alt-fill.svg delete mode 100644 images/icons-boostrap/heart-fill.svg delete mode 100644 images/icons-boostrap/info-circle.svg delete mode 100644 images/icons-boostrap/person-raised-hand.svg delete mode 100644 images/icons-boostrap/search.svg create mode 100644 images/icons-maquette-figma/Vector.png diff --git a/css/style.css b/css/style.css index 568b6f7c..ce65d5ca 100644 --- a/css/style.css +++ b/css/style.css @@ -127,6 +127,7 @@ h3{/* Inherit all H3 margin*/ .container-icon-localisation{ /*this part is for background of the icon location and centered it*/ border-radius: 15px 0 0 15px; background-color: #F2F2F2; + border: 1px #F2F2F2 solid; } .container-icon-localisation i{ /* center icon with flexbox and fixed widht widht*/ @@ -138,6 +139,7 @@ h3{/* Inherit all H3 margin*/ color: black; /* color black for icon localisation*/ } /* Div input css*/ + .input{ text-align: center; height: 46px; @@ -390,9 +392,10 @@ li{/* Put Gap btw each listes*/ /* filter CSS */ .filter-bar{/* display flex replace by grid */ display: grid; + width: 668px; /* fixed the width */ grid-template-columns: 1fr 1fr 1fr 1fr; /* 4 column with egal widht */ grid-template-rows: repeat(2, auto); /* 3 automatic height lines */ - gap: 10px; /* Spacing between elements */ + gap: 20px; /* Spacing between elements */ margin-top: 20px; } @@ -496,19 +499,6 @@ li{/* Put Gap btw each listes*/ .headline h2{ margin-bottom: 10px; /*make space btw H2 and P from the nav*/ } -.icon-location{ /* this part is for the icon side */ - width: 14px; - height: 18px; -} -.container-icon-location{ /*this part is for background of the icon location and center it*/ - width: 50px; - height: 49px; - border-radius: 15px 0 0 15px; - background-color: #F2F2F2; - display: flex; - justify-content: center; - align-items: center; -} /* Div input css*/ .input{ diff --git a/images/icons-boostrap/cash.svg b/images/icons-boostrap/cash.svg deleted file mode 100644 index 525554af..00000000 --- a/images/icons-boostrap/cash.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/images/icons-boostrap/fire.svg b/images/icons-boostrap/fire.svg deleted file mode 100644 index e1f50085..00000000 --- a/images/icons-boostrap/fire.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/images/icons-boostrap/geo-alt-fill.svg b/images/icons-boostrap/geo-alt-fill.svg deleted file mode 100644 index 7307b778..00000000 --- a/images/icons-boostrap/geo-alt-fill.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/images/icons-boostrap/heart-fill.svg b/images/icons-boostrap/heart-fill.svg deleted file mode 100644 index 77b3786b..00000000 --- a/images/icons-boostrap/heart-fill.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/images/icons-boostrap/info-circle.svg b/images/icons-boostrap/info-circle.svg deleted file mode 100644 index 6de62380..00000000 --- a/images/icons-boostrap/info-circle.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/images/icons-boostrap/person-raised-hand.svg b/images/icons-boostrap/person-raised-hand.svg deleted file mode 100644 index ca2167b8..00000000 --- a/images/icons-boostrap/person-raised-hand.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/images/icons-boostrap/search.svg b/images/icons-boostrap/search.svg deleted file mode 100644 index 9798fc43..00000000 --- a/images/icons-boostrap/search.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/images/icons-maquette-figma/Vector.png b/images/icons-maquette-figma/Vector.png new file mode 100644 index 0000000000000000000000000000000000000000..8503715b4de3b33e694a16ec03e84738888d0246 GIT binary patch literal 323 zcmeAS@N?(olHy`uVBq!ia0vp^f*{Pn1|+R>-G2co&H|6fVg?3oVGw3ym^DWND9BhG zC5RRybS_MQky28dAO?e&70%^VfB3m z`uy**7&Q4erxY{YS<2w18Y^Vk{A$HT&TT9LmDh9R_}@h{o-)p6Ir1vuf~?k|uh+#Y z>l*HhqroyZpXw?x|{OI)Yxt;+tVwFe)u|6o0|R_54i z`6t}pECXim6fsG@Q~2+th|R>iKQ5g)|JuS#qad>_Kx-5CiG%x-CMX-rFKxQCrRT~e RSD+smJYD@<);T3K0RR%Nd9wfj literal 0 HcmV?d00001 diff --git a/index.html b/index.html index ce761f1f..e21ff6ae 100644 --- a/index.html +++ b/index.html @@ -36,7 +36,7 @@

Trouvez votre hébergement pour des vacances de - +

Filtres

From 1f4ba66b3c7487d2fee39923f21188a61d46210b Mon Sep 17 00:00:00 2001 From: Quentin Della mattia Date: Mon, 11 Mar 2024 14:41:56 +0800 Subject: [PATCH 35/50] Ajout d'un display flex partie barre de recherche et modification du width du button de recherche --- css/style.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index ce65d5ca..23f264b6 100644 --- a/css/style.css +++ b/css/style.css @@ -479,14 +479,16 @@ li{/* Put Gap btw each listes*/ } .search-bar{ - width: 300px;/*Ajust the widht*/ + width: 335px;/*Ajust the widht*/ border: solid 2px #F2F2F2; border-radius: 25px; + display: flex; + justify-content: space-between;/* Add display flex, like that, all tag take all width */ } .search-button { /* Use an icon image as a background*/ - background-image: url(/images/icons-boostrap/search.svg); + background-image: url(/images/icons-maquette-figma/Vector.png); /* Center the icon horizontally and vertically in the button */ background-position: center; background-repeat: no-repeat; From 70e02098a85942d771ab77d225cc135851c17401 Mon Sep 17 00:00:00 2001 From: Quentin Della mattia Date: Mon, 11 Mar 2024 14:50:47 +0800 Subject: [PATCH 36/50] Modification du css screen phone partie Filtre changement du width plus gap --- css/style.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/css/style.css b/css/style.css index 23f264b6..c2b8297e 100644 --- a/css/style.css +++ b/css/style.css @@ -517,11 +517,12 @@ li{/* Put Gap btw each listes*/ /****** Filtres CSS ************/ .filter-bar{/* Add one more ROWS and delete one column*/ + width: 100%; /* replace widht= 668px of tab version, from width=100%, like that, the width auto adjust*/ display: grid; grid-template-columns: 1fr 1fr; /* Two columns of equal width */ grid-template-rows: repeat(3, auto); /* Three automatic height lines */ - gap: 10px; /* Spacing between elements */ - margin-top: 20px; + gap: 20px; /* Spacing between elements */ + margin-top: 35px; } .grid-adjust{ @@ -536,8 +537,7 @@ li{/* Put Gap btw each listes*/ .info-bar{ display: flex; align-items: center; - gap: 10px; - margin-top: 20px; + gap: 10px } .information{ font-size: 16px; From c92810f30532fcd63ad2d0d66f386c935191b9f8 Mon Sep 17 00:00:00 2001 From: Quentin Della mattia Date: Mon, 11 Mar 2024 14:59:11 +0800 Subject: [PATCH 37/50] =?UTF-8?q?d=C3=A9finition=20du=20largeur=20minimun?= =?UTF-8?q?=20pour=20g=C3=A9rer=20les=20plus=20petits=20=C3=A9crans?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index c2b8297e..de0dbdf0 100644 --- a/css/style.css +++ b/css/style.css @@ -21,7 +21,8 @@ body { display: flex; justify-content: center; flex-direction: column; - max-width: 1440px; + max-width: 1440px;/* maximum width at 1440 px to correctly handle screens with high resolution */ + min-width: 320px; /* minimum width of 320px to correctly handle screens with low resolution */ margin: inherit; } @@ -444,7 +445,7 @@ li{/* Put Gap btw each listes*/ } /* Small devices (phones, less than 768px) */ -@media (max-width: 768px) { +@media (max-width: 768px){ /* ... */ .main-container{ /* Inherit padding make the main no padding */ padding: 0%; From f0bcd5aa8f1d03edc94c9b0b949fa54a8cfe84f4 Mon Sep 17 00:00:00 2001 From: Quentin Della mattia Date: Mon, 11 Mar 2024 15:06:54 +0800 Subject: [PATCH 38/50] changement de toutes les classes populaires en Anglais populares --- css/style.css | 48 ++++++++++++++++++++++++------------------------ index.html | 8 ++++---- 2 files changed, 28 insertions(+), 28 deletions(-) diff --git a/css/style.css b/css/style.css index de0dbdf0..d528f3e1 100644 --- a/css/style.css +++ b/css/style.css @@ -225,12 +225,12 @@ h3{/* Inherit all H3 margin*/ } /****** Hebergements And Populaires *******************************************/ -.hebergements-and-populaires { +.hebergements-and-populares { display: flex; justify-content: space-between; } -.hebergements-and-populaires section { +.hebergements-and-populares section { background-color: var(--main-bg-color); border-radius: 20px; padding: 30px; @@ -281,30 +281,30 @@ section .hebergements-card-section-two{ .height-adujst{ height: 100%; } -/****** Populaires **********************************************************************************/ -.populaires { +/********************* populares CSS **********************************************************************************/ +.populares { width: 32%; } -.populaires-title { +.populares-title { display: flex; justify-content: space-between; align-items: center; } -.populaires-cards .card { +.populares-cards .card { display: flex; margin-top: 33px; } -.populaires-cards img { +.populares-cards img { width: 33%; height: 136px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; } -.populaires-cards .card-content { +.populares-cards .card-content { width: 67%; padding-left: 15px; display: flex; @@ -313,12 +313,12 @@ section .hebergements-card-section-two{ box-sizing: border-box; } -.populaires-cards .card-title { +.populares-cards .card-title { margin-top: 10px; margin-bottom: 4px; } -.populaires-cards { +.populares-cards { margin: 0; } .card-subtitle{ @@ -327,7 +327,7 @@ section .hebergements-card-section-two{ font-size: 16px; line-height: 18.78px; } -.populaires-cards .card-rating { +.populares-cards .card-rating { margin-bottom: 5px; } @@ -405,7 +405,7 @@ li{/* Put Gap btw each listes*/ } /* *************** Hebergement and Popular CSS ***********************/ - .hebergements-and-populaires { + .hebergements-and-populares { flex-direction: column; } @@ -413,26 +413,26 @@ li{/* Put Gap btw each listes*/ width: 100%; } - .populaires { + .populares { width: 100%; margin-top: 50px; } - .populaires-cards { + .populares-cards { display: flex; flex-direction: row; justify-content: space-between; } - .populaires-cards a { + .populares-cards a { width: 30%; } - .populaires-cards .card-title { + .populares-cards .card-title { font-size: 14px; } - .populaires-cards .card-subtitle { + .populares-cards .card-subtitle { font-size: 13px; } @@ -548,11 +548,11 @@ li{/* Put Gap btw each listes*/ } /****** Hebergements And Populaires *******************************************/ -.hebergements-and-populaires { /* direction changement*/ +.hebergements-and-populares { /* direction changement*/ flex-direction: column-reverse; } -.hebergements-and-populaires section{/* Delete section content radius + background-color */ +.hebergements-and-populares section{/* Delete section content radius + background-color */ border-radius: 0px; background-color: inherit; } @@ -570,23 +570,23 @@ section .hebergements-card-section-one, .hebergements-card-section-two {/* Make /*Delete widht 32% from class populaire for phone display*/ -.hebergements-and-populaires .populaires {/* give back the color to populaires section */ +.hebergements-and-populares .populares {/* give back the color to populaires section */ background-color: var(--main-bg-color); } -.populaires-cards{/* card of populaires column direction with display flex */ +.populares-cards{/* card of populaires column direction with display flex */ flex-direction: column; } -.populaires-cards a{/*all card take 100% of his parent*/ +.populares-cards a{/*all card take 100% of his parent*/ width: 100%; } -.populaires-cards img {/* image same height */ +.populares-cards img {/* image same height */ height: 146px; } -.populaires-cards .card-content { +.populares-cards .card-content { padding: 0%; } diff --git a/index.html b/index.html index e21ff6ae..99e5e7e9 100644 --- a/index.html +++ b/index.html @@ -64,7 +64,7 @@

Nos pépites

-
+

Hébergements à Marseille

@@ -194,12 +194,12 @@

Auberge Le Panier

-
-
+
+

Les plus populaires

-
+
Image de la chambre d'hôtel montrant un lit From 979f18b8923ac9a2243b21d02862c72d13ee70d0 Mon Sep 17 00:00:00 2001 From: Quentin Della mattia Date: Mon, 11 Mar 2024 15:13:14 +0800 Subject: [PATCH 39/50] Ajouts des ancres hebergements et activities --- index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 99e5e7e9..7a2606bb 100644 --- a/index.html +++ b/index.html @@ -20,8 +20,8 @@ logo Booki
-

Hébergements

 -

Activités

 +

Hébergements

 +

Activités