اريج الدخان

السلام عليكم منذ ثلاث ايام تظهر لي هذه الرسالة عندما افتح ملفاتي في الفيجيول ولا استطيع العمل بلمشروع Audit usage of navigator.userAgent, navigator.appVersion, and navigator.platform A page or script is accessing at least one of navigator.userAgent, navigator.appVersion, and navigator.platform. Starting in Chrome 101, the amount of information available in the User Agent string will be reduced. To fix this issue, replace the usage of navigator.userAgent, navigator.appVersion, and navigator.platform with feature detection, progressive enhancement, or migrate to navigator.userAgentData. Note that for performance reasons, only the first access to one of the properties is shown. ممكن اعرف ما المشكلة؟ شكرا

أواجه المشاكل المذكورة في مشروعي لاعرف كيف يجب ان اشرح اكثر..خاصة انه ممنوع ارسال الملف هنا

يعطيك العافية عندي مشكلة بمشروعي..ماعم افهم المشاكل يلي بتواجهني ....اهم شي طريقة كتابة الكود أولا أريد زيادة طول الborder-top في ال Hover " لا اريد زيادة السماكة فقط الطول " <header> <div class="titre"> <div class="premier-titre"> <img src="image/Booki.png" alt="logo"> </div> <div class="deuxieme-titre"> <ul> <li><a href="#hebergement">Hébergement</a></li> <li><a href="#activités">Activités</a></li> </ul> </div> </div> </header> .titre { display: flex; justify-content: space-between; } .titre .premier-titre { display: flex; justify-content: flex-start; padding: 40px 0px 50px 20px; } .titre .premier-titre img { width: 110px; height: 50px; } .titre .deuxieme-titre { display: flex; justify-content: flex-end; } .titre .deuxieme-titre ul { padding-top: 40px; } .titre .deuxieme-titre ul li { list-style-type: none; display: inline-block; padding-left: 60px; } .titre .deuxieme-titre ul li a:hover { padding-top: 35px; border-top: 1px solid #0065fc; color: #0065fc; } الجزء الثاني عبارة عن ثلاث اجزاء صغيرة جزء الformule recherche اريد جعل لونه متناسقا مع الايقون وكل مربع البحث <!--localisation--> <div class="localisation"> <div class="icon"> <i class="fa-solid fa-location-dot"></i> </div> <input type="text" id="text" placeholder="Marseille,France"> <input type="submit" value="Rechercher"> </div> .localisation { margin-top: 25px; margin-left: 40px; position: relative; border-color: #eee; height: 56px; } .localisation .icon { border-top-left-radius: 15px; border-bottom-left-radius: 15px; background-color: #f2f2f2; color: white; padding: 18px 25px 21px 21px; color: black; position: absolute; left: -50px; } .localisation input[type="text"] { padding: 17px; font-size: 17px; position: absolute; left: 6px; } .localisation input::placeholder { color: black; font-size: 20px; font-weight: bold; } .localisation input[type="submit"] { background-color: #0065fc; color: white; font-size: 15px; padding: 16px 41px 20px 20px; border-top-right-radius: 15px; border-bottom-right-radius: 15px; /* position left parceque si je veux utiliser width pour (buttuon resarch ), il commence à droit et il entre sur marseille*/ position: absolute; left: 249px; } <div class="infos"> <i class="info fa-solid fa-info"></i> <p>Plus de 500 logements sont disponible dans cette ville. </p> </div> الجزء الصغير هنا اريد الايقون بجانب الجملة الايقون يظهر منخفض عن الجملة .infos { margin-right: 15px; margin-top: 45px; display:flex; } border: 1px solid grey; border-radius: 50%; color: #0065fc; text-align: center; padding: 5px; margin-right: 15px; } هنا المشكلة ال flexbox لايعمل اريد ترتيب العنصرين hebergement and aside in flexbox و اريد ايضا ترتيب العناصر بداخلهما ب flexbox <main> <section id="hebergement "> <div class="hebergement"> <h2>Hébergements à Marseille</h2> <div class="tous-proposition"> <a href="#"> <div class="proposition"> <figure> <img src="image/auberge.jpg" width="150px" alt="chambre-hotel"> </figure> <div class="groupe-elements"> <h3>Hôtel du port</h3> <p>Nuit à partir de 25<strong>€</strong></p> <div class="photostars"> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star" style="color: #eee;"></i> </div> </div> </div> <div class="proposition"> <figure> <img src="image/hotel-port.jpg" width="150px" alt="chambre-hotel"> </figure> <div class="groupe-elements"> <h3>Hôtel du port</h3> <p>Nuit à partir de 52<strong>€</strong></p> <div class="photostars"> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star" style="color: #eee;"></i> </div> </div> </div> <div class="proposition"> <figure> <img src="image/hotel-mouettes.jpg" width="150px" alt="chambre-hotel"> </figure> <div class="groupe-elements"> <h3>Hôtel les mouettes</h3> <p>Nuit à partir de <strong>76€</strong></p> <div class="photostars"> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star" style="color: #eee;"></i> </div> </div> </div> <div class="proposition"> <figure> <img src="image/Hotel-de-lamer.jpg" width="150px" alt="chambre-hotel"> </figure> <div class="groupe-elements"> <h3>Hôtel de la mer</h3> <p>Nuit à partir de 46<strong>€</strong></p> <div class="photostars"> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star" style="color: #eee;"></i> </div> </div> </div> <div class="proposition"> <figure> <img src="image/Auberge-panier.jpg" width="150px" alt="chambre-hotel"> </figure> <div class="groupe-elements"> <h3>Auberg Le panier</h3> <p>Nuit à partir de <strong>23€</strong></p> <div class="photostars"> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star" style="color: #eee;"></i> </div> </div> </div> <div class="proposition"> <figure> <img src="image/hotel-amina.jpg" width="150px" alt="chambre-hotel"> </figure> <div class="groupe-elements"> <h3>Hôtel chez Amina</h3> <p>Nuit à partir de 96<strong>€</strong></p> <div class="photostars"> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star" style="color: #eee;"></i> </div> </div> </div> </div> </a> <div class="fin-proposition"> <a href="#">Afficher Plus</a> </div> </div> </section> <aside> <h2> Les plus populaires</h2> <i class="icon-po fas fa-chart-line"></i> <div class="proposi"> <img src="image/1.jpg" alt="chambre-hotel"> <div class="groupe-elements"> <h3>Hôtel Le soleil du matin</h3> <p>Nuit à partir de 128<strong> € </strong></p> <div class="stars"> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> </div> </div> </div> <div class="proposi"> <img src="image/2.jpg" alt="chambre-hotel"> <div class="groupe-elements"> <h3>Au coeur de l'eau</h3> <p>Nuit à partir de 71<strong> € </strong></p> <div class="stars"> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star" style="color: #eee;"></i> </div> </div> </div> <div class="proposi"> <img src="image/Hôtel-Blanc.jpg" alt="chambre-hotel"> <div class="groupe-elements"> <h3>Hôtel Tout bleu et Blanc</h3> <p>Nuit à partir de 68 <strong>€</strong></p> <div class="stars"> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star" style="color: #eee;"></i> </div> </div> </div> </aside> </main> main { display: flex; flex-wrap: wrap; margin-top: 40px; } main section .hebergement { width: 70%; border: 1px solid silver; border-radius: 15px; display: flex; justify-content: space-between; flex-wrap: wrap; } .hebergement .tous-proposition { display: flex; justify-content: space-around; } main section .hebergement .proposition { border: 1px solid silver; } .hebergement .fin-proposition { margin-left: 65px; margin-top: 18px; margin-bottom: 32px; font-weight: bold; } .hebergement a { text-decoration: none; } .hebergement .fin-proposition a { color: black; text-decoration: none; } /*----------------plus populaire-------------------------*/ main aside { width: 30%; border: 1px solid silver; } aside { padding: 20px 35px 30px 20px; border-radius: 15px; background-color: #dbdbd7; margin-top: 25px; margin-right: 50px; } aside h2 { padding-bottom: 2px; } aside .icone-po { display: flex; } aside .proposi { border: 1px solid silver; border-radius: 15px; background-color: white; margin-bottom: 54px; display: flex; justify-content: flex-start; } aside .proposi img { width: 120px; height: 120px; border-top-left-radius: 15px; border-bottom-left-radius: 15px; background-color: white; padding: 5px; } aside .proposi .groupe-elements { display: flex; flex-direction: column; justify-content: flex-start; padding-left: 10px; padding-top: 10px; } aside .proposi .groupe-elements .stars { padding-top: 35px; color: #0065fc; } شكرا جزيلا

لم افهم ....المشكلة ان الفقرة التالية وضعتها بأسم aside ..هل ممكن ان ارسل لك الموقع لتراه وتخبرني ماذا يجب ان اعدل عليه

شكرا كتير الك...انا بدي بس انقل العنصر plus populaire ليكون بجانب ال hébergement à Marseille هل ممكن بخاصية flex <div class="deuxieme-partie"> <div class="titre"> <h2>Hébergements à Marseille</h2> </div> <div class="hébergement"> <div class="proposition"> <img src="image/auberge.jpg" alt="chambre-hotel"> <div class="groupe-elements"> <div class="titre"> <h3>Auberge La Cannebière</h3> </div> <span>Nuit à partir de <strong>25€</strong></span> <div class="photostars"> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star" style="color: #eee;"></i> </div> </div> </div> <div class="proposition"> <img src="image/hotel du port.jpg" alt="chambre-hotel"> <div class="groupe-elements"> <h3>Hôtel du port</h3> <span>Nuit à partir de 52<strong>€</strong></span> <div class="photostars"> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> </div> </div> </div> <div class="proposition"> <img src="image/hotel les mouettes.jpg" alt="chambre-hotel"> <div class="groupe-elements"> <div class="titre"> <h3>Hôtelle les mouettes</h3> </div> <span> à partir de 76<strong>€</strong></span> <div class="photostars"> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star" style="color: #eee;"></i> </div> </div> </div> <div class="proposition"> <img src="image/Hotel de la mer.jpg" alt="chambre-hotel"> <div class="groupe-elements"> <div class="titre"> <h3>Hôtel de la mer</h3> </div> <span> Nuit à partir de 46<strong>€</strong></span> <div class="photostars"> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star" style="color: #eee;"></i> <i class="fa-solid fa-star" style="color: #eee;"></i> </div> </div> </div> <div class="proposition"> <img src="image/Auberge le panier.jpg" alt="chambre-hotel"> <div class="groupe-elements"> <div class="titre"> <h3>Auberge Le Panier</h3> </div> <span>Nuit à partir de <strong>23€</strong></span> <div class="photostars"> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star" style="color: #eee;"></i> </div> </div> </div> <div class="proposition"> <img src="image/hotel chez amina.jpg" alt="chambre-hotel"> <div class="groupe-elements"> <div class="titre"> <h3>Hôtel chez Amina</h3> </div>Nuit à partir de 96<strong>€</strong> <div class="photostars"> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> </div> </div> </div> <div class="fin-proposition"> <a href="#">Afficher Plus</a> </div> </div> </div> <!----------------Troisieme partie------------------------> <div class="troisieme-partie"> <div class="plus-populaire"> <div class="titre"> <h2>Les plus populaires</h2> <div class="icones"> <i class="fa-solid fa-chart-line-up"></i> </div> </div> <div class="proposition"> <img src="image/1.jpg" alt="chambre-hotel"> <div class="groupe-elements"> <div class="titre"> <h3>Hôtel Le soleil du matin</h3> </div> <span>Nuit à partir de 128<strong> € </strong></span> <div class="photostars"> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> </div> </div> </div> <div class="proposition"> <img src="image/2.jpg" alt="chambre-hotel"> <div class="groupe-elements"> <div class="titre"> <h3>Au coeur de l'eau</h3> </div> <span>Nuit à partir de 71<strong> € </strong></span> <div class="photostars"> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star" style="color: #eee;"></i> </div> </div> </div> <div class="proposition"> <img src="image/Hôtel tout bleu et Blanc.jpg" alt="chambre-hotel"> <div class="groupe-elements"> <div class="titre"> <h3>Hôtel Tout bleu et Blanc</h3> </div> <span>Nuit à partir de 68 <strong>€</strong></span> <div class="photostars"> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star" style="color: #eee;"></i> </div> </div> </div> </div> CSS .deuxieme-partie { width: 70%; margin-top: 25px; border: 2px solid silver; border-radius: 15px; background-color: #dbdbd7; } .deuxieme-partie .titre h2 { margin-top: 10px; margin-left: 65px; } .deuxieme-partie .hébergement { display: flex; justify-content: flex-start; flex-wrap: wrap; } .deuxieme-partie .hébergement .proposition { margin-top: 35px; margin-left: 70px; margin-bottom: 10px; border: 1px solid silver; border-radius: 15px; background-color: white; padding: 5px; } .deuxieme-partie .hébergement .proposition img { width: 270px; height: 150px; border-radius: 15px; background-color: white; } .deuxieme-partie .hébergement .proposition .groupe-elements { padding-left: 10px; } .deuxieme-partie .hébergement .proposition .photostars { color: blue; } .deuxieme-partie .hébergement .fin-proposition { margin-left: 75px; margin-top: 15px; margin-bottom: 25px; font-weight: bold; } .deuxieme-partie .hébergement .fin-proposition a { color: black; text-decoration: none; } /*----------------plus populaire-------------------------*/ .troisieme-partie { width: 27%; } .troisieme-partie .plus-populaire { padding: 20px; border: 2px solid silver; border-radius: 15px; background-color: #dbdbd7; } .troisieme-partie .plus-populaire .titre h2 { margin-bottom: 20px; } .troisieme-partie .plus-populaire .proposition { border: 1px solid silver; border-radius: 15px; background-color: white; margin-bottom: 56px; display: flex; justify-content: flex-start; } .troisieme-partie .plus-populaire .proposition img { width: 120px; height: 120px; border-top-left-radius: 15px; border-bottom-left-radius: 15px; background-color: white; padding: 5px; margin-bottom: 5px; } .troisieme-partie .plus-populaire .proposition .groupe-elements { display: flex; flex-direction: column; justify-content: flex-start; } .troisieme-partie .plus-populaire .proposition .groupe-elements .photostars { padding-top: 28px; } .troisieme-partie .plus-populaire .proposition .photostars { color: blue; } strong { color: black; }

لدي مشكلة بلموقع: 1- الموقع يتغير شكله عندما افتحه بمحركات بحث مختلفة... كيف يمكن اضبطه ليكون مناسب لكل المحركات. 2- في عنوان الموقع لقد وضعت قائمة hébergement and activités اريد بوضعية hover عندما اضع الماوس ع الكلمة يظهر لي overline لكن مبتعد أكثر عن الكلمة؟ كيف ممكن فعلها؟ html : <div class="title"> <div class="premier-title"> <img src="R/images/logo/Booki.png" alt="logo"> </div> <div class="deuxieme-title"> <ul> <li><a href="#">Hébergement</a></li> <li><a href="#">Activités</a></li> </ul> </div> </div> css: .title { display: flex; justify-content: space-between; padding-bottom: 30px; } .title .premier-title { display: flex; justify-content: flex-start; } .title .deuxieme-title { display: flex; justify-content: flex-end; justify-items: end; } .title .deuxieme-title ul li { list-style-type: none; display: inline-block; padding-left: 55px; } .title .deuxieme-title ul li a { text-decoration: none; } .title .deuxieme-title ul li a:hover { text-decoration: overline; } 3-بقسم les plus populaires يوجد نجوم التقييم اريد وضعها في الأسفل متباعده قليلا عن العنوان والسعر؟ html: <div class="troisieme-partie"> <div class="plus-populaire"> <div class="titre"> <h2>Les plus populaires</h2> <div class="icones"> <i class="fa-solid fa-chart-line-up"></i> </div> </div> <div class="proposition"> <img src="image/1.jpg" alt="chambre-hotel"> <div class="groupe-elements"> <div class="titre"> <h3>Hôtel Le soleil du matin</h3> </div> <span>Nuit à partir de 128<strong> € </strong></span> <div class="photostars"> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> </div> </div> </div> css: .troisieme-partie .plus-populaire .proposition { border: 1px solid silver; border-radius: 15px; background-color: white; margin-bottom: 56px; display: flex; justify-content: flex-start; } .troisieme-partie .plus-populaire .proposition img { width: 120px; height: 120px; border-top-left-radius: 15px; border-bottom-left-radius: 15px; background-color: white; padding: 5px; margin-bottom: 5px; } .troisieme-partie .plus-populaire .proposition .groupe-elements { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 15px; } .troisieme-partie .plus-populaire .proposition .groupe-elements .photostars { align-self: flex-end; } .troisieme-partie .plus-populaire .proposition .photostars { color: blue; } 4-اخيرا لدي قسم الfooter ملتصق بلقسم الاخير لاني استخدمت خاصية float ... وضعت بعدها clear:both لكن لم يتغير شيء.... .troisieme-partie { width: 27%; float: right; margin-top: -40.5%; } .troisieme-partie .plus-populaire { padding: 20px; border: 2px solid silver; border-radius: 15px; background-color: #dbdbd7; } .troisieme-partie .plus-populaire .titre h2 { margin-bottom: 20px; } .troisieme-partie .plus-populaire .proposition { border: 1px solid silver; border-radius: 15px; background-color: white; margin-bottom: 56px; display: flex; justify-content: flex-start; } .troisieme-partie .plus-populaire .proposition img { width: 120px; height: 120px; border-top-left-radius: 15px; border-bottom-left-radius: 15px; background-color: white; padding: 5px; margin-bottom: 5px; } .troisieme-partie .plus-populaire .proposition .groupe-elements { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 15px; } .troisieme-partie .plus-populaire .proposition .groupe-elements .photostars { align-self: flex-end; } .troisieme-partie .plus-populaire .proposition .photostars { color: blue; } strong { color: black; } /*-------------------clear-----------*/ .clear { clear: both; } .footer { background-color: "#dbdbd7"; } .container { max-width: 1170px; background-color: #dbdbd7; }