diff --git a/css/style.css b/css/style.css index f6c96c4d..830d2ca9 100644 --- a/css/style.css +++ b/css/style.css @@ -21,6 +21,7 @@ body { .main-container { width: 100%; max-width: 1440px; + min-width: 320px; padding: 0 50px; box-sizing: border-box; } @@ -39,15 +40,31 @@ a { background-color: white; border-radius: 20px; padding: 5px; - filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1)); + filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.1)); +} + +.card-two { + background-color: white; + border-radius: 20px; + padding-bottom: 5px; + filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.1)); } .card img { object-fit: cover; } +.card-two img { + object-fit: cover; +} + .card-title { font-size: 16px; + margin: 0; +} + +.card-subtitle { + margin: 0; } .euro { @@ -58,10 +75,210 @@ a { color: var(--main-bg-color) } +ul { + list-style-type: none; + padding: 0; +} + +h1 { + font-size: 22px; +} + +/********* Header *********/ + +nav { + display: flex; + justify-content: space-between; + align-items: center; +} + +.header { + width: 100%; + max-width: 1440px; +} + +#img_logo { + align-items: center; + width: 61px; + height: 19px; + +} +.linktop { + display: flex; + margin-bottom: 50px; + gap: 68px; +} + +.linka { + padding-top: 16px; + width: 112px; + height: 19px; + border-top: 2px solid transparent; +} + +.linkb { + padding-top: 16px; + width: 63px; + height: 19px; + border-top: 2px solid transparent; +} +/*************** Attention border top bleu en dessous sur la vers. mobile ****************/ + +.linka:hover { + color: #0065FC; + border-top:2px solid #0065FC; +} + +.linkb:hover { + color: #0065FC; + border-top:2px solid #0065FC; +} + +/********** Search Main ***********/ + +.search-main { + display: flex; + flex-direction: column; +} + +.search-main h1 { + margin-bottom: 0; +} + +.search-main p { + margin-top: 5px; + margin-bottom: 30px; +} + +.search-main .recherche-container { + margin-bottom: 20px; +} + +.search-main .filtre-container { + margin-bottom: 20px; +} +/******************** barre de recherche Marseille, Paris ***********************/ + +.recherche-container { + display: flex; +} + +.title-filter { + font-size: 18px; +} + +.rechercheA { + border: 1px solid #F2F2F2; + border-top-left-radius: 15px; + border-bottom-left-radius: 15px; + border-right: none; + width: 50px; + height: 49px; + padding: 0; +} +.fa-location-dot { + color: black; + } + +#rechercheB { + border-top: 1px solid #F2F2F2; + border-bottom: 1px solid #F2F2F2; + border-left: none; + border-right: none; + height: 48px; + text-align: start; + padding: 0 0 0 30px; +} + +.rechercheC { + border: 1px solid #0065FC; + background-color: #0065FC; + border-top-right-radius: 15px; + border-bottom-right-radius: 15px; + border-left: none; + width: 132px; + height: 49px; + color: white; + padding: 0; +} + +.recherche-container> input { + font-size: 18px; + font-weight: bold; +} + +/* .recherche-container> ::placeholder { + font-size: 18px; + font-weight: bold; + color: black; +} */ + +.recherche-container> .rechercheC, button { + font-weight: bold; + font-size: 16px; +} + +/******************* Filtres **********************/ + +.filtre-container { + display: flex; + flex-wrap: wrap; + align-items: center; + width: 100%; +} + +.filtre-buttons> button { + height: 50px; + border: 2px solid #D9D9D9; + border-radius: 25px; + background-color: white; + font-size: 17px; + padding: 4px 19px; + margin: 4px; +} + + +.magnifying-glass { + display: none; +} + +.title-filter { + margin-right: 4px; +} + +.filtre-buttons> button> i { + padding-right: 8px; +} + +.filtre-buttons> button:hover { + background-color: #DEEBFF; +} + +/************* Info *****************/ + +.infogrames { + display: flex; + align-items: last baseline; + gap: 6px; +} + +.fa-info { + display: flex; + justify-content: center; + align-items: center; + font-size: 12px; + border: 1.5px solid #D9D9D9; + border-radius: 100%; + width: 24px; + height: 24px; +} /****** Hebergements And Populaires ***********/ + .hebergements-and-populaires { display: flex; justify-content: space-between; + margin-bottom: 3%; + gap: 3%; } .hebergements-and-populaires section { @@ -72,13 +289,79 @@ a { } /****** Hebergements ***********/ -.hebergements { - width: 65%; +.hebergement { + width: 70%; +} + +.hebergements-title { + align-items: center; +} + +.hebergements-cards .card { + display: flex; + flex-direction: column; + margin-top: 33px; + width: 100%; +} + +.hebergements-cards img { + border-top-left-radius: 20px; + border-top-right-radius: 20px; + width: 100%; + height: 110px; +} + +.hebergements-line-top { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + gap: 40px; +} + +.hebergements-line-bottom { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + gap: 40px; +} + +.flex1 { + flex: 1; +} + +.hebergements-cards .card-content { + width: 100%; + margin-left: 5%; + display: flex; + flex-direction: column; + justify-content: space-between; + box-sizing: border-box; +} + +.hebergements-cards .card-title { + margin-top: 8px; + margin-bottom: 4px; +} + +.hebergements-cards .card-subtitle { + margin-top: 10px; +} + +.hebergements-cards .card-rating{ + margin-top: 3px; + margin-bottom: 3px; +} + +.hebergements-show> h3 { + display: flex; + align-items: center; + margin-bottom: 0; + margin-top: 35px; } /****** Populaires ***********/ .populaires { - width: 32%; + width: 33%; } .populaires-title { @@ -87,6 +370,10 @@ a { align-items: center; } +.populaires-cards { + gap: 3%; +} + .populaires-cards .card { display: flex; margin-top: 33px; @@ -121,7 +408,73 @@ a { margin-bottom: 5px; } +/***** Activity Marseille *******/ +.activity { + width: 96%; + padding: 30px; +} +.activity-title { + display: flex; + align-items: center; + margin-bottom: 0; +} + +.activity-cards { + display: flex; + flex-direction: row; + gap: 30px; +} + +.activity-cards .card-two { + flex-wrap: nowrap; + justify-content: space-between; + flex-direction: column; + margin-top: 10px; + width: 100%; +} + +.activity-cards img { + width: 100%; + height: 400px; + border-top-left-radius: 20px; + border-top-right-radius: 20px; +} + +.activity-cards .card-title { + display: flex; + align-items: center; + height: 25px; + padding: 12px 19px 12px 19px; +} + +.flex4 { + flex: 1; +} + +/***** footer ********/ + +.search-footer { + display: flex; + padding: 5px 0 0 20px ; + gap: 30px; + background-color: #F2F2F2; + font-size: 18px; +} + +.search-footer> div { + gap: 15px; + width: 33%; + height: 163px; +} + +.search-footer h2 { + font-size: 18px; +} + +.search-footer li { + margin-bottom: 10px; +} /* Le code ci-dessous correspond à la version responsive uniquement */ @@ -133,8 +486,26 @@ a { flex-direction: column; } - .hebergements { - width: 100%; + .recherche-container { + align-items: center; + } + + .filtre-container { + flex-direction: column; + } + + .filtre-container> h2 { + align-self: baseline; + } + + .filtre-buttons { + align-self: baseline; + white-space: nowrap + } + + .hebergement { + width: 98%; + background-color: #F2F2F2; } .populaires { @@ -142,6 +513,12 @@ a { margin-top: 50px; } + .hebergements-card { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + } + .populaires-cards { display: flex; flex-direction: row; @@ -153,15 +530,233 @@ a { } .populaires-cards .card-title { - font-size: 14px; + font-size: 16px; } .populaires-cards .card-subtitle { font-size: 13px; } + + .activity { + width: 94%; + } + + .activity-cards img { + height: 200px; + } + + .search-footer { + font-size: 16px; + } + } /* Small devices (phones, less than 768px) */ @media (max-width: 767.98px) { + body { + margin: 0; + } + + .main-container { + padding: 0; + min-width: 320px; + } + + .first-container { + margin-right: 16px; + } + + nav { + flex-direction: column; + } + + .linktop { + width: 100%; + display: flex; + gap: 0px; + margin-bottom: 30px; + } + + .linktop> a { + border-bottom: 2px solid #F2F2F2; + width: 50%; + text-align: center; + padding: 0 0 20px 0; + border-top: none; + font-size: 18px; + } + + .linktop> a:hover { + border-bottom: 2px solid #0065FC; + border-top: none; + } + + h1 { + margin: 0; + font-size: 24px; + } + + .logo1 { + padding: 5%; + margin: 0 auto; + margin-bottom: 8px; + } + + .fa-location-dot { + font-size: 18px; + } + + .rechercheA { + min-width: 50px; + height: 49px; + } + + .rechercheC { + display: none; + } + + .recherche-container { + display: flex; + justify-content: center; + align-items: center; + } + + .recherche-container> input { + width: 80%; + font-size: 20px; + font-weight: bold; + } + + .magnifying-glass { + display: flex; + border: 1px solid #0065FC; + background-color: #0065FC; + border-radius: 15px; + width: 49px; + height: 49px; + justify-content: center; + align-items: center; + box-shadow: 0px 3px 7px grey; + } + + .fa-magnifying-glass { + color: white; + font-size: 14px; + } + + .filtre-container { + flex-direction: column; + } + + .filtre-buttons { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + width: 100%; + } + + .filtre-container> h2 { + align-self: baseline; + } + + .filtre-buttons> button { + width: 46%; + padding: 0; + font-size: 14px; + font-weight: bold; + } + + .filtre-buttons> button> i { + font-size: 16px; + } + + .fa-info { + font-size: 12px; + width: 22px; + min-width: 22px; + height: 22px; + align-self: center; + } + + .infogrames> p { + margin: 0; + } + + .hebergements-and-populaires section:nth-child(1) { + background: none; + } + + + .hebergements-and-populaires { + flex-direction: column-reverse; + } + + .hebergements-and-populaires section { + border-radius: 0; + padding: 20px; + } + + .hebergements-line-top { + flex-direction: column; + gap: 2px; + } + + .hebergements-line-bottom { + flex-direction: column; + gap: 2px; + } + + .card { + margin-top: 0; + } + + .populaires-cards, .hebergement .card { + margin-top: 18px; + } + + .hebergements-title { + padding-top: 18px; + } + + .populaires-cards { + flex-direction: column; + } + + .activity-cards { + flex-direction: column; + gap: 10px; + } + + .activity { + padding: 20px; + width: 89%; + margin-bottom: 30px; + } + + .activity-cards img { + height: 141px; + } + + .hebergements-show> h3 { + margin-top: 18px; + } + + .activity-title> h2 { + padding: 0 0 18px 0; + margin: 0; + } + + .first-container { + margin-left: 14px; + } + + .search-footer { + flex-direction: column; + height: 450px; + } + + .search-footer> div { + width: 100%; + } /* ... */ } \ No newline at end of file diff --git a/index.html b/index.html index 53512c75..1c9ec9f0 100644 --- a/index.html +++ b/index.html @@ -1,96 +1,562 @@ - - - - + + + Booki - - - - - - + + + + + + - +
-
-
-
-
- -
-
-
-

Les plus populaires

- +
+
+ +
+
+
+
+
+
+

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

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

+

+ Nuit à partir de 96€ +

+
+
+ + + + + + 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 La Canebière

+

+ Nuit à partir de 25€ +

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

Afficher plus

+
+
+
+
+

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

Activités à Marseille

+
+
+
+ +
+ Images du vieux-port +
+

Vieux-port

+
+
+
-
- +
+ +
+ Images du vieux-port +
+

Fort de Pomègues

+
+
+ +
+
+ +
+ Images du vieux-port +
+

Parc national des Calanques

+
+
+ +
+
+ +
+ Images du vieux-port +
+

Notre-Dame-de-la-Garde

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