diff --git a/README.md b/README.md index cf39555f..0fcd9a39 100644 --- a/README.md +++ b/README.md @@ -1 +1,11 @@ +[![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)](https://developer.mozilla.org/en-US/docs/Web/HTML) +[![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)](https://developer.mozilla.org/en-US/docs/Web/CSS) + # booki-starter-pack +# Créez la page d'accueil d'une agence de voyage avec HTML5 & CSS3 + +## Installation +1. Cloner le dépôt : +- git clone https://github.com/ppxt-code/booki-starter-code.git +2. lancer l'application: +- sur index.html Mbdr/Open with Live Server \ No newline at end of file diff --git a/css/style.css b/css/style.css index f6c96c4d..63ae7d33 100644 --- a/css/style.css +++ b/css/style.css @@ -7,6 +7,12 @@ --main-color: #0065FC; --main-bg-color: #F2F2F2; --filter-bg-color: #DEEBFF; + --border-color: #D9D9D9; +} + +body { + margin: 0; + padding: 0; } .fa-solid { @@ -121,12 +127,336 @@ a { margin-bottom: 5px; } +/***** header ******/ +header { + display: flex; + flex-direction: row; + justify-content: space-between; + background-color: white; +} + +header nav ul { + display: flex; + flex-direction: row; + list-style: none; + /*gap: 68px;*/ +} + +header nav ul li { + margin-left: 68px; +} + +header img { + height: 19px; + padding: 30px 0px; +} + +.header-links:hover { + color: var(--main-color); +} + + +/* overline of .header-links */ +.header-links { + position: relative; + color: black; +} + +.header-links::before { + content: ""; + position: absolute; + left: 0; + right: 0; + top: -16px; + /* shifts line to the top */ + height: 2px; + /* line's thickness */ + background: var(--main-color); + opacity: 0; + /* non visible by default */ +} + +.header-links:hover::before { + opacity: 1; + /* render line at hover */ +} + +/* body main-container main */ +main { + display: flex; + flex-direction: column; + gap: 35px; + background-color: white; +} + +/***** Info group ****/ +.subtitle { + margin: 0; + padding: 0; +} + +.info { + display: flex; + flex-direction: column; + margin-top: 35px; + gap: 35px; +} + +/* search bar */ +.searchbar { + display: flex; + border-radius: 15px; + height: 49px; +} + +.searchbar i { + width: 50px; + border-top-left-radius: 15px; + border-bottom-left-radius: 15px; + background-color: var(--main-bg-color); + display: flex; + justify-content: center; + align-items: center; +} + +i.fa-solid.fa-location-dot { + color: black; +} + +.searchbar-txt { + background-color: white; + border: 1px solid var(--main-bg-color); + outline: none; + padding: 15px 16px; +} + +.searchbar-txt::placeholder { + color: black; +} + +.searchbar-button { + color: white; + border-top-right-radius: 15px; + border-bottom-right-radius: 15px; + background-color: var(--main-color); + border: none; + outline: none; + padding: 15px 16px; +} + +.font18 { + font-size: 18px; + font-weight: bold; +} + +.searchbar-button span { + display: inline; +} + +.searchbar-button i { + display: none; +} + +i.fa-solid.fa-magnifying-glass { + color: white; + background-color: var(--main-color); +} + +/* filter bar */ +.filterbar, +.div-filtre { + display: flex; + gap: 15px; +} + +.div-filtre2 { + display: flex; + gap: 15px; +} + +.subtitle { + display: flex; + align-items: center; +} + +.filterbutton { + display: inline-flex; + flex-direction: row; + align-items: center; + justify-content: center; + border-radius: 25px; + padding: 15px; + /*4px 19px;*/ + border: 2px solid var(--border-color); + gap: 10px; +} + +.filterbutton:hover { + background-color: #DEEBFF; +} + +.filterbutton-txt { + font-size: 17px; + font-weight: bold; +} + + +/* info bar */ +.infobar { + display: inline-flex; + align-items: center; + gap: 10px; +} + +.font16 { + font-size: 16px; +} + +.fa-circle-info { + color: white; + background-color: var(--main-color); + border-radius: 50%; + border: 1px solid var(--border-color); +} + +/***** Hebergements ****/ +.hebergements { + display: flex; + flex-direction: column; + gap: 30px; +} + +.main-cards { + display: flex; + gap: 30px; +} + +.cardmain { + display: flex; + flex-direction: column; + flex: 1 1 0; + min-width: 0; + height: 207.25px; +} + +.main-cards a { + display: flex; + width: 100%; +} + +.cardmain img { + max-width: 100%; + object-fit: cover; + height: 59.8%; + /*width: 243px;*/ + border-top-left-radius: 20px; + border-top-right-radius: 20px; +} + +.cardmain .card-content { + height: 40.2%; + padding-left: 15px; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: flex-start; + box-sizing: border-box; + gap: 8px; +} + +.card-txt { + display: flex; + flex-direction: column; + gap: 8px; +} + +.card-txt h3 { + margin: 0; +} + +.card-txt p { + margin: 0; +} + +.populaires-cards .card-subtitle, +.main-cards .card-subtitle { + font-size: 14px; +} + +/***** activites ******/ +.activites { + display: flex; + flex-direction: column; + gap: 30px; + padding: 30px; + background-color: white; +} + +.activites-cards { + display: flex; + gap: 30px; +} + +.activites-cards a { + display: flex; + width: 100%; +} + +.cardactivite { + /*filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1));*/ + box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1); + border-radius: 20px; + flex: 1 1 0; +} +.cardactivite img { + width: 100%; + object-fit: cover; + border-top-left-radius: 20px; + border-top-right-radius: 20px; + height: 380px; +} +.cardactivite .card-content { + display: flex; + align-items: center; + border-bottom-left-radius: 20px; + border-bottom-right-radius: 20px; + padding: 20px 19px; +} + +.card-content h3 { + margin: 0; +} + +/***** footer ******/ +.footer-div { + display: flex; + padding: 30px; + gap: 50px; + background-color: var(--main-bg-color); + margin-top: 35px; +} + +.footer-div div { + flex: 1; + display: flex; + flex-direction: column; + gap: 15px; +} + +.footer-div div ul { + list-style-type: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: 15px; +} -/* Le code ci-dessous correspond à la version responsive uniquement */ /****** Media queries ***********/ + /* Medium devices (tablets, less/equal than 1024px) */ @media (max-width: 1024px) { .hebergements-and-populaires { @@ -150,18 +480,176 @@ a { .populaires-cards a { width: 30%; + display: flex; } - .populaires-cards .card-title { + .populaires-cards .card { + align-items: stretch; + } + /*.populaires-cards .card-title { font-size: 14px; } .populaires-cards .card-subtitle { font-size: 13px; + }*/ + + /***** Info group ****/ + /* filter bar */ + .filterbar { + flex-direction: column; + } + + /***** activites ******/ + .cardactivite img { + height: 200px; } } /* Small devices (phones, less than 768px) */ @media (max-width: 767.98px) { - /* ... */ + body { + background-color: var(--main-bg-color); + } + + .main-container { + padding: 0; + } + + /***** populaires *****/ + .populaires { + margin: 0; + } + + .populaires-cards { + width: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + } + + .populaires-cards a { + display: flex; + width: 100%; + } + + .populaires-cards .card { + width: 100%; + } + + /***** header *****/ + /* underline of .header-links */ + header { + flex-direction: column; + align-items: center; + } + + .header-links::before { + content: ""; + position: absolute; + left: 0px; + right: 0px; + top: 32px; + /* shifts line to the bottom */ + height: 2px; + background: var(--main-bg-color); + opacity: 1; + /* always visible */ + } + + .header-links:hover::before { + background: var(--main-color); + } + + /* align header */ + header nav { + width: 100%; + } + + header nav ul { + padding: 0; + } + + header nav ul li { + margin-left: 0px; + width: 100%; + } + + header nav ul li a { + display: block; + text-align: center; + } + + /***** Info group ****/ + .info { + background-color: white; + box-sizing: border-box; + padding: 30px; + margin: 0; + } + + /* search bar */ + .searchbar-txt { + width: 100%; + } + + .searchbar-button span { + display: none; + } + + .searchbar-button i { + display: inline; + } + + .searchbar-button { + border-top-left-radius: 15px; + border-bottom-left-radius: 15px; + box-shadow: 0 3px 0 0 var(--border-color); + } + + /* filter bar */ + .div-filtre { + flex-direction: column; + } + + .div-filtre2 { + flex-wrap: wrap; + } + + .filterbutton { + flex: 1; + } + + .filterbutton-txt { + font-size: 14px; + } + + /***** Hebergements ****/ + .main-cards { + flex-direction: column; + } + + .hebergements-and-populaires section { + border-radius: 0px; + } + + .hebergements-and-populaires section.hebergements { + order: 1; + /*populaires has order 0 by default, hebergements with greater order displayed after*/ + background-color: white; + } + + /***** activites ******/ + .activites-cards { + flex-direction: column; + } + + .cardactivite img { + height: 141px; + } + + /***** footer ******/ + .footer-div { + flex-direction: column; + } } \ No newline at end of file diff --git a/index.html b/index.html index 53512c75..6bc8e48a 100644 --- a/index.html +++ b/index.html @@ -1,96 +1,432 @@ - - - - + + + Booki - - - - - - + + + + + + - +
-
-
-
-
+
+ Logo de Booki + +
+
+
+
+

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

+

En plein centre ville ou en pleine nature

+
+
+
+ + + +
+
+
+
Filtres
+
+
+
+ + Économique +
+
+ + Familial +
+
+
+
+ + Romantique +
+
+ + Nos pépites +
+
+
+
+
+ +

+ Plus de 500 logements sont disponibles dans cette ville +

+
+
+
+
+

Hébergements à Marseille

+
+ +
+ chambre grise avec 2 lits +
+
+

Hôtel du port

+

+ Nuit à partir de 52€ +

+
+
+ + + + + + Note de 4 sur 5 +
+
+
+ + +
+ lit avec bureau et fenetre +
+
+

Hôtel chez Amina

+

+ Nuit à partir de 96€ +

+
+
+ + + + + + Note de 4 sur 5 +
+
+
+ + +
+ lit avec chevet et armoire vitree +
+
+

Hôtel Les mouettes

+

+ Nuit à partir de 76€ +

+
+
+ + + + + + Note de 4 sur 5 +
+
+
+ +
+
+ +
+ lit double avec tableau ambiance la mer +
+
+

Hôtel de la mer

+

+ Nuit à partir de 46€ +

+
+
+ + + + + + Note de 4 sur 5 +
+
+
+ + +
+ lit double superposé avec fenetre +
+
+

Auberge La Canebière

+

+ Nuit à partir de 25€ +

+
+
+ + + + + + Note de 4 sur 5 +
+
+
+ + +
+ lits double superposés en bois +
+
+

Auberge Le Panier

+

+ Nuit à partir de 23€ +

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

Les plus populaires

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

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

Les plus populaires

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

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

Activités à Marseille

+
+ +
+ bateaux dans un port +
+

Vieux-Port

+
+
+ + +
+ fort sur pierres roses +
+

Fort de Pomègues

+
+
+ + +
+ crique +
+

Parc national des Calanques

+
+
+ + +
+ mont avec une chapelle +
+

Notre-Dame-de-la-Garde

+
+
+ +
+
+ + - - - \ No newline at end of file + +