From 4e4b558d3dc58def38f22834c68c88bd3d29eb39 Mon Sep 17 00:00:00 2001 From: Fliw Date: Sun, 5 May 2024 19:44:33 +0200 Subject: [PATCH 1/7] 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/7] 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/7] 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

-
- + + + +
+
+
+
+

À propos

+

Fonctionnement du site

+

Conditions générales

+

Données et confidentialité

+
+
+

Nos hébergements

+

Charte qualité

+

Proposer votre hôtel

+
+
+

Assistance

+

Centre d'aide

+

Nous contacter

+
+
+
+
+ + \ No newline at end of file From 4a7eb2eda2546844afd84750e4f59ca98443bafb Mon Sep 17 00:00:00 2001 From: Fliw Date: Mon, 13 May 2024 19:54:04 +0200 Subject: [PATCH 4/7] hebergements cards --- css/style.css | 33 +++++++++++++++++---------------- index.html | 32 ++++++++++++++++++-------------- 2 files changed, 35 insertions(+), 30 deletions(-) diff --git a/css/style.css b/css/style.css index 5590de3f..f25185f9 100644 --- a/css/style.css +++ b/css/style.css @@ -233,6 +233,7 @@ a { box-sizing: border-box; } + /****** Hebergements ***********/ .hebergements { width: 65%; @@ -242,42 +243,41 @@ a { padding: 10px 0px; } +.hbg-container { + display: flex; +} + .hebergements-cards { display: flex; flex-wrap: wrap; - justify-content: space-between; - max-width: 10px; - margin-top: 33px; } .hebergements-cards .card { - display: flex; - margin: 33px; + width: 250px; + display: flex; + flex-direction: column; + margin-top: 33px; } .hebergements-cards img { - width: 33%; - height: 136px; + max-height: 80px; border-top-left-radius: 20px; - border-bottom-left-radius: 20px; + border-top-right-radius: 20px; } .hebergements-cards .card-content { - width: 67%; - padding-left: 15px; - display: flex; - flex-direction: column; - justify-content: space-between; + padding-left: 10px; + box-sizing: border-box; } .hebergements-cards .card-title { - margin-top: 10px; - margin-bottom: 4px; + margin-top: 5px; + margin-bottom: 5px; } .hebergements-cards .card-subtitle { - margin: 0; + margin-bottom: 5px; } .hebergements-cards .card-rating { @@ -285,6 +285,7 @@ a { } /****** Populaires ***********/ + .populaires { width: 32%; } diff --git a/index.html b/index.html index 3899e94b..efb1e29c 100644 --- a/index.html +++ b/index.html @@ -91,19 +91,21 @@

Filtres

+

Hébergements à Marseille

-
+
+
- Image de la chambre d'hôtel montrant un lit + Image de la chambre d'hôtel grise montrant un lit
-

Hôtel Le soleil du matin

-

Nuit à partir de 128€

+

Hôtel du port

+

Nuit à partir de 52€

@@ -121,8 +123,8 @@

Hôtel Le soleil du matin

Image de la chambre d'hôtel montrant un lit
-

Chambres d’hôtes Au cœur de l’eau

-

Nuit à partir de 71€

+

Hôtel chez Amina

+

Nuit à partir de 96€

@@ -140,8 +142,8 @@

Chambres d’hôtes Au cœur de l’eau

Image de la chambre d'hôtel montrant un lit
-

Hôtel Bleu et Blanc

-

Nuit à partir de 68€

+

Hôtel Les mouettes

+

Nuit à partir de 76€

@@ -159,8 +161,8 @@

Hôtel Bleu et Blanc

Image de la chambre d'hôtel montrant un lit
-

Hôtel Le soleil du matin

-

Nuit à partir de 128€

+

Hôtel de la mer

+

Nuit à partir de 46€

@@ -178,8 +180,8 @@

Hôtel Le soleil du matin

Image de la chambre d'hôtel montrant un lit
-

Chambres d’hôtes Au cœur de l’eau

-

Nuit à partir de 71€

+

Auberge La Canebière

+

Nuit à partir de 25€

@@ -197,8 +199,8 @@

Chambres d’hôtes Au cœur de l’eau

Image de la chambre d'hôtel montrant un lit
-

Hôtel Bleu et Blanc

-

Nuit à partir de 68€

+

Auberge Le Panier

+

Nuit à partir de 23€

@@ -212,7 +214,9 @@

Hôtel Bleu et Blanc
+

Afficher plus

+
From 0bed46d6b41dc270b8a778a69bf09570cceeadab Mon Sep 17 00:00:00 2001 From: Fliw Date: Mon, 13 May 2024 22:03:08 +0200 Subject: [PATCH 5/7] Hebergements section desktop et mobile --- .DS_Store | Bin 6148 -> 6148 bytes css/style.css | 35 ++++++++++++++++++++++++----------- images/.DS_Store | Bin 6148 -> 6148 bytes 3 files changed, 24 insertions(+), 11 deletions(-) diff --git a/.DS_Store b/.DS_Store index 5b436a0325e3078d921db08a4ef1d9117b5d4c9e..18fa043f766576cca730cca67b029783e6d81e4d 100644 GIT binary patch delta 97 zcmZoMXffDO$;5baaurj9r$lwNnVF@If{Bq~t&T#qxw!$5ZERLs%gG_GYG~`3kXu<* gT~k{(lK~7E86h+SKa_@1vog04ZWjzYD$xtWfFg}HfcEhmS#s-dlCLT+VM gbxm#E30G~e;B!ku~2NHo+2ar#(>?7i#IScF|tqQValEC$Rx>=R9;+=l#`#tz`$^F z@;0UhO^NDiGc!va1rsB~S{;RIb8`bA+t{qOmXkwV)zH>6A-A%sx~8^n=HxhLdB$0j z?U-bE%7TmXa`N-ifrc<{E@P@-+RVB)qu~2NHo+2ab#(>?7jI5J+SaLT{Vl8Fb*dWQgnVo~51E^%PAjfy+ V$^0UY91K9f$iTp|IYML&GXO;z4|xCp From 611afdfdb682c76655ae2c24805019c988507a0c Mon Sep 17 00:00:00 2001 From: Fliw Date: Fri, 17 May 2024 15:04:25 +0200 Subject: [PATCH 6/7] desktop version --- css/style.css | 85 ++++++++++++++++++++++++++++++++++++++++----------- index.html | 74 ++++++++++++++++++++++++++++++++++++-------- 2 files changed, 130 insertions(+), 29 deletions(-) diff --git a/css/style.css b/css/style.css index 3d5f432b..9f0906db 100644 --- a/css/style.css +++ b/css/style.css @@ -188,7 +188,6 @@ h2 { .main-container { width: 100%; max-width: 1440px; - padding: 0 50px; box-sizing: border-box; } @@ -200,7 +199,6 @@ a { .card { background-color: white; border-radius: 20px; - padding: 5px; filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1)); } @@ -222,6 +220,7 @@ a { /****** Hebergements And Populaires ***********/ .hebergements-and-populaires { + padding: 0 50px; display: flex; justify-content: space-between; } @@ -250,11 +249,16 @@ a { justify-content: space-between; display: flex; margin-bottom: 20px; + } .hebergements-cards .card { display: flex; flex-direction: column; + background-color: white; + border-radius: 20px; + padding: 5px; + filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1)); } .hebergements-cards a { @@ -301,6 +305,10 @@ a { .populaires-cards .card { display: flex; margin: 20px 0px; + background-color: white; + border-radius: 20px; + padding: 5px; + filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1)); } .populaires-cards img { @@ -332,24 +340,48 @@ a { margin-bottom: 5px; } - /****** Footer ***********/ + /****** Activites ***********/ -.footer { - background-color: #F2F2F2; - margin: 50px; - margin-bottom: 0; - padding: 10px 15px; +.activites-section { + padding: 40px 70px; } -.footer-text { +.activites-title { + margin-bottom: 30px; +} + +.activites-cards { display: flex; - flex-wrap: wrap; + justify-content: space-between; } -#a-propos, #nos-hebergements { - padding-right: 200px; +.activites-cards .card { + display: flex; + flex-direction: column; +} + +.activites-cards a { + width: 24%; } +.activites-cards img { + height: 300px; + border-top-left-radius: 20px; + border-top-right-radius: 20px; +} + +.activites-cards .card-content { + height: 70px; + display: flex; + padding-left: 10px; + box-sizing: border-box; +} + +.activites-cards .card-title { + align-items: center; +} + + /* Le code ci-dessous correspond à la version responsive uniquement */ @@ -376,7 +408,7 @@ a { } .populaires-cards a { - width: 30%; + width: 32%; } .populaires-cards .card-title { @@ -397,7 +429,7 @@ a { .topnav { display: flex; flex-direction: column; - justify-content: space-between; + justify-content: space-around; } .logo { @@ -407,6 +439,7 @@ a { .navigation { display: flex; + width: 100%; } #navbar-hebergements { @@ -483,9 +516,9 @@ a { /* Main */ - .main-container { - padding: 0 15px; - } + .hebergements-and-populaires .hebergements { + background-color: white; + } .hebergements-cards { display: flex; @@ -508,4 +541,22 @@ a { margin-top: 50px; padding: 10px 15px; } +} + +/****** 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; } \ No newline at end of file diff --git a/index.html b/index.html index efb1e29c..66f59d39 100644 --- a/index.html +++ b/index.html @@ -23,7 +23,7 @@
- +
Hébergements Activités @@ -97,11 +97,11 @@

Filtres

Hébergements à Marseille

-
+
@@ -285,9 +285,59 @@

Hôtel Bleu et Blanc

+ + + +
+
+

Activités à Marseille

+
+
+ +
+ Image du vieux port +
+
+

Hôtel Bleu et Blanc

+
+
+
+ + +
+ Image de la chambre d'hôtel montrant un lit +
+
+

Fort de Pomègues

+
+
+
+ + +
+ Image de la chambre d'hôtel montrant un lit +
+
+

Parc national des Calanques

+
+
+
+ + +
+ Image d'une ville en contrebas +
+
+

Notre-dame-de-la-garde

+
+
+
+ +
+
- +
@@ -313,6 +363,6 @@

Assistance

- + \ No newline at end of file From 3c350ac76aae964e035ea7233802f1850a6b1261 Mon Sep 17 00:00:00 2001 From: Fliw Date: Mon, 20 May 2024 15:54:18 +0200 Subject: [PATCH 7/7] Mobile version mostly done --- .DS_Store | Bin 6148 -> 6148 bytes css/style.css | 132 +++++++++++++++++++++++++++++++++++++---------- images/.DS_Store | Bin 6148 -> 6148 bytes 3 files changed, 105 insertions(+), 27 deletions(-) diff --git a/.DS_Store b/.DS_Store index 18fa043f766576cca730cca67b029783e6d81e4d..a45a03652d540d62e1157bed27d8b0f8ad3e1ef2 100644 GIT binary patch delta 33 ocmZoMXffFEmr2CP%u+|e(8Rb_N1@u>+(1Xc+|YQlAoFJt0H;q0NB{r; delta 33 ncmZoMXffFEmr2CT%u+|e#K^E#N1@u>+yKZnHrp)7{8zN1 diff --git a/css/style.css b/css/style.css index 9f0906db..bfd8a598 100644 --- a/css/style.css +++ b/css/style.css @@ -1,6 +1,7 @@ /****** General ***********/ * { font-family: 'Raleway', sans-serif; + margin-inline: 0; } :root { @@ -43,7 +44,6 @@ h2 { } .logo { - order: 1; width: 50px; } @@ -54,13 +54,11 @@ h2 { #navbar-hebergements { margin-left: auto; - order: 2; font-size: 13px; padding-top: 20px; } #navbar-activites { - order: 3; font-size: 13px; padding: 0px 0px 20px; padding-top: 20px; @@ -169,6 +167,7 @@ h2 { margin: 0px 10px; } + .filtre { font-size: 18px; border: 2px solid #F2F2F2; @@ -177,6 +176,11 @@ h2 { margin: 15px 6px; } +.filtre:hover { + background-color: #DEEBFF; +} + + .fa-money-bill-wave, .fa-person, .fa-heart, .fa-fire { padding-right: 10px; @@ -249,7 +253,6 @@ a { justify-content: space-between; display: flex; margin-bottom: 20px; - } .hebergements-cards .card { @@ -304,7 +307,7 @@ a { .populaires-cards .card { display: flex; - margin: 20px 0px; + margin-bottom: 30px; background-color: white; border-radius: 20px; padding: 5px; @@ -381,6 +384,23 @@ a { align-items: center; } +/****** Footer ***********/ + + +.footer { + background-color: #F2F2F2; + margin: 50px; + margin-bottom: 0; + padding: 10px 15px; +} + +.footer-text { + display: flex; +} + +#a-propos, #nos-hebergements { + padding-right: 200px; +} /* Le code ci-dessous correspond à la version responsive uniquement */ @@ -390,6 +410,7 @@ a { @media (max-width: 1024px) { .hebergements-and-populaires { flex-direction: column; + gap: 30px; } .hebergements { @@ -398,7 +419,6 @@ a { .populaires { width: 100%; - margin-top: 50px; } .populaires-cards { @@ -429,7 +449,6 @@ a { .topnav { display: flex; flex-direction: column; - justify-content: space-around; } .logo { @@ -439,18 +458,21 @@ a { .navigation { display: flex; - width: 100%; + justify-content: center; } #navbar-hebergements { - font-size: 13px; + font-size: 16px; border-bottom: 2px solid #F2F2F2; + padding-inline: 80px; } #navbar-activites { - font-size: 13px; + font-size: 16px; border-bottom: 2px solid #F2F2F2; + padding-inline: 80px; + margin-left: 0; } #navbar-hebergements:hover, @@ -516,47 +538,103 @@ a { /* Main */ + + .hebergements-and-populaires { + flex-direction: column-reverse; + padding-inline: 0; + } + .hebergements-and-populaires .hebergements { background-color: white; } + .hebergements-and-populaires section { + border-radius: 0px; + } + + .populaires-cards { + flex-direction: column; + } + + .populaires-cards a { + width: 100%; + } + + .populaires-cards img { + width: 33%; + height: 136px; + border-top-left-radius: 20px; + border-bottom-left-radius: 20px; + } + + .populaires-cards .card-content { + width: 67%; + } + .hebergements-cards { display: flex; flex-wrap: wrap; + gap: 20px; } .hebergements-cards .card { display: flex; - margin-bottom: 20px; } .hebergements-cards a { width: 100%; } + .activites-section { + margin-top: 30px; + padding: 0px 30px; + } + + .activites-cards { + flex-direction: column; + gap: 15px; + } + + .activites-cards a { + width: 100%; + } + + .activites-cards img { + height: 140px; + border-top-left-radius: 20px; + border-top-right-radius: 20px; + } + + .activites-cards .card-content { + height: 50px; + display: flex; + padding-left: 10px; + box-sizing: border-box; + } + + /* Footer */ - .footer { + .footer section { background-color: #F2F2F2; + } + + .footer { + margin: 0px; margin-top: 50px; - padding: 10px 15px; + margin-bottom: 0; + padding: 30px 30px; } -} -/****** Footer ***********/ + .footer-text { + display: flex; + flex-direction: column; + gap: 20px; + } -.footer { - background-color: #F2F2F2; - margin: 50px; - margin-bottom: 0; - padding: 10px 15px; -} + #a-propos, #nos-hebergements { + padding-right: 0px; + } -.footer-text { - display: flex; - flex-wrap: wrap; } -#a-propos, #nos-hebergements { - padding-right: 200px; -} \ No newline at end of file diff --git a/images/.DS_Store b/images/.DS_Store index a05a9073e262bd15976777989c1e828ea9bf0660..72987f0237fc4b184a948fa69b41106e2445b312 100644 GIT binary patch delta 132 zcmZoMXfc@J&&atkU^g=(=VTrhQ$bFKM22LB5{68MG9WHtNS!=^Wul0YnWc_`p^0&= zjzYD$xq*&?xuNl7Q&v-X4CM^PWx+*xIr(|%3=9m6lkHd@W7WLbl=Ud%W_FIh`~W(H BAZq{s delta 69 zcmZoMXfc@J&&a+pU^g=(`(!&7vB^p-@{`+GB`2q|9v3k)v(!;AF*2;xQK&XIHvqDY Y%_e_mG2L9wHi2