From 77dec435cd2c41c7eed4a3e120c79e13421d2f6b Mon Sep 17 00:00:00 2001 From: Angerome22 Date: Sun, 7 Apr 2024 15:16:44 +0200 Subject: [PATCH 01/26] =?UTF-8?q?R=C3=A9alisation=20du=20header?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- header.txt | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 header.txt diff --git a/header.txt b/header.txt new file mode 100644 index 00000000..e69de29b From 47116509ca6c771c39dee6e2e9bfa13044f2003b Mon Sep 17 00:00:00 2001 From: Angerome22 Date: Sun, 7 Apr 2024 15:21:28 +0200 Subject: [PATCH 02/26] =?UTF-8?q?futur=20r=C3=A9alisation=20du=20header?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- header.txt | 1 + 1 file changed, 1 insertion(+) diff --git a/header.txt b/header.txt index e69de29b..a71428fc 100644 --- a/header.txt +++ b/header.txt @@ -0,0 +1 @@ +Réalisation du header \ No newline at end of file From f65259d36c5845d0a85abf84ccfcf44b6b839944 Mon Sep 17 00:00:00 2001 From: Angerome22 Date: Thu, 11 Apr 2024 15:34:32 +0200 Subject: [PATCH 03/26] =?UTF-8?q?d=C3=A9coupage=20de=20la=20maquette=20=20?= =?UTF-8?q?ajout=20section=20hebergements=20activit=C3=A9s=20et=20header?= =?UTF-8?q?=20et=20footer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 184 ++++++++++++++++++++++++++++---------------------- index.html | 134 ++++++++++++++++++++++++++++++++++-- 2 files changed, 230 insertions(+), 88 deletions(-) diff --git a/css/style.css b/css/style.css index f6c96c4d..f1d396d8 100644 --- a/css/style.css +++ b/css/style.css @@ -1,167 +1,189 @@ /****** General ***********/ * { - font-family: 'Raleway', sans-serif; + font-family: "Raleway", sans-serif; } :root { - --main-color: #0065FC; - --main-bg-color: #F2F2F2; - --filter-bg-color: #DEEBFF; + --main-color: #0065fc; + --main-bg-color: #f2f2f2; + --filter-bg-color: #deebff; } .fa-solid { - color: var(--main-color); + color: var(--main-color); } body { - display: flex; - justify-content: center; -} - + display: flex; + justify-content: center; + /*enlever la marge du body par défaut*/ + margin: 0; +} +/* Ajout du css pour le header*/ +nav { + display: flex; + justify-content: space-between; /*remplir d'espace entre le logo et le menu*/ + align-items: center; /*centrer le menu au milieu du logo*/ +} +/*reduction de la taille du logo*/ +nav img { + height: 20px; +} +/* liste mise en flex et enlever les puces*/ +nav ul { + display: flex; + list-style: none; +} +/*séparation des 2 LI */ +nav li { + margin: 0 0 0 20px; +} +/* fin mise en forme du header */ .main-container { - width: 100%; - max-width: 1440px; - padding: 0 50px; - box-sizing: border-box; + width: 100%; + max-width: 1440px; + padding: 0 50px; + box-sizing: border-box; } a { - color: inherit; - text-decoration: none; + color: inherit; + text-decoration: none; } .section-title { - margin: 0; - font-size: 22px; + margin: 0; + font-size: 22px; } .card { - background-color: white; - border-radius: 20px; - padding: 5px; - filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1)); + background-color: white; + border-radius: 20px; + padding: 5px; + filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1)); } .card img { - object-fit: cover; + object-fit: cover; } .card-title { - font-size: 16px; + font-size: 16px; } .euro { - font-weight: 700; + font-weight: 700; } .neutral-star { - color: var(--main-bg-color) + color: var(--main-bg-color); } /****** Hebergements And Populaires ***********/ .hebergements-and-populaires { - display: flex; - justify-content: space-between; + display: flex; + justify-content: space-between; } .hebergements-and-populaires section { - background-color: var(--main-bg-color); - border-radius: 20px; - padding: 30px; - box-sizing: border-box; + background-color: var(--main-bg-color); + border-radius: 20px; + padding: 30px; + box-sizing: border-box; } /****** Hebergements ***********/ .hebergements { - width: 65%; + width: 65%; } +/* ajouter le css de title, cards,img,card content, card title,card subtitle, card rating*/ +.hebergements-cards .card { + display: flex; +} /****** Populaires ***********/ .populaires { - width: 32%; + width: 32%; } .populaires-title { - display: flex; - justify-content: space-between; - align-items: center; + display: flex; + justify-content: space-between; + align-items: center; } .populaires-cards .card { - display: flex; - margin-top: 33px; + display: flex; + margin-top: 33px; } .populaires-cards img { - width: 33%; - height: 136px; - border-top-left-radius: 20px; - border-bottom-left-radius: 20px; + width: 33%; + height: 136px; + border-top-left-radius: 20px; + border-bottom-left-radius: 20px; } .populaires-cards .card-content { - width: 67%; - padding-left: 15px; - display: flex; - flex-direction: column; - justify-content: space-between; - box-sizing: border-box; + width: 67%; + padding-left: 15px; + display: flex; + flex-direction: column; + justify-content: space-between; + box-sizing: border-box; } .populaires-cards .card-title { - margin-top: 10px; - margin-bottom: 4px; + margin-top: 10px; + margin-bottom: 4px; } .populaires-cards .card-subtitle { - margin: 0; + margin: 0; } .populaires-cards .card-rating { - margin-bottom: 5px; + margin-bottom: 5px; } - - - /* Le code ci-dessous correspond à la version responsive uniquement */ /****** Media queries ***********/ /* Medium devices (tablets, less/equal than 1024px) */ @media (max-width: 1024px) { - .hebergements-and-populaires { - flex-direction: column; - } + .hebergements-and-populaires { + flex-direction: column; + } - .hebergements { - width: 100%; - } + .hebergements { + width: 100%; + } - .populaires { - width: 100%; - margin-top: 50px; - } + .populaires { + width: 100%; + margin-top: 50px; + } - .populaires-cards { - display: flex; - flex-direction: row; - justify-content: space-between; - } + .populaires-cards { + display: flex; + flex-direction: row; + justify-content: space-between; + } - .populaires-cards a { - width: 30%; - } + .populaires-cards a { + width: 30%; + } - .populaires-cards .card-title { - font-size: 14px; - } + .populaires-cards .card-title { + font-size: 14px; + } - .populaires-cards .card-subtitle { - font-size: 13px; - } + .populaires-cards .card-subtitle { + font-size: 13px; + } } /* Small devices (phones, less than 768px) */ @media (max-width: 767.98px) { - /* ... */ -} \ No newline at end of file + /* ... */ +} diff --git a/index.html b/index.html index 4281032f..948f8ec9 100644 --- a/index.html +++ b/index.html @@ -19,24 +19,97 @@ /> -
-
+ +
+ +
+ +
+
+
+
+ +

Trouvez votre hebergements pour des vacances de rêves

+ En plein centre-ville ou en pleine nature +
+
+ +
+ + +
+
+ +
+
+
+
+
+ +
-
+
From be927dfcf46dcab388463879aa22431bee85e1ea Mon Sep 17 00:00:00 2001 From: Angerome22 Date: Fri, 12 Apr 2024 08:40:22 +0200 Subject: [PATCH 04/26] create link nav header --- index.html | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 948f8ec9..0b4b95c6 100644 --- a/index.html +++ b/index.html @@ -28,8 +28,8 @@ logo @@ -62,7 +62,7 @@

Trouvez votre hebergements pour des vacances de rêves

-

Hébergements à Marseille

+

Hébergements à Marseille

@@ -195,6 +195,7 @@

Hôtel Bleu et Blanc

+
@@ -215,7 +216,7 @@

-
- -
- -
-
- -
- - -
- - - - + From eddb598f768f0d02063b956180876cad58245134 Mon Sep 17 00:00:00 2001 From: Angerome22 Date: Sun, 21 Apr 2024 15:42:20 +0200 Subject: [PATCH 07/26] =?UTF-8?q?finalisation=20css=20header=20=C3=A0=20re?= =?UTF-8?q?voir=20sur=20simplification?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 40 +++++++++++++++++++++++++++++++--------- index.html | 14 +++++++++----- 2 files changed, 40 insertions(+), 14 deletions(-) diff --git a/css/style.css b/css/style.css index c1207a19..24587bf1 100644 --- a/css/style.css +++ b/css/style.css @@ -14,30 +14,50 @@ } body { + width: 1440px; + height: 1831.02px; display: flex; justify-content: center; + margin: 0; /*enlever la marge du body par défaut*/ } /* Ajout du css pour le header*/ header { + width: 1440px; height: 79px; - gap: 0px; - opacity: 0px; } nav { + width: 1440px; display: flex; justify-content: space-between; align-items: center; } +.menu { + width: 344px; + height: 35px; + padding: 0px 50px 0px 0px; + margin-bottom: 35px; +} /*liste mise en flex et enlever les puces*/ -nav ul { +.menu ul { display: flex; + left: 1096px; list-style: none; + align-items: center; } ul { - padding: 0px 50px 0px 0px; - gap: 45px; + width: 244px; + height: 35px; + padding: 0px 50px 0px 50px; + gap: 68px; +} + +.header-logo { + display: flex; + align-items: center; + width: 161.09px; + height: 79px; } .logo { @@ -48,10 +68,10 @@ ul { img { width: 61.09px; height: 19px; - top: 30px; + /*top: 30px; left: 50px; gap: 0px; - opacity: 0px; + opacity: 0px;*/ } /*mise en place de la couleur bleu et de la barre au survol du lien*/ header nav ul li a:hover { @@ -84,16 +104,18 @@ nav li { } */ .A { + width: 63px; + height: 35px; font-size: 16px; font-weight: 400; line-height: 18.78px; - text-align: center; } .HM { + width: 112px; + height: 35px; font-size: 16px; font-weight: 400; line-height: 18.78px; - text-align: center; } /* fin mise en forme du header */ diff --git a/index.html b/index.html index dc4dd146..aa7bd3da 100644 --- a/index.html +++ b/index.html @@ -23,13 +23,17 @@
From e9f437da207de3275551b88a485b7554e42434f4 Mon Sep 17 00:00:00 2001 From: Angerome22 Date: Thu, 25 Apr 2024 21:27:13 +0200 Subject: [PATCH 08/26] hebegements activites chtml css --- css/style.css | 160 +++++++++++++++++++++++++++++++----------- images/Icon/price.png | Bin 0 -> 531 bytes index.html | 146 ++++++++++++++++++++------------------ 3 files changed, 196 insertions(+), 110 deletions(-) create mode 100644 images/Icon/price.png diff --git a/css/style.css b/css/style.css index 24587bf1..28064cdd 100644 --- a/css/style.css +++ b/css/style.css @@ -45,14 +45,11 @@ nav { left: 1096px; list-style: none; align-items: center; -} -ul { width: 244px; height: 35px; padding: 0px 50px 0px 50px; gap: 68px; } - .header-logo { display: flex; align-items: center; @@ -68,10 +65,6 @@ ul { img { width: 61.09px; height: 19px; - /*top: 30px; - left: 50px; - gap: 0px; - opacity: 0px;*/ } /*mise en place de la couleur bleu et de la barre au survol du lien*/ header nav ul li a:hover { @@ -81,28 +74,6 @@ header nav ul li a:hover { border-top: 2px solid #0065fc; text-decoration-color: #0065fc; } - -/* -.menu { - width: Hug (344px)px; - height: Hug (35px)px; - left: 1096px; - padding: 0px 50px 0px 50px; - gap: 68px; - opacity: 0px; -} - - - -/*séparation des 2 LI -nav li { - width: 113px; - height: 35px; - gap: 0px; - opacity: 0px; - -} -*/ .A { width: 63px; height: 35px; @@ -117,7 +88,9 @@ nav li { font-weight: 400; line-height: 18.78px; } - +button { + background-color: white; +} /* fin mise en forme du header */ /*mise en forme du formulaire*/ @@ -167,6 +140,7 @@ a { .hebergements-and-populaires { display: flex; justify-content: space-between; + padding-bottom: 30px; } .hebergements-and-populaires section { @@ -180,11 +154,61 @@ a { .hebergements { width: 65%; } - -/* ajouter le css de title, cards,img,card content, card title,card subtitle, card rating +.hebergements-title { + display: flex; + align-items: center; + height: 26px; + padding-bottom: 30px; +} +.hebergements-cards { + display: flex; + flex-wrap: wrap; + align-content: center; + gap: 30px; +} .hebergements-cards .card { + width: 250.33px; + height: 207.25px; + padding: 0px 0px 15px 0px; + gap: 4px; + border-radius: 20px; +} + +.hebergements-cards img { + width: 240.33px; + height: 124px; + padding: 5px; + border-radius: 20px 20px 0px 0px; +} +.hebergements-cards .card-content { + height: 64.25px; + padding: 0px 0px 0px 15px; + gap: 8px; + box-sizing: border-box; +} +.hebergements-cards .card-title { + margin-top: 8px; + margin-bottom: 8px; +} +.hebergements-cards .card-subtitle { + margin-top: 8px; + margin-bottom: 8px; +} +.hebergements-cards .card-rating { + margin-bottom: 8px; +} +#more { display: flex; + width: 811px; + height: 21px; + + padding-top: 30px; +} +#more a { + font-size: 18px; + font-weight: 700; } + /****** Populaires ***********/ .populaires { width: 32%; @@ -229,26 +253,80 @@ a { .populaires-cards .card-rating { margin-bottom: 5px; } -.Activités { +.Activites { display: flex; - background-color: var(--main-bg-color); + flex-wrap: wrap; border-radius: 20px; padding: 30px; box-sizing: border-box; } -footer { +.Activites-title { + display: flex; + padding-bottom: 30px; +} +.Activites-cards { + width: 1280px; + height: 439px; display: flex; - flex-direction: row; justify-content: space-between; + align-content: center; + align-items: center; +} +.Activites-cards .card { + width: 297.5px; + height: 439px; +} +.Activites-cards img { + width: 297.5px; + height: 380px; + border-radius: 20px 20px 0px 0px; +} +.Activites-cards .card-content { + display: flex; + height: 59px; + padding: 20px 19px 20px 19px; + gap: 10px; + border-radius: 0px 0px 20px 20px; +} +.Activites-cards .card-title { + margin: 0; +} + +footer { + display: flex; + height: 163px; + background-color: var(--main-bg-color); +} +#a-propos, +#nos-hebergements, +#assistance { + display: flex; + height: 163px; + flex-direction: column; + width: 446.67px; } + footer ul { list-style: none; } -#a-propos #nos-hebergements #assitance { - width: 77px; - height: 21px; - gap: 0px; - opacity: 0px; +#a-propos h3 li { + padding: 0px 20px; +} + +/*footer #a-propos, +#nos-hebergements, +#assistance { + display: flex; + flex-direction: column; + align-items: center; +}/* +#a-propos, +#nos-hebergements, +#assitance ul { + display: flex; + align-items: center; + width: 446.67px; + height: 163px; } /* Le code ci-dessous correspond à la version responsive uniquement */ diff --git a/images/Icon/price.png b/images/Icon/price.png new file mode 100644 index 0000000000000000000000000000000000000000..2851e388a6d7a569b9fba864894a043915ba2322 GIT binary patch literal 531 zcmV+u0_^>XP)4!5Dld80aag_5iv3ZWS`KP`B3CR zitzW2OHfkt;Zg$%tpd=Gh$7P}Gbbi=<@<7hLd+8^yaZBA4lodB=+0mGr{!h<8gm=L zp{Ct&3#m3Pk_nqLa_s0B1NVdn@7Ap1Q>Z>v`keLGv7KA(*7#@ZdXJE=AY`{Ug-|g& z#Qi~J{`9@e+8g&glxX4DUjx;950_9a-B;|sLQd5Ld;FC#9h05Gls_`5xN2E7Sg2+m zOs7@L{^R%xZCkcly05ax=jU<~=#S;1S{`b(S1u&Z9L|uG^OcG+g75uN9HWy2+OJJF zH8RmBy57D(_?;lG2Ss(}H8aOV3J-38^Euxsp0JVZ8v*6n_e57mq#b`COZLcqemNu^ zLGrQpX5pXw*6K0*Q~Ek<7@Y9?fF2xil)nb!h65reaOE%uDmzDR$LTZ+%m$DmeFL{U VsX#gV=)nL0002ovPDHLkV1kC_<Trouvez votre hebergements pour des vacances de rêves

- - - - - +

Filtres

+ + + + +

-

infobar

+

Plus de 500 logements sont disponibles dans cette ville

@@ -67,10 +68,11 @@

Trouvez votre hebergements pour des vacances de rêves

Hébergements à Marseille

+ -
+
-
+
-
+
-
+
-
+
-
+ @@ -302,77 +304,83 @@

Hôtel Bleu et Blanc

-
-
+
+

Activités à Marseille

- -
+
-
-
-

A propos

- +
From 857b5aa8a25140daf52b22b2278f5ba0274283b3 Mon Sep 17 00:00:00 2001 From: Angerome22 Date: Wed, 8 May 2024 15:33:51 +0200 Subject: [PATCH 09/26] =?UTF-8?q?am=C3=A9lioration=20info=20group?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 338 +++++++++++++-------- index.html | 816 +++++++++++++++++++++++++++----------------------- 2 files changed, 644 insertions(+), 510 deletions(-) diff --git a/css/style.css b/css/style.css index 28064cdd..f628dc1f 100644 --- a/css/style.css +++ b/css/style.css @@ -14,95 +14,178 @@ } body { - width: 1440px; - height: 1831.02px; display: flex; justify-content: center; margin: 0; - /*enlever la marge du body par défaut*/ } -/* Ajout du css pour le header*/ +/*----------------------------------HEADER-----------------------------------------*/ header { - width: 1440px; - height: 79px; -} - -nav { - width: 1440px; display: flex; justify-content: space-between; - align-items: center; + height: 79px; + margin-bottom: 30px; } -.menu { - width: 344px; - height: 35px; - padding: 0px 50px 0px 0px; - margin-bottom: 35px; +header img { + width:4.55%; + padding: 30px 50px 30px 0px; } -/*liste mise en flex et enlever les puces*/ -.menu ul { +nav ul { display: flex; - left: 1096px; - list-style: none; - align-items: center; - width: 244px; - height: 35px; - padding: 0px 50px 0px 50px; + width: 88%; gap: 68px; -} -.header-logo { - display: flex; + list-style: none; align-items: center; - width: 161.09px; - height: 79px; -} - -.logo { - padding: 30px 50px 30px 50px; - gap: 10px; - opacity: 0px; + padding: 0px 0px 0px 50px; } -img { - width: 61.09px; - height: 19px; -} -/*mise en place de la couleur bleu et de la barre au survol du lien*/ header nav ul li a:hover { width: 140px; - padding-top: 16px; + padding-top: 14px; color: #0065fc; border-top: 2px solid #0065fc; text-decoration-color: #0065fc; } -.A { - width: 63px; - height: 35px; +.am, .hm { + height: 35px; font-size: 16px; font-weight: 400; - line-height: 18.78px; } -.HM { - width: 112px; - height: 35px; - font-size: 16px; - font-weight: 400; - line-height: 18.78px; +/*-----------------------------------FORMULAIRE-----------------------------*/ +.info-group { + height: 281px; + border: 2px yellow solid; + margin-bottom: 30px; } -button { - background-color: white; +.formulaire .section-title { + margin-bottom: 35px; +} + +.formulaire .section-title span { + font-weight: 400; + font-size: 15px; + padding-top: 8px; +} +form input { + border: none; + padding: 0px; } -/* fin mise en forme du header */ -/*mise en forme du formulaire*/ +i .fa-solid .fa-location-dot{ + text-align: center; + width: 50px; + height: 49px; + +} + +.fa-location-dot { + display: inline; + height: 18px; + width: 14px; + padding: 16px 18px 15px 18px; + border-radius: 15px 0px 0px 15px; + color: black; + background-color: #f2f2f2; + opacity: 1; + } +.city { + width: 195px; + height: 47px; + border-top: 1px #F2F2F2 solid; + border-bottom: 1px #F2F2F2 solid; + text-align: center; + font-size: 18px; + font-weight: 700; + padding: 0px; +} + +.city ::placeholder{ + color: black; +} + +.search { + width: 132px; + height: 49px; + border: none; + background-color: #0065fc; + border-radius: 0px 15px 15px 0px; + font-weight: 700; + font-size: 18px; + color: white; +} + +.filter-button { + display: flex; + padding-top: 35px; + align-items: center; + margin-bottom: 35px; + +} +.filter-title{ + width: 54px; + height: 21px; + font-weight: 700; + font-size: 18px; + padding-right: 15px; + margin: 0; +} + +.fa-solid .fa-money-bill-wave, +.fa-solid .fa-person, +.fa-solid .fa-heart, +.fa-solid .fa-fire{ + height: 22px; + width: 22px; + } + +.fa-money-bill-wave::before, +.fa-person::before, +.fa-heart::before, +.fa-fire::before { + color: var(--main-color); + padding-right: 10px; + padding-left: 17px; + + } +.fa-money-bill-wave, .fa-person, .fa-heart, .fa-fire{ + width: 169px; + height: 46px; + color: #000000; + font-size: 17px; + font-weight: 700; + align-content: center; + border-radius: 25px; + border: 2px #d9d9d9 solid; + background-color: transparent; + margin-right: 15px; + margin-bottom: ; + + } +i.fa-solid:hover { + background-color: #deebff; +} +.fa-solid .fa-info { + padding: 0px 2.5px; + height: 24px; +} + +.fa-info { + display: inline; + border-radius: 50%; + border: 1px #d9d9d9 solid; + padding: 7px 10px; + margin-right: 10px; +} + +/*.info .text-info { + +} + +/*-------------------------------MAIN-CONTAINER--------------------------------*/ .main-container { - display: block; width: 100%; max-width: 1440px; padding: 0 50px; box-sizing: border-box; - gap: 30px; } - a { color: inherit; text-decoration: none; @@ -140,7 +223,7 @@ a { .hebergements-and-populaires { display: flex; justify-content: space-between; - padding-bottom: 30px; + margin-bottom: 30px; } .hebergements-and-populaires section { @@ -155,56 +238,49 @@ a { width: 65%; } .hebergements-title { - display: flex; - align-items: center; - height: 26px; - padding-bottom: 30px; + padding-bottom: 33px; } -.hebergements-cards { +.hebergements-cards-1, +.hebergements-cards-2 { display: flex; - flex-wrap: wrap; - align-content: center; - gap: 30px; + justify-content: space-between; + margin-bottom: 30px; } -.hebergements-cards .card { - width: 250.33px; +.hebergements-cards-1 a, +.hebergements-cards-2 a { + width: 30%; height: 207.25px; - padding: 0px 0px 15px 0px; - gap: 4px; - border-radius: 20px; } - -.hebergements-cards img { - width: 240.33px; - height: 124px; - padding: 5px; - border-radius: 20px 20px 0px 0px; -} -.hebergements-cards .card-content { - height: 64.25px; - padding: 0px 0px 0px 15px; - gap: 8px; - box-sizing: border-box; -} -.hebergements-cards .card-title { - margin-top: 8px; - margin-bottom: 8px; +.hebergements-cards-1 img, +.hebergements-cards-2 img { + width: 100%; + height: 114px; + border-radius: 15px 15px 0px 0px; } -.hebergements-cards .card-subtitle { - margin-top: 8px; - margin-bottom: 8px; +.hebergements-cards-1 .card-content, +.hebergements-cards-2 .card-content { + display: flex; + justify-content: space-between; + flex-direction: column; + height: 83.25px; + padding: 3px 15px 0px 15px; } -.hebergements-cards .card-rating { - margin-bottom: 8px; + +.hebergements-cards-1 .card-title, +.hebergements-cards-2 .card-title, +.hebergements-cards-1 .card-subtitle, +.hebergements-cards-2 .card-subtitle, +.hebergements-cards-1 .card-rating, +.hebergements-cards-2 .card-rating { + margin: 0; + padding: 4px 0px; } -#more { - display: flex; + +.cta { width: 811px; height: 21px; - - padding-top: 30px; } -#more a { +.cta-link { font-size: 18px; font-weight: 700; } @@ -253,65 +329,63 @@ a { .populaires-cards .card-rating { margin-bottom: 5px; } -.Activites { - display: flex; - flex-wrap: wrap; - border-radius: 20px; +/*-----------------------------------ACTIVITES---------------------------*/ +.activites section { + border: 2px rgb(255, 187, 0) solid; padding: 30px; +} +.activites { box-sizing: border-box; } -.Activites-title { - display: flex; +.activites-title { padding-bottom: 30px; } -.Activites-cards { - width: 1280px; - height: 439px; +.activites-cards { display: flex; justify-content: space-between; - align-content: center; - align-items: center; } -.Activites-cards .card { - width: 297.5px; +.activites-cards a { + width: 22.2%; height: 439px; } -.Activites-cards img { - width: 297.5px; +.activites-cards img { + width: 100%; height: 380px; border-radius: 20px 20px 0px 0px; } -.Activites-cards .card-content { - display: flex; - height: 59px; +.activites-cards .card-content { padding: 20px 19px 20px 19px; - gap: 10px; - border-radius: 0px 0px 20px 20px; } -.Activites-cards .card-title { +.activites-cards .card-title { margin: 0; } - +/*-------------------------------------FOOTER------------------------------------------*/ footer { - display: flex; height: 163px; - background-color: var(--main-bg-color); + background-color: var(--main-bg-color); + padding-top: 30px; } -#a-propos, -#nos-hebergements, -#assistance { + +.footer { display: flex; - height: 163px; - flex-direction: column; - width: 446.67px; + justify-content: space-between; + border: 2px green solid; + margin:0px; + } -footer ul { +.footer ul { list-style: none; + padding: 0px; } -#a-propos h3 li { - padding: 0px 20px; -} +.footer li a { + + + +*/ + +/*#a-propos h3 { + padding: 0px 20px;*/ /*footer #a-propos, #nos-hebergements, diff --git a/index.html b/index.html index 9cd5a186..7b7b659d 100644 --- a/index.html +++ b/index.html @@ -1,387 +1,447 @@ - - - - Booki - - - - - - - -
-
- -
- -
-
-
-

- -

Trouvez votre hebergements pour des vacances de rêves

- En plein centre-ville ou en pleine nature -

- - - -

-

Filtres

- - - - - -

-

Plus de 500 logements sont disponibles dans cette ville

-
-
-
-
-
-

Hébergements à Marseille

-
+
+ + + + + + Note de 4 sur 5 +
+
+ + + +
+ image chambre hotel avec lit +
+
+

Auberge Le Panier

+
+
+

+ Nuit à partir de 23 +

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

Les plus populaires

- -
- -
- - + From f048c2f1afbe81fce17882adfdc76a7958e3444b Mon Sep 17 00:00:00 2001 From: Angerome22 Date: Thu, 9 May 2024 10:20:52 +0200 Subject: [PATCH 10/26] amelioration hebergements sur le responsive --- css/style.css | 62 ++++++++--------- images/Offers/Card/Rectangle 20.png | Bin 41052 -> 0 bytes index.html | 104 +++++++++++++--------------- 3 files changed, 78 insertions(+), 88 deletions(-) delete mode 100644 images/Offers/Card/Rectangle 20.png diff --git a/css/style.css b/css/style.css index f628dc1f..03f26886 100644 --- a/css/style.css +++ b/css/style.css @@ -51,8 +51,7 @@ header nav ul li a:hover { } /*-----------------------------------FORMULAIRE-----------------------------*/ .info-group { - height: 281px; - border: 2px yellow solid; + height: 281px; margin-bottom: 30px; } .formulaire .section-title { @@ -145,8 +144,7 @@ i .fa-solid .fa-location-dot{ padding-left: 17px; } -.fa-money-bill-wave, .fa-person, .fa-heart, .fa-fire{ - width: 169px; +.fa-money-bill-wave, .fa-person, .fa-heart, .fa-fire{ height: 46px; color: #000000; font-size: 17px; @@ -155,8 +153,8 @@ i .fa-solid .fa-location-dot{ border-radius: 25px; border: 2px #d9d9d9 solid; background-color: transparent; - margin-right: 15px; - margin-bottom: ; + margin-right: 15px; + padding-right: 17px; } i.fa-solid:hover { @@ -237,43 +235,43 @@ a { .hebergements { width: 65%; } -.hebergements-title { +.hebergements .section-title { padding-bottom: 33px; } -.hebergements-cards-1, -.hebergements-cards-2 { - display: flex; - justify-content: space-between; - margin-bottom: 30px; +.hebergements-cards { + display: flex; + flex-wrap: wrap; + margin-bottom: 30px; + justify-content: space-between; } -.hebergements-cards-1 a, -.hebergements-cards-2 a { + +.hebergements-cards a{ + height: 207.25px; + margin-bottom: 30px; width: 30%; - height: 207.25px; -} -.hebergements-cards-1 img, -.hebergements-cards-2 img { + } + +.hebergements img { width: 100%; height: 114px; border-radius: 15px 15px 0px 0px; } -.hebergements-cards-1 .card-content, -.hebergements-cards-2 .card-content { - display: flex; - justify-content: space-between; - flex-direction: column; - height: 83.25px; - padding: 3px 15px 0px 15px; + +.hebergements .card-title { + margin:0; + padding-top: 4px; + padding-left: 15px; } +.hebergements .card-subtitle { + padding: 8px 15px; + margin:0; -.hebergements-cards-1 .card-title, -.hebergements-cards-2 .card-title, -.hebergements-cards-1 .card-subtitle, -.hebergements-cards-2 .card-subtitle, -.hebergements-cards-1 .card-rating, -.hebergements-cards-2 .card-rating { +} + +.hebergements .card-rating { margin: 0; - padding: 4px 0px; + padding-left: 15px; + margin-bottom: 15px; } .cta { diff --git a/images/Offers/Card/Rectangle 20.png b/images/Offers/Card/Rectangle 20.png deleted file mode 100644 index bb002388b6f483ad91ce5b59256dabc721284baa..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 41052 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∈bPkvKhs~yA3*~V;Ww{3p<=}8C9b1-`vQ&-nBxbA^tO#RWAKT=T;V(Oe zI^zbO!&dKKGjJe0W4Id7F3e&G*jNN8IzQP>9IemkdPm0xa5O!V?8EaHTG`s_c$T!k zAft?Ck%n!vkfsTQB}Z$e#;J+A4GSWaq%3d+QDw$KB?tnVBb@elShV2D_X1UcAwfq^ zAOlcZ%65I9kH$ja^KeqvvZp>yWp;aN`3g%mrT&tt`+pJJGS;F#?vmn&$!*g z`^L+8slc1mgG)s#Hqy=1YPij*A}t58Wa0^U_cBLJ5pGFt|CxqyCNDDP(IC&@Y9TU@qx zYD}wf-+-i&ut)GMG85N*wwlJ}pA}kA)RLwr1&*ljIEVAl5V7`c^B3`Vt zqoO+QEUXo8EGQ2S4uFgBW*rx{@Wi)969t)Q7NCtJCG%fMb8993)+_MK;M~vQF>na< zTCP*`n42XfxeQMr73YV7G%Yd%+M7QFo@x1PLZZ$}l;`1>?uR^)vR96?ayXg_X04>Lx5Ua-eYfwNQZ0<1UTi~9=HVtG{F>W3HM1i_ zPY5%5&2r>2s4X4itDKB(reK+38%q%ZL1X@z%~2E3p@Z6KIT|bpb#kZS6^aCG&-Td6 zekek1NbkA8^J_MsX{Fqb$`y!2Hth1H4&P(yj#kx=(NjBE#$O)F?v#rI(y!@0qIgcv zaEt^Q^Y6HV+_8}ADoRXG*fn*dOpg%0Cg^SK$8Y|AO`^rG#%^pkNnqPZW$Hc>9sbr&mzsMxmU zJ{2t$`YFo9*Pwx>Ad5;&IDgGu!=@y463q1DrN(;g&9vEu&5tA-(f5xj?8a4cJ_2dq z4PXgQu4t4ABNUAFDmzj&p#VOYsS;K`R$e$`W-QMeGBw7pLP3yU<2+KNlry~FOZ`lm zOOmo{Tnu5@b$FkE+Stmyd4#lO)e?i@&5j0dG zQcsGi5B91HjXLt7Lz-(u1SQ$?7N;&Z`D7=Z?)fGXEdZqo(~_3$zm$H>$VD*0QG5|l zA*z%X={l8*=u*V>JvBIVWYB+zlp?N!_frVspl=t2&%^8*rVaLmy1kUgz{AmET0LNW zwP4P?jY&mJF~*PvGCh_~>I~i+3z!LjP^5Y)pVh*}To-nYN&^Jb8}Ty(S+`r3`fNv| zHGo_Y-#V_Jg3(VLm2~cmsTn$E)9l$gqeeIlOKcphA!HqC$dx7+c<;=ettFK)aWJ~t zQSw5N5PH72g@KZy2%jrm_ZpG-9Iyx4Hjo4hWtu?Het>O{sbdWQW39p@sOQ-JDIre? zP+$Bsi;h!eCJwoIIW*T%gpt5PscFLLl}&lc``iF!sJY}=t&wVQ3#U1cLS@SGyh%e% zgi__V5DKi2=|V|Ff1)~oREvOEMc>lsJKtX$gZJ`iIXh|ETD+8s8~Hk8DNU%(YU+s zDW@%zyIzktMEI*c?3rX&T5*WYC6=o#oUH}2JK*#oj2CkdNCQRNGf{W0`JI3|w5AuS z@6kt$>^awPHWM+oVFK7E(Jri>NY_A(u0@LeRnYO2nUEb7`9kZMmZS^LnV)yE) ziWD^qDsV8o@yh=mC(`+pW$a4$i{I+H++*^>#QmJmvZ+EYbDS#QhVapwVyQXh{XPv~lC|?=v=cJhS1XKAb(G zGh5{-bH4F`)|0GcyTy7PFa5{t375<6~WuX=4#naE>3mIe=vRSz=MU73t&O-3-`-?F8aYkqe} zV=Ste(TvtxPgHTH_xXl`!i;8=-!fZj!%-iR#IWU=L)kjt;>B6aEV^SwiXCF5u zhEyHTqwzg_Ht)2-;VjQhGncsxVpKI8jFBVOZl+Y#L8bimR$f^hb!ctG!X)u=Xpsqz zntRb}!jaCg?#eol-f;uVG%N743$sVsRm(gjwJ9ZG1;F#vWqWNpcVxC^I8$>iF!j5- zT7|y!Me4b1Ty1#uV%=}PF@~4a*JdQK_Rc6z^Ax~RS=-R?DdwY-Qe4i9pB_yMEM|e< zX)k;)DK0zVx(S&I!!}^_1x9Z!sIdqo6(3MgTM8ym@j9PIIsN%Tgb0%&+MI(5<3JdV zKJ#;Fb^wShx@4Z+QygcZeNSU(v#(sLFBUmCbaK60Jd(*0dWy!@?R6{0Mt7#!{$XHF z7)Jpzq!7{r$=l-60>=j~HC7PX9+KC_CgvI{x5sdftwTmq=3~Mv40Ur!BX3Wmf&JuU# zxfNlnae5z{x3|*Jrev6rKxo*(wR#aahcnalc;7u7&~+zkI^C`A^$JGx;wVE;r>!+o z^*dEMDpg5I;5w@uyuN&o$#_i9Fo0KIeNz&O*cZa{#C_+v^%OS%VRYjREyyzSR?bJT zzqbc_w(~FR?;%}lGN$JlWEkdwcJ>Vclb{fAs!#|<4BaR=cttmJRK_gosOFQnU`#`V zq?1M|z)*_{e9e4x^ESH@0~NNu+wF5{_Us7&kP6e+kSi6hyis+0gfS3w5{xwY7;p;g&=3s-8ek#D+C5vTt1B5!xS5eK;8a^iBrOw1tIaT_ z8Z-NvxKprC8;&;Rb*?^=)36tza`#bQ#NkkZ%~Y#F_pk>>wn8042^L9m;{~hhw9m`z zE@5hT9`hJ^BPhwIrdTxVD=^B#QB_PH1k~?B-@9P*vJ2Nfjm?Muq zT6Cdq*cj*mZEIrSl1_aLVy-n^xCA`0 zWAI<)3o$p*GVTn;S_DA(CPUqbL<_?z0uFl~g1^NCNC2ML)z~w*c_3&G z4Qb@UFXE?>zbs3W1!emjFy8qqScd5o3PaQ+Usx!GU8u;#YIe-~7+dk$!#7yGv6=;B zl0Afjnhr%^8Z+4ZmLB~nN;OLojoB`Ce+2imqMeI@2vij`wrIt{WQxkxHvPnmULVf% zvfGOb9%JIJ&YZ)=e0b;~T!;SHl|&gu07?XN69zdKJ6`T1<(jnk2KAZIxhC4RgfRNN zvfNb7bvioKX8_)%m8;3SRJv>>6RJIZQ8Pm|mwW=I3DIJCF>JQW}GjUJMwBmFh-Aj72~0P8aqNX zo^Ys(iXhyd1)*@YDQ`5@VE5Z8||PBzK!lh+iO6T-w1f;a=ceG^EcjaJJQ z81%2g=rY0951%(I;HhD46q`#XMKA)#c$}SU0Sso%mSLBz)*6G!tBy15SVCv`E`*0@ zCB7*$2!FqYFcsXSiDVwI_W%n4$u$$~&$Ow=sF~4y5;+<5{@e+7XL|$I*UyPIk#=Ag zCd5D3*fv&Jk+FbT;$UUbd~}+RPc4-x4v#9tZ6v{&Ie|9`o3(=2MATRo;6#+U^n+!Kv4pwB!sD5h?>bL zCECxc+5P6hv_({g$_wWkRLosL{fIEs@ZZ^T!6ZO`C|56T&nA_)ihfeq<(l2)lVR8K zGC*)|EL1S12rCI{SlEfjIB>>G&fJZ8df}&H^axMdcin~>G#)Oj1c)bTxCWQ-Ptn?F zAvIyZgyEg$4-VVzXt_b-Ck`=)ER8)7ns&KaeIRQ&=8 z4!ahX$X_7EF(j?dp92|#L{)fphYi7f?%iIBvH96$t2k2(t*jq={Tp+_qQGnI_uqza zbEnpHt|o;d8j$B0jh3|keRmAc9z25Ecb`HchMp|1h#%s@xpRa%hO%u~w(Z6^hkmJB zhCI}9$R-oyuaK?4NjUrNy{Yya`D^EQ`yhD05Kz~nw^X1y7}`yqZ-U0a5WWHDzg&6g zC0!Y`yOE+^E7OIFj*_lddTtmGP-Rr5Ub4&L?ySz}5h69FkB5gk)aLK_cgnSs4I06V zQ*3(dy%07Icf|Rci!&l95HoijC*%t8<`LqDtX8yD6880)rHEjsAUa z#=&_J9M=~C)0BGx8Z#%08q-`7qH#G<5V30Yra4_fo!O}-qzhCJXE54DTWw>bVv=%= zq=cf3TkJ8kh4sW3w_jv(l9e%rwl|{55dGrH^^1UrgoGx@E}&1ae*%-F_O~@Q^lhL3 z0P4K#0{fp|v!8Z23=7Y{zed$?oo#W1^AesbIrQc?F)i=KGo=jH;J(b2mdZLB;G!Si zbyS>DjcS#d!Ttyh+UqdE5G_)GvL<3eSoRuMkuh`@rm%hT)GwlKxs}*0mXN{x2mr-H zZP#x!z&?i4nZK8sO*t|9Y zipEb7OScqYFtjB@wPK^jVNVf8H4@4q^Rcl)?N zXLQGyF*koMi7}opZy9m9EB3fBdgoy{>n=;ry-duvy1oS6%}cO#kOfxD_Y*I2W0_@| zH8x|dY1d^Rf{&v!ZLHaM5T*m)yXhK951G36I%`?6j@6jdc9Q`!KOAXjsd2Ib6H7_% zlyK`zJO14myp`aEY{=P(-=MS9W)T#|>}rlE{qUCETAEfKPiI1K+9Ep3)>hL_n_Rs1;x)MS!VMrZl$d)) zp{Xf+_LUdl{YTqyC{UNToFEO@5YZpobI=dlyu4XtHz1~G$5qGMEO#b&G(?q*sd(-g zGD`zjPDY`7a8eF8?HspY*fAQ$O&;(X|7{9+*5K%1PtHMUl{`>q7{fQ>_>Kg@F4?E&CJpRw z&2)P#&;%4_IkC0rwWNxY5E+a}kjzEu2K;BiGibbUMV)4vT%#$Zvzc!xl_keN8`5x% zl?@py69*J>6Q&c`AryYmZ zI3mIaH<*-NWYLMz6K0Zm-k~5u`y3nz`rpYBf>Be@sv}Jd{=4Se)RYWymn(9E|4Q> z{n{mI`6TU)iC}pTZq1dS!`9}e2!|PI>oF1cgNKi#$ffND^qmxN8idK|K7(V~JB|}# z*dfKGvdj>CPxS|I0*>|t)UVE?XPwx~Gwr}C2{sl(m(ZHY=v)z>=&z(E38u!{a)AkU z3}*JYwl)>f`+DhdBj4A|wsuf4f9Ler3d+&#sqI=e773e;MifpP$$GH&ogH&+S7jm^ zt+OB)R4uT>A>7r8L(ualAu-5 z92Bi@4k`0D0Gw3EdYqX-=Uy?t1$x@7QLt-yl_&-++{||=#eYb;luZsamDE9~A`8|R zOg-Q#9J0N3DXh?>48v?Z6EG!)3E>g-#m5qZGaHxg#c8w#73Z=#%FMcTQs^l9yEUfI zVb^^;tk(>-X06Y`oqfvx?Cc#vn}*=FrIGuUn$I1&?bndzkKj-K zd=I|<%fAHUH3}IKwAd|e$8;aw=9;d}LT1LAe4Zuau1)47tV@CvuD*t+2Zn=8K&k9@024AAl=ttlq9La z;JNU;Rrdf&t+_=R0E20zHb5Af&Ks2aes_S5NFWSaZ%%2{+XOp-n`AoRSn!HrAP@o8 zoS4Au{&HH)NAaJbQcv1ZUuFWZJP@J%oFk0u!o{7uoB<{E0#)+T;&J9KuC8sJh&?yB zj*t7IMQV|U7fiYdyvkO^g~i|rL}YI%YkB-V8*^#MqQNrhMKY$y&3CVSR7Cl8lfwDv zy>36+{;0KH@s?4SFm_|nF)DM1G&ZmEVnK`_E&za;;`lD$(hU(3xcxq~M?WNO{41u7 ztcKkSTVx|d&O|#P!amUbS%KvH0_A6b|=x;3C2KkM3_19W+ABOv^{a6x@t)JRZT6pg)o= z&yKAl8b_90WM|sP4-~dfrJ!UkyQR#h`gzj~#q1cH$GSAbK-=@(v%2^hK{bB{OSw*> zT~lQHCDGmLj~05nj9M+#V8L0bDl5%QJBb(1_7I`191HhWVwb_{``Olf%&3 ztvz24y0XDq3_dw@sZQ(N*ff1(I$fhLxtLK_ony#N9}uwD$kHKsAf;qb9^Dks%+}T+ z6ezJQKAIC?YXvagP@lC0@9QS5h+-p1?X@S_ZJ9TT)XJ~qkc7|4nnsHYC73$I@ zd$0lT+%HAzDcex6nx^S{79{NpZXt=JwB2 zQ&yMq*+VQyC*Ie`4}n}=OC_^A+srOBDcC!)+!$(m2OUA=T;kHXUo-A;=lVBbrQsKE z0MN6iy8TVaTOZk$;Vh`gfi@+!J=_5A2d6Q0a+Yzj$Nm-^(|0(wzBE~u-0sn2NwT=w zfj0j?*x!dg{??zs^k@%O$isa8;sxosw!O0lckbMSjb|IAagPb+Cslb1Om02+fheE zdjrw~c<+Fk;Zv|fF)1J|k)@+; znE8j9pJNjqvYYX&G>!R1G#{X~&{paEqLplnmgJn=2BPC6ADP2WGy4SLC5y7SJ#V4N zrc<-aOHSSI5`r34P|RqqFc`&|4y^{m{4iOW-WyBwC>~YwV-=OF`!P6RmP7ovYG3CC zme4aXSliod13IG?-f_Dd;`^y*v-6vce-|MXkDO_m-K3Ib%hr5x^7xqM6%Y^Uzuapm zH+Q&Q;g{Y+SN1qyCFtyd+;)$lx!~~IVY!B0B?-3j9&6$Qup}B8Zq_Cf9==1HgvS2W z!v5Nx@kut~l!Y$R-oy~}28m@J>LMT?{(R>F3}FR$Z#4A}jJ4AtIo;-#B*V~nm+a~3 z(Js9EqaVW+Vqz}XXgoezX|Q{D@4>UDkKxJF4fr4b=l>P{yO&>ti&t+Fg5ZV`Q_z&w z4h~3LGeIvAG-uEAfP_J!aMQv50o;H17(TpnSIn1H5&$e5IF3s`Z0HU)#rd_j-^h+S zyk+s${r6zHv`lg8HR(hn+L<*!-HS_OnQ@sxdGm!sMh7#kZsS>yjK9ucJSrTQ90JSJ zZ`?~RapX#~Ba|F;Lup>v!z~6<*3@66$^*GxbZ@-!fuB-il5u5DWFUFAd4T})d(_LVMl+*J|>Z~!6y(jj30RSZ?DU7L3 z34vwiwYR{aF?JHins=c^y1EQwBV|A$zQcnfx$oV(ci^2L zzbkNj^Vuf6^X`Z6@BY?r!PoxA3;Lv12*KXvt5>eV650G5e?KPY+oQ*i;ZMH(J@}A> z#oGFse8wgMGuaxw_MJ)P``q|}Ja>XB=>CKGA#`N>9}*hjS!G*#nVUt-$rpei{_-w! z$>|)X2ZTmA3`Y*ZG`Eyg5+=(lOK|@DIw6m-#Pd0^g-vN>A=h2ZIAOPY{vb56;uzUm?~2fG&?a6XT`!;qiHNr1-VG>;N!AA z&-TV!mK#=DEuce#@qk!qV)P8R>H*Bq(1*$T1>dU1T@=YBl_giW^wsVnzCXCaa7F3_ z{pLw?;U$^Ia;rNXBk%MQHNEI-N$*EP0o~xyg^MyKgyu0ig4*<8M&H|cA|bI$*I$k2 zcAIfNB_=s|2KmC5Kx(he>6eyB%kGd}&6Qfjj0)cm;TbXTuYK)nFd;46R;_=h$A^+> z_ka9@--ahoo{}v;f-%|i*Uz7W?|lDz@Qc6v^8}@5^2{7tKOo_7aBv83|Is($z4vZQ zl^54(k4VdZ=FQKjQ1FnaGZUiiYi>lq#S=bHVoEfzv7mHUm6*CE%CHNZz4Wv;$ItG9 zHjJRK9{CYw+2KW+A)-oC}``glIjq9D+``nVPt8<|^WPY$s!i4O`@g)m6X@(b$ zF2V>XWJbi^;0(4m?!(5$COO+yMXRv`&a3U_Q{6Z1_U#YgjnBLRzww*D0qg7Q775Up z^1TNS;o|x^(%u{JfB)V$WJlKZb8EufpZe@)q>+TfA%V|XDVd+PwdjLV4np0(%%9td zN|?>QDGW9+J}t~vZXzL{kox)5>r>^1+KeduMq=uFRlHvQrp zZOmaM(-F}@5eiKOv7?;2O@ZusJdh&Oq_3f!V*|}=2)RbW&aGk6Vxcs&i+Cz*jU0pb zumbB6vFJ3b&|7v_v|Jx&X3)8lAbP$bLaF#n_4uj*i2T&pV2CY@i3+E=eI#$^Y7zr3 z=qMt79rnL11poHj#*{*H%WIRA4LO9k_&|1XWgA+UexR9rXvAt&R=G=77KlC6=0fg} z82M;_N6Iw0$U^o?YcUv|iDJIL0qu}9(CD0KFuoo;(9-fHn5?eCmGf(`y*Y)KE?@Q3ex025-2z5P9S zjkIWEWu=~t*X1rkVA^Og$Gm&qHfI%RDQ^b%NF~cl@N!xYjA|G)M?r|zm@9l;C86{A zulyWbpl9O758Mkcr9o(>DR+~hak8V31@q-=*Gb5&DG3lUu^`yq-hdC^`wMam9tpFr zuB=OBB1s3C0XZ(m607$lB)*P&`@IC1qXX>B)G}K0P@CU_5ygO=gKoB&aw_mSg>%c{ zIoRF-LJN*Of{BZEmbpn7c0KrI-HsM$tqj~$@&9C=J*+Z43p*(TXwX1Wi1Sc!7CJNN zH8r(Cw*VJ3d^)dxO!Er6SceX1J=GDQZ z@q`F&1y(1#74QMs!TZ2FWzLc8R7MWdf$m8T%4i&WJ|gGb>Ua!O8vi&=VZ6Mi0szRK z9kg)q(nVs5YtX$mgIk||lN@ve<+nCrdv8xX;Tw+$vXdwM-u*kUv%N!1uq*S(*>9TM zG8bnPw|hS1SUA1kHma@E)2t9rGS)bgs`agZ8)5Dck~}B0?COuQti)_yb%U|m`~bB) z7D4L++Eznd)!GcW1r+%kn4$OSM-hlJ8>gQ#l3)SF-D1Y%$H_Nuy-J1OHDu1E(h$-vi4Ca z*r*m4vyPwFHp28~r2%V;qBm1RAw2~8G#Ylzn<{p&WH7A8;E2HyiuYycIr;c^Q?4Z@ zP0rEdAhJ_aK_$uv+5Nj`9%t6Gr=GSgP^2f|z$Bc-ACfa8YNk}SxFlBZd;8~jIMHP_oAITK&$K%=%4+p0_BB}qaV6Fl$e_4J6& zTkFV?MH*$gPj>p2%)@A)K7g*9Nh1VqxX48!N7B5pCBOS243;m#WK5x}%|C|OJMThT zy$KpvHO*r!TbQ+)%z{}RXvucK z)%=)T(3*Yr;;m0n?4A4&JKMsDfZ67^rI6n`oV!5tasGnEl$G!qj_;Ee=XBq9-u*G$ ze{fIQL@jZriKaDMR~MFj8~5*TQAFV$eEti+Narj`{=sanc>o%}&ociA81xohe!zS` zQi+qL4xX<+K&>fnnveNdn52P+ciHk0wOZQ>h;G&>Mn#?~83) z{0ELQlu!JU%I($)BZATrIwIzNOpdabUVH&o)+VBXcr1Xlul-zXXRy7_H=jL$C-a$Hi$7y~eLluzfUMr4Z#W!zd3WKVRB+ znNvz~#u>>NvwMG|P30Wxw*uE%FkRvuv!}8*Px?JP;V)QW)%gSYBSGFxQbdm%sBb{|w&x z!kciH;?pm_^dh`W@ogp)p3_FNdZf~9pT@xnE}UtdE`AQuloG`rM)~j!jaJUks!47fxb0t5|&@;#` znp=5s+$6H|?fMQmvqN=R& zU?tP^5<)V>6`C{)BEVFA$4wW2es~T0aeU3!dk$vD3Z1wtDYmW-Ky7O%gAeBhl=NAj ze9-WePK2d1qJP)o>R1FyI44Y!9Ukt%#*+uIyS*h&Abyh*Nb+nT#OHnEJOsm4TsLpt zgxBAAojkwS1pe{_9h0#5;oEN$F_q+cDzWkLh!|~n` z{M;}6oLuv(Kl4?A>`Z(Q9z7x=yC6)bpkpSbrUwMKSJyAV()BOIN~5VzZ-T+^vS!<1 z8-0@)e0Nhcw0o6B5Lyun_gQ=Kg_{E9Ia_V-U|)p5!QfCDH*!BUj$6;>S%d~Z_wdM) zcCz-0Q>CTOJFY)#WkU=P(JB91%C6YCb9LnU z-t#G04o0h;bGR0Q*PzwxMV~Wus5Ql5m--cHN~ONerd1nfOf1|I3}e^uFqHFVC^~hd zx=k-0{H8EgL_q?wV`2Ij6UN_X9cOCxh@ZQrwMkGxka`k9=@p~c08ZWX=p(!y|TUvue^MV!d9Pwix)1) z@Yo)H_GAOT``tf>*Is)K9zJ{oj~_mUPk-ih__Kfcrv%S$%63Ly``Ryy2e?V=GWndy zvc2^TRtX~WGcY1JJUo;PHMR5f+Ca>^M6qqwoFQOsK{#}@v&|a(nRuON(sf2>GMiMa z36_Q1;Q_(*nQE&$_qIhFk48h$&d(@Bb$E0vT(?cv9n+Yk4t;f0$wM98pa2M^uWqoyed zVV1h0ezFh<_#Dh05nyf5a@y9VS{7i~gSeS5w z!)?;IFA=m??LyB$egkIa(U6>cbZ=fbcCKv`MBgS&KJ{HwoVk+%L79gtBTVTTg^9lN zo$tWQue>b8vqEEG_%1~!#8`X#s_8kgX3823wKSK@RCzn6&f8rvBg}QJ=1Ij%)IBNc z6*EVnYl1xrDKgXZSO(_v;5-F3l~|Uxru{@f(C0%D7`hpxZVRQ!HC^@yK@uoB7^|n7 zcf}nIR^+)ov4=+|6^QhL9i2}%H)R_t&a&e<*OtjTR;ldUd`N3>NY`EyXJW$-#tA>8 zqRo9>5^5VQ!71UZC~3~J0^It`qelF@&6-}zW+0|$CEdtg1gZF!geT^p$x2lwyc^5C1)7h%>4LF*eonK$D9QS3y78F2@&LuK5mP~( zSJ||p-g__^kc<+8py#0y0h(ET4b?3&ml;*&v}=ZLlXA<9F5Hpn8G+ZoEF$>m*#sf zuPlT1s&68RCCm@YrQVlJoyOcKjH8X{W0A|WV3z#s;s=dszdJKC_ycF+EhHi-u8 zB>};+m6DOKPcnMFu@$hWDi`ve8*G)%Ewt!d@Nw_%`vk`h;BWqoufZ3;^hMD$Y>-KieU@ zf18|2YZ_jn@vV@9h&}t86h7i^Fo(y-lGVmU_|nTSQ|RX&T)lD$KJ(@qqIKuQLRm?lAF;qC_hpEk%{rf+_f0ZG zu3f)L&om zx0;r``^NL`)wd$JCTlT`bh)K_GJM}5bag;;$^q*i6yQJV3?nwi(dh94u&UKQtM*EdZ)!m)`?z)y2#;kf=_hNjad^ zkf{$9f#oR!T1W-8*l{ z=gzOnzS}cqcClT#R(q%o{Mo)1kEcUofa}*T!{7Q_|9ci_#hd{wf)1pdkPK}+h>w$#r~yvA6?Zhd|g;p`Fo@8-v% zQP`QdO4nW`RP$*PPH(>XmiQ3fr^o?k#6BRQ$cF3DJ~{fv%BV-fX*l7y#$243S$zxa zsGC|1I%~g{LUv27Zr3bfw7Dj3@aBmoDYQ9brwqsAXHw>|u@;wYtded>!1K#XJC!}p zX-n@tJW<;)8_Esmkc8Q|4VE&x)&z6{;Zd5Ru;tTOvQ*0osa3~a8#}Pr zesEq`Q1fbn=x-zf!V`6zDM2@ytix?3p9Lb$uIcJI5@eTtbFv#@`#8mtKiN9AexphxbauskV_q2#1ys7(2Wy zQ}GCVdnZOet&EXPCN6{RW)?!is#|SVeZ|hnuYdjDhEKirh6)4TO3IwH+9*@Qu*W3$ zzqN* zCI|t%c;7v$PzeEN_|6#JyTY(T@0gfzYvU>0x&4mhOtZb#CUw4f%$&C-{%7C%F8mg0 zwksFu!b{7vm}?rIVku|cWFbBo`^P!%VdCbi*_f3dG#l*dyDXH1qzhc-wD~ zPk;r@`nh#Uv|-}oJ;SyM(sR$Rhos53xAx%sZ@&X~9z2kOlbhtd=WT@8W4*k*46l-h z|7D8dbG%lB*7321vxeHl5pAy2iIv3c5lw=cuTAVu_r4}!Jn#IXf?_NhjI}-cE10nu zQm#;#Z;gJ`*U^c_yma|8yzs({@aw<+n-Y`%(?9tp{Ifs!JwhV)iOG1Q!d3}`Lu@R7 z7)9*wDSDt7IcvktH2yLPF|JgT8X8n4JSKC5&4D>R&o)I1IFW|C=}6n_x%8&8%_sDE z8CkG!9&(TSX=`1BE%e9Qo}Oj0G7&Vz<6&W%tq;7AFP6Fp)}&wj(wE`J3pdIxHbPIj z0R#(J_YHCQPq~AbHfaOOIKT5sNY$_+jI5?zv^CEqKZ?~jOGcsC%X|&>S8$oE*lx_| zt=KNA!L5se`>*TfCfOLZ@jl55-7X^0D$?j2;-fk$A@I~WVUp=o#1`b{)?`^lKS zT+D3(7XrCJi0}?N48_WhFb{mE(;#*^+s&k{Z@>RTa&|q{eY~>nn97XOSX%3d2#sHF z@9o3C{Px@ME5G<>hV{Dy(;q#41b6PBWm%Yd)A$rRhrS6 z)P!$Un@Y#wrU`Giw8gfhEi^wAmr6HPEFCImoHKEF<}C{^(rKaC=3X)CT3dVpjeaLr z8+eq^nwbO16tFq^WRJq<((EpE+>_aJ%z+UahQ^Q3T70IEf(eEhowfHSG5GuM{6NY? zy>}Qh2YbBTlgY7ahFh#5SXkeGyg?f1PPOy<8n*raK3w~z0Ru=2!YrOT==i%j-UJ-P_>9$Xa=|6b? zJ^1j$+r%u5Ix4x$mXVA&=;oHhG8YFL`|fz|nJJhdrIL>j2X8IK$v)hrmKjWJavGPW z=b|7S>6|lIlKV1plfL%jk@gWd)})_9LKb6Ue2x%EG=M$uY0pi8 zn)XJC;j1~MIr$ULgE(L>K8FsKr@O8*g=wfkY-kOu`Bqz^p*u4nS>QBidGDI2)fiq@ zWSv#Zi)X(Hq##0~+5}XTki&WA9xQbno)w4X)3Dn^Rs?cZc%7kyXj7_b2^@BVM+eTb z*Ux5lOM3BZK`PZYXriaCY6FDmzwL)6JaFffBe+Z9w7Va^D-*!5njcO=HS8%y-3&lN zIYLyku(5UtYX0*-{8RXiul+nZ>&^=bW)J<44Kv?v$Tl`WYh36lx~z?V^S6FOiYIup zzxhmyJlN~cYtErNj_E#n^c24R=ied6*ImiWW=Q<$&weHtJXvPdXuvt>YXoywrN(@j zv<~-sYsDdAdy#>reU7*cmN$i9soWL2P{EGoA#_&fEn6$GKW{Kn$k%Dok+hticaita zRB+6jD$-o7tRBf&MiK+p-A1_zPZ>Z3iS$QjKL9!SSio^+8qeX&WQOeSd_l@+H#fIo zYj=yBq07?g<%qPsila58v5cr*LkcQQx`^Pm7ctahw~>m2}+rU39=O>Fp#~>(Du7i+ngI{UcW|8 zRq~%ODmXYi76dUEXzHy8LD916#LZ?YEh#5 z;LbhxgMa=___u%k-;(zx+_#);))t51LDVTwucbI_=Gq#GODWlI<$O)&i%pbyTMbk3N^t|sKIrC0lgTJ&%sa#vf1Qd%8E>Ow5R; zJtA|2L@mwtxwU1uPL7`Q7cYq*JR)K8_{kG^_+&GX7tg!w{*#nDb$1}p(o)g-iW<3} zJ@-VwPMvefGCOs5p(K8TcA&QXz?hTs3#GIbvQ@l6m~U!T7_$nOHvO(oVJ>5pa-PAq z-B9z`asa>`an7r9*5LV*YTO%-@g+2yypH+#gDatSCS9`G7A*ZgxJ};cJMT&Snx|nP zwd3j}63Aw~!5iM0kiN@VQ(nN3jo8`Y^k?7x3;3C@d`@5;kBEtfLvOm*woble>v63# z*_`a*WkzQ^hm%kqkaLYS)>Dd)v((?%+!i8PBS+h(Uw=)sqKAh#hToX2$z5qi%S+;j zW2RzTna>r^uI<3#8ykA(QxDVd^+uLR!XACmPqu3+FFwzM^rT~(x6@`4qE{HMnp3f) z4;ykZCyc!*+Lb3{jo>&FHw%UR-5t56x4II6H5BL|CeXNBic-+od<`bDcU&jvhwbp| zH|Ox#Pk%OXu7y^#&s=L}H=L^UUeZQvAc+d?YlN!28m1 zQw#6+&b|_c`eIJ;rjjH?nyJG0%a^af&wTY~WquH_WQ)k);fVvZ0oFHWAE6ERkTY@4hx6zP0VR4kRHn( z_84|PnqWpKNm|dt?BL-uAB4x%F|@lR#h@~{_WD-H%GpnMZod!jeE-kM$+E-^N5nV6 z%q~p|gh*AQF_h;4bMpfh7|lRC!LX*>BTcbQPNhB4Hiw6ubS>eA2I^g%o8q&F?9@(X z{{Y9$xlEMr!;F2GoNZ4xo{7dD4wvBKh4T`FZigDulC6FRYLm0}Wp8t9+W~PbSqWNW zyJ^lVYoU}1{W=o55<$-O1^ng=Oh--D>u#H`DKALm(*N^Wa16C z>?tO)#`?ptAA|+aty{0cOE11GcC|8u{=@zaE+XNK#ADXl#8_;%^Stsi^0=9drP>TQ zDTfG_H1YEM*fxTg!5R@emji$5)tRKS?h@R8_UsvKZfwCOF~0PUCqKs#`Cu3oa7Lkr z++uCtm29aAz#SYuUoj8KMyk<1^{4d>Wjx^x-7{MD~YsFc4qvpBlKQ_dLNhmH`@ z%)I}6(h&)ErbE{H(!QGf8R9SDIUoVXjKNA|odi4g(7*qfx6pd38IVc6f0*b`#;!k<;-p{K>bzB`Ac;O4*me z*J4MXY=VSY?xm=~T=#E<#~5fD2fjkpqx-v*Bty zF*`U(Mm*M>(mPfEM^eY+0U6mE_*<`qT=Oeg$?W#=D`#=7nFg2Ii-n>bnx+_;Cvy#K8+nXr)_1Y&ZY!_Rf&C$j*d#Ak<1l2MR&%uzLLUrGFO{{%U!YTO5 zQgaNPXJz!PrL|ELuaW?KM;-T>dE~CtoM@+Ib?Bb$p*vf%JEO-1Ej(ct*A&H0T6FoM z@XyZPHoX1)Z%demlOa;4oAxn5@DFPX&YWYSO7QW+kM2uy z4MVZJcOSr)zWNr4cNCjwZSA}eE{DtbXN&CErvx`YAO?TugAZkYvi0*91mdy~8A$)Q zRwbZ$Qh8xGR3xRI%&4uJ8Cnu5Y^puoIIPA@#HfN1OsDOOWm+5c6t9dlb585^ZG%E) zG)tW6tZEO;whM`GB0=o1Y`dTEd#y4>HbKdmgfGAJGQ3LKoIA+6b4M!CTD=$FU66pa zA{Mj8^3NGPoF~Tm@sEBiJ`0Y7j7YOGLSU4$OxI_GQ|-MW;}t&xojad#Roonw=1UX? zoJ#VNbjpzsD#EQ-IDv<&^$sOlkC6pu8*-)I4zCgU0|avOW)!xg3}+#7m!Jz2#{89E z`!({jOiWXoucFHq|8Guq8|E;M; zHd~zc3vAG~Co_I&BzxHeL#TGyDYy%3!D`}DRqzsFb@M)qOE|Rl_A@B!x@4$>;`EYF@lfJXFDZ+yZ zmu+&+ZoB=_1Gy&0z$MJaTlAVVm3;1@MgW-bhvX-aJnmKnfcO;Hw;+tuMwm?clhN!l z6y{4wcu5>b?BR zEAZLRys1SusL3hb(FMa>Z7@CajlDKeRwjXRZCd3bo~E4-c4(Kb2zo*~VPHn>f z8{4~Luk(EV=D+jr!Bz66GqalQsG;qwX~x4e(sd-^w9klw=wQm`5@+u5>2#gP_wK?H z!GA767V#-P`1hsWev6Rat=B#UZ+!MmXi507$^<2D$H$F?84#0jVHtox3HV|2G|SDvG-16*6z&IE;U`0{WjMAnA2x} z=BvK|SFc{RylhhipiLxmhmnijSs{z=13#BJQZ0HcYsk==+eh8H^_tWMaDtONL_mbn+q%$#XK>y$%UHN;d|R>?djf`X7YY;K+dvtc=_d*;mcnl_x$knxCPVU|OEb!t=q0AJ8-Jz?+}{0$jRsl^}fs&+-Oo`SbABo3Bgju{-x3(AbVF zA5PtMV9#MLAr&N6TdtlDED2uH%TFD6XjzhyykouY{Q1!Q7}@$SHr^M|P=Q9+N@|SB zzwq-E2(Q$jsq6!96a~-ajj!|B>soa09S7hEHDJW5nth)LWiD|`&4`mdw7HiUNm40s z%-R-N5;Hi9i?rn`5tA_bP@Q+|Z2H-s`>NQddLQix&YJbnlWlnA)eIkf@E*MVgC7%< zKNZdP0uhU3;juQ93N1}7m3Z?=nO!o$I7VyB;}HgJ45Ut%cG$-L*Aip5SpGcEAUrN$ zwcV2Mo^9g-FlSpMj>24*_I7AtONtK6w4GAZcrk_g4Sc5(r2%EM*T^paEHMIyuq?u& z05GW#R%V-NUbz<*34?T+QAUK#keDMMYv<0xjhipQ>u(H&$XMI6Lv)86ppPFtgnJL} zNim9)x+dFLk+k;yJ}1u{2!i3db*?yL#59rc<5(Ef!=3XvF<7$a3Zh2qK%>PnY*Gyk zoxJ+$E%=3B_<0GxinqQ|(@6zKE_8@mip%uKXo?$Gu>Ve@H7U|;=jJowKKhN-q9dr# z)T}pzT|$@N{nI~z7hZk^UVrl~Q3gAt(YbHI)ywDM!ufOXA%%J$K7Ik)e$+j@pQ7u~%*e+5loW{Wlj^GEnw z`A`M62I!uLf!hHW>JBT=Vy?d-Cz$l}0hn>$5+`J(hE(}1mqdAEfDa@70=Ms(Z(5F>*i77P` z?aY3VOXQT~9&xR2Pp#rpm}ZGWbyq0N^(txlr{vW97k~5z63TPaMg2AEL}VDw9)8ZJ z$7fpN$}w>6k;lKesD*{80wlB@WpwS>@i`c3l!ND-eKd!JDp=6WxWca)$(STz$^?xU z!U)qRFN;;x%AWJXqZtgX8?N*;7&P+3bJSUQ6U`4IeFiugi5pGQT5*5=cYpXJ*^%e- zU->dQ9j}R?V}-*G+%LZMSz`RB@DBNYIKxl38L~nqainSKYb%=-X%Uu1yp>B^4XKH? zouh{DWN})d0io9fR z=r@Dn1_a9}^3PbJa`h6!Q<2V~1rlJ4%ps|n?(Hp&5$TEdkN4H~G#iHVtd~h^@Wc=3 zI!oLb(mKCNT{J&Vy9D4NOi7pT{$P8@R!(jo?BKKn-u&W zYkX#qPm^8#sZV`c&`mU9u4`9`>{Bvn8~ia_>%O$_ulY}G~nGz z`Pn$O{Y$^_tMGfj|2uM~CjRh!E$c69eL0{KU!JM}=k207d+tRNOkAwvbKctAHiLn6 zwo$~y{pGn$*YxmMd;ktPncfDCrL4+x>81cu{z`Op@7^7FL=gLc{4~onjojPdkfJPX zQ&Zp!ChS)jX&*gqmBqzOjhR-WIlHmg_|v&1UU5zbMQ*|u;J0xv`NqDjSoqJRVIL4(fk6TRfK?v zNjR(_rR_;G#6+4U#h=nf$@`Hvs;!tAI2+0}CEJwj9FpBQ!920_GhU*<#tOw%v+3vj zP(w*yYDKzhr#(4D@#YKg*5}BUymVCsK$rlX z=}?_F|23OI@0{Y)pVcD6;Zq7~&6jRa(?_Rwvr-B?Ex zh~oH-DpG`KrH#dG#E;SJ#19|$@h8V8$0x`CPmaISz$eEi$0x^Mi{le!|K#}O_-k@} s!t9?MpB#Tpj!&5VljD=)ugUTM0JE4_`hFgg%>V!Z07*qoM6N<$f^!g%CjbBd diff --git a/index.html b/index.html index 7b7b659d..43a8f999 100644 --- a/index.html +++ b/index.html @@ -36,7 +36,7 @@ - -
-
-

Les plus populaires

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

- Trouvez votre hebergements pour des vacances de rêves
+ Trouvez votre hebergement pour des vacances de rêve
En plein centre-ville ou en pleine nature

Filtres
-
-
-

Hébergements à Marseille

-
- -
- - +
Afficher plus From 887ebb6abfc1d1eba58f6b194c9beeb919633978 Mon Sep 17 00:00:00 2001 From: Angerome22 Date: Mon, 13 May 2024 12:03:46 +0200 Subject: [PATCH 11/26] =?UTF-8?q?en=20cours=20r=C3=A9solution=20taille=20h?= =?UTF-8?q?ebergement=20card=20version=20desktop?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 308 ++++++++++++++++++++++++++++++-------------------- index.html | 53 +++------ 2 files changed, 204 insertions(+), 157 deletions(-) diff --git a/css/style.css b/css/style.css index 03f26886..15d52490 100644 --- a/css/style.css +++ b/css/style.css @@ -25,8 +25,8 @@ header { height: 79px; margin-bottom: 30px; } -header img { - width:4.55%; +header img { + width: 4.55%; padding: 30px 50px 30px 0px; } nav ul { @@ -44,14 +44,15 @@ header nav ul li a:hover { border-top: 2px solid #0065fc; text-decoration-color: #0065fc; } -.am, .hm { - height: 35px; +.am, +.hm { + height: 35px; font-size: 16px; font-weight: 400; } /*-----------------------------------FORMULAIRE-----------------------------*/ -.info-group { - height: 281px; +.info-group { + height: 281px; margin-bottom: 30px; } .formulaire .section-title { @@ -59,48 +60,47 @@ header nav ul li a:hover { } .formulaire .section-title span { - font-weight: 400; + font-weight: 400; font-size: 15px; padding-top: 8px; } form input { border: none; - padding: 0px; + padding: 0px; } -i .fa-solid .fa-location-dot{ +i .fa-solid .fa-location-dot { text-align: center; width: 50px; height: 49px; - } .fa-location-dot { - display: inline; - height: 18px; - width: 14px; - padding: 16px 18px 15px 18px; - border-radius: 15px 0px 0px 15px; - color: black; - background-color: #f2f2f2; - opacity: 1; - } -.city { + display: inline; + height: 18px; + width: 14px; + padding: 16px 18px 15px 18px; + border-radius: 15px 0px 0px 15px; + color: black; + background-color: #f2f2f2; + opacity: 1; +} +.city { width: 195px; height: 47px; - border-top: 1px #F2F2F2 solid; - border-bottom: 1px #F2F2F2 solid; - text-align: center; + border-top: 1px #f2f2f2 solid; + border-bottom: 1px #f2f2f2 solid; + text-align: center; font-size: 18px; - font-weight: 700; - padding: 0px; + font-weight: 700; + padding: 0px; } -.city ::placeholder{ - color: black; +.city ::placeholder { + color: black; } -.search { +.search { width: 132px; height: 49px; border: none; @@ -113,60 +113,61 @@ i .fa-solid .fa-location-dot{ .filter-button { display: flex; + height: 50px; padding-top: 35px; - align-items: center; + align-items: center; margin-bottom: 35px; - } -.filter-title{ +.filter-title { width: 54px; - height: 21px; + height: 21px; font-weight: 700; font-size: 18px; padding-right: 15px; - margin: 0; + margin: 0; } .fa-solid .fa-money-bill-wave, .fa-solid .fa-person, .fa-solid .fa-heart, -.fa-solid .fa-fire{ +.fa-solid .fa-fire { height: 22px; width: 22px; - } - +} + .fa-money-bill-wave::before, .fa-person::before, .fa-heart::before, .fa-fire::before { - color: var(--main-color); - padding-right: 10px; - padding-left: 17px; - - } -.fa-money-bill-wave, .fa-person, .fa-heart, .fa-fire{ - height: 46px; - color: #000000; + color: var(--main-color); + padding-right: 10px; + padding-left: 19px; +} +.fa-money-bill-wave, +.fa-person, +.fa-heart, +.fa-fire { + height: 46px; + color: #000000; font-size: 17px; - font-weight: 700; - align-content: center; + font-weight: 700; + align-content: center; border-radius: 25px; - border: 2px #d9d9d9 solid; + border: 2px #d9d9d9 solid; background-color: transparent; - margin-right: 15px; + margin-right: 17px; padding-right: 17px; - - } -i.fa-solid:hover { - background-color: #deebff; } -.fa-solid .fa-info { - padding: 0px 2.5px; - height: 24px; +.filter-button .fa-solid:hover { + background-color: #deebff; +} +.fa-solid .fa-info { + padding: 0px 2.5px; + height: 24px; } .fa-info { - display: inline; + display: inline; border-radius: 50%; border: 1px #d9d9d9 solid; padding: 7px 10px; @@ -239,17 +240,18 @@ a { padding-bottom: 33px; } .hebergements-cards { - display: flex; - flex-wrap: wrap; - margin-bottom: 30px; - justify-content: space-between; + display: flex; + flex-wrap: wrap; +} +.hebergements-cards .card { } +.hebergements-cards a { + display: flex; -.hebergements-cards a{ - height: 207.25px; - margin-bottom: 30px; + height: 207.25px; width: 30%; - } + padding-bottom: 30px; +} .hebergements img { width: 100%; @@ -258,24 +260,21 @@ a { } .hebergements .card-title { - margin:0; - padding-top: 4px; - padding-left: 15px; + margin: 0; + padding-top: 4px; + padding-left: 10px; } .hebergements .card-subtitle { - padding: 8px 15px; - margin:0; - + padding-left: 10px; + margin: 0; } .hebergements .card-rating { margin: 0; - padding-left: 15px; - margin-bottom: 15px; + padding-left: 10px; } .cta { - width: 811px; height: 21px; } .cta-link { @@ -329,13 +328,12 @@ a { } /*-----------------------------------ACTIVITES---------------------------*/ .activites section { - border: 2px rgb(255, 187, 0) solid; padding: 30px; } .activites { box-sizing: border-box; } -.activites-title { +.activites .section-title { padding-bottom: 30px; } .activites-cards { @@ -343,75 +341,99 @@ a { justify-content: space-between; } .activites-cards a { - width: 22.2%; + display: flex; + width: 23.24%; height: 439px; } .activites-cards img { width: 100%; - height: 380px; + height: 370px; border-radius: 20px 20px 0px 0px; } -.activites-cards .card-content { - padding: 20px 19px 20px 19px; -} .activites-cards .card-title { margin: 0; + padding-left: 14px; + padding-top: 20px; } /*-------------------------------------FOOTER------------------------------------------*/ footer { - height: 163px; - background-color: var(--main-bg-color); - padding-top: 30px; + background-color: var(--main-bg-color); + margin-top: 30px; } .footer { + height: 163px; display: flex; - justify-content: space-between; - border: 2px green solid; - margin:0px; - + margin: 0; +} +.a-propos, +.nos-hebergements, +.assistance { + width: 33.3%; + margin: 0; +} +footer .a-propos, +footer .nos-hebergements, +footer .assistance { + padding: 20px; } .footer ul { list-style: none; - padding: 0px; + padding: 0px; + margin: 0; } -.footer li a { - - - -*/ -/*#a-propos h3 { - padding: 0px 20px;*/ +.footer ul li { + padding-bottom: 15px; +} -/*footer #a-propos, -#nos-hebergements, -#assistance { - display: flex; - flex-direction: column; - align-items: center; -}/* -#a-propos, -#nos-hebergements, -#assitance ul { - display: flex; - align-items: center; - width: 446.67px; - height: 163px; +.a-propos h3, +.nos-hebergements h3, +.assistance h3 { + margin: 0; + padding-bottom: 15px; + padding-top: 0px; } /* Le code ci-dessous correspond à la version responsive uniquement */ /****** Media queries ***********/ /* Medium devices (tablets, less/equal than 1024px) */ -@media (max-width: 1024px) { +@media (max-width: 1024px) and (min-width: 768px) { + header nav ul li a:hover { + cursor: pointer; + } + + .info-group { + height: 322px; + } + + .filter-button { + display: block; + max-width: 668px; + height: 91px; + margin-bottom: 35px; + } + + .filter-title { + margin-bottom: 20px; + } + + .fa-money-bill-wave, + .fa-person, + .fa-heart, + .fa-fire { + font-size: 16px; + margin-right: 0px; + } + .hebergements-and-populaires { flex-direction: column; } - .hebergements { width: 100%; + flex-wrap: wrap; } .populaires { @@ -429,23 +451,68 @@ footer { width: 30%; } - .populaires-cards .card-title { + .populaires-cards .card-title, + .hebergements-cards .card-title { font-size: 14px; } - .populaires-cards .card-subtitle { + .populaires-cards .card-subtitle, + .hebergements-cards .card-subtitle { font-size: 13px; } + .activites { + justify-content: space-between; + width: 100%; + height: 390.02px; + } + .activites-cards img { + height: 200px; + } + .activites-cards a { + align-content: stretch; + height: 270px; + width: 23.24%; + } + .activites-cards .card-title { + justify-content: stretch; + padding: 20px 0px 20px 15px; + margin: 0; + } } /* Small devices (phones, less than 768px) */ -@media (max-width: 767.98px) { - /* .hebergements-and-populaires { - flex-direction: column;*/ -} -/*essai sur effet barre navigation bleu en dessous */ -/* - .hebergements-and-populaires { +@media (max-width: 767.98px) and (min-width: 320px) { + header { + height: 79px; + margin-bottom: 30px; + } + /*header img { + width: 4.55%; + padding: 30px 50px 30px 0px; + } + nav ul { + display: flex; + width: 88%; + gap: 68px; + list-style: none; + align-items: center; + padding: 0px 0px 0px 50px; + } + header nav ul li a:hover { + width: 140px; + padding-top: 14px; + color: #0065fc; + border-top: 2px solid #0065fc; + text-decoration-color: #0065fc; + } + .am, + .hm { + height: 35px; + font-size: 16px; + font-weight: 400; + } + + /* .hebergements-and-populaires { flex-direction: column; } @@ -476,3 +543,4 @@ footer { font-size: 13px; } }*/ +} diff --git a/index.html b/index.html index 43a8f999..2d6fb3a5 100644 --- a/index.html +++ b/index.html @@ -238,10 +238,11 @@

Auberge Le Panier

- +
+
@@ -338,61 +339,39 @@

Hôtel Bleu et Blanc

-
-
-

Activités à Marseille

-
+
+

Activités à Marseille

From c343eb3bd4b5615b0b6bc94cb6c3f604188ed768 Mon Sep 17 00:00:00 2001 From: Angerome22 Date: Mon, 13 May 2024 18:15:08 +0200 Subject: [PATCH 12/26] amelioration version desktop suite --- css/style.css | 25 ++++++++++++++++--------- index.html | 12 +++++++----- 2 files changed, 23 insertions(+), 14 deletions(-) diff --git a/css/style.css b/css/style.css index 15d52490..d0244720 100644 --- a/css/style.css +++ b/css/style.css @@ -151,6 +151,7 @@ i .fa-solid .fa-location-dot { color: #000000; font-size: 17px; font-weight: 700; + text-transform: ; align-content: center; border-radius: 25px; border: 2px #d9d9d9 solid; @@ -237,19 +238,21 @@ a { width: 65%; } .hebergements .section-title { - padding-bottom: 33px; + padding-bottom: 30px; } .hebergements-cards { display: flex; flex-wrap: wrap; + align-content: stretch; + justify-content: space-between; } .hebergements-cards .card { + display: flex; + flex-direction: column; + height: 197.25px; } .hebergements-cards a { - display: flex; - - height: 207.25px; - width: 30%; + width: 30.8%; padding-bottom: 30px; } @@ -261,17 +264,19 @@ a { .hebergements .card-title { margin: 0; - padding-top: 4px; padding-left: 10px; + margin-top: 1px; } .hebergements .card-subtitle { padding-left: 10px; margin: 0; + margin-top: 4px; } .hebergements .card-rating { margin: 0; padding-left: 10px; + margin-top: 2px; } .cta { @@ -295,7 +300,7 @@ a { .populaires-cards .card { display: flex; - margin-top: 33px; + margin-top: 30px; } .populaires-cards img { @@ -340,10 +345,12 @@ a { display: flex; justify-content: space-between; } +.activites-cards .card { + height: 439px; +} .activites-cards a { - display: flex; + justify-content: space-evenly; width: 23.24%; - height: 439px; } .activites-cards img { width: 100%; diff --git a/index.html b/index.html index 2d6fb3a5..c1ac8fa2 100644 --- a/index.html +++ b/index.html @@ -49,10 +49,10 @@

/> Plus de 500 logements sont disponibles dans cette ville @@ -77,6 +77,7 @@

Hôtel du port

Nuit à partir de 52

+
@@ -87,7 +88,8 @@

Hôtel du port

aria-hidden="true" > Note de 4 sur 5 -
+
+ From 33585242b512c5a3350eb77dd1ead2015c3939a6 Mon Sep 17 00:00:00 2001 From: Angerome22 Date: Tue, 14 May 2024 08:44:00 +0200 Subject: [PATCH 13/26] =?UTF-8?q?version=20desktop=20finalis=C3=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 24 +++++++++++++++--------- index.html | 8 ++++---- 2 files changed, 19 insertions(+), 13 deletions(-) diff --git a/css/style.css b/css/style.css index d0244720..7162f8ee 100644 --- a/css/style.css +++ b/css/style.css @@ -143,19 +143,24 @@ i .fa-solid .fa-location-dot { padding-right: 10px; padding-left: 19px; } -.fa-money-bill-wave, -.fa-person, -.fa-heart, -.fa-fire { +.fa-money-bill-wave input, +.fa-person input, +.fa-heart input, +.fa-fire input { + background-color: transparent; height: 46px; color: #000000; font-size: 17px; font-weight: 700; - text-transform: ; +} +.fa-money-bill-wave, +.fa-person, +.fa-heart, +.fa-fire { align-content: center; border-radius: 25px; border: 2px #d9d9d9 solid; - background-color: transparent; + margin-right: 17px; padding-right: 17px; } @@ -265,18 +270,19 @@ a { .hebergements .card-title { margin: 0; padding-left: 10px; - margin-top: 1px; + padding-top: 10px; } .hebergements .card-subtitle { padding-left: 10px; margin: 0; - margin-top: 4px; + margin-top: 8px; + margin-bottom: 8px; } .hebergements .card-rating { margin: 0; padding-left: 10px; - margin-top: 2px; + margin-bottom: 5px; } .cta { diff --git a/index.html b/index.html index c1ac8fa2..998c9bb6 100644 --- a/index.html +++ b/index.html @@ -49,10 +49,10 @@

/> Plus de 500 logements sont disponibles dans cette ville From c12b671a96378fe17c07fd673f866cc8ebba2a39 Mon Sep 17 00:00:00 2001 From: Angerome22 Date: Tue, 14 May 2024 09:30:33 +0200 Subject: [PATCH 14/26] =?UTF-8?q?version=20tablette=20finalis=C3=A9e?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/css/style.css b/css/style.css index 7162f8ee..8c14ce75 100644 --- a/css/style.css +++ b/css/style.css @@ -414,10 +414,6 @@ footer .assistance { /****** Media queries ***********/ /* Medium devices (tablets, less/equal than 1024px) */ @media (max-width: 1024px) and (min-width: 768px) { - header nav ul li a:hover { - cursor: pointer; - } - .info-group { height: 322px; } @@ -461,7 +457,7 @@ footer .assistance { } .populaires-cards a { - width: 30%; + width: 30.8%; } .populaires-cards .card-title, @@ -476,18 +472,18 @@ footer .assistance { .activites { justify-content: space-between; width: 100%; - height: 390.02px; } + .activites-cards .card { + height: 270px; + } + .activites-cards img { height: 200px; } .activites-cards a { - align-content: stretch; - height: 270px; width: 23.24%; } .activites-cards .card-title { - justify-content: stretch; padding: 20px 0px 20px 15px; margin: 0; } From eb406349d70e93783961e95be40c7b49529b30ca Mon Sep 17 00:00:00 2001 From: Angerome22 Date: Tue, 14 May 2024 15:18:42 +0200 Subject: [PATCH 15/26] version mobile header --- css/style.css | 95 +++++++++++++++++++++++++-------------------------- index.html | 4 ++- 2 files changed, 49 insertions(+), 50 deletions(-) diff --git a/css/style.css b/css/style.css index 8c14ce75..ef6d293b 100644 --- a/css/style.css +++ b/css/style.css @@ -110,6 +110,9 @@ i .fa-solid .fa-location-dot { font-size: 18px; color: white; } +.fa-magnifying-glass { + display: none; +} .filter-button { display: flex; @@ -491,65 +494,59 @@ footer .assistance { /* Small devices (phones, less than 768px) */ @media (max-width: 767.98px) and (min-width: 320px) { - header { - height: 79px; - margin-bottom: 30px; + .main-container { + padding: 0px; } - /*header img { - width: 4.55%; - padding: 30px 50px 30px 0px; - } - nav ul { - display: flex; - width: 88%; - gap: 68px; - list-style: none; - align-items: center; - padding: 0px 0px 0px 50px; - } - header nav ul li a:hover { - width: 140px; - padding-top: 14px; - color: #0065fc; - border-top: 2px solid #0065fc; - text-decoration-color: #0065fc; - } - .am, - .hm { - height: 35px; - font-size: 16px; - font-weight: 400; - } - - /* .hebergements-and-populaires { + header { flex-direction: column; - } - - .hebergements { + height: 115px; width: 100%; } - - .populaires { - width: 100%; - margin-top: 50px; + header img { + align-self: center; + width: 61.09px; + padding: 30px 50px 30px 30px; } - - .populaires-cards { + nav ul { display: flex; - flex-direction: row; - justify-content: space-between; + width: 100%; + margin: 0; + gap: 0px; + padding: 0px; } - - .populaires-cards a { - width: 30%; + nav ul li { + width: 50%; + text-align: center; } - .populaires-cards .card-title { - font-size: 14px; + header nav ul li a:hover { + padding-bottom: 15px; + color: #0065fc; + border-bottom: 2px solid #0065fc; + border-top: 2px solid #ffffff; + text-decoration-color: #0065fc; } - .populaires-cards .card-subtitle { - font-size: 13px; + .search { + display: none; + } + i .fa-solid .fa-magnifying-glass { + text-align: center; + width: 49px; + height: 49px; + } + .fa-magnifying-glass { + display: inline; + color: #ffffff; + border-radius: 15px; + text-align: center; + background-color: #0065fc; + height: 17px; + width: 17px; + padding: 15px 16px; + } + .hebergements-and-populaires, + .populaires { + flex-direction: column; } -}*/ } diff --git a/index.html b/index.html index 998c9bb6..80cfd5cc 100644 --- a/index.html +++ b/index.html @@ -42,11 +42,13 @@

+ /> +

Filtres

From f1cf96e777178043ab8ff5bfbd8a40b96802bb5b Mon Sep 17 00:00:00 2001 From: Angerome22 Date: Tue, 14 May 2024 18:37:45 +0200 Subject: [PATCH 16/26] =?UTF-8?q?version=20mobile=20reste=20filter=20+=20d?= =?UTF-8?q?=C3=A9tails?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 88 +++++++++++++++++++++++++++++++++++++++++++++------ index.html | 6 ++-- 2 files changed, 81 insertions(+), 13 deletions(-) diff --git a/css/style.css b/css/style.css index ef6d293b..44227594 100644 --- a/css/style.css +++ b/css/style.css @@ -55,14 +55,12 @@ header nav ul li a:hover { height: 281px; margin-bottom: 30px; } -.formulaire .section-title { - margin-bottom: 35px; -} -.formulaire .section-title span { +.formulaire p { font-weight: 400; - font-size: 15px; - padding-top: 8px; + font-size: 16px; + margin-bottom: 35px; + margin-top: 0px; } form input { border: none; @@ -163,7 +161,6 @@ i .fa-solid .fa-location-dot { align-content: center; border-radius: 25px; border: 2px #d9d9d9 solid; - margin-right: 17px; padding-right: 17px; } @@ -527,13 +524,25 @@ footer .assistance { text-decoration-color: #0065fc; } + .info-group { + width: 100%; + height: 432px; + margin-bottom: 35px; + padding: 0px 20px; + } + .info-group h2 { + width: 335px; + height: 52px; + padding-bottom: 8px; + } .search { display: none; } + i .fa-solid .fa-magnifying-glass { text-align: center; - width: 49px; - height: 49px; + width: 48px; + height: 48px; } .fa-magnifying-glass { display: inline; @@ -543,10 +552,69 @@ footer .assistance { background-color: #0065fc; height: 17px; width: 17px; - padding: 15px 16px; + padding: 14px 15px; + } + .filter-button { + display: block; + width: 100%; + height: 161px; + margin-bottom: 35px; + } + .filter-title { + padding-bottom: 20px; + } + .fa-money-bill-wave input, + .fa-person input, + .fa-heart input, + .fa-fire input { + font-size: 14px; + } + .fa-money-bill-wave, + .fa-person, + .fa-heart, + .fa-fire { + width: 50%; + height: 50px; + + margin: 0; + align-items: center; } + .hebergements-and-populaires, .populaires { + flex-direction: column-reverse; + } + .hebergements-and-populaires section { + background-color: transparent; + } + + .populaires { + width: 100%; + } + + .hebergements { + width: 100%; + } + .hebergements-cards a { + width: 100%; + padding-bottom: 30px; + } + .activites { + width: 100%; + } + .activites-cards { flex-direction: column; } + .activites-cards a { + width: 100%; + } + .footer { + flex-direction: column; + } + .a-propos, + .nos-hebergements, + .assistance { + width: 100%; + margin: 0; + } } diff --git a/index.html b/index.html index 80cfd5cc..a2a6c592 100644 --- a/index.html +++ b/index.html @@ -36,9 +36,9 @@

- Trouvez votre hebergement pour des vacances de rêve
- En plein centre-ville ou en pleine nature -

+ Trouvez votre hebergement pour des vacances de rêve

+

En plein centre-ville ou en pleine nature

+ Date: Wed, 15 May 2024 13:54:22 +0200 Subject: [PATCH 17/26] =?UTF-8?q?version=20mobile=20=20finalis=C3=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 51 ++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 36 insertions(+), 15 deletions(-) diff --git a/css/style.css b/css/style.css index 44227594..42646fcc 100644 --- a/css/style.css +++ b/css/style.css @@ -167,6 +167,7 @@ i .fa-solid .fa-location-dot { .filter-button .fa-solid:hover { background-color: #deebff; } + .fa-solid .fa-info { padding: 0px 2.5px; height: 24px; @@ -179,11 +180,6 @@ i .fa-solid .fa-location-dot { padding: 7px 10px; margin-right: 10px; } - -/*.info .text-info { - -} - /*-------------------------------MAIN-CONTAINER--------------------------------*/ .main-container { width: 100%; @@ -554,15 +550,17 @@ footer .assistance { width: 17px; padding: 14px 15px; } + .filter-title { + padding-bottom: 20px; + } + .filter-button { display: block; width: 100%; height: 161px; margin-bottom: 35px; } - .filter-title { - padding-bottom: 20px; - } + .fa-money-bill-wave input, .fa-person input, .fa-heart input, @@ -573,31 +571,52 @@ footer .assistance { .fa-person, .fa-heart, .fa-fire { - width: 50%; - height: 50px; - + width: 158.5px; + height: 46px; margin: 0; - align-items: center; + padding-right: 0px; + margin-bottom: 20px; + margin-right: 10px; + } + .fa-solid .fa-info { + padding: 0px 2.5px; + height: 24px; + } + + i .fa-info { + display: inline; + border-radius: 50%; + border: 1px #d9d9d9 solid; + padding: 7px 10px; + margin-right: 10px; } .hebergements-and-populaires, .populaires { flex-direction: column-reverse; } - .hebergements-and-populaires section { - background-color: transparent; + .hebergements-and-populaires { + background-color: white; + } + .hebergements-and-populaires .hebergements { + background-color: white; } .populaires { width: 100%; + margin-bottom: 15px; + } + .populaires-cards .card { + margin-top: 15px; } .hebergements { width: 100%; } + .hebergements-cards a { width: 100%; - padding-bottom: 30px; + padding-bottom: 15px; } .activites { width: 100%; @@ -607,9 +626,11 @@ footer .assistance { } .activites-cards a { width: 100%; + padding-bottom: 15px; } .footer { flex-direction: column; + height: 461px; } .a-propos, .nos-hebergements, From f98b8ab0c158ea682ad732308248de47a86b8ff3 Mon Sep 17 00:00:00 2001 From: Angerome22 Date: Wed, 15 May 2024 18:08:12 +0200 Subject: [PATCH 18/26] finalisation filter bar --- css/style.css | 42 ++++++++++++++++-------------------------- images/Icon/price.png | Bin 531 -> 0 bytes index.html | 18 ++++++------------ 3 files changed, 22 insertions(+), 38 deletions(-) delete mode 100644 images/Icon/price.png diff --git a/css/style.css b/css/style.css index 42646fcc..f1d87a18 100644 --- a/css/style.css +++ b/css/style.css @@ -144,27 +144,22 @@ i .fa-solid .fa-location-dot { padding-right: 10px; padding-left: 19px; } -.fa-money-bill-wave input, -.fa-person input, -.fa-heart input, -.fa-fire input { + +.filter-button a { background-color: transparent; height: 46px; color: #000000; font-size: 17px; font-weight: 700; -} -.fa-money-bill-wave, -.fa-person, -.fa-heart, -.fa-fire { align-content: center; border-radius: 25px; border: 2px #d9d9d9 solid; - margin-right: 17px; + margin-right: 15px; padding-right: 17px; + text-decoration: none; } -.filter-button .fa-solid:hover { + +.filter-button a:hover { background-color: #deebff; } @@ -416,23 +411,18 @@ footer .assistance { .filter-button { display: block; - max-width: 668px; height: 91px; margin-bottom: 35px; } - + .filter-button a { + padding-bottom: 10px; + padding-top: 10px; + margin-right: 5px; + } .filter-title { margin-bottom: 20px; } - .fa-money-bill-wave, - .fa-person, - .fa-heart, - .fa-fire { - font-size: 16px; - margin-right: 0px; - } - .hebergements-and-populaires { flex-direction: column; } @@ -554,17 +544,17 @@ footer .assistance { padding-bottom: 20px; } - .filter-button { + .filter-button a { display: block; width: 100%; height: 161px; margin-bottom: 35px; } - .fa-money-bill-wave input, - .fa-person input, - .fa-heart input, - .fa-fire input { + .fa-money-bill-wave, + .fa-person, + .fa-heart, + .fa-fire { font-size: 14px; } .fa-money-bill-wave, diff --git a/images/Icon/price.png b/images/Icon/price.png deleted file mode 100644 index 2851e388a6d7a569b9fba864894a043915ba2322..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 531 zcmV+u0_^>XP)4!5Dld80aag_5iv3ZWS`KP`B3CR zitzW2OHfkt;Zg$%tpd=Gh$7P}Gbbi=<@<7hLd+8^yaZBA4lodB=+0mGr{!h<8gm=L zp{Ct&3#m3Pk_nqLa_s0B1NVdn@7Ap1Q>Z>v`keLGv7KA(*7#@ZdXJE=AY`{Ug-|g& z#Qi~J{`9@e+8g&glxX4DUjx;950_9a-B;|sLQd5Ld;FC#9h05Gls_`5xN2E7Sg2+m zOs7@L{^R%xZCkcly05ax=jU<~=#S;1S{`b(S1u&Z9L|uG^OcG+g75uN9HWy2+OJJF zH8RmBy57D(_?;lG2Ss(}H8aOV3J-38^Euxsp0JVZ8v*6n_e57mq#b`COZLcqemNu^ zLGrQpX5pXw*6K0*Q~Ek<7@Y9?fF2xil)nb!h65reaOE%uDmzDR$LTZ+%m$DmeFL{U VsX#gV=)nL0002ovPDHLkV1kC_<

En plein centre-ville ou en pleine nature

+ > +

Filtres

- - - - + Economique + Familial + Romantique + Nos pépites
Plus de 500 logements sont disponibles dans cette ville From 824ffa0a4316abdd15af1e1a026fde4f2bee2dd0 Mon Sep 17 00:00:00 2001 From: Angerome22 Date: Thu, 16 May 2024 09:59:07 +0200 Subject: [PATCH 19/26] remise en forme du html --- css/style.css | 52 +++- index.html | 654 ++++++++++++++++++++------------------------------ 2 files changed, 297 insertions(+), 409 deletions(-) diff --git a/css/style.css b/css/style.css index f1d87a18..8104dd60 100644 --- a/css/style.css +++ b/css/style.css @@ -479,6 +479,7 @@ footer .assistance { @media (max-width: 767.98px) and (min-width: 320px) { .main-container { padding: 0px; + max-width: 767.98px; } header { flex-direction: column; @@ -540,16 +541,51 @@ footer .assistance { width: 17px; padding: 14px 15px; } - .filter-title { - padding-bottom: 20px; - } - - .filter-button a { - display: block; - width: 100%; + .filter-button { + display: inline-block; height: 161px; + width: 100%; margin-bottom: 35px; } + .filter-button a { + padding-bottom: 10px; + padding-top: 10px; + margin-right: 5px; + margin-top: 20px; + } + .filter-title { + margin-bottom: 20px; + } /* + .fa-solid .fa-money-bill-wave, +.fa-solid .fa-person, +.fa-solid .fa-heart, +.fa-solid .fa-fire { + height: 22px; + width: 22px; +}*/ + + .fa-money-bill-wave::before, + .fa-person::before, + .fa-heart::before, + .fa-fire::before { + color: var(--main-color); + padding-right: 10px; + padding-left: 19px; + } + + /* .filter-button a { + background-color: transparent; + height: 46px; + color: #000000; + font-size: 17px; + font-weight: 700; + align-content: center; + border-radius: 25px; + border: 2px #d9d9d9 solid; + margin-right: 17px; + padding-right: 17px; + text-decoration: none; + }*/ .fa-money-bill-wave, .fa-person, @@ -561,8 +597,6 @@ footer .assistance { .fa-person, .fa-heart, .fa-fire { - width: 158.5px; - height: 46px; margin: 0; padding-right: 0px; margin-bottom: 20px; diff --git a/index.html b/index.html index 4a18c29b..2119983b 100644 --- a/index.html +++ b/index.html @@ -1,416 +1,270 @@ - - - - Booki - - - - - - - -
-
- - -
-
-
-
-
-

- Trouvez votre hebergement pour des vacances de rêve

-

En plein centre-ville ou en pleine nature

- - - - - - Plus de 500 logements sont disponibles dans cette ville -
-
-
+ + + +Booki + + + + + + -
-
-

Hébergements à Marseille

-
+
+
+

Les plus populaires

+
- - -
- - - - - - -
- image chambre hotel avec lit - - -

Auberge Le Panier

- - -

- Nuit à partir de 23 -

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

- + From d031c3bb199d94f637be8a37de62265892ffcc8f Mon Sep 17 00:00:00 2001 From: Angerome22 Date: Thu, 16 May 2024 11:06:40 +0200 Subject: [PATCH 20/26] finalisation code css --- css/style.css | 187 ++++++++----- images/index.html | 270 ++++++++++++++++++ images/style.css | 700 ++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 1083 insertions(+), 74 deletions(-) create mode 100644 images/index.html create mode 100644 images/style.css diff --git a/css/style.css b/css/style.css index 8104dd60..06682ddb 100644 --- a/css/style.css +++ b/css/style.css @@ -18,17 +18,60 @@ body { justify-content: center; margin: 0; } -/*----------------------------------HEADER-----------------------------------------*/ + +.main-container { + width: 100%; + max-width: 1440px; + padding: 0 50px; + box-sizing: border-box; +} + +a { + color: inherit; + text-decoration: none; +} + +.section-title { + margin: 0; + font-size: 22px; +} + +.card { + background-color: white; + border-radius: 20px; + padding: 5px; + filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1)); +} + +.card img { + object-fit: cover; +} + +.card-title { + font-size: 16px; +} + +.euro { + font-weight: 700; +} + +.neutral-star { + color: var(--main-bg-color); +} + +/****** Header***********/ header { display: flex; justify-content: space-between; height: 79px; margin-bottom: 30px; } + header img { width: 4.55%; padding: 30px 50px 30px 0px; } + nav ul { display: flex; width: 88%; @@ -37,6 +80,7 @@ nav ul { align-items: center; padding: 0px 0px 0px 50px; } + header nav ul li a:hover { width: 140px; padding-top: 14px; @@ -44,13 +88,15 @@ header nav ul li a:hover { border-top: 2px solid #0065fc; text-decoration-color: #0065fc; } + .am, .hm { height: 35px; font-size: 16px; font-weight: 400; } -/*-----------------------------------FORMULAIRE-----------------------------*/ + +/****** Info-Group***********/ .info-group { height: 281px; margin-bottom: 30px; @@ -62,6 +108,7 @@ header nav ul li a:hover { margin-bottom: 35px; margin-top: 0px; } + form input { border: none; padding: 0px; @@ -83,6 +130,7 @@ i .fa-solid .fa-location-dot { background-color: #f2f2f2; opacity: 1; } + .city { width: 195px; height: 47px; @@ -108,6 +156,7 @@ i .fa-solid .fa-location-dot { font-size: 18px; color: white; } + .fa-magnifying-glass { display: none; } @@ -119,6 +168,7 @@ i .fa-solid .fa-location-dot { align-items: center; margin-bottom: 35px; } + .filter-title { width: 54px; height: 21px; @@ -175,45 +225,6 @@ i .fa-solid .fa-location-dot { padding: 7px 10px; margin-right: 10px; } -/*-------------------------------MAIN-CONTAINER--------------------------------*/ -.main-container { - width: 100%; - max-width: 1440px; - padding: 0 50px; - box-sizing: border-box; -} -a { - color: inherit; - text-decoration: none; -} - -.section-title { - margin: 0; - font-size: 22px; -} - -.card { - background-color: white; - border-radius: 20px; - padding: 5px; - filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1)); -} - -.card img { - object-fit: cover; -} - -.card-title { - font-size: 16px; -} - -.euro { - font-weight: 700; -} - -.neutral-star { - color: var(--main-bg-color); -} /****** Hebergements And Populaires ***********/ .hebergements-and-populaires { @@ -233,20 +244,24 @@ a { .hebergements { width: 65%; } + .hebergements .section-title { padding-bottom: 30px; } + .hebergements-cards { display: flex; flex-wrap: wrap; align-content: stretch; justify-content: space-between; } + .hebergements-cards .card { display: flex; flex-direction: column; height: 197.25px; } + .hebergements-cards a { width: 30.8%; padding-bottom: 30px; @@ -263,6 +278,7 @@ a { padding-left: 10px; padding-top: 10px; } + .hebergements .card-subtitle { padding-left: 10px; margin: 0; @@ -279,6 +295,7 @@ a { .cta { height: 21px; } + .cta-link { font-size: 18px; font-weight: 700; @@ -328,38 +345,47 @@ a { .populaires-cards .card-rating { margin-bottom: 5px; } -/*-----------------------------------ACTIVITES---------------------------*/ + +/****** Activités ***********/ .activites section { padding: 30px; } + .activites { box-sizing: border-box; } + .activites .section-title { padding-bottom: 30px; } + .activites-cards { display: flex; justify-content: space-between; } + .activites-cards .card { height: 439px; } + .activites-cards a { justify-content: space-evenly; width: 23.24%; } + .activites-cards img { width: 100%; height: 370px; border-radius: 20px 20px 0px 0px; } + .activites-cards .card-title { margin: 0; padding-left: 14px; padding-top: 20px; } -/*-------------------------------------FOOTER------------------------------------------*/ + +/****** Footer ***********/ footer { background-color: var(--main-bg-color); margin-top: 30px; @@ -370,12 +396,14 @@ footer { display: flex; margin: 0; } + .a-propos, .nos-hebergements, .assistance { width: 33.3%; margin: 0; } + footer .a-propos, footer .nos-hebergements, footer .assistance { @@ -404,7 +432,7 @@ footer .assistance { /****** Media queries ***********/ /* Medium devices (tablets, less/equal than 1024px) */ -@media (max-width: 1024px) and (min-width: 768px) { +@media (max-width: 1024px) { .info-group { height: 322px; } @@ -414,11 +442,13 @@ footer .assistance { height: 91px; margin-bottom: 35px; } + .filter-button a { padding-bottom: 10px; padding-top: 10px; margin-right: 5px; } + .filter-title { margin-bottom: 20px; } @@ -426,6 +456,7 @@ footer .assistance { .hebergements-and-populaires { flex-direction: column; } + .hebergements { width: 100%; flex-wrap: wrap; @@ -443,7 +474,7 @@ footer .assistance { } .populaires-cards a { - width: 30.8%; + width: 30%; } .populaires-cards .card-title, @@ -455,10 +486,12 @@ footer .assistance { .hebergements-cards .card-subtitle { font-size: 13px; } + .activites { justify-content: space-between; width: 100%; } + .activites-cards .card { height: 270px; } @@ -466,9 +499,11 @@ footer .assistance { .activites-cards img { height: 200px; } + .activites-cards a { width: 23.24%; } + .activites-cards .card-title { padding: 20px 0px 20px 15px; margin: 0; @@ -481,16 +516,19 @@ footer .assistance { padding: 0px; max-width: 767.98px; } + header { flex-direction: column; height: 115px; width: 100%; } + header img { align-self: center; width: 61.09px; padding: 30px 50px 30px 30px; } + nav ul { display: flex; width: 100%; @@ -498,6 +536,7 @@ footer .assistance { gap: 0px; padding: 0px; } + nav ul li { width: 50%; text-align: center; @@ -517,11 +556,13 @@ footer .assistance { margin-bottom: 35px; padding: 0px 20px; } + .info-group h2 { width: 335px; height: 52px; padding-bottom: 8px; } + .search { display: none; } @@ -531,6 +572,7 @@ footer .assistance { width: 48px; height: 48px; } + .fa-magnifying-glass { display: inline; color: #ffffff; @@ -541,28 +583,24 @@ footer .assistance { width: 17px; padding: 14px 15px; } + .filter-button { display: inline-block; height: 161px; width: 100%; margin-bottom: 35px; } + .filter-button a { padding-bottom: 10px; padding-top: 10px; margin-right: 5px; margin-top: 20px; } + .filter-title { margin-bottom: 20px; - } /* - .fa-solid .fa-money-bill-wave, -.fa-solid .fa-person, -.fa-solid .fa-heart, -.fa-solid .fa-fire { - height: 22px; - width: 22px; -}*/ + } .fa-money-bill-wave::before, .fa-person::before, @@ -573,26 +611,13 @@ footer .assistance { padding-left: 19px; } - /* .filter-button a { - background-color: transparent; - height: 46px; - color: #000000; - font-size: 17px; - font-weight: 700; - align-content: center; - border-radius: 25px; - border: 2px #d9d9d9 solid; - margin-right: 17px; - padding-right: 17px; - text-decoration: none; - }*/ - .fa-money-bill-wave, .fa-person, .fa-heart, .fa-fire { font-size: 14px; } + .fa-money-bill-wave, .fa-person, .fa-heart, @@ -602,6 +627,7 @@ footer .assistance { margin-bottom: 20px; margin-right: 10px; } + .fa-solid .fa-info { padding: 0px 2.5px; height: 24px; @@ -619,43 +645,56 @@ footer .assistance { .populaires { flex-direction: column-reverse; } + .hebergements-and-populaires { background-color: white; } + .hebergements-and-populaires .hebergements { background-color: white; } - .populaires { + .hebergements { width: 100%; - margin-bottom: 15px; } - .populaires-cards .card { - margin-top: 15px; + + .hebergements-cards a { + width: 100%; + padding-bottom: 15px; } - .hebergements { + .populaires { width: 100%; + margin-bottom: 15px; } - .hebergements-cards a { + .populaires-cards { + display: flex; + flex-direction: column; + margin-top: 15px; + } + .populaires-cards a { width: 100%; - padding-bottom: 15px; } + .activites { width: 100%; } + .activites-cards { flex-direction: column; } + .activites-cards a { width: 100%; padding-bottom: 15px; } + .footer { flex-direction: column; height: 461px; } + .a-propos, .nos-hebergements, .assistance { diff --git a/images/index.html b/images/index.html new file mode 100644 index 00000000..ba4ecbb4 --- /dev/null +++ b/images/index.html @@ -0,0 +1,270 @@ + + + + + + +Booki + + + + + + + + +
+
+ + +
+
+
+
+
+

Trouvez votre hebergement pour des vacances de rêve

+

En plein centre-ville ou en pleine nature

+ + + Plus de 500 logements sont disponibles dans cette ville +
+
+
+ + +
+ +
+ + diff --git a/images/style.css b/images/style.css new file mode 100644 index 00000000..599948c7 --- /dev/null +++ b/images/style.css @@ -0,0 +1,700 @@ +/****** General ***********/ +* { + font-family: "Raleway", sans-serif; +} + +:root { + --main-color: #0065fc; + --main-bg-color: #f2f2f2; + --filter-bg-color: #deebff; +} + +.fa-solid { + color: var(--main-color); +} + +body { + display: flex; + justify-content: center; + margin: 0; +} + +.main-container { + width: 100%; + max-width: 1440px; + padding: 0 50px; + box-sizing: border-box; +} + +a { + color: inherit; + text-decoration: none; +} + +.section-title { + margin: 0; + font-size: 22px; +} + +.card { + background-color: white; + border-radius: 20px; + padding: 5px; + filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1)); +} + +.card img { + object-fit: cover; +} + +.card-title { + font-size: 16px; +} + +.euro { + font-weight: 700; +} + +.neutral-star { + color: var(--main-bg-color); +} + +/****** Header***********/ +header { + display: flex; + justify-content: space-between; + height: 79px; + margin-bottom: 30px; +} + +header img { + width: 4.55%; + padding: 30px 50px 30px 0px; +} + +nav ul { + display: flex; + width: 88%; + gap: 68px; + list-style: none; + align-items: center; + padding: 0px 0px 0px 50px; +} + +header nav ul li a:hover { + width: 140px; + padding-top: 14px; + color: #0065fc; + border-top: 2px solid #0065fc; + text-decoration-color: #0065fc; +} + +.am, +.hm { + height: 35px; + font-size: 16px; + font-weight: 400; +} + +/****** Info-Group***********/ +.info-group { + height: 281px; + margin-bottom: 30px; +} + +.formulaire p { + font-weight: 400; + font-size: 16px; + margin-bottom: 35px; + margin-top: 0px; +} + +form input { + border: none; + padding: 0px; +} + +i .fa-solid .fa-location-dot { + text-align: center; + width: 50px; + height: 49px; +} + +.fa-location-dot { + display: inline; + height: 18px; + width: 14px; + padding: 16px 18px 15px 18px; + border-radius: 15px 0px 0px 15px; + color: black; + background-color: #f2f2f2; + opacity: 1; +} + +.city { + width: 195px; + height: 47px; + border-top: 1px #f2f2f2 solid; + border-bottom: 1px #f2f2f2 solid; + text-align: center; + font-size: 18px; + font-weight: 700; + padding: 0px; +} + +.city ::placeholder { + color: black; +} + +.search { + width: 132px; + height: 49px; + border: none; + background-color: #0065fc; + border-radius: 0px 15px 15px 0px; + font-weight: 700; + font-size: 18px; + color: white; +} + +.fa-magnifying-glass { + display: none; +} + +.filter-button { + display: flex; + height: 50px; + padding-top: 35px; + align-items: center; + margin-bottom: 35px; +} + +.filter-title { + width: 54px; + height: 21px; + font-weight: 700; + font-size: 18px; + padding-right: 15px; + margin: 0; +} + +.fa-solid .fa-money-bill-wave, +.fa-solid .fa-person, +.fa-solid .fa-heart, +.fa-solid .fa-fire { + height: 22px; + width: 22px; +} + +.fa-money-bill-wave::before, +.fa-person::before, +.fa-heart::before, +.fa-fire::before { + color: var(--main-color); + padding-right: 10px; + padding-left: 19px; +} + +.filter-button a { + background-color: transparent; + height: 46px; + color: #000000; + font-size: 17px; + font-weight: 700; + align-content: center; + border-radius: 25px; + border: 2px #d9d9d9 solid; + margin-right: 15px; + padding-right: 17px; + text-decoration: none; +} + +.filter-button a:hover { + background-color: #deebff; +} + +.fa-solid .fa-info { + padding: 0px 2.5px; + height: 24px; +} + +.fa-info { + display: inline; + border-radius: 50%; + border: 1px #d9d9d9 solid; + padding: 7px 10px; + margin-right: 10px; +} + +/****** Hebergements And Populaires ***********/ +.hebergements-and-populaires { + display: flex; + justify-content: space-between; + margin-bottom: 30px; +} + +.hebergements-and-populaires section { + background-color: var(--main-bg-color); + border-radius: 20px; + padding: 30px; + box-sizing: border-box; +} + +/****** Hebergements ***********/ +.hebergements { + width: 65%; +} + +.hebergements .section-title { + padding-bottom: 30px; +} + +.hebergements-cards { + display: flex; + flex-wrap: wrap; + align-content: stretch; + justify-content: space-between; +} + +.hebergements-cards .card { + display: flex; + flex-direction: column; + height: 197.25px; +} + +.hebergements-cards a { + width: 30.8%; + padding-bottom: 30px; +} + +.hebergements img { + width: 100%; + height: 114px; + border-radius: 15px 15px 0px 0px; +} + +.hebergements .card-title { + margin: 0; + padding-left: 10px; + padding-top: 10px; +} + +.hebergements .card-subtitle { + padding-left: 10px; + margin: 0; + margin-top: 8px; + margin-bottom: 8px; +} + +.hebergements .card-rating { + margin: 0; + padding-left: 10px; + margin-bottom: 5px; +} + +.cta { + height: 21px; +} + +.cta-link { + font-size: 18px; + font-weight: 700; +} + +/****** Populaires ***********/ +.populaires { + width: 32%; +} + +.populaires-title { + display: flex; + justify-content: space-between; + align-items: center; +} + +.populaires-cards .card { + display: flex; + margin-top: 30px; +} + +.populaires-cards img { + width: 33%; + height: 136px; + border-top-left-radius: 20px; + border-bottom-left-radius: 20px; +} + +.populaires-cards .card-content { + width: 67%; + padding-left: 15px; + display: flex; + flex-direction: column; + justify-content: space-between; + box-sizing: border-box; +} + +.populaires-cards .card-title { + margin-top: 10px; + margin-bottom: 4px; +} + +.populaires-cards .card-subtitle { + margin: 0; +} + +.populaires-cards .card-rating { + margin-bottom: 5px; +} + +/****** Activités ***********/ +.activites section { + padding: 30px; +} + +.activites { + box-sizing: border-box; +} + +.activites .section-title { + padding-bottom: 30px; +} + +.activites-cards { + display: flex; + justify-content: space-between; +} + +.activites-cards .card { + height: 439px; +} + +.activites-cards a { + justify-content: space-evenly; + width: 23.24%; +} + +.activites-cards img { + width: 100%; + height: 370px; + border-radius: 20px 20px 0px 0px; +} + +.activites-cards .card-title { + margin: 0; + padding-left: 14px; + padding-top: 20px; +} + +/****** Footer ***********/ +footer { + background-color: var(--main-bg-color); + margin-top: 30px; +} + +.footer { + height: 163px; + display: flex; + margin: 0; +} + +.a-propos, +.nos-hebergements, +.assistance { + width: 33.3%; + margin: 0; +} + +footer .a-propos, +footer .nos-hebergements, +footer .assistance { + padding: 20px; +} + +.footer ul { + list-style: none; + padding: 0px; + margin: 0; +} + +.footer ul li { + padding-bottom: 15px; +} + +.a-propos h3, +.nos-hebergements h3, +.assistance h3 { + margin: 0; + padding-bottom: 15px; + padding-top: 0px; +} + +/* Le code ci-dessous correspond à la version responsive uniquement */ + +/****** Media queries ***********/ +/* Medium devices (tablets, less/equal than 1024px) */ +@media (max-width: 1024px) { + .info-group { + height: 322px; + } + + .filter-button { + display: block; + height: 91px; + margin-bottom: 35px; + } + + .filter-button a { + padding-bottom: 10px; + padding-top: 10px; + margin-right: 5px; + } + + .filter-title { + margin-bottom: 20px; + } + + .hebergements-and-populaires { + flex-direction: column; + } + + .hebergements { + width: 100%; + flex-wrap: wrap; + } + + .populaires { + width: 100%; + margin-top: 50px; + } + + .populaires-cards { + display: flex; + flex-direction: row; + justify-content: space-between; + } + + .populaires-cards a { + width: 30.8%; + } + + .populaires-cards .card-title, + .hebergements-cards .card-title { + font-size: 14px; + } + + .populaires-cards .card-subtitle, + .hebergements-cards .card-subtitle { + font-size: 13px; + } + + .activites { + justify-content: space-between; + width: 100%; + } + + .activites-cards .card { + height: 270px; + } + + .activites-cards img { + height: 200px; + } + + .activites-cards a { + width: 23.24%; + } + + .activites-cards .card-title { + padding: 20px 0px 20px 15px; + margin: 0; + } +} + +/* Small devices (phones, less than 768px) */ +@media (max-width: 767.98px) and (min-width: 320px) { + .main-container { + padding: 0px; + max-width: 767.98px; + } + + header { + flex-direction: column; + height: 115px; + width: 100%; + } + + header img { + align-self: center; + width: 61.09px; + padding: 30px 50px 30px 30px; + } + + nav ul { + display: flex; + width: 100%; + margin: 0; + gap: 0px; + padding: 0px; + } + + nav ul li { + width: 50%; + text-align: center; + } + + header nav ul li a:hover { + padding-bottom: 15px; + color: #0065fc; + border-bottom: 2px solid #0065fc; + border-top: 2px solid #ffffff; + text-decoration-color: #0065fc; + } + + .info-group { + width: 100%; + height: 432px; + margin-bottom: 35px; + padding: 0px 20px; + } + + .info-group h2 { + width: 335px; + height: 52px; + padding-bottom: 8px; + } + + .search { + display: none; + } + + i .fa-solid .fa-magnifying-glass { + text-align: center; + width: 48px; + height: 48px; + } + + .fa-magnifying-glass { + display: inline; + color: #ffffff; + border-radius: 15px; + text-align: center; + background-color: #0065fc; + height: 17px; + width: 17px; + padding: 14px 15px; + } + + .filter-button { + display: inline-block; + height: 161px; + width: 100%; + margin-bottom: 35px; + } + + .filter-button a { + padding-bottom: 10px; + padding-top: 10px; + margin-right: 5px; + margin-top: 20px; + } + + .filter-title { + margin-bottom: 20px; + } + + .fa-money-bill-wave::before, + .fa-person::before, + .fa-heart::before, + .fa-fire::before { + color: var(--main-color); + padding-right: 10px; + padding-left: 19px; + } + + .fa-money-bill-wave, + .fa-person, + .fa-heart, + .fa-fire { + font-size: 14px; + } + + .fa-money-bill-wave, + .fa-person, + .fa-heart, + .fa-fire { + margin: 0; + padding-right: 0px; + margin-bottom: 20px; + margin-right: 10px; + } + + .fa-solid .fa-info { + padding: 0px 2.5px; + height: 24px; + } + + i .fa-info { + display: inline; + border-radius: 50%; + border: 1px #d9d9d9 solid; + padding: 7px 10px; + margin-right: 10px; + } + + .hebergements-and-populaires, + .populaires { + flex-direction: column-reverse; + } + + .hebergements-and-populaires { + background-color: white; + } + + .hebergements-and-populaires .hebergements { + background-color: white; + } + + .hebergements { + width: 100%; + } + + .hebergements-cards a { + width: 100%; + padding-bottom: 15px; + } + + .populaires { + width: 100%; + margin-bottom: 15px; + } + + .populaires-cards { + width: 100%; + margin-top: 15px; + } + + .activites { + width: 100%; + } + + .activites-cards { + flex-direction: column; + } + + .activites-cards a { + width: 100%; + padding-bottom: 15px; + } + + .footer { + flex-direction: column; + height: 461px; + } + + .a-propos, + .nos-hebergements, + .assistance { + width: 100%; + margin: 0; + } +} From 08073313dad7cb31738ca1011a5a6d4e3a20c24e Mon Sep 17 00:00:00 2001 From: Angerome22 Date: Thu, 16 May 2024 14:25:01 +0200 Subject: [PATCH 21/26] barre filtre mobile --- css/style.css | 48 +++++++++++++++++++++++++----------------------- index.html | 6 ++++-- 2 files changed, 29 insertions(+), 25 deletions(-) diff --git a/css/style.css b/css/style.css index 06682ddb..604046a9 100644 --- a/css/style.css +++ b/css/style.css @@ -161,7 +161,7 @@ i .fa-solid .fa-location-dot { display: none; } -.filter-button { +.filter { display: flex; height: 50px; padding-top: 35px; @@ -207,6 +207,8 @@ i .fa-solid .fa-location-dot { margin-right: 15px; padding-right: 17px; text-decoration: none; + padding-top: 15px; + padding-bottom: 15px; } .filter-button a:hover { @@ -437,7 +439,7 @@ footer .assistance { height: 322px; } - .filter-button { + .filter { display: block; height: 91px; margin-bottom: 35px; @@ -563,6 +565,10 @@ footer .assistance { padding-bottom: 8px; } + form { + height: 432px; + } + .search { display: none; } @@ -584,31 +590,30 @@ footer .assistance { padding: 14px 15px; } - .filter-button { - display: inline-block; + .filter { + display: flex; + flex-direction: column; height: 161px; width: 100%; margin-bottom: 35px; } - .filter-button a { - padding-bottom: 10px; + .filter-title { + align-self: flex-start; + } + + .filter-button { + display: flex; + width: 50%; + flex-wrap: wrap; + justify-content: space-between; + align-items: flex-start; padding-top: 10px; margin-right: 5px; margin-top: 20px; } - - .filter-title { - margin-bottom: 20px; - } - - .fa-money-bill-wave::before, - .fa-person::before, - .fa-heart::before, - .fa-fire::before { - color: var(--main-color); - padding-right: 10px; - padding-left: 19px; + .filter-button a { + width: 100%; } .fa-money-bill-wave, @@ -622,19 +627,16 @@ footer .assistance { .fa-person, .fa-heart, .fa-fire { - margin: 0; padding-right: 0px; margin-bottom: 20px; margin-right: 10px; } - - .fa-solid .fa-info { + */ .fa-solid .fa-info { padding: 0px 2.5px; height: 24px; } - i .fa-info { - display: inline; + .fa-info { border-radius: 50%; border: 1px #d9d9d9 solid; padding: 7px 10px; diff --git a/index.html b/index.html index 2119983b..62f12ffb 100644 --- a/index.html +++ b/index.html @@ -30,12 +30,14 @@

Trouvez votre hebergement pour des vacances de rêve

En plein centre-ville ou en pleine nature

-
-

Filtres

+ Plus de 500 logements sont disponibles dans cette ville From fd4f8c761d8aa74d531f852f1ddc49040b55cf8c Mon Sep 17 00:00:00 2001 From: Angerome22 Date: Thu, 16 May 2024 15:06:27 +0200 Subject: [PATCH 22/26] filter bar sur mobile --- css/style.css | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/css/style.css b/css/style.css index 604046a9..01534fa9 100644 --- a/css/style.css +++ b/css/style.css @@ -591,8 +591,6 @@ footer .assistance { } .filter { - display: flex; - flex-direction: column; height: 161px; width: 100%; margin-bottom: 35px; @@ -604,9 +602,8 @@ footer .assistance { .filter-button { display: flex; - width: 50%; flex-wrap: wrap; - justify-content: space-between; + width: 50%; align-items: flex-start; padding-top: 10px; margin-right: 5px; From 44e9523a94bdb723c1f64fe3fd19b510e2579666 Mon Sep 17 00:00:00 2001 From: Angerome22 Date: Thu, 16 May 2024 17:39:44 +0200 Subject: [PATCH 23/26] =?UTF-8?q?filter=20bar=20mobile=20am=C3=A9lior?= =?UTF-8?q?=C3=A9e?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 27 ++++++++++++++------------- index.html | 2 ++ 2 files changed, 16 insertions(+), 13 deletions(-) diff --git a/css/style.css b/css/style.css index 01534fa9..0356e3f9 100644 --- a/css/style.css +++ b/css/style.css @@ -556,13 +556,13 @@ footer .assistance { width: 100%; height: 432px; margin-bottom: 35px; - padding: 0px 20px; + margin-left: 20px; } .info-group h2 { width: 335px; height: 52px; - padding-bottom: 8px; + padding-bottom: 5px; } form { @@ -592,7 +592,6 @@ footer .assistance { .filter { height: 161px; - width: 100%; margin-bottom: 35px; } @@ -601,16 +600,19 @@ footer .assistance { } .filter-button { - display: flex; - flex-wrap: wrap; - width: 50%; - align-items: flex-start; - padding-top: 10px; - margin-right: 5px; + display: grid; + grid-template-columns: 156.5px 156.5px; + grid-template-rows: 1fr 1fr; + gap: 10px; margin-top: 20px; + margin-bottom: 20px; } .filter-button a { - width: 100%; + font-size: 14px; + font-weight: 700; + align-content: center; + height: 46px; + margin: 0; } .fa-money-bill-wave, @@ -625,10 +627,8 @@ footer .assistance { .fa-heart, .fa-fire { padding-right: 0px; - margin-bottom: 20px; - margin-right: 10px; } - */ .fa-solid .fa-info { + .fa-solid .fa-info { padding: 0px 2.5px; height: 24px; } @@ -638,6 +638,7 @@ footer .assistance { border: 1px #d9d9d9 solid; padding: 7px 10px; margin-right: 10px; + margin-top: 20px; } .hebergements-and-populaires, diff --git a/index.html b/index.html index 62f12ffb..268790e1 100644 --- a/index.html +++ b/index.html @@ -39,7 +39,9 @@

Filtres

Nos pépites
+
Plus de 500 logements sont disponibles dans cette ville +
From a2e83e370678808dc29a8a961e6b7ef1aece282a Mon Sep 17 00:00:00 2001 From: Angerome22 Date: Thu, 16 May 2024 19:43:42 +0200 Subject: [PATCH 24/26] last changed --- css/style.css | 20 +- images/style.css | 700 ----------------------------------------------- index.html | 631 ++++++++++++++++++++++++------------------ 3 files changed, 388 insertions(+), 963 deletions(-) delete mode 100644 images/style.css diff --git a/css/style.css b/css/style.css index 0356e3f9..20c73717 100644 --- a/css/style.css +++ b/css/style.css @@ -214,6 +214,15 @@ i .fa-solid .fa-location-dot { .filter-button a:hover { background-color: #deebff; } +form ul { + list-style: none; + padding-left: 0; + margin: 0; +} + +form ul li { + display: inline-block; +} .fa-solid .fa-info { padding: 0px 2.5px; @@ -556,7 +565,7 @@ footer .assistance { width: 100%; height: 432px; margin-bottom: 35px; - margin-left: 20px; + padding: 0px 20px; } .info-group h2 { @@ -606,6 +615,7 @@ footer .assistance { gap: 10px; margin-top: 20px; margin-bottom: 20px; + margin-left: 10px; } .filter-button a { font-size: 14px; @@ -632,8 +642,14 @@ footer .assistance { padding: 0px 2.5px; height: 24px; } + form ul { + padding-top: 20px; + } - .fa-info { + form ul li { + display: inline; + } + .icon .fa-info { border-radius: 50%; border: 1px #d9d9d9 solid; padding: 7px 10px; diff --git a/images/style.css b/images/style.css deleted file mode 100644 index 599948c7..00000000 --- a/images/style.css +++ /dev/null @@ -1,700 +0,0 @@ -/****** General ***********/ -* { - font-family: "Raleway", sans-serif; -} - -:root { - --main-color: #0065fc; - --main-bg-color: #f2f2f2; - --filter-bg-color: #deebff; -} - -.fa-solid { - color: var(--main-color); -} - -body { - display: flex; - justify-content: center; - margin: 0; -} - -.main-container { - width: 100%; - max-width: 1440px; - padding: 0 50px; - box-sizing: border-box; -} - -a { - color: inherit; - text-decoration: none; -} - -.section-title { - margin: 0; - font-size: 22px; -} - -.card { - background-color: white; - border-radius: 20px; - padding: 5px; - filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1)); -} - -.card img { - object-fit: cover; -} - -.card-title { - font-size: 16px; -} - -.euro { - font-weight: 700; -} - -.neutral-star { - color: var(--main-bg-color); -} - -/****** Header***********/ -header { - display: flex; - justify-content: space-between; - height: 79px; - margin-bottom: 30px; -} - -header img { - width: 4.55%; - padding: 30px 50px 30px 0px; -} - -nav ul { - display: flex; - width: 88%; - gap: 68px; - list-style: none; - align-items: center; - padding: 0px 0px 0px 50px; -} - -header nav ul li a:hover { - width: 140px; - padding-top: 14px; - color: #0065fc; - border-top: 2px solid #0065fc; - text-decoration-color: #0065fc; -} - -.am, -.hm { - height: 35px; - font-size: 16px; - font-weight: 400; -} - -/****** Info-Group***********/ -.info-group { - height: 281px; - margin-bottom: 30px; -} - -.formulaire p { - font-weight: 400; - font-size: 16px; - margin-bottom: 35px; - margin-top: 0px; -} - -form input { - border: none; - padding: 0px; -} - -i .fa-solid .fa-location-dot { - text-align: center; - width: 50px; - height: 49px; -} - -.fa-location-dot { - display: inline; - height: 18px; - width: 14px; - padding: 16px 18px 15px 18px; - border-radius: 15px 0px 0px 15px; - color: black; - background-color: #f2f2f2; - opacity: 1; -} - -.city { - width: 195px; - height: 47px; - border-top: 1px #f2f2f2 solid; - border-bottom: 1px #f2f2f2 solid; - text-align: center; - font-size: 18px; - font-weight: 700; - padding: 0px; -} - -.city ::placeholder { - color: black; -} - -.search { - width: 132px; - height: 49px; - border: none; - background-color: #0065fc; - border-radius: 0px 15px 15px 0px; - font-weight: 700; - font-size: 18px; - color: white; -} - -.fa-magnifying-glass { - display: none; -} - -.filter-button { - display: flex; - height: 50px; - padding-top: 35px; - align-items: center; - margin-bottom: 35px; -} - -.filter-title { - width: 54px; - height: 21px; - font-weight: 700; - font-size: 18px; - padding-right: 15px; - margin: 0; -} - -.fa-solid .fa-money-bill-wave, -.fa-solid .fa-person, -.fa-solid .fa-heart, -.fa-solid .fa-fire { - height: 22px; - width: 22px; -} - -.fa-money-bill-wave::before, -.fa-person::before, -.fa-heart::before, -.fa-fire::before { - color: var(--main-color); - padding-right: 10px; - padding-left: 19px; -} - -.filter-button a { - background-color: transparent; - height: 46px; - color: #000000; - font-size: 17px; - font-weight: 700; - align-content: center; - border-radius: 25px; - border: 2px #d9d9d9 solid; - margin-right: 15px; - padding-right: 17px; - text-decoration: none; -} - -.filter-button a:hover { - background-color: #deebff; -} - -.fa-solid .fa-info { - padding: 0px 2.5px; - height: 24px; -} - -.fa-info { - display: inline; - border-radius: 50%; - border: 1px #d9d9d9 solid; - padding: 7px 10px; - margin-right: 10px; -} - -/****** Hebergements And Populaires ***********/ -.hebergements-and-populaires { - display: flex; - justify-content: space-between; - margin-bottom: 30px; -} - -.hebergements-and-populaires section { - background-color: var(--main-bg-color); - border-radius: 20px; - padding: 30px; - box-sizing: border-box; -} - -/****** Hebergements ***********/ -.hebergements { - width: 65%; -} - -.hebergements .section-title { - padding-bottom: 30px; -} - -.hebergements-cards { - display: flex; - flex-wrap: wrap; - align-content: stretch; - justify-content: space-between; -} - -.hebergements-cards .card { - display: flex; - flex-direction: column; - height: 197.25px; -} - -.hebergements-cards a { - width: 30.8%; - padding-bottom: 30px; -} - -.hebergements img { - width: 100%; - height: 114px; - border-radius: 15px 15px 0px 0px; -} - -.hebergements .card-title { - margin: 0; - padding-left: 10px; - padding-top: 10px; -} - -.hebergements .card-subtitle { - padding-left: 10px; - margin: 0; - margin-top: 8px; - margin-bottom: 8px; -} - -.hebergements .card-rating { - margin: 0; - padding-left: 10px; - margin-bottom: 5px; -} - -.cta { - height: 21px; -} - -.cta-link { - font-size: 18px; - font-weight: 700; -} - -/****** Populaires ***********/ -.populaires { - width: 32%; -} - -.populaires-title { - display: flex; - justify-content: space-between; - align-items: center; -} - -.populaires-cards .card { - display: flex; - margin-top: 30px; -} - -.populaires-cards img { - width: 33%; - height: 136px; - border-top-left-radius: 20px; - border-bottom-left-radius: 20px; -} - -.populaires-cards .card-content { - width: 67%; - padding-left: 15px; - display: flex; - flex-direction: column; - justify-content: space-between; - box-sizing: border-box; -} - -.populaires-cards .card-title { - margin-top: 10px; - margin-bottom: 4px; -} - -.populaires-cards .card-subtitle { - margin: 0; -} - -.populaires-cards .card-rating { - margin-bottom: 5px; -} - -/****** Activités ***********/ -.activites section { - padding: 30px; -} - -.activites { - box-sizing: border-box; -} - -.activites .section-title { - padding-bottom: 30px; -} - -.activites-cards { - display: flex; - justify-content: space-between; -} - -.activites-cards .card { - height: 439px; -} - -.activites-cards a { - justify-content: space-evenly; - width: 23.24%; -} - -.activites-cards img { - width: 100%; - height: 370px; - border-radius: 20px 20px 0px 0px; -} - -.activites-cards .card-title { - margin: 0; - padding-left: 14px; - padding-top: 20px; -} - -/****** Footer ***********/ -footer { - background-color: var(--main-bg-color); - margin-top: 30px; -} - -.footer { - height: 163px; - display: flex; - margin: 0; -} - -.a-propos, -.nos-hebergements, -.assistance { - width: 33.3%; - margin: 0; -} - -footer .a-propos, -footer .nos-hebergements, -footer .assistance { - padding: 20px; -} - -.footer ul { - list-style: none; - padding: 0px; - margin: 0; -} - -.footer ul li { - padding-bottom: 15px; -} - -.a-propos h3, -.nos-hebergements h3, -.assistance h3 { - margin: 0; - padding-bottom: 15px; - padding-top: 0px; -} - -/* Le code ci-dessous correspond à la version responsive uniquement */ - -/****** Media queries ***********/ -/* Medium devices (tablets, less/equal than 1024px) */ -@media (max-width: 1024px) { - .info-group { - height: 322px; - } - - .filter-button { - display: block; - height: 91px; - margin-bottom: 35px; - } - - .filter-button a { - padding-bottom: 10px; - padding-top: 10px; - margin-right: 5px; - } - - .filter-title { - margin-bottom: 20px; - } - - .hebergements-and-populaires { - flex-direction: column; - } - - .hebergements { - width: 100%; - flex-wrap: wrap; - } - - .populaires { - width: 100%; - margin-top: 50px; - } - - .populaires-cards { - display: flex; - flex-direction: row; - justify-content: space-between; - } - - .populaires-cards a { - width: 30.8%; - } - - .populaires-cards .card-title, - .hebergements-cards .card-title { - font-size: 14px; - } - - .populaires-cards .card-subtitle, - .hebergements-cards .card-subtitle { - font-size: 13px; - } - - .activites { - justify-content: space-between; - width: 100%; - } - - .activites-cards .card { - height: 270px; - } - - .activites-cards img { - height: 200px; - } - - .activites-cards a { - width: 23.24%; - } - - .activites-cards .card-title { - padding: 20px 0px 20px 15px; - margin: 0; - } -} - -/* Small devices (phones, less than 768px) */ -@media (max-width: 767.98px) and (min-width: 320px) { - .main-container { - padding: 0px; - max-width: 767.98px; - } - - header { - flex-direction: column; - height: 115px; - width: 100%; - } - - header img { - align-self: center; - width: 61.09px; - padding: 30px 50px 30px 30px; - } - - nav ul { - display: flex; - width: 100%; - margin: 0; - gap: 0px; - padding: 0px; - } - - nav ul li { - width: 50%; - text-align: center; - } - - header nav ul li a:hover { - padding-bottom: 15px; - color: #0065fc; - border-bottom: 2px solid #0065fc; - border-top: 2px solid #ffffff; - text-decoration-color: #0065fc; - } - - .info-group { - width: 100%; - height: 432px; - margin-bottom: 35px; - padding: 0px 20px; - } - - .info-group h2 { - width: 335px; - height: 52px; - padding-bottom: 8px; - } - - .search { - display: none; - } - - i .fa-solid .fa-magnifying-glass { - text-align: center; - width: 48px; - height: 48px; - } - - .fa-magnifying-glass { - display: inline; - color: #ffffff; - border-radius: 15px; - text-align: center; - background-color: #0065fc; - height: 17px; - width: 17px; - padding: 14px 15px; - } - - .filter-button { - display: inline-block; - height: 161px; - width: 100%; - margin-bottom: 35px; - } - - .filter-button a { - padding-bottom: 10px; - padding-top: 10px; - margin-right: 5px; - margin-top: 20px; - } - - .filter-title { - margin-bottom: 20px; - } - - .fa-money-bill-wave::before, - .fa-person::before, - .fa-heart::before, - .fa-fire::before { - color: var(--main-color); - padding-right: 10px; - padding-left: 19px; - } - - .fa-money-bill-wave, - .fa-person, - .fa-heart, - .fa-fire { - font-size: 14px; - } - - .fa-money-bill-wave, - .fa-person, - .fa-heart, - .fa-fire { - margin: 0; - padding-right: 0px; - margin-bottom: 20px; - margin-right: 10px; - } - - .fa-solid .fa-info { - padding: 0px 2.5px; - height: 24px; - } - - i .fa-info { - display: inline; - border-radius: 50%; - border: 1px #d9d9d9 solid; - padding: 7px 10px; - margin-right: 10px; - } - - .hebergements-and-populaires, - .populaires { - flex-direction: column-reverse; - } - - .hebergements-and-populaires { - background-color: white; - } - - .hebergements-and-populaires .hebergements { - background-color: white; - } - - .hebergements { - width: 100%; - } - - .hebergements-cards a { - width: 100%; - padding-bottom: 15px; - } - - .populaires { - width: 100%; - margin-bottom: 15px; - } - - .populaires-cards { - width: 100%; - margin-top: 15px; - } - - .activites { - width: 100%; - } - - .activites-cards { - flex-direction: column; - } - - .activites-cards a { - width: 100%; - padding-bottom: 15px; - } - - .footer { - flex-direction: column; - height: 461px; - } - - .a-propos, - .nos-hebergements, - .assistance { - width: 100%; - margin: 0; - } -} diff --git a/index.html b/index.html index 268790e1..81f67a96 100644 --- a/index.html +++ b/index.html @@ -1,274 +1,383 @@ + + + + Booki + + + + + + - - - -Booki - - - - - - - - +
-
- - -
-
-
-
-
-

Trouvez votre hebergement pour des vacances de rêve

-

En plein centre-ville ou en pleine nature

- -
-

Filtres

- -
-
- Plus de 500 logements sont disponibles dans cette ville -
-
-
+
+ + +
+
+
+
+
+

+ Trouvez votre hebergement pour des vacances de rêve +

+

En plein centre-ville ou en pleine nature

+ +
+

Filtres

+ +
+
    +
  • +
  • + Plus de 500 logements sont disponibles dans cette ville +
  • +
+
+
+
+
+
+

Hébergements à Marseille

+ + - - -
- +
+ + +
+ + + + + - + From e4eda91460226bcc4dce2329d8b989b5c082a7a1 Mon Sep 17 00:00:00 2001 From: Angerome22 Date: Mon, 20 May 2024 08:40:04 +0200 Subject: [PATCH 25/26] final fichier index --- index.html | 656 ++++++++++++++++++++++------------------------------- 1 file changed, 277 insertions(+), 379 deletions(-) diff --git a/index.html b/index.html index 81f67a96..c8d2b2a3 100644 --- a/index.html +++ b/index.html @@ -1,383 +1,281 @@ - - - - Booki - - - - - - - -
-
- - -
-
-
-
-
-

- Trouvez votre hebergement pour des vacances de rêve -

-

En plein centre-ville ou en pleine nature

- -
-

Filtres

- -
-
    -
  • -
  • - Plus de 500 logements sont disponibles dans cette ville -
  • -
-
-
-
- - -
- -
- + + + + Booki + + + + + + + + +
+
+ + +
+
+
+
+
+

Trouvez votre hebergement pour des vacances de rêve

+

En plein centre-ville ou en pleine nature

+ + + + + +
    +
  • +
  • Plus de 500 logements sont disponibles dans cette ville
  • +
+
+
+
+ + +
+ +
+ From f55198b930c9f896a5666e585bc2f5759c3d29b6 Mon Sep 17 00:00:00 2001 From: Angerome22 Date: Mon, 20 May 2024 09:21:17 +0200 Subject: [PATCH 26/26] final du css --- css/style.css | 103 ++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 83 insertions(+), 20 deletions(-) diff --git a/css/style.css b/css/style.css index 20c73717..196bdf24 100644 --- a/css/style.css +++ b/css/style.css @@ -195,20 +195,20 @@ i .fa-solid .fa-location-dot { padding-left: 19px; } -.filter-button a { +.filter-button { + display: flex; +} + +.filter-button .button { background-color: transparent; - height: 46px; color: #000000; font-size: 17px; font-weight: 700; - align-content: center; border-radius: 25px; border: 2px #d9d9d9 solid; margin-right: 15px; - padding-right: 17px; text-decoration: none; - padding-top: 15px; - padding-bottom: 15px; + padding: 15px 17px 15px 0px; } .filter-button a:hover { @@ -444,6 +444,22 @@ footer .assistance { /****** Media queries ***********/ /* Medium devices (tablets, less/equal than 1024px) */ @media (max-width: 1024px) { + header nav ul li a:focus { + width: 140px; + padding-top: 14px; + color: #0065fc; + border-bottom: 2px solid #0065fc; + text-decoration-color: #0065fc; + } + + header nav ul li a:active { + width: 140px; + padding-bottom: 14px; + color: #0065fc; + border-bottom: 2px solid #0065fc; + text-decoration-color: #0065fc; + } + .info-group { height: 322px; } @@ -454,9 +470,14 @@ footer .assistance { margin-bottom: 35px; } - .filter-button a { - padding-bottom: 10px; - padding-top: 10px; + .filter-button { + display: flex; + } + + .filter-button .button { + align-items: center; + padding-bottom: 0px; + padding-top: 0px; margin-right: 5px; } @@ -464,6 +485,14 @@ footer .assistance { margin-bottom: 20px; } + .filter-button a:active { + background-color: #deebff; + } + + .filter-button a:focus { + background-color: #deebff; + } + .hebergements-and-populaires { flex-direction: column; } @@ -554,10 +583,22 @@ footer .assistance { } header nav ul li a:hover { - padding-bottom: 15px; + display: none; + } + + header nav ul li a:active { + width: 140px; + padding-bottom: 14px; + color: #0065fc; + border-bottom: 2px solid #0065fc; + text-decoration-color: #0065fc; + } + + header nav ul li a:focus { + width: 140px; + padding-bottom: 14px; color: #0065fc; border-bottom: 2px solid #0065fc; - border-top: 2px solid #ffffff; text-decoration-color: #0065fc; } @@ -602,6 +643,7 @@ footer .assistance { .filter { height: 161px; margin-bottom: 35px; + width: 100%; } .filter-title { @@ -609,20 +651,32 @@ footer .assistance { } .filter-button { - display: grid; - grid-template-columns: 156.5px 156.5px; - grid-template-rows: 1fr 1fr; - gap: 10px; - margin-top: 20px; + width: 100%; + flex-wrap: wrap; + margin-top: 10px; margin-bottom: 20px; - margin-left: 10px; + margin-left: 0px; + padding-left: 0px; } - .filter-button a { + + .button { + margin: 10px 0px; font-size: 14px; font-weight: 700; align-content: center; - height: 46px; - margin: 0; + } + + .filter-button .button { + width: 150.5px; + padding: 10px 0px; + } + + .filter-button a:active { + background-color: #deebff; + } + + .filter-button a:focus { + background-color: #deebff; } .fa-money-bill-wave, @@ -638,17 +692,25 @@ footer .assistance { .fa-fire { padding-right: 0px; } + .fa-solid .fa-info { padding: 0px 2.5px; height: 24px; } + form ul { padding-top: 20px; + display: inline; } form ul li { display: inline; } + + .text-info { + align-content: center; + } + .icon .fa-info { border-radius: 50%; border: 1px #d9d9d9 solid; @@ -689,6 +751,7 @@ footer .assistance { flex-direction: column; margin-top: 15px; } + .populaires-cards a { width: 100%; }