From c16ab7a6511a859611c36b7d551d6ebdfc69a51e Mon Sep 17 00:00:00 2001 From: ImaneZ21 Date: Fri, 8 Nov 2024 18:35:02 +0100 Subject: [PATCH 01/34] TEST --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 53512c75..643fc620 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,7 @@
-

Les plus populaires

+

Les plus populaires TEST

From e58aa488e89446e158122d7f78ef202570b358e8 Mon Sep 17 00:00:00 2001 From: ImaneZ21 Date: Fri, 8 Nov 2024 18:35:49 +0100 Subject: [PATCH 02/34] TEST --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 53512c75..643fc620 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,7 @@
-

Les plus populaires

+

Les plus populaires TEST

From a5d590316cddeca507ba3101b7eedbdbd86e1a10 Mon Sep 17 00:00:00 2001 From: ImaneZ21 Date: Fri, 8 Nov 2024 18:42:45 +0100 Subject: [PATCH 03/34] return back test --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 643fc620..53512c75 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,7 @@
-

Les plus populaires TEST

+

Les plus populaires

From 8d856d8a4cdff0b256969b43612a991690acfdda Mon Sep 17 00:00:00 2001 From: ImaneZ21 Date: Fri, 8 Nov 2024 22:29:16 +0100 Subject: [PATCH 04/34] Add header --- css/style.css | 22 ++++++++++++++++++++-- index.html | 9 +++++++-- 2 files changed, 27 insertions(+), 4 deletions(-) diff --git a/css/style.css b/css/style.css index f6c96c4d..0e679528 100644 --- a/css/style.css +++ b/css/style.css @@ -3,6 +3,8 @@ font-family: 'Raleway', sans-serif; } + + :root { --main-color: #0065FC; --main-bg-color: #F2F2F2; @@ -18,10 +20,25 @@ body { justify-content: center; } +/******Header******/ + +header { + justify-content: space-around; +} + +.logo { + display: flex; + width: 40%; + height: auto; + image-rendering:optimizeQuality; +} + +/******Main******/ + .main-container { width: 100%; max-width: 1440px; - padding: 0 50px; + padding: 50px 50px; box-sizing: border-box; } @@ -58,6 +75,7 @@ a { color: var(--main-bg-color) } + /****** Hebergements And Populaires ***********/ .hebergements-and-populaires { display: flex; @@ -121,7 +139,7 @@ a { margin-bottom: 5px; } - +/****** Footer ***********/ /* Le code ci-dessous correspond à la version responsive uniquement */ diff --git a/index.html b/index.html index 53512c75..11551e16 100644 --- a/index.html +++ b/index.html @@ -15,8 +15,13 @@ -
-
+
+ +
+ +
+
+
From f3e028cb07dab26367d8274afa258f79e6424efc Mon Sep 17 00:00:00 2001 From: ImaneZ21 Date: Fri, 8 Nov 2024 23:15:29 +0100 Subject: [PATCH 05/34] modify content --- css/style.css | 10 ++++++++-- index.html | 14 ++++++++------ 2 files changed, 16 insertions(+), 8 deletions(-) diff --git a/css/style.css b/css/style.css index 0e679528..5b0ea470 100644 --- a/css/style.css +++ b/css/style.css @@ -28,11 +28,17 @@ header { .logo { display: flex; - width: 40%; + width: 5%; height: auto; - image-rendering:optimizeQuality; + justify-content: flex-start; } +.button-header{ + justify-content: flex-end; + +} + + /******Main******/ .main-container { diff --git a/index.html b/index.html index 11551e16..ca885c7c 100644 --- a/index.html +++ b/index.html @@ -10,18 +10,20 @@ + crossorigin="anonymous" referrerpolicy="no-referrer"/> -
- +
+
+
- +
Hébergements
+
Activités
-
-
+
+
From 0a40997dd58b96607b426b6a7b1c038816bba5e0 Mon Sep 17 00:00:00 2001 From: ImaneZ21 Date: Sat, 9 Nov 2024 17:39:40 +0100 Subject: [PATCH 06/34] Add navigation --- css/style.css | 51 ++++++++++++++++++++++++++++++++++++++++++++++----- index.html | 19 ++++++++++++++----- 2 files changed, 60 insertions(+), 10 deletions(-) diff --git a/css/style.css b/css/style.css index 5b0ea470..55971eb5 100644 --- a/css/style.css +++ b/css/style.css @@ -23,21 +23,62 @@ body { /******Header******/ header { - justify-content: space-around; + display: flex; + align-items: center; + margin-top: -40px; + } + .logo { display: flex; width: 5%; - height: auto; - justify-content: flex-start; + +} + +.button-header { + display: flex; + gap: 40px; + cursor: pointer; + padding-top: 3px; + border-top: 20px ; + padding-bottom: 50px; + padding-left: 75%; + } -.button-header{ - justify-content: flex-end; + +.button:hover { + color: #0065FC; + border-top: 2px #0065FC solid; } +/******Navigation******/ + +.nav-container { + box-sizing: border-box; +} + +.nav-container h1{ + margin-bottom: 0%; +} + +.nav-container p{ + margin-bottom: 10px; + margin-top: 8px; +} + +.fa-location-dot{ + color: black; + background-color: #F2F2F2; + padding : 15px 15px 15px 15px; + border-radius: 13px 0px 0px 13px; +} + +.booki-search{ + background-color: red; +} /******Main******/ diff --git a/index.html b/index.html index ca885c7c..0403bce5 100644 --- a/index.html +++ b/index.html @@ -18,12 +18,21 @@
-
-
Hébergements
-
Activités
-
+
+
Hébergements
+
Activités
+
- +
From 40906b0b5bdc4f8c3f9e433fab1bdf2f386f5723 Mon Sep 17 00:00:00 2001 From: ImaneZ21 Date: Sat, 9 Nov 2024 19:30:49 +0100 Subject: [PATCH 07/34] fix --- css/style.css | 48 ++++++++++++++++++++++++++++++------------------ index.html | 7 ++++--- 2 files changed, 34 insertions(+), 21 deletions(-) diff --git a/css/style.css b/css/style.css index 55971eb5..d750a2a4 100644 --- a/css/style.css +++ b/css/style.css @@ -3,8 +3,6 @@ font-family: 'Raleway', sans-serif; } - - :root { --main-color: #0065FC; --main-bg-color: #F2F2F2; @@ -24,40 +22,38 @@ body { header { display: flex; - align-items: center; - margin-top: -40px; - + flex-direction: row; + justify-content: space-between; + margin-top: -50px; } .logo { - display: flex; - width: 5%; - + padding-top: 50px; + width: 5%; } .button-header { display: flex; gap: 40px; - cursor: pointer; - padding-top: 3px; - border-top: 20px ; - padding-bottom: 50px; - padding-left: 75%; + padding-top: 18px; + border-top: 2px solid transparent; } - .button:hover { + cursor: pointer; color: #0065FC; border-top: 2px #0065FC solid; - + padding-top: 18px; + margin-top: -18px; } /******Navigation******/ .nav-container { - box-sizing: border-box; + display: flex; + flex-direction: column; } .nav-container h1{ @@ -65,7 +61,7 @@ header { } .nav-container p{ - margin-bottom: 10px; + margin-bottom: 30px; margin-top: 8px; } @@ -77,9 +73,24 @@ header { } .booki-search{ - background-color: red; + background-color: white; + border-block: 1px #F2F2F2 solid; + padding-top: 13px; + padding-bottom: 13px; + padding-left: 10px; + padding-right: 10px; + margin-left: -5px; + margin-right: -5px; } +.search{ + color: white; + background-color: #0065FC; + padding: 15px 15px 15px 15px; + border-radius: 0px 13px 13px 0; +} + + /******Main******/ .main-container { @@ -127,6 +138,7 @@ a { .hebergements-and-populaires { display: flex; justify-content: space-between; + margin-top: 10px; } .hebergements-and-populaires section { diff --git a/index.html b/index.html index 0403bce5..3cbc06ad 100644 --- a/index.html +++ b/index.html @@ -26,10 +26,11 @@ From 1510760885ec4b0ebe7f04ccb5158499b7427d9b Mon Sep 17 00:00:00 2001 From: ImaneZ21 Date: Sat, 9 Nov 2024 21:50:58 +0100 Subject: [PATCH 08/34] fix 2 --- css/style.css | 32 +++++++++++++++++++++----------- index.html | 1 + 2 files changed, 22 insertions(+), 11 deletions(-) diff --git a/css/style.css b/css/style.css index d750a2a4..44f6100d 100644 --- a/css/style.css +++ b/css/style.css @@ -24,7 +24,7 @@ header { display: flex; flex-direction: row; justify-content: space-between; - margin-top: -50px; + margin-top: -60px; } @@ -36,7 +36,7 @@ header { .button-header { display: flex; gap: 40px; - padding-top: 18px; + padding-top: 20px; border-top: 2px solid transparent; } @@ -45,8 +45,8 @@ header { cursor: pointer; color: #0065FC; border-top: 2px #0065FC solid; - padding-top: 18px; - margin-top: -18px; + padding-top: 20px; + margin-top: -20px; } /******Navigation******/ @@ -66,23 +66,26 @@ header { } .fa-location-dot{ + color: black; background-color: #F2F2F2; padding : 15px 15px 15px 15px; border-radius: 13px 0px 0px 13px; } + .booki-search{ - background-color: white; - border-block: 1px #F2F2F2 solid; + + margin-left: 20px; + margin-right: 0px; + gap: 10%; + border-top: 1px red solid; + border-bottom: 1px red solid; padding-top: 13px; - padding-bottom: 13px; - padding-left: 10px; - padding-right: 10px; - margin-left: -5px; - margin-right: -5px; + padding-bottom : 13px; } + .search{ color: white; background-color: #0065FC; @@ -90,6 +93,13 @@ header { border-radius: 0px 13px 13px 0; } +.filtres{ + display: flex; + margin-top: 20px; + font-weight: 700; + +} + /******Main******/ diff --git a/index.html b/index.html index 3cbc06ad..a53f5656 100644 --- a/index.html +++ b/index.html @@ -33,6 +33,7 @@

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

Rechercher
+
Filtres
From 6fefd3b5c69fb65a7f050fcd6c77def76b279440 Mon Sep 17 00:00:00 2001 From: ImaneZ21 Date: Mon, 11 Nov 2024 15:49:35 +0100 Subject: [PATCH 09/34] Filtres --- css/style.css | 56 ++++++++++++++++++++++++++++++++++++++++++--------- index.html | 31 ++++++++++++++++++++++++---- 2 files changed, 74 insertions(+), 13 deletions(-) diff --git a/css/style.css b/css/style.css index 44f6100d..5752ec16 100644 --- a/css/style.css +++ b/css/style.css @@ -43,8 +43,8 @@ header { .button:hover { cursor: pointer; - color: #0065FC; - border-top: 2px #0065FC solid; + color: var(--main-color); + border-top: 2px var(--main-color) solid; padding-top: 20px; margin-top: -20px; } @@ -65,10 +65,14 @@ header { margin-top: 8px; } +.article-search{ + flex-direction: row; +} + .fa-location-dot{ color: black; - background-color: #F2F2F2; + background-color: var(--main-bg-color); padding : 15px 15px 15px 15px; border-radius: 13px 0px 0px 13px; } @@ -79,8 +83,8 @@ header { margin-left: 20px; margin-right: 0px; gap: 10%; - border-top: 1px red solid; - border-bottom: 1px red solid; + border-top: 2px var(--main-bg-color) solid; + border-bottom: 2px var(--main-bg-color) solid; padding-top: 13px; padding-bottom : 13px; } @@ -88,18 +92,52 @@ header { .search{ color: white; - background-color: #0065FC; - padding: 15px 15px 15px 15px; + background-color: var(--main-color); + padding: 15px; border-radius: 0px 13px 13px 0; } + +.article-filtres{ + display: flex; + margin-top: 40px; + margin-bottom: 40px; +} + .filtres{ display: flex; - margin-top: 20px; - font-weight: 700; + font-weight: bold; +} + +.text-filtres{ + margin-top: -15px; + margin-left: 10px; + border: 2px var(--main-bg-color) solid; + padding : 12px; + border-radius: 40px; } +.text-filtres:hover{ + background-color: var(--filter-bg-color); + cursor: pointer; +} + +.information-filtres{ + display: flex; + gap: 10px; +} + +.fa-info{ + display: flex; + justify-content: center; + align-items: center; + border:2px var(--main-bg-color)solid; + border-radius: 50%; + height: 30px; + width: 30px; + +} /******Main******/ diff --git a/index.html b/index.html index a53f5656..c430a33d 100644 --- a/index.html +++ b/index.html @@ -24,16 +24,39 @@
From 46fb6ab3b2d9635ca1d52b474db3a4cc9a348637 Mon Sep 17 00:00:00 2001 From: ImaneZ21 Date: Mon, 11 Nov 2024 16:06:51 +0100 Subject: [PATCH 10/34] fix --- css/style.css | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/css/style.css b/css/style.css index 5752ec16..67aa7e60 100644 --- a/css/style.css +++ b/css/style.css @@ -29,8 +29,8 @@ header { .logo { - padding-top: 50px; - width: 5%; + padding-top: 40px; + width: 60px; } .button-header { @@ -54,15 +54,16 @@ header { .nav-container { display: flex; flex-direction: column; + box-sizing: border-box; } .nav-container h1{ - margin-bottom: 0%; + margin-top: 60px; + margin-bottom: -5px; } .nav-container p{ margin-bottom: 30px; - margin-top: 8px; } .article-search{ @@ -100,8 +101,8 @@ header { .article-filtres{ display: flex; - margin-top: 40px; - margin-bottom: 40px; + margin-top: 50px; + margin-bottom: 20px; } .filtres{ @@ -134,8 +135,8 @@ header { align-items: center; border:2px var(--main-bg-color)solid; border-radius: 50%; - height: 30px; - width: 30px; + height: 42px; + width: 42px; } From f7319dcaf6479667a35c505a9d9daf125ca4bbc9 Mon Sep 17 00:00:00 2001 From: ImaneZ21 Date: Mon, 11 Nov 2024 16:20:44 +0100 Subject: [PATCH 11/34] fix --- css/style.css | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/css/style.css b/css/style.css index 67aa7e60..ab8ac810 100644 --- a/css/style.css +++ b/css/style.css @@ -67,27 +67,23 @@ header { } .article-search{ - flex-direction: row; + display: flex; + flex-direction: row; + } .fa-location-dot{ - color: black; background-color: var(--main-bg-color); - padding : 15px 15px 15px 15px; + padding : 15px; border-radius: 13px 0px 0px 13px; } .booki-search{ - - margin-left: 20px; - margin-right: 0px; - gap: 10%; border-top: 2px var(--main-bg-color) solid; border-bottom: 2px var(--main-bg-color) solid; - padding-top: 13px; - padding-bottom : 13px; + padding: 13px; } From e045b6a40cfc9d4e4950fad71c3cfe39be5b3bdc Mon Sep 17 00:00:00 2001 From: ImaneZ21 Date: Mon, 11 Nov 2024 16:40:32 +0100 Subject: [PATCH 12/34] fix filtres --- css/style.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/css/style.css b/css/style.css index ab8ac810..b42ce2a0 100644 --- a/css/style.css +++ b/css/style.css @@ -108,6 +108,7 @@ header { .text-filtres{ + display: flex; margin-top: -15px; margin-left: 10px; border: 2px var(--main-bg-color) solid; @@ -120,6 +121,10 @@ header { cursor: pointer; } +.text-filtres span{ + margin-left: 10px; +} + .information-filtres{ display: flex; gap: 10px; From 96f28faf8fb3404a26ec6ad030079c4497773c5e Mon Sep 17 00:00:00 2001 From: ImaneZ21 Date: Mon, 11 Nov 2024 18:32:26 +0100 Subject: [PATCH 13/34] fix filtres --- css/style.css | 37 +++++++++++++++++++++++-------------- index.html | 17 +++++++++-------- 2 files changed, 32 insertions(+), 22 deletions(-) diff --git a/css/style.css b/css/style.css index b42ce2a0..7ee12672 100644 --- a/css/style.css +++ b/css/style.css @@ -18,6 +18,18 @@ body { justify-content: center; } +.main-container { + width: 100%; + max-width: 1440px; + padding: 50px 50px; + box-sizing: border-box; +} + +a { + color: inherit; + text-decoration: none; +} + /******Header******/ header { @@ -80,10 +92,18 @@ header { } -.booki-search{ +#booki-search{ + padding: 13px; + width: 12%; border-top: 2px var(--main-bg-color) solid; border-bottom: 2px var(--main-bg-color) solid; - padding: 13px; + border-left: var(--main-bg-color) solid; + border-right: white; +} + +#booki-search::placeholder{ + font-weight: bold; + color: black; } @@ -95,6 +115,7 @@ header { } + .article-filtres{ display: flex; margin-top: 50px; @@ -143,18 +164,6 @@ header { /******Main******/ -.main-container { - width: 100%; - max-width: 1440px; - padding: 50px 50px; - box-sizing: border-box; -} - -a { - color: inherit; - text-decoration: none; -} - .section-title { margin: 0; font-size: 22px; diff --git a/index.html b/index.html index c430a33d..1567652a 100644 --- a/index.html +++ b/index.html @@ -27,13 +27,13 @@

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

En plein centre ville ou en pleine nature

-
+
- Marseille, France + Rechercher -
+
-
+
Filtres
@@ -52,16 +52,17 @@

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

Nos pépites
-
-
+
+

Plus de 500 logements sont disponibles dans cette ville

- +
- +

Hébergements à Marseille

+
From caca8876bfe4223b4b0bf4b298cdf19df448ce58 Mon Sep 17 00:00:00 2001 From: ImaneZ21 Date: Tue, 12 Nov 2024 21:02:33 +0100 Subject: [PATCH 14/34] =?UTF-8?q?add=20h=C3=A9bergements=20=C3=A0=20marsei?= =?UTF-8?q?lle?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 60 ++++++++++++++++++++++-- index.html | 127 ++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 180 insertions(+), 7 deletions(-) diff --git a/css/style.css b/css/style.css index 7ee12672..92393ba0 100644 --- a/css/style.css +++ b/css/style.css @@ -53,7 +53,7 @@ header { } -.button:hover { +#button-hebergements:hover, #button-activites:hover { cursor: pointer; color: var(--main-color); border-top: 2px var(--main-color) solid; @@ -94,7 +94,7 @@ header { #booki-search{ padding: 13px; - width: 12%; + width: 10%; border-top: 2px var(--main-bg-color) solid; border-bottom: 2px var(--main-bg-color) solid; border-left: var(--main-bg-color) solid; @@ -164,7 +164,7 @@ header { /******Main******/ -.section-title { +#section-title { margin: 0; font-size: 22px; } @@ -210,8 +210,62 @@ header { /****** Hebergements ***********/ .hebergements { width: 65%; + flex-direction: row; +} + +.hebergements-title{ + display: flex; + justify-content: space-between; + align-items: center; } +.marseille-cards { + display: flex; + gap: 20px; +} + +.marseille-cards .m-cards{ + background-color: white; + margin-top: 10px; + padding: 5px; + border-radius: 20px; + width: 250px; +} + +.marseille-cards img{ + width: 100%; + height: 120px; + border-top-left-radius: 20px; + border-top-right-radius: 20px; + object-fit: cover; +} + +.marseille-cards .m-cards-content{ + width: 100%; + padding-left: 15px; + display: flex; + flex-direction: column; +} + +.marseille-cards .room-title{ + margin-top: 0px; + margin-bottom: 4px; +} + +.marseille-cards .room-subtitle{ + margin: 0; +} + +.marseille-cards .room-rating{ + margin-bottom: 5px; +} + + + + + + + /****** Populaires ***********/ .populaires { width: 32%; diff --git a/index.html b/index.html index 1567652a..1d8ede96 100644 --- a/index.html +++ b/index.html @@ -19,8 +19,8 @@
-
Hébergements
-
Activités
+ Hébergements + Activités
From dbb500f82c085a373247712d2b4e4d8f10d130e0 Mon Sep 17 00:00:00 2001 From: ImaneZ21 Date: Sun, 24 Nov 2024 00:18:26 +0100 Subject: [PATCH 30/34] =?UTF-8?q?final=20fix=20h=C3=A9bergement=20responsi?= =?UTF-8?q?ve?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/css/style.css b/css/style.css index b49f98be..c8288357 100644 --- a/css/style.css +++ b/css/style.css @@ -227,22 +227,26 @@ header { width: 65%; } -.hebergements-title{ - display: flex; - justify-content: space-between; - align-items: center; +.hebergements h2{ + margin-top: -5px; } .hebergement-cards { display: flex; - gap: 20px; flex-wrap: wrap; justify-content: space-between; + gap: 20px; } .hebergement-cards .card{ margin-top: 10px; - width: 240px; + display: flex; + flex-direction: column; + height: 210px; +} + +.hebergement-cards a{ + width: 30%; } .hebergement-cards img{ @@ -255,10 +259,10 @@ header { .hebergement-cards .card-content{ width: 100%; - height: 80px; padding-left: 15px; display: flex; flex-direction: column; + justify-content: space-between; } .hebergement-cards .card-title{ From 95a752d67d27831047de879a818db518cb42a030 Mon Sep 17 00:00:00 2001 From: ImaneZ21 Date: Sun, 24 Nov 2024 18:58:36 +0100 Subject: [PATCH 31/34] final fix les plus populaires responsive --- css/style.css | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/css/style.css b/css/style.css index c8288357..32f1f1ed 100644 --- a/css/style.css +++ b/css/style.css @@ -234,7 +234,6 @@ header { .hebergement-cards { display: flex; flex-wrap: wrap; - justify-content: space-between; gap: 20px; } @@ -242,7 +241,7 @@ header { margin-top: 10px; display: flex; flex-direction: column; - height: 210px; + height: 215px; } .hebergement-cards a{ @@ -263,6 +262,7 @@ header { display: flex; flex-direction: column; justify-content: space-between; + box-sizing: border-box; } .hebergement-cards .card-title{ @@ -636,10 +636,19 @@ header { background-color: white !important; } + .hebergement-cards{ + flex-direction: column; + } + .hebergement-cards .card{ - width: 350px; + width: 100%; } + .hebergement-cards a{ + width: 100%; + } + + /*Populaires*/ @@ -649,6 +658,10 @@ header { } + .populaires-cards a{ + width: 100%; + } + /*activités*/ .activites-cards { From 130349fecbd7949dc45387d993120169f1b126eb Mon Sep 17 00:00:00 2001 From: ImaneZ21 Date: Sun, 24 Nov 2024 20:50:31 +0100 Subject: [PATCH 32/34] final fix P2 --- css/style.css | 76 +++++++++++++++++++++++++++++---------------------- index.html | 9 ++++-- 2 files changed, 49 insertions(+), 36 deletions(-) diff --git a/css/style.css b/css/style.css index 32f1f1ed..f62449eb 100644 --- a/css/style.css +++ b/css/style.css @@ -39,7 +39,6 @@ header { margin-top: -60px; } - .logo { padding-top: 40px; width: 60px; @@ -336,33 +335,39 @@ header { /****** Activités à Marseille ********/ #activites { - display: flex; - justify-content: space-between; margin-top: 50px; margin-left: 30px; + margin-bottom: 30px; } .activites-cards{ display: flex; - flex-wrap: wrap; - gap: 20px; +} + +.activites-cards a{ + width: 25%; + margin-left: 30px; + margin-right: -40px; } .activites-cards .card{ - width: 280px; - margin: 13px; + width: 86%; + margin: 0px; + padding: 0px; } .activites-cards img{ - width: 290px; + width: 100%; height: 380px; border-radius: 20px 20px 0px 0px; + display: flex; object-fit: cover; - margin: -5px; } .activites-cards .card-title{ - margin-left: 13px; + margin-left: 15px; + padding-bottom: 20px; + height: 20px; } @@ -371,7 +376,6 @@ header { .footer-container { display: flex; background-color: var(--main-bg-color); - padding: 30px; margin-top: 30px; margin-bottom: -60px; } @@ -379,20 +383,27 @@ header { .informations-column{ display: flex; flex-direction: row; - gap: 260px; + gap: 80%; + padding-left: 25px; + width: 30%; } .informations { gap: 30px; display: flex; - font-weight: bold; flex-direction: column; - flex-wrap: wrap; + margin-bottom: 20px; +} + +.informations h3{ + margin-bottom: 0px; + width: 180%; } + .informations span{ - margin-top: -18px; - font-weight: lighter; + margin-top: -15px; + width: 180%; } @@ -477,22 +488,15 @@ header { /*Activités*/ - - .activites-cards{ - gap: 0px; - width: 100%; - } - .activites-cards .card{ - width: 180px; + width: 80%; } .activites-cards img{ - width: 190px; - height: 210px; - margin: -5px; + width: 100%; + height: 180px; } - + .activites-cards .card-title{ font-size: 15px; margin-top: 25px; @@ -504,7 +508,7 @@ header { /*footer*/ .informations-column{ - gap: 120px; + width: 22%; } } @@ -664,20 +668,26 @@ header { /*activités*/ + .activites-cards { flex-direction: column; + margin-left: -15px; } - /*footer*/ + .activites-cards .card{ + width: 100%; + } - .footer-container{ - margin-left: -25px; - margin-right: -15px; + .activites-cards a{ + width: 90%; } + + + /*footer*/ .informations-column{ flex-direction: column; - gap: 35px; font-size: 18px; + width: 100%; } } \ No newline at end of file diff --git a/index.html b/index.html index 2466d33e..e6416cb2 100644 --- a/index.html +++ b/index.html @@ -281,16 +281,19 @@

Notre-Dame-De-la-Garde

-
A propos +
+

À propos

Fonctionnement du site Conditions générales Données et confidentialité
-
Nos hébergements +
+

Nos hébergements

Charte qualité Proposer votre hôtel
-
Assistance +
+

Assistance

Centre d'aide Nous contacter
From fc6fc1abc5bb1a3e5983ebaf9bc53e98d10d4519 Mon Sep 17 00:00:00 2001 From: ImaneZ21 Date: Tue, 26 Nov 2024 22:01:52 +0100 Subject: [PATCH 33/34] Final P2 --- css/style.css | 22 +++++++++++++--------- index.html | 4 ++-- 2 files changed, 15 insertions(+), 11 deletions(-) diff --git a/css/style.css b/css/style.css index f62449eb..01c7db17 100644 --- a/css/style.css +++ b/css/style.css @@ -72,6 +72,7 @@ header { .hebergements-container h1{ margin-top: 60px; margin-bottom: -5px; + font-size: x-large; } .hebergements-container p{ @@ -227,13 +228,14 @@ header { } .hebergements h2{ - margin-top: -5px; + margin-top: -1px; } .hebergement-cards { display: flex; flex-wrap: wrap; - gap: 20px; + gap: 25px; + margin-right: -30px; } .hebergement-cards .card{ @@ -256,18 +258,20 @@ header { } .hebergement-cards .card-content{ - width: 100%; + max-width: 100%; padding-left: 15px; display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; + overflow: hidden; } .hebergement-cards .card-title{ margin-top: 8px; margin-bottom: 0px; - padding-bottom: 10px; + padding-bottom: 9px; + display: flex; } .hebergement-cards .card-subtitle{ @@ -281,7 +285,6 @@ header { #afficher-plus{ - font-weight: bold; margin-top: 30px; padding-top: 10px; } @@ -296,6 +299,7 @@ header { display: flex; justify-content: space-between; align-items: center; + margin-top: -20px; } .populaires-cards .card { @@ -400,7 +404,6 @@ header { width: 180%; } - .informations span{ margin-top: -15px; width: 180%; @@ -508,7 +511,8 @@ header { /*footer*/ .informations-column{ - width: 22%; + width: 25%; + font-size: 15px; } } @@ -645,7 +649,7 @@ header { } .hebergement-cards .card{ - width: 100%; + width: 91%; } .hebergement-cards a{ @@ -687,7 +691,7 @@ header { .informations-column{ flex-direction: column; - font-size: 18px; + font-size: 15px; width: 100%; } } \ No newline at end of file diff --git a/index.html b/index.html index e6416cb2..ebbeb597 100644 --- a/index.html +++ b/index.html @@ -180,7 +180,7 @@

Auberge Le Panier

-

Afficher Plus

+

Afficher Plus

@@ -249,7 +249,7 @@

Hôtel Bleu et Blanc

-

Activités à Marseille

+

Activités à Marseille

From 629ce0a2f64fd129a3d421c5c22a1c248d34928b Mon Sep 17 00:00:00 2001 From: ImaneZ21 Date: Fri, 29 Nov 2024 00:15:32 +0100 Subject: [PATCH 34/34] P2 --- css/style.css | 32 ++++++++++++++++++++++++++------ 1 file changed, 26 insertions(+), 6 deletions(-) diff --git a/css/style.css b/css/style.css index 01c7db17..713b6c4f 100644 --- a/css/style.css +++ b/css/style.css @@ -139,7 +139,7 @@ header { display: flex; margin-left: 10px; border: 2px var(--main-bg-color) solid; - padding : 12px; + padding : 15px; border-radius: 40px; } @@ -540,7 +540,7 @@ header { align-items: center; /* Centre les éléments horizontalement */ justify-content: center; /* Centre les éléments verticalement */ margin-left: -25px; - margin-right: -25px; + margin-right: -20px; } .logo{ @@ -616,7 +616,8 @@ header { } .hebergements-filters{ - margin-right: -25px; + margin-right: -20px; + box-sizing: border-box; } .filter-title{ @@ -626,14 +627,28 @@ header { .filters{ flex-wrap: wrap; - width: 100%; + width: 100%; } .filter-text{ margin: 5px; - width: 40%; + width: calc(50% - 10px); + box-sizing: border-box; + white-space: nowrap; + overflow: hidden; + padding: 12px 15px; + } + + .filter-text .fa-solid{ + font-size: 19px; + margin-left: 0; + } + + .filter-text span{ + font-size: 15px; } + .filter-info .fa-solid{ margin-top: 20px; } @@ -688,10 +703,15 @@ header { /*footer*/ + .footer-container{ + margin-left: -25px; + margin-right: -20px; + } + .informations-column{ flex-direction: column; font-size: 15px; - width: 100%; + width: 40%; } } \ No newline at end of file