From d39a0e409c861c3158e65f4f5695f37028dc70d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ana=C3=ABl=20Penchenat?= Date: Mon, 22 Jan 2024 18:02:56 +0100 Subject: [PATCH 01/14] =?UTF-8?q?etape=201=20=C3=A0=20=C3=A9tape=204?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 26 +++++++++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 53512c75..540f75fc 100644 --- a/index.html +++ b/index.html @@ -16,8 +16,32 @@
-
+
+
+ +
+
+
+

Trouvez votre hébergement pour des vacances de rêve

+

En plein centre-ville ou en pleine nature

+
+
+ + + + +
From 03ceb39ce6d29810ef68d7df778e45a21dc29340 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ana=C3=ABl=20Penchenat?= Date: Mon, 22 Jan 2024 18:07:51 +0100 Subject: [PATCH 02/14] =?UTF-8?q?Etape=201=20=C3=A0=204?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 88 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 88 insertions(+) diff --git a/css/style.css b/css/style.css index f6c96c4d..2404135d 100644 --- a/css/style.css +++ b/css/style.css @@ -58,6 +58,94 @@ a { color: var(--main-bg-color) } +/*** Header ***/ + +nav { + display: flex; + justify-content: space-between; + align-items: center; +} + +.header { + width: 100%; + max-width: 1440px; +} + +#img_logo { + align-items: center; + width: 61px; + height: 19px; +} +.linktop { + display: flex; + align-items: flex-start; + margin-bottom: 50px; + gap: 68px; + border-top: 2px solid transparent; +} + +.linka { + padding-top: 25px; + width: 113px; + height: 35px; +} + +.linkb { + padding-top: 25px; + width: 63px; + height: 35px; +} +/*** Attention border top bleu en dessous sur la vers. mobile ****/ +.linka:hover { + color: #0065FC; + border-top:2px solid #0065FC; +} + +.linkb:hover { + color: #0065FC; + border-top:2px solid #0065FC; +} + +/******* barre de recherche Marseille, Paris ******/ +.recherche-container { + display: flex + ; +} +.rechercheA { + border: 1px solid #F2F2F2; + border-top-left-radius: 15px; + border-bottom-left-radius: 15px; + border-right: none; + width: 50px; + height: 49px; + padding: 0; +} +.fa-location-dot { + color: black; + } + +#rechercheB { + border-top: 1px solid #F2F2F2; + border-bottom: 1px solid #F2F2F2; + border-left: none; + border-right: none; + height: 48px; + text-align: center; + padding: 0; +} + +.rechercheC { + border: 1px solid #0065FC; + background-color: #0065FC; + border-top-right-radius: 15px; + border-bottom-right-radius: 15px; + border-left: none; + width: 132px; + height: 49px; + color: white; + padding: 0; +} + /****** Hebergements And Populaires ***********/ .hebergements-and-populaires { display: flex; From 55746a2116a3e37dd0c6635d2af78138409fdeff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ana=C3=ABl=20Penchenat?= Date: Tue, 23 Jan 2024 15:39:50 +0100 Subject: [PATCH 03/14] =?UTF-8?q?Etape=201=20=C3=A0=205?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 37 ++++++++++++++++++++++++++++++++----- index.html | 37 +++++++++++++++++++++++++------------ 2 files changed, 57 insertions(+), 17 deletions(-) diff --git a/css/style.css b/css/style.css index 2404135d..f46df951 100644 --- a/css/style.css +++ b/css/style.css @@ -78,22 +78,23 @@ nav { } .linktop { display: flex; - align-items: flex-start; + align-self: start; margin-bottom: 50px; gap: 68px; - border-top: 2px solid transparent; } .linka { padding-top: 25px; - width: 113px; - height: 35px; + width: 112px; + height: 19px; + border-top: 2px solid transparent; } .linkb { padding-top: 25px; width: 63px; - height: 35px; + height: 19px; + border-top: 2px solid transparent; } /*** Attention border top bleu en dessous sur la vers. mobile ****/ .linka:hover { @@ -146,6 +147,32 @@ nav { padding: 0; } +/****** Filtres ******/ + +.filtre-container { + display: flex; + align-items: center; + gap: 15px; + height: 50px; +} + +.filtre-buttons> button { + height: 50px; + border: 2px solid #D9D9D9; + border-radius: 25px; + background-color: white; + font-size: 17px; + padding: 4px 19px; +} + +.filtre-buttons> button> i { + padding-right: 8px; +} + +.filtre-buttons> button:hover { + background-color: #DEEBFF; +} + /****** Hebergements And Populaires ***********/ .hebergements-and-populaires { display: flex; diff --git a/index.html b/index.html index 540f75fc..351ec6c3 100644 --- a/index.html +++ b/index.html @@ -29,18 +29,31 @@
-

Trouvez votre hébergement pour des vacances de rêve

-

En plein centre-ville ou en pleine nature

-
-
- - - - +
+
+

Trouvez votre hébergement pour des vacances de rêve

+

En plein centre-ville ou en pleine nature

+
+
+ + + + +
+
+

Filtre

+
+ + + + +
+
+
From 3a7153f0dfac398a02052f7ecbd0da69f62d5e2c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ana=C3=ABl=20Penchenat?= Date: Tue, 23 Jan 2024 17:47:32 +0100 Subject: [PATCH 04/14] =?UTF-8?q?etape=201=20=C3=A0=205?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 35 +++++++++++++++++++++++++++++++---- index.html | 10 +++++++--- 2 files changed, 38 insertions(+), 7 deletions(-) diff --git a/css/style.css b/css/style.css index f46df951..ff61cb73 100644 --- a/css/style.css +++ b/css/style.css @@ -58,7 +58,7 @@ a { color: var(--main-bg-color) } -/*** Header ***/ +/********* Header *********/ nav { display: flex; @@ -96,7 +96,7 @@ nav { height: 19px; border-top: 2px solid transparent; } -/*** Attention border top bleu en dessous sur la vers. mobile ****/ +/*************** Attention border top bleu en dessous sur la vers. mobile ****************/ .linka:hover { color: #0065FC; border-top:2px solid #0065FC; @@ -107,7 +107,14 @@ nav { border-top:2px solid #0065FC; } -/******* barre de recherche Marseille, Paris ******/ +/********** Search Main ***********/ + +.search-main { + display: flex; + flex-direction: column; +} + +/******************** barre de recherche Marseille, Paris ***********************/ .recherche-container { display: flex ; @@ -147,10 +154,11 @@ nav { padding: 0; } -/****** Filtres ******/ +/******************* Filtres **********************/ .filtre-container { display: flex; + flex-wrap: wrap; align-items: center; gap: 15px; height: 50px; @@ -173,7 +181,26 @@ nav { background-color: #DEEBFF; } +/************* Info *****************/ + +.infogrames { + display: flex; + align-items: center; + gap: 6px; +} + +.fa-info { + display: flex; + justify-content: center; + align-items: center; + border: 2px solid #D9D9D9; + border-radius: 100%; + width: 24px; + height: 24px; +} + /****** Hebergements And Populaires ***********/ + .hebergements-and-populaires { display: flex; justify-content: space-between; diff --git a/index.html b/index.html index 351ec6c3..2cb367f9 100644 --- a/index.html +++ b/index.html @@ -29,15 +29,15 @@
-
+

Trouvez votre hébergement pour des vacances de rêve

En plein centre-ville ou en pleine nature

-
+
- +
-

Filtre

+

Filtre

@@ -60,8 +55,129 @@

Filtre

-
- +
+
+

Hébergements à Marseille

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

Hôtel Le soleil du matin

+

Nuit à partir de 128€

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

Hôtel Le soleil du matin

+

Nuit à partir de 128€

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

Hôtel Le soleil du matin

+

Nuit à partir de 128€

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

Hôtel Le soleil du matin

+

Nuit à partir de 128€

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

Hôtel Le soleil du matin

+

Nuit à partir de 128€

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

Hôtel Le soleil du matin

+

Nuit à partir de 128€

+
+
+ + + + + + Note de 4 sur 5 +
+
+
+ +
+
+

Afficher plus

+
From 27fed19e5bbf4d70a26e80ad28f29a2985fca9d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ana=C3=ABl=20Penchenat?= Date: Wed, 24 Jan 2024 20:44:44 +0100 Subject: [PATCH 06/14] =?UTF-8?q?Etape=201=20=C3=A0=207?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 26 ++- index.html | 587 +++++++++++++++++++++++++++++--------------------- 2 files changed, 368 insertions(+), 245 deletions(-) diff --git a/css/style.css b/css/style.css index 764edb6c..88f2789e 100644 --- a/css/style.css +++ b/css/style.css @@ -48,6 +48,11 @@ a { .card-title { font-size: 16px; + margin: 0; +} + +.card-subtitle { + margin: 0; } .euro { @@ -235,7 +240,7 @@ nav { .hebergements-cards img { border-radius: 20px 20px 0 0; width: 99.5%; - height: 136px; + height: 55%; } .hebergements-cards .card { @@ -244,10 +249,27 @@ nav { height: 200px; } -.hebergements-card .card-content { +.hebergements-cards .card-title { + margin-top: 8px; +} + +.hebergements-cards .card-subtitle { + margin-top: 10px; +} + +.hebergements-cards .card-content { display: flex; flex-direction: column; + margin-left: 10px; +} +.hebergements-cards .card-rating{ + margin-top: 5px; +} + +.hebergements-show> p{ + margin: 0; + margin-top: 25px; } /****** Populaires ***********/ diff --git a/index.html b/index.html index a3b39ca4..cac20e3a 100644 --- a/index.html +++ b/index.html @@ -1,253 +1,354 @@ - - - - + + + Booki - - - - - - + + + + + + - +
-
-
- +
+
+
-
+ +
+
+
+
+
-
-
-

Trouvez votre hébergement pour des vacances de rêve

-

En plein centre-ville ou en pleine nature

-
-
- - - -
-
-

Filtre

-
- - - - -
-
-
- -

Plus de 500 logements sont disponibles dans cette ville

-
-
+

Trouvez votre hébergement pour des vacances de rêve

+

En plein centre-ville ou en pleine nature

+
+
+ + + +
+
+

Filtre

+
+ + + + +
+
+
+ +

Plus de 500 logements sont disponibles dans cette ville

-
-
-
-

Hébergements à Marseille

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

Hôtel Le soleil du matin

-

Nuit à partir de 128€

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

Hôtel Le soleil du matin

-

Nuit à partir de 128€

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

Hôtel Le soleil du matin

-

Nuit à partir de 128€

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

Hôtel Le soleil du matin

-

Nuit à partir de 128€

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

Hôtel Le soleil du matin

-

Nuit à partir de 128€

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

Hôtel Le soleil du matin

-

Nuit à partir de 128€

-
-
- - - - - - Note de 4 sur 5 -
-
-
- -
-
-

Afficher plus

-
-
-
-
-

Les plus populaires

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

Hôtel Le soleil du matin

-

Nuit à partir de 128€

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

Chambres d’hôtes Au cœur de l’eau

-

Nuit à partir de 71€

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

Hôtel Bleu et Blanc

-

Nuit à partir de 68€

-
-
- - - - - - Note de 4 sur 5 -
-
-
- -
-
+
+
+
+
+
+

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

Hôtel La Canebière

+

+ Nuit à partir de 25€ +

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

Hôtel Le Panier

+

+ Nuit à partir de 23€ +

+
+
+ + + + + + Note de 4 sur 5 +
+
+
+ +
+
+

Afficher plus

+
+
+
+
+

Les plus populaires

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

Hôtel Le soleil du matin

+

+ Nuit à partir de 128€ +

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

+ Chambres d’hôtes Au cœur de l’eau +

+

+ Nuit à partir de 71€ +

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

Hôtel Bleu et Blanc

+

+ Nuit à partir de 68€ +

+
+
+ + + + + + Note de 4 sur 5 +
+
+
+ +
+
+
+
+
+

Activités à Marseille

+
+
+
+ Images du vieux-port +
+
+

Vieux-port

+
+
+
+
+
- - - \ No newline at end of file + + From 84c35d839564bdc15a27e1456a0e9e416779bb8f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ana=C3=ABl=20Penchenat?= Date: Thu, 25 Jan 2024 15:07:18 +0100 Subject: [PATCH 07/14] =?UTF-8?q?Etape=201=20=C3=A0=208?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 65 +++++++++++++++++++++++++++++++++++++++++++++++++-- index.html | 62 ++++++++++++++++++++++++++++++++++++++---------- 2 files changed, 113 insertions(+), 14 deletions(-) diff --git a/css/style.css b/css/style.css index 88f2789e..6605751b 100644 --- a/css/style.css +++ b/css/style.css @@ -42,10 +42,21 @@ a { filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1)); } +.card-two { + background-color: white; + border-radius: 20px; + padding-bottom: 5px; + filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1)); +} + .card img { object-fit: cover; } +.card-two img { + object-fit: cover; +} + .card-title { font-size: 16px; margin: 0; @@ -119,6 +130,22 @@ nav { flex-direction: column; } +.search-main h1 { + margin-bottom: 0; +} + +.search-main p { + margin-top: 5px; + margin-bottom: 30px; +} + +.search-main .recherche-container { + margin-bottom: 20px; +} + +.search-main .filtre-container { + margin-bottom: 20px; +} /******************** barre de recherche Marseille, Paris ***********************/ .recherche-container { display: flex @@ -193,7 +220,7 @@ nav { .infogrames { display: flex; - align-items: center; + align-items: last baseline; gap: 6px; } @@ -212,6 +239,7 @@ nav { display: flex; justify-content: space-between; gap: 3%; + margin-bottom: 3%; } .hebergements-and-populaires section { @@ -267,7 +295,7 @@ nav { margin-top: 5px; } -.hebergements-show> p{ +.hebergements-show> h3{ margin: 0; margin-top: 25px; } @@ -317,7 +345,40 @@ nav { margin-bottom: 5px; } +/***** Activity Marseille *******/ +.activity { + width: 100%; +} + +.activity-title { + display: flex; + align-items: center; + margin: 3%; + margin-bottom: 0; +} + +.activity-cards { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin-left: 3%; +} + +.activity-cards .card-two { + margin-top: 33px; + width: 300px; +} +.activity-cards img { + width: 100%; + height: 400px; + border-top-left-radius: 20px; + border-top-right-radius: 20px; +} + +.activity-cards .card-title { + padding: 16px; +} /* Le code ci-dessous correspond à la version responsive uniquement */ diff --git a/index.html b/index.html index cac20e3a..3896ce9b 100644 --- a/index.html +++ b/index.html @@ -34,7 +34,7 @@
-
+

Trouvez votre hébergement pour des vacances de rêve

@@ -239,7 +239,7 @@

Hôtel Le Panier

-

Afficher plus

+

Afficher plus

@@ -335,17 +335,55 @@

Hôtel Bleu et Blanc

-
-

Activités à Marseille

-
-
-
- Images du vieux-port -
-
-

Vieux-port

+
+

Activités à Marseille

+
+
+ +
+ Images du vieux-port +
+

Vieux-port

-
+ + + +
+ Images du vieux-port +
+

Fort de Pomègues

+
+
+ + +
+ Images du vieux-port +
+

Parc national des Calanques

+
+
+ + +
+ Images du vieux-port +
+

Notre-Dame-de-la-Garde

+
+
+ +
From 44a8086cbabe06c43476b97dbdf02dc4bb7d5980 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ana=C3=ABl=20Penchenat?= Date: Thu, 25 Jan 2024 17:40:41 +0100 Subject: [PATCH 08/14] =?UTF-8?q?Etape=201=20=C3=A0=209?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 68 +++++++++++++++++++++++++++++++++++++++++++++++---- index.html | 31 +++++++++++++++++++++-- 2 files changed, 92 insertions(+), 7 deletions(-) diff --git a/css/style.css b/css/style.css index 6605751b..c3937d11 100644 --- a/css/style.css +++ b/css/style.css @@ -74,6 +74,15 @@ a { color: var(--main-bg-color) } +ul { + list-style-type: none; + padding: 0; +} + +h1 { + font-size: 22px; +} + /********* Header *********/ nav { @@ -147,10 +156,7 @@ nav { margin-bottom: 20px; } /******************** barre de recherche Marseille, Paris ***********************/ -.recherche-container { - display: flex - ; -} + .rechercheA { border: 1px solid #F2F2F2; border-top-left-radius: 15px; @@ -347,7 +353,7 @@ nav { /***** Activity Marseille *******/ .activity { - width: 100%; + width: 98%; } .activity-title { @@ -380,6 +386,27 @@ nav { padding: 16px; } +/***** footer ********/ + +.search-footer { + display: flex; + flex-direction: row; + justify-content: space-between; + padding-right: 200px; + padding-left: 15px; + margin-top: 50px; + background-color: #F2F2F2; +} + +.search-footer h2 { + font-size: medium; + margin-bottom: 10px; +} + +.search-footer li { + margin-bottom: 10px; +} + /* Le code ci-dessous correspond à la version responsive uniquement */ @@ -422,6 +449,37 @@ nav { .populaires-cards .card-subtitle { font-size: 13px; } + + .activity { + width: 100%; + } + + .activity-cards { + display: flex; + flex-direction: row; + justify-content: space-between; + } + + .activity-cards .card-two { + width: 200px; + } + + .activity-cards .parc-national> h3 { + padding: 20px 10px 20px 10px; + } + + .activity-cards .card-title { + display: flex; + font-size: small; + padding: 20px; + } + + .activity-cards img { + height: 200px; + } + + + } /* Small devices (phones, less than 768px) */ diff --git a/index.html b/index.html index 3896ce9b..2c37dd46 100644 --- a/index.html +++ b/index.html @@ -368,8 +368,10 @@

Fort de Pomègues

alt="Images du vieux-port" />
+

Parc national des Calanques

-
+
+
@@ -386,7 +388,32 @@

Notre-Dame-de-la-Garde

-
+
+
+
+

À propos

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

Nos hébergements

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

Assitance

+
    +
  • Centre d'aide
    • +
  • Nous contacter
    • +
+
+
+
From ecc12e741005df3a593bda206b55ddf453fedc5d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ana=C3=ABl=20Penchenat?= Date: Sat, 27 Jan 2024 19:50:14 +0100 Subject: [PATCH 09/14] =?UTF-8?q?Etape=201=20=C3=A0=2010?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 166 ++++++++++++---- index.html | 521 ++++++++++++++++++++++++++++++-------------------- 2 files changed, 434 insertions(+), 253 deletions(-) diff --git a/css/style.css b/css/style.css index c3937d11..4b3268fd 100644 --- a/css/style.css +++ b/css/style.css @@ -21,6 +21,7 @@ body { .main-container { width: 100%; max-width: 1440px; + min-width: 320px; padding: 0 50px; box-sizing: border-box; } @@ -244,8 +245,8 @@ nav { .hebergements-and-populaires { display: flex; justify-content: space-between; - gap: 3%; margin-bottom: 3%; + gap: 3%; } .hebergements-and-populaires section { @@ -257,58 +258,74 @@ nav { /****** Hebergements ***********/ .hebergements { - width: 65%; + width: 70%; } .hebergements-title { - display: flex; align-items: center; } -.hebergements-cards { +.hebergements-cards .card { display: flex; - flex-wrap: wrap; - justify-content: space-between; + flex-direction: column; + margin-top: 33px; + width: 100%; } .hebergements-cards img { - border-radius: 20px 20px 0 0; - width: 99.5%; - height: 55%; + border-top-left-radius: 20px; + border-top-right-radius: 20px; + width: 100%; + height: 150px; } -.hebergements-cards .card { - margin-top: 33px; - width: 250px; - height: 200px; +.hebergements-line-top { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + gap: 30px; +} + +.hebergements-line-bottom { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + gap: 30px; } -.hebergements-cards .card-title { - margin-top: 8px; +.flex1 { + flex: 1; } -.hebergements-cards .card-subtitle { - margin-top: 10px; +.flex2 { + flex: 1; } .hebergements-cards .card-content { + width: 100%; + margin-left: 5%; display: flex; flex-direction: column; - margin-left: 10px; + justify-content: space-between; + box-sizing: border-box; } -.hebergements-cards .card-rating{ - margin-top: 5px; +.hebergements-cards .card-title { + margin-top: 8px; + margin-bottom: 4px; } -.hebergements-show> h3{ - margin: 0; - margin-top: 25px; +.hebergements-cards .card-subtitle { + margin: 0; +} + +.hebergements-cards .card-rating{ + margin-top: 5px; } /****** Populaires ***********/ .populaires { - width: 55%; + width: 37%; } .populaires-title { @@ -365,14 +382,17 @@ nav { .activity-cards { display: flex; - flex-wrap: wrap; - justify-content: space-between; - margin-left: 3%; + flex-direction: row; + gap: 30px; } .activity-cards .card-two { + flex-wrap: nowrap; + justify-content: space-between; + flex-direction: column; + margin-left: 3%; margin-top: 33px; - width: 300px; + width: 100%; } .activity-cards img { @@ -383,7 +403,14 @@ nav { } .activity-cards .card-title { - padding: 16px; + display: flex; + align-items: center; + height: 30px; + margin: 10px; +} + +.flex4 { + flex: 1; } /***** footer ********/ @@ -459,30 +486,87 @@ nav { flex-direction: row; justify-content: space-between; } + + .activity-cards img { + height: 200px; + } - .activity-cards .card-two { - width: 200px; +} + +/* Small devices (phones, less than 768px) */ +@media (max-width: 767.98px) { + .main-container { + padding: 0; + } + + .hebergement { + background-color: #0065FC; } - .activity-cards .parc-national> h3 { - padding: 20px 10px 20px 10px; + .hebergements-line-top { + flex-direction: column; + gap: 2px; + } + + .hebergements-line-bottom { + flex-direction: column; + gap: 2px; } - .activity-cards .card-title { + .populaires-cards { display: flex; - font-size: small; - padding: 20px; + flex-direction: column; + width: 330%; + } + + .activity-cards { + flex-direction: column; } - .activity-cards img { - height: 200px; + body { + margin: 0; } + .logo1 { + display: flex; + justify-content: center; + align-items: center; + margin: 20px; + padding-bottom: 10px; + } + .linktop { + justify-content: space-evenly; + padding-bottom: 0px; + } -} -/* Small devices (phones, less than 768px) */ -@media (max-width: 767.98px) { + .linka { + border: 0; + padding: 0; + border-bottom: 2px solid transparent; + padding-bottom: 20px; + } + + .linkb { + border: 0; + padding: 0; + border-bottom: 2px solid transparent; + padding-bottom: 20px; + } + + .linka:hover { + border: 0; + padding: 0; + padding-bottom: 20px; + border-bottom: 2px solid #0065FC; + } + + .linkb:hover { + border: 0; + padding: 0; + padding-bottom: 20px; + border-bottom: 2px solid #0065FC; + /* ... */ } \ No newline at end of file diff --git a/index.html b/index.html index 2c37dd46..ef209eb6 100644 --- a/index.html +++ b/index.html @@ -24,8 +24,10 @@
+
Hébergements Activités @@ -75,168 +77,256 @@

Filtre

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

Hôtel La Canebière

-

- Nuit à partir de 25€ -

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

Hôtel Le Panier

-

- Nuit à partir de 23€ -

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

Hôtel de la mer

+

+ Nuit à partir de 46€ +

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

Hôtel La Canebière

+

+ Nuit à partir de 25€ +

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

Hôtel Le Panier

+

+ Nuit à partir de 23€ +

+
+
+ + + + + + Note de 4 sur 5 +
+
+
+ +
+

Afficher plus

@@ -339,6 +429,7 @@

Hôtel Bleu et Blanc

Activités à Marseille

+
Vieux-port
+
+
-
- Images du vieux-port -
-

Fort de Pomègues

-
-
- - - + +
+
+ +
+ Images du vieux-port +
+

Parc national des Calanques

+
+
+ +
+
+ +
+ Images du vieux-port +
+

Notre-Dame-de-la-Garde

+
+
+ +
+ From df4199712d74e7a63f33cb164242587de1b43dcf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ana=C3=ABl=20Penchenat?= Date: Tue, 30 Jan 2024 10:53:16 +0100 Subject: [PATCH 10/14] =?UTF-8?q?Etape=201=20=C3=A0=2010?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 150 ++++++++++++++++++++++++++++++++++---------------- index.html | 7 ++- 2 files changed, 107 insertions(+), 50 deletions(-) diff --git a/css/style.css b/css/style.css index 4b3268fd..a495bb84 100644 --- a/css/style.css +++ b/css/style.css @@ -40,14 +40,18 @@ a { background-color: white; border-radius: 20px; padding: 5px; - filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1)); + filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.1)); } .card-two { background-color: white; border-radius: 20px; padding-bottom: 5px; - filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1)); + filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.1)); +} + +.card3 { + filter: drop-shadow(0px 3px 3px black) } .card img { @@ -101,10 +105,10 @@ nav { align-items: center; width: 61px; height: 19px; + } .linktop { display: flex; - align-self: start; margin-bottom: 50px; gap: 68px; } @@ -123,6 +127,7 @@ nav { border-top: 2px solid transparent; } /*************** Attention border top bleu en dessous sur la vers. mobile ****************/ + .linka:hover { color: #0065FC; border-top:2px solid #0065FC; @@ -211,6 +216,11 @@ nav { margin: 4px; } + +.magnifying-glass { + display: none; +} + .title-filter { margin-right: 4px; } @@ -446,6 +456,7 @@ nav { .hebergements { width: 100%; + background-color: #F2F2F2; } .populaires { @@ -495,78 +506,121 @@ nav { /* Small devices (phones, less than 768px) */ @media (max-width: 767.98px) { - .main-container { - padding: 0; + body { + margin: 0; } - .hebergement { - background-color: #0065FC; + .main-container { + padding: 0; + min-width: 320px; } - .hebergements-line-top { + nav { + align-items: center; flex-direction: column; - gap: 2px; } - .hebergements-line-bottom { - flex-direction: column; - gap: 2px; + .linktop { + width: 100%; + display: flex; + gap: 0px; } - .populaires-cards { - display: flex; - flex-direction: column; - width: 330%; + .linktop> a { + border-bottom: 2px solid #F2F2F2; + width: 50%; + text-align: center; + padding: 0 0 20px 0; + border-top: none; } - .activity-cards { - flex-direction: column; + .linktop> a:hover { + border-bottom: 2px solid #0065FC; + border-top: none; } - - body { + + h1 { margin: 0; } + + .logo1 { + padding: 5%; + margin: 0 auto; + margin-bottom: 8px; + } + + .rechercheC { + display: none; + } + + .recherche-container { + display: flex; + justify-content: center; + align-items: center; + } - .logo1 { + .magnifying-glass { display: flex; + border: 1px solid #0065FC; + background-color: #0065FC; + border-radius: 15px; + border-left: none; + width: 49px; + height: 49px; + padding: 0; justify-content: center; align-items: center; - margin: 20px; - padding-bottom: 10px; + filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1)); } - - .linktop { - justify-content: space-evenly; - padding-bottom: 0px; + + .fa-magnifying-glass { + color: white; + } + .filtre-buttons> button { + + } - .linka { - border: 0; - padding: 0; - border-bottom: 2px solid transparent; - padding-bottom: 20px; + .hebergements-and-populaires section:nth-child(1) { + background: none; } - .linkb { - border: 0; - padding: 0; - border-bottom: 2px solid transparent; - padding-bottom: 20px; + + .hebergements-and-populaires { + flex-direction: column-reverse; } - .linka:hover { - border: 0; - padding: 0; - padding-bottom: 20px; - border-bottom: 2px solid #0065FC; + .hebergements-and-populaires section { + border-radius: 0; } - .linkb:hover { - border: 0; - padding: 0; - padding-bottom: 20px; - border-bottom: 2px solid #0065FC; - + .hebergements-line-top { + flex-direction: column; + gap: 2px; + } + + .hebergements-line-bottom { + flex-direction: column; + gap: 2px; + } + + .populaires-cards { + flex-direction: column; + } + + .activity-cards { + flex-direction: column; + padding-right: 7%; + padding-left: 4%; + } + + .first-container { + margin-left: 20px; + } + + .search-footer { + flex-direction: column; + } /* ... */ } \ No newline at end of file diff --git a/index.html b/index.html index ef209eb6..fee9bcf4 100644 --- a/index.html +++ b/index.html @@ -24,10 +24,10 @@
+
Hébergements Activités @@ -53,6 +53,9 @@

Trouvez votre hébergement pour des vacances de rêve

placeholder="Marseille, Paris" /> +
+ +

Filtre

From f39369cf728f012712c3932a47a9db8a41924357 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ana=C3=ABl=20Penchenat?= Date: Tue, 30 Jan 2024 11:27:27 +0100 Subject: [PATCH 11/14] =?UTF-8?q?Etape=201=20=C3=A0=2010?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 20 ++++++++++++++++++-- index.html | 5 +++++ 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index a495bb84..94d26ba9 100644 --- a/css/style.css +++ b/css/style.css @@ -311,6 +311,10 @@ nav { flex: 1; } +.flexp { + flex: 1; +} + .hebergements-cards .card-content { width: 100%; margin-left: 5%; @@ -344,6 +348,10 @@ nav { align-items: center; } +.populaires-cards { + gap: 3%; +} + .populaires-cards .card { display: flex; margin-top: 33px; @@ -515,6 +523,10 @@ nav { min-width: 320px; } + .first-container { + margin-right: 20px; + } + nav { align-items: center; flex-direction: column; @@ -559,6 +571,10 @@ nav { align-items: center; } + .recherche-container> input { + width: 70%; + } + .magnifying-glass { display: flex; border: 1px solid #0065FC; @@ -579,7 +595,7 @@ nav { } .filtre-buttons> button { - + width: 46%; } .hebergements-and-populaires section:nth-child(1) { @@ -611,7 +627,7 @@ nav { .activity-cards { flex-direction: column; - padding-right: 7%; + padding-right: 8%; padding-left: 4%; } diff --git a/index.html b/index.html index fee9bcf4..1154f342 100644 --- a/index.html +++ b/index.html @@ -341,6 +341,7 @@

Les plus populaires

+
Hôtel Le soleil du matin
+
+
+
+
Date: Fri, 2 Feb 2024 00:19:29 +0100 Subject: [PATCH 12/14] =?UTF-8?q?Etape=201=20=C3=A0=20une1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 232 ++++++++++++++++++++++++++++++++++++++------------ index.html | 24 +++--- 2 files changed, 187 insertions(+), 69 deletions(-) diff --git a/css/style.css b/css/style.css index 94d26ba9..529807a7 100644 --- a/css/style.css +++ b/css/style.css @@ -50,10 +50,6 @@ a { filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.1)); } -.card3 { - filter: drop-shadow(0px 3px 3px black) -} - .card img { object-fit: cover; } @@ -114,14 +110,14 @@ nav { } .linka { - padding-top: 25px; + padding-top: 16px; width: 112px; height: 19px; border-top: 2px solid transparent; } .linkb { - padding-top: 25px; + padding-top: 16px; width: 63px; height: 19px; border-top: 2px solid transparent; @@ -163,6 +159,14 @@ nav { } /******************** barre de recherche Marseille, Paris ***********************/ +.recherche-container { + display: flex; +} + +.title-filter { + font-size: 18px; +} + .rechercheA { border: 1px solid #F2F2F2; border-top-left-radius: 15px; @@ -182,8 +186,8 @@ nav { border-left: none; border-right: none; height: 48px; - text-align: center; - padding: 0; + text-align: start; + padding: 0 0 0 30px; } .rechercheC { @@ -198,12 +202,29 @@ nav { padding: 0; } +.recherche-container> input { + font-size: 18px; + font-weight: bold; +} + +/* .recherche-container> ::placeholder { + font-size: 18px; + font-weight: bold; + color: black; +} */ + +.recherche-container> .rechercheC, button { + font-weight: bold; + font-size: 16px; +} + /******************* Filtres **********************/ .filtre-container { display: flex; flex-wrap: wrap; align-items: center; + width: 100%; } .filtre-buttons> button { @@ -245,7 +266,8 @@ nav { display: flex; justify-content: center; align-items: center; - border: 2px solid #D9D9D9; + font-size: 12px; + border: 1.5px solid #D9D9D9; border-radius: 100%; width: 24px; height: 24px; @@ -267,7 +289,7 @@ nav { } /****** Hebergements ***********/ -.hebergements { +.hebergement { width: 70%; } @@ -286,14 +308,14 @@ nav { border-top-left-radius: 20px; border-top-right-radius: 20px; width: 100%; - height: 150px; + height: 110px; } .hebergements-line-top { display: flex; flex-direction: row; flex-wrap: nowrap; - gap: 30px; + gap: 40px; } .hebergements-line-bottom { @@ -307,14 +329,6 @@ nav { flex: 1; } -.flex2 { - flex: 1; -} - -.flexp { - flex: 1; -} - .hebergements-cards .card-content { width: 100%; margin-left: 5%; @@ -330,16 +344,24 @@ nav { } .hebergements-cards .card-subtitle { - margin: 0; + margin-top: 10px; } .hebergements-cards .card-rating{ - margin-top: 5px; + margin-top: 3px; + margin-bottom: 3px; +} + +.hebergements-show> h3 { + display: flex; + align-items: center; + margin-bottom: 0; + margin-top: 35px; } /****** Populaires ***********/ .populaires { - width: 37%; + width: 33%; } .populaires-title { @@ -388,13 +410,13 @@ nav { /***** Activity Marseille *******/ .activity { - width: 98%; + width: 96%; + padding: 30px; } .activity-title { display: flex; align-items: center; - margin: 3%; margin-bottom: 0; } @@ -408,8 +430,7 @@ nav { flex-wrap: nowrap; justify-content: space-between; flex-direction: column; - margin-left: 3%; - margin-top: 33px; + margin-top: 10px; width: 100%; } @@ -423,8 +444,8 @@ nav { .activity-cards .card-title { display: flex; align-items: center; - height: 30px; - margin: 10px; + height: 25px; + padding: 12px 19px 12px 19px; } .flex4 { @@ -435,17 +456,20 @@ nav { .search-footer { display: flex; - flex-direction: row; - justify-content: space-between; - padding-right: 200px; - padding-left: 15px; - margin-top: 50px; + padding: 5px 0 0 20px ; + gap: 30px; background-color: #F2F2F2; + font-size: 18px; +} + +.search-footer> div { + gap: 15px; + width: 33%; + height: 163px; } .search-footer h2 { - font-size: medium; - margin-bottom: 10px; + font-size: 18px; } .search-footer li { @@ -462,8 +486,25 @@ nav { flex-direction: column; } - .hebergements { - width: 100%; + .recherche-container { + align-items: center; + } + + .filtre-container { + flex-direction: column; + } + + .filtre-container> h2 { + align-self: baseline; + } + + .filtre-buttons { + align-self: baseline; + white-space: nowrap + } + + .hebergement { + width: 98%; background-color: #F2F2F2; } @@ -489,7 +530,7 @@ nav { } .populaires-cards .card-title { - font-size: 14px; + font-size: 16px; } .populaires-cards .card-subtitle { @@ -497,19 +538,17 @@ nav { } .activity { - width: 100%; + width: 94%; } - .activity-cards { - display: flex; - flex-direction: row; - justify-content: space-between; - } - .activity-cards img { height: 200px; } + .search-footer { + font-size: 16px; + } + } /* Small devices (phones, less than 768px) */ @@ -524,11 +563,10 @@ nav { } .first-container { - margin-right: 20px; + margin-right: 16px; } nav { - align-items: center; flex-direction: column; } @@ -536,6 +574,7 @@ nav { width: 100%; display: flex; gap: 0px; + margin-bottom: 30px; } .linktop> a { @@ -544,6 +583,7 @@ nav { text-align: center; padding: 0 0 20px 0; border-top: none; + font-size: 18px; } .linktop> a:hover { @@ -553,6 +593,7 @@ nav { h1 { margin: 0; + font-size: 24px; } .logo1 { @@ -561,6 +602,15 @@ nav { margin-bottom: 8px; } + .fa-location-dot { + font-size: 18px; + } + + .rechercheA { + min-width: 50px; + height: 49px; + } + .rechercheC { display: none; } @@ -572,7 +622,9 @@ nav { } .recherche-container> input { - width: 70%; + width: 80%; + font-size: 20px; + font-weight: bold; } .magnifying-glass { @@ -580,22 +632,54 @@ nav { border: 1px solid #0065FC; background-color: #0065FC; border-radius: 15px; - border-left: none; width: 49px; height: 49px; - padding: 0; justify-content: center; align-items: center; - filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1)); + box-shadow: 0px 3px 7px grey; } .fa-magnifying-glass { color: white; + font-size: 14px; + } + + .filtre-container { + flex-direction: column; + } + .filtre-buttons { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + width: 100%; + } + + .filtre-container> h2 { + align-self: baseline; } .filtre-buttons> button { - width: 46%; + width: 46%; + padding: 0; + font-size: 14px; + font-weight: bold; + } + + .filtre-buttons> button> i { + font-size: 16px; + } + + .fa-info { + font-size: 12px; + width: 22px; + min-width: 22px; + height: 22px; + align-self: center; + } + + .infogrames> p { + margin: 0; } .hebergements-and-populaires section:nth-child(1) { @@ -609,6 +693,7 @@ nav { .hebergements-and-populaires section { border-radius: 0; + padding: 20px; } .hebergements-line-top { @@ -621,22 +706,57 @@ nav { gap: 2px; } + .card { + margin-top: 0; + } + + .populaires-cards, .hebergement .card { + margin-top: 18px; + } + + .hebergements-title { + padding-top: 18px; + } + .populaires-cards { flex-direction: column; } .activity-cards { flex-direction: column; - padding-right: 8%; - padding-left: 4%; + gap: 10px; + } + + .activity { + padding: 20px; + width: 89%; + margin-bottom: 30px; + } + + .activity-cards img { + height: 141px; + } + + .hebergements-show> h3 { + margin-top: 18px; + } + + .activity-title> h2 { + padding: 0 0 18px 0; + margin: 0; } .first-container { - margin-left: 20px; + margin-left: 14px; } .search-footer { flex-direction: column; + height: 450px; + } + + .search-footer> div { + width: 100%; } /* ... */ } \ No newline at end of file diff --git a/index.html b/index.html index 1154f342..cb113816 100644 --- a/index.html +++ b/index.html @@ -58,11 +58,9 @@

Trouvez votre hébergement pour des vacances de rêve

-

Filtre

+

Filtres

- + @@ -206,7 +204,7 @@

Hôtel Les mouettes

-
+
Hôtel de la mer
-
+
Hôtel de la mer />
-

Hôtel La Canebière

+

Auberge La Canebière

Nuit à partir de 25€

@@ -288,7 +286,7 @@

Hôtel La Canebière
-
+
Hôtel La Canebière />
-

Hôtel Le Panier

+

Auberge Le Panier

Nuit à partir de 23€

@@ -341,7 +339,7 @@

Les plus populaires

-
+
Hôtel Le soleil du matin
-
+
-
+
À propos

Nos hébergements

  • Charte qualité
    • -
  • Proposer votre Hôtel
    • +
  • Proposer votre hôtel
From 032ce1c045e12b363447114676b5dcb6317a930a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ana=C3=ABl=20Penchenat?= Date: Tue, 6 Feb 2024 11:10:49 +0100 Subject: [PATCH 13/14] =?UTF-8?q?Etape=201=20=C3=A0=2011?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 600 ++++++++++++++++++++++++++++------------------------- 1 file changed, 320 insertions(+), 280 deletions(-) diff --git a/index.html b/index.html index cb113816..1c9ec9f0 100644 --- a/index.html +++ b/index.html @@ -24,9 +24,9 @@
-

Filtres

- + @@ -80,17 +84,277 @@

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

Afficher plus

+
+ +
+
+

Les plus populaires

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

Hôtel du port

+

Hôtel Le soleil du matin

- Nuit à partir de 52€ + Nuit à partir de 128€

@@ -119,19 +383,21 @@

Hôtel du port

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

Hôtel Chez Amina

+

+ Chambres d’hôtes Au cœur de l’eau +

- Nuit à partir de 96€ + Nuit à partir de 71€

@@ -160,19 +426,19 @@

Hôtel Chez Amina

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

Hôtel Les mouettes

+

Hôtel Bleu et Blanc

- Nuit à partir de 76€ + Nuit à partir de 68€

@@ -201,294 +467,68 @@

Hôtel Les mouettes

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

Afficher plus

-
-
-
-

Les plus populaires

- -
-
-
+
+
+
+

Activités à Marseille

+
+
+
-
-
+
-
-
+
-
-
-
-
-
-

Activités à Marseille

-
-
- -
- Images du vieux-port -
-

Vieux-port

-
-
- -
-
- -
- Images du vieux-port -
-

Fort de Pomègues

-
-
- -
-
- -
- Images du vieux-port -
-

Parc national des Calanques

-
-
- -
-
- -
- Images du vieux-port -
-

Notre-Dame-de-la-Garde

-
-
- -
+ +
+ Images du vieux-port +
+

Notre-Dame-de-la-Garde

+
+
+ +
-