diff --git a/css/style.css b/css/style.css index f6c96c4d..503750ed 100644 --- a/css/style.css +++ b/css/style.css @@ -1,10 +1,10 @@ -/****** General ***********/ -* { +/*********** General ***********/ +* { font-family: 'Raleway', sans-serif; } :root { - --main-color: #0065FC; + --main-color: #005de8; --main-bg-color: #F2F2F2; --filter-bg-color: #DEEBFF; } @@ -13,6 +13,10 @@ color: var(--main-color); } +html, body, h1, p { + margin: 0; +} + body { display: flex; justify-content: center; @@ -23,6 +27,9 @@ body { max-width: 1440px; padding: 0 50px; box-sizing: border-box; + display: flex; + flex-direction: column; + gap: 30px; } a { @@ -58,7 +65,136 @@ a { color: var(--main-bg-color) } -/****** Hebergements And Populaires ***********/ +/*********** HEADER ***********/ + +/** Nav **/ +.nav-header { + display: flex; + justify-content: space-between; + align-items: flex-start; +} + +#menu { + display: flex; + list-style: none; + gap: 68px; +} + +#menu a { + color: #090021; + padding-top: 14px; + font-size: 16px; +} + +#menu a:hover { + color: var(--main-color); + border-top: 3px solid var(--main-color); +} + +.logo-Booki { + height: 19px; + padding: 40px 0px 42px 0px; +} + +/** Recherche **/ + +.container-recherche { + display: flex; + flex-direction: column; + gap: 35px; +} + +.form-recherche { + display: flex; + align-items: center; + width: fit-content; + border-radius: 15px; + overflow: hidden; +} + +.icone-pin i { + background-color: #F2F2F2; + padding: 15px 18px; + font-size: 18px; + color: black; +} + +.input-recherche { + border: none; + padding: 14px; + font-size: 16px; + outline: none; + width: 220px; + border-top: 1px solid #F2F2F2; + border-bottom: 1px solid #F2F2F2; +} + +.bouton-recherche { + background-color: var(--main-color); + color: white; + border: none; + padding: 15px 25px; + cursor: pointer; + font-size: 16px; + font-weight: 700; + transition: background-color 0.2s; +} + +.bouton-recherche:hover { + background-color: #0050d4; +} + +/** Filtre **/ + +.container-filtre { + display: flex; + align-items: center; + gap: 15px; +} + +h3 { + font-size: 18px; +} + +.button-filtre { + padding: 4px 19px; + height: 50px; + border-radius: 25px; + border: 2px solid #D9D9D9; + background-color: white; + font-size: 17px; + font-weight: bold; + cursor: pointer; +} + +.button-filtre i { + margin-right: 7px; +} + +.button-filtre:hover { + background-color: #DEEBFF; +} + +/** Infos **/ + +.container-info { + display: flex; + align-items: center; + gap: 10px; +} + +.fa-info { + display: flex; + justify-content: center; + align-items: center; + width: 20px; + height: 20px; + border-radius: 50px; + border: 1px solid #D9D9D9; + padding: 2px; +} + +/*********** Hebergements And Populaires ***********/ .hebergements-and-populaires { display: flex; justify-content: space-between; @@ -71,12 +207,56 @@ a { box-sizing: border-box; } -/****** Hebergements ***********/ +/*********** Hebergements ***********/ .hebergements { width: 65%; } -/****** Populaires ***********/ +.hebergement-cards { + display: flex; + flex-wrap: wrap; + gap: 30px; + margin-top: 30px; +} + +.hebergement-cards a { + width: calc(33.333% - 20px); + box-sizing: border-box; +} + +.hebergement-cards .card { + display: flex; + flex-direction: column; + padding-bottom: 15px; + gap: 4px; +} + +.hebergement-cards img { + width: auto; + height: 136px; + border-top-left-radius: 20px; + border-top-right-radius: 20px; + margin-bottom: 5px; +} + +.card-content h3 { + margin: 0px; +} + +.hebergement-cards .card-content { + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 0px 15px; + gap: 8px; +} + +.hebergement-subtitle { + margin-top: 30px; + margin-bottom: 0px; +} + +/*********** Populaires ***********/ .populaires { width: 32%; } @@ -126,7 +306,7 @@ a { /* Le code ci-dessous correspond à la version responsive uniquement */ -/****** Media queries ***********/ +/*********** Media queries ***********/ /* Medium devices (tablets, less/equal than 1024px) */ @media (max-width: 1024px) { .hebergements-and-populaires { diff --git a/images/activites/Thumbs.db b/images/activites/Thumbs.db new file mode 100644 index 00000000..b55018d7 Binary files /dev/null and b/images/activites/Thumbs.db differ diff --git a/images/hebergements/Thumbs.db b/images/hebergements/Thumbs.db new file mode 100644 index 00000000..70b11cc3 Binary files /dev/null and b/images/hebergements/Thumbs.db differ diff --git a/images/hebergements/marcus-loke.jpg b/images/hebergements/auberge_canebiere.jpg similarity index 100% rename from images/hebergements/marcus-loke.jpg rename to images/hebergements/auberge_canebiere.jpg diff --git a/images/hebergements/nicate-lee.jpg b/images/hebergements/auberge_panier.jpg similarity index 100% rename from images/hebergements/nicate-lee.jpg rename to images/hebergements/auberge_panier.jpg diff --git a/images/hebergements/febrian-zakaria.jpg b/images/hebergements/hotel_chez_amina.jpg similarity index 100% rename from images/hebergements/febrian-zakaria.jpg rename to images/hebergements/hotel_chez_amina.jpg diff --git a/images/hebergements/annie-spratt.jpg b/images/hebergements/hotel_mer.jpg similarity index 100% rename from images/hebergements/annie-spratt.jpg rename to images/hebergements/hotel_mer.jpg diff --git a/images/hebergements/reisetopia.jpg b/images/hebergements/hotel_mouettes.jpg similarity index 100% rename from images/hebergements/reisetopia.jpg rename to images/hebergements/hotel_mouettes.jpg diff --git a/images/hebergements/fred-kleber.jpg b/images/hebergements/hotel_port.jpg similarity index 100% rename from images/hebergements/fred-kleber.jpg rename to images/hebergements/hotel_port.jpg diff --git a/images/logo/Thumbs.db b/images/logo/Thumbs.db new file mode 100644 index 00000000..60f5f9e9 Binary files /dev/null and b/images/logo/Thumbs.db differ diff --git a/index.html b/index.html index 53512c75..b0a76f5b 100644 --- a/index.html +++ b/index.html @@ -16,16 +16,168 @@
-
+
+ +
+

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

+
+ +
+ +
+

Hôtel du port

+

Nuit à partir de 52€

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

Hôtel du port

+

Nuit à partir de 96€

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

Hôtel du port

+

Nuit à partir de 76€

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

Hôtel du port

+

Nuit à partir de 46€

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

Hôtel du port

+

Nuit à partir de 25€

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

Hôtel du port

+

Nuit à partir de 23€

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

Afficher plus

Les plus populaires

- +