From ed4d0d34ad88da7ef3dfd4d0557e729acc9e587c Mon Sep 17 00:00:00 2001 From: ppxt-code Date: Tue, 26 Aug 2025 20:28:40 +0200 Subject: [PATCH 01/29] =?UTF-8?q?int=C3=A9gration=20du=20header=20(configu?= =?UTF-8?q?ration=20generale)=20(rajout=20de=20la=20configuration=20Mobile?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 84 ++++++++++++++++++++++++++++++++++++++++++++++++++- index.html | 10 +++++- 2 files changed, 92 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index f6c96c4d..c4b323fd 100644 --- a/css/style.css +++ b/css/style.css @@ -121,6 +121,56 @@ a { margin-bottom: 5px; } +/***** header ******/ +header { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +header nav ul { + display: flex; + flex-direction: row; + list-style: none; + /*gap: 68px;*/ +} +header nav ul li { + margin-left: 68px; +} +header img { + height: 19px; + padding: 30px; +} + +.header-links:hover { + color: #0065FC; +} + +.header-links { + position: relative; + color: black; +} + +.header-links::before { + content: ""; + position: absolute; + left: 0; + right: 0; + top: -16px; + /* décale la ligne vers le haut */ + height: 2px; + /* épaisseur de la ligne */ + background: #0065FC; + opacity: 0; + /* invisible par défaut */ +} + +.header-links:hover::before { + opacity: 1; + /* rend visible la ligne au hover */ +} + + @@ -163,5 +213,37 @@ a { /* Small devices (phones, less than 768px) */ @media (max-width: 767.98px) { - /* ... */ + + /***** header *****/ + header { + flex-direction: column; + align-items: center; + } + .header-links::before { + content: ""; + position: absolute; + left: 0px; + right: 0px; + top: 32px; + /* décale la ligne vers le haut */ + height: 2px; + /* épaisseur de la ligne */ + background: #0065FC; + opacity: 0; + /* invisible par défaut */ + } + header nav { + width:100%; + } + header nav ul { + padding:0; + } + header nav ul li { + margin-left: 0px; + width:100%; + } + header nav ul li a{ + display:block; + text-align:center; + } } \ No newline at end of file diff --git a/index.html b/index.html index 53512c75..6549ac5b 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,15 @@
-
+
+ Logo de Booki + +
From ffc50bf5ea7eb8e0caf9d1adf28efb106c4b8322 Mon Sep 17 00:00:00 2001 From: ppxt-code Date: Wed, 27 Aug 2025 10:03:11 +0200 Subject: [PATCH 02/29] comments for header commit --- css/style.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index c4b323fd..c6ba4704 100644 --- a/css/style.css +++ b/css/style.css @@ -146,11 +146,11 @@ header img { color: #0065FC; } +/* overline of .header-links */ .header-links { position: relative; color: black; } - .header-links::before { content: ""; position: absolute; @@ -164,7 +164,6 @@ header img { opacity: 0; /* invisible par défaut */ } - .header-links:hover::before { opacity: 1; /* rend visible la ligne au hover */ @@ -215,6 +214,7 @@ header img { @media (max-width: 767.98px) { /***** header *****/ + /* underline of .header-links */ header { flex-direction: column; align-items: center; @@ -232,6 +232,7 @@ header img { opacity: 0; /* invisible par défaut */ } + /* align header */ header nav { width:100%; } From e3575b03f93379958efc30f30db7b5dbd58c9101 Mon Sep 17 00:00:00 2001 From: ppxt-code Date: Wed, 27 Aug 2025 14:53:38 +0200 Subject: [PATCH 03/29] livraison de la searchbar de Info group (configuration generale et configuration Mobile) --- index.html | 29 +++++++++++++++++++++++------ 1 file changed, 23 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 6549ac5b..a2ce742f 100644 --- a/index.html +++ b/index.html @@ -19,13 +19,27 @@
Logo de Booki +
-
+
+
+
+

Trouvez votre hébergement

+

En plein centre ville ou en pleine nature

+
+
+ + + +
+
@@ -38,7 +52,8 @@

Les plus populaires

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

Hôtel Le soleil du matin

@@ -57,7 +72,8 @@

Hôtel Le soleil du matin
- Image de la chambre d'hôtel montrant un lit + Image de la chambre d'hôtel montrant un lit

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

@@ -76,7 +92,8 @@

Chambres d’hôtes Au cœur de l’eau
- Image de la chambre d'hôtel montrant un lit + Image de la chambre d'hôtel montrant un lit

Hôtel Bleu et Blanc

From 3d35a09adede7b3e45e793e000aef626d0c1c204 Mon Sep 17 00:00:00 2001 From: ppxt-code Date: Wed, 27 Aug 2025 14:53:47 +0200 Subject: [PATCH 04/29] livraison de la searchbar de Info group (configuration generale et configuration Mobile) --- css/style.css | 110 +++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 95 insertions(+), 15 deletions(-) diff --git a/css/style.css b/css/style.css index c6ba4704..633d8d22 100644 --- a/css/style.css +++ b/css/style.css @@ -134,12 +134,14 @@ header nav ul { list-style: none; /*gap: 68px;*/ } + header nav ul li { margin-left: 68px; } + header img { height: 19px; - padding: 30px; + padding: 30px 0px; } .header-links:hover { @@ -151,27 +153,87 @@ header img { position: relative; color: black; } + .header-links::before { content: ""; position: absolute; left: 0; right: 0; - top: -16px; - /* décale la ligne vers le haut */ - height: 2px; - /* épaisseur de la ligne */ + top: -16px; /* shifts line to the top */ + height: 2px; /* line's thickness */ background: #0065FC; - opacity: 0; - /* invisible par défaut */ + opacity: 0; /* non visible by default */ } + .header-links:hover::before { - opacity: 1; - /* rend visible la ligne au hover */ + opacity: 1; /* render line at hover */ } +/***** Info group ****/ +.info { + margin-top: 35px; +} +/* search bar */ +.searchbar { + display: flex; + border-radius: 15px; + height: 49px; + margin: 24px 0px; +} +.searchbar i { + width: 50px; + border-top-left-radius: 15px; + border-bottom-left-radius: 15px; + background-color: #F2F2F2; + display: flex; + justify-content: center; + align-items: center; +} + +i.fa-solid.fa-location-dot { + color: black; +} + +.searchbar-txt { + background-color: white; + border: 1px solid #F2F2F2; + outline: none; + padding: 15px 16px; +} +.searchbar-txt::placeholder { + color: black; +} + +.searchbar-button { + color: white; + border-top-right-radius: 15px; + border-bottom-right-radius: 15px; + background-color: #0065FC; + border: none; + outline: none; + padding: 15px 16px; +} + +.font18 { + font-size: 18px; + font-weight: bold; +} + +.searchbar-button span { + display: inline; +} + +.searchbar-button i { + display: none; +} + +i.fa-solid.fa-magnifying-glass { + color: white; + background-color: #0065FC; +} /* Le code ci-dessous correspond à la version responsive uniquement */ @@ -219,6 +281,7 @@ header img { flex-direction: column; align-items: center; } + .header-links::before { content: ""; position: absolute; @@ -232,19 +295,36 @@ header img { opacity: 0; /* invisible par défaut */ } + /* align header */ header nav { - width:100%; + width: 100%; } + header nav ul { - padding:0; + padding: 0; } + header nav ul li { margin-left: 0px; - width:100%; + width: 100%; + } + + header nav ul li a { + display: block; + text-align: center; + } + + /***** Info group ****/ + /* search bar */ + .searchbar-button span { + display: none; + } + .searchbar-button i { + display: inline; } - header nav ul li a{ - display:block; - text-align:center; + .searchbar-button { + border-top-left-radius: 15px; + border-bottom-left-radius: 15px; } } \ No newline at end of file From bafe4d15f64a4ee8946646d66fef392289c5cb7c Mon Sep 17 00:00:00 2001 From: ppxt-code Date: Wed, 27 Aug 2025 17:06:41 +0200 Subject: [PATCH 05/29] commit: livraison de la filterbar de Infogroup (configuration Desktop Tablette Mobile) ajout de l'ombre sur le bouton de la searchbar cas Mobile --- css/style.css | 63 +++++++++++++++++++++++++++++++++++++++++++-------- index.html | 27 +++++++++++++++++++++- 2 files changed, 80 insertions(+), 10 deletions(-) diff --git a/css/style.css b/css/style.css index 633d8d22..d7e511aa 100644 --- a/css/style.css +++ b/css/style.css @@ -169,11 +169,19 @@ header img { opacity: 1; /* render line at hover */ } +/* main */ +main { + display: flex; + flex-direction: column; + gap: 35px; +} /***** Info group ****/ .info { margin-top: 35px; + gap: 35px; } + /* search bar */ .searchbar { display: flex; @@ -181,7 +189,6 @@ header img { height: 49px; margin: 24px 0px; } - .searchbar i { width: 50px; border-top-left-radius: 15px; @@ -191,22 +198,18 @@ header img { justify-content: center; align-items: center; } - i.fa-solid.fa-location-dot { color: black; } - .searchbar-txt { background-color: white; border: 1px solid #F2F2F2; outline: none; padding: 15px 16px; } - .searchbar-txt::placeholder { color: black; } - .searchbar-button { color: white; border-top-right-radius: 15px; @@ -216,25 +219,56 @@ i.fa-solid.fa-location-dot { outline: none; padding: 15px 16px; } - .font18 { font-size: 18px; font-weight: bold; } - .searchbar-button span { display: inline; } - .searchbar-button i { display: none; } - i.fa-solid.fa-magnifying-glass { color: white; background-color: #0065FC; } +/* filter bar */ +.filterbar, .div-filtre { + display: flex; + gap: 15px; +} +.div-filtre2 { + display: flex; + gap: 15px; +} +.subtitle { + display:flex; + align-items: center; +} +.filterbutton { + display:inline-flex; + flex-direction:row; + align-items:center; + justify-content: center; + border-radius: 25px; + padding: 10px; /*4px 19px;*/ + border: 2px solid #D9D9D9; + gap: 10px; +} +.filterbutton:hover { + background-color: #DEEBFF; +} +.font17 { + font-size: 17px; + font-weight: bold; +} + + + + + /* Le code ci-dessous correspond à la version responsive uniquement */ /****** Media queries ***********/ @@ -270,6 +304,12 @@ i.fa-solid.fa-magnifying-glass { .populaires-cards .card-subtitle { font-size: 13px; } + + /***** Info group ****/ + /* filter bar */ + .filterbar { + flex-direction: column; + } } /* Small devices (phones, less than 768px) */ @@ -326,5 +366,10 @@ i.fa-solid.fa-magnifying-glass { .searchbar-button { border-top-left-radius: 15px; border-bottom-left-radius: 15px; + box-shadow: 0 3px 0 0 #D9D9D9; + } + /* filter bar */ + .div-filtre { + flex-direction: column; } } \ No newline at end of file diff --git a/index.html b/index.html index a2ce742f..e4ef51df 100644 --- a/index.html +++ b/index.html @@ -28,7 +28,7 @@
-

Trouvez votre hébergement

+

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

En plein centre ville ou en pleine nature

@@ -39,6 +39,31 @@

Trouvez votre hébergement

+
+
Filtres
+
+
+
+ + Économique +
+
+ + Familial +
+
+
+
+ + Romantique +
+
+ + Nos pépites +
+
+
+
From 143c9e5414ac86319057fec45dd3c224ec267f8f Mon Sep 17 00:00:00 2001 From: ppxt-code Date: Wed, 27 Aug 2025 18:08:53 +0200 Subject: [PATCH 06/29] commit : livraison de l'infobar de Info group --- css/style.css | 61 +++++++++++++++++++++++++++++++++++++++++---------- index.html | 4 ++++ 2 files changed, 54 insertions(+), 11 deletions(-) diff --git a/css/style.css b/css/style.css index d7e511aa..ec61c48a 100644 --- a/css/style.css +++ b/css/style.css @@ -159,14 +159,18 @@ header img { position: absolute; left: 0; right: 0; - top: -16px; /* shifts line to the top */ - height: 2px; /* line's thickness */ + top: -16px; + /* shifts line to the top */ + height: 2px; + /* line's thickness */ background: #0065FC; - opacity: 0; /* non visible by default */ + opacity: 0; + /* non visible by default */ } .header-links:hover::before { - opacity: 1; /* render line at hover */ + opacity: 1; + /* render line at hover */ } /* main */ @@ -189,6 +193,7 @@ main { height: 49px; margin: 24px 0px; } + .searchbar i { width: 50px; border-top-left-radius: 15px; @@ -198,18 +203,22 @@ main { justify-content: center; align-items: center; } + i.fa-solid.fa-location-dot { color: black; } + .searchbar-txt { background-color: white; border: 1px solid #F2F2F2; outline: none; padding: 15px 16px; } + .searchbar-txt::placeholder { color: black; } + .searchbar-button { color: white; border-top-right-radius: 15px; @@ -219,52 +228,79 @@ i.fa-solid.fa-location-dot { outline: none; padding: 15px 16px; } + .font18 { font-size: 18px; font-weight: bold; } + .searchbar-button span { display: inline; } + .searchbar-button i { display: none; } + i.fa-solid.fa-magnifying-glass { color: white; background-color: #0065FC; } /* filter bar */ -.filterbar, .div-filtre { +.filterbar, +.div-filtre { display: flex; gap: 15px; } + .div-filtre2 { display: flex; gap: 15px; } + .subtitle { - display:flex; + display: flex; align-items: center; } + .filterbutton { - display:inline-flex; - flex-direction:row; - align-items:center; + display: inline-flex; + flex-direction: row; + align-items: center; justify-content: center; border-radius: 25px; - padding: 10px; /*4px 19px;*/ + padding: 10px; + /*4px 19px;*/ border: 2px solid #D9D9D9; gap: 10px; } + .filterbutton:hover { background-color: #DEEBFF; } + .font17 { font-size: 17px; font-weight: bold; } +/* info bar */ +.infobar { + display: inline-flex; + align-items: center; + gap: 10px; +} +.font16 { + font-size: 16px; +} +.fa-circle-info { + color: white; + background-color: #0065FC; + border-radius: 50%; + border : 1px solid #D9D9D9; +} + @@ -304,7 +340,7 @@ i.fa-solid.fa-magnifying-glass { .populaires-cards .card-subtitle { font-size: 13px; } - + /***** Info group ****/ /* filter bar */ .filterbar { @@ -360,14 +396,17 @@ i.fa-solid.fa-magnifying-glass { .searchbar-button span { display: none; } + .searchbar-button i { display: inline; } + .searchbar-button { border-top-left-radius: 15px; border-bottom-left-radius: 15px; box-shadow: 0 3px 0 0 #D9D9D9; } + /* filter bar */ .div-filtre { flex-direction: column; diff --git a/index.html b/index.html index e4ef51df..497cdc86 100644 --- a/index.html +++ b/index.html @@ -64,6 +64,10 @@

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

+
+ +

Plus de 500 logements sont disponibles dans cette ville

+
From 6a81486da3a84ac10e5ecef41d6c4e9e77e83f3c Mon Sep 17 00:00:00 2001 From: ppxt-code Date: Wed, 27 Aug 2025 21:35:48 +0200 Subject: [PATCH 07/29] =?UTF-8?q?commit:=20livraison=20de=20card/main=20(c?= =?UTF-8?q?ard=20de=20h=C3=A9bergements)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 53 +++++++++++++++++++++++++++++++++++++++++++++++++-- index.html | 26 ++++++++++++++++++++++++- 2 files changed, 76 insertions(+), 3 deletions(-) diff --git a/css/style.css b/css/style.css index ec61c48a..0c39db8e 100644 --- a/css/style.css +++ b/css/style.css @@ -291,21 +291,70 @@ i.fa-solid.fa-magnifying-glass { align-items: center; gap: 10px; } + .font16 { font-size: 16px; } + .fa-circle-info { color: white; background-color: #0065FC; border-radius: 50%; - border : 1px solid #D9D9D9; + border: 1px solid #D9D9D9; +} + +/***** Hebergements ****/ +.hebergements { + display: flex; + flex-direction: column; + gap: 30px; +} + +.main-cards { + display: flex; +} + +.cardmain { + display: flex; + flex-direction: column; + height: 207.25px; +} + +.cardmain img { + object-fit: cover; + height: 59.8%; + width: 243px; + border-top-left-radius: 20px; + border-top-right-radius: 20px; } +.cardmain .card-content { + height: 40.2%; + padding-left: 15px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + box-sizing: border-box; +} +.card-txt { + display: flex; + flex-direction: column; + gap: 8px; +} +.card-txt h3 { + margin: 0; +} +.card-txt p { + margin: 0; +} -/* Le code ci-dessous correspond à la version responsive uniquement */ +.populaires-cards .card-subtitle, .main-cards .card-subtitle { + font-size: 14px; +} /****** Media queries ***********/ /* Medium devices (tablets, less/equal than 1024px) */ diff --git a/index.html b/index.html index 497cdc86..543b6c18 100644 --- a/index.html +++ b/index.html @@ -70,9 +70,33 @@

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

-
+
+

Hébergements à Marseille

+
+ +
+ chambre grise avec 2 lits +
+
+

Hôtel du port

+

Nuit à partir de 52€

+
+
+ + + + + + Note de 4 sur 5 +
+
+
+ +
+
Afficher plus
+

Les plus populaires

From 3b48d418665ee8a6d24400f3307d9228ce0b0da1 Mon Sep 17 00:00:00 2001 From: ppxt-code Date: Thu, 28 Aug 2025 11:37:49 +0200 Subject: [PATCH 08/29] =?UTF-8?q?commit:=20livraison=20des=20cards=20de=20?= =?UTF-8?q?hebergement=20(configuration=20g=C3=A9n=C3=A9rale=20et=20Mobile?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 25 ++++++++++--- index.html | 97 +++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 118 insertions(+), 4 deletions(-) diff --git a/css/style.css b/css/style.css index 0c39db8e..a0e4bbfa 100644 --- a/css/style.css +++ b/css/style.css @@ -312,18 +312,24 @@ i.fa-solid.fa-magnifying-glass { .main-cards { display: flex; + gap: 30px; } - .cardmain { display: flex; flex-direction: column; + flex: 1 1 0; + min-width: 0; height: 207.25px; } - +.main-cards a { + display: flex; + width: 100%; +} .cardmain img { + max-width: 100%; object-fit: cover; height: 59.8%; - width: 243px; + /*width: 243px;*/ border-top-left-radius: 20px; border-top-right-radius: 20px; } @@ -336,6 +342,7 @@ i.fa-solid.fa-magnifying-glass { justify-content: center; align-items: flex-start; box-sizing: border-box; + gap: 8px; } .card-txt { @@ -352,7 +359,8 @@ i.fa-solid.fa-magnifying-glass { margin: 0; } -.populaires-cards .card-subtitle, .main-cards .card-subtitle { +.populaires-cards .card-subtitle, +.main-cards .card-subtitle { font-size: 14px; } @@ -460,4 +468,13 @@ i.fa-solid.fa-magnifying-glass { .div-filtre { flex-direction: column; } + + /***** Hebergements ****/ + .main-cards { + flex-direction: column; + } + .hebergements { + order : 1; /*populaires has order 0 by default, hebergements with greater order displayed after*/ + } + } \ No newline at end of file diff --git a/index.html b/index.html index 543b6c18..65e4b275 100644 --- a/index.html +++ b/index.html @@ -92,6 +92,103 @@

Hôtel du port

+ + +
+ lit avec bureau et fenetre +
+
+

Hôtel chez Amina

+

Nuit à partir de 96€

+
+
+ + + + + + Note de 4 sur 5 +
+
+
+ + +
+ lit avec chevet et armoire vitree +
+
+

Hôtel Les mouettes

+

Nuit à partir de 76€

+
+
+ + + + + + Note de 4 sur 5 +
+
+
+ +
+
+ +
+ lit double avec tableau ambiance la mer +
+
+

Hôtel de la mer

+

Nuit à partir de 46€

+
+
+ + + + + + Note de 4 sur 5 +
+
+
+ + +
+ lit double superposé avec fenetre +
+
+

Auberge La Canebière

+

Nuit à partir de 25€

+
+
+ + + + + + Note de 4 sur 5 +
+
+
+ + +
+ lits double superposés en bois +
+
+

Auberge Le Panier

+

Nuit à partir de 23€

+
+
+ + + + + + Note de 4 sur 5 +
+
+
Afficher plus
From 9577dab1dc0d0414810539373e80dbc5750a99b4 Mon Sep 17 00:00:00 2001 From: ppxt-code Date: Thu, 28 Aug 2025 14:43:36 +0200 Subject: [PATCH 09/29] commit: affichage de populaires pour Mobile --- css/style.css | 30 ++++++++++++++++++++++++++---- 1 file changed, 26 insertions(+), 4 deletions(-) diff --git a/css/style.css b/css/style.css index a0e4bbfa..27c254dd 100644 --- a/css/style.css +++ b/css/style.css @@ -314,6 +314,7 @@ i.fa-solid.fa-magnifying-glass { display: flex; gap: 30px; } + .cardmain { display: flex; flex-direction: column; @@ -321,10 +322,12 @@ i.fa-solid.fa-magnifying-glass { min-width: 0; height: 207.25px; } + .main-cards a { - display: flex; - width: 100%; + display: flex; + width: 100%; } + .cardmain img { max-width: 100%; object-fit: cover; @@ -408,6 +411,23 @@ i.fa-solid.fa-magnifying-glass { /* Small devices (phones, less than 768px) */ @media (max-width: 767.98px) { + + /***** populaires *****/ + .populaires-cards { + width: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + } + + .populaires-cards a { + display: flex; + width: 100%; + } + .populaires-cards .card { + width: 100%; + } + /***** header *****/ /* underline of .header-links */ header { @@ -473,8 +493,10 @@ i.fa-solid.fa-magnifying-glass { .main-cards { flex-direction: column; } + .hebergements { - order : 1; /*populaires has order 0 by default, hebergements with greater order displayed after*/ + order: 1; + /*populaires has order 0 by default, hebergements with greater order displayed after*/ } - + } \ No newline at end of file From ec24046bbce4e05b448e8de2757d064c9599c9c6 Mon Sep 17 00:00:00 2001 From: ppxt-code Date: Thu, 28 Aug 2025 16:05:29 +0200 Subject: [PATCH 10/29] commit: affichage de filterbutton et des fonds d'ecran populaires,hebergements sur Mobile --- css/style.css | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/css/style.css b/css/style.css index 27c254dd..0495919b 100644 --- a/css/style.css +++ b/css/style.css @@ -410,8 +410,6 @@ i.fa-solid.fa-magnifying-glass { /* Small devices (phones, less than 768px) */ @media (max-width: 767.98px) { - - /***** populaires *****/ .populaires-cards { width: 100%; @@ -424,6 +422,7 @@ i.fa-solid.fa-magnifying-glass { display: flex; width: 100%; } + .populaires-cards .card { width: 100%; } @@ -469,6 +468,11 @@ i.fa-solid.fa-magnifying-glass { } /***** Info group ****/ + .info { + background-color: white; + padding: 30px; + box-sizing: border-box; + } /* search bar */ .searchbar-button span { display: none; @@ -488,15 +492,22 @@ i.fa-solid.fa-magnifying-glass { .div-filtre { flex-direction: column; } + .filterbutton { + flex:1; + } /***** Hebergements ****/ .main-cards { flex-direction: column; } - .hebergements { + .hebergements-and-populaires section { + border-radius: 0px; + } + + .hebergements-and-populaires section.hebergements { order: 1; /*populaires has order 0 by default, hebergements with greater order displayed after*/ + background-color: white; } - } \ No newline at end of file From eceb91ce1bc4526ecba5875152dd51ee3e093af7 Mon Sep 17 00:00:00 2001 From: ppxt-code Date: Thu, 28 Aug 2025 18:08:48 +0200 Subject: [PATCH 11/29] commit: livraison de la card de activites --- css/style.css | 51 +++++++++++++++++++++++++++++++++++++++++++++++++-- index.html | 13 +++++++++++++ 2 files changed, 62 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index 0495919b..acdeac6c 100644 --- a/css/style.css +++ b/css/style.css @@ -367,6 +367,36 @@ i.fa-solid.fa-magnifying-glass { font-size: 14px; } +/***** activites ******/ +.activites { + display: flex; + flex-direction: column; + gap: 30px; + padding: 30px; +} + +.cardactivite { + /*filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1));*/ + box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1); + border-radius: 20px; +} + +.cardactivite img { + width: 100%; + object-fit: cover; + border-top-left-radius: 20px; + border-top-right-radius: 20px; + height: 380px; +} + +.cardactivite .card-content { + display: flex; + align-items: center; + border-bottom-left-radius: 20px; + border-bottom-right-radius: 20px; + padding: 20px 19px; +} + /****** Media queries ***********/ /* Medium devices (tablets, less/equal than 1024px) */ @media (max-width: 1024px) { @@ -406,10 +436,16 @@ i.fa-solid.fa-magnifying-glass { .filterbar { flex-direction: column; } + + /***** activites ******/ + .cardactivite img { + height: 200px; + } } /* Small devices (phones, less than 768px) */ @media (max-width: 767.98px) { + /***** populaires *****/ .populaires-cards { width: 100%; @@ -473,7 +509,12 @@ i.fa-solid.fa-magnifying-glass { padding: 30px; box-sizing: border-box; } + /* search bar */ + .searchbar-txt { + width: 100%; + } + .searchbar-button span { display: none; } @@ -492,8 +533,9 @@ i.fa-solid.fa-magnifying-glass { .div-filtre { flex-direction: column; } + .filterbutton { - flex:1; + flex: 1; } /***** Hebergements ****/ @@ -505,9 +547,14 @@ i.fa-solid.fa-magnifying-glass { border-radius: 0px; } - .hebergements-and-populaires section.hebergements { + .hebergements-and-populaires section.hebergements { order: 1; /*populaires has order 0 by default, hebergements with greater order displayed after*/ background-color: white; } + + /***** activites ******/ + .cardactivite img { + height: 141px; + } } \ No newline at end of file diff --git a/index.html b/index.html index 65e4b275..1c24a059 100644 --- a/index.html +++ b/index.html @@ -263,6 +263,19 @@

Hôtel Bleu et Blanc

+
+

Activités à Marseille

+
+ +
+ +
+

Vieux-Port

+
+
+ +
+
From eb9d13bf0ab4a36b74a1dc7090720b56558825af Mon Sep 17 00:00:00 2001 From: ppxt-code Date: Thu, 28 Aug 2025 18:52:19 +0200 Subject: [PATCH 12/29] =?UTF-8?q?commit:=20livraison=20des=20cards=20activ?= =?UTF-8?q?ites=20(configuration=20g=C3=A9=C3=A9nrale=20et=20Mobile,=20la?= =?UTF-8?q?=20card=20pr=C3=A9c=C3=A9demment=20livr=C3=A9e=20a=20sa=20taill?= =?UTF-8?q?e=20configur=C3=A9e=20Mobile/Tablette/Desktop)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 14 ++++++++++++++ index.html | 26 +++++++++++++++++++++++++- 2 files changed, 39 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index acdeac6c..800e05a1 100644 --- a/css/style.css +++ b/css/style.css @@ -375,10 +375,21 @@ i.fa-solid.fa-magnifying-glass { padding: 30px; } +.activites-cards { + display: flex; + gap: 30px; +} + +.activites-cards a { + display: flex; + width: 100%; +} + .cardactivite { /*filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1));*/ box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1); border-radius: 20px; + flex: 1 1 0; } .cardactivite img { @@ -554,6 +565,9 @@ i.fa-solid.fa-magnifying-glass { } /***** activites ******/ + .activites-cards { + flex-direction: column; + } .cardactivite img { height: 141px; } diff --git a/index.html b/index.html index 1c24a059..a4bbddb4 100644 --- a/index.html +++ b/index.html @@ -268,12 +268,36 @@

Activités à Marseille

- + bateaux dans un port

Vieux-Port

 + +
+ fort sur pierres roses +
+

Fort de Pomègues

+
+
+ + +
+ crique +
+

Parc national des Calanques

+
+
+ + +
+ mont avec une chapelle +
+

Notre-Dame-de-la-Garde

+
+
+
From 90bbd1657184bf8109a71ad0d4c6ca48d91a8aa4 Mon Sep 17 00:00:00 2001 From: ppxt-code Date: Fri, 29 Aug 2025 09:45:06 +0200 Subject: [PATCH 13/29] searchbar dans une form --- index.html | 681 ++++++++++++++++++++++++++++++----------------------- 1 file changed, 388 insertions(+), 293 deletions(-) diff --git a/index.html b/index.html index a4bbddb4..95832f4b 100644 --- a/index.html +++ b/index.html @@ -1,308 +1,403 @@ - - - - + + + Booki - - - - - - + + + + + + - +
-
- Logo de Booki - -
-
-
-
-

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

-

En plein centre ville ou en pleine nature

-
-
- - - -
-
-
Filtres
-
-
-
- - Économique -
-
- - Familial -
-
-
-
- - Romantique -
-
- - Nos pépites -
-
+
+ Logo de Booki + +
+
+
+
+

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

+

En plein centre ville ou en pleine nature

+
+
+
+ + + +
+
+
+
Filtres
+
+
+
+ + Économique +
+
+ + Familial +
+
+
+
+ + Romantique +
+
+ + Nos pépites +
+
+
+
+
+ +

+ Plus de 500 logements sont disponibles dans cette ville +

+
+
+
+
+

Hébergements à Marseille

+
+ +
+ chambre grise avec 2 lits +
+
+

Hôtel du port

+

+ Nuit à partir de 52€ +

-
-
- -

Plus de 500 logements sont disponibles dans cette ville

-
+
+ + + + + + Note de 4 sur 5 +
+
+ + + +
+ lit avec bureau et fenetre +
+
+

Hôtel chez Amina

+

+ Nuit à partir de 96€ +

+
+
+ + + + + + Note de 4 sur 5 +
+
+
+ + +
+ lit avec chevet et armoire vitree +
+
+

Hôtel Les mouettes

+

+ Nuit à partir de 76€ +

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

Hébergements à Marseille

-
- -
- chambre grise avec 2 lits -
-
-

Hôtel du port

-

Nuit à partir de 52€

-
-
- - - - - - Note de 4 sur 5 -
-
-
- - -
- lit avec bureau et fenetre -
-
-

Hôtel chez Amina

-

Nuit à partir de 96€

-
-
- - - - - - Note de 4 sur 5 -
-
-
- - -
- lit avec chevet et armoire vitree -
-
-

Hôtel Les mouettes

-

Nuit à partir de 76€

-
-
- - - - - - Note de 4 sur 5 -
-
-
- +
+ + + + +
+ lit double superposé avec fenetre +
+
+

Auberge La Canebière

+

+ Nuit à partir de 25€ +

-
Afficher plus
-
+
+ + + + + + Note de 4 sur 5 +
+
+ + + +
+ lits double superposés en bois +
+
+

Auberge Le Panier

+

+ Nuit à partir de 23€ +

+
+
+ + + + + + Note de 4 sur 5 +
+
+
+ +
+
Afficher plus
+ -
-
-

Les plus populaires

- +
+
+

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

Hôtel Bleu et Blanc

+

+ Nuit à partir de 68€ +

+
+
+ + + + + + Note de 4 sur 5 +
+
+
+
-
-
+ + + +
+ fort sur pierres roses +
+

Fort de Pomègues

+
+
+ + +
+ crique +
+

Parc national des Calanques

+
+
+ + +
+ mont avec une chapelle +
+

Notre-Dame-de-la-Garde

+
+
+ +
+ + +
- - - \ No newline at end of file + + From a9c891d8a68bf2774c62e7227e39b15774e54b9d Mon Sep 17 00:00:00 2001 From: ppxt-code Date: Fri, 29 Aug 2025 10:26:51 +0200 Subject: [PATCH 14/29] =?UTF-8?q?commit:=20r=C3=A9glages=20taille=20du=20t?= =?UTF-8?q?exte=20des=20boutons=20de=20filtre=20en=20Mobile?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 10 +++++++--- index.html | 16 ++++++++-------- 2 files changed, 15 insertions(+), 11 deletions(-) diff --git a/css/style.css b/css/style.css index 800e05a1..2a081deb 100644 --- a/css/style.css +++ b/css/style.css @@ -270,8 +270,7 @@ i.fa-solid.fa-magnifying-glass { align-items: center; justify-content: center; border-radius: 25px; - padding: 10px; - /*4px 19px;*/ + padding: 15px; /*4px 19px;*/ border: 2px solid #D9D9D9; gap: 10px; } @@ -280,11 +279,12 @@ i.fa-solid.fa-magnifying-glass { background-color: #DEEBFF; } -.font17 { +.filterbutton-txt { font-size: 17px; font-weight: bold; } + /* info bar */ .infobar { display: inline-flex; @@ -548,6 +548,10 @@ i.fa-solid.fa-magnifying-glass { .filterbutton { flex: 1; } + + .filterbutton-txt { + font-size: 14px; + } /***** Hebergements ****/ .main-cards { diff --git a/index.html b/index.html index 95832f4b..4bb79478 100644 --- a/index.html +++ b/index.html @@ -55,23 +55,23 @@

Filtres
-
+
- Économique + Économique
-
+
- Familial + Familial
-
+
- Romantique + Romantique
-
+
- Nos pépites + Nos pépites
From 5e39f6baad5d6a54b651392cc8e875e3cd866669 Mon Sep 17 00:00:00 2001 From: ppxt-code Date: Fri, 29 Aug 2025 11:14:52 +0200 Subject: [PATCH 15/29] reglages d'affichage de la carte d'activites --- css/style.css | 4 ++++ index.html | 8 ++++---- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/css/style.css b/css/style.css index 2a081deb..5e8fdd87 100644 --- a/css/style.css +++ b/css/style.css @@ -408,6 +408,10 @@ i.fa-solid.fa-magnifying-glass { padding: 20px 19px; } +.card-content h3 { + margin: 0; +} + /****** Media queries ***********/ /* Medium devices (tablets, less/equal than 1024px) */ @media (max-width: 1024px) { diff --git a/index.html b/index.html index 4bb79478..c73391a0 100644 --- a/index.html +++ b/index.html @@ -357,7 +357,7 @@

Activités à Marseille

alt="bateaux dans un port" />
-

Vieux-Port

+

Vieux-Port

@@ -368,7 +368,7 @@

Vieux-Port

alt="fort sur pierres roses" />
-

Fort de Pomègues

+

Fort de Pomègues

@@ -379,7 +379,7 @@

Fort de Pomègues

alt="crique" />
-

Parc national des Calanques

+

Parc national des Calanques

@@ -390,7 +390,7 @@

Parc national des Calanques

alt="mont avec une chapelle" />
-

Notre-Dame-de-la-Garde

+

Notre-Dame-de-la-Garde

From cf328c5089975b6ae2fa372f441dac55d562b6f0 Mon Sep 17 00:00:00 2001 From: ppxt-code Date: Fri, 29 Aug 2025 15:41:00 +0200 Subject: [PATCH 16/29] =?UTF-8?q?=20r=C3=A9glages=20de=20margin=20dans=20l?= =?UTF-8?q?'Info=20bar=20et=20utilisation=20des=20couleurs=20de=20root,=20?= =?UTF-8?q?rajout=20de=20la=20couleur=20--border-color?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 37 +++++++++++++++++++++++++------------ 1 file changed, 25 insertions(+), 12 deletions(-) diff --git a/css/style.css b/css/style.css index 5e8fdd87..3827f8f5 100644 --- a/css/style.css +++ b/css/style.css @@ -7,6 +7,7 @@ --main-color: #0065FC; --main-bg-color: #F2F2F2; --filter-bg-color: #DEEBFF; + --border-color: #D9D9D9; } .fa-solid { @@ -145,7 +146,7 @@ header img { } .header-links:hover { - color: #0065FC; + color: var(--main-color); } /* overline of .header-links */ @@ -163,7 +164,7 @@ header img { /* shifts line to the top */ height: 2px; /* line's thickness */ - background: #0065FC; + background: var(--main-color); opacity: 0; /* non visible by default */ } @@ -181,7 +182,13 @@ main { } /***** Info group ****/ +.subtitle { + margin:0; + padding: 0; +} .info { + display:flex; + flex-direction: column; margin-top: 35px; gap: 35px; } @@ -191,14 +198,13 @@ main { display: flex; border-radius: 15px; height: 49px; - margin: 24px 0px; } .searchbar i { width: 50px; border-top-left-radius: 15px; border-bottom-left-radius: 15px; - background-color: #F2F2F2; + background-color: var(--main-bg-color); display: flex; justify-content: center; align-items: center; @@ -210,7 +216,7 @@ i.fa-solid.fa-location-dot { .searchbar-txt { background-color: white; - border: 1px solid #F2F2F2; + border: 1px solid var(--main-bg-color); outline: none; padding: 15px 16px; } @@ -223,7 +229,7 @@ i.fa-solid.fa-location-dot { color: white; border-top-right-radius: 15px; border-bottom-right-radius: 15px; - background-color: #0065FC; + background-color: var(--main-color); border: none; outline: none; padding: 15px 16px; @@ -244,7 +250,7 @@ i.fa-solid.fa-location-dot { i.fa-solid.fa-magnifying-glass { color: white; - background-color: #0065FC; + background-color: var(--main-color); } /* filter bar */ @@ -271,7 +277,7 @@ i.fa-solid.fa-magnifying-glass { justify-content: center; border-radius: 25px; padding: 15px; /*4px 19px;*/ - border: 2px solid #D9D9D9; + border: 2px solid var(--border-color); gap: 10px; } @@ -298,9 +304,9 @@ i.fa-solid.fa-magnifying-glass { .fa-circle-info { color: white; - background-color: #0065FC; + background-color: var(--main-color); border-radius: 50%; - border: 1px solid #D9D9D9; + border: 1px solid var(--border-color); } /***** Hebergements ****/ @@ -460,8 +466,14 @@ i.fa-solid.fa-magnifying-glass { /* Small devices (phones, less than 768px) */ @media (max-width: 767.98px) { + main { + gap: 0; + } /***** populaires *****/ + .populaires { + margin:0; + } .populaires-cards { width: 100%; display: flex; @@ -494,7 +506,7 @@ i.fa-solid.fa-magnifying-glass { /* décale la ligne vers le haut */ height: 2px; /* épaisseur de la ligne */ - background: #0065FC; + background: var(--main-color); opacity: 0; /* invisible par défaut */ } @@ -523,6 +535,7 @@ i.fa-solid.fa-magnifying-glass { background-color: white; padding: 30px; box-sizing: border-box; + margin : 0; } /* search bar */ @@ -541,7 +554,7 @@ i.fa-solid.fa-magnifying-glass { .searchbar-button { border-top-left-radius: 15px; border-bottom-left-radius: 15px; - box-shadow: 0 3px 0 0 #D9D9D9; + box-shadow: 0 3px 0 0 var(--border-color); } /* filter bar */ From ccf2040450d7af56b599b5f6a010620c415db093 Mon Sep 17 00:00:00 2001 From: ppxt-code Date: Fri, 29 Aug 2025 16:55:36 +0200 Subject: [PATCH 17/29] =?UTF-8?q?livraison=20du=20footer=20(cas=20g=C3=A9n?= =?UTF-8?q?=C3=A9ral=20et=20Mobile)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 57 ++++++++++++++++++++++++++++++++++++++++++--------- index.html | 28 ++++++++++++++++++++++++- 2 files changed, 74 insertions(+), 11 deletions(-) diff --git a/css/style.css b/css/style.css index 3827f8f5..ee025ba5 100644 --- a/css/style.css +++ b/css/style.css @@ -182,12 +182,13 @@ main { } /***** Info group ****/ -.subtitle { - margin:0; +.subtitle { + margin: 0; padding: 0; } + .info { - display:flex; + display: flex; flex-direction: column; margin-top: 35px; gap: 35px; @@ -276,7 +277,8 @@ i.fa-solid.fa-magnifying-glass { align-items: center; justify-content: center; border-radius: 25px; - padding: 15px; /*4px 19px;*/ + padding: 15px; + /*4px 19px;*/ border: 2px solid var(--border-color); gap: 10px; } @@ -387,8 +389,8 @@ i.fa-solid.fa-magnifying-glass { } .activites-cards a { - display: flex; - width: 100%; + display: flex; + width: 100%; } .cardactivite { @@ -418,6 +420,33 @@ i.fa-solid.fa-magnifying-glass { margin: 0; } +/***** footer ******/ +.footer-div { + display: flex; + padding: 30px; + gap: 50px; +} + +.footer-div section { + flex: 1; + display: flex; + flex-direction: column; + gap: 15px; +} + +.footer-div section ul { + list-style-type: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: 15px; +} + +.footer-div section h3 { + margin: 0; +} + /****** Media queries ***********/ /* Medium devices (tablets, less/equal than 1024px) */ @media (max-width: 1024px) { @@ -472,8 +501,9 @@ i.fa-solid.fa-magnifying-glass { /***** populaires *****/ .populaires { - margin:0; + margin: 0; } + .populaires-cards { width: 100%; display: flex; @@ -535,7 +565,7 @@ i.fa-solid.fa-magnifying-glass { background-color: white; padding: 30px; box-sizing: border-box; - margin : 0; + margin: 0; } /* search bar */ @@ -565,7 +595,7 @@ i.fa-solid.fa-magnifying-glass { .filterbutton { flex: 1; } - + .filterbutton-txt { font-size: 14px; } @@ -584,12 +614,19 @@ i.fa-solid.fa-magnifying-glass { /*populaires has order 0 by default, hebergements with greater order displayed after*/ background-color: white; } - + /***** activites ******/ .activites-cards { flex-direction: column; } + .cardactivite img { height: 141px; } + + /***** footer ******/ + .footer-div { + flex-direction: column; + background-color: var(--main-bg-color); + } } \ No newline at end of file diff --git a/index.html b/index.html index c73391a0..0930b786 100644 --- a/index.html +++ b/index.html @@ -397,7 +397,33 @@

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

Assistance

+
    +
  • Centre d'aide
    • +
  • Nous contacter
    • +
+
+ +
+
From 1c80ffa39f853a86a3b66faecb10e1741a92d22b Mon Sep 17 00:00:00 2001 From: ppxt-code Date: Fri, 29 Aug 2025 18:36:16 +0200 Subject: [PATCH 18/29] background-color pour le footer (cas general) et bordure au dela de 1440px --- css/style.css | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index ee025ba5..1dca0c2b 100644 --- a/css/style.css +++ b/css/style.css @@ -425,6 +425,7 @@ i.fa-solid.fa-magnifying-glass { display: flex; padding: 30px; gap: 50px; + background-color: var(--main-bg-color); } .footer-div section { @@ -448,6 +449,13 @@ i.fa-solid.fa-magnifying-glass { } /****** Media queries ***********/ +@media (min-width: 1440px) { + .main-container { + border-left : 1px solid var(--filter-bg-color); + border-right : 1px solid var(--filter-bg-color); + } +} + /* Medium devices (tablets, less/equal than 1024px) */ @media (max-width: 1024px) { .hebergements-and-populaires { @@ -627,6 +635,5 @@ i.fa-solid.fa-magnifying-glass { /***** footer ******/ .footer-div { flex-direction: column; - background-color: var(--main-bg-color); } } \ No newline at end of file From cafa7304829b5f5284797275059e742343b040de Mon Sep 17 00:00:00 2001 From: ppxt-code Date: Sat, 30 Aug 2025 11:51:26 +0200 Subject: [PATCH 19/29] commit: margin-top pour Footer --- css/style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/css/style.css b/css/style.css index 1dca0c2b..2c4ece8c 100644 --- a/css/style.css +++ b/css/style.css @@ -426,6 +426,7 @@ i.fa-solid.fa-magnifying-glass { padding: 30px; gap: 50px; background-color: var(--main-bg-color); + margin-top: 35px; } .footer-div section { From 08fcb15eb6a4f4fdec614c692f95defa46bbdeb3 Mon Sep 17 00:00:00 2001 From: ppxt-code Date: Sat, 30 Aug 2025 15:20:50 +0200 Subject: [PATCH 20/29] on enleve les bordures a droite et gauche des 1440px --- css/style.css | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/css/style.css b/css/style.css index 2c4ece8c..dd00a35a 100644 --- a/css/style.css +++ b/css/style.css @@ -450,12 +450,12 @@ i.fa-solid.fa-magnifying-glass { } /****** Media queries ***********/ -@media (min-width: 1440px) { +/*@media (min-width: 1440px) { .main-container { border-left : 1px solid var(--filter-bg-color); border-right : 1px solid var(--filter-bg-color); } -} +}*/ /* Medium devices (tablets, less/equal than 1024px) */ @media (max-width: 1024px) { @@ -504,9 +504,6 @@ i.fa-solid.fa-magnifying-glass { /* Small devices (phones, less than 768px) */ @media (max-width: 767.98px) { - main { - gap: 0; - } /***** populaires *****/ .populaires { @@ -572,8 +569,8 @@ i.fa-solid.fa-magnifying-glass { /***** Info group ****/ .info { background-color: white; - padding: 30px; box-sizing: border-box; + padding: 30px; margin: 0; } From 7abce4ddb5d7c6e230b6c763d37dd40ba46e3141 Mon Sep 17 00:00:00 2001 From: ppxt-code Date: Sat, 30 Aug 2025 15:56:48 +0200 Subject: [PATCH 21/29] background gris pour le body pour Mobile --- css/style.css | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index dd00a35a..8a791085 100644 --- a/css/style.css +++ b/css/style.css @@ -127,6 +127,7 @@ header { display: flex; flex-direction: row; justify-content: space-between; + background-color: white;; } header nav ul { @@ -174,11 +175,12 @@ header img { /* render line at hover */ } -/* main */ +/* body main-container main */ main { display: flex; flex-direction: column; gap: 35px; + background-color: white; } /***** Info group ****/ @@ -381,6 +383,7 @@ i.fa-solid.fa-magnifying-glass { flex-direction: column; gap: 30px; padding: 30px; + background-color: white; } .activites-cards { @@ -504,7 +507,10 @@ i.fa-solid.fa-magnifying-glass { /* Small devices (phones, less than 768px) */ @media (max-width: 767.98px) { - + body { + background-color: var(--main-bg-color); + } + /***** populaires *****/ .populaires { margin: 0; From 7bd8031fdaeb84c0b73b81bb5c03786885998d63 Mon Sep 17 00:00:00 2001 From: ppxt-code Date: Sat, 30 Aug 2025 17:18:58 +0200 Subject: [PATCH 22/29] cas Mobile underline visible meme hors hover, format de code sur index et style. --- css/style.css | 17 +++++++++++------ index.html | 51 +++++++++++++++++++++++++++------------------------ 2 files changed, 38 insertions(+), 30 deletions(-) diff --git a/css/style.css b/css/style.css index 8a791085..27344e08 100644 --- a/css/style.css +++ b/css/style.css @@ -127,7 +127,8 @@ header { display: flex; flex-direction: row; justify-content: space-between; - background-color: white;; + background-color: white; + ; } header nav ul { @@ -150,6 +151,7 @@ header img { color: var(--main-color); } + /* overline of .header-links */ .header-links { position: relative; @@ -510,7 +512,7 @@ i.fa-solid.fa-magnifying-glass { body { background-color: var(--main-bg-color); } - + /***** populaires *****/ .populaires { margin: 0; @@ -545,12 +547,15 @@ i.fa-solid.fa-magnifying-glass { left: 0px; right: 0px; top: 32px; - /* décale la ligne vers le haut */ + /* shifts line to the bottom */ height: 2px; - /* épaisseur de la ligne */ + background: var(--main-bg-color); + opacity: 1; + /* always visible */ + } + + .header-links:hover::before { background: var(--main-color); - opacity: 0; - /* invisible par défaut */ } /* align header */ diff --git a/index.html b/index.html index 0930b786..f545bb13 100644 --- a/index.html +++ b/index.html @@ -44,7 +44,11 @@

- +
From 8d76f168127dde268ea7efe1ff869c8f1b2f738a Mon Sep 17 00:00:00 2001 From: ppxt-code Date: Sun, 31 Aug 2025 12:17:21 +0200 Subject: [PATCH 23/29] =?UTF-8?q?index=20modifi=C3=A9=20suite=20validateur?= =?UTF-8?q?=20W3C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 60 +++++++++++++++++++++++++++--------------------------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/index.html b/index.html index f545bb13..cf4fd48f 100644 --- a/index.html +++ b/index.html @@ -1,29 +1,29 @@ - - + + Booki - - + + + > - + > +
- Logo de Booki + Logo de Booki
@@ -96,7 +96,7 @@

Hébergements à Marseille

chambre grise avec 2 lits + >

Hôtel du port

@@ -123,7 +123,7 @@

Hôtel du port

lit avec bureau et fenetre + >

Hôtel chez Amina

@@ -150,7 +150,7 @@

Hôtel chez Amina

lit avec chevet et armoire vitree + >

Hôtel Les mouettes

@@ -179,7 +179,7 @@

Hôtel Les mouettes

lit double avec tableau ambiance la mer + >

Hôtel de la mer

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

Hôtel de la mer

lit double superposé avec fenetre + >

Auberge La Canebière

@@ -233,7 +233,7 @@

Auberge La Canebière

lits double superposés en bois + >

Auberge Le Panier

@@ -270,7 +270,7 @@

Les plus populaires

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

Hôtel Le soleil du matin

@@ -297,7 +297,7 @@

Hôtel Le soleil du matin

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

@@ -326,7 +326,7 @@

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

Hôtel Bleu et Blanc

@@ -359,7 +359,7 @@

Activités à Marseille

bateaux dans un port + >

Vieux-Port

@@ -370,7 +370,7 @@

Vieux-Port

fort sur pierres roses + >

Fort de Pomègues

@@ -381,7 +381,7 @@

Fort de Pomègues

crique + >

Parc national des Calanques

@@ -392,7 +392,7 @@

Parc national des Calanques

mont avec une chapelle + >

Notre-Dame-de-la-Garde

From de215c44f3a65e7c18d4346600bd911c1b09d2c8 Mon Sep 17 00:00:00 2001 From: ppxt-code Date: Sun, 31 Aug 2025 14:12:29 +0200 Subject: [PATCH 24/29] =?UTF-8?q?configuration=20sp=C3=A9ciale=20largeur?= =?UTF-8?q?=20Mobile=20tr=C3=A8s=20petite,=20affichage=20des=20boutons=20d?= =?UTF-8?q?e=20filtre=20en=20colonne?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/css/style.css b/css/style.css index 27344e08..b3838cfd 100644 --- a/css/style.css +++ b/css/style.css @@ -609,6 +609,10 @@ i.fa-solid.fa-magnifying-glass { flex-direction: column; } + .div-filtre2 { + flex-wrap: wrap; + } + .filterbutton { flex: 1; } From 5c2de513215060f2fe0f403824a6ec75e18fa9d4 Mon Sep 17 00:00:00 2001 From: ppxt-code Date: Sun, 31 Aug 2025 15:16:46 +0200 Subject: [PATCH 25/29] card-content en space-around --- css/style.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/css/style.css b/css/style.css index b3838cfd..86df8bd9 100644 --- a/css/style.css +++ b/css/style.css @@ -128,7 +128,6 @@ header { flex-direction: row; justify-content: space-between; background-color: white; - ; } header nav ul { @@ -354,7 +353,7 @@ i.fa-solid.fa-magnifying-glass { padding-left: 15px; display: flex; flex-direction: column; - justify-content: center; + justify-content: space-around; align-items: flex-start; box-sizing: border-box; gap: 8px; @@ -612,7 +611,7 @@ i.fa-solid.fa-magnifying-glass { .div-filtre2 { flex-wrap: wrap; } - + .filterbutton { flex: 1; } From faf3b5662e4e10f71783dfa454d476d3c1036723 Mon Sep 17 00:00:00 2001 From: ppxt-code Date: Mon, 1 Sep 2025 18:35:35 +0200 Subject: [PATCH 26/29] =?UTF-8?q?commit:=20-=20changement=20d'un=20h2=20en?= =?UTF-8?q?=20un=20titre=20h1=20=20=20=20=20=20=20=20=20-=20footer=20rajou?= =?UTF-8?q?t=20de=20liens=20a=20dans=20les=20elements=20de=20liste=20li=20?= =?UTF-8?q?et=20changement=20de=20section=20en=20div=20=09-=20mise=20?= =?UTF-8?q?=C3=A0=200=20des=20padding=20et=20margin=20du=20body=20=09-=20o?= =?UTF-8?q?n=20garde=20les=20font-size=20g=C3=A9n=C3=A9rales=20dans=20le?= =?UTF-8?q?=20cas=20tablette=20pour=20les=20card=20populaires=20=09-=20mis?= =?UTF-8?q?e=20=C3=A0=200=20du=20padding=20de=20main-container=20dans=20le?= =?UTF-8?q?=20cas=20Mobile?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 26 +++++++++++++------------- index.html | 36 ++++++++++++++++++------------------ 2 files changed, 31 insertions(+), 31 deletions(-) diff --git a/css/style.css b/css/style.css index 86df8bd9..2bdb48d2 100644 --- a/css/style.css +++ b/css/style.css @@ -10,6 +10,11 @@ --border-color: #D9D9D9; } +body { + margin: 0; + padding: 0; +} + .fa-solid { color: var(--main-color); } @@ -433,14 +438,14 @@ i.fa-solid.fa-magnifying-glass { margin-top: 35px; } -.footer-div section { +.footer-div div { flex: 1; display: flex; flex-direction: column; gap: 15px; } -.footer-div section ul { +.footer-div div ul { list-style-type: none; padding: 0; margin: 0; @@ -449,17 +454,8 @@ i.fa-solid.fa-magnifying-glass { gap: 15px; } -.footer-div section h3 { - margin: 0; -} /****** Media queries ***********/ -/*@media (min-width: 1440px) { - .main-container { - border-left : 1px solid var(--filter-bg-color); - border-right : 1px solid var(--filter-bg-color); - } -}*/ /* Medium devices (tablets, less/equal than 1024px) */ @media (max-width: 1024px) { @@ -486,13 +482,13 @@ i.fa-solid.fa-magnifying-glass { width: 30%; } - .populaires-cards .card-title { + /*.populaires-cards .card-title { font-size: 14px; } .populaires-cards .card-subtitle { font-size: 13px; - } + }*/ /***** Info group ****/ /* filter bar */ @@ -512,6 +508,10 @@ i.fa-solid.fa-magnifying-glass { background-color: var(--main-bg-color); } + .main-container { + padding: 0; + } + /***** populaires *****/ .populaires { margin: 0; diff --git a/index.html b/index.html index cf4fd48f..6bc8e48a 100644 --- a/index.html +++ b/index.html @@ -36,9 +36,9 @@
-

+

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

+

En plein centre ville ou en pleine nature

@@ -403,28 +403,28 @@

Notre-Dame-de-la-Garde

From 63db31a16ff76bd61326c1657252224574e5ba6b Mon Sep 17 00:00:00 2001 From: ppxt-code Date: Tue, 2 Sep 2025 11:08:12 +0200 Subject: [PATCH 27/29] =?UTF-8?q?dans=20le=20cas=20Tablette=20lien=20a=20d?= =?UTF-8?q?e=20cartes=20populaires=20populaires-cards=20=C3=A0=20flex?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/css/style.css b/css/style.css index 2bdb48d2..22717d89 100644 --- a/css/style.css +++ b/css/style.css @@ -480,6 +480,7 @@ i.fa-solid.fa-magnifying-glass { .populaires-cards a { width: 30%; + display: flex; } /*.populaires-cards .card-title { From 8676fc26f1f4fa5d69ac79c4c2524fd3dbd7a0a3 Mon Sep 17 00:00:00 2001 From: ppxt-code Date: Tue, 2 Sep 2025 14:56:06 +0200 Subject: [PATCH 28/29] =?UTF-8?q?card=20populaires=20align-items=20=C3=A0?= =?UTF-8?q?=20strech?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/css/style.css b/css/style.css index 22717d89..63ae7d33 100644 --- a/css/style.css +++ b/css/style.css @@ -483,6 +483,9 @@ i.fa-solid.fa-magnifying-glass { display: flex; } + .populaires-cards .card { + align-items: stretch; + } /*.populaires-cards .card-title { font-size: 14px; } From 6095bfd991a71be11b32c20b0cd53a579850a47d Mon Sep 17 00:00:00 2001 From: ppxt-code Date: Wed, 3 Dec 2025 20:42:17 +0100 Subject: [PATCH 29/29] livraison du readme avec badges --- README.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/README.md b/README.md index cf39555f..0fcd9a39 100644 --- a/README.md +++ b/README.md @@ -1 +1,11 @@ +[![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)](https://developer.mozilla.org/en-US/docs/Web/HTML) +[![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)](https://developer.mozilla.org/en-US/docs/Web/CSS) + # booki-starter-pack +# Créez la page d'accueil d'une agence de voyage avec HTML5 & CSS3 + +## Installation +1. Cloner le dépôt : +- git clone https://github.com/ppxt-code/booki-starter-code.git +2. lancer l'application: +- sur index.html Mbdr/Open with Live Server \ No newline at end of file