From 00d01127c6b099a6f7295cd511c2c7df1422377e Mon Sep 17 00:00:00 2001 From: imene ikhlef Date: Mon, 3 Jul 2023 23:02:03 +0200 Subject: [PATCH 01/32] add icon --- index.html | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/index.html b/index.html index 2f90d086..0bc2f3f3 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,12 @@ Booki + + + + + + From 24e67c0b802c1523d81734fcf49800f9e382f489 Mon Sep 17 00:00:00 2001 From: imene ikhlef Date: Mon, 3 Jul 2023 23:08:49 +0200 Subject: [PATCH 02/32] add fontawesome link --- index.html | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/index.html b/index.html index 0bc2f3f3..758792e4 100644 --- a/index.html +++ b/index.html @@ -18,6 +18,11 @@ integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> + + From c23ecd04e2d2297ccf320e7ca0297ec3e334219e Mon Sep 17 00:00:00 2001 From: imene ikhlef Date: Mon, 3 Jul 2023 23:21:08 +0200 Subject: [PATCH 03/32] add header --- css/style.css | 193 ++++++++++++++++++++++++++++++-------------------- index.html | 55 ++++++++++---- 2 files changed, 159 insertions(+), 89 deletions(-) diff --git a/css/style.css b/css/style.css index 4399d5fa..49b8d1d1 100644 --- a/css/style.css +++ b/css/style.css @@ -1,162 +1,203 @@ /****** 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; + /* display: flex; justify-content: center; + flex-direction: column; */ + max-width: 1400px; + margin: 0 auto; +} +/* sss */ +.icon img{ + width: 100px; +} +.header { + padding: 0 50px; + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 20px; +} +.buttonHeader { + list-style: none; + display: flex; + flex-direction: row; +} + +.buttonHeader li { + margin-right: 20px; + text-decoration: none; +} + +.hebarg:hover { + border-top: solid 3px var(--primaryColor); + padding-top: 45px; } +.titre h1 { + font-size: 22px; +} +.titre { + margin-bottom: 20px; + padding: 0 50px; +} + +.cherche { + display: flex; + flex-direction: column; +} + +/* sss */ + .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; } .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; } .neutralStar { - 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%; } /****** 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 .card { - width: 30%; - } + .populaires-cards .card { + 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 758792e4..52bd3222 100644 --- a/index.html +++ b/index.html @@ -5,10 +5,10 @@ Booki - - - - + + + + @@ -18,14 +18,40 @@ integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> - - + + + + +
+ + + + +
+

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

+

En plein centre-ville ou en pleine nature

+
+
+ + -
@@ -40,7 +66,8 @@

Les plus populaires

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

Hôtel Le soleil du matin

@@ -57,7 +84,8 @@

Hôtel Le soleil du matin

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

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

@@ -74,7 +102,8 @@

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

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

Hôtel Bleu et Blanc

From 0bf65322fd716072aa54c437eca401dc5f1519e5 Mon Sep 17 00:00:00 2001 From: imene ikhlef Date: Tue, 4 Jul 2023 14:47:21 +0200 Subject: [PATCH 04/32] add header --- css/style.css | 42 ++++++++++++++++++++++++++---------------- index.html | 50 ++++++++++++++++++++++++-------------------------- 2 files changed, 50 insertions(+), 42 deletions(-) diff --git a/css/style.css b/css/style.css index 49b8d1d1..2ff3bf36 100644 --- a/css/style.css +++ b/css/style.css @@ -1,6 +1,7 @@ /****** General ***********/ * { font-family: "Raleway", sans-serif; + font-size: 16px; } :root { @@ -14,45 +15,56 @@ } body { - /* display: flex; - justify-content: center; - flex-direction: column; */ max-width: 1400px; margin: 0 auto; } -/* sss */ -.icon img{ - width: 100px; +/*icon */ +.icon img { + width: 100px; } -.header { - padding: 0 50px; + +.navbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; + padding: 20px 50px; } .buttonHeader { list-style: none; display: flex; flex-direction: row; + justify-content: space-between; + width: 241px; +} +.buttonHeader a { + text-decoration: none; +} +.buttonHeader a:hover{ + border-top: solid 3px var(--main-color); + padding-top: 33px; +} + +.hebarg { + color: black; } .buttonHeader li { - margin-right: 20px; text-decoration: none; } -.hebarg:hover { - border-top: solid 3px var(--primaryColor); +/* .hebarg:hover { + border-top: solid 3px var(--main-color); padding-top: 45px; -} +} */ -.titre h1 { +.titre h1, +.titre p { font-size: 22px; + padding: 0 50px; } .titre { margin-bottom: 20px; - padding: 0 50px; } .cherche { @@ -60,8 +72,6 @@ body { flex-direction: column; } -/* sss */ - .main-container { width: 100%; max-width: 1440px; diff --git a/index.html b/index.html index 52bd3222..0d1f8301 100644 --- a/index.html +++ b/index.html @@ -21,42 +21,40 @@ - - -
- - - + -
-

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

-

En plein centre-ville ou en pleine nature

-
-
+
+

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

+

En plein centre-ville ou en pleine nature

+
+
-
+
-
+
From 9529dd87c642a5fdaa25404dcee67224d23a8907 Mon Sep 17 00:00:00 2001 From: imene ikhlef Date: Tue, 4 Jul 2023 16:28:37 +0200 Subject: [PATCH 05/32] add header responsive for mobile --- css/style.css | 57 +++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 53 insertions(+), 4 deletions(-) diff --git a/css/style.css b/css/style.css index 2ff3bf36..a653769c 100644 --- a/css/style.css +++ b/css/style.css @@ -40,9 +40,9 @@ body { .buttonHeader a { text-decoration: none; } -.buttonHeader a:hover{ - border-top: solid 3px var(--main-color); - padding-top: 33px; +.buttonHeader a:hover { + border-top: solid 3px var(--main-color); + padding-top: 33px; } .hebarg { @@ -208,6 +208,55 @@ body { } /* Small devices (phones, less than 768px) */ -@media (max-width: 767.98px) { +@media (max-width: 768px) { /* ... */ + + .navbar { + display: flex; + flex-direction: column; + padding:20px 0; + row-gap: 20px; + } + + /* le buttonHeader */ + .buttonHeader { + width: 100%; + display: flex; + flex-direction: row; + justify-content: flex-start; + + + } + .title-navbar:hover { + border-top: none; + border-bottom: solid 3px var(--main-color); + + + } + .hebarg:hover{ + color:var(--main-color); + } + .buttonHeader a:hover { + border-top: none; + } + + .title-navbar { + padding-bottom: 20px; + width: 50%; + border-bottom: solid 3px var(--main-bg-color); + text-align: center; + + } + + .titre { + margin-bottom: -10px; + } + .titre h1 { + font-size: 20px; + } + + .titre p { + font-size: 14px; + margin-top: -15px; + } } From 70c433319f8361f42315af378c26cfbe35cf30eb Mon Sep 17 00:00:00 2001 From: imene ikhlef Date: Tue, 4 Jul 2023 17:48:15 +0200 Subject: [PATCH 06/32] add html code --- css/style.css | 330 +++++++++++++++++++++++++++++++++++++++++--- index.html | 368 +++++++++++++++++++++++++++++++++++++++++--------- 2 files changed, 619 insertions(+), 79 deletions(-) diff --git a/css/style.css b/css/style.css index a653769c..d2e1bb72 100644 --- a/css/style.css +++ b/css/style.css @@ -8,6 +8,8 @@ --main-color: #0065fc; --main-bg-color: #f2f2f2; --filter-bg-color: #deebff; + --dgColor: #d9d9d9; + --blackColor: black; } .fa-solid { @@ -20,15 +22,19 @@ body { } /*icon */ .icon img { - width: 100px; + width: 70px; } - +/* navbar */ .navbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; - padding: 20px 50px; + + padding-top: 20px; + padding-right: 50px; + padding-bottom: 20px; + padding-left: 30px; } .buttonHeader { list-style: none; @@ -46,18 +52,13 @@ body { } .hebarg { - color: black; + color: var(--blackColor); } .buttonHeader li { text-decoration: none; } -/* .hebarg:hover { - border-top: solid 3px var(--main-color); - padding-top: 45px; -} */ - .titre h1, .titre p { font-size: 22px; @@ -70,6 +71,132 @@ body { .cherche { display: flex; flex-direction: column; + padding-left: 50px; +} + +/* /////////////////////block recherche//////////////////*/ +.from-recherche { + display: flex; + align-items: stretch; + margin-bottom: 32px; + justify-content: flex-start; + height: 54px; +} +.fa-location-dot { + background-color: var(--dgColor); + padding: 0 6px; + color: var(--blackColor); + border: 15px solid var(--dgColor); + border-top-left-radius: 20px; + border-bottom-left-radius: 20px; + display: flex; + align-items: center; +} +.input { + max-width: 244px; + font-weight: bold; + border: 1px solid var(--dgColor); + font-size: 18px; +} + +/* arevoire */ +/* .input placeholder{ +color: red; +} */ +.recherche { + width: 136px; + background-color: var(--main-color); + border: 1px solid var(--main-color); + border-top-right-radius: 20px; + border-bottom-right-radius: 20px; + font-weight: bold; + text-align: center; +} + +.recherche span { + color: #ffffff; + font-size: 18px; + text-align: center; + display: flex; + justify-content: center; +} +.titreFiltre h1 { + font-size: 20px; +} + +/* ///////////// la loupe le btn de recherche desactiver pour///////////// */ +.recherche i { + display: none; +} + +/* ///////////////////////// block filters ///////////////////////////////:*/ +.block { + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-top: 20px; + align-items: center; + justify-content: flex-start; +} + +.block-Filtres { + display: flex; + align-items: center; + margin: 7px; + border: 2px solid var(--dgColor); + border-radius: 56px 50px 50px 60px; + height: 18px; + padding: 10px 18px 10px 0; +} +/* ///////////////////////// block filters hover ///////////////////////////////:*/ + +.block-Filtres:hover { + background-color: var(--filter-bg-color); +} + +.block-Filtres p { + display: block; + margin-block-start: 1em; + margin-block-end: 1em; + margin-inline-start: 0px; + margin-inline-end: 0px; +} +.block-Filtres p a { + text-decoration: none; + font-weight: bolder; + color: var(--blackColor); +} +.color { + color: var(--main-color); +} +.block-Filtres i { + /* background-color: var(--filter-bg-color); */ + border-radius: 50px; + padding: 12px 14px 13px 14px; +} + +.filtreContenteVide { + display: none; +} + +/*Plus de 500 logements*/ + +.info { + display: flex; + margin-top: 20px; + flex-direction: row; + align-items: center; +} + +.fa-info { + border: 1px solid var(--main-bg-color); + border-radius: 30px; + text-align: center; + width: 22px; +} + +.info p { + padding-left: 24px; } .main-container { @@ -125,6 +252,110 @@ body { width: 65%; } +/* section Hebergements à Marseille */ +.maisons { + display: grid; + column-gap: 30px; + padding: 0px; + align-items: center; + row-gap: 29px; + justify-content: center; + grid-template-columns: repeat(3, 1fr); + grid-gap: 14px; +} + +.hebergements { + background-color: var(--main-bg-color); + border-radius: 20px; + width: 65%; + + padding: 0px; + box-shadow: 0px 0px 6px 0px #0000002e; + display: flex; + flex-direction: column; + row-gap: 4px; +} + +.hebergements h2 { + padding: 18px 31px; + font-size: 20px; +} + +/*///la coloun de maison Hebergements à Marseille */ +.maison { + background-color: white; + border-radius: 20px; + height: auto; + display: flex; + flex-direction: column; + padding: 0px; + box-shadow: 0px 0px 6px 0px #0000002e; + border-radius: 20px; + justify-content: center; + margin: 21px; +} + +.maison img { + background-size: cover; + height: auto; + border-radius: 20px 20px 0 0; + object-fit: cover; + max-width: 100%; + max-height: 100%; + border-radius: 20px; + padding: 1px; +} + +.marginHebergementsInfo { + margin: -5px 7px -21px 1px; +} + +.hebergementInfo { + display: flex; + flex-direction: column; + padding-left: 24px; + padding-left: 10px; +} + +.pharagraph { + font-size: 14px; +} + +.starsHebergement { + display: flex; + flex-direction: row; + margin-top: -24px; + margin-left: -5px; +} + +.hebergementsHref { + margin: 46px 0px 44px 38px; +} + +.hebergementsHref:hover { + cursor: pointer; +} + +/*positioner les stars*/ +.stars { + display: flex; + flex-direction: row; + position: relative; + bottom: 0px; +} + +.star { + font-size: 13px; + margin-right: -6px; +} + +.gris { + color: var(--main-bg-color); +} +.gris:hover { + color: var(--main-color); +} + /****** Populaires ***********/ .populaires { width: 32%; @@ -170,6 +401,76 @@ body { margin-bottom: 5px; } +/* /////////////Activites à Marseille /////////////*/ + +.ActivitesaMarseille { + height: auto; + margin-top: 53px; +} + +.lesActivites { + display: flex; + flex-direction: row; + column-gap: 17px; +} + +.activites { + background-color: white; + box-shadow: 8px 8px 11px -6px #0000002e; + display: flex; + flex-direction: column; + border-radius: 27px; +} + +.activites img { + width: 100%; + object-fit: cover; + margin-top: -20px; + border-radius: 35px 35px 0px 0px; +} + +.activites h6 { + margin: 10px 48px -7px 18px; + height: 37px; +} + +.ActivitesaMarseille h2 span { + font-size: 20px; +} +.ActivitesaMarseille h2 { + font-size: 20px; + padding-bottom: 18px; + padding-left: 24px; +} +.photoMobil { + display: none; +} +/*footer*/ + +footer { + margin-top: 73px; + + background-color: #f2f2f2; + display: flex; + flex-wrap: wrap; + + justify-content: space-around; + height: auto; + bottom: -13px; + position: relative; +} +footer ul { + display: flex; + flex-direction: column; + list-style-type: none; +} + +.footer-titre { + margin-bottom: 9px; + font-size: 20px; + padding-right: 50px; +} + /* Le code ci-dessous correspond à la version responsive uniquement */ /****** Media queries ***********/ @@ -214,7 +515,7 @@ body { .navbar { display: flex; flex-direction: column; - padding:20px 0; + padding: 20px 0; row-gap: 20px; } @@ -224,17 +525,13 @@ body { display: flex; flex-direction: row; justify-content: flex-start; - - } .title-navbar:hover { border-top: none; border-bottom: solid 3px var(--main-color); - - } - .hebarg:hover{ - color:var(--main-color); + .hebarg:hover { + color: var(--main-color); } .buttonHeader a:hover { border-top: none; @@ -245,7 +542,6 @@ body { width: 50%; border-bottom: solid 3px var(--main-bg-color); text-align: center; - } .titre { diff --git a/index.html b/index.html index 0d1f8301..2cc75f11 100644 --- a/index.html +++ b/index.html @@ -47,82 +47,326 @@

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

En plein centre-ville ou en pleine nature

+ +
+
+
+ + + + + +
+
+
+

Filtres

+
+
+
+ +

Économique

+
+
+ +

Familial

+
+
+ +

Romantique

+
+
+ +

Nos pépites

+
+
+ +
+ -
+

Plus de 500 logements sont disponibles dans cette ville

+
+
-
-
-
+
+
-
-
-
-

Les plus populaires

- -
-
- - -
+ + Afficher plus + + +
+
+
+

Les plus populaires

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

Hôtel Le soleil du matin

+

Nuit à partir de 128€

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

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

+

Nuit à partir de 71€

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

Hôtel Bleu et Blanc

+

Nuit à partir de 68€

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

Activites à Marseille

+ +
+ +
+ photo Vieux-Port + +
Vieux-Port
-
+ + + +
+ photo Fort de Pomègues + +
Fort de Pomègues
+
+ + + +
+ photo Îles du Frioul + +
Îles du Frioul
+
+ + + +
+ photo Parc national des Calanques + +
Parc national des Calanques
+
+ + + +
+ photo Notre-Dame-de-la-Garde + +
Notre-Dame-de-la-Garde
+
+ + + +
+ photo Parc Longchamp + +
Parc Longchamp
+
+
- -
- + + + + + + + + \ No newline at end of file From 09af7602e48c1d8be296945238bd69346fd10d4f Mon Sep 17 00:00:00 2001 From: imene ikhlef Date: Tue, 4 Jul 2023 18:03:17 +0200 Subject: [PATCH 07/32] add search and filters css for desktop --- css/style.css | 8 +++++--- index.html | 2 +- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/css/style.css b/css/style.css index d2e1bb72..7d10474d 100644 --- a/css/style.css +++ b/css/style.css @@ -183,7 +183,7 @@ color: red; .info { display: flex; - margin-top: 20px; + margin: 20px 0; flex-direction: row; align-items: center; } @@ -192,11 +192,13 @@ color: red; border: 1px solid var(--main-bg-color); border-radius: 30px; text-align: center; - width: 22px; + width: 16px; + font-size: 13px; + padding: 5px 4px; } .info p { - padding-left: 24px; + padding-left: 12px; } .main-container { diff --git a/index.html b/index.html index 2cc75f11..32f1dc99 100644 --- a/index.html +++ b/index.html @@ -82,7 +82,7 @@

Filtres

Romantique

- +

Nos pépites

From 47aaa60990b670edb8348987247d78614d834c70 Mon Sep 17 00:00:00 2001 From: imene ikhlef Date: Tue, 4 Jul 2023 18:06:19 +0200 Subject: [PATCH 08/32] update search css --- css/style.css | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/css/style.css b/css/style.css index 7d10474d..7699c1b7 100644 --- a/css/style.css +++ b/css/style.css @@ -100,9 +100,10 @@ body { } /* arevoire */ -/* .input placeholder{ -color: red; -} */ +.input::placeholder { +color: var(--blackColor); +text-align: center; +} .recherche { width: 136px; background-color: var(--main-color); From dbaad075a7492ab260cb195c19f1167e53a33229 Mon Sep 17 00:00:00 2001 From: imene ikhlef Date: Tue, 4 Jul 2023 18:29:18 +0200 Subject: [PATCH 09/32] =?UTF-8?q?add=20images=20for=20section=20"H=C3=A9be?= =?UTF-8?q?rgements=20=C3=A0=20Marseille"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 10 +++------- index.html | 19 ++++++++++--------- 2 files changed, 13 insertions(+), 16 deletions(-) diff --git a/css/style.css b/css/style.css index 7699c1b7..b4a729ab 100644 --- a/css/style.css +++ b/css/style.css @@ -71,7 +71,6 @@ body { .cherche { display: flex; flex-direction: column; - padding-left: 50px; } /* /////////////////////block recherche//////////////////*/ @@ -101,8 +100,8 @@ body { /* arevoire */ .input::placeholder { -color: var(--blackColor); -text-align: center; + color: var(--blackColor); + text-align: center; } .recherche { width: 136px; @@ -251,12 +250,10 @@ text-align: center; } /****** Hebergements ***********/ -.hebergements { - width: 65%; -} /* section Hebergements à Marseille */ .maisons { + background-color: red; display: grid; column-gap: 30px; padding: 0px; @@ -280,7 +277,6 @@ text-align: center; } .hebergements h2 { - padding: 18px 31px; font-size: 20px; } diff --git a/index.html b/index.html index 32f1dc99..6237a443 100644 --- a/index.html +++ b/index.html @@ -48,6 +48,7 @@

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

+
@@ -102,10 +103,10 @@

Filtres

Hébergements à Marseille

-
+
- photo Auberge La Canebière + photo Auberge La Canebière
Auberge La Canebière
@@ -124,7 +125,7 @@
Auberge La Canebière
- Photo Hôtel du port + Photo Hôtel du port
Hôtel du port
@@ -142,7 +143,7 @@
Hôtel du port
- photo Hôtel Les mouettes + photo Hôtel Les mouettes
Hôtel Les mouettes
@@ -160,7 +161,7 @@
Hôtel Les mouettes
- photo Hôtel de la mer + photo Hôtel de la mer
Hôtel de la mer
@@ -178,7 +179,7 @@
Hôtel de la mer
- pgoto Auberge Le Panier + pgoto Auberge Le Panier
Auberge Le Panier
@@ -196,7 +197,7 @@
Auberge Le Panier
- photo Hôtel Chez Amina + photo Hôtel Chez Amina
Hôtel Chez Amina
@@ -211,7 +212,7 @@
Hôtel Chez Amina
 -
+
Afficher plus @@ -336,7 +337,7 @@
Parc Longchamp
- +