From df466e79089f38edd07366f31566a1169e587179 Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Tue, 19 Sep 2023 20:52:29 +0200 Subject: [PATCH 01/94] modified Signed-off-by: LILIANLEILA09 --- css/style.css | 350 +++++++++++++++++++++++++++++++++++++++----------- index.html | 254 +++++++++++++++++++++++------------- 2 files changed, 442 insertions(+), 162 deletions(-) diff --git a/css/style.css b/css/style.css index f6c96c4d..b1623687 100644 --- a/css/style.css +++ b/css/style.css @@ -1,126 +1,324 @@ /****** 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: lightgray; + } body { - display: flex; - justify-content: center; + display: flex; + justify-content: center; } .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 lightgrey); + } .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%; } /****** 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; } +/***header nav ****/ + +header { + display: flex; + justify-content: space-between; + padding: 1px; +} + +header #logo { + padding: 25px; + +} + +header #logo img { + width: 50px; +} + +header nav ul { + display: flex; + list-style-type: none; + margin: 0; +} + +header nav ul li { + padding: 25px; + border-top: 2px solid transparent; + margin: 0px 20px 0px 20px; +} + +header nav ul li:hover { + border-color: #0065fc + +} + +header nav ul li a { + color: black; + text-decoration: none; +} + +header nav ul li:hover a { + color:#0065fc ; +} + +form { + display: inline-block; + width: 100%; +} + +form i { + background-color:rgb(214, 207, 207); + padding: 12px 12px; + border-radius: 12px 0 0 12px; + + +} + + +form input { + border: 1px solid var(--light-grey); + font-size: 16px; + font-weight: bold; + padding: 10px 0 10px 10px; + margin-left: -5px; + width: 145px; + + +} + +form input::placeholder { + color: black; +} + +form h1 { + font-size: 20px; + font-weight: 2px; +} + +form button { + border-radius: 0 10px 10px 0; + background-color:#0065fc; + border: 2px; + color: var(--white); + font-weight: bold; + font-size: 16px; + color:#deebff; + padding: 10px 10px 10px 10px; + cursor: pointer; + margin-left: -5px; + +} +form button:hover { + box-shadow: 1px 1px 10px var(--dark-grey); +} +/***make the magnifying glass disappear **/ +.fa-solid fa-magnifying-glass{ + display: none; +} +/***filtres**/ + +.filters { + display: inline-flex; + padding-top: 18px; + flex-flow: row wrap; + align-items: center; + gap: 20px; + } + + .filters h3 { + margin-right: 20px; +} + +.btn-filter p { + margin: 0; + padding-right: 20px; + cursor: pointer; + border-radius: 20px 20px 20px 20px; + background-color: aqua; +} + +.btn-filter { + font-weight: bold; + border: 1px solid var(--light-grey); + border-radius: 30px; + border-left: none; +} + +.btn-filter:hover{ + background-color: var(--light-grey); + box-shadow: 0 0 8px var(--blue); +} + +.btn-filter .fa-solid { + color:blue; + border-radius: 30px; + +} + + +.btn-filter .fa-child-reaching { + padding: 14px 17px 14px 17px; + margin-right: 10px; + color:blue; + background-position-x: left; + + +} + +.btn-filter .fa-heart, .fa-dog, .fa-money-bill-wave { + padding: 14px 14px 14px 14px; + margin-right: 10px; + color:blue; + position: relative; + +} + + +/* +* barre d'information +*/ +#icon-info { + display: flex; + align-items: center; + margin-bottom: 20px; + +} + +.fa-solid.fa-info { + border: 1px solid var(--light-grey); + border-radius: 50%; + color: var(--blue); + height: 25px; + width: 25px; + font-size: 16px; + display: flex; + align-items: center; + justify-content: center; + margin-right: 5px; + background-color: lightgray; + +} + + + + + + + + + + + + + + + + @@ -129,39 +327,39 @@ a { /****** 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 53512c75..13ce6f5d 100644 --- a/index.html +++ b/index.html @@ -1,96 +1,178 @@ - - - - + + + Booki - - - - - - + + + + + + - +
-
-
-
-
+ +
-
-
-
-

Les plus populaires

- + + + + +
+ +
+
+

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

+

En plein centre ville ou en pleine nature

+ + + + +
+ +
+
+ +
+

Filtres

+
+

Économique

+
+
+

Familiale

+
+
+

Romantique

+
+
+

Animaux autorisés

+
+
+
+ + +

de 500 logements sont disponibles dans cette ville

+
+ +
+
+
+
+

Les plus populaires

+ +
+
+ + + + +
+ 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 +
+
+
+
-
-
+ +
+ +
- - - \ No newline at end of file + + From 50d9b6155a784a8fdb2b98b199248d0e6249be69 Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Wed, 20 Sep 2023 14:14:48 +0200 Subject: [PATCH 02/94] =?UTF-8?q?Ajouts=20=20fonctionnalit=C3=A9s?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: LILIANLEILA09 --- index.html | 23 +++++++++++++++++------ 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 13ce6f5d..b9c5743c 100644 --- a/index.html +++ b/index.html @@ -37,22 +37,22 @@
-

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

En plein centre ville ou en pleine nature

- - - + +
-
+ @@ -76,9 +76,20 @@

Filtres

de 500 logements sont disponibles dans cette ville

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

Les plus populaires

From c1d551ef1af70c7b64fa2199db76b446cb2b70b0 Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Wed, 20 Sep 2023 14:15:05 +0200 Subject: [PATCH 03/94] =?UTF-8?q?Ajout=20des=20fonctionnalit=C3=A9s?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: LILIANLEILA09 --- css/style.css | 144 +++++++++++++++++++++++++++++++++----------------- 1 file changed, 95 insertions(+), 49 deletions(-) diff --git a/css/style.css b/css/style.css index b1623687..f4f9bb9b 100644 --- a/css/style.css +++ b/css/style.css @@ -1,22 +1,71 @@ -/****** General ***********/ -* { - font-family: "Raleway", sans-serif; + +@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800;900&display=swap'); +/* +^ general statement +*/ +body { + font-family: "Raleway", "sans-serif"; + box-sizing: border-box; } +/* +^ set color variables +*/ :root { - --main-color: #0065fc; - --main-bg-color: #f2f2f2; - --filter-bg-color: #deebff; + --blue : #0065FC; + --light-blue : #DEEBFF; + --grey : lightgrey; + --dark-grey : dimgrey; + --light-grey : #f2f2f2; + --white: white; + --green-fluo: #39FF14; } -.fa-solid { - color: lightgray; - +/* +* hidden
-
-
-
+ +
- - + + + \ No newline at end of file From fde9de1a405428a9649a272b44169cd6c3d68a12 Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Wed, 20 Sep 2023 20:31:04 +0200 Subject: [PATCH 05/94] =?UTF-8?q?Ajout=20des=20fonctionnalit=C3=A9s?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: LILIANLEILA09 --- css/style.css | 3 +++ index.html | 1 + 2 files changed, 4 insertions(+) diff --git a/css/style.css b/css/style.css index 05a1c1bc..3031178e 100644 --- a/css/style.css +++ b/css/style.css @@ -145,6 +145,7 @@ a { .populaires-cards .card-rating { margin-bottom: 5px; +color: #0065FC; } /***header nav ****/ @@ -354,6 +355,8 @@ form button:hover { margin-right: 5px; } +/****Hebergements à Marseille---/ + diff --git a/index.html b/index.html index b957553f..225e0b24 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,7 @@ integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> + Booki From cfbb76cf6388c6348e287728118809d5423fdf39 Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Wed, 20 Sep 2023 20:36:05 +0200 Subject: [PATCH 06/94] =?UTF-8?q?Ajout=20des=20fonctionnalit=C3=A9s?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: LILIANLEILA09 --- index.html | 294 +++++++++++++++++++++++++++++------------------------ 1 file changed, 161 insertions(+), 133 deletions(-) diff --git a/index.html b/index.html index 225e0b24..22634f6f 100644 --- a/index.html +++ b/index.html @@ -1,147 +1,175 @@ - - - - + + + Booki - - - - - + + + + + Booki - + - +
-
- - - -
-

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

+
+
+ + + +
+
+
-
-

Filtres

-
-

Économique

-
-
-

Familiale

-
-
-

Romantique

-
-
-

Animaux autorisés

-
-
-
- - -

de 500 logements sont disponibles dans cette ville

-
- -
-
-
+
+

Filtres

+
+

Économique

+
+
+

Familiale

+
+
+

Romantique

+
+
+

Animaux autorisés

+
+
+
+ -
-
-
-

Les plus populaires

- +

de 500 logements sont disponibles dans cette ville

+
+ +
+
+
+
+
+

Les plus populaires

+ +
+
+ +
+
+ + + +
+ 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 +
+
+
+
-
-
+ +
+ +
- - - \ No newline at end of file + + From 2eef13e41c6ea0b6baba87897e2603404a006f9b Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Thu, 21 Sep 2023 14:29:38 +0200 Subject: [PATCH 07/94] =?UTF-8?q?Ajouts=20fonctionnalit=C3=A9s?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: LILIANLEILA09 --- css/style.css | 288 +++++++++++++++++++++++++++++++++++++++++++++++++- index.html | 189 ++++++++++++++++++++++++++++++++- 2 files changed, 469 insertions(+), 8 deletions(-) diff --git a/css/style.css b/css/style.css index 3031178e..e0de5fca 100644 --- a/css/style.css +++ b/css/style.css @@ -65,17 +65,20 @@ a { border-radius: 20px; padding: 5px; filter: drop-shadow(0px 3px 15px lightgrey); - } + .card img { object-fit: cover; } .card-title { - font-size: 16px; + font-size: 15px; + padding-left: 10px; +} +h3{ + margin-left: 10px; } - .euro { font-weight: 700; } @@ -96,7 +99,10 @@ a { padding: 30px; box-sizing: border-box; } +.afficher-plus{ +margin-top: 80px; +} /****** Hebergements ***********/ .hebergements { width: 65%; @@ -139,6 +145,7 @@ a { margin-bottom: 4px; } + .populaires-cards .card-subtitle { margin: 0; } @@ -148,6 +155,17 @@ a { color: #0065FC; } +.card:hover { + transform: scale(1.02); + box-shadow: 0 0 8px var(--blue); + cursor: pointer; +} +.card .stars { + margin-top: auto; +} + + + /***header nav ****/ header { @@ -355,9 +373,271 @@ form button:hover { margin-right: 5px; } -/****Hebergements à Marseille---/ +/****Hebergements à Marseille**/ +h2{ + font-size: 20px; + font-weight: 2px + +} + +.wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + } + +.box1{ + margin-top: 30px; + margin-bottom: 30px; + background-color: white; + width: 201px; + border-radius: 20px 20px 20px 20px; +} + +.box1:hover { + transform: scale(1.02); + box-shadow: 0 0 8px var(--blue); + cursor: pointer; +} +.card .stars { + margin-top: auto; +} + + + +.box1 img{ + + width: 200px; + height: 100px; + border-radius: 20px 20px 0 0; + padding: 5px; + filter: drop-shadow(0px 3px 15px lightgrey); + +} +.box1 .card-content{ + border-radius: 0 0 20px 20px; + padding: 5px; + filter: drop-shadow(0px 3px 15px lightgrey); +} +.box2{ + margin-top: 30px; + background-color: white; + width: 201px; + border-radius: 20px 20px 20px 20px; +} + + +.box2 img{ + + width: 200px; + height: 100px; + border-radius: 20px 20px 0 0; + padding: 5px; + filter: drop-shadow(0px 3px 15px lightgrey); + +} +.box2 .card-content{ + border-radius: 0 0 20px 20px; + padding: 5px; + filter: drop-shadow(0px 3px 15px lightgrey); +} +.box3{ + margin-top: 30px; + background-color: white; + width: 201px; + border-radius: 20px 20px 20px 20px; +} +.box2:hover { + transform: scale(1.02); + box-shadow: 0 0 8px var(--blue); + cursor: pointer; +} +.card .stars { + margin-top: auto; +} + +.box3 img{ + + width: 200px; + height: 100px; + border-radius: 20px 20px 0 0; + padding: 5px; + filter: drop-shadow(0px 3px 15px lightgrey); + +} +.box3.card-content{ + border-radius: 0 0 20px 20px; + padding: 5px; + filter: drop-shadow(0px 3px 15px lightgrey); +} +.box3:hover { + transform: scale(1.02); + box-shadow: 0 0 8px var(--blue); + cursor: pointer; +} +.card .stars { + margin-top: auto; +} + +.box4{ + background-color: white; + width: 201px; + border-radius: 20px 20px 20px 20px; +} + + +.box4 img{ + + width: 200px; + height: 100px; + border-radius: 20px 20px 0 0; + padding: 5px; + filter: drop-shadow(0px 3px 15px lightgrey); +} +.box4.card-content{ + border-radius: 0 0 20px 20px; + padding: 5px; + filter: drop-shadow(0px 3px 15px lightgrey); +} +.box5{ + background-color: white; + width: 201px; + border-radius: 20px 20px 20px 20px; +} +.box4:hover { + transform: scale(1.02); + box-shadow: 0 0 8px var(--blue); + cursor: pointer; +} +.card .stars { + margin-top: auto; +} +.box5 img{ + + width: 200px; + height: 100px; + border-radius: 20px 20px 0 0; + padding: 5px; + filter: drop-shadow(0px 3px 15px lightgrey); + +} +.box5.card-content{ + border-radius: 0 0 20px 20px; + padding: 5px; + +} +.box5:hover { + transform: scale(1.02); + box-shadow:lightskyblue; + cursor: pointer; +} +.card .stars { + margin-top: auto; +} + + +.box6{ + background-color: white; + width: 201px; + border-radius: 20px 20px 20px 20px; +} + +.box6 img{ + + width: 200px; + height: 100px; + border-radius: 20px 20px 0 0; + padding: 5px; + filter: drop-shadow(0px 3px 15px lightgrey); + +} +.box6.card-content{ + border-radius: 0 0 20px 20px; + padding: 5px; + +} +.box6:hover { + transform: scale(1.02); + box-shadow: 0 0 8px var(--blue); + cursor: pointer; + +} +.card .stars { + margin-top: auto; +} + + + +.card-rating{ + color:#0065FC; + margin-left: 10px; + padding-bottom: 10px; +} +h3.card-title{ +margin:0px; +} +p.card-subtitle{ +margin-top: 5px; +margin-bottom: 5px; +margin-left: 10px; +} + +/****Activités à Marseille**/ + +div.gallery { + border: 1px solid #ccc; + border-radius: 12px 12px 12px 12px; + } + + div.gallery:hover { + border: 1px solid #39FF14; + } + + div.gallery img { + width: 265px; + height: 300px; + border-radius: 12px 12px 0 0; + + } + + div.desc { + padding: 15px; + text-align: center; + } + + * { + box-sizing: border-box; + } + + .responsive { + padding: 0 6px; + float: left; + width: 24.99999%; + } + + @media only screen and (max-width: 700px) { + .responsive { + width: 49.99999%; + margin: 6px 0; + } + } + + @media only screen and (max-width: 500px) { + .responsive { + width: 100%; + } + } + + .clearfix:after { + content: ""; + display: table; + clear: both; + } + + + + /* Le code ci-dessous correspond à la version responsive uniquement */ diff --git a/index.html b/index.html index 22634f6f..919196cb 100644 --- a/index.html +++ b/index.html @@ -50,7 +50,7 @@

Trouvez votre hebergement pour des vacances de rêve

Filtres

@@ -75,7 +75,158 @@

Filtres

-
+
+
+

Hébergements à Marseille

+
+
+ +
+ Image Auberge La Canebière +
+
+

Auberge La Canebière

+

+ Nuit à partir de 25€ +

+
+
+ + + + + + Note de 4 sur 5 +
+
+
+ + +
+ l'hotel du port +
+
+

Hotel du port

+

+ Nuit à partir de 52€ +

+
+
+ + + + + + Note de 4 sur 5 +
+
+
+ + +
+ Image Hôtel Les mouettes +
+
+

Hôtel Les mouettes

+

+ Nuit à partir de 76€ +

+
+
+ + + + + + Note de 4 sur 5 +
+
+
+ + +
+ Image Hôtel de la mer +
+
+

Hôtel de la mer

+

+ Nuit à partir de 46€ +

+
+
+ + + + + + Note de 4 sur 5 +
+
+
+ + +
+ Image Auberge Le Panier +
+
+

Hôtel Le Panier

+

+ Nuit à partir de 23€ +

+
+
+ + + + + + Note de 4 sur 5 +
+
+
+ + +
+ Image Hôtel Chez Amina +
+
+

Hôtel Chez Amina

+

+ Nuit à partir de 96€ +

+
+
+ + + + + + Note de 4 sur 5 +
+
+
+ +
+
Afficher plus
+

Les plus populaires

@@ -168,8 +319,38 @@

Hôtel Bleu et Blanc

-
+

Activités à Marseille

+
+
+ Image Vieux port + +
Vieux-Port
+
+
+
+
+ Image Fort de Pomègues + +
Fort de Pomègues
+
+
+
+
+ Image du Parc national des Calanques + +
Parc national des Calanques +
+
+
+
+
+ Image de Notre Dame dela Garde + +
Notre-Dame-de-la-Garde
+
+
+
- + \ No newline at end of file From ef0591647abcf70cab91355d90e3bbdb0ee3f0e3 Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Thu, 21 Sep 2023 16:40:16 +0200 Subject: [PATCH 08/94] Ajout des cliquables Signed-off-by: LILIANLEILA09 --- css/style.css | 61 ++++++++++++++++++++++++++++----------------------- index.html | 28 +++++++++++++++++++---- 2 files changed, 58 insertions(+), 31 deletions(-) diff --git a/css/style.css b/css/style.css index e0de5fca..5ff8c93d 100644 --- a/css/style.css +++ b/css/style.css @@ -269,7 +269,7 @@ form input { padding: 10px 0 10px 10px; margin-left: -5px; width: 146px; - background-color:var(--light-blue) + } form input::placeholder { color: black; @@ -393,31 +393,21 @@ h2{ border-radius: 20px 20px 20px 20px; } -.box1:hover { - transform: scale(1.02); - box-shadow: 0 0 8px var(--blue); - cursor: pointer; -} -.card .stars { - margin-top: auto; -} - - - .box1 img{ width: 200px; height: 100px; border-radius: 20px 20px 0 0; padding: 5px; - filter: drop-shadow(0px 3px 15px lightgrey); + filter: drop-shadow(0px 3px 15px rgb(240, 242, 243)); } -.box1 .card-content{ - border-radius: 0 0 20px 20px; - padding: 5px; - filter: drop-shadow(0px 3px 15px lightgrey); + +.card .stars { + margin-top: auto; } + + .box2{ margin-top: 30px; background-color: white; @@ -440,12 +430,6 @@ h2{ padding: 5px; filter: drop-shadow(0px 3px 15px lightgrey); } -.box3{ - margin-top: 30px; - background-color: white; - width: 201px; - border-radius: 20px 20px 20px 20px; -} .box2:hover { transform: scale(1.02); box-shadow: 0 0 8px var(--blue); @@ -455,6 +439,15 @@ h2{ margin-top: auto; } + +.box3{ + margin-top: 30px; + background-color: white; + width: 201px; + border-radius: 20px 20px 20px 20px; +} + + .box3 img{ width: 200px; @@ -593,7 +586,9 @@ div.gallery { div.gallery:hover { border: 1px solid #39FF14; } - + + + div.gallery img { width: 265px; height: 300px; @@ -628,18 +623,30 @@ div.gallery { width: 100%; } } - .clearfix:after { content: ""; display: table; clear: both; } - + h4{ +font-size: 20px; +padding-left: 10px; + } + .footer{ + width: 100%; + margin-top: 420px; + height: 200px; + background-color: #f2f2f2; + display: flex; + justify-content:flex-start; + align-items: baseline; + gap:150px; + } - + /* Le code ci-dessous correspond à la version responsive uniquement */ /****** Media queries ***********/ diff --git a/index.html b/index.html index 919196cb..3619040e 100644 --- a/index.html +++ b/index.html @@ -319,6 +319,7 @@

Hôtel Bleu et Blanc

+

Activités à Marseille

@@ -349,8 +350,27 @@

Activités à Marseille

Notre-Dame-de-la-Garde
- -
- - +
+ +
+
+

A propos

+

Fonctionnement du site

+

Conditions generales

+

Données et confidentialité

+
+
+

Nos hebergements

+

Charte qualité

+

Proposer votre hotel

+
+
+

Assistance

+

Centre d'aide

+

Nous contacter

+
+
+ + + \ No newline at end of file From 141295ddf3bbf8836ecc4a1b5ce1f1573e4329b4 Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Fri, 22 Sep 2023 19:47:27 +0200 Subject: [PATCH 09/94] =?UTF-8?q?Ajout=20fonctionnalit=C3=A9s=20cliquable?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: LILIANLEILA09 --- css/style.css | 117 ++++++++++++++++++++++++++++++++------------------ index.html | 7 +-- 2 files changed, 79 insertions(+), 45 deletions(-) diff --git a/css/style.css b/css/style.css index 5ff8c93d..ddc081ad 100644 --- a/css/style.css +++ b/css/style.css @@ -64,9 +64,9 @@ a { background-color: white; border-radius: 20px; padding: 5px; - filter: drop-shadow(0px 3px 15px lightgrey); -} + filter: drop-shadow(0px 3px 15px rgb(173, 193, 253)); +} .card img { object-fit: cover; @@ -77,8 +77,9 @@ a { padding-left: 10px; } h3{ - margin-left: 10px; + margin-left: 40px; } + .euro { font-weight: 700; } @@ -99,10 +100,7 @@ h3{ padding: 30px; box-sizing: border-box; } -.afficher-plus{ -margin-top: 80px; -} /****** Hebergements ***********/ .hebergements { width: 65%; @@ -152,13 +150,14 @@ margin-top: 80px; .populaires-cards .card-rating { margin-bottom: 5px; -color: #0065FC; + color: #0065FC; } .card:hover { transform: scale(1.02); box-shadow: 0 0 8px var(--blue); cursor: pointer; + background-color:var(--light-blue); } .card .stars { margin-top: auto; @@ -199,9 +198,7 @@ header nav ul li { } header nav ul li:hover { - border-color: #0065fc - - + border-color: #256dd7; } header nav ul li a { @@ -250,17 +247,17 @@ nav { form { display: inline-block; - width: 100%; - + width: 50%; + } form i { - background-color:rgb(214, 207, 207); + background-color:rgb(247, 243, 243); padding: 12px 12px; border-radius: 12px 0 0 12px; - width: 20px; -} + width: 50px; +} form input { border: 1px solid lightgrey; @@ -268,13 +265,14 @@ form input { font-weight: bold; padding: 10px 0 10px 10px; margin-left: -5px; - width: 146px; - + width: 146px; + height: 38px; } -form input::placeholder { +form input:placeholder { color: black; } + form h1 { font-size: 20px; font-weight: 2px; @@ -290,10 +288,6 @@ background-color: #0065FC; cursor: pointer; border: none; margin-left: -5px; - -} -form button:hover { - box-shadow: 1px 1px 10px var(--dark-grey); } /* * make the magnifying glass disappear @@ -317,6 +311,7 @@ form button:hover { margin-right: 20px; } + .btn-filter p { margin: 0; padding-right: 20px; @@ -328,11 +323,13 @@ form button:hover { border: 1px solid var(--light-grey); border-radius: 30px; border-left: none; + } .btn-filter:hover{ background-color: var(--light-grey); box-shadow: 0 0 8px var(--blue); + } .btn-filter .fa-solid { @@ -344,6 +341,7 @@ form button:hover { padding: 14px 17px 14px 17px; margin-right: 10px; color: var(--blue); + } .btn-filter .fa-heart, .fa-dog, .fa-money-bill-wave { @@ -391,6 +389,7 @@ h2{ background-color: white; width: 201px; border-radius: 20px 20px 20px 20px; + filter: drop-shadow(0px 3px 15px rgb(173, 193, 253)); } .box1 img{ @@ -399,10 +398,22 @@ h2{ height: 100px; border-radius: 20px 20px 0 0; padding: 5px; - filter: drop-shadow(0px 3px 15px rgb(240, 242, 243)); - } - +.box1 .card-content{ + border-radius: 0 0 20px 20px; + padding: 5px; + filter: drop-shadow(0px 3px 15px lightgrey); +} +.box1:hover{ + transform: scale(1.02); + box-shadow: 0 0 8px var(--blue); + cursor: pointer; + background-color:var(--light-blue); + } + .card .stars { + margin-top: auto; + } + .card .stars { margin-top: auto; } @@ -413,6 +424,7 @@ h2{ background-color: white; width: 201px; border-radius: 20px 20px 20px 20px; + filter: drop-shadow(0px 3px 15px rgb(173, 193, 253)); } @@ -434,6 +446,7 @@ h2{ transform: scale(1.02); box-shadow: 0 0 8px var(--blue); cursor: pointer; + background-color:var(--light-blue); } .card .stars { margin-top: auto; @@ -445,6 +458,7 @@ h2{ background-color: white; width: 201px; border-radius: 20px 20px 20px 20px; + filter: drop-shadow(0px 3px 15px rgb(173, 193, 253)); } @@ -466,6 +480,7 @@ h2{ transform: scale(1.02); box-shadow: 0 0 8px var(--blue); cursor: pointer; + background-color:var(--light-blue); } .card .stars { margin-top: auto; @@ -475,6 +490,7 @@ h2{ background-color: white; width: 201px; border-radius: 20px 20px 20px 20px; + filter: drop-shadow(0px 3px 15px rgb(173, 193, 253)); } @@ -492,15 +508,13 @@ h2{ padding: 5px; filter: drop-shadow(0px 3px 15px lightgrey); } -.box5{ - background-color: white; - width: 201px; - border-radius: 20px 20px 20px 20px; -} + + .box4:hover { transform: scale(1.02); box-shadow: 0 0 8px var(--blue); cursor: pointer; + background-color:var(--light-blue); } .card .stars { margin-top: auto; @@ -515,16 +529,27 @@ h2{ filter: drop-shadow(0px 3px 15px lightgrey); } + + .box5.card-content{ border-radius: 0 0 20px 20px; padding: 5px; - + filter: drop-shadow(0px 3px 15px rgb(173, 193, 253)); +} +.box5{ + background-color: white; + width: 201px; + border-radius: 20px 20px 20px 20px; + filter: drop-shadow(0px 3px 15px rgb(173, 193, 253)); } .box5:hover { transform: scale(1.02); - box-shadow:lightskyblue; + box-shadow: 0 0 8px var(--blue); cursor: pointer; -} + background-color:var(--light-blue); + +} + .card .stars { margin-top: auto; } @@ -534,6 +559,7 @@ h2{ background-color: white; width: 201px; border-radius: 20px 20px 20px 20px; + filter: drop-shadow(0px 3px 15px rgb(173, 193, 253)); } .box6 img{ @@ -547,21 +573,22 @@ h2{ } .box6.card-content{ border-radius: 0 0 20px 20px; + filter: drop-shadow(0px 3px 15px lightgrey); padding: 5px; - + filter: drop-shadow(0px 3px 15px rgb(173, 193, 253)); } .box6:hover { + transform: scale(1.02); - box-shadow: 0 0 8px var(--blue); + box-shadow: 2 0 8px var(--blue); cursor: pointer; - + background-color:var(--light-blue); } .card .stars { margin-top: auto; } - .card-rating{ color:#0065FC; margin-left: 10px; @@ -581,19 +608,22 @@ margin-left: 10px; div.gallery { border: 1px solid #ccc; border-radius: 12px 12px 12px 12px; + filter: drop-shadow(0px 3px 15px rgb(173, 193, 253)); } div.gallery:hover { border: 1px solid #39FF14; + transform: scale(1.02); + box-shadow: 5 0 8px var(--blue); + cursor: pointer; + background-color:var(--light-blue); } - - div.gallery img { - width: 265px; + width: 270px; height: 300px; border-radius: 12px 12px 0 0; - + filter: drop-shadow(0px 3px 15px rgb(173, 193, 253)); } div.desc { @@ -610,7 +640,10 @@ div.gallery { float: left; width: 24.99999%; } - + + + + @media only screen and (max-width: 700px) { .responsive { width: 49.99999%; diff --git a/index.html b/index.html index 3619040e..beecb501 100644 --- a/index.html +++ b/index.html @@ -223,9 +223,10 @@

Hôtel Chez Amina

- - -
Afficher plus
+ +

Afficher plus

+ +
From 30f3eb73be816567cac71c021310b2284e75a428 Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Fri, 22 Sep 2023 22:21:56 +0200 Subject: [PATCH 10/94] =?UTF-8?q?Ajouts=20fonctionnalit=C3=A9s?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: LILIANLEILA09 --- css/style.css | 56 ++++++++++++++++++++++++++++++--------------------- index.html | 9 ++++----- 2 files changed, 37 insertions(+), 28 deletions(-) diff --git a/css/style.css b/css/style.css index ddc081ad..144fb97a 100644 --- a/css/style.css +++ b/css/style.css @@ -1,4 +1,3 @@ - @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800;900&display=swap'); /****** General ***********/ * { @@ -64,7 +63,7 @@ a { background-color: white; border-radius: 20px; padding: 5px; - filter: drop-shadow(0px 3px 15px rgb(173, 193, 253)); + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); } @@ -389,7 +388,8 @@ h2{ background-color: white; width: 201px; border-radius: 20px 20px 20px 20px; - filter: drop-shadow(0px 3px 15px rgb(173, 193, 253)); + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); + } .box1 img{ @@ -402,7 +402,8 @@ h2{ .box1 .card-content{ border-radius: 0 0 20px 20px; padding: 5px; - filter: drop-shadow(0px 3px 15px lightgrey); + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); + } .box1:hover{ transform: scale(1.02); @@ -424,7 +425,8 @@ h2{ background-color: white; width: 201px; border-radius: 20px 20px 20px 20px; - filter: drop-shadow(0px 3px 15px rgb(173, 193, 253)); + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); + } @@ -434,13 +436,15 @@ h2{ height: 100px; border-radius: 20px 20px 0 0; padding: 5px; - filter: drop-shadow(0px 3px 15px lightgrey); + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); + } .box2 .card-content{ border-radius: 0 0 20px 20px; padding: 5px; - filter: drop-shadow(0px 3px 15px lightgrey); + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); + } .box2:hover { transform: scale(1.02); @@ -458,7 +462,8 @@ h2{ background-color: white; width: 201px; border-radius: 20px 20px 20px 20px; - filter: drop-shadow(0px 3px 15px rgb(173, 193, 253)); + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); + } @@ -468,13 +473,15 @@ h2{ height: 100px; border-radius: 20px 20px 0 0; padding: 5px; - filter: drop-shadow(0px 3px 15px lightgrey); + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); + } .box3.card-content{ border-radius: 0 0 20px 20px; padding: 5px; - filter: drop-shadow(0px 3px 15px lightgrey); + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); + } .box3:hover { transform: scale(1.02); @@ -490,7 +497,8 @@ h2{ background-color: white; width: 201px; border-radius: 20px 20px 20px 20px; - filter: drop-shadow(0px 3px 15px rgb(173, 193, 253)); + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); + } @@ -500,13 +508,13 @@ h2{ height: 100px; border-radius: 20px 20px 0 0; padding: 5px; - filter: drop-shadow(0px 3px 15px lightgrey); + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); } .box4.card-content{ border-radius: 0 0 20px 20px; padding: 5px; - filter: drop-shadow(0px 3px 15px lightgrey); + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); } @@ -526,21 +534,21 @@ h2{ height: 100px; border-radius: 20px 20px 0 0; padding: 5px; - filter: drop-shadow(0px 3px 15px lightgrey); - + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); } .box5.card-content{ border-radius: 0 0 20px 20px; padding: 5px; - filter: drop-shadow(0px 3px 15px rgb(173, 193, 253)); + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); + } .box5{ background-color: white; width: 201px; border-radius: 20px 20px 20px 20px; - filter: drop-shadow(0px 3px 15px rgb(173, 193, 253)); + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); } .box5:hover { transform: scale(1.02); @@ -559,7 +567,8 @@ h2{ background-color: white; width: 201px; border-radius: 20px 20px 20px 20px; - filter: drop-shadow(0px 3px 15px rgb(173, 193, 253)); + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); + } .box6 img{ @@ -568,14 +577,15 @@ h2{ height: 100px; border-radius: 20px 20px 0 0; padding: 5px; - filter: drop-shadow(0px 3px 15px lightgrey); + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); + } .box6.card-content{ border-radius: 0 0 20px 20px; - filter: drop-shadow(0px 3px 15px lightgrey); padding: 5px; - filter: drop-shadow(0px 3px 15px rgb(173, 193, 253)); + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); + } .box6:hover { @@ -608,7 +618,7 @@ margin-left: 10px; div.gallery { border: 1px solid #ccc; border-radius: 12px 12px 12px 12px; - filter: drop-shadow(0px 3px 15px rgb(173, 193, 253)); + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); } div.gallery:hover { @@ -623,7 +633,7 @@ div.gallery { width: 270px; height: 300px; border-radius: 12px 12px 0 0; - filter: drop-shadow(0px 3px 15px rgb(173, 193, 253)); + filter: drop-shadow( 0px 3px 15px rgb(226, 219, 219)); } div.desc { diff --git a/index.html b/index.html index beecb501..6b56c2ca 100644 --- a/index.html +++ b/index.html @@ -226,8 +226,7 @@

Hôtel Chez Amina

Afficher plus

- -
+

Les plus populaires

@@ -357,13 +356,13 @@

Activités à Marseille

A propos

Fonctionnement du site

-

Conditions generales

+

Conditions générales

Données et confidentialité

-

Nos hebergements

+

Nos hébergements

Charte qualité

-

Proposer votre hotel

+

Proposer votre hôtel

Assistance

From 1451b495eff1e19aee748cdd95fc0ee04890aa59 Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Sat, 23 Sep 2023 18:52:39 +0200 Subject: [PATCH 11/94] =?UTF-8?q?Ajout=20fonctionnalit=C3=A9s?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: LILIANLEILA09 --- css/style.css | 131 ++++++++++++++++++++------------------------------ index.html | 6 +-- 2 files changed, 56 insertions(+), 81 deletions(-) diff --git a/css/style.css b/css/style.css index 144fb97a..ead1b4b6 100644 --- a/css/style.css +++ b/css/style.css @@ -152,11 +152,11 @@ h3{ color: #0065FC; } -.card:hover { +.card:hover{ transform: scale(1.02); box-shadow: 0 0 8px var(--blue); cursor: pointer; - background-color:var(--light-blue); + background-color:var(--light-grey); } .card .stars { margin-top: auto; @@ -174,26 +174,25 @@ header { } header #logo { - padding: 25px; + padding: 0; } header #logo img { width: 50px; + padding-top: 20px; } - +/*****MENU NAV Hebergements ACTIVITES******/ header nav ul { display: flex; list-style-type: none; margin: 0; - } header nav ul li { padding: 25px; border-top: 2px solid transparent; margin: 0px 20px 0px 20px; - } header nav ul li:hover { @@ -203,39 +202,12 @@ header nav ul li:hover { header nav ul li a { color: black; text-decoration: none; - } header nav ul li:hover a { color:#0065FC; } -* ---------------------- -* NAVIGATION MENU ---------------------- -*/ -nav { - display: flex; - justify-content: flex-end; - align-items: center; -} - -#logo { - margin-right: auto; -} - -.menu { - text-decoration: none; - padding: 30px; - color: black; - border-top: 3px solid transparent; - -} -.menu:hover { - border-top-color: var(--blue); - color: var(--blue); -} /* ^---------------------- @@ -243,11 +215,9 @@ nav { ^---------------------- */ - form { display: inline-block; width: 50%; - } form i { @@ -255,18 +225,19 @@ form i { padding: 12px 12px; border-radius: 12px 0 0 12px; width: 50px; - } form input { - border: 1px solid lightgrey; + + border: 1px solid var(--light-grey); font-size: 16px; font-weight: bold; - padding: 10px 0 10px 10px; + padding: 8px 0 7px 10px; margin-left: -5px; width: 146px; height: 38px; } + form input:placeholder { color: black; } @@ -274,7 +245,7 @@ form input:placeholder { form h1 { font-size: 20px; - font-weight: 2px; + font-weight: 10px; } form button { @@ -288,6 +259,9 @@ background-color: #0065FC; border: none; margin-left: -5px; } +form button:hover { + box-shadow: 1px 1px 10px var(--dark-grey); +} /* * make the magnifying glass disappear */ @@ -305,9 +279,10 @@ background-color: #0065FC; align-items: center; gap: 20px; } - + .filters h3 { margin-right: 20px; + margin-inline-start: 5px; } @@ -315,6 +290,7 @@ background-color: #0065FC; margin: 0; padding-right: 20px; cursor: pointer; + } .btn-filter { @@ -322,31 +298,36 @@ background-color: #0065FC; border: 1px solid var(--light-grey); border-radius: 30px; border-left: none; - } .btn-filter:hover{ background-color: var(--light-grey); - box-shadow: 0 0 8px var(--blue); + box-shadow: 0 0 8px var(--blue); } .btn-filter .fa-solid { - background-color: var(--light-blue); + background-color: var(--main-bg-color); border-radius: 30px; + color: #0065FC; +} +.btn-filter:hover{ + box-shadow: 10px 10px 8px var(--grey); } + .btn-filter .fa-child-reaching { padding: 14px 17px 14px 17px; margin-right: 10px; color: var(--blue); - + color:#0065FC; } + .btn-filter .fa-heart, .fa-dog, .fa-money-bill-wave { padding: 14px 14px 14px 14px; margin-right: 10px; - color: var(--blue); + } /* * barre d'information @@ -368,6 +349,7 @@ background-color: #0065FC; align-items: center; justify-content: center; margin-right: 5px; + color:#0065FC; } /****Hebergements à Marseille**/ @@ -388,7 +370,7 @@ h2{ background-color: white; width: 201px; border-radius: 20px 20px 20px 20px; - filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); + filter: drop-shadow(3px 3px 15px rgb(226, 219, 219)); } @@ -409,17 +391,12 @@ h2{ transform: scale(1.02); box-shadow: 0 0 8px var(--blue); cursor: pointer; - background-color:var(--light-blue); + background-color:var(--light-grey); } .card .stars { margin-top: auto; } -.card .stars { - margin-top: auto; -} - - .box2{ margin-top: 30px; background-color: white; @@ -437,21 +414,22 @@ h2{ border-radius: 20px 20px 0 0; padding: 5px; filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); - - } + .box2 .card-content{ border-radius: 0 0 20px 20px; padding: 5px; filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); } -.box2:hover { +.box2:hover{ transform: scale(1.02); box-shadow: 0 0 8px var(--blue); cursor: pointer; - background-color:var(--light-blue); + background-color:var(--light-grey); } + + .card .stars { margin-top: auto; } @@ -483,11 +461,11 @@ h2{ filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); } -.box3:hover { +.box3:hover{ transform: scale(1.02); box-shadow: 0 0 8px var(--blue); cursor: pointer; - background-color:var(--light-blue); + background-color:var(--light-grey); } .card .stars { margin-top: auto; @@ -517,13 +495,13 @@ h2{ filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); } - -.box4:hover { +.box4:hover{ transform: scale(1.02); box-shadow: 0 0 8px var(--blue); cursor: pointer; - background-color:var(--light-blue); + background-color:var(--light-grey); } + .card .stars { margin-top: auto; } @@ -550,13 +528,12 @@ h2{ border-radius: 20px 20px 20px 20px; filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); } -.box5:hover { +.box5:hover{ transform: scale(1.02); box-shadow: 0 0 8px var(--blue); cursor: pointer; - background-color:var(--light-blue); - -} + background-color:var(--light-grey); +} .card .stars { margin-top: auto; @@ -587,12 +564,11 @@ h2{ filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); } -.box6:hover { - +.box6:hover{ transform: scale(1.02); - box-shadow: 2 0 8px var(--blue); + box-shadow: 0 0 8px var(--blue); cursor: pointer; - background-color:var(--light-blue); + background-color:var(--light-grey); } .card .stars { margin-top: auto; @@ -618,22 +594,21 @@ margin-left: 10px; div.gallery { border: 1px solid #ccc; border-radius: 12px 12px 12px 12px; - filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); + filter: drop-shadow(3px 3px 15px rgb(226, 219, 219)); } div.gallery:hover { - border: 1px solid #39FF14; - transform: scale(1.02); - box-shadow: 5 0 8px var(--blue); - cursor: pointer; - background-color:var(--light-blue); - } + border: 1px solid var(--green-fluo); + transform: scale(1.02); + cursor: pointer; + background-color:var(--light-grey); + } div.gallery img { - width: 270px; + width: 262px; height: 300px; border-radius: 12px 12px 0 0; - filter: drop-shadow( 0px 3px 15px rgb(226, 219, 219)); + filter: drop-shadow( 3px 3px 15px rgb(226, 219, 219)); } div.desc { diff --git a/index.html b/index.html index 6b56c2ca..6dec7665 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - + Booki @@ -42,7 +42,7 @@

Trouvez votre hebergement pour des vacances de rêve

- + Auberge La Canebière l'hotel du port
-

Hotel du port

+

Hôtel du port

Nuit à partir de 52€

From faa8b15978a7fcbb2e1cef9e227b8c669c9e7404 Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Sat, 23 Sep 2023 19:37:24 +0200 Subject: [PATCH 12/94] Modifications Signed-off-by: LILIANLEILA09 --- css/style.css | 12 ++++++++---- index.html | 2 +- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/css/style.css b/css/style.css index ead1b4b6..d1353811 100644 --- a/css/style.css +++ b/css/style.css @@ -86,7 +86,9 @@ h3{ .neutral-star { color: var(--main-bg-color); } - + .line{ + color:#0065FC; + } /****** Hebergements And Populaires ***********/ .hebergements-and-populaires { display: flex; @@ -238,11 +240,12 @@ form input { height: 38px; } -form input:placeholder { - color: black; -} + form input:hover { + background-color:var(--light-blue); + } + form h1 { font-size: 20px; font-weight: 10px; @@ -261,6 +264,7 @@ background-color: #0065FC; } form button:hover { box-shadow: 1px 1px 10px var(--dark-grey); + } /* * make the magnifying glass disappear diff --git a/index.html b/index.html index 6dec7665..3485164b 100644 --- a/index.html +++ b/index.html @@ -230,7 +230,7 @@

Afficher plus

Les plus populaires

- +
From c7a2f3682a6b88c7b65606f25658741c0cd5b260 Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Sun, 24 Sep 2023 15:04:14 +0200 Subject: [PATCH 13/94] Modifications Signed-off-by: LILIANLEILA09 --- css/style.css | 47 ++++++++++++++++++++++++++++++++++++----------- index.html | 11 ++++++++--- 2 files changed, 44 insertions(+), 14 deletions(-) diff --git a/css/style.css b/css/style.css index d1353811..46157857 100644 --- a/css/style.css +++ b/css/style.css @@ -241,16 +241,15 @@ form input { } +form input::placeholder { + color: black; +} + form input:hover { background-color:var(--light-blue); } -form h1 { - font-size: 20px; - font-weight: 10px; -} - form button { border-radius: 0 10px 10px 0; background-color: #0065FC; @@ -264,7 +263,8 @@ background-color: #0065FC; } form button:hover { box-shadow: 1px 1px 10px var(--dark-grey); - + background-color:var(--light-grey); + color:gray; } /* * make the magnifying glass disappear @@ -480,7 +480,6 @@ h2{ width: 201px; border-radius: 20px 20px 20px 20px; filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); - } @@ -664,10 +663,21 @@ padding-left: 10px; align-items: baseline; gap:150px; } - - - - + .footer-left{ + margin-left: 40px; + } +.afficher{ + margin-top: 80px; +} +.left{ +margin-left: 10px; +} +.right{ + margin-left: 10px; +} +.midle{ + margin-left: 10px; +} /* Le code ci-dessous correspond à la version responsive uniquement */ @@ -704,9 +714,24 @@ padding-left: 10px; .populaires-cards .card-subtitle { font-size: 13px; } + + + } /* Small devices (phones, less than 768px) */ @media (max-width: 767.98px) { + + section.hebergements{ + width: 100%; + margin-left:10px ; + } + main{ + padding:0px ; + } + .main-container{ + padding: 0px; + + } /* ... */ } \ No newline at end of file diff --git a/index.html b/index.html index 3485164b..71f22c8a 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,6 @@ - Booki Hôtel Chez Amina
-

Afficher plus

+
Afficher plus
@@ -355,19 +354,25 @@

Activités à Marseille

A propos

+

Fonctionnement du site

Conditions générales

Données et confidentialité

+
-

Nos hébergements

+

Nos hébergements

+

Charte qualité

Proposer votre hôtel

+

Assistance

+

Centre d'aide

Nous contacter

+
From afcc7fd95f66c1cfecce3ebe6f444b8852877e20 Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Sun, 24 Sep 2023 20:30:41 +0200 Subject: [PATCH 14/94] modification Signed-off-by: LILIANLEILA09 --- css/style.css | 58 +++++++++++++++++++++++++++++++++++++++------------ index.html | 12 +++++------ 2 files changed, 51 insertions(+), 19 deletions(-) diff --git a/css/style.css b/css/style.css index 46157857..3b0db8dc 100644 --- a/css/style.css +++ b/css/style.css @@ -363,9 +363,10 @@ h2{ } -.wrapper { +.container-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; + justify-content: center; } .box1{ @@ -380,7 +381,7 @@ h2{ .box1 img{ - width: 200px; + width: 100%; height: 100px; border-radius: 20px 20px 0 0; padding: 5px; @@ -413,7 +414,7 @@ h2{ .box2 img{ - width: 200px; + width: 100%; height: 100px; border-radius: 20px 20px 0 0; padding: 5px; @@ -451,7 +452,7 @@ h2{ .box3 img{ - width: 200px; + width: 100%; height: 100px; border-radius: 20px 20px 0 0; padding: 5px; @@ -485,7 +486,7 @@ h2{ .box4 img{ - width: 200px; + width: 100%; height: 100px; border-radius: 20px 20px 0 0; padding: 5px; @@ -511,7 +512,7 @@ h2{ .box5 img{ - width: 200px; + width: 100%; height: 100px; border-radius: 20px 20px 0 0; padding: 5px; @@ -553,7 +554,7 @@ h2{ .box6 img{ - width: 200px; + width: 100%; height: 100px; border-radius: 20px 20px 0 0; padding: 5px; @@ -608,17 +609,32 @@ div.gallery { } div.gallery img { - width: 262px; + display: flex; + justify-content: center; + max-width: 100%; + width: 100%; height: 300px; border-radius: 12px 12px 0 0; filter: drop-shadow( 3px 3px 15px rgb(226, 219, 219)); } - div.desc { + + div.desc-1 { + padding: 15px; + text-align: center; + } + div.desc-2 { + padding: 15px; + text-align: center; + } + div.desc-3 { + padding: 15px; + text-align: center; + } + div.desc-4{ padding: 15px; text-align: center; } - * { box-sizing: border-box; } @@ -687,6 +703,7 @@ margin-left: 10px; .hebergements-and-populaires { flex-direction: column; } + .hebergements { width: 100%; @@ -714,11 +731,23 @@ margin-left: 10px; .populaires-cards .card-subtitle { font-size: 13px; } + div.gallery { + max-width: 1000px; + border: 1px solid #ccc; + border-radius: 12px 12px 12px 12px; + filter: drop-shadow(3px 3px 15px rgb(226, 219, 219)); + } + div.desc-3 { + padding: 5px; + text-align: center; + } + div.desc-4{ + padding: 5px; + text-align: center; + } + - -} - /* Small devices (phones, less than 768px) */ @media (max-width: 767.98px) { @@ -733,5 +762,8 @@ margin-left: 10px; padding: 0px; } + + + /* ... */ } \ No newline at end of file diff --git a/index.html b/index.html index 71f22c8a..21c6b10d 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - + Filtres

Hébergements à Marseille

-
+
Image Fort de Pomègues -
Fort de Pomègues
+
Fort de Pomègues
Image du Parc national des Calanques -
Parc national des Calanques +
Parc national des Calanques
@@ -346,7 +346,7 @@

Activités à Marseille

Image de Notre Dame dela Garde -
Notre-Dame-de-la-Garde
+
Notre-Dame-de-la-Garde
From 567230fdeff09a405deaa1d07f394c909f7ab416 Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Sun, 24 Sep 2023 22:27:58 +0200 Subject: [PATCH 15/94] Modifications @media querry Signed-off-by: LILIANLEILA09 --- css/style.css | 27 ++++++++++++++++++++++----- 1 file changed, 22 insertions(+), 5 deletions(-) diff --git a/css/style.css b/css/style.css index 3b0db8dc..a2b5cce0 100644 --- a/css/style.css +++ b/css/style.css @@ -252,7 +252,7 @@ form input::placeholder { form button { border-radius: 0 10px 10px 0; -background-color: #0065FC; + background-color: #0065FC; color: var(--white); font-weight: bold; font-size: 16px; @@ -260,6 +260,7 @@ background-color: #0065FC; cursor: pointer; border: none; margin-left: -5px; + } form button:hover { box-shadow: 1px 1px 10px var(--dark-grey); @@ -699,11 +700,11 @@ margin-left: 10px; /****** Media queries ***********/ /* Medium devices (tablets, less/equal than 1024px) */ -@media (max-width: 1024px) { +@media (max-width: 1024px){ .hebergements-and-populaires { flex-direction: column; } - + .hebergements { width: 100%; @@ -737,6 +738,17 @@ margin-left: 10px; border-radius: 12px 12px 12px 12px; filter: drop-shadow(3px 3px 15px rgb(226, 219, 219)); } + div.desc-1{ + padding: 15px; + text-align: center; + } + div.desc-2{ + padding-left:0px; + padding-right: 0px; + padding-top:15px ; + padding-bottom:15px ; + text-align: center; + } div.desc-3 { padding: 5px; text-align: center; @@ -745,8 +757,14 @@ margin-left: 10px; padding: 5px; text-align: center; } + .footer{ + height:auto; + gap:80px; + } - +.main-container{ + padding: 0px; +} /* Small devices (phones, less than 768px) */ @media (max-width: 767.98px) { @@ -766,4 +784,3 @@ margin-left: 10px; /* ... */ -} \ No newline at end of file From 72d2b7a3b6a7ab106adf5c10cd251d3dd9060cb5 Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Sun, 24 Sep 2023 22:41:05 +0200 Subject: [PATCH 16/94] Modification @media query Signed-off-by: LILIANLEILA09 --- index.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/index.html b/index.html index 21c6b10d..371c0526 100644 --- a/index.html +++ b/index.html @@ -322,6 +322,7 @@

Hôtel Bleu et Blanc

Activités à Marseille

+ Image Vieux port
Vieux-Port
@@ -329,6 +330,7 @@

Activités à Marseille

+ Image Fort de Pomègues
Fort de Pomègues
@@ -336,6 +338,7 @@

Activités à Marseille

+ Image du Parc national des Calanques
Parc national des Calanques @@ -344,6 +347,7 @@

Activités à Marseille

+ Image de Notre Dame dela Garde
Notre-Dame-de-la-Garde
From d431adff0baa2ab53a302888f37bb90b88e7d604 Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Tue, 26 Sep 2023 06:34:52 +0200 Subject: [PATCH 17/94] modified @media query Signed-off-by: LILIANLEILA09 --- css/style.css | 27 ++++++++++++++++++++++----- index.html | 6 +++--- 2 files changed, 25 insertions(+), 8 deletions(-) diff --git a/css/style.css b/css/style.css index a2b5cce0..a101cbf7 100644 --- a/css/style.css +++ b/css/style.css @@ -704,8 +704,7 @@ margin-left: 10px; .hebergements-and-populaires { flex-direction: column; } - - + .hebergements { width: 100%; } @@ -766,6 +765,8 @@ margin-left: 10px; padding: 0px; } + + /* Small devices (phones, less than 768px) */ @media (max-width: 767.98px) { @@ -780,7 +781,23 @@ margin-left: 10px; padding: 0px; } - + .fa-solid.fa-magnifying-glass { + display:flex; + width: 40%; + justify-content:center; + background-color:#256dd7; + color:#f2f2f2; + border-radius: 0 10px 10px 0; + margin-left: 200px; + margin-top:-38px; + padding-bottom:9x; + + } + + form button{ + display:none; + cursor: pointer; - - /* ... */ +} +} +} \ No newline at end of file diff --git a/index.html b/index.html index 371c0526..8251238b 100644 --- a/index.html +++ b/index.html @@ -43,9 +43,9 @@

Trouvez votre hebergement pour des vacances de rêve

>
+ Rechercher + +
-
-

Filtres

+ +

Filtres

+

Économique

@@ -65,11 +66,11 @@

Filtres

Nos pépites

- +
+
- - -

de 500 logements sont disponibles dans cette ville

+
+
Plus de 500 logements sont disponibles dans cette ville
@@ -323,37 +324,33 @@

Hôtel Bleu et Blanc

Activités à Marseille

- - Image Vieux port - -
Vieux-Port
+ Image Vieux Port +
Vieux Port
- - Image Fort de Pomègues - -
Fort de Pomègues
+ Image Fort de Pomègues +
Fort de Pomègues
-
-
- - Image du Parc national des Calanques - -
Parc national des Calanques -
-
+
+
+ Parc national des Calanques + +
Parc national des Calangues
-
-
- - Image de Notre Dame dela Garde - -
Notre-Dame-de-la-Garde
-
-
+
+ +
+
+ Image Notre-Dame-de-la-Garde + +
Notre-Dame-de-la-Garde
+
+
+ +
From 22bc860be7fdbd74c8a52f8c365715cfa87e8d98 Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Sat, 30 Sep 2023 17:47:01 +0200 Subject: [PATCH 26/94] modified @media query Signed-off-by: LILIANLEILA09 --- css/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index b8552770..e8ace2dc 100644 --- a/css/style.css +++ b/css/style.css @@ -678,7 +678,7 @@ h4{ } #icon-info{ display: flex; -justify-content: left; +justify-content: left; } .filters{ margin-left: 20px; From 559b9bbadd8230bae842bea1ae7f09b49e00f355 Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Sun, 1 Oct 2023 00:14:36 +0200 Subject: [PATCH 27/94] modified @ media query Signed-off-by: LILIANLEILA09 --- css/style.css | 85 ++++++++++++++++++++++++++++++--------------------- index.html | 4 +-- 2 files changed, 53 insertions(+), 36 deletions(-) diff --git a/css/style.css b/css/style.css index e8ace2dc..c07f3797 100644 --- a/css/style.css +++ b/css/style.css @@ -79,9 +79,9 @@ a { } h3{ - margin-left: 10px; - padding-left: 20px; - margin-top: 20px; + display: flex; + flex-wrap: wrap; + justify-content: center; } .euro { @@ -103,7 +103,7 @@ h3{ margin-top: 10px; } -.titre-{ +.titre-1{ display: flex; justify-content:baseline; } @@ -680,9 +680,46 @@ h4{ display: flex; justify-content: left; } + .filters{ - margin-left: 20px; + padding-bottom: 100%; + } + +.filters { + display: flex; + padding: 20px; + font-size: 15px; + padding-top: 20px; + padding-left: 100px; + + +}**/ +.filters { + display: flex; + flex-wrap: wrap; + +} + +.btn-filter p { + display:inline-block; + flex-direction: column; + margin: 0px; + padding-right: 5px; + cursor: pointer; + +} + +.titre-1{ + padding-left: 20px; +} + + + + + + + /**********************FIN DE LAPTOP*************************************/ /****************************************************************************************/ /*******************************************************************************************/ @@ -788,28 +825,16 @@ h5{ text-decoration: none; font-size: 15px; } + .filters { - display: inline-flex; - padding-top: 20px; - padding-inline-end: 20px; - flex-flow: row wrap; - align-items: center; - gap: 20px; - - } - .btn-filter p { - display:inline-block; - flex-direction: column; - margin: 0px; - padding-right: 5px; - cursor: pointer; - } - - .titre-1{ - padding-left: 20px; - - } - + display: flex; + flex-wrap:wrap; + padding: 20px; + margin-bottom: 40px; + margin-left: 20px; + + + } @@ -855,12 +880,4 @@ h5{ padding-bottom: 10px; } - - - - - - - } - diff --git a/index.html b/index.html index e3f54536..ff415a1e 100644 --- a/index.html +++ b/index.html @@ -51,9 +51,9 @@

Trouvez votre hebergement pour des vacances de rêve

- -

Filtres

+
+

Filtres

Économique

From d1e18c35270c91b3b090f064236ae364dc32d6f7 Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Sun, 1 Oct 2023 01:13:27 +0200 Subject: [PATCH 28/94] Modified @media query Signed-off-by: LILIANLEILA09 --- css/style.css | 25 ++++++++++++------------- index.html | 2 +- 2 files changed, 13 insertions(+), 14 deletions(-) diff --git a/css/style.css b/css/style.css index c07f3797..22e1a58d 100644 --- a/css/style.css +++ b/css/style.css @@ -691,13 +691,11 @@ justify-content: left; padding: 20px; font-size: 15px; padding-top: 20px; - padding-left: 100px; - - -}**/ -.filters { - display: flex; + padding-right: 200px; + display: flex; flex-wrap: wrap; + justify-content: flex-start; + } @@ -710,6 +708,7 @@ justify-content: left; } + .titre-1{ padding-left: 20px; } @@ -720,6 +719,7 @@ justify-content: left; + /**********************FIN DE LAPTOP*************************************/ /****************************************************************************************/ /*******************************************************************************************/ @@ -831,13 +831,13 @@ h5{ flex-wrap:wrap; padding: 20px; margin-bottom: 40px; - margin-left: 20px; - - + margin-left: 20px; } - - - + + + + + /***************FIN DE TABLETTE*************************************/ /*************************************************************************/ @@ -874,7 +874,6 @@ h5{ } h2 { - font-size: 20px; font-weight: 2px; padding-bottom: 10px; diff --git a/index.html b/index.html index ff415a1e..bb595677 100644 --- a/index.html +++ b/index.html @@ -51,7 +51,7 @@

Trouvez votre hebergement pour des vacances de rêve

- +

Filtres

From dc5f74fbe789d3d4e7a5bc546a1a45df8b935769 Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Mon, 2 Oct 2023 13:55:58 +0200 Subject: [PATCH 29/94] modified @jquery Signed-off-by: LILIANLEILA09 --- css/style.css | 131 +++++++++++++++++++++++++------------------------- index.html | 57 +++++++++++----------- 2 files changed, 95 insertions(+), 93 deletions(-) diff --git a/css/style.css b/css/style.css index 22e1a58d..677fece7 100644 --- a/css/style.css +++ b/css/style.css @@ -641,31 +641,48 @@ h4{ padding-top: 20px; padding-bottom: 20px; } - - div.gallery { border: 1px solid #ccc; - width: 100%; - border-radius: 20px 20px 20px 20px; + width: 90%; + height: 350px; + border-radius: 12px 12px 12px 12px; } div.gallery:hover { - border: 1px solid #777; + border: 1px solid #39FF14; } div.gallery img { width: 100%; - height: 400px; - border-radius: 20px 20px 0 0; + height: 300px; + border-radius: 12px 12px 0px 0px; } - - div.desc { - width:100%; - text-align: center; - - } - + + div.desc{ + width: 100%; + padding-top:10px; + padding-bottom:10px ; + padding-left: 0; + padding-right: 0; + } + .desc1{ + padding-left: 10px; + padding-top:16px; + padding-bottom: 16px; + } + + .desc2{ + padding-left: 10px; + padding-top:16px; + padding-bottom: 16px; + } + + h6{ + font-size: 15px; + font-weight: bold; + padding-left: 10px; + } * { box-sizing: border-box; @@ -676,10 +693,11 @@ h4{ float: left; width: 24.99999%; } - #icon-info{ -display: flex; -justify-content: left; - } + + #icon-info{ + display: flex; + justify-content: left; + } .filters{ padding-bottom: 100%; @@ -707,17 +725,40 @@ justify-content: left; cursor: pointer; } - - .titre-1{ padding-left: 20px; } +h5{ + font-size: 15px; + font-weight: bold; + margin-bottom: 10px; + } - - - - +.footer.footer{ + display: flex; + justify-content: space-between; + width: 100%; + height: 200px; + background-color:#f2f2f2; + margin-top: 380px; + margin-bottom: 400px; +} +.footer-left{ + margin-top: 20px; + padding-left: 20px; +} +.footer-midle{ + margin-top: 20px; +} +.footer-right{ + margin-right: 150px; + padding-left: 20px; + margin-top: 20px; +} +p{ + margin-bottom: 10px; +} /**********************FIN DE LAPTOP*************************************/ @@ -779,46 +820,6 @@ justify-content: left; } -div.gallery { - border: 1px solid #ccc; - width: 90%; - height: 250px; - border-radius: 12px 12px 12px 12px; - - } - - div.gallery:hover { - border: 1px solid #777; - } - - div.gallery img { - width: 100%; - height: 200px; - border-radius: 12px 12px 0px 0px; - } - -div.desc{ - width: 100%; - padding-top:10px; - padding-bottom:10px ; - padding-left: 0; - padding-right: 0; -} -.desc1{ - padding-left: 10px; - padding-top:16px; - padding-bottom: 16px; -} - -.desc2{ - padding-left: 10px; - padding-top:16px; - padding-bottom: 16px; -} -h5{ - font-size: 10px; - font-weight: bold; -} a { color: inherit; @@ -879,4 +880,4 @@ h5{ padding-bottom: 10px; } -} +} \ No newline at end of file diff --git a/index.html b/index.html index bb595677..237984e5 100644 --- a/index.html +++ b/index.html @@ -325,20 +325,20 @@

Activités à Marseille

Image Vieux Port -
Vieux Port
+
Vieux Port
Image Fort de Pomègues -
Fort de Pomègues
+
Fort de Pomègues
Parc national des Calanques -
Parc national des Calangues
+
Parc national des Calangues
@@ -346,35 +346,36 @@

Activités à Marseille

Image Notre-Dame-de-la-Garde -
Notre-Dame-de-la-Garde
+
Notre-Dame-de-la-Garde
+
-
-
+
- -
+ +
-
A propos
-
-

Fonctionnement du site

-

Conditions générales

-

Données et confidentialité

-
-
-
-
Nos hébergements
-
-

Charte qualité

-

Proposer votre hôtel

-
-
-
-
Assistance
-
-

Centre d'aide

-

Nous contacter

-
+
A propos
+
+

Fonctionnement du site

+

Conditions générales

+

Données et confidentialité

+
+
+
+
Nos hébergements
+
+

Charte qualité

+

Proposer votre hôtel

+
+
+
+
Assistance
+
+

Centre d'aide

+

Nous contacter

+ +
From b148510a003cabeea4af89b3bacace0a01a51951 Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Wed, 4 Oct 2023 00:13:34 +0200 Subject: [PATCH 30/94] modification @media query Signed-off-by: LILIANLEILA09 --- css/style.css | 45 ++++++++++++++++++++++++++++++++++++++++----- index.html | 2 +- 2 files changed, 41 insertions(+), 6 deletions(-) diff --git a/css/style.css b/css/style.css index 677fece7..369cabd4 100644 --- a/css/style.css +++ b/css/style.css @@ -759,7 +759,12 @@ h5{ p{ margin-bottom: 10px; } +.afficher{ + margin-top: 100px; + font-size: 15px; + font-weight: bold; +} /**********************FIN DE LAPTOP*************************************/ /****************************************************************************************/ @@ -769,6 +774,7 @@ p{ /****** Media queries ***********/ /* Medium devices (tablets, less/equal than 1024px) */ + @media (max-width: 1024px){ .hebergements-and-populaires { flex-direction: column; @@ -832,18 +838,23 @@ p{ flex-wrap:wrap; padding: 20px; margin-bottom: 40px; - margin-left: 20px; + } - - + + /***************FIN DE TABLETTE*************************************/ /*************************************************************************/ /*********************************************************************************/ - +/*Small devices (*/ +@media (max-width: 768.98px){ + .titre-Filtres{ + padding-right: 100%; + } +} /* Small devices (phones, less than 768px) */ @media (max-width: 767.98px) { @@ -880,4 +891,28 @@ p{ padding-bottom: 10px; } -} \ No newline at end of file + +.container-grid{ + display:flex; + flex-direction: column; + column-gap: normal; +} + + +.box1,.box2,.box3,.box4,.box5,.box6{ + width: 100%; + margin-bottom: 20px; + margin-top: 0px; +} + +.populaires-cards{ + display:flex; + flex-direction: column; + column-gap: normal; + width: 200%; +} + +} + + + diff --git a/index.html b/index.html index 237984e5..2fb1eaf6 100644 --- a/index.html +++ b/index.html @@ -53,7 +53,7 @@

Trouvez votre hebergement pour des vacances de rêve

-->
-

Filtres

+

Filtres

Économique

From 3ff5c3e84f1bceb36ea77e2c317dba629a69af26 Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Wed, 4 Oct 2023 19:46:31 +0200 Subject: [PATCH 31/94] modified @media Signed-off-by: LILIANLEILA09 --- css/style.css | 139 ++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 107 insertions(+), 32 deletions(-) diff --git a/css/style.css b/css/style.css index 369cabd4..a3ff615b 100644 --- a/css/style.css +++ b/css/style.css @@ -150,6 +150,7 @@ h3{ .populaires-cards img { width: 33%; height: 136px; + object-fit: cover; border-top-left-radius: 20px; border-bottom-left-radius: 20px; } @@ -211,6 +212,7 @@ header nav ul { display: flex; list-style-type: none; margin: 0; + } header nav ul li { @@ -219,8 +221,8 @@ header nav ul li { margin: 0px 20px 0px 20px; } -header nav ul li:hover { - border-color: #256dd7; + header nav ul li:hover { + border-color:#256dd7; } header nav ul li a { @@ -230,7 +232,6 @@ header nav ul li a { header nav ul li:hover a { color:#0065FC; - } /* @@ -306,6 +307,8 @@ form button { flex-flow: row wrap; align-items: center; gap: 20px; + + } @@ -413,6 +416,7 @@ filter: drop-shadow(3px 3px 15px rgb(226, 219, 219)); width: 100%; height: 100px; border-radius: 20px 20px 0 0; +object-fit: cover; padding: 5px; } .box1 .card-content{ @@ -446,6 +450,7 @@ filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); width: 100%; height: 100px; border-radius: 20px 20px 0 0; +object-fit: cover; padding: 5px; filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); } @@ -482,6 +487,7 @@ margin-top: auto; width: 100%; height: 100px; border-radius: 20px 20px 0 0; + object-fit: cover; padding: 5px; filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); } @@ -518,6 +524,7 @@ filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); width: 100%; height: 100px; border-radius: 20px 20px 0 0; +object-fit: cover; padding: 5px; filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); @@ -545,6 +552,7 @@ width: 100%; height: 100px; border-radius: 20px 20px 0 0; padding: 5px; +object-fit: cover; filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); } @@ -586,6 +594,7 @@ width: 100%; height: 100px; border-radius: 20px 20px 0 0; padding: 5px; +object-fit: cover; filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); @@ -643,8 +652,8 @@ h4{ } div.gallery { border: 1px solid #ccc; - width: 90%; - height: 350px; + width: 100%; + height: 250px; border-radius: 12px 12px 12px 12px; } @@ -655,7 +664,8 @@ h4{ div.gallery img { width: 100%; - height: 300px; + height: 200px; + object-fit: cover; border-radius: 12px 12px 0px 0px; } @@ -667,19 +677,19 @@ h4{ padding-right: 0; } .desc1{ - padding-left: 10px; - padding-top:16px; - padding-bottom: 16px; + padding-left: 0; + padding-top:10px; + padding-bottom: 10px; } .desc2{ - padding-left: 10px; - padding-top:16px; - padding-bottom: 16px; + padding-left: 0; + padding-top:10px; + padding-bottom: 10px; } h6{ - font-size: 15px; + font-size: 11px; font-weight: bold; padding-left: 10px; } @@ -740,21 +750,24 @@ h5{ justify-content: space-between; width: 100%; height: 200px; - background-color:#f2f2f2; - margin-top: 380px; - margin-bottom: 400px; + background-color:#f2f2f2; + margin-top: 280px; + margin-bottom: 20px; } .footer-left{ margin-top: 20px; padding-left: 20px; + line-height: 20px; } .footer-midle{ margin-top: 20px; + line-height: 20px; } .footer-right{ - margin-right: 150px; + margin-right: 400px; padding-left: 20px; - margin-top: 20px; + margin-top: 20px; + line-height: 20px; } p{ margin-bottom: 10px; @@ -825,8 +838,6 @@ p{ padding-left: 20px; } - - a { color: inherit; text-decoration: none; @@ -840,11 +851,10 @@ p{ margin-bottom: 40px; } - - - - - + h6{ + font-size: 11px; + margin-bottom: 10px; + } /***************FIN DE TABLETTE*************************************/ /*************************************************************************/ @@ -886,17 +896,32 @@ p{ } h2 { + display: flex; + justify-content: center; + margin-left:20%; font-size: 20px; font-weight: 2px; - padding-bottom: 10px; + padding-bottom: 15px; } +.titre-1{ + display: flex; + justify-content: center; + margin-left: 20%; + padding-bottom: 15px; +} .container-grid{ display:flex; flex-direction: column; column-gap: normal; } +.populaires-cards{ + display:flex; + flex-direction: column; + column-gap: normal; + width: 200%; +} .box1,.box2,.box3,.box4,.box5,.box6{ @@ -905,14 +930,64 @@ p{ margin-top: 0px; } -.populaires-cards{ - display:flex; - flex-direction: column; - column-gap: normal; - width: 200%; -} + + #logo{ + margin-left:110px; + } + header{ + display: flex; + flex-direction:column; + padding-left: 30%; + + } + header nav ul li { + + border-top: none; + border-bottom: 2px solid transparent; + margin: 0px 20px 0px 20px; +} + header nav ul li:hover { + border-color:#256dd7; +} +html{ + width: 160%; +} + +.footer-left{ + margin-top: 20px; + padding-left: 20px; + line-height: 20px; +} +.footer-midle{ + margin-top: 20px; + line-height: 20px; +} +.footer-right{ + margin-right: 400px; + padding-left: 20px; + margin-top: 20px; + line-height: 20px; } + .hebergements-and-populaires{ + display: flex; + flex-direction:column-reverse; + + } + + + + } + + + + + + + + + + From 4b18d8a3f12d5d05306fee01252e00c806b54b49 Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Wed, 4 Oct 2023 22:41:10 +0200 Subject: [PATCH 32/94] modification @media Signed-off-by: LILIANLEILA09 --- css/style.css | 65 +++++++++++++++++++++++++++++++++++++++++---------- index.html | 4 ++-- 2 files changed, 55 insertions(+), 14 deletions(-) diff --git a/css/style.css b/css/style.css index a3ff615b..f59579a6 100644 --- a/css/style.css +++ b/css/style.css @@ -820,7 +820,7 @@ p{ font-size: 13px; } - } + .footer{ height:auto; gap:80px; @@ -856,6 +856,8 @@ p{ margin-bottom: 10px; } +} + /***************FIN DE TABLETTE*************************************/ /*************************************************************************/ /*********************************************************************************/ @@ -864,6 +866,7 @@ p{ .titre-Filtres{ padding-right: 100%; } + } /* Small devices (phones, less than 768px) */ @media (max-width: 767.98px) { @@ -916,12 +919,7 @@ p{ flex-direction: column; column-gap: normal; } -.populaires-cards{ - display:flex; - flex-direction: column; - column-gap: normal; - width: 200%; -} + .box1,.box2,.box3,.box4,.box5,.box6{ @@ -950,10 +948,15 @@ p{ header nav ul li:hover { border-color:#256dd7; } -html{ - width: 160%; -} +.footer.footer{ + display: flex; + flex-direction: column; + align-items: center; +background-color: #F2F2F2; +height: 600px; +width:100%; +} .footer-left{ margin-top: 20px; padding-left: 20px; @@ -964,8 +967,8 @@ html{ line-height: 20px; } .footer-right{ - margin-right: 400px; - padding-left: 20px; + + margin: 0%; margin-top: 20px; line-height: 20px; } @@ -977,9 +980,47 @@ html{ flex-direction:column-reverse; } + .btn-search{ + display: flex; + justify-content: center; + width: 100%; + padding-left: 100%; + + } +h3{ + padding-left: 50px; +} +.populaires-cards{ + width: 100%; +} + + +section{ + display:flex; + flex-direction: column; +} +.responsive +{ + width: 100%; +margin-left: 10px; +margin-right: 10px; +margin-bottom: 20px; +} +article.card{ + width: 100%; +} +.populaires-cards{ + display: flex; + flex-direction: column; + min-width: 300%; + +} +section.hebergements{ + background-color: white; +} } diff --git a/index.html b/index.html index 2fb1eaf6..8813d5d1 100644 --- a/index.html +++ b/index.html @@ -374,9 +374,9 @@
Assistance

Centre d'aide

Nous contacter

- +
+
-
From 08758359f015bd52d496fa6e4d4261a39955f8da Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Sat, 7 Oct 2023 17:50:35 +0200 Subject: [PATCH 33/94] modified @media query Signed-off-by: LILIANLEILA09 --- css/style.css | 1229 +++++++++++++++++++++++-------------------------- 1 file changed, 579 insertions(+), 650 deletions(-) diff --git a/css/style.css b/css/style.css index f59579a6..3ade8694 100644 --- a/css/style.css +++ b/css/style.css @@ -1,10 +1,10 @@ -@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800;900&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800;900&display=swap"); /****** General ***********/ * { - font-family: 'Raleway', sans-serif; - box-sizing: border-box; - margin:0; - padding:0; + font-family: "Raleway", sans-serif; + box-sizing: border-box; + margin: 0; + padding: 0; } /* @@ -12,36 +12,37 @@ */ :root { - --main-color: #0065FC; - --main-bg-color: #F2F2F2; - --filter-bg-color: #DEEBFF; - --light-blue : #DEEBFF; - -blue : #0065FC; - --light-blue : #DEEBFF; - --grey : lightgrey; - --dark-grey : dimgrey; - --light-grey : #f2f2f2; - --white: white; - --green-fluo: #39FF14; + --main-color: #0065fc; + --main-bg-color: #f2f2f2; + --filter-bg-color: #deebff; + --light-blue: #deebff; + -blue: #0065fc; + --light-blue: #deebff; + --grey: lightgrey; + --dark-grey: dimgrey; + --light-grey: #f2f2f2; + --white: white; + --green-fluo: #39ff14; } /* * hidden
+ + From 1e9864941767a7d52dba2675e641d46f71a9cf11 Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Sat, 21 Oct 2023 20:26:57 +0200 Subject: [PATCH 69/94] modified Signed-off-by: LILIANLEILA09 --- css/header.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/css/header.css b/css/header.css index bed4682b..af2e7bbe 100644 --- a/css/header.css +++ b/css/header.css @@ -36,7 +36,6 @@ h1 { .titre-1 { display: flex; padding-left: 20px; - } form { @@ -63,7 +62,6 @@ form input { input#search { width: 160px; padding-left: 25px; - } form input:hover { From dd32e99057d3e0d419243aa389fb04484f71220a Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Sun, 22 Oct 2023 10:52:26 +0200 Subject: [PATCH 70/94] modified css Signed-off-by: LILIANLEILA09 --- css/header.css | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/css/header.css b/css/header.css index af2e7bbe..013331c8 100644 --- a/css/header.css +++ b/css/header.css @@ -123,13 +123,13 @@ form button:hover { .btn-filter { font-weight: bold; - border: 1px solid var(--light-grey); + border: 1px solid lightgrey; border-radius: 30px; border-left: none; } .btn-filter:hover { - background-color: #deebff; + background-color:#deebff; box-shadow: 0 0 8px var(--blue); } @@ -138,12 +138,17 @@ form button:hover { border-radius: 30px; background-color: white; } +.btn-filter .fa-solid:hover{ + background-color: #deebff; + box-shadow: 0 0 8px var(--blue); +} .btn-filter .fa-child-reaching { padding: 14px 17px 14px 17px; margin-right: 10px; color: #0065fc; background-color: white; + } .btn-filter .fa-heart, From 12201814f4c76a2f46004ab4e723c608c7c0fc50 Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Mon, 23 Oct 2023 17:02:03 +0200 Subject: [PATCH 71/94] Modified Signed-off-by: LILIANLEILA09 --- css/header.css | 1 + 1 file changed, 1 insertion(+) diff --git a/css/header.css b/css/header.css index 013331c8..59e73515 100644 --- a/css/header.css +++ b/css/header.css @@ -11,6 +11,7 @@ header { } header #logo img { width: 50px; + } header nav ul { From 14bb53cda59c5d4bc9e6e275e2c4f7608a74588b Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Tue, 24 Oct 2023 15:57:22 +0200 Subject: [PATCH 72/94] modidied css Signed-off-by: LILIANLEILA09 --- css/footer.css | 2 +- css/header.css | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/css/footer.css b/css/footer.css index 67dce371..ebafe2b8 100644 --- a/css/footer.css +++ b/css/footer.css @@ -24,7 +24,7 @@ line-height: 20px; } p { - font-size: 18px; + font-size: 15px; margin-bottom: 10px; } diff --git a/css/header.css b/css/header.css index 59e73515..9fa63e37 100644 --- a/css/header.css +++ b/css/header.css @@ -28,6 +28,7 @@ header nav ul li { header nav ul li:hover { border-color: #0065fc; color: #256dd7; + } h1 { font-size: 15px; From b7d812b5751ee1b710d6cf380e6a6d06f42d52a5 Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Tue, 24 Oct 2023 21:58:20 +0200 Subject: [PATCH 73/94] modified css Signed-off-by: LILIANLEILA09 --- css/footer.css | 110 ------ css/header.css | 271 -------------- css/main.css | 540 ---------------------------- css/style.css | 932 ++++++++++++++++++++++++++++++++++++++++++++++++- 4 files changed, 928 insertions(+), 925 deletions(-) delete mode 100644 css/footer.css delete mode 100644 css/header.css delete mode 100644 css/main.css diff --git a/css/footer.css b/css/footer.css deleted file mode 100644 index ebafe2b8..00000000 --- a/css/footer.css +++ /dev/null @@ -1,110 +0,0 @@ -.footer { - display: flex; - justify-content: space-between; - width: 100%; - height: 200px; - gap: 10%; - margin-top: 300px; - background-color: #f2f2f2; -} - -.footer-left { - margin-top: 20px; - padding-left: 20px; - line-height: 20px; -} -.footer-midle { - margin-top: 20px; - line-height: 20px; -} -.footer-right { - margin-right: 400px; - padding-left: 20px; - margin-top: 20px; - line-height: 20px; -} -p { - font-size: 15px; - margin-bottom: 10px; -} - -/*--------------------------------------------------- - Medium devices (tablets, less/equal than 1024px) - ---------------------------------------------------*/ - -@media (max-width: 1024px) { - .footer { - height: auto; - gap: 50px; - } - .footer { - width: 100%; - height: 170px; - gap: 20px; - padding-bottom: 50px; - background-color: #f2f2f2; - } - .footer-left { - width: 288px; - height: 163px; - gap: 20px; - } - .footer-midle { - margin-top: 20px; - } - .footer-right { - margin-right: 20px; - padding-left: 20px; - margin-top: 20px; - } - p { - font-size: 18px; - margin-bottom: 10px; - } - /*-------------------------------------------------- - Medium devices (tablets, less/equal than 767,98px) - ----------------------------------------------------*/ - @media (max-width: 767.98px) { - .footer { - display: flex; - flex-direction: column; - align-items: self-start; - height: 399px; - width: 100%; - margin-top: 20px; - gap: 30px; - } - .footer-left.p { - font-size: 30px; - margin-top: 20px; - line-height: 50px; - } - - .footer-midle.p { - font-size: 30px; - margin-left: 20px; - margin-top: 20px; - } - .footer-right.p { - font-size: 30px; - margin-left: 20px; - - margin-top: 20px; - } - .footer-right { - margin: 0px; - } - .footer-midle { - margin-left: 20px; - } - P { - font-size: 18px; - margin-bottom: 10px; - } - .afficher { - margin-top: 15px; - font-size: 15px; - font-weight: bold; - } - } -} diff --git a/css/header.css b/css/header.css deleted file mode 100644 index 9fa63e37..00000000 --- a/css/header.css +++ /dev/null @@ -1,271 +0,0 @@ -header { - display: flex; - justify-content: space-between; - height: 50px; -} - -#logo { - display: flex; - margin-right: auto; - align-items: center; -} -header #logo img { - width: 50px; - -} - -header nav ul { - display: flex; - justify-content: space-between; - gap: 30px; - list-style-type: none; -} -header nav ul li { - padding-top: 20px; - padding-bottom: 10px; - border-top: 2px solid transparent; -} -header nav ul li:hover { - border-color: #0065fc; - color: #256dd7; - -} -h1 { - font-size: 15px; - margin-bottom: 10px; - padding-left: 10px; -} -.titre-1 { - display: flex; - padding-left: 20px; -} - -form { - display: inline-block; - width: 50%; -} - -form i { - background-color: rgb(247, 243, 243); - padding: 12px 12px; - border-radius: 12px 0 0 12px; - width: 50px; - padding-left: 20px; -} -form input { - border: 1px solid transparent; - font-size: 15px; - font-weight: bold; - padding: 8px 0 7px 10px; - margin-left: -5px; - width: 146px; - height: 39px; -} -input#search { - width: 160px; - padding-left: 25px; -} - -form input:hover { - background-color: var(--light-blue); -} - -form input::placeholder { - color: black; -} - -form button { - border-radius: 0 10px 10px 0; - background-color: #0065fc; - color: var(--white); - font-weight: bold; - font-size: 15px; - padding: 10px 10px 10px 10px; - cursor: pointer; - border: none; - margin-left: -5px; -} - -form button:hover { - box-shadow: 1px 1px 10px grey; -} - -.fa-solid.fa-magnifying-glass { - display: none; -} -.btn-search { - display: flex; - justify-content: flex-start; - width: 80%; -} -/* -^---------------------- -* FILTERS -^---------------------- -*/ - -.filters { - display: inline-flex; - padding-top: 18px; - flex-flow: row wrap; - align-items: center; - gap: 15px; -} - -.filters h3 { - margin-right: 20px; - padding-left: 20px; -} - -.btn-filter p { - margin: 0; - padding-right: 20px; - cursor: pointer; -} - -.btn-filter { - font-weight: bold; - border: 1px solid lightgrey; - border-radius: 30px; - border-left: none; -} - -.btn-filter:hover { - background-color:#deebff; - box-shadow: 0 0 8px var(--blue); -} - -.btn-filter .fa-solid { - background-color: var(--light-blue); - border-radius: 30px; - background-color: white; -} -.btn-filter .fa-solid:hover{ - background-color: #deebff; - box-shadow: 0 0 8px var(--blue); -} - -.btn-filter .fa-child-reaching { - padding: 14px 17px 14px 17px; - margin-right: 10px; - color: #0065fc; - background-color: white; - -} - -.btn-filter .fa-heart, -.fa-fire, -.fa-money-bill-wave { - padding: 14px 14px 14px 14px; - margin-right: 10px; - color: #0065fc; - background-color: white; -} - -/* -* barre d'information -**/ -#icon-info { - display: flex; - align-items: center; - margin-bottom: 20px; -} -.fa-solid.fa-info { - border: 1.5px solid var(--light-grey); - border-radius: 50%; - color: #0065fc; - height: 25px; - width: 25px; - font-size: 20px; - display: flex; - align-items: center; - justify-content: center; - margin-right: 5px; - background-color: var(--light-grey); -} - -/*------------------------------------------------- - Medium devices (tablets, less/equal than 1024px) - -----------------------------------------------------*/ - -@media (max-width: 1024px) { - .filters { - display: flex; - flex-wrap: wrap; - justify-content: flex-start; - margin-top: 20px; - } - .fa-solid.fa-magnifying-glass { - display: none; - } -} -/*------------------------------------------------------------- - Medium devices (tablets, less/equal than 768px) - -----------------------------------------------------------*/ -@media (max-width: 768px) { - .titre-Filtres { - padding-right: 100%; - } -} -/*------------------------------------------------------- - Medium devices (tablets, less/equal than 767,98px) - ---------------------------------------------------------*/ -@media (max-width: 767.98px) { - .fa-solid.fa-magnifying-glass { - display: flex; - background-color: var(--main-color); - color: var(--main-bg-color); - border-radius: 0 10px 10px 0; - } - form button { - display: none; - cursor: pointer; - } - #logo { - margin-left: 130px; - margin-top: 20px; - } - header { - display: flex; - flex-direction: column; - } - header nav ul li { - border-top: none; - padding-right: 20px; - border-bottom: 2px solid transparent; - margin: 0px 20px 0px 20px; - } - - header nav ul li:hover { - border-color: #256dd7; - } - .btn-search { - display: flex; - justify-content: center; - width: 100%; - padding-left: 100%; - margin-left: 20px; - padding-right: 20px; - } - - .filters { - display: flex; - flex-wrap: wrap; - width: 100%; - } - .btn-search { - padding: 0px 0px 0px 60px; - } - input#search { - width: 180px; - padding-left: 25px; - } - h1 { - font-size: 26px; - margin-top: 40px; - padding-left: 20px; - } - header #logo img { - width: 50px; - } -} diff --git a/css/main.css b/css/main.css deleted file mode 100644 index a785eb1f..00000000 --- a/css/main.css +++ /dev/null @@ -1,540 +0,0 @@ -.main-container { - width: 100%; - max-width: 1440px; - padding: 0 50px; -} -.accessibility-label { - position: absolute; - left: -999px; -} -.section-title { - margin: 0; - font-size: 22px; -} -a { - color: inherit; - text-decoration: none; -} -p { - margin-bottom: 10px; -} - -main, -header, -footer { - max-width: 1400px; - margin: 0 auto; - padding: 0 15px; -} - -.main { - margin-top: 30px; -} - -.card { - background-color: white; - border-radius: 20px; - padding: 5px; - filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); -} - -.card img { - object-fit: cover; -} - -.card-title { - font-size: 15px; - padding-left: 10px; -} -.hebergements-and-populaires { - 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; -} - -/****** Hebergements ***********/ -.hebergements { - width: 65%; -} - -/****** Populaires ***********/ -.populaires { - width: 32%; -} - -.populaires-title { - display: flex; - justify-content: space-between; - align-items: center; -} - -.populaires-cards .card { - display: flex; - margin-top: 33px; -} - -.populaires-cards img { - width: 33%; - height: 136px; - object-fit: cover; - 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; - color: #0065fc; -} - -.card:hover { - transform: scale(1.02); - box-shadow: 0 0 8px var(--blue); - cursor: pointer; - background-color: var(--light-grey); -} -.card .stars { - margin-top: auto; -} -/****Hebergements à Marseille**/ - -.container-grid { - display: grid; - grid-template-columns: 1fr 1fr 1fr; - justify-content: center; -} - -.box1 { - margin-top: 30px; - margin-bottom: 30px; - background-color: white; - width: 90%; - border-radius: 20px 20px 20px 20px; - filter: drop-shadow(3px 3px 15px rgb(226, 219, 219)); -} - -.box1 img { - width: 100%; - height: 100px; - border-radius: 20px 20px 0 0; - object-fit: cover; - padding: 5px; -} -.box1 .card-content { - border-radius: 0 0 20px 20px; - filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); -} -.box1:hover { - transform: scale(1.02); - box-shadow: 0 0 8px var(--blue); - cursor: pointer; - background-color: var(--light-grey); -} -.card .stars { - margin-top: auto; -} - -.box2 { - margin-top: 30px; - background-color: white; - width: 90%; - border-radius: 20px 20px 20px 20px; - filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); -} - -.box2 img { - width: 100%; - height: 100px; - border-radius: 20px 20px 0 0; - object-fit: cover; - padding: 5px; - filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); -} - -.box2 .card-content { - border-radius: 0 0 20px 20px; - - filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); -} -.box2:hover { - transform: scale(1.02); - box-shadow: 0 0 8px var(--blue); - cursor: pointer; - background-color: var(--light-grey); -} - -.card .stars { - margin-top: auto; -} -.box3 { - margin-top: 30px; - background-color: white; - width: 90%; - border-radius: 20px 20px 20px 20px; - filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); -} - -.box3 img { - width: 100%; - height: 100px; - border-radius: 20px 20px 0 0; - object-fit: cover; - padding: 5px; - filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); -} - -.box3.card-content { - border-radius: 0 0 20px 20px; - - filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); -} -.box3:hover { - transform: scale(1.02); - box-shadow: 0 0 8px var(--blue); - cursor: pointer; - background-color: var(--light-grey); -} - -.card .stars { - margin-top: auto; -} - -.box4 { - background-color: white; - width: 90%; - border-radius: 20px 20px 20px 20px; - filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); -} - -.box4 img { - width: 100%; - height: 100px; - border-radius: 20px 20px 0 0; - object-fit: cover; - padding: 5px; - filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); -} -.box4.card-content { - border-radius: 0 0 20px 20px; - filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); -} - -.box4:hover { - transform: scale(1.02); - box-shadow: 0 0 8px var(--blue); - cursor: pointer; - background-color: var(--light-grey); -} - -.card .stars { - margin-top: auto; -} - -.box5 img { - width: 100%; - height: 100px; - border-radius: 20px 20px 0 0; - padding: 5px; - object-fit: cover; - filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); -} - -.box5.card-content { - border-radius: 0 0 20px 20px; - filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); -} -.box5 { - background-color: white; - width: 90%; - border-radius: 20px 20px 20px 20px; - filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); -} -.box5:hover { - transform: scale(1.02); - box-shadow: 0 0 8px var(--blue); - cursor: pointer; - background-color: var(--light-grey); -} - -.card .stars { - margin-top: auto; -} - -.box6 { - background-color: white; - width: 90%; - border-radius: 20px 20px 20px 20px; - filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); -} - -.box6 img { - width: 100%; - height: 100px; - border-radius: 20px 20px 0 0; - padding: 5px; - object-fit: cover; - filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); -} -.box6.card-content { - border-radius: 0 0 20px 20px; - filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); -} -.box6:hover { - transform: scale(1.02); - box-shadow: 0 0 8px var(--blue); - cursor: pointer; - background-color: var(--light-grey); -} -.card .stars { - margin-top: auto; -} - -.card-rating { - color: #0065fc; - margin-left: 10px; - padding-bottom: 10px; -} -h3.card-title { - margin: 0; -} - -p.card-subtitle { - margin-top: 5px; - margin-bottom: 5px; -} - -.card-rating { - color: #0065fc; - margin-left: 10px; - padding-bottom: 10px; -} - -p.card-subtitle { - margin-top: 5px; - margin-bottom: 5px; - margin-left: 10px; -} -/****Activités à Marseille**/ - -div.gallery { - width: 100%; - height: 250px; - border-radius: 12px 12px 12px 12px; -} - -div.gallery:hover { - border: 1px solid #39ff14; -} - -div.gallery img { - width: 100%; - height: 200px; - object-fit: cover; - border-radius: 12px 12px 0px 0px; -} - -div.desc { - width: 100%; - padding-top: 10px; - padding-bottom: 10px; - padding-left: 0; - padding-right: 0; -} -.desc1 { - padding-left: 0; - padding-top: 10px; - padding-bottom: 10px; -} - -.desc2 { - padding-left: 0; - padding-top: 10px; - padding-bottom: 10px; -} - -h6 { - font-size: 15px; - margin-bottom: 10px; - padding-left: 5px; -} - -h4 { - font-size: 20px; - padding-left: 20px; - padding-top: 20px; - padding-bottom: 20px; -} - -.afficher { - margin-top: 80px; - font-size: 20px; - font-weight: bold; -} - -.responsive { - padding: 0 6px; - float: left; - width: 24.99999%; -} - -/*------------------------------------------------------ - Medium devices (tablets, less/equal than 1024px) - -------------------------------------------------------*/ - -@media (max-width: 1024px) { - .hebergements-and-populaires { - flex-direction: column; - } - .hebergements { - width: 100%; - } - - .populaires { - width: 100%; - margin-top: 50px; - } - - .populaires-cards { - display: flex; - flex-direction: row; - justify-content: space-between; - } - - .populaires-cards a { - width: 30%; - } - .populaires-cards .card-title { - font-size: 14px; - } - - .populaires-cards .card-subtitle { - font-size: 13px; - } - .main-container { - padding: 0px; - width: 100%; - } - h4 { - font-size: 15px; - padding-left: 25px; - padding-top: 20px; - padding-bottom: 20px; - } - h6 { - font-size: 11px; - font-weight: bold; - padding-left: 15px; - } - .afficher { - margin-top: 20px; - font-size: 15px; - font-weight: bold; - } -} -/*--------------------------------------------------- - Medium devices (tablets, less/equal than 767,98px) - -------------------------------------------------------*/ -@media (max-width: 767.98px) { - .main-container { - padding: 0; - } - - .populaires-cards a { - width: 98%; - } - - section.hebergements { - width: 100%; - margin-left: 10px; - } - .container-grid { - display: flex; - flex-direction: column; - column-gap: normal; - } - - .box1, - .box2, - .box3, - .box4, - .box5, - .box6 { - width: 100%; - margin-bottom: 20px; - margin-top: 0px; - } - .hebergements-and-populaires { - display: flex; - flex-direction: column-reverse; - } - .populaires-cards { - width: 100%; - } - - section { - display: flex; - flex-direction: column; - } - - article.card { - width: 100%; - } - .populaires-cards { - display: flex; - flex-direction: column; - } - section.hebergements { - background-color: white; - } - - h4 { - font-size: 15px; - padding-left: 26px; - padding-top: 20px; - padding-bottom: 20px; - } - h6 { - font-size: 15px; - font-weight: bold; - padding-left: 15px; - } - .responsive { - width: 100%; - margin-left: 10px; - margin-right: 10px; - margin-bottom: 20px; - } - - .section-title { - padding-left: 20px; - font-size: 20px; - } - .afficher { - padding-top: 20px; - font-size: 20px; - font-weight: bold; - } -} diff --git a/css/style.css b/css/style.css index c8285446..58208bf1 100644 --- a/css/style.css +++ b/css/style.css @@ -1,7 +1,4 @@ @import url("https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800;900&display=swap"); -@import url(header.css); -@import url(main.css); -@import url(footer.css); * { font-family: "Raleway", sans-serif; @@ -19,7 +16,7 @@ --light-blue: --light-grey: #f2f2f2; --white: white; - --green-fluo: #39ff14; + } html { @@ -45,3 +42,930 @@ html { .line { color: #0065fc; } +header { + display: flex; + justify-content: space-between; + height: 50px; + } + + #logo { + display: flex; + margin-right: auto; + align-items: center; + } + header #logo img { + width: 50px; + + } + + header nav ul { + display: flex; + justify-content: space-between; + gap: 30px; + list-style-type: none; + } + header nav ul li { + padding-top: 20px; + padding-bottom: 10px; + border-top: 2px solid transparent; + } + header nav ul li:hover { + border-color: #0065fc; + color: #256dd7; + + } + h1 { + font-size: 15px; + margin-bottom: 10px; + padding-left: 10px; + } + .titre-1 { + display: flex; + padding-left: 20px; + } + + form { + display: inline-block; + width: 50%; + } + + form i { + background-color: rgb(247, 243, 243); + padding: 12px 12px; + border-radius: 12px 0 0 12px; + width: 50px; + padding-left: 20px; + } + form input { + border: 1px solid transparent; + font-size: 15px; + font-weight: bold; + padding: 8px 0 7px 10px; + margin-left: -5px; + width: 146px; + height: 39px; + } + input#search { + width: 160px; + padding-left: 25px; + } + + form input:hover { + background-color: var(--light-blue); + } + + form input::placeholder { + color: black; + } + + form button { + border-radius: 0 10px 10px 0; + background-color: #0065fc; + color: var(--white); + font-weight: bold; + font-size: 15px; + padding: 10px 10px 10px 10px; + cursor: pointer; + border: none; + margin-left: -5px; + } + + form button:hover { + box-shadow: 1px 1px 10px grey; + } + + .fa-solid.fa-magnifying-glass { + display: none; + } + .btn-search { + display: flex; + justify-content: flex-start; + width: 80%; + } + /* + ^---------------------- + * FILTERS + ^---------------------- + */ + + .filters { + display: inline-flex; + padding-top: 18px; + flex-flow: row wrap; + align-items: center; + gap: 15px; + } + + .filters h3 { + margin-right: 20px; + padding-left: 20px; + } + + .btn-filter p { + margin: 0; + padding-right: 20px; + cursor: pointer; + } + + .btn-filter { + font-weight: bold; + border: 1px solid lightgrey; + border-radius: 30px; + border-left: none; + } + + .btn-filter:hover { + background-color:#deebff; + box-shadow: 0 0 8px var(--blue); + } + + .btn-filter .fa-solid { + background-color: var(--light-blue); + border-radius: 30px; + background-color: white; + } + .btn-filter .fa-solid:hover{ + background-color: #deebff; + box-shadow: 0 0 8px var(--blue); + } + + .btn-filter .fa-child-reaching { + padding: 14px 17px 14px 17px; + margin-right: 10px; + color: #0065fc; + background-color: white; + + } + + .btn-filter .fa-heart, + .fa-fire, + .fa-money-bill-wave { + padding: 14px 14px 14px 14px; + margin-right: 10px; + color: #0065fc; + background-color: white; + } + + /* + * barre d'information + **/ + #icon-info { + display: flex; + align-items: center; + margin-bottom: 20px; + } + .fa-solid.fa-info { + border: 1.5px solid var(--light-grey); + border-radius: 50%; + color: #0065fc; + height: 25px; + width: 25px; + font-size: 20px; + display: flex; + align-items: center; + justify-content: center; + margin-right: 5px; + background-color: var(--light-grey); + } + + + .main-container { + width: 100%; + max-width: 1440px; + padding: 0 50px; + } + .accessibility-label { + position: absolute; + left: -999px; + } + .section-title { + margin: 0; + font-size: 22px; + } + a { + color: inherit; + text-decoration: none; + } + p { + margin-bottom: 10px; + } + + main, + header, + footer { + max-width: 1400px; + margin: 0 auto; + padding: 0 15px; + } + + .main { + margin-top: 30px; + } + + .card { + background-color: white; + border-radius: 20px; + padding: 5px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); + } + + .card img { + object-fit: cover; + } + + .card-title { + font-size: 15px; + padding-left: 10px; + } + .hebergements-and-populaires { + 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; + } + + /****** Hebergements ***********/ + .hebergements { + width: 65%; + } + + /****** Populaires ***********/ + .populaires { + width: 32%; + } + + .populaires-title { + display: flex; + justify-content: space-between; + align-items: center; + } + + .populaires-cards .card { + display: flex; + margin-top: 33px; + } + + .populaires-cards img { + width: 33%; + height: 136px; + object-fit: cover; + 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; + color: #0065fc; + } + + .card:hover { + transform: scale(1.02); + box-shadow: 0 0 8px var(--blue); + cursor: pointer; + background-color: var(--light-grey); + } + .card .stars { + margin-top: auto; + } + /****Hebergements à Marseille**/ + + .container-grid { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + justify-content: center; + } + + .box1 { + margin-top: 30px; + margin-bottom: 30px; + background-color: white; + width: 90%; + border-radius: 20px 20px 20px 20px; + filter: drop-shadow(3px 3px 15px rgb(226, 219, 219)); + } + + .box1 img { + width: 100%; + height: 100px; + border-radius: 20px 20px 0 0; + object-fit: cover; + padding: 5px; + } + .box1 .card-content { + border-radius: 0 0 20px 20px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); + } + .box1:hover { + transform: scale(1.02); + box-shadow: 0 0 8px var(--blue); + cursor: pointer; + background-color: var(--light-grey); + } + .card .stars { + margin-top: auto; + } + + .box2 { + margin-top: 30px; + background-color: white; + width: 90%; + border-radius: 20px 20px 20px 20px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); + } + + .box2 img { + width: 100%; + height: 100px; + border-radius: 20px 20px 0 0; + object-fit: cover; + padding: 5px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); + } + + .box2 .card-content { + border-radius: 0 0 20px 20px; + + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); + } + .box2:hover { + transform: scale(1.02); + box-shadow: 0 0 8px var(--blue); + cursor: pointer; + background-color: var(--light-grey); + } + + .card .stars { + margin-top: auto; + } + .box3 { + margin-top: 30px; + background-color: white; + width: 90%; + border-radius: 20px 20px 20px 20px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); + } + + .box3 img { + width: 100%; + height: 100px; + border-radius: 20px 20px 0 0; + object-fit: cover; + padding: 5px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); + } + + .box3.card-content { + border-radius: 0 0 20px 20px; + + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); + } + .box3:hover { + transform: scale(1.02); + box-shadow: 0 0 8px var(--blue); + cursor: pointer; + background-color: var(--light-grey); + } + + .card .stars { + margin-top: auto; + } + + .box4 { + background-color: white; + width: 90%; + border-radius: 20px 20px 20px 20px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); + } + + .box4 img { + width: 100%; + height: 100px; + border-radius: 20px 20px 0 0; + object-fit: cover; + padding: 5px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); + } + .box4.card-content { + border-radius: 0 0 20px 20px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); + } + + .box4:hover { + transform: scale(1.02); + box-shadow: 0 0 8px var(--blue); + cursor: pointer; + background-color: var(--light-grey); + } + + .card .stars { + margin-top: auto; + } + + .box5 img { + width: 100%; + height: 100px; + border-radius: 20px 20px 0 0; + padding: 5px; + object-fit: cover; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); + } + + .box5.card-content { + border-radius: 0 0 20px 20px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); + } + .box5 { + background-color: white; + width: 90%; + border-radius: 20px 20px 20px 20px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); + } + .box5:hover { + transform: scale(1.02); + box-shadow: 0 0 8px var(--blue); + cursor: pointer; + background-color: var(--light-grey); + } + + .card .stars { + margin-top: auto; + } + + .box6 { + background-color: white; + width: 90%; + border-radius: 20px 20px 20px 20px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); + } + + .box6 img { + width: 100%; + height: 100px; + border-radius: 20px 20px 0 0; + padding: 5px; + object-fit: cover; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); + } + .box6.card-content { + border-radius: 0 0 20px 20px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); + } + .box6:hover { + transform: scale(1.02); + box-shadow: 0 0 8px var(--blue); + cursor: pointer; + background-color: var(--light-grey); + } + .card .stars { + margin-top: auto; + } + + .card-rating { + color: #0065fc; + margin-left: 10px; + padding-bottom: 10px; + } + h3.card-title { + margin: 0; + } + + p.card-subtitle { + margin-top: 5px; + margin-bottom: 5px; + } + + .card-rating { + color: #0065fc; + margin-left: 10px; + padding-bottom: 10px; + } + + p.card-subtitle { + margin-top: 5px; + margin-bottom: 5px; + margin-left: 10px; + } + /****Activités à Marseille**/ + + div.gallery { + width: 100%; + height: 250px; + border-radius: 12px 12px 12px 12px; + } + + + div.gallery:hover { + border: 1px solid lightgray; + transform: scale(1.02); + box-shadow: 0 0 8px var(--blue); + background-color: var(--light-grey); + cursor: pointer; + + } + + div.gallery img { + width: 100%; + height: 200px; + object-fit: cover; + border-radius: 12px 12px 0px 0px; + } + + div.desc { + width: 100%; + padding-top: 10px; + padding-bottom: 10px; + padding-left: 0; + padding-right: 0; + } + .desc1 { + padding-left: 0; + padding-top: 10px; + padding-bottom: 10px; + } + + .desc2 { + padding-left: 0; + padding-top: 10px; + padding-bottom: 10px; + } + + h6 { + font-size: 15px; + margin-bottom: 10px; + padding-left: 20px; + } + + h4 { + font-size: 15px; + padding-left: 20px; + padding-top: 20px; + padding-bottom: 20px; + } + + .afficher { + margin-top: 80px; + font-size: 15px; + font-weight: bold; + } + + .responsive { + padding: 0 6px; + float: left; + width: 24.99999%; + } + .footer { + display: flex; + justify-content: space-between; + width: 100%; + height: 200px; + gap: 10%; + margin-top: 300px; + background-color: #f2f2f2; + } + + .footer-left { + margin-top: 20px; + padding-left: 20px; + line-height: 20px; + } + .footer-midle { + margin-top: 20px; + line-height: 20px; + } + .footer-right { + margin-right: 400px; + padding-left: 20px; + margin-top: 20px; + line-height: 20px; + } + p { + font-size: 15px; + margin-bottom: 10px; + } + /*---------------------------------------------------------- + Medium devices (tablets, less/equal than 1024px) du header + -----------------------------------------------------*/ + +@media (max-width: 1024px) { + .filters { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + margin-top: 20px; + } + .fa-solid.fa-magnifying-glass { + display: none; + } + + } + +@media (max-width: 1024px) { + .hebergements-and-populaires { + flex-direction: column; + } + .hebergements { + width: 100%; + } + + .populaires { + width: 100%; + margin-top: 50px; + } + + .populaires-cards { + display: flex; + flex-direction: row; + justify-content: space-between; + } + + .populaires-cards a { + width: 30%; + } + .populaires-cards .card-title { + font-size: 14px; + } + + .populaires-cards .card-subtitle { + font-size: 13px; + } + .main-container { + padding: 0px; + width: 100%; + } + h4 { + font-size: 15px; + padding-left: 25px; + padding-top: 20px; + padding-bottom: 20px; + } + h6 { + font-size: 11px; + font-weight: bold; + padding-left: 15px; + } + .afficher { + margin-top: 20px; + font-size: 15px; + font-weight: bold; + } + } + /*--------------------------------------------------- + Medium devices (tablets, less/equal than 1024px) + ---------------------------------------------------*/ + +@media (max-width: 1024px) { + .footer { + height: auto; + gap: 50px; + } + .footer { + width: 100%; + height: 170px; + gap: 20px; + padding-bottom: 50px; + background-color: #f2f2f2; + } + .footer-left { + width: 288px; + height: 163px; + gap: 20px; + } + .footer-midle { + margin-top: 20px; + } + .footer-right { + margin-right: 20px; + padding-left: 20px; + margin-top: 20px; + } + p { + font-size: 18px; + margin-bottom: 10px; + } +} +/*------------------------------------------------------------- + Medium devices (tablets, less/equal than 768px) + -----------------------------------------------------------*/ + @media (max-width: 768px) { + .titre-Filtres { + padding-right: 100%; + } + } + /*------------------------------------------------------- + Medium devices (tablets, less/equal than 767,98px) + ---------------------------------------------------------*/ + @media (max-width: 767.98px) { + .fa-solid.fa-magnifying-glass { + display: flex; + background-color: var(--main-color); + color: var(--main-bg-color); + border-radius: 0 10px 10px 0; + } + form button { + display: none; + cursor: pointer; + } + #logo { + margin-left: 130px; + margin-top: 20px; + } + header { + display: flex; + flex-direction: column; + } + header nav ul li { + border-top: none; + padding-right: 20px; + border-bottom: 2px solid transparent; + margin: 0px 20px 0px 20px; + } + + header nav ul li:hover { + border-color: #256dd7; + } + .btn-search { + display: flex; + justify-content: center; + width: 100%; + padding-left: 100%; + margin-left: 20px; + padding-right: 20px; + } + + .filters { + display: flex; + flex-wrap: wrap; + width: 100%; + } + .btn-search { + padding: 0px 0px 0px 60px; + } + input#search { + width: 180px; + padding-left: 25px; + } + h1 { + font-size: 26px; + margin-top: 40px; + padding-left: 20px; + } + header #logo img { + width: 50px; + } + } + /*--------------------------------------------------- + Medium devices (tablets, less/equal than 767,98px) + -------------------------------------------------------*/ +@media (max-width: 767.98px) { + .main-container { + padding: 0; + } + + .populaires-cards a { + width: 98%; + } + + section.hebergements { + width: 100%; + margin-left: 10px; + } + .container-grid { + display: flex; + flex-direction: column; + column-gap: normal; + } + + .box1, + .box2, + .box3, + .box4, + .box5, + .box6 { + width: 100%; + margin-bottom: 20px; + margin-top: 0px; + } + .hebergements-and-populaires { + display: flex; + flex-direction: column-reverse; + } + .populaires-cards { + width: 100%; + } + + section { + display: flex; + flex-direction: column; + } + + article.card { + width: 100%; + } + .populaires-cards { + display: flex; + flex-direction: column; + } + section.hebergements { + background-color: white; + } + + h4 { + font-size: 15px; + padding-left: 26px; + padding-top: 20px; + padding-bottom: 20px; + } + h6 { + font-size: 15px; + font-weight: bold; + padding-left: 15px; + } + .responsive { + width: 100%; + margin-left: 10px; + margin-right: 10px; + margin-bottom: 20px; + } + + .section-title { + padding-left: 20px; + font-size: 20px; + } + .afficher { + padding-top: 20px; + font-size: 20px; + font-weight: bold; + } + } + /*-------------------------------------------------- + Medium devices (tablets, less/equal than 767,98px) + ----------------------------------------------------*/ + @media (max-width: 767.98px) { + .footer { + display: flex; + flex-direction: column; + align-items: self-start; + height: 399px; + width: 100%; + margin-top: 20px; + gap: 30px; + } + .footer-left.p { + font-size: 30px; + margin-top: 20px; + line-height: 50px; + } + + .footer-midle.p { + font-size: 30px; + margin-left: 20px; + margin-top: 20px; + } + .footer-right.p { + font-size: 30px; + margin-left: 20px; + + margin-top: 20px; + } + .footer-right { + margin: 0px; + } + .footer-midle { + margin-left: 20px; + } + P { + font-size: 18px; + margin-bottom: 10px; + } + .afficher { + margin-top: 15px; + font-size: 15px; + font-weight: bold; + } + } + + + \ No newline at end of file From 654bc7d160693e5c515c0689488cb4f44de6561f Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Thu, 26 Oct 2023 17:05:10 +0200 Subject: [PATCH 74/94] Modified css Signed-off-by: LILIANLEILA09 --- css/header.css | 18 +- css/main.css | 5 +- css/style.css | 959 ++++++++++++++++++++++++++++++++++++++++++++++++- index.html | 6 +- 4 files changed, 956 insertions(+), 32 deletions(-) diff --git a/css/header.css b/css/header.css index 013331c8..1379589a 100644 --- a/css/header.css +++ b/css/header.css @@ -103,10 +103,12 @@ form button:hover { */ .filters { - display: inline-flex; + padding: 10px; + display: flex; padding-top: 18px; flex-flow: row wrap; align-items: center; + justify-content: center; gap: 15px; } @@ -129,7 +131,7 @@ form button:hover { } .btn-filter:hover { - background-color:#deebff; + background-color: #deebff; box-shadow: 0 0 8px var(--blue); } @@ -138,9 +140,9 @@ form button:hover { border-radius: 30px; background-color: white; } -.btn-filter .fa-solid:hover{ - background-color: #deebff; - box-shadow: 0 0 8px var(--blue); +.btn-filter .fa-solid:hover { + background-color: #deebff; + box-shadow: 0 0 8px var(--blue); } .btn-filter .fa-child-reaching { @@ -148,7 +150,6 @@ form button:hover { margin-right: 10px; color: #0065fc; background-color: white; - } .btn-filter .fa-heart, @@ -247,9 +248,10 @@ form button:hover { } .filters { + border: 1px solid red; display: flex; - flex-wrap: wrap; - width: 100%; + margin: auto; + width: 90%; } .btn-search { padding: 0px 0px 0px 60px; diff --git a/css/main.css b/css/main.css index a785eb1f..217a1738 100644 --- a/css/main.css +++ b/css/main.css @@ -2,6 +2,7 @@ width: 100%; max-width: 1440px; padding: 0 50px; + overflow-x: hidden; } .accessibility-label { position: absolute; @@ -345,10 +346,6 @@ div.gallery { border-radius: 12px 12px 12px 12px; } -div.gallery:hover { - border: 1px solid #39ff14; -} - div.gallery img { width: 100%; height: 200px; diff --git a/css/style.css b/css/style.css index c8285446..c16c3410 100644 --- a/css/style.css +++ b/css/style.css @@ -1,7 +1,7 @@ @import url("https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800;900&display=swap"); -@import url(header.css); +/* @import url(header.css); @import url(main.css); -@import url(footer.css); +@import url(footer.css); */ * { font-family: "Raleway", sans-serif; @@ -15,33 +15,958 @@ --main-bg-color: #f2f2f2; --filter-bg-color: #deebff; --light-blue: #deebff; - -blue: #0065fc; - --light-blue: + --blue: #0065fc; --light-grey: #f2f2f2; --white: white; - --green-fluo: #39ff14; } - + html { + display: flex; + width: 100%; + height: 100%; + flex-direction: row; + justify-content: center; +} +body { + display: flex; + justify-content: center; + width: 100%; +} + +.euro { + font-weight: 700; +} + +.neutral-star { + color: var(--main-bg-color); +} +.line { + color: #0065fc; +} + +/*******header********/ +header { + display: flex; + justify-content: space-between; + height: 50px; +} + +#logo { + display: flex; + margin-right: auto; + align-items: center; +} +header #logo img { + width: 50px; +} + +header nav ul { + display: flex; + justify-content: space-between; + gap: 30px; + list-style-type: none; +} +header nav ul li { + padding-top: 20px; + padding-bottom: 10px; + border-top: 2px solid transparent; +} +header nav ul li:hover { + border-color: #0065fc; + color: #256dd7; +} +h1 { + font-size: 15px; + margin-bottom: 10px; + padding-left: 10px; +} +.titre-1 { + display: flex; + padding-left: 20px; +} + +form { + display: inline-block; + width: 50%; +} + +form i { + background-color: rgb(247, 243, 243); + padding: 12px 12px; + border-radius: 12px 0 0 12px; + width: 50px; + padding-left: 20px; +} +form input { + border: 1px solid transparent; + font-size: 15px; + font-weight: bold; + padding: 8px 0 7px 10px; + margin-left: -5px; + width: 146px; + height: 39px; +} +input#search { + width: 160px; + padding-left: 25px; +} + +form input:hover { + background-color: var(--light-blue); +} + +form input::placeholder { + color: black; +} + +form button { + border-radius: 0 10px 10px 0; + background-color: #0065fc; + color: var(--white); + font-weight: bold; + font-size: 15px; + padding: 10px 10px 10px 10px; + cursor: pointer; + border: none; + margin-left: -5px; +} + +form button:hover { + box-shadow: 1px 1px 10px grey; +} + +.fa-solid.fa-magnifying-glass { + display: none; +} +.btn-search { + display: flex; + justify-content: flex-start; + width: 80%; +} +/* + ^---------------------- + * FILTERS + ^---------------------- + */ + +.filters { + padding: 10px; + display: flex; + padding-top: 18px; + flex-flow: row wrap; + align-items: center; + justify-content: center; + gap: 15px; +} + +.filters h3 { + margin-right: 20px; + padding-left: 20px; +} + +.btn-filter p { + margin: 0; + padding-right: 20px; + cursor: pointer; +} + +.btn-filter { + font-weight: bold; + border: 1px solid lightgrey; + border-radius: 30px; + border-left: none; +} + +.btn-filter:hover { + background-color: #deebff; + box-shadow: 0 0 8px var(--blue); +} + +.btn-filter .fa-solid { + background-color: var(--light-blue); + border-radius: 30px; + background-color: white; +} +.btn-filter .fa-solid:hover { + background-color: #deebff; + box-shadow: 0 0 8px var(--blue); +} + +.btn-filter .fa-child-reaching { + padding: 14px 17px 14px 17px; + margin-right: 10px; + color: #0065fc; + background-color: white; +} + +.btn-filter .fa-heart, +.fa-fire, +.fa-money-bill-wave { + padding: 14px 14px 14px 14px; + margin-right: 10px; + color: #0065fc; + background-color: white; +} + +/* + * barre d'information + **/ +#icon-info { + display: flex; + align-items: center; + margin-bottom: 20px; +} +.fa-solid.fa-info { + border: 1.5px solid var(--light-grey); + border-radius: 50%; + color: #0065fc; + height: 25px; + width: 25px; + font-size: 20px; + display: flex; + align-items: center; + justify-content: center; + margin-right: 5px; + background-color: var(--light-grey); +} + +/*------------------------------------------------- + Medium devices (tablets, less/equal than 1024px) + -----------------------------------------------------*/ + +@media (max-width: 1024px) { + .filters { display: flex; - width: 100%; - height: 100%; - flex-direction: row; - justify-content: center; + flex-wrap: wrap; + justify-content: flex-start; + margin-top: 20px; + } + .fa-solid.fa-magnifying-glass { + display: none; + } +} +/*------------------------------------------------------------- + Medium devices (tablets, less/equal than 768px) + -----------------------------------------------------------*/ +@media (max-width: 768px) { + .titre-Filtres { + padding-right: 100%; } - body { +} +/*------------------------------------------------------- + Medium devices (tablets, less/equal than 767,98px) + ---------------------------------------------------------*/ +@media (max-width: 767.98px) { + .fa-solid.fa-magnifying-glass { + display: flex; + background-color: var(--main-color); + color: var(--main-bg-color); + border-radius: 0 10px 10px 0; + } + form button { + display: none; + cursor: pointer; + } + #logo { + margin-left: 130px; + margin-top: 20px; + } + header { + display: flex; + flex-direction: column; + } + header nav ul li { + border-top: none; + padding-right: 20px; + border-bottom: 2px solid transparent; + margin: 0px 20px 0px 20px; + } + + header nav ul li:hover { + border-color: #256dd7; + } + .btn-search { display: flex; justify-content: center; width: 100%; + padding-left: 100%; + margin-left: 20px; + padding-right: 20px; + } + + .filters { + border: 1px solid red; + display: flex; + margin: auto; + width: 90%; + } + .btn-search { + padding: 0px 0px 0px 60px; + } + input#search { + width: 180px; + padding-left: 25px; + } + h1 { + font-size: 26px; + margin-top: 40px; + padding-left: 20px; + } + header #logo img { + width: 50px; } - -.euro { - font-weight: 700; } -.neutral-star { - color: var(--main-bg-color); +/********************** +/******Main*************/ +.main-container { + width: 100%; + max-width: 1440px; + padding: 0 50px; + overflow-x: hidden; } -.line { +.accessibility-label { + position: absolute; + left: -999px; +} +.section-title { + margin: 0; + font-size: 22px; +} +a { + color: inherit; + text-decoration: none; +} +p { + margin-bottom: 10px; +} + +main, +header, +footer { + max-width: 1400px; + margin: 0 auto; + padding: 0 15px; +} + +.main { + margin-top: 30px; +} + +.card { + background-color: white; + border-radius: 20px; + padding: 5px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} + +.card img { + object-fit: cover; +} + +.card-title { + font-size: 15px; + padding-left: 10px; +} +.hebergements-and-populaires { + 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; +} + +/****** Hebergements ***********/ +.hebergements { + width: 65%; +} + +/****** Populaires ***********/ +.populaires { + width: 32%; +} + +.populaires-title { + display: flex; + justify-content: space-between; + align-items: center; +} + +.populaires-cards .card { + display: flex; + margin-top: 33px; +} + +.populaires-cards img { + width: 33%; + height: 136px; + object-fit: cover; + 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; + color: #0065fc; +} + +.card:hover { + transform: scale(1.02); + box-shadow: 0 0 8px var(--blue); + cursor: pointer; + background-color: var(--light-grey); +} +.card .stars { + margin-top: auto; +} +/****Hebergements à Marseille**/ + +.container-grid { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + justify-content: center; +} + +.box1 { + margin-top: 30px; + margin-bottom: 30px; + background-color: white; + width: 90%; + border-radius: 20px 20px 20px 20px; + filter: drop-shadow(3px 3px 15px rgb(226, 219, 219)); +} + +.box1 img { + width: 100%; + height: 100px; + border-radius: 20px 20px 0 0; + object-fit: cover; + padding: 5px; +} +.box1 .card-content { + border-radius: 0 0 20px 20px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} +.box1:hover { + transform: scale(1.02); + box-shadow: 0 0 8px var(--blue); + cursor: pointer; + background-color: var(--light-grey); +} +.card .stars { + margin-top: auto; +} + +.box2 { + margin-top: 30px; + background-color: white; + width: 90%; + border-radius: 20px 20px 20px 20px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} + +.box2 img { + width: 100%; + height: 100px; + border-radius: 20px 20px 0 0; + object-fit: cover; + padding: 5px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} + +.box2 .card-content { + border-radius: 0 0 20px 20px; + + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} +.box2:hover { + transform: scale(1.02); + box-shadow: 0 0 8px var(--blue); + cursor: pointer; + background-color: var(--light-grey); +} + +.card .stars { + margin-top: auto; +} +.box3 { + margin-top: 30px; + background-color: white; + width: 90%; + border-radius: 20px 20px 20px 20px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} + +.box3 img { + width: 100%; + height: 100px; + border-radius: 20px 20px 0 0; + object-fit: cover; + padding: 5px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} + +.box3.card-content { + border-radius: 0 0 20px 20px; + + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} +.box3:hover { + transform: scale(1.02); + box-shadow: 0 0 8px var(--blue); + cursor: pointer; + background-color: var(--light-grey); +} + +.card .stars { + margin-top: auto; +} + +.box4 { + background-color: white; + width: 90%; + border-radius: 20px 20px 20px 20px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} + +.box4 img { + width: 100%; + height: 100px; + border-radius: 20px 20px 0 0; + object-fit: cover; + padding: 5px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} +.box4.card-content { + border-radius: 0 0 20px 20px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} + +.box4:hover { + transform: scale(1.02); + box-shadow: 0 0 8px var(--blue); + cursor: pointer; + background-color: var(--light-grey); +} + +.card .stars { + margin-top: auto; +} + +.box5 img { + width: 100%; + height: 100px; + border-radius: 20px 20px 0 0; + padding: 5px; + object-fit: cover; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} + +.box5.card-content { + border-radius: 0 0 20px 20px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} +.box5 { + background-color: white; + width: 90%; + border-radius: 20px 20px 20px 20px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} +.box5:hover { + transform: scale(1.02); + box-shadow: 0 0 8px var(--blue); + cursor: pointer; + background-color: var(--light-grey); +} + +.card .stars { + margin-top: auto; +} + +.box6 { + background-color: white; + width: 90%; + border-radius: 20px 20px 20px 20px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} + +.box6 img { + width: 100%; + height: 100px; + border-radius: 20px 20px 0 0; + padding: 5px; + object-fit: cover; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} +.box6.card-content { + border-radius: 0 0 20px 20px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} +.box6:hover { + transform: scale(1.02); + box-shadow: 0 0 8px var(--blue); + cursor: pointer; + background-color: var(--light-grey); +} +.card .stars { + margin-top: auto; +} + +.card-rating { color: #0065fc; + margin-left: 10px; + padding-bottom: 10px; +} +h3.card-title { + margin: 0; +} + +p.card-subtitle { + margin-top: 5px; + margin-bottom: 5px; +} + +.card-rating { + color: #0065fc; + margin-left: 10px; + padding-bottom: 10px; +} + +p.card-subtitle { + margin-top: 5px; + margin-bottom: 5px; + margin-left: 10px; +} +/****Activités à Marseille**/ + +div.gallery { + width: 100%; + height: 250px; + border-radius: 12px 12px 12px 12px; } + +div.gallery img { + width: 100%; + height: 200px; + object-fit: cover; + border-radius: 12px 12px 0px 0px; +} + +div.desc { + width: 100%; + padding-top: 10px; + padding-bottom: 10px; + padding-left: 0; + padding-right: 0; +} +.desc1 { + padding-left: 0; + padding-top: 10px; + padding-bottom: 10px; +} + +.desc2 { + padding-left: 0; + padding-top: 10px; + padding-bottom: 10px; +} + +h6 { + font-size: 15px; + margin-bottom: 10px; + padding-left: 5px; +} + +h4 { + font-size: 20px; + padding-left: 20px; + padding-top: 20px; + padding-bottom: 20px; +} + +.afficher { + margin-top: 80px; + font-size: 20px; + font-weight: bold; +} + +.responsive { + padding: 0 6px; + float: left; + width: 24.99999%; +} + +/*------------------------------------------------------ + Medium devices (tablets, less/equal than 1024px) + -------------------------------------------------------*/ + +@media (max-width: 1024px) { + .hebergements-and-populaires { + flex-direction: column; + } + .hebergements { + width: 100%; + } + + .populaires { + width: 100%; + margin-top: 50px; + } + + .populaires-cards { + display: flex; + flex-direction: row; + justify-content: space-between; + } + + .populaires-cards a { + width: 30%; + } + .populaires-cards .card-title { + font-size: 14px; + } + + .populaires-cards .card-subtitle { + font-size: 13px; + } + .main-container { + padding: 0px; + width: 100%; + } + h4 { + font-size: 15px; + padding-left: 25px; + padding-top: 20px; + padding-bottom: 20px; + } + h6 { + font-size: 11px; + font-weight: bold; + padding-left: 15px; + } + .afficher { + margin-top: 20px; + font-size: 15px; + font-weight: bold; + } +} +/*--------------------------------------------------- + Medium devices (tablets, less/equal than 767,98px) + -------------------------------------------------------*/ +@media (max-width: 767.98px) { + .main-container { + padding: 0; + } + + .populaires-cards a { + width: 98%; + } + + section.hebergements { + width: 100%; + margin-left: 10px; + } + .container-grid { + display: flex; + flex-direction: column; + column-gap: normal; + } + + .box1, + .box2, + .box3, + .box4, + .box5, + .box6 { + width: 100%; + margin-bottom: 20px; + margin-top: 0px; + } + .hebergements-and-populaires { + display: flex; + flex-direction: column-reverse; + } + .populaires-cards { + width: 100%; + } + + section { + display: flex; + flex-direction: column; + } + + article.card { + width: 100%; + } + .populaires-cards { + display: flex; + flex-direction: column; + } + section.hebergements { + background-color: white; + } + + h4 { + font-size: 15px; + padding-left: 26px; + padding-top: 20px; + padding-bottom: 20px; + } + h6 { + font-size: 15px; + font-weight: bold; + padding-left: 15px; + } + .responsive { + width: 100%; + margin-left: 10px; + margin-right: 10px; + margin-bottom: 20px; + } + + .section-title { + padding-left: 20px; + font-size: 20px; + } + .afficher { + padding-top: 20px; + font-size: 20px; + font-weight: bold; + } +} +/***********************/ +/******Footer***********/ +.footer { + display: flex; + justify-content: space-between; + width: 100%; + height: 200px; + gap: 10%; + margin-top: 300px; + background-color: #f2f2f2; +} + +.footer-left { + margin-top: 20px; + padding-left: 20px; + line-height: 20px; +} +.footer-midle { + margin-top: 20px; + line-height: 20px; +} +.footer-right { + margin-right: 400px; + padding-left: 20px; + margin-top: 20px; + line-height: 20px; +} +p { + font-size: 18px; + margin-bottom: 10px; +} + +/*--------------------------------------------------- + Medium devices (tablets, less/equal than 1024px) + ---------------------------------------------------*/ + +@media (max-width: 1024px) { + .footer { + height: auto; + gap: 50px; + } + .footer { + width: 100%; + height: 170px; + gap: 20px; + padding-bottom: 50px; + background-color: #f2f2f2; + } + .footer-left { + width: 288px; + height: 163px; + gap: 20px; + } + .footer-midle { + margin-top: 20px; + } + .footer-right { + margin-right: 20px; + padding-left: 20px; + margin-top: 20px; + } + p { + font-size: 18px; + margin-bottom: 10px; + } + /*-------------------------------------------------- + Medium devices (tablets, less/equal than 767,98px) + ----------------------------------------------------*/ + @media (max-width: 767.98px) { + .footer { + display: flex; + flex-direction: column; + align-items: self-start; + height: 399px; + width: 100%; + margin-top: 20px; + gap: 30px; + } + .footer-left.p { + font-size: 30px; + margin-top: 20px; + line-height: 50px; + } + + .footer-midle.p { + font-size: 30px; + margin-left: 20px; + margin-top: 20px; + } + .footer-right.p { + font-size: 30px; + margin-left: 20px; + + margin-top: 20px; + } + .footer-right { + margin: 0px; + } + .footer-midle { + margin-left: 20px; + } + P { + font-size: 18px; + margin-bottom: 10px; + } + .afficher { + margin-top: 15px; + font-size: 15px; + font-weight: bold; + } + } +} + +/**********************/ diff --git a/index.html b/index.html index 1f72b55b..05e43926 100644 --- a/index.html +++ b/index.html @@ -28,7 +28,7 @@
@@ -80,7 +80,7 @@

Filtres

-
+

Hébergements à Marseille

@@ -422,7 +422,7 @@

Hôtel Bleu et Blanc

-

Activités à Marseille

+

Activités à Marseille

Date: Thu, 26 Oct 2023 17:20:48 +0200 Subject: [PATCH 75/94] modified css Signed-off-by: LILIANLEILA09 --- css/header.css | 18 +- css/main.css | 5 +- css/style.css | 959 ++++++++++++++++++++++++++++++++++++++++++++++++- index.html | 6 +- 4 files changed, 956 insertions(+), 32 deletions(-) diff --git a/css/header.css b/css/header.css index 013331c8..1379589a 100644 --- a/css/header.css +++ b/css/header.css @@ -103,10 +103,12 @@ form button:hover { */ .filters { - display: inline-flex; + padding: 10px; + display: flex; padding-top: 18px; flex-flow: row wrap; align-items: center; + justify-content: center; gap: 15px; } @@ -129,7 +131,7 @@ form button:hover { } .btn-filter:hover { - background-color:#deebff; + background-color: #deebff; box-shadow: 0 0 8px var(--blue); } @@ -138,9 +140,9 @@ form button:hover { border-radius: 30px; background-color: white; } -.btn-filter .fa-solid:hover{ - background-color: #deebff; - box-shadow: 0 0 8px var(--blue); +.btn-filter .fa-solid:hover { + background-color: #deebff; + box-shadow: 0 0 8px var(--blue); } .btn-filter .fa-child-reaching { @@ -148,7 +150,6 @@ form button:hover { margin-right: 10px; color: #0065fc; background-color: white; - } .btn-filter .fa-heart, @@ -247,9 +248,10 @@ form button:hover { } .filters { + border: 1px solid red; display: flex; - flex-wrap: wrap; - width: 100%; + margin: auto; + width: 90%; } .btn-search { padding: 0px 0px 0px 60px; diff --git a/css/main.css b/css/main.css index a785eb1f..217a1738 100644 --- a/css/main.css +++ b/css/main.css @@ -2,6 +2,7 @@ width: 100%; max-width: 1440px; padding: 0 50px; + overflow-x: hidden; } .accessibility-label { position: absolute; @@ -345,10 +346,6 @@ div.gallery { border-radius: 12px 12px 12px 12px; } -div.gallery:hover { - border: 1px solid #39ff14; -} - div.gallery img { width: 100%; height: 200px; diff --git a/css/style.css b/css/style.css index c8285446..c16c3410 100644 --- a/css/style.css +++ b/css/style.css @@ -1,7 +1,7 @@ @import url("https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800;900&display=swap"); -@import url(header.css); +/* @import url(header.css); @import url(main.css); -@import url(footer.css); +@import url(footer.css); */ * { font-family: "Raleway", sans-serif; @@ -15,33 +15,958 @@ --main-bg-color: #f2f2f2; --filter-bg-color: #deebff; --light-blue: #deebff; - -blue: #0065fc; - --light-blue: + --blue: #0065fc; --light-grey: #f2f2f2; --white: white; - --green-fluo: #39ff14; } - + html { + display: flex; + width: 100%; + height: 100%; + flex-direction: row; + justify-content: center; +} +body { + display: flex; + justify-content: center; + width: 100%; +} + +.euro { + font-weight: 700; +} + +.neutral-star { + color: var(--main-bg-color); +} +.line { + color: #0065fc; +} + +/*******header********/ +header { + display: flex; + justify-content: space-between; + height: 50px; +} + +#logo { + display: flex; + margin-right: auto; + align-items: center; +} +header #logo img { + width: 50px; +} + +header nav ul { + display: flex; + justify-content: space-between; + gap: 30px; + list-style-type: none; +} +header nav ul li { + padding-top: 20px; + padding-bottom: 10px; + border-top: 2px solid transparent; +} +header nav ul li:hover { + border-color: #0065fc; + color: #256dd7; +} +h1 { + font-size: 15px; + margin-bottom: 10px; + padding-left: 10px; +} +.titre-1 { + display: flex; + padding-left: 20px; +} + +form { + display: inline-block; + width: 50%; +} + +form i { + background-color: rgb(247, 243, 243); + padding: 12px 12px; + border-radius: 12px 0 0 12px; + width: 50px; + padding-left: 20px; +} +form input { + border: 1px solid transparent; + font-size: 15px; + font-weight: bold; + padding: 8px 0 7px 10px; + margin-left: -5px; + width: 146px; + height: 39px; +} +input#search { + width: 160px; + padding-left: 25px; +} + +form input:hover { + background-color: var(--light-blue); +} + +form input::placeholder { + color: black; +} + +form button { + border-radius: 0 10px 10px 0; + background-color: #0065fc; + color: var(--white); + font-weight: bold; + font-size: 15px; + padding: 10px 10px 10px 10px; + cursor: pointer; + border: none; + margin-left: -5px; +} + +form button:hover { + box-shadow: 1px 1px 10px grey; +} + +.fa-solid.fa-magnifying-glass { + display: none; +} +.btn-search { + display: flex; + justify-content: flex-start; + width: 80%; +} +/* + ^---------------------- + * FILTERS + ^---------------------- + */ + +.filters { + padding: 10px; + display: flex; + padding-top: 18px; + flex-flow: row wrap; + align-items: center; + justify-content: center; + gap: 15px; +} + +.filters h3 { + margin-right: 20px; + padding-left: 20px; +} + +.btn-filter p { + margin: 0; + padding-right: 20px; + cursor: pointer; +} + +.btn-filter { + font-weight: bold; + border: 1px solid lightgrey; + border-radius: 30px; + border-left: none; +} + +.btn-filter:hover { + background-color: #deebff; + box-shadow: 0 0 8px var(--blue); +} + +.btn-filter .fa-solid { + background-color: var(--light-blue); + border-radius: 30px; + background-color: white; +} +.btn-filter .fa-solid:hover { + background-color: #deebff; + box-shadow: 0 0 8px var(--blue); +} + +.btn-filter .fa-child-reaching { + padding: 14px 17px 14px 17px; + margin-right: 10px; + color: #0065fc; + background-color: white; +} + +.btn-filter .fa-heart, +.fa-fire, +.fa-money-bill-wave { + padding: 14px 14px 14px 14px; + margin-right: 10px; + color: #0065fc; + background-color: white; +} + +/* + * barre d'information + **/ +#icon-info { + display: flex; + align-items: center; + margin-bottom: 20px; +} +.fa-solid.fa-info { + border: 1.5px solid var(--light-grey); + border-radius: 50%; + color: #0065fc; + height: 25px; + width: 25px; + font-size: 20px; + display: flex; + align-items: center; + justify-content: center; + margin-right: 5px; + background-color: var(--light-grey); +} + +/*------------------------------------------------- + Medium devices (tablets, less/equal than 1024px) + -----------------------------------------------------*/ + +@media (max-width: 1024px) { + .filters { display: flex; - width: 100%; - height: 100%; - flex-direction: row; - justify-content: center; + flex-wrap: wrap; + justify-content: flex-start; + margin-top: 20px; + } + .fa-solid.fa-magnifying-glass { + display: none; + } +} +/*------------------------------------------------------------- + Medium devices (tablets, less/equal than 768px) + -----------------------------------------------------------*/ +@media (max-width: 768px) { + .titre-Filtres { + padding-right: 100%; } - body { +} +/*------------------------------------------------------- + Medium devices (tablets, less/equal than 767,98px) + ---------------------------------------------------------*/ +@media (max-width: 767.98px) { + .fa-solid.fa-magnifying-glass { + display: flex; + background-color: var(--main-color); + color: var(--main-bg-color); + border-radius: 0 10px 10px 0; + } + form button { + display: none; + cursor: pointer; + } + #logo { + margin-left: 130px; + margin-top: 20px; + } + header { + display: flex; + flex-direction: column; + } + header nav ul li { + border-top: none; + padding-right: 20px; + border-bottom: 2px solid transparent; + margin: 0px 20px 0px 20px; + } + + header nav ul li:hover { + border-color: #256dd7; + } + .btn-search { display: flex; justify-content: center; width: 100%; + padding-left: 100%; + margin-left: 20px; + padding-right: 20px; + } + + .filters { + border: 1px solid red; + display: flex; + margin: auto; + width: 90%; + } + .btn-search { + padding: 0px 0px 0px 60px; + } + input#search { + width: 180px; + padding-left: 25px; + } + h1 { + font-size: 26px; + margin-top: 40px; + padding-left: 20px; + } + header #logo img { + width: 50px; } - -.euro { - font-weight: 700; } -.neutral-star { - color: var(--main-bg-color); +/********************** +/******Main*************/ +.main-container { + width: 100%; + max-width: 1440px; + padding: 0 50px; + overflow-x: hidden; } -.line { +.accessibility-label { + position: absolute; + left: -999px; +} +.section-title { + margin: 0; + font-size: 22px; +} +a { + color: inherit; + text-decoration: none; +} +p { + margin-bottom: 10px; +} + +main, +header, +footer { + max-width: 1400px; + margin: 0 auto; + padding: 0 15px; +} + +.main { + margin-top: 30px; +} + +.card { + background-color: white; + border-radius: 20px; + padding: 5px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} + +.card img { + object-fit: cover; +} + +.card-title { + font-size: 15px; + padding-left: 10px; +} +.hebergements-and-populaires { + 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; +} + +/****** Hebergements ***********/ +.hebergements { + width: 65%; +} + +/****** Populaires ***********/ +.populaires { + width: 32%; +} + +.populaires-title { + display: flex; + justify-content: space-between; + align-items: center; +} + +.populaires-cards .card { + display: flex; + margin-top: 33px; +} + +.populaires-cards img { + width: 33%; + height: 136px; + object-fit: cover; + 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; + color: #0065fc; +} + +.card:hover { + transform: scale(1.02); + box-shadow: 0 0 8px var(--blue); + cursor: pointer; + background-color: var(--light-grey); +} +.card .stars { + margin-top: auto; +} +/****Hebergements à Marseille**/ + +.container-grid { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + justify-content: center; +} + +.box1 { + margin-top: 30px; + margin-bottom: 30px; + background-color: white; + width: 90%; + border-radius: 20px 20px 20px 20px; + filter: drop-shadow(3px 3px 15px rgb(226, 219, 219)); +} + +.box1 img { + width: 100%; + height: 100px; + border-radius: 20px 20px 0 0; + object-fit: cover; + padding: 5px; +} +.box1 .card-content { + border-radius: 0 0 20px 20px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} +.box1:hover { + transform: scale(1.02); + box-shadow: 0 0 8px var(--blue); + cursor: pointer; + background-color: var(--light-grey); +} +.card .stars { + margin-top: auto; +} + +.box2 { + margin-top: 30px; + background-color: white; + width: 90%; + border-radius: 20px 20px 20px 20px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} + +.box2 img { + width: 100%; + height: 100px; + border-radius: 20px 20px 0 0; + object-fit: cover; + padding: 5px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} + +.box2 .card-content { + border-radius: 0 0 20px 20px; + + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} +.box2:hover { + transform: scale(1.02); + box-shadow: 0 0 8px var(--blue); + cursor: pointer; + background-color: var(--light-grey); +} + +.card .stars { + margin-top: auto; +} +.box3 { + margin-top: 30px; + background-color: white; + width: 90%; + border-radius: 20px 20px 20px 20px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} + +.box3 img { + width: 100%; + height: 100px; + border-radius: 20px 20px 0 0; + object-fit: cover; + padding: 5px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} + +.box3.card-content { + border-radius: 0 0 20px 20px; + + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} +.box3:hover { + transform: scale(1.02); + box-shadow: 0 0 8px var(--blue); + cursor: pointer; + background-color: var(--light-grey); +} + +.card .stars { + margin-top: auto; +} + +.box4 { + background-color: white; + width: 90%; + border-radius: 20px 20px 20px 20px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} + +.box4 img { + width: 100%; + height: 100px; + border-radius: 20px 20px 0 0; + object-fit: cover; + padding: 5px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} +.box4.card-content { + border-radius: 0 0 20px 20px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} + +.box4:hover { + transform: scale(1.02); + box-shadow: 0 0 8px var(--blue); + cursor: pointer; + background-color: var(--light-grey); +} + +.card .stars { + margin-top: auto; +} + +.box5 img { + width: 100%; + height: 100px; + border-radius: 20px 20px 0 0; + padding: 5px; + object-fit: cover; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} + +.box5.card-content { + border-radius: 0 0 20px 20px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} +.box5 { + background-color: white; + width: 90%; + border-radius: 20px 20px 20px 20px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} +.box5:hover { + transform: scale(1.02); + box-shadow: 0 0 8px var(--blue); + cursor: pointer; + background-color: var(--light-grey); +} + +.card .stars { + margin-top: auto; +} + +.box6 { + background-color: white; + width: 90%; + border-radius: 20px 20px 20px 20px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} + +.box6 img { + width: 100%; + height: 100px; + border-radius: 20px 20px 0 0; + padding: 5px; + object-fit: cover; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} +.box6.card-content { + border-radius: 0 0 20px 20px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} +.box6:hover { + transform: scale(1.02); + box-shadow: 0 0 8px var(--blue); + cursor: pointer; + background-color: var(--light-grey); +} +.card .stars { + margin-top: auto; +} + +.card-rating { color: #0065fc; + margin-left: 10px; + padding-bottom: 10px; +} +h3.card-title { + margin: 0; +} + +p.card-subtitle { + margin-top: 5px; + margin-bottom: 5px; +} + +.card-rating { + color: #0065fc; + margin-left: 10px; + padding-bottom: 10px; +} + +p.card-subtitle { + margin-top: 5px; + margin-bottom: 5px; + margin-left: 10px; +} +/****Activités à Marseille**/ + +div.gallery { + width: 100%; + height: 250px; + border-radius: 12px 12px 12px 12px; } + +div.gallery img { + width: 100%; + height: 200px; + object-fit: cover; + border-radius: 12px 12px 0px 0px; +} + +div.desc { + width: 100%; + padding-top: 10px; + padding-bottom: 10px; + padding-left: 0; + padding-right: 0; +} +.desc1 { + padding-left: 0; + padding-top: 10px; + padding-bottom: 10px; +} + +.desc2 { + padding-left: 0; + padding-top: 10px; + padding-bottom: 10px; +} + +h6 { + font-size: 15px; + margin-bottom: 10px; + padding-left: 5px; +} + +h4 { + font-size: 20px; + padding-left: 20px; + padding-top: 20px; + padding-bottom: 20px; +} + +.afficher { + margin-top: 80px; + font-size: 20px; + font-weight: bold; +} + +.responsive { + padding: 0 6px; + float: left; + width: 24.99999%; +} + +/*------------------------------------------------------ + Medium devices (tablets, less/equal than 1024px) + -------------------------------------------------------*/ + +@media (max-width: 1024px) { + .hebergements-and-populaires { + flex-direction: column; + } + .hebergements { + width: 100%; + } + + .populaires { + width: 100%; + margin-top: 50px; + } + + .populaires-cards { + display: flex; + flex-direction: row; + justify-content: space-between; + } + + .populaires-cards a { + width: 30%; + } + .populaires-cards .card-title { + font-size: 14px; + } + + .populaires-cards .card-subtitle { + font-size: 13px; + } + .main-container { + padding: 0px; + width: 100%; + } + h4 { + font-size: 15px; + padding-left: 25px; + padding-top: 20px; + padding-bottom: 20px; + } + h6 { + font-size: 11px; + font-weight: bold; + padding-left: 15px; + } + .afficher { + margin-top: 20px; + font-size: 15px; + font-weight: bold; + } +} +/*--------------------------------------------------- + Medium devices (tablets, less/equal than 767,98px) + -------------------------------------------------------*/ +@media (max-width: 767.98px) { + .main-container { + padding: 0; + } + + .populaires-cards a { + width: 98%; + } + + section.hebergements { + width: 100%; + margin-left: 10px; + } + .container-grid { + display: flex; + flex-direction: column; + column-gap: normal; + } + + .box1, + .box2, + .box3, + .box4, + .box5, + .box6 { + width: 100%; + margin-bottom: 20px; + margin-top: 0px; + } + .hebergements-and-populaires { + display: flex; + flex-direction: column-reverse; + } + .populaires-cards { + width: 100%; + } + + section { + display: flex; + flex-direction: column; + } + + article.card { + width: 100%; + } + .populaires-cards { + display: flex; + flex-direction: column; + } + section.hebergements { + background-color: white; + } + + h4 { + font-size: 15px; + padding-left: 26px; + padding-top: 20px; + padding-bottom: 20px; + } + h6 { + font-size: 15px; + font-weight: bold; + padding-left: 15px; + } + .responsive { + width: 100%; + margin-left: 10px; + margin-right: 10px; + margin-bottom: 20px; + } + + .section-title { + padding-left: 20px; + font-size: 20px; + } + .afficher { + padding-top: 20px; + font-size: 20px; + font-weight: bold; + } +} +/***********************/ +/******Footer***********/ +.footer { + display: flex; + justify-content: space-between; + width: 100%; + height: 200px; + gap: 10%; + margin-top: 300px; + background-color: #f2f2f2; +} + +.footer-left { + margin-top: 20px; + padding-left: 20px; + line-height: 20px; +} +.footer-midle { + margin-top: 20px; + line-height: 20px; +} +.footer-right { + margin-right: 400px; + padding-left: 20px; + margin-top: 20px; + line-height: 20px; +} +p { + font-size: 18px; + margin-bottom: 10px; +} + +/*--------------------------------------------------- + Medium devices (tablets, less/equal than 1024px) + ---------------------------------------------------*/ + +@media (max-width: 1024px) { + .footer { + height: auto; + gap: 50px; + } + .footer { + width: 100%; + height: 170px; + gap: 20px; + padding-bottom: 50px; + background-color: #f2f2f2; + } + .footer-left { + width: 288px; + height: 163px; + gap: 20px; + } + .footer-midle { + margin-top: 20px; + } + .footer-right { + margin-right: 20px; + padding-left: 20px; + margin-top: 20px; + } + p { + font-size: 18px; + margin-bottom: 10px; + } + /*-------------------------------------------------- + Medium devices (tablets, less/equal than 767,98px) + ----------------------------------------------------*/ + @media (max-width: 767.98px) { + .footer { + display: flex; + flex-direction: column; + align-items: self-start; + height: 399px; + width: 100%; + margin-top: 20px; + gap: 30px; + } + .footer-left.p { + font-size: 30px; + margin-top: 20px; + line-height: 50px; + } + + .footer-midle.p { + font-size: 30px; + margin-left: 20px; + margin-top: 20px; + } + .footer-right.p { + font-size: 30px; + margin-left: 20px; + + margin-top: 20px; + } + .footer-right { + margin: 0px; + } + .footer-midle { + margin-left: 20px; + } + P { + font-size: 18px; + margin-bottom: 10px; + } + .afficher { + margin-top: 15px; + font-size: 15px; + font-weight: bold; + } + } +} + +/**********************/ diff --git a/index.html b/index.html index 1f72b55b..05e43926 100644 --- a/index.html +++ b/index.html @@ -28,7 +28,7 @@
@@ -80,7 +80,7 @@

Filtres

-
+

Hébergements à Marseille

@@ -422,7 +422,7 @@

Hôtel Bleu et Blanc

-

Activités à Marseille

+

Activités à Marseille

Date: Thu, 26 Oct 2023 17:47:09 +0200 Subject: [PATCH 76/94] modification css Signed-off-by: LILIANLEILA09 --- css/header.css | 18 +- css/main.css | 5 +- css/style.css | 959 ++++++++++++++++++++++++++++++++++++++++++++++++- index.html | 6 +- 4 files changed, 956 insertions(+), 32 deletions(-) diff --git a/css/header.css b/css/header.css index 013331c8..1379589a 100644 --- a/css/header.css +++ b/css/header.css @@ -103,10 +103,12 @@ form button:hover { */ .filters { - display: inline-flex; + padding: 10px; + display: flex; padding-top: 18px; flex-flow: row wrap; align-items: center; + justify-content: center; gap: 15px; } @@ -129,7 +131,7 @@ form button:hover { } .btn-filter:hover { - background-color:#deebff; + background-color: #deebff; box-shadow: 0 0 8px var(--blue); } @@ -138,9 +140,9 @@ form button:hover { border-radius: 30px; background-color: white; } -.btn-filter .fa-solid:hover{ - background-color: #deebff; - box-shadow: 0 0 8px var(--blue); +.btn-filter .fa-solid:hover { + background-color: #deebff; + box-shadow: 0 0 8px var(--blue); } .btn-filter .fa-child-reaching { @@ -148,7 +150,6 @@ form button:hover { margin-right: 10px; color: #0065fc; background-color: white; - } .btn-filter .fa-heart, @@ -247,9 +248,10 @@ form button:hover { } .filters { + border: 1px solid red; display: flex; - flex-wrap: wrap; - width: 100%; + margin: auto; + width: 90%; } .btn-search { padding: 0px 0px 0px 60px; diff --git a/css/main.css b/css/main.css index a785eb1f..217a1738 100644 --- a/css/main.css +++ b/css/main.css @@ -2,6 +2,7 @@ width: 100%; max-width: 1440px; padding: 0 50px; + overflow-x: hidden; } .accessibility-label { position: absolute; @@ -345,10 +346,6 @@ div.gallery { border-radius: 12px 12px 12px 12px; } -div.gallery:hover { - border: 1px solid #39ff14; -} - div.gallery img { width: 100%; height: 200px; diff --git a/css/style.css b/css/style.css index c8285446..c16c3410 100644 --- a/css/style.css +++ b/css/style.css @@ -1,7 +1,7 @@ @import url("https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800;900&display=swap"); -@import url(header.css); +/* @import url(header.css); @import url(main.css); -@import url(footer.css); +@import url(footer.css); */ * { font-family: "Raleway", sans-serif; @@ -15,33 +15,958 @@ --main-bg-color: #f2f2f2; --filter-bg-color: #deebff; --light-blue: #deebff; - -blue: #0065fc; - --light-blue: + --blue: #0065fc; --light-grey: #f2f2f2; --white: white; - --green-fluo: #39ff14; } - + html { + display: flex; + width: 100%; + height: 100%; + flex-direction: row; + justify-content: center; +} +body { + display: flex; + justify-content: center; + width: 100%; +} + +.euro { + font-weight: 700; +} + +.neutral-star { + color: var(--main-bg-color); +} +.line { + color: #0065fc; +} + +/*******header********/ +header { + display: flex; + justify-content: space-between; + height: 50px; +} + +#logo { + display: flex; + margin-right: auto; + align-items: center; +} +header #logo img { + width: 50px; +} + +header nav ul { + display: flex; + justify-content: space-between; + gap: 30px; + list-style-type: none; +} +header nav ul li { + padding-top: 20px; + padding-bottom: 10px; + border-top: 2px solid transparent; +} +header nav ul li:hover { + border-color: #0065fc; + color: #256dd7; +} +h1 { + font-size: 15px; + margin-bottom: 10px; + padding-left: 10px; +} +.titre-1 { + display: flex; + padding-left: 20px; +} + +form { + display: inline-block; + width: 50%; +} + +form i { + background-color: rgb(247, 243, 243); + padding: 12px 12px; + border-radius: 12px 0 0 12px; + width: 50px; + padding-left: 20px; +} +form input { + border: 1px solid transparent; + font-size: 15px; + font-weight: bold; + padding: 8px 0 7px 10px; + margin-left: -5px; + width: 146px; + height: 39px; +} +input#search { + width: 160px; + padding-left: 25px; +} + +form input:hover { + background-color: var(--light-blue); +} + +form input::placeholder { + color: black; +} + +form button { + border-radius: 0 10px 10px 0; + background-color: #0065fc; + color: var(--white); + font-weight: bold; + font-size: 15px; + padding: 10px 10px 10px 10px; + cursor: pointer; + border: none; + margin-left: -5px; +} + +form button:hover { + box-shadow: 1px 1px 10px grey; +} + +.fa-solid.fa-magnifying-glass { + display: none; +} +.btn-search { + display: flex; + justify-content: flex-start; + width: 80%; +} +/* + ^---------------------- + * FILTERS + ^---------------------- + */ + +.filters { + padding: 10px; + display: flex; + padding-top: 18px; + flex-flow: row wrap; + align-items: center; + justify-content: center; + gap: 15px; +} + +.filters h3 { + margin-right: 20px; + padding-left: 20px; +} + +.btn-filter p { + margin: 0; + padding-right: 20px; + cursor: pointer; +} + +.btn-filter { + font-weight: bold; + border: 1px solid lightgrey; + border-radius: 30px; + border-left: none; +} + +.btn-filter:hover { + background-color: #deebff; + box-shadow: 0 0 8px var(--blue); +} + +.btn-filter .fa-solid { + background-color: var(--light-blue); + border-radius: 30px; + background-color: white; +} +.btn-filter .fa-solid:hover { + background-color: #deebff; + box-shadow: 0 0 8px var(--blue); +} + +.btn-filter .fa-child-reaching { + padding: 14px 17px 14px 17px; + margin-right: 10px; + color: #0065fc; + background-color: white; +} + +.btn-filter .fa-heart, +.fa-fire, +.fa-money-bill-wave { + padding: 14px 14px 14px 14px; + margin-right: 10px; + color: #0065fc; + background-color: white; +} + +/* + * barre d'information + **/ +#icon-info { + display: flex; + align-items: center; + margin-bottom: 20px; +} +.fa-solid.fa-info { + border: 1.5px solid var(--light-grey); + border-radius: 50%; + color: #0065fc; + height: 25px; + width: 25px; + font-size: 20px; + display: flex; + align-items: center; + justify-content: center; + margin-right: 5px; + background-color: var(--light-grey); +} + +/*------------------------------------------------- + Medium devices (tablets, less/equal than 1024px) + -----------------------------------------------------*/ + +@media (max-width: 1024px) { + .filters { display: flex; - width: 100%; - height: 100%; - flex-direction: row; - justify-content: center; + flex-wrap: wrap; + justify-content: flex-start; + margin-top: 20px; + } + .fa-solid.fa-magnifying-glass { + display: none; + } +} +/*------------------------------------------------------------- + Medium devices (tablets, less/equal than 768px) + -----------------------------------------------------------*/ +@media (max-width: 768px) { + .titre-Filtres { + padding-right: 100%; } - body { +} +/*------------------------------------------------------- + Medium devices (tablets, less/equal than 767,98px) + ---------------------------------------------------------*/ +@media (max-width: 767.98px) { + .fa-solid.fa-magnifying-glass { + display: flex; + background-color: var(--main-color); + color: var(--main-bg-color); + border-radius: 0 10px 10px 0; + } + form button { + display: none; + cursor: pointer; + } + #logo { + margin-left: 130px; + margin-top: 20px; + } + header { + display: flex; + flex-direction: column; + } + header nav ul li { + border-top: none; + padding-right: 20px; + border-bottom: 2px solid transparent; + margin: 0px 20px 0px 20px; + } + + header nav ul li:hover { + border-color: #256dd7; + } + .btn-search { display: flex; justify-content: center; width: 100%; + padding-left: 100%; + margin-left: 20px; + padding-right: 20px; + } + + .filters { + border: 1px solid red; + display: flex; + margin: auto; + width: 90%; + } + .btn-search { + padding: 0px 0px 0px 60px; + } + input#search { + width: 180px; + padding-left: 25px; + } + h1 { + font-size: 26px; + margin-top: 40px; + padding-left: 20px; + } + header #logo img { + width: 50px; } - -.euro { - font-weight: 700; } -.neutral-star { - color: var(--main-bg-color); +/********************** +/******Main*************/ +.main-container { + width: 100%; + max-width: 1440px; + padding: 0 50px; + overflow-x: hidden; } -.line { +.accessibility-label { + position: absolute; + left: -999px; +} +.section-title { + margin: 0; + font-size: 22px; +} +a { + color: inherit; + text-decoration: none; +} +p { + margin-bottom: 10px; +} + +main, +header, +footer { + max-width: 1400px; + margin: 0 auto; + padding: 0 15px; +} + +.main { + margin-top: 30px; +} + +.card { + background-color: white; + border-radius: 20px; + padding: 5px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} + +.card img { + object-fit: cover; +} + +.card-title { + font-size: 15px; + padding-left: 10px; +} +.hebergements-and-populaires { + 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; +} + +/****** Hebergements ***********/ +.hebergements { + width: 65%; +} + +/****** Populaires ***********/ +.populaires { + width: 32%; +} + +.populaires-title { + display: flex; + justify-content: space-between; + align-items: center; +} + +.populaires-cards .card { + display: flex; + margin-top: 33px; +} + +.populaires-cards img { + width: 33%; + height: 136px; + object-fit: cover; + 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; + color: #0065fc; +} + +.card:hover { + transform: scale(1.02); + box-shadow: 0 0 8px var(--blue); + cursor: pointer; + background-color: var(--light-grey); +} +.card .stars { + margin-top: auto; +} +/****Hebergements à Marseille**/ + +.container-grid { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + justify-content: center; +} + +.box1 { + margin-top: 30px; + margin-bottom: 30px; + background-color: white; + width: 90%; + border-radius: 20px 20px 20px 20px; + filter: drop-shadow(3px 3px 15px rgb(226, 219, 219)); +} + +.box1 img { + width: 100%; + height: 100px; + border-radius: 20px 20px 0 0; + object-fit: cover; + padding: 5px; +} +.box1 .card-content { + border-radius: 0 0 20px 20px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} +.box1:hover { + transform: scale(1.02); + box-shadow: 0 0 8px var(--blue); + cursor: pointer; + background-color: var(--light-grey); +} +.card .stars { + margin-top: auto; +} + +.box2 { + margin-top: 30px; + background-color: white; + width: 90%; + border-radius: 20px 20px 20px 20px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} + +.box2 img { + width: 100%; + height: 100px; + border-radius: 20px 20px 0 0; + object-fit: cover; + padding: 5px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} + +.box2 .card-content { + border-radius: 0 0 20px 20px; + + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} +.box2:hover { + transform: scale(1.02); + box-shadow: 0 0 8px var(--blue); + cursor: pointer; + background-color: var(--light-grey); +} + +.card .stars { + margin-top: auto; +} +.box3 { + margin-top: 30px; + background-color: white; + width: 90%; + border-radius: 20px 20px 20px 20px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} + +.box3 img { + width: 100%; + height: 100px; + border-radius: 20px 20px 0 0; + object-fit: cover; + padding: 5px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} + +.box3.card-content { + border-radius: 0 0 20px 20px; + + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} +.box3:hover { + transform: scale(1.02); + box-shadow: 0 0 8px var(--blue); + cursor: pointer; + background-color: var(--light-grey); +} + +.card .stars { + margin-top: auto; +} + +.box4 { + background-color: white; + width: 90%; + border-radius: 20px 20px 20px 20px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} + +.box4 img { + width: 100%; + height: 100px; + border-radius: 20px 20px 0 0; + object-fit: cover; + padding: 5px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} +.box4.card-content { + border-radius: 0 0 20px 20px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} + +.box4:hover { + transform: scale(1.02); + box-shadow: 0 0 8px var(--blue); + cursor: pointer; + background-color: var(--light-grey); +} + +.card .stars { + margin-top: auto; +} + +.box5 img { + width: 100%; + height: 100px; + border-radius: 20px 20px 0 0; + padding: 5px; + object-fit: cover; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} + +.box5.card-content { + border-radius: 0 0 20px 20px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} +.box5 { + background-color: white; + width: 90%; + border-radius: 20px 20px 20px 20px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} +.box5:hover { + transform: scale(1.02); + box-shadow: 0 0 8px var(--blue); + cursor: pointer; + background-color: var(--light-grey); +} + +.card .stars { + margin-top: auto; +} + +.box6 { + background-color: white; + width: 90%; + border-radius: 20px 20px 20px 20px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} + +.box6 img { + width: 100%; + height: 100px; + border-radius: 20px 20px 0 0; + padding: 5px; + object-fit: cover; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} +.box6.card-content { + border-radius: 0 0 20px 20px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} +.box6:hover { + transform: scale(1.02); + box-shadow: 0 0 8px var(--blue); + cursor: pointer; + background-color: var(--light-grey); +} +.card .stars { + margin-top: auto; +} + +.card-rating { color: #0065fc; + margin-left: 10px; + padding-bottom: 10px; +} +h3.card-title { + margin: 0; +} + +p.card-subtitle { + margin-top: 5px; + margin-bottom: 5px; +} + +.card-rating { + color: #0065fc; + margin-left: 10px; + padding-bottom: 10px; +} + +p.card-subtitle { + margin-top: 5px; + margin-bottom: 5px; + margin-left: 10px; +} +/****Activités à Marseille**/ + +div.gallery { + width: 100%; + height: 250px; + border-radius: 12px 12px 12px 12px; } + +div.gallery img { + width: 100%; + height: 200px; + object-fit: cover; + border-radius: 12px 12px 0px 0px; +} + +div.desc { + width: 100%; + padding-top: 10px; + padding-bottom: 10px; + padding-left: 0; + padding-right: 0; +} +.desc1 { + padding-left: 0; + padding-top: 10px; + padding-bottom: 10px; +} + +.desc2 { + padding-left: 0; + padding-top: 10px; + padding-bottom: 10px; +} + +h6 { + font-size: 15px; + margin-bottom: 10px; + padding-left: 5px; +} + +h4 { + font-size: 20px; + padding-left: 20px; + padding-top: 20px; + padding-bottom: 20px; +} + +.afficher { + margin-top: 80px; + font-size: 20px; + font-weight: bold; +} + +.responsive { + padding: 0 6px; + float: left; + width: 24.99999%; +} + +/*------------------------------------------------------ + Medium devices (tablets, less/equal than 1024px) + -------------------------------------------------------*/ + +@media (max-width: 1024px) { + .hebergements-and-populaires { + flex-direction: column; + } + .hebergements { + width: 100%; + } + + .populaires { + width: 100%; + margin-top: 50px; + } + + .populaires-cards { + display: flex; + flex-direction: row; + justify-content: space-between; + } + + .populaires-cards a { + width: 30%; + } + .populaires-cards .card-title { + font-size: 14px; + } + + .populaires-cards .card-subtitle { + font-size: 13px; + } + .main-container { + padding: 0px; + width: 100%; + } + h4 { + font-size: 15px; + padding-left: 25px; + padding-top: 20px; + padding-bottom: 20px; + } + h6 { + font-size: 11px; + font-weight: bold; + padding-left: 15px; + } + .afficher { + margin-top: 20px; + font-size: 15px; + font-weight: bold; + } +} +/*--------------------------------------------------- + Medium devices (tablets, less/equal than 767,98px) + -------------------------------------------------------*/ +@media (max-width: 767.98px) { + .main-container { + padding: 0; + } + + .populaires-cards a { + width: 98%; + } + + section.hebergements { + width: 100%; + margin-left: 10px; + } + .container-grid { + display: flex; + flex-direction: column; + column-gap: normal; + } + + .box1, + .box2, + .box3, + .box4, + .box5, + .box6 { + width: 100%; + margin-bottom: 20px; + margin-top: 0px; + } + .hebergements-and-populaires { + display: flex; + flex-direction: column-reverse; + } + .populaires-cards { + width: 100%; + } + + section { + display: flex; + flex-direction: column; + } + + article.card { + width: 100%; + } + .populaires-cards { + display: flex; + flex-direction: column; + } + section.hebergements { + background-color: white; + } + + h4 { + font-size: 15px; + padding-left: 26px; + padding-top: 20px; + padding-bottom: 20px; + } + h6 { + font-size: 15px; + font-weight: bold; + padding-left: 15px; + } + .responsive { + width: 100%; + margin-left: 10px; + margin-right: 10px; + margin-bottom: 20px; + } + + .section-title { + padding-left: 20px; + font-size: 20px; + } + .afficher { + padding-top: 20px; + font-size: 20px; + font-weight: bold; + } +} +/***********************/ +/******Footer***********/ +.footer { + display: flex; + justify-content: space-between; + width: 100%; + height: 200px; + gap: 10%; + margin-top: 300px; + background-color: #f2f2f2; +} + +.footer-left { + margin-top: 20px; + padding-left: 20px; + line-height: 20px; +} +.footer-midle { + margin-top: 20px; + line-height: 20px; +} +.footer-right { + margin-right: 400px; + padding-left: 20px; + margin-top: 20px; + line-height: 20px; +} +p { + font-size: 18px; + margin-bottom: 10px; +} + +/*--------------------------------------------------- + Medium devices (tablets, less/equal than 1024px) + ---------------------------------------------------*/ + +@media (max-width: 1024px) { + .footer { + height: auto; + gap: 50px; + } + .footer { + width: 100%; + height: 170px; + gap: 20px; + padding-bottom: 50px; + background-color: #f2f2f2; + } + .footer-left { + width: 288px; + height: 163px; + gap: 20px; + } + .footer-midle { + margin-top: 20px; + } + .footer-right { + margin-right: 20px; + padding-left: 20px; + margin-top: 20px; + } + p { + font-size: 18px; + margin-bottom: 10px; + } + /*-------------------------------------------------- + Medium devices (tablets, less/equal than 767,98px) + ----------------------------------------------------*/ + @media (max-width: 767.98px) { + .footer { + display: flex; + flex-direction: column; + align-items: self-start; + height: 399px; + width: 100%; + margin-top: 20px; + gap: 30px; + } + .footer-left.p { + font-size: 30px; + margin-top: 20px; + line-height: 50px; + } + + .footer-midle.p { + font-size: 30px; + margin-left: 20px; + margin-top: 20px; + } + .footer-right.p { + font-size: 30px; + margin-left: 20px; + + margin-top: 20px; + } + .footer-right { + margin: 0px; + } + .footer-midle { + margin-left: 20px; + } + P { + font-size: 18px; + margin-bottom: 10px; + } + .afficher { + margin-top: 15px; + font-size: 15px; + font-weight: bold; + } + } +} + +/**********************/ diff --git a/index.html b/index.html index 1f72b55b..05e43926 100644 --- a/index.html +++ b/index.html @@ -28,7 +28,7 @@
@@ -80,7 +80,7 @@

Filtres

-
+

Hébergements à Marseille

@@ -422,7 +422,7 @@

Hôtel Bleu et Blanc

-

Activités à Marseille

+

Activités à Marseille

Date: Thu, 26 Oct 2023 18:09:32 +0200 Subject: [PATCH 77/94] modified css Signed-off-by: LILIANLEILA09 --- css/header.css | 271 ------------------------- css/main.css | 537 ------------------------------------------------- 2 files changed, 808 deletions(-) delete mode 100644 css/header.css delete mode 100644 css/main.css diff --git a/css/header.css b/css/header.css deleted file mode 100644 index 1379589a..00000000 --- a/css/header.css +++ /dev/null @@ -1,271 +0,0 @@ -header { - display: flex; - justify-content: space-between; - height: 50px; -} - -#logo { - display: flex; - margin-right: auto; - align-items: center; -} -header #logo img { - width: 50px; -} - -header nav ul { - display: flex; - justify-content: space-between; - gap: 30px; - list-style-type: none; -} -header nav ul li { - padding-top: 20px; - padding-bottom: 10px; - border-top: 2px solid transparent; -} -header nav ul li:hover { - border-color: #0065fc; - color: #256dd7; -} -h1 { - font-size: 15px; - margin-bottom: 10px; - padding-left: 10px; -} -.titre-1 { - display: flex; - padding-left: 20px; -} - -form { - display: inline-block; - width: 50%; -} - -form i { - background-color: rgb(247, 243, 243); - padding: 12px 12px; - border-radius: 12px 0 0 12px; - width: 50px; - padding-left: 20px; -} -form input { - border: 1px solid transparent; - font-size: 15px; - font-weight: bold; - padding: 8px 0 7px 10px; - margin-left: -5px; - width: 146px; - height: 39px; -} -input#search { - width: 160px; - padding-left: 25px; -} - -form input:hover { - background-color: var(--light-blue); -} - -form input::placeholder { - color: black; -} - -form button { - border-radius: 0 10px 10px 0; - background-color: #0065fc; - color: var(--white); - font-weight: bold; - font-size: 15px; - padding: 10px 10px 10px 10px; - cursor: pointer; - border: none; - margin-left: -5px; -} - -form button:hover { - box-shadow: 1px 1px 10px grey; -} - -.fa-solid.fa-magnifying-glass { - display: none; -} -.btn-search { - display: flex; - justify-content: flex-start; - width: 80%; -} -/* -^---------------------- -* FILTERS -^---------------------- -*/ - -.filters { - padding: 10px; - display: flex; - padding-top: 18px; - flex-flow: row wrap; - align-items: center; - justify-content: center; - gap: 15px; -} - -.filters h3 { - margin-right: 20px; - padding-left: 20px; -} - -.btn-filter p { - margin: 0; - padding-right: 20px; - cursor: pointer; -} - -.btn-filter { - font-weight: bold; - border: 1px solid lightgrey; - border-radius: 30px; - border-left: none; -} - -.btn-filter:hover { - background-color: #deebff; - box-shadow: 0 0 8px var(--blue); -} - -.btn-filter .fa-solid { - background-color: var(--light-blue); - border-radius: 30px; - background-color: white; -} -.btn-filter .fa-solid:hover { - background-color: #deebff; - box-shadow: 0 0 8px var(--blue); -} - -.btn-filter .fa-child-reaching { - padding: 14px 17px 14px 17px; - margin-right: 10px; - color: #0065fc; - background-color: white; -} - -.btn-filter .fa-heart, -.fa-fire, -.fa-money-bill-wave { - padding: 14px 14px 14px 14px; - margin-right: 10px; - color: #0065fc; - background-color: white; -} - -/* -* barre d'information -**/ -#icon-info { - display: flex; - align-items: center; - margin-bottom: 20px; -} -.fa-solid.fa-info { - border: 1.5px solid var(--light-grey); - border-radius: 50%; - color: #0065fc; - height: 25px; - width: 25px; - font-size: 20px; - display: flex; - align-items: center; - justify-content: center; - margin-right: 5px; - background-color: var(--light-grey); -} - -/*------------------------------------------------- - Medium devices (tablets, less/equal than 1024px) - -----------------------------------------------------*/ - -@media (max-width: 1024px) { - .filters { - display: flex; - flex-wrap: wrap; - justify-content: flex-start; - margin-top: 20px; - } - .fa-solid.fa-magnifying-glass { - display: none; - } -} -/*------------------------------------------------------------- - Medium devices (tablets, less/equal than 768px) - -----------------------------------------------------------*/ -@media (max-width: 768px) { - .titre-Filtres { - padding-right: 100%; - } -} -/*------------------------------------------------------- - Medium devices (tablets, less/equal than 767,98px) - ---------------------------------------------------------*/ -@media (max-width: 767.98px) { - .fa-solid.fa-magnifying-glass { - display: flex; - background-color: var(--main-color); - color: var(--main-bg-color); - border-radius: 0 10px 10px 0; - } - form button { - display: none; - cursor: pointer; - } - #logo { - margin-left: 130px; - margin-top: 20px; - } - header { - display: flex; - flex-direction: column; - } - header nav ul li { - border-top: none; - padding-right: 20px; - border-bottom: 2px solid transparent; - margin: 0px 20px 0px 20px; - } - - header nav ul li:hover { - border-color: #256dd7; - } - .btn-search { - display: flex; - justify-content: center; - width: 100%; - padding-left: 100%; - margin-left: 20px; - padding-right: 20px; - } - - .filters { - border: 1px solid red; - display: flex; - margin: auto; - width: 90%; - } - .btn-search { - padding: 0px 0px 0px 60px; - } - input#search { - width: 180px; - padding-left: 25px; - } - h1 { - font-size: 26px; - margin-top: 40px; - padding-left: 20px; - } - header #logo img { - width: 50px; - } -} diff --git a/css/main.css b/css/main.css deleted file mode 100644 index 217a1738..00000000 --- a/css/main.css +++ /dev/null @@ -1,537 +0,0 @@ -.main-container { - width: 100%; - max-width: 1440px; - padding: 0 50px; - overflow-x: hidden; -} -.accessibility-label { - position: absolute; - left: -999px; -} -.section-title { - margin: 0; - font-size: 22px; -} -a { - color: inherit; - text-decoration: none; -} -p { - margin-bottom: 10px; -} - -main, -header, -footer { - max-width: 1400px; - margin: 0 auto; - padding: 0 15px; -} - -.main { - margin-top: 30px; -} - -.card { - background-color: white; - border-radius: 20px; - padding: 5px; - filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); -} - -.card img { - object-fit: cover; -} - -.card-title { - font-size: 15px; - padding-left: 10px; -} -.hebergements-and-populaires { - 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; -} - -/****** Hebergements ***********/ -.hebergements { - width: 65%; -} - -/****** Populaires ***********/ -.populaires { - width: 32%; -} - -.populaires-title { - display: flex; - justify-content: space-between; - align-items: center; -} - -.populaires-cards .card { - display: flex; - margin-top: 33px; -} - -.populaires-cards img { - width: 33%; - height: 136px; - object-fit: cover; - 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; - color: #0065fc; -} - -.card:hover { - transform: scale(1.02); - box-shadow: 0 0 8px var(--blue); - cursor: pointer; - background-color: var(--light-grey); -} -.card .stars { - margin-top: auto; -} -/****Hebergements à Marseille**/ - -.container-grid { - display: grid; - grid-template-columns: 1fr 1fr 1fr; - justify-content: center; -} - -.box1 { - margin-top: 30px; - margin-bottom: 30px; - background-color: white; - width: 90%; - border-radius: 20px 20px 20px 20px; - filter: drop-shadow(3px 3px 15px rgb(226, 219, 219)); -} - -.box1 img { - width: 100%; - height: 100px; - border-radius: 20px 20px 0 0; - object-fit: cover; - padding: 5px; -} -.box1 .card-content { - border-radius: 0 0 20px 20px; - filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); -} -.box1:hover { - transform: scale(1.02); - box-shadow: 0 0 8px var(--blue); - cursor: pointer; - background-color: var(--light-grey); -} -.card .stars { - margin-top: auto; -} - -.box2 { - margin-top: 30px; - background-color: white; - width: 90%; - border-radius: 20px 20px 20px 20px; - filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); -} - -.box2 img { - width: 100%; - height: 100px; - border-radius: 20px 20px 0 0; - object-fit: cover; - padding: 5px; - filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); -} - -.box2 .card-content { - border-radius: 0 0 20px 20px; - - filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); -} -.box2:hover { - transform: scale(1.02); - box-shadow: 0 0 8px var(--blue); - cursor: pointer; - background-color: var(--light-grey); -} - -.card .stars { - margin-top: auto; -} -.box3 { - margin-top: 30px; - background-color: white; - width: 90%; - border-radius: 20px 20px 20px 20px; - filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); -} - -.box3 img { - width: 100%; - height: 100px; - border-radius: 20px 20px 0 0; - object-fit: cover; - padding: 5px; - filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); -} - -.box3.card-content { - border-radius: 0 0 20px 20px; - - filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); -} -.box3:hover { - transform: scale(1.02); - box-shadow: 0 0 8px var(--blue); - cursor: pointer; - background-color: var(--light-grey); -} - -.card .stars { - margin-top: auto; -} - -.box4 { - background-color: white; - width: 90%; - border-radius: 20px 20px 20px 20px; - filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); -} - -.box4 img { - width: 100%; - height: 100px; - border-radius: 20px 20px 0 0; - object-fit: cover; - padding: 5px; - filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); -} -.box4.card-content { - border-radius: 0 0 20px 20px; - filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); -} - -.box4:hover { - transform: scale(1.02); - box-shadow: 0 0 8px var(--blue); - cursor: pointer; - background-color: var(--light-grey); -} - -.card .stars { - margin-top: auto; -} - -.box5 img { - width: 100%; - height: 100px; - border-radius: 20px 20px 0 0; - padding: 5px; - object-fit: cover; - filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); -} - -.box5.card-content { - border-radius: 0 0 20px 20px; - filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); -} -.box5 { - background-color: white; - width: 90%; - border-radius: 20px 20px 20px 20px; - filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); -} -.box5:hover { - transform: scale(1.02); - box-shadow: 0 0 8px var(--blue); - cursor: pointer; - background-color: var(--light-grey); -} - -.card .stars { - margin-top: auto; -} - -.box6 { - background-color: white; - width: 90%; - border-radius: 20px 20px 20px 20px; - filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); -} - -.box6 img { - width: 100%; - height: 100px; - border-radius: 20px 20px 0 0; - padding: 5px; - object-fit: cover; - filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); -} -.box6.card-content { - border-radius: 0 0 20px 20px; - filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); -} -.box6:hover { - transform: scale(1.02); - box-shadow: 0 0 8px var(--blue); - cursor: pointer; - background-color: var(--light-grey); -} -.card .stars { - margin-top: auto; -} - -.card-rating { - color: #0065fc; - margin-left: 10px; - padding-bottom: 10px; -} -h3.card-title { - margin: 0; -} - -p.card-subtitle { - margin-top: 5px; - margin-bottom: 5px; -} - -.card-rating { - color: #0065fc; - margin-left: 10px; - padding-bottom: 10px; -} - -p.card-subtitle { - margin-top: 5px; - margin-bottom: 5px; - margin-left: 10px; -} -/****Activités à Marseille**/ - -div.gallery { - width: 100%; - height: 250px; - border-radius: 12px 12px 12px 12px; -} - -div.gallery img { - width: 100%; - height: 200px; - object-fit: cover; - border-radius: 12px 12px 0px 0px; -} - -div.desc { - width: 100%; - padding-top: 10px; - padding-bottom: 10px; - padding-left: 0; - padding-right: 0; -} -.desc1 { - padding-left: 0; - padding-top: 10px; - padding-bottom: 10px; -} - -.desc2 { - padding-left: 0; - padding-top: 10px; - padding-bottom: 10px; -} - -h6 { - font-size: 15px; - margin-bottom: 10px; - padding-left: 5px; -} - -h4 { - font-size: 20px; - padding-left: 20px; - padding-top: 20px; - padding-bottom: 20px; -} - -.afficher { - margin-top: 80px; - font-size: 20px; - font-weight: bold; -} - -.responsive { - padding: 0 6px; - float: left; - width: 24.99999%; -} - -/*------------------------------------------------------ - Medium devices (tablets, less/equal than 1024px) - -------------------------------------------------------*/ - -@media (max-width: 1024px) { - .hebergements-and-populaires { - flex-direction: column; - } - .hebergements { - width: 100%; - } - - .populaires { - width: 100%; - margin-top: 50px; - } - - .populaires-cards { - display: flex; - flex-direction: row; - justify-content: space-between; - } - - .populaires-cards a { - width: 30%; - } - .populaires-cards .card-title { - font-size: 14px; - } - - .populaires-cards .card-subtitle { - font-size: 13px; - } - .main-container { - padding: 0px; - width: 100%; - } - h4 { - font-size: 15px; - padding-left: 25px; - padding-top: 20px; - padding-bottom: 20px; - } - h6 { - font-size: 11px; - font-weight: bold; - padding-left: 15px; - } - .afficher { - margin-top: 20px; - font-size: 15px; - font-weight: bold; - } -} -/*--------------------------------------------------- - Medium devices (tablets, less/equal than 767,98px) - -------------------------------------------------------*/ -@media (max-width: 767.98px) { - .main-container { - padding: 0; - } - - .populaires-cards a { - width: 98%; - } - - section.hebergements { - width: 100%; - margin-left: 10px; - } - .container-grid { - display: flex; - flex-direction: column; - column-gap: normal; - } - - .box1, - .box2, - .box3, - .box4, - .box5, - .box6 { - width: 100%; - margin-bottom: 20px; - margin-top: 0px; - } - .hebergements-and-populaires { - display: flex; - flex-direction: column-reverse; - } - .populaires-cards { - width: 100%; - } - - section { - display: flex; - flex-direction: column; - } - - article.card { - width: 100%; - } - .populaires-cards { - display: flex; - flex-direction: column; - } - section.hebergements { - background-color: white; - } - - h4 { - font-size: 15px; - padding-left: 26px; - padding-top: 20px; - padding-bottom: 20px; - } - h6 { - font-size: 15px; - font-weight: bold; - padding-left: 15px; - } - .responsive { - width: 100%; - margin-left: 10px; - margin-right: 10px; - margin-bottom: 20px; - } - - .section-title { - padding-left: 20px; - font-size: 20px; - } - .afficher { - padding-top: 20px; - font-size: 20px; - font-weight: bold; - } -} From 0a665be336238564c965648746508f5ce5ba1811 Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Thu, 26 Oct 2023 18:28:53 +0200 Subject: [PATCH 78/94] modified css Signed-off-by: LILIANLEILA09 --- css/style.css | 5 ----- 1 file changed, 5 deletions(-) diff --git a/css/style.css b/css/style.css index e35423c4..fa9e080b 100644 --- a/css/style.css +++ b/css/style.css @@ -35,11 +35,6 @@ body { .euro { font-weight: 700; -<<<<<<< HEAD -======= -<<<<<<< HEAD ->>>>>>> 41b7057306061d1c3e5e9967efc9a778cc74bb1a -} .neutral-star { color: var(--main-bg-color); From 7f083fe864c119d6f9ede8ef8d7a740fa25831ad Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Thu, 26 Oct 2023 18:30:14 +0200 Subject: [PATCH 79/94] Modified css Signed-off-by: LILIANLEILA09 --- css/style.css | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/css/style.css b/css/style.css index fa9e080b..80f02c38 100644 --- a/css/style.css +++ b/css/style.css @@ -291,7 +291,7 @@ form button:hover { padding-left: 100%; margin-left: 20px; padding-right: 20px; -<<<<<<< HEAD + } .filters { @@ -339,10 +339,7 @@ form button:hover { header #logo img { width: 50px; } -======= ->>>>>>> 52c1f9ebab07bac2f4c54263dd294481e49ac010 ->>>>>>> 41b7057306061d1c3e5e9967efc9a778cc74bb1a -} + /********************** /******Main*************/ From 08fea4d0c9af1f18a887f6d4d67fa82704426757 Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Thu, 26 Oct 2023 18:31:01 +0200 Subject: [PATCH 80/94] modified css Signed-off-by: LILIANLEILA09 --- css/style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index 80f02c38..bfd100e3 100644 --- a/css/style.css +++ b/css/style.css @@ -339,7 +339,7 @@ form button:hover { header #logo img { width: 50px; } - + /********************** /******Main*************/ @@ -992,5 +992,5 @@ p { } } } - +} /**********************/ From f382680f3137eeaf84dbd33b21f28005dda14e28 Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Thu, 26 Oct 2023 18:32:42 +0200 Subject: [PATCH 81/94] Modified css Signed-off-by: LILIANLEILA09 --- css/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index bfd100e3..712e0a7c 100644 --- a/css/style.css +++ b/css/style.css @@ -315,7 +315,7 @@ form button:hover { header #logo img { width: 50px; } -======= + } .filters { From 3a00d60183582d7ab9b97e6f30fcae6dcf0ffe67 Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Thu, 26 Oct 2023 18:39:33 +0200 Subject: [PATCH 82/94] modified css Signed-off-by: LILIANLEILA09 --- css/style.css | 30 +++--------------------------- 1 file changed, 3 insertions(+), 27 deletions(-) diff --git a/css/style.css b/css/style.css index 712e0a7c..c16c3410 100644 --- a/css/style.css +++ b/css/style.css @@ -35,6 +35,7 @@ body { .euro { font-weight: 700; +} .neutral-star { color: var(--main-bg-color); @@ -291,31 +292,6 @@ form button:hover { padding-left: 100%; margin-left: 20px; padding-right: 20px; - - } - - .filters { - border: 1px solid red; - display: flex; - margin: auto; - width: 90%; - } - .btn-search { - padding: 0px 0px 0px 60px; - } - input#search { - width: 180px; - padding-left: 25px; - } - h1 { - font-size: 26px; - margin-top: 40px; - padding-left: 20px; - } - header #logo img { - width: 50px; - } - } .filters { @@ -339,7 +315,7 @@ form button:hover { header #logo img { width: 50px; } - +} /********************** /******Main*************/ @@ -992,5 +968,5 @@ p { } } } -} + /**********************/ From d39a19b3e342bb21756c7c27a26e08e3fbd6faa5 Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Thu, 26 Oct 2023 20:00:55 +0200 Subject: [PATCH 83/94] modified css Signed-off-by: LILIANLEILA09 --- css/style.css | 29 +++++++++++++++++------------ 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/css/style.css b/css/style.css index c16c3410..f84a7462 100644 --- a/css/style.css +++ b/css/style.css @@ -55,6 +55,8 @@ header { display: flex; margin-right: auto; align-items: center; + padding-left: 20px; + } header #logo img { width: 50px; @@ -63,8 +65,10 @@ header #logo img { header nav ul { display: flex; justify-content: space-between; + padding-right: 30px; gap: 30px; list-style-type: none; + } header nav ul li { padding-top: 20px; @@ -78,16 +82,17 @@ header nav ul li:hover { h1 { font-size: 15px; margin-bottom: 10px; - padding-left: 10px; + padding-left: 30px; } .titre-1 { display: flex; - padding-left: 20px; + padding-left: 30px; } form { display: inline-block; - width: 50%; + width: 100%; + padding-left: 20px; } form i { @@ -150,18 +155,20 @@ form button:hover { */ .filters { - padding: 10px; + padding-left: 20px; display: flex; + width: 900px; padding-top: 18px; flex-flow: row wrap; align-items: center; justify-content: center; - gap: 15px; + gap: 20px; + } .filters h3 { margin-right: 20px; - padding-left: 20px; + padding-right:20px; } .btn-filter p { @@ -214,7 +221,8 @@ form button:hover { #icon-info { display: flex; align-items: center; - margin-bottom: 20px; + margin-bottom: 30px; + padding-left: 20px; } .fa-solid.fa-info { border: 1.5px solid var(--light-grey); @@ -267,10 +275,7 @@ form button:hover { display: none; cursor: pointer; } - #logo { - margin-left: 130px; - margin-top: 20px; - } + header { display: flex; flex-direction: column; @@ -292,6 +297,7 @@ form button:hover { padding-left: 100%; margin-left: 20px; padding-right: 20px; + } .filters { @@ -498,7 +504,6 @@ footer { .box2 .card-content { border-radius: 0 0 20px 20px; - filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); } .box2:hover { From 92c0be3e9972f0fbc0bbdb6599e8ed942cfad1a0 Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Fri, 27 Oct 2023 23:40:10 +0200 Subject: [PATCH 84/94] Modified style.css Signed-off-by: LILIANLEILA09 --- css/style.css | 28 ++++++++++++++++++++-------- index.html | 20 +++++++++++--------- 2 files changed, 31 insertions(+), 17 deletions(-) diff --git a/css/style.css b/css/style.css index f84a7462..97f42f1a 100644 --- a/css/style.css +++ b/css/style.css @@ -222,6 +222,7 @@ form button:hover { display: flex; align-items: center; margin-bottom: 30px; + margin-top:30px ; padding-left: 20px; } .fa-solid.fa-info { @@ -269,8 +270,10 @@ form button:hover { display: flex; background-color: var(--main-color); color: var(--main-bg-color); - border-radius: 0 10px 10px 0; + border-radius: 30%; + margin-right:30px; } + form button { display: none; cursor: pointer; @@ -299,19 +302,27 @@ form button:hover { padding-right: 20px; } - +#formulaire{ + padding-left:0px ; +} .filters { - border: 1px solid red; + display: flex; - margin: auto; - width: 90%; + width: 100%; + } + .btn-filter{ + display:wrap; + width:45%; + + } + .btn-search { - padding: 0px 0px 0px 60px; + padding: 0px 0px 0px 0px; } input#search { - width: 180px; - padding-left: 25px; + width: 100%; + } h1 { font-size: 26px; @@ -321,6 +332,7 @@ form button:hover { header #logo img { width: 50px; } + } /********************** diff --git a/index.html b/index.html index 05e43926..d1ed7fd0 100644 --- a/index.html +++ b/index.html @@ -35,27 +35,28 @@

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

En plein centre-ville ou en pleine nature
-
-
+
+ +
+
- +
- + +

Filtres

+

Économique

@@ -70,6 +71,7 @@

Filtres

Nos pépites

+
@@ -500,4 +502,4 @@
Notre-Dame-de-la-Garde
- + \ No newline at end of file From 30576c10a1fd8f71a844e99642dc318fd4e38398 Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Sat, 28 Oct 2023 00:39:18 +0200 Subject: [PATCH 85/94] Modified css Signed-off-by: LILIANLEILA09 --- css/style.css | 14 +++++++++----- index.html | 6 +++--- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/css/style.css b/css/style.css index 97f42f1a..4afc540a 100644 --- a/css/style.css +++ b/css/style.css @@ -173,7 +173,7 @@ form button:hover { .btn-filter p { margin: 0; - padding-right: 20px; + cursor: pointer; } @@ -201,7 +201,7 @@ form button:hover { .btn-filter .fa-child-reaching { padding: 14px 17px 14px 17px; - margin-right: 10px; + color: #0065fc; background-color: white; } @@ -210,7 +210,7 @@ form button:hover { .fa-fire, .fa-money-bill-wave { padding: 14px 14px 14px 14px; - margin-right: 10px; + color: #0065fc; background-color: white; } @@ -306,7 +306,6 @@ form button:hover { padding-left:0px ; } .filters { - display: flex; width: 100%; @@ -314,7 +313,10 @@ form button:hover { .btn-filter{ display:wrap; width:45%; - + } + + a{ + font-size: small; } .btn-search { @@ -977,7 +979,9 @@ p { P { font-size: 18px; margin-bottom: 10px; + } + .afficher { margin-top: 15px; font-size: 15px; diff --git a/index.html b/index.html index d1ed7fd0..731d535f 100644 --- a/index.html +++ b/index.html @@ -61,14 +61,14 @@

Filtres

Économique

-

Familiale

+

Familiale

-

Romantique

+

Romantique

- Nos pépites + Nos pépites

From 36fae66362bd55dee0a87961b9c153d02a22a973 Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Sat, 28 Oct 2023 18:39:47 +0200 Subject: [PATCH 86/94] Modified css Signed-off-by: LILIANLEILA09 --- css/style.css | 898 ++++++++++++++++++++++++++------------------------ 1 file changed, 476 insertions(+), 422 deletions(-) diff --git a/css/style.css b/css/style.css index 4afc540a..a8f716d1 100644 --- a/css/style.css +++ b/css/style.css @@ -1,7 +1,6 @@ @import url("https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800;900&display=swap"); -/* @import url(header.css); -@import url(main.css); -@import url(footer.css); */ + +/*-----------------------general-----------------------*/ * { font-family: "Raleway", sans-serif; @@ -27,6 +26,7 @@ html { flex-direction: row; justify-content: center; } + body { display: flex; justify-content: center; @@ -40,11 +40,50 @@ body { .neutral-star { color: var(--main-bg-color); } + .line { color: #0065fc; } -/*******header********/ +h1 { + font-size: 15px; + margin-bottom: 10px; + padding-left: 30px; + } + h6 { + font-size: 15px; + margin-bottom: 10px; + padding-left: 5px; + } + + h4 { + font-size: 20px; + padding-left: 20px; + padding-top: 20px; + padding-bottom: 20px; + } + + a { + color: inherit; + text-decoration: none; + } + + p { + margin-bottom: 10px; + } + + main, + header, + footer { + max-width: 1400px; + margin: 0 auto; + padding: 0 15px; + } + + +/*---------------------header------------------------*/ + + header { display: flex; justify-content: space-between; @@ -56,8 +95,8 @@ header { margin-right: auto; align-items: center; padding-left: 20px; - } + header #logo img { width: 50px; } @@ -68,27 +107,29 @@ header nav ul { padding-right: 30px; gap: 30px; list-style-type: none; - } + header nav ul li { padding-top: 20px; padding-bottom: 10px; border-top: 2px solid transparent; } + header nav ul li:hover { border-color: #0065fc; color: #256dd7; } -h1 { - font-size: 15px; - margin-bottom: 10px; - padding-left: 30px; -} + .titre-1 { display: flex; padding-left: 30px; } +input#search { + width: 160px; + padding-left: 25px; + } + form { display: inline-block; width: 100%; @@ -102,6 +143,7 @@ form i { width: 50px; padding-left: 20px; } + form input { border: 1px solid transparent; font-size: 15px; @@ -111,14 +153,10 @@ form input { width: 146px; height: 39px; } -input#search { - width: 160px; - padding-left: 25px; -} form input:hover { - background-color: var(--light-blue); -} + background-color: var(--light-blue); + } form input::placeholder { color: black; @@ -143,38 +181,36 @@ form button:hover { .fa-solid.fa-magnifying-glass { display: none; } + .btn-search { display: flex; justify-content: flex-start; width: 80%; + } -/* - ^---------------------- - * FILTERS - ^---------------------- - */ .filters { padding-left: 20px; display: flex; - width: 900px; + width: 900px; padding-top: 18px; flex-flow: row wrap; align-items: center; justify-content: center; gap: 20px; - } .filters h3 { margin-right: 20px; - padding-right:20px; + padding-right: 20px; + } .btn-filter p { margin: 0; - cursor: pointer; + width: 173px; + } .btn-filter { @@ -182,6 +218,7 @@ form button:hover { border: 1px solid lightgrey; border-radius: 30px; border-left: none; + } .btn-filter:hover { @@ -201,7 +238,7 @@ form button:hover { .btn-filter .fa-child-reaching { padding: 14px 17px 14px 17px; - + color: #0065fc; background-color: white; } @@ -210,21 +247,19 @@ form button:hover { .fa-fire, .fa-money-bill-wave { padding: 14px 14px 14px 14px; - - color: #0065fc; + color: #0065fc; background-color: white; + } -/* - * barre d'information - **/ #icon-info { display: flex; align-items: center; margin-bottom: 30px; - margin-top:30px ; + margin-top: 30px; padding-left: 20px; } + .fa-solid.fa-info { border: 1.5px solid var(--light-grey); border-radius: 50%; @@ -239,229 +274,64 @@ form button:hover { background-color: var(--light-grey); } -/*------------------------------------------------- - Medium devices (tablets, less/equal than 1024px) - -----------------------------------------------------*/ - -@media (max-width: 1024px) { - .filters { - display: flex; - flex-wrap: wrap; - justify-content: flex-start; - margin-top: 20px; - } - .fa-solid.fa-magnifying-glass { - display: none; - } -} -/*------------------------------------------------------------- - Medium devices (tablets, less/equal than 768px) - -----------------------------------------------------------*/ -@media (max-width: 768px) { - .titre-Filtres { - padding-right: 100%; - } -} -/*------------------------------------------------------- - Medium devices (tablets, less/equal than 767,98px) - ---------------------------------------------------------*/ -@media (max-width: 767.98px) { - .fa-solid.fa-magnifying-glass { - display: flex; - background-color: var(--main-color); - color: var(--main-bg-color); - border-radius: 30%; - margin-right:30px; - } - - form button { - display: none; - cursor: pointer; - } - - header { - display: flex; - flex-direction: column; - } - header nav ul li { - border-top: none; - padding-right: 20px; - border-bottom: 2px solid transparent; - margin: 0px 20px 0px 20px; - } - - header nav ul li:hover { - border-color: #256dd7; - } - .btn-search { - display: flex; - justify-content: center; - width: 100%; - padding-left: 100%; - margin-left: 20px; - padding-right: 20px; - - } -#formulaire{ - padding-left:0px ; -} - .filters { - display: flex; - width: 100%; - - } - .btn-filter{ - display:wrap; - width:45%; - } - - a{ - font-size: small; - } +/*--------------------main-------------------*/ - .btn-search { - padding: 0px 0px 0px 0px; - } - input#search { - width: 100%; - - } - h1 { - font-size: 26px; - margin-top: 40px; - padding-left: 20px; - } - header #logo img { - width: 50px; +.main { + margin-top: 30px; } - -} -/********************** -/******Main*************/ .main-container { width: 100%; max-width: 1440px; padding: 0 50px; overflow-x: hidden; } + .accessibility-label { position: absolute; left: -999px; } + .section-title { margin: 0; font-size: 22px; } -a { - color: inherit; - text-decoration: none; -} -p { - margin-bottom: 10px; -} - -main, -header, -footer { - max-width: 1400px; - margin: 0 auto; - padding: 0 15px; -} -.main { - margin-top: 30px; -} +/*----------------------hebergements et populaire-----------------------*/ -.card { - background-color: white; - border-radius: 20px; - padding: 5px; - filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); -} - -.card img { - object-fit: cover; -} - -.card-title { - font-size: 15px; - padding-left: 10px; -} .hebergements-and-populaires { - 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; -} - -/****** Hebergements ***********/ -.hebergements { - width: 65%; -} - -/****** Populaires ***********/ -.populaires { - width: 32%; -} - -.populaires-title { - display: flex; - justify-content: space-between; - align-items: center; -} - -.populaires-cards .card { - display: flex; - margin-top: 33px; -} - -.populaires-cards img { - width: 33%; - height: 136px; - object-fit: cover; - 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; -} + 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; + } -.populaires-cards .card-subtitle { - margin: 0; -} + /*----------Hebergement-------------------------*/ -.populaires-cards .card-rating { - margin-bottom: 5px; - color: #0065fc; -} +.card { + background-color: white; + border-radius: 20px; + padding: 5px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); + } + + .card img { + object-fit: cover; + } + + .card-title { + font-size: 15px; + padding-left: 10px; + } -.card:hover { - transform: scale(1.02); - box-shadow: 0 0 8px var(--blue); - cursor: pointer; - background-color: var(--light-grey); -} -.card .stars { - margin-top: auto; -} -/****Hebergements à Marseille**/ +.hebergements { + width: 65%; + } .container-grid { display: grid; @@ -485,10 +355,12 @@ footer { object-fit: cover; padding: 5px; } + .box1 .card-content { border-radius: 0 0 20px 20px; filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); } + .box1:hover { transform: scale(1.02); box-shadow: 0 0 8px var(--blue); @@ -530,6 +402,7 @@ footer { .card .stars { margin-top: auto; } + .box3 { margin-top: 30px; background-color: white; @@ -552,6 +425,7 @@ footer { filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); } + .box3:hover { transform: scale(1.02); box-shadow: 0 0 8px var(--blue); @@ -578,6 +452,7 @@ footer { padding: 5px; filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); } + .box4.card-content { border-radius: 0 0 20px 20px; filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); @@ -607,12 +482,14 @@ footer { border-radius: 0 0 20px 20px; filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); } + .box5 { background-color: white; width: 90%; border-radius: 20px 20px 20px 20px; filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); } + .box5:hover { transform: scale(1.02); box-shadow: 0 0 8px var(--blue); @@ -639,16 +516,19 @@ footer { object-fit: cover; filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); } + .box6.card-content { border-radius: 0 0 20px 20px; filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); } + .box6:hover { transform: scale(1.02); box-shadow: 0 0 8px var(--blue); cursor: pointer; background-color: var(--light-grey); } + .card .stars { margin-top: auto; } @@ -658,6 +538,7 @@ footer { margin-left: 10px; padding-bottom: 10px; } + h3.card-title { margin: 0; } @@ -678,7 +559,68 @@ p.card-subtitle { margin-bottom: 5px; margin-left: 10px; } -/****Activités à Marseille**/ + +/*--------------------populaire----------------------*/ + +.populaires { + width: 32%; + } + + .populaires-title { + display: flex; + justify-content: space-between; + align-items: center; + } + + .populaires-cards .card { + display: flex; + margin-top: 33px; + } + + .populaires-cards img { + width: 33%; + height: 136px; + object-fit: cover; + 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; + color: #0065fc; + } + + .card:hover { + transform: scale(1.02); + box-shadow: 0 0 8px var(--blue); + cursor: pointer; + background-color: var(--light-grey); + } + + .card .stars { + margin-top: auto; + } + + +/*-----------------------gallery---------------------*/ div.gallery { width: 100%; @@ -700,6 +642,7 @@ div.desc { padding-left: 0; padding-right: 0; } + .desc1 { padding-left: 0; padding-top: 10px; @@ -712,19 +655,6 @@ div.desc { padding-bottom: 10px; } -h6 { - font-size: 15px; - margin-bottom: 10px; - padding-left: 5px; -} - -h4 { - font-size: 20px; - padding-left: 20px; - padding-top: 20px; - padding-bottom: 20px; -} - .afficher { margin-top: 80px; font-size: 20px; @@ -737,19 +667,90 @@ h4 { width: 24.99999%; } -/*------------------------------------------------------ - Medium devices (tablets, less/equal than 1024px) - -------------------------------------------------------*/ +/*----------------footer-------------*/ +.footer { + display: flex; + justify-content: space-between; + width: 100%; + height: 200px; + gap: 10%; + margin-top: 300px; + background-color: #f2f2f2; +} + +.footer-left { + margin-top: 20px; + padding-left: 20px; + line-height: 20px; +} + +.footer-midle { + margin-top: 20px; + line-height: 20px; +} + +.footer-right { + margin-right: 400px; + padding-left: 20px; + margin-top: 20px; + line-height: 20px; +} + +p { + font-size: 18px; + margin-bottom: 10px; +} + + /*----------- Medium devices (tablets, less/equal than 1024px) ----------------*/ + @media (max-width: 1024px) { + + h4 { + font-size: 15px; + padding-left: 25px; + padding-top: 20px; + padding-bottom: 20px; + } + + h6 { + font-size: 11px; + font-weight: bold; + padding-left: 15px; + } + + .afficher { + margin-top: 20px; + font-size: 15px; + font-weight: bold; + } + + .filters { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + margin-top: 20px; + } + + .fa-solid.fa-magnifying-glass { + display: none; + } + + .main-container { + padding: 0px; + width: 100%; + } + + .hebergements-and-populaires { flex-direction: column; } + .hebergements { width: 100%; } - - .populaires { + + .populaires { width: 100%; margin-top: 50px; } @@ -763,6 +764,7 @@ h4 { .populaires-cards a { width: 30%; } + .populaires-cards .card-title { font-size: 14px; } @@ -770,47 +772,205 @@ h4 { .populaires-cards .card-subtitle { font-size: 13px; } - .main-container { - padding: 0px; + + .populaires { width: 100%; + margin-top: 50px; } - h4 { - font-size: 15px; - padding-left: 25px; - padding-top: 20px; - padding-bottom: 20px; + + .footer { + height: auto; + gap: 50px; } - h6 { - font-size: 11px; - font-weight: bold; - padding-left: 15px; + + .footer { + width: 100%; + height: 170px; + gap: 20px; + padding-bottom: 50px; + background-color: #f2f2f2; } - .afficher { + + .footer-left { + width: 288px; + height: 163px; + gap: 20px; + } + + .footer-midle { + margin-top: 20px; + } + + .footer-right { + margin-right: 20px; + padding-left: 20px; margin-top: 20px; + } + + p { font-size: 15px; - font-weight: bold; + margin-bottom: 10px; } + .btn-filter p { + margin: 0; + cursor: pointer; + width: 150px; + + } + } -/*--------------------------------------------------- - Medium devices (tablets, less/equal than 767,98px) - -------------------------------------------------------*/ + + /*-------------------- Medium devices (tablets, less/equal than 768px)--------------------*/ + + @media (max-width: 768px) { + + .titre-Filtres { + padding-right: 100%; + } + } + + +/*------------------ Medium devices (tablets, less/equal than 767,98px)-------------------*/ + @media (max-width: 767.98px) { - .main-container { - padding: 0; + + section { + display: flex; + flex-direction: column; + } + + h1 { + font-size: 26px; + margin-top: 40px; + padding-left: 20px; + } + + h4 { + font-size: 15px; + padding-left: 26px; + padding-top: 20px; + padding-bottom: 20px; + } + + h6 { + font-size: 15px; + font-weight: bold; + padding-left: 15px; + } + + .responsive { + width: 100%; + margin-left: 10px; + margin-right: 10px; + margin-bottom: 20px; + } + + header { + display: flex; + flex-direction: column; + } + + header nav ul li { + border-top: none; + padding-right: 20px; + border-bottom: 2px solid transparent; + margin: 0px 20px 0px 20px; + } + + header nav ul li:hover { + border-color: #256dd7; + } + + form button { + display: none; + cursor: pointer; + } + + #formulaire { + padding-left: 0px; + } + + .filters { + display: flex; + width: 100%; + } + + .btn-filter { + display: wrap; + width: 45%; + } + + a { + font-size: small; + } + + + input#search { + width: 100%; + } + + header #logo img { + width: 50px; + } + .btn-search { + display: flex; + justify-content: center; + width: 100%; + padding-left: 100%; + margin-left: 20px; + padding-right: 20px; + } + + + + .section-title { + padding-left: 20px; + font-size: 20px; + } + + .afficher { + margin-top: 15px; + font-size: 15px; + font-weight: bold; + } + + .fa-solid.fa-magnifying-glass { + display: flex; + background-color: var(--main-color); + color: var(--main-bg-color); + border-radius: 30%; + margin-right: 30px; + } + + .main-container { + padding: 0; } - .populaires-cards a { - width: 98%; + .container-grid { + display: flex; + flex-direction: column; + column-gap: normal; + } + + .hebergements-and-populaires { + display: flex; + flex-direction: column-reverse; } - section.hebergements { + section.hebergements { width: 100%; margin-left: 10px; + background-color: white; } - .container-grid { + + .populaires-cards a { + width: 98%; + } + + .populaires-cards { display: flex; flex-direction: column; - column-gap: normal; + width: 100%; } .box1, @@ -823,171 +983,65 @@ h4 { margin-bottom: 20px; margin-top: 0px; } - .hebergements-and-populaires { - display: flex; - flex-direction: column-reverse; - } - .populaires-cards { + + article.card { width: 100%; } - - section { + + .footer { display: flex; flex-direction: column; - } - - article.card { + align-items: self-start; + height: 399px; width: 100%; - } - .populaires-cards { - display: flex; - flex-direction: column; - } - section.hebergements { - background-color: white; + margin-top: 20px; + gap: 30px; } - h4 { - font-size: 15px; - padding-left: 26px; - padding-top: 20px; - padding-bottom: 20px; - } - h6 { - font-size: 15px; - font-weight: bold; - padding-left: 15px; - } - .responsive { - width: 100%; - margin-left: 10px; - margin-right: 10px; - margin-bottom: 20px; + .footer-left.p { + font-size: 30px; + margin-top: 20px; + line-height: 50px; } - .section-title { - padding-left: 20px; - font-size: 20px; - } - .afficher { - padding-top: 20px; - font-size: 20px; - font-weight: bold; + .footer-midle.p { + font-size: 30px; + margin-left: 20px; + margin-top: 20px; } -} -/***********************/ -/******Footer***********/ -.footer { - display: flex; - justify-content: space-between; - width: 100%; - height: 200px; - gap: 10%; - margin-top: 300px; - background-color: #f2f2f2; -} - -.footer-left { - margin-top: 20px; - padding-left: 20px; - line-height: 20px; -} -.footer-midle { - margin-top: 20px; - line-height: 20px; -} -.footer-right { - margin-right: 400px; - padding-left: 20px; - margin-top: 20px; - line-height: 20px; -} -p { - font-size: 18px; - margin-bottom: 10px; -} - -/*--------------------------------------------------- - Medium devices (tablets, less/equal than 1024px) - ---------------------------------------------------*/ -@media (max-width: 1024px) { - .footer { - height: auto; - gap: 50px; - } - .footer { - width: 100%; - height: 170px; - gap: 20px; - padding-bottom: 50px; - background-color: #f2f2f2; + .footer-right.p { + font-size: 30px; + margin-left: 20px; + margin-top: 20px; } - .footer-left { - width: 288px; - height: 163px; - gap: 20px; + .footer-right { + margin: 0px; } + .footer-midle { - margin-top: 20px; - } - .footer-right { - margin-right: 20px; - padding-left: 20px; - margin-top: 20px; + margin-left: 20px; } - p { + + P { font-size: 18px; margin-bottom: 10px; } - /*-------------------------------------------------- - Medium devices (tablets, less/equal than 767,98px) - ----------------------------------------------------*/ - @media (max-width: 767.98px) { - .footer { - display: flex; - flex-direction: column; - align-items: self-start; - height: 399px; - width: 100%; - margin-top: 20px; - gap: 30px; - } - .footer-left.p { - font-size: 30px; - margin-top: 20px; - line-height: 50px; - } - .footer-midle.p { - font-size: 30px; - margin-left: 20px; - margin-top: 20px; - } - .footer-right.p { - font-size: 30px; - margin-left: 20px; - - margin-top: 20px; - } - .footer-right { - margin: 0px; - } - .footer-midle { - margin-left: 20px; - } - P { - font-size: 18px; - margin-bottom: 10px; - - } - - .afficher { - margin-top: 15px; - font-size: 15px; - font-weight: bold; - } + .btn-search { + padding: 0px 0px 0px 0px; } -} + + + } + + + + + + + + + + -/**********************/ From 18efdadf6ff3d32eb3559caf7116f699e8e5bfaf Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Sat, 28 Oct 2023 23:33:07 +0200 Subject: [PATCH 87/94] modification style css Signed-off-by: LILIANLEILA09 --- css/style.css | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/css/style.css b/css/style.css index a8f716d1..08c197ae 100644 --- a/css/style.css +++ b/css/style.css @@ -94,7 +94,7 @@ header { display: flex; margin-right: auto; align-items: center; - padding-left: 20px; + } header #logo img { @@ -128,6 +128,7 @@ header nav ul li:hover { input#search { width: 160px; padding-left: 25px; + border: thin solid var(--light-grey); } form { @@ -903,15 +904,23 @@ p { a { font-size: small; } - - + input#search { width: 100%; + border: thin solid var(--light-grey); } header #logo img { width: 50px; + + } + #logo { + display: flex; + padding-left: 45%; + margin-top: 20px; + } + .btn-search { display: flex; justify-content: center; @@ -921,8 +930,6 @@ p { padding-right: 20px; } - - .section-title { padding-left: 20px; font-size: 20px; @@ -941,6 +948,9 @@ p { border-radius: 30%; margin-right: 30px; } + .fa-solid.fa-magnifying-glass:hover{ + box-shadow: 1px 1px 10px grey; + } .main-container { padding: 0; From 2b65b2a3db74b1b913eb04449872fb3ed7ea2e10 Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Sun, 29 Oct 2023 18:10:06 +0100 Subject: [PATCH 88/94] modified css add cliquable Signed-off-by: LILIANLEILA09 --- css/style.css | 625 ++++++++++++++++++++++++-------------------------- index.html | 3 +- 2 files changed, 300 insertions(+), 328 deletions(-) diff --git a/css/style.css b/css/style.css index 08c197ae..8d49367a 100644 --- a/css/style.css +++ b/css/style.css @@ -46,44 +46,42 @@ body { } h1 { - font-size: 15px; - margin-bottom: 10px; - padding-left: 30px; - } - h6 { - font-size: 15px; - margin-bottom: 10px; - padding-left: 5px; - } - - h4 { - font-size: 20px; - padding-left: 20px; - padding-top: 20px; - padding-bottom: 20px; - } + font-size: 15px; + margin-bottom: 10px; + padding-left: 30px; +} +h6 { + font-size: 15px; + margin-bottom: 10px; + padding-left: 5px; +} - a { - color: inherit; - text-decoration: none; - } +h4 { + font-size: 20px; + padding-left: 20px; + padding-top: 20px; + padding-bottom: 20px; +} - p { - margin-bottom: 10px; - } - - main, - header, - footer { - max-width: 1400px; - margin: 0 auto; - padding: 0 15px; - } +a { + color: inherit; + text-decoration: none; +} + +p { + margin-bottom: 10px; +} +main, +header, +footer { + max-width: 1400px; + margin: 0 auto; + padding: 0 15px; +} /*---------------------header------------------------*/ - header { display: flex; justify-content: space-between; @@ -94,7 +92,6 @@ header { display: flex; margin-right: auto; align-items: center; - } header #logo img { @@ -126,10 +123,10 @@ header nav ul li:hover { } input#search { - width: 160px; - padding-left: 25px; - border: thin solid var(--light-grey); - } + width: 160px; + padding-left: 25px; + border: thin solid var(--light-grey); +} form { display: inline-block; @@ -156,8 +153,8 @@ form input { } form input:hover { - background-color: var(--light-blue); - } + background-color: var(--light-blue); +} form input::placeholder { color: black; @@ -187,7 +184,6 @@ form button:hover { display: flex; justify-content: flex-start; width: 80%; - } .filters { @@ -204,14 +200,12 @@ form button:hover { .filters h3 { margin-right: 20px; padding-right: 20px; - } .btn-filter p { margin: 0; cursor: pointer; width: 173px; - } .btn-filter { @@ -219,7 +213,6 @@ form button:hover { border: 1px solid lightgrey; border-radius: 30px; border-left: none; - } .btn-filter:hover { @@ -239,7 +232,6 @@ form button:hover { .btn-filter .fa-child-reaching { padding: 14px 17px 14px 17px; - color: #0065fc; background-color: white; } @@ -248,9 +240,8 @@ form button:hover { .fa-fire, .fa-money-bill-wave { padding: 14px 14px 14px 14px; - color: #0065fc; + color: #0065fc; background-color: white; - } #icon-info { @@ -278,8 +269,8 @@ form button:hover { /*--------------------main-------------------*/ .main { - margin-top: 30px; - } + margin-top: 30px; +} .main-container { width: 100%; @@ -301,38 +292,38 @@ form button:hover { /*----------------------hebergements et populaire-----------------------*/ .hebergements-and-populaires { - 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; - } + 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; +} - /*----------Hebergement-------------------------*/ +/*----------Hebergement-------------------------*/ .card { - background-color: white; - border-radius: 20px; - padding: 5px; - filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); - } - - .card img { - object-fit: cover; - } - - .card-title { - font-size: 15px; - padding-left: 10px; - } + background-color: white; + border-radius: 20px; + padding: 5px; + filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); +} + +.card img { + object-fit: cover; +} + +.card-title { + font-size: 15px; + padding-left: 10px; +} .hebergements { - width: 65%; - } + width: 65%; +} .container-grid { display: grid; @@ -374,7 +365,7 @@ form button:hover { .box2 { margin-top: 30px; - background-color: white; + background-color:white; width: 90%; border-radius: 20px 20px 20px 20px; filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); @@ -387,6 +378,7 @@ form button:hover { object-fit: cover; padding: 5px; filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); + } .box2 .card-content { @@ -564,62 +556,61 @@ p.card-subtitle { /*--------------------populaire----------------------*/ .populaires { - width: 32%; - } - - .populaires-title { - display: flex; - justify-content: space-between; - align-items: center; - } - - .populaires-cards .card { - display: flex; - margin-top: 33px; - } - - .populaires-cards img { - width: 33%; - height: 136px; - object-fit: cover; - 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; - color: #0065fc; - } - - .card:hover { - transform: scale(1.02); - box-shadow: 0 0 8px var(--blue); - cursor: pointer; - background-color: var(--light-grey); - } + width: 32%; +} - .card .stars { - margin-top: auto; - } +.populaires-title { + display: flex; + justify-content: space-between; + align-items: center; +} + +.populaires-cards .card { + display: flex; + margin-top: 33px; +} + +.populaires-cards img { + width: 33%; + height: 136px; + object-fit: cover; + 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; + color: #0065fc; +} +.card:hover { + transform: scale(1.02); + box-shadow: 0 0 8px var(--blue); + cursor: pointer; + background-color: var(--light-grey); +} + +.card .stars { + margin-top: auto; +} /*-----------------------gallery---------------------*/ @@ -634,8 +625,9 @@ div.gallery img { height: 200px; object-fit: cover; border-radius: 12px 12px 0px 0px; + } - + div.desc { width: 100%; padding-top: 10px; @@ -702,46 +694,43 @@ p { margin-bottom: 10px; } - /*----------- Medium devices (tablets, less/equal than 1024px) ----------------*/ - +/*----------- Medium devices (tablets, less/equal than 1024px) ----------------*/ @media (max-width: 1024px) { + h4 { + font-size: 15px; + padding-left: 25px; + padding-top: 20px; + padding-bottom: 20px; + } - h4 { - font-size: 15px; - padding-left: 25px; - padding-top: 20px; - padding-bottom: 20px; - } - - h6 { - font-size: 11px; - font-weight: bold; - padding-left: 15px; - } - - .afficher { - margin-top: 20px; - font-size: 15px; - font-weight: bold; - } - - .filters { - display: flex; - flex-wrap: wrap; - justify-content: flex-start; - margin-top: 20px; - } - - .fa-solid.fa-magnifying-glass { - display: none; - } - - .main-container { - padding: 0px; - width: 100%; - } - + h6 { + font-size: 11px; + font-weight: bold; + padding-left: 15px; + } + + .afficher { + margin-top: 20px; + font-size: 15px; + font-weight: bold; + } + + .filters { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + margin-top: 20px; + } + + .fa-solid.fa-magnifying-glass { + display: none; + } + + .main-container { + padding: 0px; + width: 100%; + } .hebergements-and-populaires { flex-direction: column; @@ -750,8 +739,8 @@ p { .hebergements { width: 100%; } - - .populaires { + + .populaires { width: 100%; margin-top: 50px; } @@ -773,13 +762,13 @@ p { .populaires-cards .card-subtitle { font-size: 13px; } - - .populaires { + + .populaires { width: 100%; margin-top: 50px; } - .footer { + .footer { height: auto; gap: 50px; } @@ -816,144 +805,143 @@ p { margin: 0; cursor: pointer; width: 150px; - } - } - /*-------------------- Medium devices (tablets, less/equal than 768px)--------------------*/ - - @media (max-width: 768px) { +/*-------------------- Medium devices (tablets, less/equal than 768px)--------------------*/ - .titre-Filtres { - padding-right: 100%; - } +@media (max-width: 768px) { + .titre-Filtres { + padding-right: 100%; } - +} /*------------------ Medium devices (tablets, less/equal than 767,98px)-------------------*/ - + @media (max-width: 767.98px) { + section { + display: flex; + flex-direction: column; + } - section { - display: flex; - flex-direction: column; - } - - h1 { - font-size: 26px; - margin-top: 40px; - padding-left: 20px; - } - - h4 { - font-size: 15px; - padding-left: 26px; - padding-top: 20px; - padding-bottom: 20px; - } - - h6 { - font-size: 15px; - font-weight: bold; - padding-left: 15px; - } - - .responsive { - width: 100%; - margin-left: 10px; - margin-right: 10px; - margin-bottom: 20px; - } - - header { - display: flex; - flex-direction: column; - } - - header nav ul li { - border-top: none; - padding-right: 20px; - border-bottom: 2px solid transparent; - margin: 0px 20px 0px 20px; - } - - header nav ul li:hover { - border-color: #256dd7; - } - - form button { - display: none; - cursor: pointer; - } - - #formulaire { - padding-left: 0px; - } - - .filters { - display: flex; - width: 100%; - } - - .btn-filter { - display: wrap; - width: 45%; - } - - a { - font-size: small; - } - - input#search { - width: 100%; - border: thin solid var(--light-grey); - } - - header #logo img { - width: 50px; - - } - #logo { - display: flex; - padding-left: 45%; - margin-top: 20px; - - } - - .btn-search { - display: flex; - justify-content: center; - width: 100%; - padding-left: 100%; - margin-left: 20px; - padding-right: 20px; - } - - .section-title { - padding-left: 20px; - font-size: 20px; - } - - .afficher { - margin-top: 15px; - font-size: 15px; - font-weight: bold; - } - - .fa-solid.fa-magnifying-glass { - display: flex; - background-color: var(--main-color); - color: var(--main-bg-color); - border-radius: 30%; - margin-right: 30px; - } - .fa-solid.fa-magnifying-glass:hover{ - box-shadow: 1px 1px 10px grey; - } - - .main-container { - padding: 0; + h1 { + font-size: 26px; + margin-top: 40px; + padding-left: 20px; + border-top: 2px solid var(--main-color); + padding-top: 20px; + width: 100%; + } + + h4 { + font-size: 15px; + padding-left: 26px; + padding-top: 20px; + padding-bottom: 20px; + } + + h6 { + font-size: 15px; + font-weight: bold; + padding-left: 15px; + } + + .responsive { + width: 100%; + margin-left: 10px; + margin-right: 10px; + margin-bottom: 20px; + } + + header { + display: flex; + flex-direction: column; + } + + header nav ul li { + border-top: none; + padding-right: 20px; + border-bottom: none; + margin: 0px 20px 0px 20px; + } + + header nav ul li:hover { + border-color: #256dd7; + } + + form button { + display: none; + cursor: pointer; + } + + #formulaire { + padding-left: 0px; + } + + .filters { + display: flex; + width: 100%; + } + + .btn-filter { + display: wrap; + width: 45%; + } + + a { + font-size: small; + } + + input#search { + width: 100%; + border: thin solid var(--light-grey); + } + + header #logo img { + width: 50px; + } + #logo { + display: flex; + padding-left: 45%; + margin-top: 20px; + } + + .btn-search { + display: flex; + justify-content: center; + width: 100%; + padding-left: 100%; + margin-left: 20px; + padding-right: 20px; + } + .btn-search { + padding: 0px 0px 0px 0px; + } + + .section-title { + font-size: 15px; + padding-bottom: 20px; + } + + .afficher { + margin-top: 15px; + font-size: 15px; + font-weight: bold; + } + + .fa-solid.fa-magnifying-glass { + display: flex; + background-color: var(--main-color); + color: var(--main-bg-color); + border-radius: 0 10px 10px 0; + margin-right: 30px; + } + .fa-solid.fa-magnifying-glass:hover { + box-shadow: 1px 1px 10px grey; + } + + .main-container { + padding: 0; } .container-grid { @@ -962,18 +950,18 @@ p { column-gap: normal; } - .hebergements-and-populaires { + .hebergements-and-populaires { display: flex; flex-direction: column-reverse; } - section.hebergements { + section.hebergements { width: 100%; margin-left: 10px; background-color: white; } - .populaires-cards a { + .populaires-cards a { width: 98%; } @@ -993,11 +981,11 @@ p { margin-bottom: 20px; margin-top: 0px; } - - article.card { + + article.card { width: 100%; } - + .footer { display: flex; flex-direction: column; @@ -1023,7 +1011,7 @@ p { .footer-right.p { font-size: 30px; margin-left: 20px; - margin-top: 20px; + margin-top: 20px; } .footer-right { margin: 0px; @@ -1037,21 +1025,4 @@ p { font-size: 18px; margin-bottom: 10px; } - - .btn-search { - padding: 0px 0px 0px 0px; - } - - - } - - - - - - - - - - - +} diff --git a/index.html b/index.html index 731d535f..99ed12b6 100644 --- a/index.html +++ b/index.html @@ -84,8 +84,9 @@

Filtres

+
-

Hébergements à Marseille

+

Hébergements à Marseille

From fd694fed5f7ecd9194c539f3dfa7df2f1c1c564e Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Sun, 29 Oct 2023 19:47:52 +0100 Subject: [PATCH 89/94] Modified css add cliquable Signed-off-by: LILIANLEILA09 --- css/style.css | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/css/style.css b/css/style.css index 8d49367a..470912c8 100644 --- a/css/style.css +++ b/css/style.css @@ -614,10 +614,14 @@ p.card-subtitle { /*-----------------------gallery---------------------*/ -div.gallery { +div.gallery:hover{ width: 100%; height: 250px; border-radius: 12px 12px 12px 12px; + box-shadow: 0 0 20 20px; + background-color:var(--light-grey); + box-shadow: 0 0 8px var(--blue); + } div.gallery img { @@ -625,27 +629,32 @@ div.gallery img { height: 200px; object-fit: cover; border-radius: 12px 12px 0px 0px; - + } - + div.desc { width: 100%; padding-top: 10px; padding-bottom: 10px; padding-left: 0; padding-right: 0; + border-radius: 0 0 10px 10px; + } .desc1 { padding-left: 0; padding-top: 10px; padding-bottom: 10px; + border-radius: 0 0 10px 10px; + } .desc2 { padding-left: 0; padding-top: 10px; padding-bottom: 10px; + border-radius: 0 0 10px 10px; } .afficher { @@ -660,6 +669,8 @@ div.desc { width: 24.99999%; } + + /*----------------footer-------------*/ .footer { display: flex; @@ -853,6 +864,9 @@ p { margin-bottom: 20px; } + + + header { display: flex; flex-direction: column; From 586ffa1982d55f73c14fb05f10f7b51307e8e04c Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Mon, 30 Oct 2023 00:03:26 +0100 Subject: [PATCH 90/94] modified css add cliquable Signed-off-by: LILIANLEILA09 --- css/style.css | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/css/style.css b/css/style.css index 470912c8..692c6dae 100644 --- a/css/style.css +++ b/css/style.css @@ -1,3 +1,4 @@ + @import url("https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800;900&display=swap"); /*-----------------------general-----------------------*/ @@ -836,14 +837,13 @@ p { } h1 { - font-size: 26px; + font-size: 24px; margin-top: 40px; padding-left: 20px; - border-top: 2px solid var(--main-color); padding-top: 20px; - width: 100%; + } - + h4 { font-size: 15px; padding-left: 26px; @@ -864,9 +864,6 @@ p { margin-bottom: 20px; } - - - header { display: flex; flex-direction: column; @@ -874,8 +871,9 @@ p { header nav ul li { border-top: none; - padding-right: 20px; - border-bottom: none; + margin-left: 100%; + border-bottom: 2px solid transparent; + width:100%; margin: 0px 20px 0px 20px; } @@ -899,7 +897,7 @@ p { .btn-filter { display: wrap; - width: 45%; + width: 46%; } a { @@ -916,7 +914,7 @@ p { } #logo { display: flex; - padding-left: 45%; + padding-left: 40%; margin-top: 20px; } @@ -1039,4 +1037,4 @@ p { font-size: 18px; margin-bottom: 10px; } -} +} \ No newline at end of file From b3a3951c41db70fc8fb556361075b28baf36245b Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Mon, 30 Oct 2023 12:03:37 +0100 Subject: [PATCH 91/94] modified css Signed-off-by: LILIANLEILA09 --- css/style.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index 692c6dae..8b44c563 100644 --- a/css/style.css +++ b/css/style.css @@ -93,6 +93,7 @@ header { display: flex; margin-right: auto; align-items: center; + padding-left: 20px; } header #logo img { @@ -818,6 +819,9 @@ p { cursor: pointer; width: 150px; } + .titre-Filtres{ + padding-left: 10px; + } } /*-------------------- Medium devices (tablets, less/equal than 768px)--------------------*/ @@ -837,9 +841,9 @@ p { } h1 { - font-size: 24px; + font-size: 20px; margin-top: 40px; - padding-left: 20px; + padding-left: 24px; padding-top: 20px; } From 34aaab4dfdc364ed56ee719e17989a14a7b897f0 Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Tue, 31 Oct 2023 17:08:26 +0100 Subject: [PATCH 92/94] modified style.css add cliquable fonctionnality Signed-off-by: LILIANLEILA09 --- css/style.css | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/css/style.css b/css/style.css index 8b44c563..30903a9a 100644 --- a/css/style.css +++ b/css/style.css @@ -172,10 +172,11 @@ form button { cursor: pointer; border: none; margin-left: -5px; + } form button:hover { - box-shadow: 1px 1px 10px grey; + box-shadow: 0px 0px 10px grey; } .fa-solid.fa-magnifying-glass { @@ -841,7 +842,7 @@ p { } h1 { - font-size: 20px; + font-size: 24px; margin-top: 40px; padding-left: 24px; padding-top: 20px; @@ -877,8 +878,11 @@ p { border-top: none; margin-left: 100%; border-bottom: 2px solid transparent; + width: 282px; + padding-left: 10%; width:100%; margin: 0px 20px 0px 20px; + } header nav ul li:hover { @@ -918,7 +922,7 @@ p { } #logo { display: flex; - padding-left: 40%; + padding-left: 45%; margin-top: 20px; } From c2cb3d0a59474bcb5e4e36a9ec069c119a578f28 Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Tue, 31 Oct 2023 19:51:47 +0100 Subject: [PATCH 93/94] add cliquable fonctionnality Signed-off-by: LILIANLEILA09 --- css/style.css | 8 ++++---- index.html | 3 ++- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/css/style.css b/css/style.css index 30903a9a..d6c6f61c 100644 --- a/css/style.css +++ b/css/style.css @@ -145,13 +145,14 @@ form i { } form input { - border: 1px solid transparent; + border: 1px solid var(--filter-bg-color); font-size: 15px; font-weight: bold; padding: 8px 0 7px 10px; margin-left: -5px; width: 146px; height: 39px; + } form input:hover { @@ -172,7 +173,6 @@ form button { cursor: pointer; border: none; margin-left: -5px; - } form button:hover { @@ -621,7 +621,7 @@ div.gallery:hover{ width: 100%; height: 250px; border-radius: 12px 12px 12px 12px; - box-shadow: 0 0 20 20px; + box-shadow: 0px 0px 20px 20px; background-color:var(--light-grey); box-shadow: 0 0 8px var(--blue); @@ -904,7 +904,7 @@ p { } .btn-filter { - display: wrap; + display: flex; width: 46%; } diff --git a/index.html b/index.html index 99ed12b6..c179f9da 100644 --- a/index.html +++ b/index.html @@ -37,7 +37,7 @@

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

En plein centre-ville ou en pleine nature

-
+
@@ -502,5 +502,6 @@
Notre-Dame-de-la-Garde
+
\ No newline at end of file From 506732c2e46b9eb4f52cec03143baff2ce600112 Mon Sep 17 00:00:00 2001 From: LILIANLEILA09 Date: Tue, 31 Oct 2023 19:53:31 +0100 Subject: [PATCH 94/94] =?UTF-8?q?correction=20w3c=20html=20=C2=A7=20css?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: LILIANLEILA09 --- css/style.css | 25 +- index.html | 900 ++++++++++++++++++++++++++------------------------ 2 files changed, 475 insertions(+), 450 deletions(-) diff --git a/css/style.css b/css/style.css index d6c6f61c..ef525992 100644 --- a/css/style.css +++ b/css/style.css @@ -1,4 +1,3 @@ - @import url("https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800;900&display=swap"); /*-----------------------general-----------------------*/ @@ -152,7 +151,6 @@ form input { margin-left: -5px; width: 146px; height: 39px; - } form input:hover { @@ -368,7 +366,7 @@ form button:hover { .box2 { margin-top: 30px; - background-color:white; + background-color: white; width: 90%; border-radius: 20px 20px 20px 20px; filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); @@ -381,7 +379,6 @@ form button:hover { object-fit: cover; padding: 5px; filter: drop-shadow(0px 3px 15px rgb(226, 219, 219)); - } .box2 .card-content { @@ -617,14 +614,13 @@ p.card-subtitle { /*-----------------------gallery---------------------*/ -div.gallery:hover{ +div.gallery:hover { width: 100%; height: 250px; border-radius: 12px 12px 12px 12px; box-shadow: 0px 0px 20px 20px; - background-color:var(--light-grey); + background-color: var(--light-grey); box-shadow: 0 0 8px var(--blue); - } div.gallery img { @@ -632,7 +628,6 @@ div.gallery img { height: 200px; object-fit: cover; border-radius: 12px 12px 0px 0px; - } div.desc { @@ -642,7 +637,6 @@ div.desc { padding-left: 0; padding-right: 0; border-radius: 0 0 10px 10px; - } .desc1 { @@ -650,7 +644,6 @@ div.desc { padding-top: 10px; padding-bottom: 10px; border-radius: 0 0 10px 10px; - } .desc2 { @@ -672,8 +665,6 @@ div.desc { width: 24.99999%; } - - /*----------------footer-------------*/ .footer { display: flex; @@ -820,7 +811,7 @@ p { cursor: pointer; width: 150px; } - .titre-Filtres{ + .titre-Filtres { padding-left: 10px; } } @@ -846,9 +837,8 @@ p { margin-top: 40px; padding-left: 24px; padding-top: 20px; - } - + h4 { font-size: 15px; padding-left: 26px; @@ -880,9 +870,8 @@ p { border-bottom: 2px solid transparent; width: 282px; padding-left: 10%; - width:100%; + width: 100%; margin: 0px 20px 0px 20px; - } header nav ul li:hover { @@ -1045,4 +1034,4 @@ p { font-size: 18px; margin-bottom: 10px; } -} \ No newline at end of file +} diff --git a/index.html b/index.html index c179f9da..669fdd9e 100644 --- a/index.html +++ b/index.html @@ -35,473 +35,509 @@

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

En plein centre-ville ou en pleine nature
-
+
-
- - - - - -
-
- +
+ + + + + +
+
+ - + -
-
-

Filtres

-
- -
-

Économique

-
-
-

Familiale

-
-
-

Romantique

-
-
-

- Nos pépites -

+
+
+

Filtres

+
+ +
+

Économique

+
+
+

Familiale

+
+
+

Romantique

+
+
+

+ Nos pépites +

+
- -
- -
- -
- 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 -
-
-

Hôtel Bleu et Blanc

-

- Nuit à partir de 68€ -

+
+ + +
+ 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 +
-
- - - - - - 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 +
-
- - -
- -
-
-

Activités à Marseille

-
-
- Image Vieux Port -
-
Vieux Port
+ +
-
+
-
-
- Image Fort de Pomègues -
-
Fort de Pomègues
+
+

Activités à Marseille

+
+
+ Image Vieux Port +
+
Vieux Port
+
-
-
-
- Parc national des Calanques +
+
+ Image Fort de Pomègues +
+
Fort de Pomègues
+
+
+
+
+
+ Parc national des Calanques -
-
Parc national des Calangues
+
+
Parc national des Calangues
+
-
-
-
- Image Notre-Dame-de-la-Garde -
-
Notre-Dame-de-la-Garde
+
+
+ Image Notre-Dame-de-la-Garde +
+
Notre-Dame-de-la-Garde
+
-
-
- +
+ - - -
+ + +
- \ No newline at end of file +