From 7606ad58f2f11feea95f10b635e9175f3778d3d7 Mon Sep 17 00:00:00 2001 From: miracalagass Date: Fri, 23 Feb 2024 16:42:14 +0100 Subject: [PATCH 1/2] tablet-desktop --- css/style.css | 136 ++++++++++++++++++++++- images/icon/Vector.svg | 3 + images/icon/economique.svg | 3 + images/icon/familial.svg | 3 + images/icon/info.svg | 4 + images/icon/romantique.svg | 3 + index.html | 219 ++++++++++++++++++++++++++++++++++++- 7 files changed, 366 insertions(+), 5 deletions(-) create mode 100644 images/icon/Vector.svg create mode 100644 images/icon/economique.svg create mode 100644 images/icon/familial.svg create mode 100644 images/icon/info.svg create mode 100644 images/icon/romantique.svg diff --git a/css/style.css b/css/style.css index f6c96c4d..b4e90378 100644 --- a/css/style.css +++ b/css/style.css @@ -9,7 +9,7 @@ --filter-bg-color: #DEEBFF; } -.fa-solid { +.fa-xs { color: var(--main-color); } @@ -24,7 +24,42 @@ body { padding: 0 50px; box-sizing: border-box; } +form{ + width: 377px; + height: 49px; + border-radius: 15px; + border: 1px; +} + +.filtres { + display: flex; + flex-direction: row; + justify-content: space-between; + width: 758px; +} + +.filtres button{ + display: flex; + flex-direction: row; + justify-content: space-between; + border: 2px solid #d5d9d9; + background-color: white; + align-items: center; + border-radius: 25px; + padding-left: 19px; + padding-right: 19px; + padding-top: 4px; + padding-bottom: 4px; + +} + +.infobar { + display: flex; + flex-direction: row; + justify-content: space-between; + width: 450px; +} a { color: inherit; text-decoration: none; @@ -35,6 +70,18 @@ a { font-size: 22px; } +header{ + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.hcard { + background-color: white; + border-radius: 20px; + padding: 5px; + filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1)); +} .card { background-color: white; border-radius: 20px; @@ -69,11 +116,64 @@ a { border-radius: 20px; padding: 30px; box-sizing: border-box; + justify-content: space-between; } /****** Hebergements ***********/ .hebergements { width: 65%; + display: flex; + flex-direction: column; +} + +.hebergements-title { + display: flex; + align-items: flex-start; + justify-content: flex-start; + margin-top: 0px; + margin-bottom: 0px; + +} +.hebergements-cards { + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} +.hcard { + display: flex; + margin-top: 30px; + flex-direction: column; + width: 246px; + height: 199px; + flex-shrink: 0; + +} + +.hebergements-cards img { + width: 100%; + height: 100px; + border-top-left-radius: 20px; + border-top-right-radius: 20px; +} + +.hebergements-cards .card-content { + width: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + box-sizing: border-box; +} +.hebergements-cards .card-title { + margin-top: 10px; + margin-bottom: 4px; +} + +.hebergements-cards .card-subtitle { + margin: 0; +} + +.hebergements-cards .card-rating { + margin-bottom: 5px; } /****** Populaires ***********/ @@ -121,8 +221,42 @@ a { margin-bottom: 5px; } +.activites-cards{ + display: flex; + flex-direction: row; + justify-content: space-between; + border-radius: 20px; + filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1)); +} +.activites-cards img{ + width: 100%; + height: 100%; + border-top-left-radius: 20px; + border-top-right-radius: 20px; +} +.acard-content{ + width: 297px; + height: 380px; +} +.footer-apropos{ + background-color: #F2F2F2; + margin-top: 70px; + height: 170px; +} + +.content-center{ + display: flex; + flex-direction: row; + justify-content: space-between; + width: 1070px; +} +.fcolumn{ + display: flex; + flex-direction: column; + justify-content: space-between; +} /* Le code ci-dessous correspond à la version responsive uniquement */ diff --git a/images/icon/Vector.svg b/images/icon/Vector.svg new file mode 100644 index 00000000..09296b72 --- /dev/null +++ b/images/icon/Vector.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/icon/economique.svg b/images/icon/economique.svg new file mode 100644 index 00000000..4ad4ad48 --- /dev/null +++ b/images/icon/economique.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/icon/familial.svg b/images/icon/familial.svg new file mode 100644 index 00000000..41183da5 --- /dev/null +++ b/images/icon/familial.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/icon/info.svg b/images/icon/info.svg new file mode 100644 index 00000000..6ccf397b --- /dev/null +++ b/images/icon/info.svg @@ -0,0 +1,4 @@ + + + + diff --git a/images/icon/romantique.svg b/images/icon/romantique.svg new file mode 100644 index 00000000..0148f758 --- /dev/null +++ b/images/icon/romantique.svg @@ -0,0 +1,3 @@ + + + diff --git a/index.html b/index.html index 53512c75..1967ff58 100644 --- a/index.html +++ b/index.html @@ -12,15 +12,177 @@ integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> - +
-
+
+ logo + +
+
+

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

+

En plein centre-ville ou en pleine nature

+
+ + + +
+
+
+

Filtres

+ + + + +
+
+ +

Plus de 500 logements sont disponibles dans cette ville

+
- +

Hébergements à Marseille

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

Auberge La Canebière

+

Nuit à partir de 25€

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

Hôtel du port

+

Nuit à partir de 52€

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

Hôtel Les mouettes

+

Nuit à partir de 76€

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

Hôtel de la mer

+

Nuit à partir de 46€

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

Auberge Le Panier

+

Nuit à partir de 23€

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

Hôtel Chez Amina

+

Nuit à partir de 96€

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

Afficher plus

@@ -88,8 +250,57 @@

Hôtel Bleu et Blanc

+
+

Activités à Marseille

+
+
+ + image de vieux port +

Vieux-Port

+ +
+
+ + image de +

Fort de Pomègues

+ +
+
+ + image de +

Parc national des Calanques

+ +
+
+ + image de +

Notre-Dame-de-la-Garde

+ +
+
+ +
-
+
From 7858a3fd5f1dda874c2d2659bf8cb2404afc99ea Mon Sep 17 00:00:00 2001 From: miracalagass Date: Fri, 23 Feb 2024 16:45:02 +0100 Subject: [PATCH 2/2] tab-desk --- css/style.css | 260 +++++++++++++++++++++++++++++++++++-- images/icon/Vector.svg | 3 - images/icon/economique.svg | 3 - images/icon/familial.svg | 3 - images/icon/info.svg | 4 - images/icon/romantique.svg | 3 - index.html | 49 ++++--- 7 files changed, 282 insertions(+), 43 deletions(-) delete mode 100644 images/icon/Vector.svg delete mode 100644 images/icon/economique.svg delete mode 100644 images/icon/familial.svg delete mode 100644 images/icon/info.svg delete mode 100644 images/icon/romantique.svg diff --git a/css/style.css b/css/style.css index b4e90378..1180656f 100644 --- a/css/style.css +++ b/css/style.css @@ -9,10 +9,14 @@ --filter-bg-color: #DEEBFF; } -.fa-xs { +.fa-solid { color: var(--main-color); } +.fa-location-dot{ + color: black; +} + body { display: flex; justify-content: center; @@ -24,18 +28,79 @@ body { padding: 0 50px; box-sizing: border-box; } + +nav li{ + padding-left: 50px; + padding-right: 50px; +} + +nav ul { + list-style: none; + display: flex; + flex-direction: row; + justify-content: space-between; +} +ul a:hover{ + color: blue; + border-top: solid; + border-color: blue; +} + form{ width: 377px; height: 49px; border-radius: 15px; border: 1px; + display: flex; + padding-bottom: 18px; } +label{ + background-color: var(--main-bg-color); + width: 50px; + display: flex; + height: 49px; + justify-content: center; + flex-wrap: wrap; + flex-direction: column-reverse; + align-content: space-around; + align-items: flex-end; + border-radius: 15px 0px 0px 15px; +} +input::placeholder{ + color: black; + font-size: 18px; + font-weight: 700; + line-height: 21,13px; +} +input{ + border: none; + border-top: solid 1px lightgray; + border-bottom: solid 1px lightgray; + width: 147px; + height: 45px; + padding-left: 15px; + padding-right: 15px; +} +.button-rechercher { + width: 132px; + height: 50px; + border-radius: 0px 15px 15px 0px; + border: 1px; + background-color: #0065FC; + color: #FFFFFF; + font-size: 18px; + font-weight: 700; + line-height: 21px; + letter-spacing: 0em; + text-align: center; +} .filtres { display: flex; flex-direction: row; justify-content: space-between; + align-items: center; width: 758px; } @@ -51,15 +116,31 @@ form{ padding-right: 19px; padding-top: 4px; padding-bottom: 4px; - + height: 50px; +} +.filtres button:hover{ + background-color: #DEEBFF; +} +button i{ + padding-right: 10px; } .infobar { display: flex; flex-direction: row; justify-content: space-between; + align-items: center; width: 450px; } +.infobar i{ + border-radius: 50%; + border: solid 1px #9BA3AC; + width: 24px; + height: 24px; + display: flex; + justify-content: center; + align-items: center; +} a { color: inherit; text-decoration: none; @@ -221,24 +302,40 @@ header{ margin-bottom: 5px; } +/****** Activités à Marsaille ***********/ .activites-cards{ display: flex; flex-direction: row; justify-content: space-between; border-radius: 20px; - filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1)); } + +.activites-cards h3{ + font-size: 16px; + font-weight: 700; + line-height: 19px; + letter-spacing: 0em; + text-align: left; + padding-left: 20px; + padding-right: 19px; + padding-bottom: 19px; +} .activites-cards img{ width: 100%; - height: 100%; + height: 380px; border-top-left-radius: 20px; border-top-right-radius: 20px; } .acard-content{ width: 297px; - height: 380px; + height: 100%; + filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1)); +} +.acard-content a{ + display: block; + background-color: white; + border-radius: 20px; } - .footer-apropos{ background-color: #F2F2F2; margin-top: 70px; @@ -249,13 +346,18 @@ header{ display: flex; flex-direction: row; justify-content: space-between; - width: 1070px; + width: 1028px; } .fcolumn{ display: flex; flex-direction: column; - justify-content: space-between; + justify-content: flex-start; + padding-left: 20px; +} + +.fcolumn a{ + padding-bottom: 20px; } /* Le code ci-dessous correspond à la version responsive uniquement */ @@ -293,9 +395,149 @@ header{ .populaires-cards .card-subtitle { font-size: 13px; } + + .activites-cards{ + flex-wrap: wrap; + width: 100%; + } + + .activites-cards img{ + width: 100%; + height: 211px; + border-top-left-radius: 20px; + border-top-right-radius: 20px; + } + + .acard-content { + width: 22%; + height: 100%; + filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1)); + } + + .content-center{ + width: 97%; + } + + .footer-apropos { + margin-top: 34px + } } /* Small devices (phones, less than 768px) */ @media (max-width: 767.98px) { - /* ... */ + + body{ + margin: 0px; + } + .main-container { + width: 100%; + max-width: 1440px; + padding: 0px; + box-sizing: border-box; + } + + header{ + display: flex; + flex-direction: column; + } + + header img{ + margin-left: auto; + margin-right: auto; + } + + nav ul { + justify-content: center; + padding-left: 0px; + } + + ul a:hover{ + color: blue; + border-bottom: solid; + border-top: none; + border-color: blue; + } + + header img { + width: 101px; + padding-left: 100px; + height: 35px; + margin-top: 21px; + margin-left: 51px; + } + + h1, p{ + width: 350px; + } + .filtres { + flex-direction: row; + align-items: flex-start; + flex-wrap: wrap; + width: 350px; + } + .infobar{ + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + } + .infobar { + width: 100%; + } + + .infobar p { + padding-left: 10px; + } + + .hebergements-and-populaires { + flex-direction: column-reverse; + width: 100%; + } + + .hebergements-and-populaires section { + background-color: none; + } + .hebergements { + width: 100%; + } + + .populaires { + width: 100%; + background-color: var(--main-bg-color) + } + + .populaires-cards { + display: flex; + flex-direction: column; + } + + .populaires-cards a { + width: 100%; + } + + .content-center{ + flex-direction: column; + } + + .activites-cards{ + display: flex; + flex-direction: column; + } + + .activites-cards img{ + width: 100%; + height: 211px; + border-top-left-radius: 20px; + border-top-right-radius: 20px; + } + + .acard-content { + width: 100%; + height: 100%; + filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1)); + } + + .footer-apropos { + height: auto; + } } \ No newline at end of file diff --git a/images/icon/Vector.svg b/images/icon/Vector.svg deleted file mode 100644 index 09296b72..00000000 --- a/images/icon/Vector.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/images/icon/economique.svg b/images/icon/economique.svg deleted file mode 100644 index 4ad4ad48..00000000 --- a/images/icon/economique.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/images/icon/familial.svg b/images/icon/familial.svg deleted file mode 100644 index 41183da5..00000000 --- a/images/icon/familial.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/images/icon/info.svg b/images/icon/info.svg deleted file mode 100644 index 6ccf397b..00000000 --- a/images/icon/info.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/images/icon/romantique.svg b/images/icon/romantique.svg deleted file mode 100644 index 0148f758..00000000 --- a/images/icon/romantique.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/index.html b/index.html index 1967ff58..b71c3d10 100644 --- a/index.html +++ b/index.html @@ -20,12 +20,13 @@ logo @@ -38,31 +39,31 @@

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

- +

Filtres

- -

Plus de 500 logements sont disponibles dans cette ville

+ +

Plus de 500 logements sont disponibles dans cette ville

@@ -88,6 +89,7 @@

Auberge La Canebière

+
Image de la chambre d'hôtel montrant un lit
@@ -105,8 +107,9 @@

Hôtel du port

+ - +
Image de la chambre d'hôtel montrant un lit
@@ -124,8 +127,9 @@

Hôtel Les mouettes

- - + + +
Image de la chambre d'hôtel montrant un lit
@@ -143,8 +147,9 @@

Hôtel de la mer

+ - +
Image de la chambre d'hôtel montrant un lit
@@ -162,8 +167,9 @@

Auberge Le Panier

- - + + +
Image de la chambre d'hôtel montrant un lit
@@ -180,15 +186,18 @@

Hôtel Chez Amina

Note de 4 sur 5
-
+ +

Afficher plus

+

Les plus populaires

+
@@ -248,8 +257,11 @@

Hôtel Bleu et Blanc
+
+ +