تصفح المشاريع
تصفح المنفذين
تصفح الأعمال
تصفح الخدمات
مجتمع نفذلي
تغيير الوضع
الدليل الإرشادي
الدعم الفني
عرض المزيد
إضافة مشروع
طلب عمل مماثل
تواصل

project for travel

الرئيسية / الأعمال / project for travel
طلب عمل مماثل
project for travel
تفاصيل العمل

html <head> <title>TravelX</title> <link rel="stylesheet" href="style.css" /> </head> <body> <nav class="nav"> <h2>TravelX</h2> </nav> <header class="hero"> <h1>Explore The World</h1> <button id="loadDest">View Destinations</button> </header> <section class="dest" id="destSec"> <h2>Top Destinations</h2> <div class="grid" id="destGrid"></div> </section> <script src="script.js"></script> </body> </html> ``` ## 📌 style.css ```css .nav { padding: 20px; background: #003580; color: white; } .hero { background: url('https://i.imgur.com/Z7a7a2H.jpeg'); background-size: cover; padding: 140px; text-align: center; color: white; } .dest { padding: 40px; text-align: center; } .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .card { background: white; padding: 10px; border-radius: 10px; } .card img { width: 100%; border-radius: 10px; } ``` ## 📌 script.js ```javascript const places = [ { name: "Paris", price: "$899", img: "https://i.imgur.com/cZgOZ8F.jpg" }, { name: "Tokyo", price: "$999", img: "https://i.imgur.com/Y0n7fNQ.jpg" }, { name: "Maldives", price: "$1299", img: "https://i.imgur.com/evGgdZ4.jpg" } ]; const destGrid = document.getElementById("destGrid"); const loadDest = document.getElementById("loadDest"); loadDest.onclick = () => { destGrid.innerHTML = places .map( (d) => ` <div class="card"> <img src="${d.img}" /> <h3>${d.name}</h3> <p>From ${d.price}</p> </div>` ) .join(""); };

طلب عمل مماثل
شارك
بطاقة العمل
تقييم المستقل
تاريخ النشر
منذ يومين
المشاهدات
6
القسم
برمجة، تطوير المواقع والتطبيقات
المستقل
Amir
Amir
مصر
طلب عمل مماثل
شارك
خدمات مقترحة
تعلم
تابعنا
روابط
وسائل الدفع
وسائل الدفع
وسائل السحب
وسائل السحب
مركز المساعدة