Wanderly
Destination
Choose your next dream location and begin your journey.
Lestination
Top travel tips and the best rated vacation destinations, all in one place.
Imders
Explore hidden treasures around the globe.
★★★★★
Thelur Rotlorres
“Wanderly made my travel dreams come true!”
{ margin: 0; padding: 0; box-sizing: border-box; font-family: ‘Fredoka One’, cursive; }
body { background: linear-gradient(to top, #27496d, #3e8ed0); color: white; overflow-x: hidden; }
header { padding: 30px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
header h1 { font-size: 28px; }
nav a { margin: 0 10px; color: white; text-decoration: none; font-size: 16px; }
.hero { text-align: center; padding: 100px 20px 40px; background: url(‘https://images.unsplash.com/photo-1506744038136-46273834b3fb?fit=crop&w=1350&q=80’) no-repeat center center/cover; background-blend-mode: multiply; background-color: rgba(0, 0, 0, 0.5); color: white; }
.hero h1 { font-size: 50px; margin-bottom: 20px; }
.search-box { margin: 20px auto; display: flex; justify-content: center; flex-wrap: wrap; }
.search-box input { padding: 10px; width: 250px; border: none; border-radius: 20px 0 0 20px; margin-bottom: 10px; }
.search-box button { padding: 10px 20px; border: none; border-radius: 0 20px 20px 0; background-color: #ff5e57; color: white; cursor: pointer; margin-bottom: 10px; }
.cards { display: flex; justify-content: center; padding: 50px 20px; flex-wrap: wrap; gap: 30px; }
.card { background: linear-gradient(135deg, #f85032, #e73827); padding: 30px; border-radius: 20px; width: 250px; color: white; box-shadow: 0 5px 15px rgba(0,0,0,0.3); text-align: center; }
.card img { width: 100%; border-radius: 15px; margin-bottom: 20px; }
.card h2 { font-size: 24px; margin-bottom: 10px; }
.card p { font-size: 14px; }
.testimonial { background-color: #fff; color: #000; border-radius: 15px; padding: 20px; width: 250px; text-align: center; }
.testimonial img { border-radius: 50%; width: 60px; margin-bottom: 10px; }
.rating { color: gold; font-size: 18px; margin-bottom: 10px; }
@media screen and (max-width: 768px) { header { flex-direction: column; text-align: center; }
.hero h1 { font-size: 32px; }
.search-box input, .search-box button { width: 100%; border-radius: 20px; }
.search-box { flex-direction: column; align-items: center; }
.cards { flex-direction: column; align-items: center; } }