From 163d891f094e4194853fdb324a94fcbb0b067237 Mon Sep 17 00:00:00 2001 From: Marie Casana Date: Wed, 14 May 2025 16:01:38 +0200 Subject: [PATCH 1/5] Created Header Section --- css/style.css | 23 +++++++++++++++++++++++ index.html | 12 +++++++++++- 2 files changed, 34 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index f6c96c4d..61ec2605 100644 --- a/css/style.css +++ b/css/style.css @@ -58,6 +58,29 @@ a { color: var(--main-bg-color) } + +/* Header */ +header{ + display: flex; + justify-content: space-between; + flex-wrap: wrap; + +} + +nav ul { + display: flex; + gap: 68px; + list-style: none; + padding: 0; + margin: 0; + } + +nav ul a:hover{ + color: var(--main-color); + border-top: 2px solid var(--main-color); + padding-top:7px; +} + /****** Hebergements And Populaires ***********/ .hebergements-and-populaires { display: flex; diff --git a/index.html b/index.html index 53512c75..9e48eea3 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,17 @@
-
+
+ Logo Booki + +
From 5801d32ee7d08a854f4ae1cc83032efd06c798aa Mon Sep 17 00:00:00 2001 From: Marie Casana Date: Wed, 14 May 2025 20:36:24 +0200 Subject: [PATCH 2/5] Created Search Container and H1 --- css/style.css | 78 +++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 17 +++++++++++ 2 files changed, 95 insertions(+) diff --git a/css/style.css b/css/style.css index 61ec2605..1f1218ad 100644 --- a/css/style.css +++ b/css/style.css @@ -81,6 +81,84 @@ nav ul a:hover{ padding-top:7px; } +/*** main ***/ +/* h1 */ +h1 { + display: none; +} + +/* Text search and filter */ +.search-container { + display: flex; + flex-direction: column; + gap: 24px; +} + +.text-presentation { + margin-top: 53px; +} + +.text-presentation h2 { + margin-bottom: 7px; +} + +.text-presentation p { + margin-top: 0; +} + +form{ + display: flex; + width: fit-content; +} + +form label, form input { + padding: 15px; + text-align: center; +} + +#search-input { + font-weight: 700; + font-size: 18px; + border: 1px solid var(--main-bg-color); + border-left: none; + border-right: none; +} + +.fa-magnifying-glass { + display: none; +} + +.fa-location-dot { + color: black; + font-size: 18px; + cursor: pointer; + padding-inline: 6px; +} + +.bg-icon-location { + background-color: var( --main-bg-color); + border: 1px solid var(--main-bg-color); + border-bottom-left-radius: 15px; + border-top-left-radius: 15px; + overflow: hidden; +} + +input::placeholder { + color: black; +} + +.submit { + background-color: var(--main-color); + color: white; + font-weight: 700; + font-size: 18px; + cursor: pointer; + border: 1px solid var(--main-color); + border-bottom-right-radius: 15px; + border-top-right-radius: 15px; + overflow: hidden; +} + /****** Hebergements And Populaires ***********/ .hebergements-and-populaires { display: flex; diff --git a/index.html b/index.html index 9e48eea3..6e420f45 100644 --- a/index.html +++ b/index.html @@ -28,6 +28,23 @@
+

Accueil

+
+
+

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

+

En plein centre-ville ou en pleine nature

+
+
+
+ + + +
+
+
+ +
+
From 7b49a4254d610a360a3a878106538c4837b56f59 Mon Sep 17 00:00:00 2001 From: Marie Casana Date: Thu, 15 May 2025 17:33:14 +0200 Subject: [PATCH 3/5] Improved header and search container finish --- css/style.css | 108 ++++++++++++++++++++++++++++++++++++++++---------- index.html | 19 +++++---- 2 files changed, 100 insertions(+), 27 deletions(-) diff --git a/css/style.css b/css/style.css index 1f1218ad..e72e7705 100644 --- a/css/style.css +++ b/css/style.css @@ -7,6 +7,7 @@ --main-color: #0065FC; --main-bg-color: #F2F2F2; --filter-bg-color: #DEEBFF; + --border-color: #D9D9D9; } .fa-solid { @@ -36,7 +37,7 @@ a { } .card { - background-color: white; + background-color: initial; border-radius: 20px; padding: 5px; filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1)); @@ -60,40 +61,53 @@ a { /* Header */ -header{ +header { display: flex; justify-content: space-between; flex-wrap: wrap; +} +header img { + width: 35%; + padding-top: 15px; } nav ul { - display: flex; - gap: 68px; - list-style: none; - padding: 0; - margin: 0; + display: flex; + gap: 60px; + list-style: none; + padding: 0; + margin: 0; } -nav ul a:hover{ - color: var(--main-color); - border-top: 2px solid var(--main-color); - padding-top:7px; +nav ul a:hover { + color: var(--main-color); + border-top: 2px solid var(--main-color); + padding-top: 7px; } -/*** main ***/ -/* h1 */ +/*** Main ***/ +/* H1 */ h1 { display: none; } -/* Text search and filter */ +/* Text Search and Filter */ .search-container { display: flex; flex-direction: column; gap: 24px; } +h2 { + font-size: 1.4rem; +} + +h3 { + font-weight: 400; + font-size: 1rem; +} + .text-presentation { margin-top: 53px; } @@ -102,23 +116,23 @@ h1 { margin-bottom: 7px; } -.text-presentation p { +.text-presentation h3 { margin-top: 0; } -form{ +form { display: flex; width: fit-content; } form label, form input { padding: 15px; - text-align: center; + text-align: center; + font-size: 1.1rem; } #search-input { font-weight: 700; - font-size: 18px; border: 1px solid var(--main-bg-color); border-left: none; border-right: none; @@ -130,7 +144,6 @@ form label, form input { .fa-location-dot { color: black; - font-size: 18px; cursor: pointer; padding-inline: 6px; } @@ -147,11 +160,14 @@ input::placeholder { color: black; } +input:focus::placeholder { + color: rgba(128, 128, 128, 0.473); +} + .submit { background-color: var(--main-color); color: white; font-weight: 700; - font-size: 18px; cursor: pointer; border: 1px solid var(--main-color); border-bottom-right-radius: 15px; @@ -159,6 +175,58 @@ input::placeholder { overflow: hidden; } +/* Filter-list and Filter-info */ +.filter-list { + display: flex; + flex-wrap: wrap; + flex-direction: row; + align-items: center; + list-style: none; + gap: 15px; + padding: 0; +} + +.filter-list i { + padding-right: 10px; + font-size: 1.3rem; +} + +.filter-list h3, .filter-list button { + font-weight: 700; + font-size: 1rem; +} + +.filter-list button { + background-color: initial; + border-radius: 25px; + border: 2px solid var(--border-color); + padding: 10px 18px; +} + +.filter-list button:hover { + background-color: #DEEBFF; + cursor: pointer; +} + +.filter-info { + display: flex; + align-items: center; + gap: 10px; + margin: 0 0 40px 0; +} + +.fa-info { + display: flex; + justify-content: center; + align-items: center; + border-radius: 50%; + width: 24px; + height: 24px; + font-size: 0.7rem; + border: 1px solid var(--border-color); + flex-shrink: 0; +} + /****** Hebergements And Populaires ***********/ .hebergements-and-populaires { display: flex; diff --git a/index.html b/index.html index 6e420f45..7caeb2d2 100644 --- a/index.html +++ b/index.html @@ -17,22 +17,20 @@
- Logo Booki + Logo Booki
-

Accueil

+

Accueil

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

-

En plein centre-ville ou en pleine nature

+

En plein centre-ville ou en pleine nature

@@ -41,9 +39,16 @@

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

-
- +
+
    +

  • Filtres

    • +
    • +
    • +
    • +
    • +
+

Plus de 500 logements sont disponibles dans cette ville

From 07bcec7447d33fa53b3ef219ca69aaee26178ebb Mon Sep 17 00:00:00 2001 From: Marie Casana Date: Sat, 17 May 2025 20:07:14 +0200 Subject: [PATCH 4/5] First draft index.html and style.css --- css/style.css | 710 +++++++++++++++++++++++++++++++++++++------------- index.html | 225 ++++++++++++++-- 2 files changed, 734 insertions(+), 201 deletions(-) diff --git a/css/style.css b/css/style.css index e72e7705..52ea811c 100644 --- a/css/style.css +++ b/css/style.css @@ -1,336 +1,678 @@ -/****** General ***********/ +/****** General ******/ * { - font-family: 'Raleway', sans-serif; + font-family: "Raleway", sans-serif; } :root { - --main-color: #0065FC; - --main-bg-color: #F2F2F2; - --filter-bg-color: #DEEBFF; - --border-color: #D9D9D9; + --main-color: #0065fc; + --main-bg-color: #f2f2f2; + --filter-bg-color: #deebff; + --border-color: #d9d9d9; } .fa-solid { - color: var(--main-color); + color: var(--main-color); } body { - display: flex; - justify-content: center; + display: flex; + justify-content: center; +} + +html { + height: 100%; } .main-container { - width: 100%; - max-width: 1440px; - padding: 0 50px; - box-sizing: border-box; + width: 100%; + max-width: 1440px; + padding: 0 50px; + box-sizing: border-box; } a { - color: inherit; - text-decoration: none; + color: inherit; + text-decoration: none; } .section-title { - margin: 0; - font-size: 22px; + margin: 0; + font-size: 22px; } .card { - background-color: initial; - border-radius: 20px; - padding: 5px; - filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1)); + background-color: white; + border-radius: 20px; + padding: 5px; + filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1)); } .card img { - object-fit: cover; + object-fit: cover; } .card-title { - font-size: 16px; + font-size: 16px; } .euro { - font-weight: 700; + font-weight: 700; } .neutral-star { - color: var(--main-bg-color) + color: var(--main-bg-color); } +/****** Header and Line mobile ******/ +.line-mobile { + display: none; +} -/* Header */ header { - display: flex; - justify-content: space-between; - flex-wrap: wrap; + display: flex; + justify-content: space-between; + flex-wrap: wrap; } header img { - width: 35%; - padding-top: 15px; + height: 19px; + padding-top: 15px; } nav ul { - display: flex; - gap: 60px; - list-style: none; - padding: 0; - margin: 0; - } + display: flex; + gap: 60px; + list-style: none; + padding: 0; + margin: 0; +} nav ul a:hover { - color: var(--main-color); - border-top: 2px solid var(--main-color); - padding-top: 7px; + color: var(--main-color); + border-top: 2px solid var(--main-color); + padding-top: 7px; } -/*** Main ***/ +/****** Main ******/ /* H1 */ h1 { - display: none; + display: none; } -/* Text Search and Filter */ +/****** Search bar and Filters categories ******/ +/* Search bar */ .search-container { - display: flex; - flex-direction: column; - gap: 24px; + display: flex; + flex-direction: column; + gap: 24px; } h2 { - font-size: 1.4rem; + font-size: 1.4rem; } -h3 { - font-weight: 400; - font-size: 1rem; +.search-container h3 { + font-weight: 400; } .text-presentation { - margin-top: 53px; + margin-top: 53px; } .text-presentation h2 { - margin-bottom: 7px; + margin-bottom: 7px; } .text-presentation h3 { - margin-top: 0; -} - -form { - display: flex; - width: fit-content; + margin-top: 5px; } -form label, form input { - padding: 15px; - text-align: center; - font-size: 1.1rem; +.search-bar { + display: flex; } -#search-input { - font-weight: 700; - border: 1px solid var(--main-bg-color); - border-left: none; - border-right: none; +.search-input { + display: flex; + justify-content: center; + align-items: center; + font-weight: 700; + border: 1px solid var(--main-bg-color); + border-left: none; + border-right: none; + padding-left: 25px; + font-size: 1.2rem; + cursor: pointer; } -.fa-magnifying-glass { - display: none; +.bg-icon-location { + display: flex; + justify-content: center; + align-items: center; + background-color: var(--main-bg-color); + border: 1px solid var(--main-bg-color); + border-bottom-left-radius: 15px; + border-top-left-radius: 15px; + overflow: hidden; + padding: 15px; + cursor: pointer; } .fa-location-dot { - color: black; - cursor: pointer; - padding-inline: 6px; + color: black; + font-size: 1.2rem; + + /* line-height: auto; + height: auto; + vertical-align: middle; */ } -.bg-icon-location { - background-color: var( --main-bg-color); - border: 1px solid var(--main-bg-color); - border-bottom-left-radius: 15px; - border-top-left-radius: 15px; - overflow: hidden; +.search-input::placeholder { + color: black; } -input::placeholder { - color: black; +.search-input:focus::placeholder { + color: rgba(128, 128, 128, 0.473); } -input:focus::placeholder { - color: rgba(128, 128, 128, 0.473); +.search-input:focus { + outline: none; } .submit { - background-color: var(--main-color); - color: white; - font-weight: 700; - cursor: pointer; - border: 1px solid var(--main-color); - border-bottom-right-radius: 15px; - border-top-right-radius: 15px; - overflow: hidden; + display: flex; + justify-content: center; + align-items: center; + background-color: var(--main-color); + color: white; + font-weight: 700; + border: 1px solid var(--main-color); + border-bottom-right-radius: 15px; + border-top-right-radius: 15px; + overflow: hidden; + padding: 15px; + cursor: pointer; } -/* Filter-list and Filter-info */ -.filter-list { - display: flex; - flex-wrap: wrap; - flex-direction: row; - align-items: center; - list-style: none; - gap: 15px; - padding: 0; +.btn-icon { + display: none; } -.filter-list i { - padding-right: 10px; - font-size: 1.3rem; +.btn-text { + font-size: 18px; } -.filter-list h3, .filter-list button { - font-weight: 700; - font-size: 1rem; +/* Filter categories */ +.filter-categories { + list-style: none; +} + +.filter-categories { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 15px; + padding: 0; } -.filter-list button { - background-color: initial; - border-radius: 25px; - border: 2px solid var(--border-color); - padding: 10px 18px; +.filters { + display: flex; + align-items: center; + gap: 15px; } -.filter-list button:hover { - background-color: #DEEBFF; - cursor: pointer; +.filters h3 { + font-weight: 700; +} + +.filter-categories i { + padding-right: 10px; + font-size: 1.3rem; +} + +.filter-categories h3, +.filter-categories button { + font-weight: 700; + font-size: 1rem; +} + +.filter-categories button { + background-color: initial; + border-radius: 25px; + border: 2px solid var(--border-color); + padding: 10px 18px; +} + +.filter-categories button:hover { + background-color: #deebff; + cursor: pointer; } .filter-info { - display: flex; - align-items: center; - gap: 10px; - margin: 0 0 40px 0; + display: flex; + align-items: center; + gap: 10px; + margin: 0 0 40px 0; } -.fa-info { - display: flex; - justify-content: center; - align-items: center; - border-radius: 50%; - width: 24px; - height: 24px; - font-size: 0.7rem; - border: 1px solid var(--border-color); - flex-shrink: 0; +.filter-info p { + margin: 0; } -/****** Hebergements And Populaires ***********/ +.fa-info { + display: flex; + justify-content: center; + align-items: center; + border-radius: 50%; + width: 24px; + height: 24px; + font-size: 0.7rem; + border: 1px solid var(--border-color); + flex-shrink: 0; +} + +/****** Hebergements And Populaires ******/ .hebergements-and-populaires { - display: flex; - justify-content: space-between; + display: flex; + justify-content: space-between; } .hebergements-and-populaires section { - background-color: var(--main-bg-color); - border-radius: 20px; - padding: 30px; - box-sizing: border-box; + background-color: var(--main-bg-color); + border-radius: 20px; + padding: 30px; + box-sizing: border-box; } -/****** Hebergements ***********/ +/* Hebergements */ .hebergements { - width: 65%; + width: 65%; } -/****** Populaires ***********/ +.hebergements h2 { + margin-block: 0; + padding-bottom: 33px; +} + +.hebergements-cards { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: stretch; + gap: 30px; +} + +.hebergements-cards img { + width: 100%; + height: 124px; + border-top-left-radius: 20px; + border-top-right-radius: 20px; + object-fit: cover; +} + +.hebergements-cards > * { + flex: 0 0 calc(33.333% - 20px); +} + +.hebergements-cards .card-content { + box-sizing: border-box; + margin: 0; + padding: 15px 8px; + width: 100%; + min-height: 8rem; +} + +.card-content .card-title, +.card-content .card-rating { + margin: 0; + padding: 0; +} + +.card-content .card-subtitle { + margin: 0; + padding: 5px 0; +} + +/* Button show more */ +.btn-show-more { + font-weight: 700; + font-size: 18px; + border: none; + padding-top: 33px; + background-color: transparent; + cursor: pointer; +} + +/* Populaires */ .populaires { - width: 32%; + width: 32%; } .populaires-title { - display: flex; - justify-content: space-between; - align-items: center; + display: flex; + justify-content: space-between; + align-items: center; } .populaires-cards .card { - display: flex; - margin-top: 33px; + display: flex; + margin-top: 33px; } .populaires-cards img { - width: 33%; - height: 136px; - border-top-left-radius: 20px; - border-bottom-left-radius: 20px; + width: 33%; + height: 136px; + border-top-left-radius: 20px; + border-bottom-left-radius: 20px; } .populaires-cards .card-content { - width: 67%; - padding-left: 15px; - display: flex; - flex-direction: column; - justify-content: space-between; - box-sizing: border-box; + width: 67%; + padding-left: 15px; + display: flex; + flex-direction: column; + justify-content: space-between; + box-sizing: border-box; } .populaires-cards .card-title { - margin-top: 10px; - margin-bottom: 4px; + margin-top: 10px; + margin-bottom: 4px; } .populaires-cards .card-subtitle { - margin: 0; + margin: 0; } .populaires-cards .card-rating { - margin-bottom: 5px; + margin-bottom: 5px; } +/* Activities */ +.activities { + padding: 60px 30px; +} +.activities h2 { + margin: 0; + padding-bottom: 33px; +} + +.activities-cards { + display: flex; + flex-direction: row; + gap: 30px; +} +.card-article-activity { + display: flex; + flex-direction: column; + margin: 0; + padding: 0; +} + +.activities-cards a { + width: 100%; +} + +.card-article-activity img { + height: 380px; + object-fit: cover; + width: 100%; + border-top-left-radius: 20px; + border-top-right-radius: 20px; + overflow: hidden; + filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1)); +} + +.card-article-activity .card-content { + display: flex; + align-items: center; + background-color: white; + border-bottom-left-radius: 20px; + border-bottom-right-radius: 20px; + padding: 15px; + min-height: 4rem; + box-sizing: border-box; + filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1)); +} + +/****** Footer ******/ +.footer-container { + display: flex; + margin: auto; + background-color: var(--main-bg-color); + padding: 30px; +} + +.footer-column { + display: flex; + flex-direction: column; + gap: 15px; + flex: 0 0 33.333%; +} +.footer-column ul { + padding: 0; + margin: 0; + list-style: none; + display: flex; + flex-direction: column; + gap: 15px; +} + +.footer-column h3 { + padding: 0; + margin: 0; +} /* 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 { - flex-direction: column; - } + /****** Hebergements And Populaires ******/ + .hebergements-and-populaires { + flex-direction: column; + } - .hebergements { - width: 100%; - } + .hebergements { + width: 100%; + } - .populaires { - width: 100%; - margin-top: 50px; - } + .populaires { + width: 100%; + margin-top: 50px; + } - .populaires-cards { - display: flex; - flex-direction: row; - justify-content: space-between; - } + /* Populaires */ + .populaires-cards { + display: flex; + flex-direction: row; + justify-content: space-between; + } + + .populaires-cards a { + width: 30%; + } - .populaires-cards a { - width: 30%; - } + .populaires-cards .card-title { + font-size: 14px; + } - .populaires-cards .card-title { - font-size: 14px; - } + .populaires-cards .card-subtitle { + font-size: 13px; + } - .populaires-cards .card-subtitle { - font-size: 13px; - } + /* Hebergement */ + .hebergements-cards .card-title { + font-size: 14px; + } + + .hebergements-cards .card-subtitle { + font-size: 13px; + } + + .hebergements-cards .card-content { + min-height: initial; + } + + /* Activities */ + .card-article-activity img { + height: 200px; + } + + /* Filters categories */ + .filters { + display: block; + } + + .filters .filter-categories { + display: flex; + flex-direction: row; + } } /* Small devices (phones, less than 768px) */ @media (max-width: 767.98px) { - /* ... */ -} \ No newline at end of file + /* Main */ + .main-container, + html, + body { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + header, + main h1, + .search-container, + .hebergements-and-populaires .hebergements, + .activities { + padding: 0 25px; + } + + /* Header and Line mobile */ + header { + flex-direction: column; + align-items: center; + gap: 30px; + } + + nav ul a:hover { + color: var(--main-color); + border-top: none; + border-bottom: 2px solid var(--main-color); + padding: 0 0 15px 0; + } + + .line-mobile { + display: block; + width: 100vw; + margin-left: -50px; + border-bottom: 2px solid var(--main-bg-color); + padding-bottom: 15px; + } + + /* Search bar and Filters categories */ + .search-container { + align-items: center; + } + + .text-presentation { + margin-top: 15px; + } + + .submit { + border-radius: 15px; + filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.25)); + margin-left: -10px; + } + + .btn-text { + display: none; + } + + .btn-icon { + display: block; + } + + .fa-magnifying-glass { + color: white; + font-size: 1rem; + } + + .search-input { + width: 70vw; + } + + .filters .filter-categories { + flex-wrap: wrap; + flex-direction: row; + justify-content: space-around; + } + + .filters button { + min-width: 200px; + } + + /****** Hebergements And Populaires ******/ + .hebergements-and-populaires section { + padding-inline: 0; + } + /* Hebergement */ + .hebergements { + order: 1; + } + .hebergements-cards { + flex-direction: column; + } + + .hebergements-and-populaires .hebergements { + background-color: white; + } + + .hebergements h2 { + padding: 30px 0; + } + + /* Populaires */ + .populaires { + background-color: var(--main-bg-color); + margin-top: 0; + } + + .hebergements-and-populaires section { + border-radius: 0; + } + + .padding-populaires { + padding: 0 25px; + } + + .populaires-cards { + flex-direction: column; + } + + .populaires-cards a { + width: 100%; + } + + .populaires-cards .card-title { + line-height: 1.3; + } + + /* Activities */ + .activities-cards { + flex-direction: column; + padding-bottom: 80px; + } + + .activities h2 { + padding: 60px 0 30px 0; + } + + /* Footer */ + .footer-container { + flex-direction: column; + gap: 60px; + } +} diff --git a/index.html b/index.html index 7caeb2d2..1d1235f6 100644 --- a/index.html +++ b/index.html @@ -17,7 +17,7 @@
- Logo Booki + Logo Booki
+

Accueil

@@ -33,28 +34,155 @@

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

En plein centre-ville ou en pleine nature

-
- - - + + + + +
-
-
    -

  • Filtres

    • -
    • -
    • -
    • -
    • -
+
+
+

Filtres

+
    +
    • +
    • +
    • +
    • +
+
+
+
+ +

Plus de 500 logements sont disponibles dans cette ville

-

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

Les plus populaires

@@ -118,10 +246,73 @@

Hôtel Bleu et Blanc

+
+
+

Activités à Marseille

+
+ +
+ Image du Vieux-Port de Marseille +
+

Vieux-Port

+
+
+ + +
+ Image du Fort de Pomègues +
+

Fort de Pomègues

+
+
+ + +
+ Image du Parc national des Calanques +
+

Parc national des Calanques

+
+
+ + +
+ Image de Notre-Dame-de-la-Garde +
+

Notre-Dame-de-la-Garde

+
+
+ +
+
-
+
From 4120ce51f575ab524b515e51bc50a21d7f30c321 Mon Sep 17 00:00:00 2001 From: Marie Casana Date: Sun, 18 May 2025 14:10:54 +0200 Subject: [PATCH 5/5] For validation --- css/style.css | 579 ++++++++++++++++++++++---------------------------- index.html | 25 +-- 2 files changed, 269 insertions(+), 335 deletions(-) diff --git a/css/style.css b/css/style.css index 52ea811c..4d7bd354 100644 --- a/css/style.css +++ b/css/style.css @@ -1,467 +1,410 @@ /****** General ******/ * { - font-family: "Raleway", sans-serif; + font-family: "Raleway", sans-serif; } :root { - --main-color: #0065fc; - --main-bg-color: #f2f2f2; - --filter-bg-color: #deebff; - --border-color: #d9d9d9; + --main-color: #0065fc; + --main-bg-color: #f2f2f2; + --filter-bg-color: #deebff; + --border-color: #d9d9d9; } .fa-solid { - color: var(--main-color); + color: var(--main-color); } body { - display: flex; - justify-content: center; + display: flex; + justify-content: center; } html { - height: 100%; + height: 100%; + scroll-behavior: smooth; } .main-container { - width: 100%; - max-width: 1440px; - padding: 0 50px; - box-sizing: border-box; + width: 100%; + max-width: 1440px; + padding: 0 50px; + box-sizing: border-box; } a { - color: inherit; - text-decoration: none; + color: inherit; + text-decoration: none; } .section-title { - margin: 0; - font-size: 22px; + margin: 0; + font-size: 22px; } .card { - background-color: white; - border-radius: 20px; - padding: 5px; - filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1)); + background-color: white; + border-radius: 20px; + padding: 5px; + filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1)); } .card img { - object-fit: cover; + object-fit: cover; } .card-title { - font-size: 16px; + font-size: 16px; } .euro { - font-weight: 700; + font-weight: 700; } .neutral-star { - color: var(--main-bg-color); + color: var(--main-bg-color); } /****** Header and Line mobile ******/ .line-mobile { - display: none; + display: none; } header { - display: flex; - justify-content: space-between; - flex-wrap: wrap; + display: flex; + flex-wrap: wrap; + justify-content: space-between; } header img { - height: 19px; - padding-top: 15px; + height: 19px; + padding-top: 30px; } nav ul { - display: flex; - gap: 60px; - list-style: none; - padding: 0; - margin: 0; + display: flex; + gap: 60px; + list-style: none; + padding: 0; + margin: 0; } nav ul a:hover { - color: var(--main-color); - border-top: 2px solid var(--main-color); - padding-top: 7px; + color: var(--main-color); + border-top: 2px solid var(--main-color); + padding-top: 7px; } /****** Main ******/ /* H1 */ h1 { - display: none; + display: none; } /****** Search bar and Filters categories ******/ /* Search bar */ .search-container { - display: flex; - flex-direction: column; - gap: 24px; -} - -h2 { - font-size: 1.4rem; + display: flex; + flex-direction: column; + gap: 24px; + margin: 50px 0 50px 0; } .search-container h3 { - font-weight: 400; -} - -.text-presentation { - margin-top: 53px; -} - -.text-presentation h2 { - margin-bottom: 7px; -} - -.text-presentation h3 { - margin-top: 5px; + font-weight: 400; } .search-bar { - display: flex; -} - -.search-input { - display: flex; - justify-content: center; - align-items: center; - font-weight: 700; - border: 1px solid var(--main-bg-color); - border-left: none; - border-right: none; - padding-left: 25px; - font-size: 1.2rem; - cursor: pointer; + display: flex; } .bg-icon-location { - display: flex; - justify-content: center; - align-items: center; - background-color: var(--main-bg-color); - border: 1px solid var(--main-bg-color); - border-bottom-left-radius: 15px; - border-top-left-radius: 15px; - overflow: hidden; - padding: 15px; - cursor: pointer; + background-color: var(--main-bg-color); + border-bottom-left-radius: 15px; + border-top-left-radius: 15px; + padding: 15px 20px; + cursor: pointer; } .fa-location-dot { - color: black; - font-size: 1.2rem; + color: black; + font-size: 18px; +} - /* line-height: auto; - height: auto; - vertical-align: middle; */ +.search-input { + font-weight: 700; + text-align: center; + border: 1px solid var(--main-bg-color); + border-left: none; + border-right: none; + font-size: 18px; } .search-input::placeholder { - color: black; + color: black; } .search-input:focus::placeholder { - color: rgba(128, 128, 128, 0.473); -} - -.search-input:focus { - outline: none; + color: rgba(128, 128, 128, 0.473); } .submit { - display: flex; - justify-content: center; - align-items: center; - background-color: var(--main-color); - color: white; - font-weight: 700; - border: 1px solid var(--main-color); - border-bottom-right-radius: 15px; - border-top-right-radius: 15px; - overflow: hidden; - padding: 15px; - cursor: pointer; + background-color: var(--main-color); + color: white; + font-weight: 700; + border: none; + border-bottom-right-radius: 15px; + border-top-right-radius: 15px; + padding: 15px 20px; + cursor: pointer; } .btn-icon { - display: none; + display: none; } .btn-text { - font-size: 18px; + font-size: 18px; } /* Filter categories */ .filter-categories { - list-style: none; -} - -.filter-categories { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 15px; - padding: 0; + list-style: none; + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 15px; + padding: 0; } .filters { - display: flex; - align-items: center; - gap: 15px; -} - -.filters h3 { - font-weight: 700; + display: flex; + align-items: center; + gap: 15px; } .filter-categories i { - padding-right: 10px; - font-size: 1.3rem; + padding-right: 10px; } -.filter-categories h3, +.filters h3, .filter-categories button { - font-weight: 700; - font-size: 1rem; + font-weight: 700; + font-size: 18px; } .filter-categories button { - background-color: initial; - border-radius: 25px; - border: 2px solid var(--border-color); - padding: 10px 18px; + background-color: initial; + border-radius: 25px; + border: 2px solid var(--border-color); + padding: 10px 20px; } .filter-categories button:hover { - background-color: #deebff; - cursor: pointer; + background-color: var(--filter-bg-color); + cursor: pointer; } .filter-info { - display: flex; - align-items: center; - gap: 10px; - margin: 0 0 40px 0; -} - -.filter-info p { - margin: 0; + display: flex; + align-items: center; + gap: 10px; + margin: 0; } .fa-info { - display: flex; - justify-content: center; - align-items: center; - border-radius: 50%; - width: 24px; - height: 24px; - font-size: 0.7rem; - border: 1px solid var(--border-color); - flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + border-radius: 50%; + width: 24px; + height: 24px; + font-size: 0.8rem; + border: 1px solid var(--border-color); } /****** Hebergements And Populaires ******/ .hebergements-and-populaires { - display: flex; - justify-content: space-between; + display: flex; + justify-content: space-between; } .hebergements-and-populaires section { - background-color: var(--main-bg-color); - border-radius: 20px; - padding: 30px; - box-sizing: border-box; + background-color: var(--main-bg-color); + border-radius: 20px; + padding: 30px; + box-sizing: border-box; } /* Hebergements */ .hebergements { - width: 65%; + width: 65%; } -.hebergements h2 { - margin-block: 0; - padding-bottom: 33px; +.hebergements-cards { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + box-sizing: border-box; } -.hebergements-cards { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - align-items: stretch; - gap: 30px; +.hebergements-cards .card { + display: flex; + flex-direction: column; + margin-top: 33px; } .hebergements-cards img { - width: 100%; - height: 124px; - border-top-left-radius: 20px; - border-top-right-radius: 20px; - object-fit: cover; + width: 100%; + height: 124px; + border-top-left-radius: 20px; + border-top-right-radius: 20px; } .hebergements-cards > * { - flex: 0 0 calc(33.333% - 20px); + flex: 0 0 calc(33.333% - 20px); } .hebergements-cards .card-content { - box-sizing: border-box; - margin: 0; - padding: 15px 8px; - width: 100%; - min-height: 8rem; + padding-left: 15px; + min-height: 7rem; } -.card-content .card-title, -.card-content .card-rating { - margin: 0; - padding: 0; +.hebergements-cards .card-title { + margin-top: 10px; + margin-bottom: 4px; } -.card-content .card-subtitle { - margin: 0; - padding: 5px 0; +.hebergements-cards .card-subtitle { + margin: 0; +} + +.hebergements-cards .card-rating { + margin-bottom: 5px; } /* Button show more */ .btn-show-more { - font-weight: 700; - font-size: 18px; - border: none; - padding-top: 33px; - background-color: transparent; - cursor: pointer; + font-weight: 700; + font-size: 18px; + border: none; + padding : 30px 0 0 0; + background-color: transparent; + cursor: pointer; } /* Populaires */ .populaires { - width: 32%; + width: 32%; } .populaires-title { - display: flex; - justify-content: space-between; - align-items: center; + display: flex; + justify-content: space-between; + align-items: center; } .populaires-cards .card { - display: flex; - margin-top: 33px; + display: flex; + margin-top: 33px; } .populaires-cards img { - width: 33%; - height: 136px; - border-top-left-radius: 20px; - border-bottom-left-radius: 20px; + width: 33%; + height: 136px; + border-top-left-radius: 20px; + border-bottom-left-radius: 20px; } .populaires-cards .card-content { - width: 67%; - padding-left: 15px; - display: flex; - flex-direction: column; - justify-content: space-between; - box-sizing: border-box; + width: 67%; + padding-left: 15px; + display: flex; + flex-direction: column; + justify-content: space-between; + box-sizing: border-box; } .populaires-cards .card-title { - margin-top: 10px; - margin-bottom: 4px; + margin-top: 10px; + margin-bottom: 4px; } .populaires-cards .card-subtitle { - margin: 0; + margin: 0; } .populaires-cards .card-rating { - margin-bottom: 5px; + margin-bottom: 5px; } /* Activities */ .activities { - padding: 60px 30px; -} - -.activities h2 { - margin: 0; - padding-bottom: 33px; + padding: 60px 30px; } .activities-cards { - display: flex; - flex-direction: row; - gap: 30px; + display: flex; + justify-content: space-between; + gap: 30px; + margin-top: 33px; } .card-article-activity { - display: flex; - flex-direction: column; - margin: 0; - padding: 0; + display: flex; + flex-direction: column; } .activities-cards a { - width: 100%; + width: 100%; } .card-article-activity img { - height: 380px; - object-fit: cover; - width: 100%; - border-top-left-radius: 20px; - border-top-right-radius: 20px; - overflow: hidden; - filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1)); + height: 380px; + object-fit: cover; + width: 100%; + border-top-left-radius: 20px; + border-top-right-radius: 20px; + filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1)); } .card-article-activity .card-content { - display: flex; - align-items: center; - background-color: white; - border-bottom-left-radius: 20px; - border-bottom-right-radius: 20px; - padding: 15px; - min-height: 4rem; - box-sizing: border-box; - filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1)); + display: flex; + align-items: center; + justify-content: flex-start; + background-color: white; + padding-inline: 20px; + border-bottom-left-radius: 20px; + border-bottom-right-radius: 20px; + box-sizing: border-box; + filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1)); + min-height: 5rem; } /****** Footer ******/ .footer-container { - display: flex; - margin: auto; - background-color: var(--main-bg-color); - padding: 30px; + display: flex; + background-color: var(--main-bg-color); + padding: 30px; } .footer-column { - display: flex; - flex-direction: column; - gap: 15px; - flex: 0 0 33.333%; + display: flex; + flex-direction: column; + gap: 15px; + flex: 0 0 33.333%; } .footer-column ul { - padding: 0; - margin: 0; - list-style: none; - display: flex; - flex-direction: column; - gap: 15px; + padding: 0; + margin: 0; + list-style: none; + display: flex; + flex-direction: column; + gap: 15px; } .footer-column h3 { - padding: 0; - margin: 0; + padding: 0; + margin: 0; } /* Le code ci-dessous correspond à la version responsive uniquement */ @@ -470,62 +413,66 @@ h2 { /* Medium devices (tablets, less/equal than 1024px) */ @media (max-width: 1024px) { /****** Hebergements And Populaires ******/ - .hebergements-and-populaires { +.hebergements-and-populaires { flex-direction: column; } - .hebergements { +.hebergements { width: 100%; } - .populaires { +.populaires { width: 100%; margin-top: 50px; } /* Populaires */ - .populaires-cards { +.populaires-cards { display: flex; flex-direction: row; justify-content: space-between; } - .populaires-cards a { +.populaires-cards a { width: 30%; } - .populaires-cards .card-title { +.populaires-cards .card-title { font-size: 14px; } - .populaires-cards .card-subtitle { +.populaires-cards .card-subtitle { font-size: 13px; } /* Hebergement */ - .hebergements-cards .card-title { +.hebergements-cards .card-title { font-size: 14px; } - .hebergements-cards .card-subtitle { +.hebergements-cards .card-subtitle { font-size: 13px; } - .hebergements-cards .card-content { +.hebergements-cards .card-content { min-height: initial; } /* Activities */ - .card-article-activity img { +.card-article-activity img { height: 200px; } +.activities-cards .card-content { + min-height: 7rem; + } + /* Filters categories */ - .filters { +.filters { display: block; } - .filters .filter-categories { +.filters .filter-categories { display: flex; flex-direction: row; } @@ -534,144 +481,136 @@ h2 { /* Small devices (phones, less than 768px) */ @media (max-width: 767.98px) { /* Main */ - .main-container, - html, - body { +.main-container, html, body { margin: 0; padding: 0; box-sizing: border-box; } - header, - main h1, - .search-container, - .hebergements-and-populaires .hebergements, - .activities { +header, main h1, .search-container, +.hebergements-and-populaires .hebergements, +.activities, .padding-populaires { padding: 0 25px; } /* Header and Line mobile */ - header { +header { flex-direction: column; align-items: center; gap: 30px; } - nav ul a:hover { +nav ul a:hover { color: var(--main-color); border-top: none; border-bottom: 2px solid var(--main-color); padding: 0 0 15px 0; } - .line-mobile { +.line-mobile { display: block; width: 100vw; - margin-left: -50px; + margin-left: -25px; border-bottom: 2px solid var(--main-bg-color); padding-bottom: 15px; } /* Search bar and Filters categories */ - .search-container { +.search-container { align-items: center; } - .text-presentation { - margin-top: 15px; - } - - .submit { +.submit { border-radius: 15px; - filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.25)); + filter: drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.25)); margin-left: -10px; } - .btn-text { +.btn-text { display: none; } - .btn-icon { +.btn-icon { display: block; } - .fa-magnifying-glass { +.fa-magnifying-glass { color: white; - font-size: 1rem; + font-size: 18px; } - .search-input { +.search-input { width: 70vw; } - .filters .filter-categories { +.filters .filter-categories { flex-wrap: wrap; flex-direction: row; justify-content: space-around; } - .filters button { +.filters button { min-width: 200px; } /****** Hebergements And Populaires ******/ - .hebergements-and-populaires section { +.hebergements-and-populaires section { padding-inline: 0; } + /* Hebergement */ - .hebergements { +.hebergements { order: 1; + margin-top: 60px; } - .hebergements-cards { + +.hebergements-cards { flex-direction: column; } - .hebergements-and-populaires .hebergements { +.hebergements-and-populaires .hebergements { background-color: white; } - .hebergements h2 { - padding: 30px 0; - } - /* Populaires */ - .populaires { +.populaires { background-color: var(--main-bg-color); margin-top: 0; } - .hebergements-and-populaires section { +.hebergements-and-populaires section { border-radius: 0; } - .padding-populaires { - padding: 0 25px; - } - - .populaires-cards { +.populaires-cards { flex-direction: column; } - .populaires-cards a { +.populaires-cards a { width: 100%; } - .populaires-cards .card-title { +.populaires-cards .card-title { line-height: 1.3; } /* Activities */ - .activities-cards { + +.activities { + margin: 60px 0 60px 0; + } + +.activities-cards { flex-direction: column; - padding-bottom: 80px; + margin-top: 33px; } - .activities h2 { - padding: 60px 0 30px 0; +.activities-cards .card-content { + min-height: initial; } /* Footer */ - .footer-container { +.footer-container { flex-direction: column; gap: 60px; } diff --git a/index.html b/index.html index 1d1235f6..38785e6a 100644 --- a/index.html +++ b/index.html @@ -20,8 +20,8 @@ Logo Booki @@ -29,7 +29,7 @@

Accueil

-
+

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

En plein centre-ville ou en pleine nature

@@ -41,7 +41,6 @@

En plein centre-ville ou en pleine nature

Rechercher -
@@ -55,14 +54,11 @@

Filtres

-
- -

Plus de 500 logements sont disponibles dans cette ville

-
+

Plus de 500 logements sont disponibles dans cette ville

-
-

Hébergements à Marseille

+
+

Hébergements à Marseille

@@ -249,8 +245,8 @@

Hôtel Bleu et Blanc

-
-

Activités à Marseille

+
+

Activités à Marseille

@@ -314,6 +310,5 @@

Assistance

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