From 4e4b558d3dc58def38f22834c68c88bd3d29eb39 Mon Sep 17 00:00:00 2001 From: Fliw Date: Sun, 5 May 2024 19:44:33 +0200 Subject: [PATCH 1/3] navbar --- .DS_Store | Bin 0 -> 6148 bytes css/style.css | 44 +++++++++++++++++++++++++++++++++++++++++--- images/.DS_Store | Bin 0 -> 6148 bytes 3 files changed, 41 insertions(+), 3 deletions(-) create mode 100644 .DS_Store create mode 100644 images/.DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..5b436a0325e3078d921db08a4ef1d9117b5d4c9e GIT binary patch literal 6148 zcmeHK&2G~`5S~p!SO+0;Kq^OHxP>Z}P{IKuH>8IiDj|&E0I0R=sIlaFtJonx2=ZgJ zZ_r2J5qJY02fqEG!VPff0f}lxn*DZX=UZz(Te}`25~F#tMbsrC3D?;0(EP^qy!JI~ zxJVl)^cw0g&Qy$%UXJa5P(Z)CCLK~i#co!6e*tD5e>Y|}(x#M-DWW5qtmS_BTW-84 zPTY6#H9pDGqU`s-iAJ+^qkU7#j_lm-ybY&n5tdOoFGkVqwH`f-%4zKSFO{2m~}!sA*Cn1{qDwcIT$?b`49T5p1&Lp z2R;AMaJX7|a^wEilih>k4iJ zfx^ylMk$pvpkgmuiDt(`WWdxepqP$Ox0L>6`vZi0{ha1~J?ZIj z-Y@JtksFXQkikK7b2{yGUbobCd)89ZZnx7?Z@S&tERdV8cHZqBo}7Q5Ud(>{Gz8&= zz#C!ZrN=q^g0bM?EE?sR&X3`n$Is&!nE_^i8Mr$J{Ej1^-Q5yAGc&*pJW>YC{-B@+ zLywh1yLF(kR{&rgZY!|O2cyYR9z&0nLySO#O9i@A;jb9NrNgg$Tr`Tybe`~Pwh_m}}@;J;!()OVxZ9v;b`tt$^_ v&RPXMgc>n%mBU2}40{wK)*QuKP%H2&V*o>sl|y(S{2^dz;D#BvR|akX)VFs> literal 0 HcmV?d00001 From 573f0b32fa5fe0b1c19b23f7372e1f94ac14808e Mon Sep 17 00:00:00 2001 From: Fliw Date: Thu, 9 May 2024 15:40:57 +0200 Subject: [PATCH 2/3] Navbar fonctionnelle avec bordure bleue --- css/style.css | 78 ++++++++++++++++++++++++++++++----------------- index.html | 84 ++++++++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 130 insertions(+), 32 deletions(-) diff --git a/css/style.css b/css/style.css index dccc771e..4b235164 100644 --- a/css/style.css +++ b/css/style.css @@ -13,44 +13,45 @@ color: var(--main-color); } -body { - justify-content: center; + a:active { + color: blue; } -ul { - list-style-type: none; - margin: 0; - padding: 0; - overflow: hidden; - } +/***** Header **********/ - li { - display: inline; - } +.topnav { + display: flex; + justify-content: space-between; + align-items: center; + + padding: 10px 50px 20px; +} - li a { - display: block; - padding: 14px 16px; - } +.logo { + order: 1; + width: 45px; +} -/***** Header **********/ +.navigation a:hover { + color: #0065FC; + border-top: 2px solid #0065FC; +} #navbar-hebergements { + margin-left: auto; + order: 2; font-size: 12px; - float: right; + padding-top: 20px; } #navbar-activites { + order: 3; font-size: 12px; - float: right; + padding: 0px 0px 20px; + padding-top: 20px; + margin-left: 40px; } - - -#logo-booki { - width: 45px; -} - .main-container { width: 100%; max-width: 1440px; @@ -114,7 +115,7 @@ a { width: 32%; } -.populaires-title { +.populaires-title .hebergements-title { display: flex; justify-content: space-between; align-items: center; @@ -198,8 +199,29 @@ a { @media (max-width: 768px) { /* Header */ - #logo-booki { - text-align: center; - } + /* Navbar */ + + .topnav { + display: flex; + flex-direction: column; + } + + .logo { + justify-content: center; + } + + .navigation { + display: block; + } + + .navigation a:hover { + color: #0065FC; + border-top: none; + border-bottom: 2px solid #0065FC; + } + + + + } \ No newline at end of file diff --git a/index.html b/index.html index 53512c75..a8b314be 100644 --- a/index.html +++ b/index.html @@ -11,17 +11,93 @@ - + + + + + -
-
+
+
+ +
+ Hébergements + Activités +
+
+
+ +
- +
+

Hébergements

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

From 99f106b2c245dfea65d9ba7324c266d1912f07ac Mon Sep 17 00:00:00 2001 From: Fliw Date: Sun, 12 May 2024 20:32:09 +0200 Subject: [PATCH 3/3] search filters footer --- css/style.css | 306 +++++++++++++++++++++++++++++++++++++++++++++++--- index.html | 168 ++++++++++++++++++++++++--- 2 files changed, 443 insertions(+), 31 deletions(-) diff --git a/css/style.css b/css/style.css index 4b235164..5590de3f 100644 --- a/css/style.css +++ b/css/style.css @@ -14,22 +14,37 @@ } a:active { - color: blue; + color: #0065FC; +} + +.general-text { + font-size: 13px; +} + +.body { + max-width: 1440px ; + } + +h1 { +font-size: 18px; } +h2 { + font-size: 16px; + } + /***** Header **********/ .topnav { display: flex; justify-content: space-between; align-items: center; - padding: 10px 50px 20px; } .logo { order: 1; - width: 45px; + width: 50px; } .navigation a:hover { @@ -40,18 +55,136 @@ #navbar-hebergements { margin-left: auto; order: 2; - font-size: 12px; + font-size: 13px; padding-top: 20px; } #navbar-activites { order: 3; - font-size: 12px; + font-size: 13px; padding: 0px 0px 20px; padding-top: 20px; margin-left: 40px; } + /* Search bar */ + +.recherche { + padding: 0px 50px; +} + +.barre-de-recherche { + display: flex; + padding: 15px 0px 0px; +} + +.location-icon { + display: flex; + align-items: center; + background-color: #F2F2F2; + padding: 15px 18px; + border-top-left-radius: 15px; + border-bottom-left-radius: 15px; +} + +.fa-location-dot { + font-size: 16px; + color: black; +} + +.research-text { + display: flex; + font-size: 15px; + align-items: center; + border-top: 1px solid #F2F2F2; + border-bottom: 1px solid #F2F2F2; +} + +#inputtext-location { + font-size: 15px; + align-items: center; + text-align: center; + border: 0; + outline: none; +} + +::placeholder { + color: black; + opacity: 1; /* Firefox */ + font-weight: 600; + } + + + /* Hide the search icon from 768px */ +.research-button-sm { + display: none; +} + +.research-button-md { + font-size: 15px; + color: white; + align-items: center; + padding-left: 20px; + padding-right: 20px; + background-color: #0065FC; + border-top-right-radius: 15px; + border-bottom-right-radius: 15px; +} + + /* Filtres */ + +.filtres { + padding: 10px 50px 15px; +} + +.info-nb-logements { + display: flex; + align-items: center; +} + +.border-info { + display: flex; + align-items: center; + justify-content: center; /* Center content horizontally */ + margin-right: 10px; + border: 1px solid #F2F2F2; + border-radius: 50%; + width: 18px; + height: 18px; + color: black; +} + +.fa-info { + font-size: 9px; +} + +.filtres-title-buttons, +.filtres-buttons, .filtre { + display: flex; + flex-wrap: wrap; + align-items: center; +} + +.filtres-buttons { + margin: 0px 10px; +} + +.filtre { + font-size: 18px; + border: 2px solid #F2F2F2; + border-radius: 50px; + padding: 0px 15px; + margin: 15px 6px; +} + +.fa-money-bill-wave, +.fa-person, .fa-heart, .fa-fire { + padding-right: 10px; +} + + + /* Main */ + .main-container { width: 100%; max-width: 1440px; @@ -64,11 +197,6 @@ a { text-decoration: none; } -.section-title { - margin: 0; - font-size: 22px; -} - .card { background-color: white; border-radius: 20px; @@ -101,7 +229,7 @@ a { .hebergements-and-populaires section { background-color: var(--main-bg-color); border-radius: 20px; - padding: 30px; + padding: 0px 30px; box-sizing: border-box; } @@ -110,12 +238,59 @@ a { width: 65%; } +.hebergements-title { + padding: 10px 0px; +} + +.hebergements-cards { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + max-width: 10px; + margin-top: 33px; +} + +.hebergements-cards .card { + display: flex; + margin: 33px; +} + +.hebergements-cards img { + width: 33%; + height: 136px; + border-top-left-radius: 20px; + border-bottom-left-radius: 20px; +} + +.hebergements-cards .card-content { + width: 67%; + padding-left: 15px; + 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 ***********/ .populaires { width: 32%; } -.populaires-title .hebergements-title { +.populaires-title { + padding: 10px 0px; display: flex; justify-content: space-between; align-items: center; @@ -126,6 +301,8 @@ a { margin-top: 33px; } + + .populaires-cards img { width: 33%; height: 136px; @@ -155,7 +332,23 @@ a { margin-bottom: 5px; } + /****** Footer ***********/ + +.footer { + background-color: #F2F2F2; + margin: 50px; + margin-bottom: 0; + padding: 10px 15px; +} + +.footer-text { + display: flex; + flex-wrap: wrap; +} +#a-propos, #nos-hebergements { + padding-right: 200px; +} /* Le code ci-dessous correspond à la version responsive uniquement */ @@ -204,24 +397,101 @@ a { .topnav { display: flex; flex-direction: column; + justify-content: space-between; } .logo { justify-content: center; + padding-bottom: 10px; } .navigation { - display: block; + display: flex; } - .navigation a:hover { - color: #0065FC; - border-top: none; - border-bottom: 2px solid #0065FC; + #navbar-hebergements { + font-size: 13px; + border-bottom: 2px solid #F2F2F2; + } + + + #navbar-activites { + font-size: 13px; + border-bottom: 2px solid #F2F2F2; + } + + #navbar-hebergements:hover, + #navbar-activites:hover { + color: #0065FC; + border-top: none; + border-bottom: 2px solid #0065FC; } - + /* Search bar */ + + .recherche { + padding: 15px; + } + /* Hide the search button up to 768px */ + + .research-button-md { + display: none; + } + + .research-button-sm { + display: flex; + align-items: center; + padding-left: 15px; + padding-right: 15px; + background-color: #0065FC; + border-radius: 15px; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2); /* Add shadow */ + } + + .fa-magnifying-glass { + color: white; + font-size: 18px; + } + + .research-text { + display: flex; + width: 100%; + font-size: 15px; + align-items: center; + padding-left: 10px; + padding-right: 20px; + border-top: 1px solid #F2F2F2; + border-bottom: 1px solid #F2F2F2; + } + + #inputtext-location { + align-items: center; + border: 0; + outline: none; + } + + /* Filtres */ + + .filtres { + padding: 15px; + } + + .filtre { + font-size: 15px; + } + + /* Main */ + + .main-container { + padding: 0 15px; + } + /* Footer */ + .footer { + background-color: #F2F2F2; + margin-top: 50px; + padding: 10px 15px; + } } \ No newline at end of file diff --git a/index.html b/index.html index a8b314be..3899e94b 100644 --- a/index.html +++ b/index.html @@ -19,25 +19,141 @@ + +
- Hébergements + Hébergements Activités
+ + +
+

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

+

En plein centre-ville ou en pleine nature

+
+
+ +
+
+
+ +
+
+ +
+

Rechercher

+
+ +
+ +
+
+
+ + +
+
+

Filtres

+
+
+ +

Economique

+
+
+ +

Familial

+
+
+ +

Romantique

+
+
+ +

Nos pépites

+
+
+
+
+
+ +
+

Plus de 500 logements sont disponibles dans cette ville

+
-
-
-
-
-
-

Hébergements

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

Hébergements à Marseille

+
+
+ +
+ 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 +
+
+
+
Image de la chambre d'hôtel montrant un lit @@ -96,11 +212,12 @@

Hôtel Bleu et Blanc
+

Afficher plus

-

Les plus populaires

+

Les plus populaires

@@ -165,8 +282,33 @@

Hôtel Bleu et Blanc

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