From 0bd227b46ee26469a1c203e197365bddeec63922 Mon Sep 17 00:00:00 2001 From: Laura Date: Thu, 8 Feb 2024 10:24:21 +0100 Subject: [PATCH 01/23] =?UTF-8?q?Header=20int=C3=A9gr=C3=A9=20HTML=20et=20?= =?UTF-8?q?CSS?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 39 +++++++++++++++++++++++++++++++++++++++ index.html | 13 ++++++++++++- 2 files changed, 51 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index f6c96c4d..ddf388b2 100644 --- a/css/style.css +++ b/css/style.css @@ -58,6 +58,45 @@ a { color: var(--main-bg-color) } +/*Header*/ +header { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.logo-header { + display: flex; + width: 60px; + height: 20px; + padding: 30px 50px 30px 0px; +} + +nav { + display: flex; + flex-direction: row; + width: 320px; + align-items: space-between; +} + +.lien-menu { + font-size: 16px; + display: flex; + align-items: flex-end; + margin: auto; + height: 35px; + border-top: solid 2px white; +} + +.lien-menu:hover { + border-top: solid 2px #0065FC; + color:#0065FC; + box-shadow: + inset 0 0px 4px 4px rgb(255,255,255), + inset 0 2px 3px 0px rgba(50, 50, 50, 1); + +} + /****** Hebergements And Populaires ***********/ .hebergements-and-populaires { display: flex; diff --git a/index.html b/index.html index 53512c75..986bd207 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,18 @@
-
+
+
Logo Booki
+ +
+ + + + +
From 253f01089235972e4516934d0a4cfc8442370ef5 Mon Sep 17 00:00:00 2001 From: Laura Date: Thu, 8 Feb 2024 17:59:03 +0100 Subject: [PATCH 02/23] =?UTF-8?q?Balisage=20des=20trois=20blocs=20+=20d?= =?UTF-8?q?=C3=A9but=20CSS?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Création Bloc-recherche + Formulaire-ville Taille du h1 --- css/style.css | 15 +++++++++++++++ index.html | 12 +++++++++++- 2 files changed, 26 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index ddf388b2..7f3317f1 100644 --- a/css/style.css +++ b/css/style.css @@ -97,6 +97,21 @@ nav { } +/*Bloc formulaire*/ +.bloc-recherche { + display:flex; + flex-direction: column; + align-items: space-between; +} + +.bloc-recherche h1 { + font-size: 22px; +} + +.formulaire-ville { + +} + /****** Hebergements And Populaires ***********/ .hebergements-and-populaires { display: flex; diff --git a/index.html b/index.html index 986bd207..dd73b5fc 100644 --- a/index.html +++ b/index.html @@ -23,12 +23,22 @@
Activités
+ +
+
+
+

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

+

En plein centre-ville ou en pleine nature

+
+
+ +
+
-
From 84f65169eaed73dc8bca731f3032cb1d95fb9fac Mon Sep 17 00:00:00 2001 From: Laura Date: Fri, 9 Feb 2024 08:21:46 +0100 Subject: [PATCH 03/23] Update index.html --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index dd73b5fc..14b197ad 100644 --- a/index.html +++ b/index.html @@ -30,7 +30,7 @@

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

En plein centre-ville ou en pleine nature

-
+
From eca92745d3724db12d27cae22ad261ae4ba81c4b Mon Sep 17 00:00:00 2001 From: Laura Date: Fri, 9 Feb 2024 08:36:54 +0100 Subject: [PATCH 04/23] =?UTF-8?q?Corrections=20suite=20au=20mentorat=20Hea?= =?UTF-8?q?der=20termin=C3=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 10 ++++++---- index.html | 4 ++-- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/css/style.css b/css/style.css index ddf388b2..ec5f2557 100644 --- a/css/style.css +++ b/css/style.css @@ -16,6 +16,7 @@ body { display: flex; justify-content: center; + margin: 0; } .main-container { @@ -65,8 +66,7 @@ header { justify-content: space-between; } -.logo-header { - display: flex; +header img { width: 60px; height: 20px; padding: 30px 50px 30px 0px; @@ -77,15 +77,17 @@ nav { flex-direction: row; width: 320px; align-items: space-between; + justify-content: flex-end; + column-gap: 68px; } .lien-menu { font-size: 16px; display: flex; align-items: flex-end; - margin: auto; + margin: 0; height: 35px; - border-top: solid 2px white; + border-top: solid 2px transparent; } .lien-menu:hover { diff --git a/index.html b/index.html index 986bd207..b02f7116 100644 --- a/index.html +++ b/index.html @@ -17,8 +17,8 @@
-
Logo Booki
-
+
+
+

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

+

En plein centre-ville ou en pleine nature

+ +
+
+
+ + + +
+ + +
-
+
+
From e77144d9691ded9e3fc217579ce6c9b63d9a06e0 Mon Sep 17 00:00:00 2001 From: Laura Date: Fri, 9 Feb 2024 15:29:45 +0100 Subject: [PATCH 07/23] =?UTF-8?q?Bloc=20filtres=20ajout=C3=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 64 +++++++++++++++++++++++++++++++++++++++++++++++++-- index.html | 18 +++++++++++++++ 2 files changed, 80 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index c4749a81..ca57e678 100644 --- a/css/style.css +++ b/css/style.css @@ -60,6 +60,7 @@ a { } /*Header*/ + header { display: flex; flex-direction: row; @@ -101,12 +102,10 @@ nav { - /*Bloc recherche*/ .recherche { height: auto; - margin-bottom: 10px; } .bloc-recherche { @@ -167,6 +166,67 @@ form { } +/* Bloc filtres */ + +.filtres { + margin: 35px 0 35px 0; +} + +.filtres h3 { + font-size: 18px; +} + +.bloc-filtres { + display: flex; + flex-direction: row; + align-items: center; + height: 50px; + gap: 15px; +} + +.boutons { + display: flex; + flex-direction: row; + gap: 15px; + height: 50px; +} + +.boutons button { + border: 2px solid #D9D9D9; + border-radius: 25px; + padding : 4px 19px 4px 19px; + font-weight: bold; + font-size: 17px; + background-color: white; +} + +.boutons button:hover { + background-color: #DEEBFF; +} + +.fa-gap { + margin-right: 10px; +} + +.nb-logements { + display: flex; + flex-direction: row; + gap: 10px; + align-items: center; + margin-top: 35px; +} + +.cercle { + font-size: 10px; + border: 1px solid #D9D9D9; + width: 24px; + height: 24px; + display: flex; + align-items:center; + justify-content:center; + border-radius: 100%; + +} /****** Hebergements And Populaires ***********/ diff --git a/index.html b/index.html index 040b9e04..afdd3a2b 100644 --- a/index.html +++ b/index.html @@ -48,6 +48,24 @@

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

+
+
+

Filtres

+
+ + + + +
+
+
+ +

Plus de 500 logements sont disponibles dans cette ville

+
+
+ + +
From dd053f001e8011a752f1277d9ef71615e2f99e46 Mon Sep 17 00:00:00 2001 From: Laura Date: Tue, 13 Feb 2024 13:54:48 +0100 Subject: [PATCH 08/23] =?UTF-8?q?Cards=20H=C3=A9bergements=20ajout=C3=A9es?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 54 ++++++++++++++++++++- index.html | 130 ++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 183 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index ca57e678..213279ed 100644 --- a/css/style.css +++ b/css/style.css @@ -169,7 +169,7 @@ form { /* Bloc filtres */ .filtres { - margin: 35px 0 35px 0; + margin: 35px 0 30px 0; } .filtres h3 { @@ -247,6 +247,58 @@ form { width: 65%; } +.card-hebergements { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; + gap: 15px; +} + +.card-hebergements .card { + display: flex; + flex-direction: column; + margin-top: 33px; + width: 250px; + height: 207px; +} + +.card-hebergements img { + width: 100%; + height: 124px; + border-top-left-radius: 20px; + border-top-right-radius: 20px; +} + +.card-hebergements .card-content { + width: 100%; + padding-left: 10px; + display: flex; + flex-direction: column; + justify-content: space-between; + box-sizing: border-box; + gap: 8px; +} + +.card-hebergements .card-title { + margin-top: 10px; + margin-bottom: 8px; + font-size: 16px; +} + +.card-hebergements .card-subtitle { + margin: 0; + font-size: 13px; +} + +.card-hebergements .card-rating { + margin-bottom: 5px; +} + +.hebergements h3 { + font-size: 18px; +} + /****** Populaires ***********/ .populaires { width: 32%; diff --git a/index.html b/index.html index afdd3a2b..06187956 100644 --- a/index.html +++ b/index.html @@ -68,8 +68,138 @@

Filtres

+

Hébergements à Marseille

+
+ +
+ Image de la chambre d'hôtel montrant deux lits +
+
+

Hôtel du port

+

Nuit à partir de 52€

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

Hôtel Chez Amina

+

Nuit à partir de 96€

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

Hôtel Les Mouettes

+

Nuit à partir de 76€

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

Hôtel de la mer

+

Nuit à partir de 46€

+
+
+ + + + + + Note de 4 sur 5 +
+
+
+ + + +
+ Image de la chambre d'hôtel montrant deux lits superposés +
+
+

Auberge La Canebière

+

Nuit à partir de 25€

+
+
+ + + + + + Note de 4 sur 5 +
+
+
+ + + +
+ Image de la chambre d'hôtel montrant plusieurs lits superposés +
+
+

Auberge Le Panier

+

Nuit à partir de 23€

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

Afficher plus

+ + + + + + + +

Les plus populaires

From e74878c6edca4e32c4ee868f655a7f630bf04e84 Mon Sep 17 00:00:00 2001 From: Laura Date: Tue, 13 Feb 2024 15:07:19 +0100 Subject: [PATCH 09/23] =?UTF-8?q?Ajout=20du=20bloc=20activit=C3=A9s?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 32 ++++++++++++++++++++++++++++++++ index.html | 44 +++++++++++++++++++++++++++++++++++++------- 2 files changed, 69 insertions(+), 7 deletions(-) diff --git a/css/style.css b/css/style.css index 213279ed..41b2d227 100644 --- a/css/style.css +++ b/css/style.css @@ -344,7 +344,39 @@ form { margin-bottom: 5px; } +/*Activités*/ +.activites { + width: 100%; + margin-top: 35px; + display: flex; + flex-direction: column; + +} + +.activites-align { + width: 100%; + display: flex; + flex-direction: row; + gap: 20px; + flex-wrap: wrap; + justify-content: flex-start; +} +.card-activites { + display: flex; + flex-direction: column; + border: 1px transparent solid; + border-radius: 20px; + filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1)); +} + +.card-activites img { + height: 380px; + width: 298px; + border-top-left-radius: 20px; + border-top-right-radius: 20px; + object-fit: cover; +} /* Le code ci-dessous correspond à la version responsive uniquement */ diff --git a/index.html b/index.html index 06187956..07561ce8 100644 --- a/index.html +++ b/index.html @@ -67,6 +67,7 @@

Filtres

+

Hébergements à Marseille

@@ -193,13 +194,7 @@

Auberge Le Panier

Afficher plus

- - - - - - - +

Les plus populaires

@@ -266,6 +261,41 @@

Hôtel Bleu et Blanc

+ + +
+ +

Activités à Marseille

+
+ +
+ Le Vieux Port +

Vieux-Port

+
+ + + +
+ Le fort de Pomègues +

Fort de Pomègues

+
+ + + +
+ Le Parc national des Calanques +

Parc national des Calanques

+
+ + + +
+ La cathédrale Notre-Dame-de-la-Garde +

Notre-Dame-de-la-Garde

+
+ +
+
From b1074567ba45df1ed3903e55434ffefb225fd01d Mon Sep 17 00:00:00 2001 From: Laura Date: Tue, 13 Feb 2024 16:33:51 +0100 Subject: [PATCH 10/23] =?UTF-8?q?Footer=20ajout=C3=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 33 +++++++++++++++++++++++++++++++++ index.html | 24 ++++++++++++++++++++++-- 2 files changed, 55 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index 41b2d227..8bcbb889 100644 --- a/css/style.css +++ b/css/style.css @@ -348,6 +348,7 @@ form { .activites { width: 100%; margin-top: 35px; + margin-bottom: 35px;; display: flex; flex-direction: column; @@ -360,6 +361,7 @@ form { gap: 20px; flex-wrap: wrap; justify-content: flex-start; + } .card-activites { @@ -378,6 +380,37 @@ form { object-fit: cover; } +.card-activites .card-title { + padding-left: 10px; +} + +/*Footer*/ +footer { + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: space-between; + margin-top: 30px; + background-color: #F2F2F2; + padding: 20px 0 20px 15px; +} + +ul { + list-style: none; + width: 33%; + padding-left: 10px; +} + +.titre-liste { + font-weight: bold; + font-size: 18px; + margin-bottom: 15px;; +} + +li { + font-size: 16px; + margin-bottom: 15px; +} /* Le code ci-dessous correspond à la version responsive uniquement */ diff --git a/index.html b/index.html index 07561ce8..a1a1bf9a 100644 --- a/index.html +++ b/index.html @@ -262,7 +262,7 @@

Hôtel Bleu et Blanc

- +

Activités à Marseille

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

Notre-Dame-de-la-Garde

- + + From 0c0e4488461e2bb9ca664396cc6e9530a8ea8e28 Mon Sep 17 00:00:00 2001 From: Laura Date: Wed, 14 Feb 2024 11:13:52 +0100 Subject: [PATCH 11/23] =?UTF-8?q?Responsive=20tablette=20ajout=C3=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 31 +++++++++++++++++++++++++++++-- 1 file changed, 29 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index 8bcbb889..a2cfa682 100644 --- a/css/style.css +++ b/css/style.css @@ -213,7 +213,7 @@ form { flex-direction: row; gap: 10px; align-items: center; - margin-top: 35px; + margin-top: 30px; } .cercle { @@ -374,7 +374,7 @@ form { .card-activites img { height: 380px; - width: 298px; + width: 207px; border-top-left-radius: 20px; border-top-right-radius: 20px; object-fit: cover; @@ -417,6 +417,14 @@ li { /****** Media queries ***********/ /* Medium devices (tablets, less/equal than 1024px) */ @media (max-width: 1024px) { + .bloc-filtres { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0; + height: auto; + } + .hebergements-and-populaires { flex-direction: column; } @@ -447,8 +455,27 @@ li { .populaires-cards .card-subtitle { font-size: 13px; } + + .activites { + width: 100%; + } + + .activites-align { + display: flex; + flex-direction: row; + justify-content: space-around; + } + + .card-activites .card-title { + font-size : 14px; + } + + .card-activites img { + height: 200px; + } } + /* Small devices (phones, less than 768px) */ @media (max-width: 767.98px) { /* ... */ From e2beec868ef31c909c42592e0fd3e05c6fe225be Mon Sep 17 00:00:00 2001 From: Laura Date: Thu, 15 Feb 2024 11:31:06 +0100 Subject: [PATCH 12/23] =?UTF-8?q?Corrections=20r=C3=A9solution=20desktop?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Ajout padding au bloc Activités Meilleure résolution des cards Hébergements Ajout ancres Hébergements et Activités Bloquages : Largeur des cards Hébergements Photo portrait Activités pas assez large --- css/style.css | 27 ++++++++++++++------------- index.html | 8 ++++---- 2 files changed, 18 insertions(+), 17 deletions(-) diff --git a/css/style.css b/css/style.css index 8bcbb889..11d9fd86 100644 --- a/css/style.css +++ b/css/style.css @@ -251,31 +251,31 @@ form { display: flex; flex-direction: row; flex-wrap: wrap; + width: 100%; + gap: 10px; justify-content: space-around; - gap: 15px; } .card-hebergements .card { display: flex; flex-direction: column; margin-top: 33px; - width: 250px; height: 207px; + width: 100%; } .card-hebergements img { width: 100%; height: 124px; + min-width: 220px; border-top-left-radius: 20px; border-top-right-radius: 20px; } .card-hebergements .card-content { - width: 100%; padding-left: 10px; display: flex; flex-direction: column; - justify-content: space-between; box-sizing: border-box; gap: 8px; } @@ -346,22 +346,20 @@ form { /*Activités*/ .activites { - width: 100%; + max-width: 1440px; margin-top: 35px; - margin-bottom: 35px;; + margin-bottom: 35px; + padding: 0 30px 0 30px; display: flex; flex-direction: column; - } .activites-align { - width: 100%; display: flex; flex-direction: row; gap: 20px; - flex-wrap: wrap; - justify-content: flex-start; - + justify-content: space-between; + max-width: 100%; } .card-activites { @@ -370,16 +368,19 @@ form { border: 1px transparent solid; border-radius: 20px; filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1)); + } .card-activites img { - height: 380px; - width: 298px; + min-height:180px; + max-height: 380px; + width: 100%; border-top-left-radius: 20px; border-top-right-radius: 20px; object-fit: cover; } + .card-activites .card-title { padding-left: 10px; } diff --git a/index.html b/index.html index a1a1bf9a..4cbca897 100644 --- a/index.html +++ b/index.html @@ -19,8 +19,8 @@
Logo Booki
@@ -69,7 +69,7 @@

Filtres

-

Hébergements à Marseille

+

Hébergements à Marseille

@@ -265,7 +265,7 @@

Hôtel Bleu et Blanc

-

Activités à Marseille

+

Activités à Marseille

From 82ab284154326b96c758dfbdd7c5a8f51207fbce Mon Sep 17 00:00:00 2001 From: Laura Date: Thu, 15 Feb 2024 14:41:50 +0100 Subject: [PATCH 13/23] =?UTF-8?q?Correction=20Activit=C3=A9s?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 48 ++++++++++++++++++------------------------------ 1 file changed, 18 insertions(+), 30 deletions(-) diff --git a/index.html b/index.html index 4cbca897..745584fd 100644 --- a/index.html +++ b/index.html @@ -264,38 +264,26 @@

Hôtel Bleu et Blanc

-

Activités à Marseille

-
- -
- Le Vieux Port -

Vieux-Port

-
- - - -
- Le fort de Pomègues -

Fort de Pomègues

-
- - - -
- Le Parc national des Calanques -

Parc national des Calanques

-
- - - -
- La cathédrale Notre-Dame-de-la-Garde -

Notre-Dame-de-la-Garde

-
- +
+
+ Le Vieux-Port +

Vieux-Port

+
+
+ Le fort de Pomègues +

Fort de Pomègues

+
+
+ Le Parc national des Calanques +

Parc national des Calanques

+
+
+ La cathédrale Notre-Dame-de-laGarde +

Notre-Dame-de-la-Garde

+
-
+
From 301b1098bb7ae8a35e15b2eb710882a166e49cb6 Mon Sep 17 00:00:00 2001 From: Laura Date: Thu, 15 Feb 2024 14:43:34 +0100 Subject: [PATCH 14/23] =?UTF-8?q?Correction=20CSS=20Activit=C3=A9s?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 40 +++++++++++++++++++--------------------- 1 file changed, 19 insertions(+), 21 deletions(-) diff --git a/css/style.css b/css/style.css index 11d9fd86..5eadae23 100644 --- a/css/style.css +++ b/css/style.css @@ -347,42 +347,40 @@ form { /*Activités*/ .activites { max-width: 1440px; - margin-top: 35px; - margin-bottom: 35px; padding: 0 30px 0 30px; - display: flex; - flex-direction: column; + margin-top: 30px; } -.activites-align { +.bloc-activites { + max-width: 1440px; display: flex; flex-direction: row; - gap: 20px; - justify-content: space-between; - max-width: 100%; + gap: 15px; } -.card-activites { - display: flex; +.activites-card { flex-direction: column; - border: 1px transparent solid; + align-items: center; + max-width: 300px; + width: 25%; + height: 439px; border-radius: 20px; - filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1)); - + box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 15px; } -.card-activites img { - min-height:180px; - max-height: 380px; - width: 100%; +.activites-card img { + width:100%; + height: 380px; + object-fit: cover; border-top-left-radius: 20px; border-top-right-radius: 20px; - object-fit: cover; } - -.card-activites .card-title { - padding-left: 10px; +.activites-card h3 { + font-size: 16px; + padding: 0 0 0 20px; + border-bottom-left-radius: 20px; + border-bottom-right-radius: 20px; } /*Footer*/ From 876b82c4cfa4138f2e13982557ae24c28a0ed555 Mon Sep 17 00:00:00 2001 From: Laura Date: Fri, 16 Feb 2024 11:09:12 +0100 Subject: [PATCH 15/23] =?UTF-8?q?Largauer=20des=20cards=20s'adapte=20corre?= =?UTF-8?q?ctement=20au=20changement=20de=20taille=20de=20la=20fen=C3=AAtr?= =?UTF-8?q?e=20en=20desktop?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 54 ++++++++-------- index.html | 174 +++++++++++++++++++++++++------------------------- 2 files changed, 114 insertions(+), 114 deletions(-) diff --git a/css/style.css b/css/style.css index 5eadae23..a1d11c32 100644 --- a/css/style.css +++ b/css/style.css @@ -244,61 +244,60 @@ form { /****** Hebergements ***********/ .hebergements { + max-width: 1440px; width: 65%; + display: flex; + flex-direction: column; } -.card-hebergements { - display: flex; - flex-direction: row; - flex-wrap: wrap; +.hebergements a { + width: 30%; +} + +.hebergements-cards { + max-width: 936px; width: 100%; - gap: 10px; - justify-content: space-around; + display: flex; + flex-wrap: nowrap; + box-sizing: border-box; + justify-content: space-between; + gap: 5px; } -.card-hebergements .card { +.hebergements-cards .card { display: flex; flex-direction: column; margin-top: 33px; - height: 207px; + max-width: 600px; width: 100%; + box-sizing: border-box; } -.card-hebergements img { +.hebergements-cards img { width: 100%; height: 124px; - min-width: 220px; border-top-left-radius: 20px; border-top-right-radius: 20px; + object-fit: cover; } -.card-hebergements .card-content { +.hebergements-cards .card-content { + width: 100%; padding-left: 10px; display: flex; flex-direction: column; box-sizing: border-box; - gap: 8px; -} - -.card-hebergements .card-title { - margin-top: 10px; - margin-bottom: 8px; - font-size: 16px; + min-width: max-content; } -.card-hebergements .card-subtitle { - margin: 0; - font-size: 13px; +.hebergements-cards .card-title { + margin-top: 8px; } - -.card-hebergements .card-rating { +.hebergements-cards .card-subtitle { + font-size: 0.9em; margin-bottom: 5px; } -.hebergements h3 { - font-size: 18px; -} - /****** Populaires ***********/ .populaires { width: 32%; @@ -344,6 +343,7 @@ form { margin-bottom: 5px; } + /*Activités*/ .activites { max-width: 1440px; diff --git a/index.html b/index.html index 745584fd..4b1c5cc8 100644 --- a/index.html +++ b/index.html @@ -41,11 +41,7 @@

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

--> - -
- -
@@ -67,33 +63,34 @@

Filtres

- +
-

Hébergements à Marseille

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

Afficher plus

- +

Les plus populaires

@@ -279,7 +279,7 @@

Fort de Pomègues

Parc national des Calanques

- La cathédrale Notre-Dame-de-laGarde + La cathédrale Notre-Dame-de-la-Garde

Notre-Dame-de-la-Garde

From 4e383f89de69b10444ea5012aa7f00bc02510d91 Mon Sep 17 00:00:00 2001 From: Laura Date: Fri, 16 Feb 2024 11:30:20 +0100 Subject: [PATCH 16/23] =?UTF-8?q?Ajout=20HTML=20et=20CSS=20des=20cards=20c?= =?UTF-8?q?orrig=C3=A9es?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 94 ++++++++++----------- index.html | 224 ++++++++++++++++++++++++-------------------------- 2 files changed, 151 insertions(+), 167 deletions(-) diff --git a/css/style.css b/css/style.css index a2cfa682..2b71e60b 100644 --- a/css/style.css +++ b/css/style.css @@ -213,7 +213,7 @@ form { flex-direction: row; gap: 10px; align-items: center; - margin-top: 30px; + margin-top: 35px; } .cercle { @@ -244,61 +244,60 @@ form { /****** Hebergements ***********/ .hebergements { + max-width: 1440px; width: 65%; + display: flex; + flex-direction: column; } -.card-hebergements { +.hebergements a { + width: 30%; +} + +.hebergements-cards { + max-width: 936px; + width: 100%; display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-around; - gap: 15px; + flex-wrap: nowrap; + box-sizing: border-box; + justify-content: space-between; + gap: 5px; } -.card-hebergements .card { +.hebergements-cards .card { display: flex; flex-direction: column; margin-top: 33px; - width: 250px; - height: 207px; + max-width: 600px; + width: 100%; + box-sizing: border-box; } -.card-hebergements img { +.hebergements-cards img { width: 100%; height: 124px; border-top-left-radius: 20px; border-top-right-radius: 20px; + object-fit: cover; } -.card-hebergements .card-content { +.hebergements-cards .card-content { width: 100%; padding-left: 10px; display: flex; flex-direction: column; - justify-content: space-between; box-sizing: border-box; - gap: 8px; + min-width: max-content; } -.card-hebergements .card-title { - margin-top: 10px; - margin-bottom: 8px; - font-size: 16px; +.hebergements-cards .card-title { + margin-top: 8px; } - -.card-hebergements .card-subtitle { - margin: 0; - font-size: 13px; -} - -.card-hebergements .card-rating { +.hebergements-cards .card-subtitle { + font-size: 0.9em; margin-bottom: 5px; } -.hebergements h3 { - font-size: 18px; -} - /****** Populaires ***********/ .populaires { width: 32%; @@ -344,44 +343,41 @@ form { margin-bottom: 5px; } + /*Activités*/ .activites { - width: 100%; - margin-top: 35px; - margin-bottom: 35px;; - display: flex; - flex-direction: column; - + max-width: 100%; + padding: 30px; } -.activites-align { - width: 100%; +.bloc-activites { display: flex; flex-direction: row; - gap: 20px; - flex-wrap: wrap; - justify-content: flex-start; - + gap: 15px; } -.card-activites { - display: flex; +.activites-card { flex-direction: column; - border: 1px transparent solid; + align-items: center; + width: 25%; + height: 439px; border-radius: 20px; - filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1)); + box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 15px; } -.card-activites img { +.activites-card img { + width:100%; height: 380px; - width: 207px; + object-fit: cover; border-top-left-radius: 20px; border-top-right-radius: 20px; - object-fit: cover; } -.card-activites .card-title { - padding-left: 10px; +.activites-card h3 { + font-size: 16px; + padding: 0 0 0 20px; + border-bottom-left-radius: 20px; + border-bottom-right-radius: 20px; } /*Footer*/ diff --git a/index.html b/index.html index a1a1bf9a..4b1c5cc8 100644 --- a/index.html +++ b/index.html @@ -19,8 +19,8 @@
Logo Booki
@@ -41,11 +41,7 @@

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

--> - - - -
@@ -67,33 +63,34 @@

Filtres

- +

Hébergements à Marseille

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

Afficher plus

- +

Les plus populaires

@@ -264,38 +264,26 @@

Hôtel Bleu et Blanc

- -

Activités à Marseille

-
- -
- Le Vieux Port -

Vieux-Port

-
- - - -
- Le fort de Pomègues -

Fort de Pomègues

-
- - - -
- Le Parc national des Calanques -

Parc national des Calanques

-
- - - -
- La cathédrale Notre-Dame-de-la-Garde -

Notre-Dame-de-la-Garde

-
- +

Activités à Marseille

+
+
+ Le Vieux-Port +

Vieux-Port

+
+
+ Le fort de Pomègues +

Fort de Pomègues

+
+
+ Le Parc national des Calanques +

Parc national des Calanques

+
+
+ La cathédrale Notre-Dame-de-la-Garde +

Notre-Dame-de-la-Garde

+
-
+