From 639ffe64e84431beab35e77e87413d25454c64c9 Mon Sep 17 00:00:00 2001 From: Marine Cede Date: Fri, 22 Nov 2024 10:29:06 +0100 Subject: [PATCH 1/8] feat: Ajout du header et des card hebergements --- css/style.css | 92 +++++++++++++++++++++++++++++ index.html | 156 ++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 243 insertions(+), 5 deletions(-) diff --git a/css/style.css b/css/style.css index f6c96c4d..dc21a144 100644 --- a/css/style.css +++ b/css/style.css @@ -58,6 +58,41 @@ a { color: var(--main-bg-color) } +/****** Header *****/ +.en-tete { + display: flex; + flex-direction: row; + justify-content: space-between; + margin-bottom: 30px; + height: 60px; +} + +.logo { + display: flex; + align-items: center; +} + +.logo img { + height: 19px; + width: 55px; +} + +.navigation { + display: flex; + flex-direction: row; + gap: 60px; +} + +.navigation a { + padding-top: 15px; + border-top: transparent 3px solid; +} + +.navigation a:hover { + border-top: #0065FC 3px solid; + color: #0065FC; +} + /****** Hebergements And Populaires ***********/ .hebergements-and-populaires { display: flex; @@ -76,6 +111,63 @@ a { width: 65%; } +.hebergements-title { + display: flex; + align-items: center; +} + +.hebergements-title .section-title { + margin-bottom: 30px; +} + +.hebergements-cards { + display: flex; + flex-direction: row; + justify-content: space-between; + flex-wrap: wrap; + gap: 30px; +} + +.hebergements-cards .card-content { + display: flex; + flex-direction: column; + padding-left: 10px; +} + +.hebergements-cards .card-txt{ + display: flex; + flex-direction: column; +} + +.hebergements-cards img { + height: 124px; + width: 240px; + border-top-left-radius: 20px; + border-top-right-radius: 20px; +} + +.hebergements-cards .card-title { + margin-bottom: 5px; + margin-top: 7px; +} + +.hebergements-cards .card-subtitle{ + margin-top: 5px; + margin-bottom: 5px; +} + +.hebergements-cards .card-rating { + margin-bottom: 5px; +} + +.hebergements-more { + font-size: 17px; +} + +.hebergements-more h4 { + margin-bottom: 0; +} + /****** Populaires ***********/ .populaires { width: 32%; diff --git a/index.html b/index.html index 53512c75..e4cb7e7d 100644 --- a/index.html +++ b/index.html @@ -16,11 +16,154 @@
-
+
+
+ + +
+
+
-
+
+
+

Hébergements à Marseille

+
+
+ +
+ Image de deux lits une place avec une fenêtre +
+
+

Hôtel du port

+

Nuit à partir de 52€

+
+
+ + + + + + Note de 4 sur 5 +
+
+
+ + + +
+ Image de deux lits une place avec un bureau +
+
+

Hôtel chez Amina

+

Nuit à partir de 96€

+
+
+ + + + + + Note de 4 sur 5 +
+
+
+ + + +
+ Image d'une chambre avec un dressing +
+
+

Hôtel Les mouettes

+

Nuit à partir de 76€

+
+
+ + + + + + Note de 4 sur 5 +
+
+
+ + +
+ Image de la chambre d'hôtel avec les couleurs de la mer +
+
+

Hôtel de la mer

+

Nuit à partir de 46€

+
+
+ + + + + + Note de 4 sur 5 +
+
+
+ + + +
+ Image d'une chambre avec un lit superposé +
+
+

Auberge La Canebière

+

Nuit à partir de 25€

+
+
+ + + + + + Note de 4 sur 5 +
+
+
+ + + +
+ Image d'une chambre montrant plusieurs lits superposés en bois' +
+
+

Auberge Le Panier

+

Nuit à partir de 23€

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

Afficher plus

+
@@ -30,7 +173,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

@@ -49,7 +193,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

@@ -68,7 +213,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 e1284eb6d3dac7c14f5762132a9d39ab8224f3b8 Mon Sep 17 00:00:00 2001 From: Marine Cede Date: Mon, 25 Nov 2024 13:11:14 +0100 Subject: [PATCH 2/8] feat: ajout des filtres et barre recherche --- css/style.css | 146 ++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 42 +++++++++++++++ 2 files changed, 188 insertions(+) diff --git a/css/style.css b/css/style.css index dc21a144..11599df6 100644 --- a/css/style.css +++ b/css/style.css @@ -93,6 +93,152 @@ a { color: #0065FC; } + +/****** Filtre de recherche **********/ +.search{ + display: flex; + flex-direction: column; + gap: 35px; +} + +.search-title{ + display: flex; + flex-direction: column; + gap: 8px; +} + +.search-title h2 { + margin: 0; +} + +.search-title p { + margin: 0; +} + +.search-bar { + display: flex; + flex-direction: row; + align-items: center; + height: 49px; +} + +.search-icon { + display: flex; + justify-content: center; + align-items: center; + background-color: #F2F2F2; + width: 50px; + height: 100%; + border-top-left-radius: 15px; + border-bottom-left-radius: 15px; +} + +.color-icons{ + color: black; + width: 14px; + height: 18px; + padding-left: 2px; +} + +.search-form { + display: flex; + flex-direction: row; + height: 100%; +} + +.search-input { + width: 195px; + border: solid 2px #F2F2F2 ; + +} + +.search-input::placeholder { + font-weight: bold; + color: black; + font-size: large; + padding-left: 25px; +} + +.search-button { + width: 132px; + background-color: #0065FC; + color: white; + border: 1px; + border-top-right-radius: 15px; + border-bottom-right-radius: 15px; + font-size: 18px; + font-weight: bold; +} + +.search-button:hover { + background-color: #DEEBFF ; + color: #0065FC; + cursor: pointer; +} + +.filter { + display: flex; + flex-direction: row; + gap: 15px; + height: 50px; + align-items: center; +} + +.filter h4 { + margin: 0; +} + + +.filter-icon { + color: #0065FC; + width: 22px; +} + +.filter-button { + border: solid 2px #F2F2F2; + border-radius: 25px; + background-color: white; + height: 100%; + display: flex; + align-items: center; + gap: 10px; + font-weight: bold; + padding-top: 4px; + padding-right: 19px; + padding-bottom: 4px; + padding-left: 19px; + font-size: 17px; +} + +.filter-button:hover { + background-color: #DEEBFF; +} + +.information { + display: flex; + flex-direction: row; + align-items: center; + height: 24px; + gap: 10px; + margin-bottom: 35px; +} + +.info-icon { + color: #0065FC; + font-size: 10px; +} + +.icon-border { + border: solid 1px #F2F2F2; + height: 24px; + width: 24px; + border-radius: 20px; + display: flex; + align-items: center; + justify-content: center; +} + + /****** Hebergements And Populaires ***********/ .hebergements-and-populaires { display: flex; diff --git a/index.html b/index.html index e4cb7e7d..9eaf6b35 100644 --- a/index.html +++ b/index.html @@ -29,6 +29,48 @@
+
+
+

Trouvez votre hébergement 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 09bc51411399cac4141b81d21e727d0d8a47806b Mon Sep 17 00:00:00 2001 From: Marine Cede Date: Mon, 25 Nov 2024 15:02:18 +0100 Subject: [PATCH 3/8] =?UTF-8?q?feat:=20ajout=20des=20activit=C3=A9s?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 36 +++++++++++++++++++++++++++++++ index.html | 60 +++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 94 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index 11599df6..20db20b4 100644 --- a/css/style.css +++ b/css/style.css @@ -359,6 +359,42 @@ a { margin-bottom: 5px; } +/********** Activités ************/ +.activite { + display: flex; + flex-direction: column; + gap: 30px; + margin-top: 50px; +} + +.activite-title { + display: flex; + align-items: center; +} + +.activite-container { + display: flex; + flex-direction: row; + gap: 30px; +} + +.activite-card { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; +} + +.activite-card img { + width: 297px; + height: 380px; + border-top-left-radius: 20px; + border-top-right-radius: 20px; +} + +.activite-card .card-title { + padding-left: 15px; +} diff --git a/index.html b/index.html index 9eaf6b35..98337b35 100644 --- a/index.html +++ b/index.html @@ -23,7 +23,7 @@
@@ -38,7 +38,7 @@

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

-
+
@@ -276,6 +276,62 @@

Hôtel Bleu et Blanc

+
+

Activités à Marseille

+
+
+ +
+ Image d'un port remplie de bateaux +
+
+

Vieux port

+
+
+
+ +
+ +
+ +
+ Image d'une étendue de roche +
+
+

Fort de Pomègues

+
+
+
+ +
+ +
+ +
+ Image d'un paysage rocheux avec la mer' +
+
+

Parc national des Calanques

+
+
+
+ +
+ +
+ +
+ Image d'une ville +
+
+

Notre-Dame-de-la-Garde

+
+
+
+ +
+
+
From 266d43350fbe456188daf76d19ef6fddeeffeb4e Mon Sep 17 00:00:00 2001 From: Marine Cede Date: Mon, 25 Nov 2024 15:19:57 +0100 Subject: [PATCH 4/8] fix: padding card activites --- css/style.css | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/css/style.css b/css/style.css index 20db20b4..72f97b5d 100644 --- a/css/style.css +++ b/css/style.css @@ -378,6 +378,11 @@ a { gap: 30px; } +.activite-card .card { + padding: 0; + padding-bottom: 5px; +} + .activite-card { display: flex; flex-direction: row; @@ -397,6 +402,15 @@ a { } +/********* Footer**********/ +.bas-page { + display: flex; + flex-direction: row; + background-color: #F2F2F2; + height: 163px; + margin-top: 50px; +} + /* Le code ci-dessous correspond à la version responsive uniquement */ From a59378d3f13e7eb3d0c8e3da7e52a11852894da2 Mon Sep 17 00:00:00 2001 From: Marine Cede Date: Mon, 25 Nov 2024 15:53:16 +0100 Subject: [PATCH 5/8] feat: ajout du footer --- css/style.css | 16 +++++++++++++++- index.html | 21 ++++++++++++++++++++- 2 files changed, 35 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index 72f97b5d..5c18fe73 100644 --- a/css/style.css +++ b/css/style.css @@ -375,7 +375,8 @@ a { .activite-container { display: flex; flex-direction: row; - gap: 30px; + justify-content: space-evenly; + flex-wrap: wrap; } .activite-card .card { @@ -411,6 +412,19 @@ a { margin-top: 50px; } +.centre-bas-page { + display: flex; + flex-direction: column; + gap: 15px; + padding: 20px; + justify-content: flex-start; + width: 33%; +} + +.centre-bas-page h4 { + margin: 0; +} + /* Le code ci-dessous correspond à la version responsive uniquement */ diff --git a/index.html b/index.html index 98337b35..37b1af65 100644 --- a/index.html +++ b/index.html @@ -333,7 +333,26 @@

Notre-Dame-de-la-Garde

-
+ From eb64ed252b59bbb030fa98ebd2464982cf316632 Mon Sep 17 00:00:00 2001 From: Marine Cede Date: Tue, 26 Nov 2024 13:09:59 +0100 Subject: [PATCH 6/8] feat : ajout de la media tablette --- css/style.css | 65 ++++++++++++++++++++++---- index.html | 126 ++++++++++++++++++++++++-------------------------- 2 files changed, 117 insertions(+), 74 deletions(-) diff --git a/css/style.css b/css/style.css index 5c18fe73..e13fd0be 100644 --- a/css/style.css +++ b/css/style.css @@ -95,13 +95,13 @@ a { /****** Filtre de recherche **********/ -.search{ +.search { display: flex; flex-direction: column; gap: 35px; } -.search-title{ +.search-title { display: flex; flex-direction: column; gap: 8px; @@ -133,7 +133,7 @@ a { border-bottom-left-radius: 15px; } -.color-icons{ +.color-icons { color: black; width: 14px; height: 18px; @@ -148,8 +148,8 @@ a { .search-input { width: 195px; - border: solid 2px #F2F2F2 ; - + border: solid 2px #F2F2F2; + } .search-input::placeholder { @@ -171,12 +171,13 @@ a { } .search-button:hover { - background-color: #DEEBFF ; + background-color: #DEEBFF; color: #0065FC; cursor: pointer; } -.filter { +.filter, +.filter-items { display: flex; flex-direction: row; gap: 15px; @@ -188,6 +189,14 @@ a { margin: 0; } +/* .filter-items { + display: flex; + flex-direction: row; + gap: 15px; + height: 50px; + align-items: center; +} */ + .filter-icon { color: #0065FC; @@ -280,7 +289,7 @@ a { padding-left: 10px; } -.hebergements-cards .card-txt{ +.hebergements-cards .card-txt { display: flex; flex-direction: column; } @@ -297,7 +306,7 @@ a { margin-top: 7px; } -.hebergements-cards .card-subtitle{ +.hebergements-cards .card-subtitle { margin-top: 5px; margin-bottom: 5px; } @@ -431,6 +440,15 @@ a { /****** Media queries ***********/ /* Medium devices (tablets, less/equal than 1024px) */ @media (max-width: 1024px) { + .filter { + display: flex; + flex-direction: column; + align-items: flex-start; + height: 100%; + } + + /*******Cartes*********/ + .hebergements-and-populaires { flex-direction: column; } @@ -439,6 +457,11 @@ a { width: 100%; } + .hebergements-cards { + display: flex; + justify-content: space-evenly; + } + .populaires { width: 100%; margin-top: 50px; @@ -461,6 +484,30 @@ a { .populaires-cards .card-subtitle { font-size: 13px; } + + /*******Activités********/ + .activite-container { + gap: 20px; + } + + .activite-card { + width: 193px; + } + + .activite-card img { + width: 193px; + height: 200px; + } + + + .activite-card .card-content { + margin: 0; + display: flex; + align-items: center; + justify-content: flex-start; + height: 70px; + } + } /* Small devices (phones, less than 768px) */ diff --git a/index.html b/index.html index 37b1af65..7c14e9f0 100644 --- a/index.html +++ b/index.html @@ -38,31 +38,33 @@

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

-
+

Filtres

- - - - - - +
+ + + + + + +
@@ -277,60 +279,54 @@

Hôtel Bleu et Blanc

-

Activités à Marseille

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