diff --git a/css/style.css b/css/style.css index f6c96c4d..1180656f 100644 --- a/css/style.css +++ b/css/style.css @@ -9,10 +9,14 @@ --filter-bg-color: #DEEBFF; } -.fa-solid { +.fa-solid { color: var(--main-color); } +.fa-location-dot{ + color: black; +} + body { display: flex; justify-content: center; @@ -25,6 +29,118 @@ body { 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; +} + +.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; + 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; @@ -35,6 +151,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 +197,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 +302,63 @@ a { margin-bottom: 5px; } +/****** Activités à Marsaille ***********/ +.activites-cards{ + display: flex; + flex-direction: row; + justify-content: space-between; + border-radius: 20px; +} + +.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: 380px; + border-top-left-radius: 20px; + border-top-right-radius: 20px; +} +.acard-content{ + width: 297px; + 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; + height: 170px; +} + +.content-center{ + display: flex; + flex-direction: row; + justify-content: space-between; + width: 1028px; +} +.fcolumn{ + display: flex; + flex-direction: column; + justify-content: flex-start; + padding-left: 20px; +} +.fcolumn a{ + padding-bottom: 20px; +} /* Le code ci-dessous correspond à la version responsive uniquement */ @@ -159,9 +395,149 @@ a { .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/index.html b/index.html index 53512c75..b71c3d10 100644 --- a/index.html +++ b/index.html @@ -12,21 +12,192 @@ 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

+

Les plus populaires

+
@@ -86,11 +257,64 @@

Hôtel Bleu et Blanc
+
+
+
- +
- \ No newline at end of file + \ No newline at end of file