From 189aeb499196e61178e9e89f85197c88db3f8ada Mon Sep 17 00:00:00 2001 From: VincentTamet Date: Fri, 3 May 2024 10:28:16 +0200 Subject: [PATCH 01/19] first commit --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 53512c75..7b28d291 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,7 @@
-

Les plus populaires

+

Les plus populaires de ouf

From c922e35bcc318db7ba77931989f88dd4013ec371 Mon Sep 17 00:00:00 2001 From: VincentTamet Date: Tue, 7 May 2024 16:55:30 +0200 Subject: [PATCH 02/19] header ok - TODO top barre bleue --- css/style.css | 48 ++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 18 ++++++++++++++++-- 2 files changed, 64 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index f6c96c4d..ba843b1a 100644 --- a/css/style.css +++ b/css/style.css @@ -58,6 +58,54 @@ a { color: var(--main-bg-color) } +/******* Header *********/ + +.header { + display: flex; + justify-content: space-between; + align-items: center; +} + +.navigation { + display: flex; +} + +/* .navigation{ + position: relative; +} + +.navigation > div:hover::before { + content: ''; + position: absolute; + top: -3px; + left: 0; + width: 100%; + height: 3px; + background-color: blue; + } */ + +.navigation > div:hover { + color: #0065FC ; +} + + +.navigation > div:first-child { + margin-right: 10px; + } + + .host:hover { + content: ''; + position: absolute; + top: -3px; + left: 0; + width: 100%; + height: 3px; + background-color: blue; + } + + + + /****** Hebergements And Populaires ***********/ .hebergements-and-populaires { display: flex; diff --git a/index.html b/index.html index 7b28d291..eca2e3bc 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,18 @@
-
+
+ + + +
+
Hébergements
+
Activités
+
+ +
@@ -24,7 +35,7 @@
-

Les plus populaires de ouf

+

Les plus populaires

@@ -89,7 +100,10 @@

Hôtel Bleu et Blanc

+
+ +
From 944c067993bda308b5d4b2a1dc4e4d05b795821c Mon Sep 17 00:00:00 2001 From: VincentTamet Date: Tue, 7 May 2024 17:26:55 +0200 Subject: [PATCH 03/19] ajout margin --- css/style.css | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/css/style.css b/css/style.css index ba843b1a..0116580c 100644 --- a/css/style.css +++ b/css/style.css @@ -66,9 +66,18 @@ a { align-items: center; } +.logo { + margin-top: 15px; + margin-bottom: 30px; +} + .navigation { display: flex; + margin-top: -30px; } +/* TODO */ + +/* Je veux une barre bleue de la longueur du bonton survolé, au-dessus du mot survolé */ /* .navigation{ position: relative; @@ -90,10 +99,11 @@ a { .navigation > div:first-child { - margin-right: 10px; + margin-right: 60px; } - .host:hover { +/*TODO*/ +/* .host:hover { content: ''; position: absolute; top: -3px; @@ -101,7 +111,7 @@ a { width: 100%; height: 3px; background-color: blue; - } + } */ From 0e1f95ce1dfd8bac765acac3266c8af912e18ca3 Mon Sep 17 00:00:00 2001 From: VincentTamet Date: Wed, 8 May 2024 12:13:28 +0200 Subject: [PATCH 04/19] ajout de la barre bleu via le hover --- css/style.css | 3 +++ index.html | 4 ++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index 0116580c..f104b25c 100644 --- a/css/style.css +++ b/css/style.css @@ -71,6 +71,7 @@ a { margin-bottom: 30px; } + .navigation { display: flex; margin-top: -30px; @@ -95,6 +96,8 @@ a { .navigation > div:hover { color: #0065FC ; + border-top: 1px solid #0065FC; + padding-top: 10px; } diff --git a/index.html b/index.html index eca2e3bc..16182230 100644 --- a/index.html +++ b/index.html @@ -23,8 +23,8 @@ Logo Booki
-
Hébergements
-
Activités
+
Hébergements
+
Activités
From d19c352f4353846ea9af536fefdbed683a917867 Mon Sep 17 00:00:00 2001 From: VincentTamet Date: Wed, 8 May 2024 12:28:04 +0200 Subject: [PATCH 05/19] ajout de la barre bleu via le hover2 --- css/style.css | 29 ----------------------------- 1 file changed, 29 deletions(-) diff --git a/css/style.css b/css/style.css index f104b25c..f29e0278 100644 --- a/css/style.css +++ b/css/style.css @@ -71,28 +71,10 @@ a { margin-bottom: 30px; } - .navigation { display: flex; margin-top: -30px; } -/* TODO */ - -/* Je veux une barre bleue de la longueur du bonton survolé, au-dessus du mot survolé */ - -/* .navigation{ - position: relative; -} - -.navigation > div:hover::before { - content: ''; - position: absolute; - top: -3px; - left: 0; - width: 100%; - height: 3px; - background-color: blue; - } */ .navigation > div:hover { color: #0065FC ; @@ -104,17 +86,6 @@ a { .navigation > div:first-child { margin-right: 60px; } - -/*TODO*/ -/* .host:hover { - content: ''; - position: absolute; - top: -3px; - left: 0; - width: 100%; - height: 3px; - background-color: blue; - } */ From f2aabfc13c1578dc25fedaa8040681015250b919 Mon Sep 17 00:00:00 2001 From: VincentTamet Date: Sat, 11 May 2024 08:44:23 +0200 Subject: [PATCH 06/19] search bar done 80% --- css/style.css | 40 ++++++++++++++++++++++++-- images/logo/map-localisation_logo.jpg | Bin 0 -> 599 bytes index.html | 8 ++++++ 3 files changed, 46 insertions(+), 2 deletions(-) create mode 100644 images/logo/map-localisation_logo.jpg diff --git a/css/style.css b/css/style.css index f29e0278..cadfc5a2 100644 --- a/css/style.css +++ b/css/style.css @@ -77,8 +77,8 @@ a { } .navigation > div:hover { - color: #0065FC ; - border-top: 1px solid #0065FC; + color: var(--main-color) ; + border-top: 1px solid var(--main-color); padding-top: 10px; } @@ -87,6 +87,42 @@ a { margin-right: 60px; } +/******** Search Bar ***************/ + +#search_bar { + display: flex; +} + + +#search_logo { + display: flex; + justify-content: center; + align-items: center; + height: 49px; + width: 50px; + background-color: var(--main-bg-color); + border-radius: 30% 0% 0% 30%; +} + + +#search_input{ + font-size: medium; + font-weight: bold; + height: 49px; + width: 132px; +} + +#search_button { + height: 49px; + width: 132px; + font-size: large; + font-weight: bold; + border-radius: 0% 15% 15% 0%; + background-color: #0065FC; + color: white; + border-color: #0065FC; +} + diff --git a/images/logo/map-localisation_logo.jpg b/images/logo/map-localisation_logo.jpg new file mode 100644 index 0000000000000000000000000000000000000000..d5a0501e52c5d9be3afa46b7e9b4cca5ae3ef65d GIT binary patch literal 599 zcmex=ma3|jiIItm zOAI4iKMQ#V{6EAX$iX1Qz{kv}#K0uT$SlbC{|JK^&>uiQAOUt(j{mn9I3S{`i*=_v z?WhMT6hTu4)B#q;BmiXD<59p2Q=lZkz{JGF$jZPBvyF+Fk%g6woq zJ%iUz{$1}}&j-aF68U&l?Dy2yQHe*RwmMGO%AjGl`TnNYy_U=K9^}r?zW8l6-`V60 z)2~WvEaq@*Yy0tYLHDE6>mF>8`Om=f$#iaa@ZM_a&U3TxyIo~B+Np5!?bVv=*E9F% zS!zYbdE8y$JLSoh(2Xm${&tFFyY2c{@eh0K`Kzn5+sYz0NBU0LFL%_NiTl8_3+xlV zb~|Z3HoUr8MWi*<>)O^H4h9YvhaUG89sLupgS;+?8iWiC0+6s_1o{OWHaHY8LloQu E0H
+ + + + + +
From a6d2ac2e25f0c633fa268a6b2121f2c3dd673549 Mon Sep 17 00:00:00 2001 From: VincentTamet Date: Wed, 15 May 2024 12:07:53 +0200 Subject: [PATCH 07/19] ajout filtres + section hebergements --- css/style.css | 54 +++++++++++++++ images/logo/coeur.jpg | Bin 0 -> 2003 bytes images/logo/dollar.jpg | Bin 0 -> 2192 bytes images/logo/famille.jpg | Bin 0 -> 1789 bytes images/logo/flammes.jpg | Bin 0 -> 2358 bytes index.html | 149 ++++++++++++++++++++++++++++++++++++++-- 6 files changed, 197 insertions(+), 6 deletions(-) create mode 100644 images/logo/coeur.jpg create mode 100644 images/logo/dollar.jpg create mode 100644 images/logo/famille.jpg create mode 100644 images/logo/flammes.jpg diff --git a/css/style.css b/css/style.css index cadfc5a2..866ae5c7 100644 --- a/css/style.css +++ b/css/style.css @@ -33,6 +33,7 @@ a { .section-title { margin: 0; font-size: 22px; + font-weight: bold; } .card { @@ -121,10 +122,38 @@ a { background-color: #0065FC; color: white; border-color: #0065FC; + +} + + +/****** Filters ******************/ + +#filter_label { + font-weight: bold; } +.filters { + display: flex; + align-items: center; + padding: 30px; +} +.filter { + display: flex; + padding: 10px; + margin-right: 15px; + margin-left: 15px; + align-items: center; + font-weight: bold; + border: solid 2px; + border-radius: 30px; + border-color: #D9D9D9; + background-color:#F2F2F2; +} +.filter:hover { + background-color: var(--filter-bg-color); +} /****** Hebergements And Populaires ***********/ .hebergements-and-populaires { @@ -144,6 +173,31 @@ a { width: 65%; } +.hebergements-title { + display: flex; + align-items: center; +} + +.hebergements-cards { + display: grid; + /* flex-wrap: wrap; */ + width: 33%; + +} + +.hebergements-cards .card { + display: flex; + flex-direction: column; + margin-top: 33px; +} + +.hebergements-cards img { + width: 100%; + height: 136px; + border-radius: 20px; +} + + /****** Populaires ***********/ .populaires { width: 32%; diff --git a/images/logo/coeur.jpg b/images/logo/coeur.jpg new file mode 100644 index 0000000000000000000000000000000000000000..c7ec0d677d5b313ac1a5b620316275217fd1bdae GIT binary patch literal 2003 zcmbu+d05hU9tZFrf(M!@8Jdj8<58Liu9gbM=#G{ZnTC-jbZK5_JL8dw)#!TPIGWe! z4(6Ddfj24@t1Eb9nwA%4nF6DD)C4Jt7p(210x$nNy_yZ-Qi z;d)?Da7ZXAEc#~5typs0?c|iywDgS3tb%)mMa3nhKbHMm^`QD;&7<1K%`J@9wsz)| zr)*AlPjBDz{ud*oW8)Lt$v0CxzTlU+dEvt1lKAt=s$^|ly0Q7i1p>gouk1J2f4O#- z08)TJz!2pxE|5a(Zi8VEMI&3Kec#}e{Uf!E?Gjb?yXIFmbwN#zc#GfxQLk0CO^@;p zioekQCHvoCN&lDZci4YiQ@|cDX!m$v7~leI(AJuF>N}3eCR`3|`-*M&F4=cI*0|0l zWA!ZE*(Z|l@mC#s3$Udl1C``(&Xh;giJ%(&eXls*MJA{-Zc}O=os6V~l{gZ9ntnM} zAyJrFL? z2}))AS9>X^RG)#m7n#d}OlKo$Znw-R66sG3iKC#|c4`0ZKJeXDv?aY3~m*$Me!xC5T&@I~9RflvbH{x*F6_zF8~vDBiCS z-XJY&WwWuaR7k$@G^=Op)F^&lgn5B)F3M_e>!a6G)q_#RVw4=9bFn}3U$Tx1a@LIp z$RQ5=9D#m*(77Uv0g;nwG-7e76Eduh0aG%_W#Uj1Ryk{lz5H?$gTDs1l1;^!Cy4QKFK`j|t+yqAse z2xjT{Ks3gcgZC@Hn3~?>Z<;9%O(SE=r&=WYgkx5CPq2b`YIjg6?HvktGDBDss~6JFbVAZf zaBT$wwo7O>JK^Pw>!*ilY8j#@8p%|P0MVOR&1(^*n35!E3ye6)BU31dpD;*elcC2x z<*9p(@jTBou$~ZsmQ<$F5Prig)aWgpkz)&UnJ+BosYW7u)ycsc_*Gb`*uV{2!DzTQ zR)^;H1jpSt+*ekAPI!2{#~**$qyBT<*zD^2B`*4VviQxaJPhK)R}u%x#pT71NRoJq^C44Q~oDDnMHvCap22GX&ka$tvhiRT#L#82v znq5g=7hKI_s94!xbZd#EDPgkgz=ETWHi8!VC#XL&*-u>9e(P4J=!a#|@Sz_`Yca1` zn1c+893XJz0LQR8eU#`Vc5|v`%d`b8d-Z2M^#{WO%tJ~EOnT=rKC8FL%3VDeu4m@? zP}wvUAxUV7S{$WVv@^&b`q_*|sot|4w8&&(x>)2%Jbz4Z7pdjQ&zVtHwU2tSy1;LK zmkmXabYo2SSD^x;(fDew<~lhN5b zlRdLHevkAdJ3+J6=sviC)U>2-P>jJn7{0@Ik-Fa`(zfz6q{o+IRTCKH?593C+=%|K z>D6`h-x}T9)X3ZZPJBIwWjX7t#*ar0MN<%LRuBCd+{&)lX3I?1GtF;@MyX1#E)|{u zos|R4^cfurJ_HeSt%!gZ8ul}NIi6tNdo-VF(oYUS4y=?dD^Zb2^l^;_-kk4O5FagZrFa)51fWZ+kwFp2108HzT zY~bGo(|~JgY3u0f>91KGxU&|}fWhG!ns6;GP0iKm%+-HD6QO0Y!PQ6Gbbpl2Mw*#h z)`cqFO~l(B$OAn}8~5ncY(0H*l!c|0?Pj|z_6}IwHV;p)?K{8s_4D7gJAiaBDELrF zC^_axY#cQ{Au%oe#K}`&#_61MxlC5xdG^mG7fUa3%E~WatG-@STX%zZv$>`9&fQ;s zyVuq!6p1BWe}CNF+xN0xHZV9eELV*GV`B2n+o@^j$8vUJUe7piV|=xuU8phQNe_UN12 zVCA;ZSK7a1{~Ij(|C0R)`;TiFFo45Wj|WEp1YoI8%ut4_f#LCvvj`<}glqRMA3{-} zE@qR!pEsCLsjq5nQv*W#>#}1FDRkWUPIU1c!yr7VRyH^iTAPdOUQ7A6i`HeF-S zEH^w>15|2`*M}1#EX@_-GE=|gV5=`h(JTa?a>B#J$BT4~^Xe}jp}+Pjd>S7+-55j^ zwCIu+%1Xm8X*9?KNHr@*C(%Ff5vfn^Z{hi>PF#(ir5Nr>IgNFDurWly4m1re#T!wR z#|^XU^V6r=T4g4riEC4VNZs!1F{I~&Bz`eLNpANTV`Qm;_|g1u0u$C4hNUns!u!;{%CEP_y-!sRNwMU8RW7AB!~JWda}Nx_ zj5$*gw7`(Fw3U-2$@(;*Nmtia`mvm+Ae$NMRK50A27e*u`P6eJ#CI0GT)@dW6LUKR z8}M;f76My6g?t<=6h92mU+-8-<0GgRD`5D+6!*MG6UeQ!u3oUfcpx~)^NnY0 zK{YxdAVd%rLACccCWp{{cfH_<&+4dw?DCay-fD0D!Fpa{6udQlv%{nZcM5F{Z-iOp+qu8wih1y>{#TLPswWF zZM__Ygsh$4tf0Wi--wnc!$@{D!V0g$=RE5SD@nYAC|m_)>33t zYh9|(?fa52&N2hV@@Jv)4?7=)N-)@*ZidX@B#9-a?ib^4UX0xvdCL>8Me#$;l(ij% z(oQ%A9JKENk8g=M`+T%@xmcXCQ`FWyZEYs=)&K|ml#Sf1 zcdg5qC6ACkd{9R0)ig@G>=?#*-g&d5qi1W<7AHHDRY6<9<61SaFVg!b?{#tOeTtcA z5kqfAd3K%SBf&OWHe|Z7D{g*vQB@HkyA{$maAK@X6rxysO#rB`b@> zRPkA7wvtIs(CRq$N{^9xtSStfU^|r(zLlIBv>dZ z^_2671)paETKkPZv`Em+hu-lN#pkyNw<{usI16;h{C+(nessD`c3&AImo(NVp6YZg z7f)8*7*!oreEj$}a7j)}!DV-(Sa z56te6AODcfYqLmpS%4BwVaeHRRpm|;BhTf`|u9* zcYRK+nJzscmtybs&AoMg|E+{a}3!`N0Sn3~B^0$^aHnMZhos90NmOV2}_n1OS-Aw`}0=g253; z1w|!g6nfdxK&3hWhanJfBtk&}iCmhFTlxo(7zK@0mRl4xcLypNF|^j7$;?qUwl8ba zrgh6!TkSuZfI?$e=;-R<)|i-@;Wv=1ZEQE%ZQbVJ=(K%@v%80X z=uyX_kDp-1oJ>5MbdH^T{=&sem#Wj?VT-8s zaodxg-sgS&1A{}uphWum&FI^AW8+hwre}Wt{D*vY?yCz1Ail5c8|+`Mr6s`NNF)NO z^wkA}pIB-H2C1;hQc+{eZlyqmrqTK{%3AiBIb}^KV=J0Wd;igHG^tlq*D#=hfGr&lfdMGM;yIR>&(dNA1*pf8WhW-VsZ*b?PO+OZ3^<(trB7vMzRkKK48t9w2sr$wf0W#!jaeN>|ZBK zKXfK1rLi{&&nv_an)vBbi^4&vf3{wQq^mDr$VEzNCZ;#QYf(~S0t*uvZz?x;>z<5V z1pz33epRWwMCv2sbAs~d3}$~9jn^B!l7ii|+Gei0rj+m3U!UStIz3b8DEc6sRTHTy zO5N0Iw@CCeGHip{sF3PghmGwPTN~{(+s4FEv97UR*ck1IwXt4$d{=EVP)1ERD!fxV z-6Z+tHgS3KJ-0c8;DZU+NdU=QD==cbgmtA`Kx=1JSUML)p(ID=Hazf752M!Mwev?U zx{H%NO`ANU4mHf(v@=C{f)ijXXcQ6zJ;#AYb9cqqseI@&zLqOI33J8d% z=_e%PQp69Jh4nYdOwQ?g!(V$u-I`G4r5=uH(ceuNj>+{Mr1#yJ6Kx`;tD^m1PYsO* zrspK)x}&~u>_$eFGW6A2bsbr33DqW>?4-pg*>u6m`TB7`&rzL-^3`p|r_&X+CfxHl zJi$JHBiB>if}pIOq`lj~fC&b7ZVUpDZgQo0uLV6>3%7*>cLj;q_)b zO28rOj{=Gg87F-K0m@s$6glXQlMQs)`>Sh|jEAa4qC7+0)MNO4%u5y>6G3HMv?Z;e zE)RXxqG+Ngce1eOHa0D0KEi-R^n!qdwgtk#B5v^+hj;waUH>s`R5%CDI@|#tcBO?6 z-n}rfsO9-I&u6hMkSTeId(E^geC)GVrxD%p$$BSOBR51FyBSHIi4T}3EK)p zmJj6A$Q$vUY2I!0vOW`Y?uW^dcfc1Loy|wNDVsj zo4%EmGJ8vdl4qO8o4%TNdeX}TvOmvbr%55HB7v6i6@unr1Iq6A? WaU@=MFV-f7o8_B6axhy54gCquW)!sm literal 0 HcmV?d00001 diff --git a/images/logo/flammes.jpg b/images/logo/flammes.jpg new file mode 100644 index 0000000000000000000000000000000000000000..6564d1a2bed098705711b9dc947fd50849875b70 GIT binary patch literal 2358 zcmbu;c{J2}9|!Q?%wR&&l(9_YFt%igu{ZIkYiz}}uaR7hC1krMG0HY}=VC}0S3^i+ z7YW_LP>Legmds{}l$oSwtn=vJ=iKL<=db5H_wzm9^Zn!dIq!2`pYQqdr}+%vs13#% z1AxFF!0KQD{CB_w0Q5KOd&u960D<_w0kA^=95@aE!2mD}1c8D01AsgLfCT@{2L4?j zFhoF52zp3ZMD(Dc{U`tiK_FlOh@hZ=z(IGy!95@V6FjD%V=i>u!4Ik!A)$Ncm&!xP z^UYMa;}}N?bu}_cSVU4vS_Yx4qN;XET~FV@(8$>2!VeZ0ODk&|CubK|H+K(D|DOV` zVFQDLqoQMej>X-KOHN5mBcx|!<`)zai;C}-+`CV%s(w&YTlcV~wXOYeN9U8SzWxE) z;L!6I!{cu!exID0o|$E`*b9qG%O6%&xnDNEZhreGZ)^Lz3j{#^8rh$)|8gA+0R$Eh zfCxapyFlRBgAIWR2rB3Z9W!@;`b8X9)V*^^;`}d_%~W9|%8>)V8aXB+sienL=6ZLLIx!L{OBUaZ6CnlUIycKahDd2(5YfHOsV^lxY+=gs!?>sw z3l`qOG9_~RNviCS2J_x{u5OV^cCdeEmS#aV^3I6PW)HkCaD@c9I8#J&|8kh&8&4)1J2NqE1uCUrSYt%YceeUtZ5O!rN9opKa!vrHLv&@pVTc?!n11D zZ_!8;zo8ts{TkVyYVz+ki`UBsk?czTH)=^$05RIT3oKZ(Gj5{#9=(AFwu)>$YPjilg<0 z94kvWmO?+FEsvmBhQ%gZMP`~cg)Y^7$3|O&$LbJ9Yftsb#fzODOy$&pW$9qv!>#+T zbc}AY$lofg=t8^Nj0ObjGpcX2K{NxGr$4ORUt%(-?vB>d#qsRZB`@E8z*N8M?IZL+ zTgFG9?UU>4NfdEcO(DDL$-kjX3UXt;P8Qg1bZq%h*HIS=J}@EI66K< zvn@1)WtgphS!>^Dq1IzXo|#LxG+SAotY^SGc$!n=>Kr7N;}ex@#B1=5(ZOnu>cQ6N>MYDGY6*)tQKC z^hX$x!Ih4G2~VLq7bK^hfR|r$&psDOdx2k$K`$10DJp`w*_WGk^ zUUHsnn~pr&MyhEp-IfkB%`0p+R)LBov*v{d-AGzBBFoZc7?~?NM5*VR5 zWTm1!XdnUaR0n5y~!>A(eJAqX@#1-r)1qA^=fM?Nh4 zFkX*{BrM7*e?>FrPKMa(vrlTi!VRZMcJ~x{?3I0q*N;tWbQB?(wvI%3yCTI-S(Y<7 zn@zD#Q&#PcI23tKDZ-?)j8pLu*#L!YV?=h-npm0U}-=)6+BWlw7|R z{anPg3=a(rm%Twf93)|to=M)F9AHHl&DkMkvIpE~EN;vyE5iNJB~K#PsO(Z)e!VX& zz0uXN-m@pTg=o_rY~!NtTv%glZ18%mOD~XFJKoP+ajGO#+DQcdNIo=9#^k8gI#$~h XO8D888)43*D8QvH)M!fi0DtCR3>PVA literal 0 HcmV?d00001 diff --git a/index.html b/index.html index 7f14814c..ba1a3b3a 100644 --- a/index.html +++ b/index.html @@ -17,8 +17,8 @@
- - + + @@ -29,18 +29,155 @@
- + - + +
+ + + + + + + + +
- +
+ +
+
+

Hébérgements à Marseille

+
+ +
+ + +
+ Photo montrant la chambre avec fenêtre +
+

Hôtel du port

+

Nuit à partir de 52€

+
+
+ + + + + + Note de 4 sur 5 +
+
+ + + + + + +
+ Photo montrant la chambre avec deux lits et une fenêtre +
+

Hôtel chez Amina

+

Nuit à partir de 96€

+
+
+ + + + + + Note de 4 sur 5 +
+
+ + + + + + +
+ Photo montrant la chambre avec un lit et une armoire +
+

Hôtel les mouettes

+

Nuit à partir de 76€

+
+
+ + + + + + Note de 4 sur 5 +
+
+ + + + + +
+ Photo montrant la chambre avec un lit et tableau +
+

Hôtel de la mer

+

Nuit à partir de 46€

+
+
+ + + + + + Note de 4 sur 5 +
+
+ + + + +
+ Photo montrant la chambre avec deux lits superposés et une fenêtre +
+

Auberge la Cannebière

+

Nuit à partir de 25€

+
+
+ + + + + + Note de 4 sur 5 +
+
+ + + +
+ Photo montrant la chambre avec quatre lits superposés +
+

Auberge le panier

+

Nuit à partir de 23€

+
+
+ + + + + + Note de 4 sur 5 +
+
+ +
+ +

Les plus populaires

From 73629ab12947abda889b315bdfcd52d43cf973bc Mon Sep 17 00:00:00 2001 From: VincentTamet Date: Wed, 15 May 2024 13:58:12 +0200 Subject: [PATCH 08/19] header fini --- css/style.css | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index 866ae5c7..b7899bd8 100644 --- a/css/style.css +++ b/css/style.css @@ -77,10 +77,23 @@ a { margin-top: -30px; } +.navigation > div { + position: relative; +} + +.navigation > div:hover::before { + content: ''; + position: absolute; + top: -10px; + left: 0; + width: 100%; + height: 2px; + background-color: var(--main-color); + + } + .navigation > div:hover { color: var(--main-color) ; - border-top: 1px solid var(--main-color); - padding-top: 10px; } From 0acbf0768d836311406a273c4b7ebee1f5102142 Mon Sep 17 00:00:00 2001 From: VincentTamet Date: Wed, 15 May 2024 14:59:45 +0200 Subject: [PATCH 09/19] search bar finie --- css/style.css | 33 ++++++++++++++++++++++++++------- index.html | 9 ++++----- 2 files changed, 30 insertions(+), 12 deletions(-) diff --git a/css/style.css b/css/style.css index b7899bd8..0ab814d0 100644 --- a/css/style.css +++ b/css/style.css @@ -75,6 +75,7 @@ a { .navigation { display: flex; margin-top: -30px; + font-size: 16px; } .navigation > div { @@ -103,8 +104,13 @@ a { /******** Search Bar ***************/ +.fa-location-dot { + color: black; +} + #search_bar { display: flex; + border-color: var(--main-bg-color); } @@ -120,21 +126,34 @@ a { #search_input{ - font-size: medium; + display: flex; + justify-content: center; + align-items: center; + font-size: 18px; font-weight: bold; + color: black; height: 49px; - width: 132px; + width: 195px; + border: var(--main-bg-color) solid 1px; +} + +#search_input::placeholder { + color: black; } #search_button { - height: 49px; + display: flex; + justify-content: center; + align-items: center; width: 132px; - font-size: large; + height: 49px; font-weight: bold; - border-radius: 0% 15% 15% 0%; - background-color: #0065FC; + font-size: 18px; + border: solid 2px; + border-radius: 0px 20px 20px 0px; + border-color: var(--main-color); + background-color:var(--main-color); color: white; - border-color: #0065FC; } diff --git a/index.html b/index.html index ba1a3b3a..324b928e 100644 --- a/index.html +++ b/index.html @@ -17,8 +17,6 @@
- - @@ -26,12 +24,12 @@
Hébergements
Activités
- +
@@ -246,7 +244,8 @@

Hôtel Bleu et Blanc

-
+
+
From 25a4403fb5605453d0dac3c9464ad6eb18c66b41 Mon Sep 17 00:00:00 2001 From: VincentTamet Date: Wed, 15 May 2024 15:58:49 +0200 Subject: [PATCH 10/19] filtres finis --- css/style.css | 19 ++++++++++++++++--- index.html | 11 ++++------- 2 files changed, 20 insertions(+), 10 deletions(-) diff --git a/css/style.css b/css/style.css index 0ab814d0..00a8682c 100644 --- a/css/style.css +++ b/css/style.css @@ -111,6 +111,7 @@ a { #search_bar { display: flex; border-color: var(--main-bg-color); + padding-top: 30px; } @@ -155,6 +156,7 @@ a { background-color:var(--main-color); color: white; + } @@ -173,20 +175,31 @@ a { .filter { display: flex; padding: 10px; - margin-right: 15px; - margin-left: 15px; + margin: 0px 15px 0px 15px; + padding: 0px 15px 0px 15px; + height: 50px; align-items: center; + justify-content: center; + font-size: 17px; font-weight: bold; border: solid 2px; border-radius: 30px; border-color: #D9D9D9; - background-color:#F2F2F2; + background-color: white; +} + +#fam-button { + width: 134px; } .filter:hover { background-color: var(--filter-bg-color); } +.filter-span { + width: 8px; +} + /****** Hebergements And Populaires ***********/ .hebergements-and-populaires { display: flex; diff --git a/index.html b/index.html index 324b928e..c764a3ad 100644 --- a/index.html +++ b/index.html @@ -35,13 +35,10 @@
- - - - - - - + + + +
From 91bedcb4707610b0eb539a9397407c912cec71a9 Mon Sep 17 00:00:00 2001 From: VincentTamet Date: Fri, 17 May 2024 16:52:03 +0200 Subject: [PATCH 11/19] =?UTF-8?q?=C3=A9tapes=206,=207=20et=208=20done?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 83 +++++++++++++++++++--- index.html | 190 +++++++++++++++++++++++++++++++++----------------- 2 files changed, 198 insertions(+), 75 deletions(-) diff --git a/css/style.css b/css/style.css index 00a8682c..3dc1d63b 100644 --- a/css/style.css +++ b/css/style.css @@ -48,9 +48,14 @@ a { } .card-title { + font-weight: bold; font-size: 16px; } +.card-subtitle { + font-size: 14px; +} + .euro { font-weight: 700; } @@ -94,7 +99,7 @@ a { } .navigation > div:hover { - color: var(--main-color) ; + color: var(--main-color); } @@ -215,37 +220,56 @@ a { /****** Hebergements ***********/ .hebergements { - width: 65%; + width: 67%; } .hebergements-title { display: flex; - align-items: center; + align-items: center; + padding: 0px 0px 25px 0px; } .hebergements-cards { display: grid; - /* flex-wrap: wrap; */ - width: 33%; - + grid-template-columns: 250px 250px 250px; + gap: 30px; +} + +.hebergements-cards .card { + height: 207px; + padding: 5px; + margin: 0px; +} + +.hebergements-cards .card-title { + margin-top: 0px; +} + +.hebergements-cards .card-subtitle { + margin-top: -12px; } -.hebergements-cards .card { +.hebergements-cards .card-rating { + margin-top: -12px; +} + +.hebergements-cards .card-content { display: flex; flex-direction: column; - margin-top: 33px; + margin-left: 10px; + margin-top: 5px; } .hebergements-cards img { width: 100%; height: 136px; - border-radius: 20px; + border-radius: 20px 20px 0px 0px; } /****** Populaires ***********/ .populaires { - width: 32%; + width: 30%; } .populaires-title { @@ -288,6 +312,45 @@ a { margin-bottom: 5px; } +/******** Activités *********/ + +.activities { + + padding: 30px; +} + +.activities-title { + display: flex; + align-items: center; + padding: 40px 0px 25px 25px; +} + +.activities-card { + display: grid; + grid-template-columns: 25% 25% 25% 25%; + gap: 1%; +} + +.activities-card .card { + position: relative; + width: 297.5px; + height: 439px; +} + +.activities-card img { + width: 103.5%; + height: 380px; + border-radius: 20px 20px 0px 0px; + margin-top: -5px; + margin-left: -5px; +} + +.activities-card .card-txt { + display: flex; + margin-left: 5%; + +} + diff --git a/index.html b/index.html index c764a3ad..0e872fa0 100644 --- a/index.html +++ b/index.html @@ -21,8 +21,8 @@ Logo Booki
-
Hébergements
-
Activités
+
Hébergements
+
Activités
@@ -55,30 +55,10 @@

Hébérgements à Marseille

Photo montrant la chambre avec fenêtre -
-

Hôtel du port

-

Nuit à partir de 52€

-
-
- - - - - - Note de 4 sur 5 -
-
- - - - - - -
- Photo montrant la chambre avec deux lits et une fenêtre +
-

Hôtel chez Amina

-

Nuit à partir de 96€

+

Hôtel du port

+

Nuit à partir de 52€

@@ -88,18 +68,19 @@

Hôtel chez Amina

Note de 4 sur 5
-
- + + - - + + - -
- Photo montrant la chambre avec un lit et une armoire + +
+ Photo montrant la chambre avec deux lits et une fenêtre +
-

Hôtel les mouettes

-

Nuit à partir de 76€

+

Hôtel chez Amina

+

Nuit à partir de 96€

@@ -109,17 +90,19 @@

Hôtel les mouettes

Note de 4 sur 5
-
- + +
+ - + -
- Photo montrant la chambre avec un lit et tableau +
+ Photo montrant la chambre avec un lit et une armoire +
-

Hôtel de la mer

-

Nuit à partir de 46€

+

Hôtel les mouettes

+

Nuit à partir de 76€

@@ -129,6 +112,28 @@

Hôtel de la mer

Note de 4 sur 5
+
+
+ + + + +
+ Photo montrant la chambre avec un lit et tableau +
+
+

Hôtel de la mer

+

Nuit à partir de 46€

+
+
+ + + + + + Note de 4 sur 5 +
+
@@ -136,18 +141,20 @@

Hôtel de la mer

Photo montrant la chambre avec deux lits superposés et une fenêtre -
-

Auberge la Cannebière

-

Nuit à partir de 25€

-
-
- - - - - - Note de 4 sur 5 -
+
+
+

Auberge la Cannebière

+

Nuit à partir de 25€

+
+
+ + + + + + Note de 4 sur 5 +
+
@@ -155,18 +162,20 @@

Auberge la Cannebière

Photo montrant la chambre avec quatre lits superposés -
-

Auberge le panier

-

Nuit à partir de 23€

-
-
- - - - - - Note de 4 sur 5 -
+
+
+

Auberge le panier

+

Nuit à partir de 23€

+
+
+ + + + + + Note de 4 sur 5 +
+
@@ -239,6 +248,57 @@

Hôtel Bleu et Blanc

+ + +
+
+

Activités à Marseille

+
+ +
+ + + +
+ Photo du port de Marseille +
+

Hôtel du port

+
+
+ + + + +
+ Photo du fort de Pomègues +
+

Fort de Pomègues

+
+
+ + + + +
+ Photo d'une calanque de Marseille +
+

Parc national des Calanques

+
+
+ + + + +
+ Photo de Notre-Dame-de-la-Garde +
+

Notre-Dame-de-la-Garde

+
+
+ + +
+