| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Modern Campus Apartment | StudentStay</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <style> |
| .gallery-slider { |
| scroll-snap-type: x mandatory; |
| } |
| .gallery-slide { |
| scroll-snap-align: start; |
| flex: 0 0 100%; |
| } |
| .amenity-item:hover { |
| background-color: #f0f9ff; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50"> |
| |
| <nav class="bg-white shadow-sm"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between h-16"> |
| <div class="flex items-center"> |
| <a href="index.html" class="flex items-center"> |
| <i data-feather="home" class="text-blue-500 mr-2"></i> |
| <span class="text-xl font-bold text-blue-600">StudentStay</span> |
| </a> |
| </div> |
| <div class="hidden md:flex items-center space-x-8"> |
| <a href="index.html" class="text-gray-600 hover:text-blue-600">Home</a> |
| <a href="listings.html" class="text-gray-600 hover:text-blue-600">Listings</a> |
| <a href="landlord.html" class="text-gray-600 hover:text-blue-600">For Landlords</a> |
| <a href="about.html" class="text-gray-600 hover:text-blue-600">About</a> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <a href="login.html" class="px-4 py-2 rounded-md text-blue-600 border border-blue-600 hover:bg-blue-50">Log In</a> |
| <a href="signup.html" class="px-4 py-2 rounded-md bg-blue-600 text-white hover:bg-blue-700">Sign Up</a> |
| <button class="md:hidden text-gray-600"> |
| <i data-feather="menu"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6"> |
| <div> |
| <h1 class="text-3xl font-bold text-gray-900">Modern Campus Apartment</h1> |
| <div class="flex items-center mt-2"> |
| <div class="flex text-yellow-400 mr-2"> |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| </div> |
| <span class="text-sm text-gray-600">4.9 (24 reviews)</span> |
| </div> |
| </div> |
| <div class="mt-4 md:mt-0 flex items-center space-x-4"> |
| <button class="flex items-center text-gray-600 hover:text-blue-600"> |
| <i data-feather="share-2" class="w-5 h-5 mr-1"></i> |
| <span>Share</span> |
| </button> |
| <button class="flex items-center text-gray-600 hover:text-blue-600"> |
| <i data-feather="heart" class="w-5 h-5 mr-1"></i> |
| <span>Save</span> |
| </button> |
| </div> |
| </div> |
| |
| <div class="mb-6"> |
| <p class="text-blue-600 font-medium"><i data-feather="map-pin" class="inline mr-1 w-4 h-4"></i> 124 University Avenue, London • 0.5mi from University</p> |
| </div> |
| |
| |
| <div class="bg-blue-50 p-4 rounded-lg mb-8 flex flex-col md:flex-row justify-between items-start md:items-center"> |
| <div class="mb-4 md:mb-0"> |
| <span class="text-2xl font-bold text-gray-900">R8,500</span> |
| <span class="text-gray-600">/month</span> |
| <span class="ml-4 text-sm bg-green-100 text-green-800 px-2 py-1 rounded-full">Available from August 2023</span> |
| </div> |
| <div class="flex space-x-4"> |
| <button class="px-6 py-3 bg-white text-blue-600 border border-blue-600 rounded-md font-medium hover:bg-blue-50 transition-colors"> |
| <i data-feather="message-square" class="inline mr-2 w-4 h-4"></i> Contact Landlord |
| </button> |
| <button class="px-6 py-3 bg-blue-600 text-white rounded-md font-medium hover:bg-blue-700 transition-colors"> |
| <i data-feather="calendar" class="inline mr-2 w-4 h-4"></i> Book Viewing |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-12"> |
| <div class="relative"> |
| |
| <div class="gallery-slider overflow-hidden relative rounded-xl"> |
| <div class="flex overflow-x-auto snap-x snap-mandatory scroll-smooth" id="main-slider"> |
| <div class="gallery-slide"> |
| <img src="https://images.unsplash.com/photo-1560448070-847cb1d99d26" alt="Modern Apartment Living Room" class="w-full h-auto max-h-96 object-cover rounded-xl"> |
| </div> |
| <div class="gallery-slide"> |
| <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c" alt="Modern Apartment Kitchen" class="w-full h-auto max-h-96 object-cover rounded-xl"> |
| </div> |
| <div class="gallery-slide"> |
| <img src="https://images.unsplash.com/photo-1580587771525-78b9dba3b914" alt="Modern Apartment Bedroom" class="w-full h-auto max-h-96 object-cover rounded-xl"> |
| </div> |
| <div class="gallery-slide"> |
| <img src="https://images.unsplash.com/photo-1505691938895-1758d7feb511" alt="Modern Apartment Bathroom" class="w-full h-auto max-h-96 object-cover rounded-xl"> |
| </div> |
| </div> |
| <button class="absolute left-4 top-1/2 transform -translate-y-1/2 bg-white p-2 rounded-full shadow-md hover:bg-gray-100" onclick="prevSlide()"> |
| <i data-feather="chevron-left" class="w-6 h-6"></i> |
| </button> |
| <button class="absolute right-4 top-1/2 transform -translate-y-1/2 bg-white p-2 rounded-full shadow-md hover:bg-gray-100" onclick="nextSlide()"> |
| <i data-feather="chevron-right" class="w-6 h-6"></i> |
| </button> |
| </div> |
| |
| |
| <div class="flex space-x-2 mt-4 overflow-x-auto py-2"> |
| <button class="flex-shrink-0 w-20 h-16 rounded-md overflow-hidden" onclick="goToSlide(0)"> |
| <img src="https://images.unsplash.com/photo-1560448070-847cb1d99d26" alt="Thumbnail 1" class="w-full h-full object-cover"> |
| </button> |
| <button class="flex-shrink-0 w-20 h-16 rounded-md overflow-hidden" onclick="goToSlide(1)"> |
| <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c" alt="Thumbnail 2" class="w-full h-full object-cover"> |
| </button> |
| <button class="flex-shrink-0 w-20 h-16 rounded-md overflow-hidden" onclick="goToSlide(2)"> |
| <img src="https://images.unsplash.com/photo-1580587771525-78b9dba3b914" alt="Thumbnail 3" class="w-full h-full object-cover"> |
| </button> |
| <button class="flex-shrink-0 w-20 h-16 rounded-md overflow-hidden" onclick="goToSlide(3)"> |
| <img src="https://images.unsplash.com/photo-1505691938895-1758d7feb511" alt="Thumbnail 4" class="w-full h-full object-cover"> |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-16"> |
| <div class="flex flex-col lg:flex-row gap-12"> |
| |
| <div class="lg:w-2/3"> |
| |
| <div class="mb-10"> |
| <h2 class="text-2xl font-bold text-gray-900 mb-4">About this property</h2> |
| <p class="text-gray-700 mb-4">This modern, fully furnished apartment is located just 0.5 miles from the main university campus, making it perfect for students who want to be close to classes. The apartment is part of a secure building with 24/7 CCTV and a friendly onsite manager.</p> |
| <p class="text-gray-700">The space includes a comfortable living area with a flat-screen TV, a fully equipped kitchen, a spacious bedroom with double bed and plenty of storage, and a modern bathroom. Utilities and high-speed Wi-Fi are included in the rent.</p> |
| </div> |
| |
| |
| <div class="mb-10"> |
| <h2 class="text-2xl font-bold text-gray-900 mb-6">Amenities</h2> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
| <div class="amenity-item p-4 border border-gray-200 rounded-lg flex items-center cursor-pointer transition-colors"> |
| <div class="bg-blue-100 p-2 rounded-full mr-4"> |
| <i data-feather="wifi" class="w-5 h-5 text-blue-600"></i> |
| </div> |
| <span class="font-medium text-gray-700">High-speed Wi-Fi</span> |
| </div> |
| <div class="amenity-item p-4 border border-gray-200 rounded-lg flex items-center cursor-pointer transition-colors"> |
| <div class="bg-blue-100 p-2 rounded-full mr-4"> |
| <i data-feather="home" class="w-5 h-5 text-blue-600"></i> |
| </div> |
| <span class="font-medium text-gray-700">Fully furnished</span> |
| </div> |
| <div class="amenity-item p-4 border border-gray-200 rounded-lg flex items-center cursor-pointer transition-colors"> |
| <div class="bg-blue-100 p-2 rounded-full mr-4"> |
| <i data-feather="droplet" class="w-5 h-5 text-blue-600"></i> |
| </div> |
| <span class="font-medium text-gray-700">Utilities included</span> |
| </div> |
| <div class="amenity-item p-4 border border-gray-200 rounded-lg flex items-center cursor-pointer transition-colors"> |
| <div class="bg-blue-100 p-2 rounded-full mr-4"> |
| <i data-feather="shield" class="w-5 h-5 text-blue-600"></i> |
| </div> |
| <span class="font-medium text-gray-700">Security system</span> |
| </div> |
| <div class="amenity-item p-4 border border-gray-200 rounded-lg flex items-center cursor-pointer transition-colors"> |
| <div class="bg-blue-100 p-2 rounded-full mr-4"> |
| <i data-feather="package" class="w-5 h-5 text-blue-600"></i> |
| </div> |
| <span class="font-medium text-gray-700">Laundry facilities</span> |
| </div> |
| <div class="amenity-item p-4 border border-gray-200 rounded-lg flex items-center cursor-pointer transition-colors"> |
| <div class="bg-blue-100 p-2 rounded-full mr-4"> |
| <i data-feather="bicycle" class="w-5 h-5 text-blue-600"></i> |
| </div> |
| <span class="font-medium text-gray-700">Bike storage</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mb-10"> |
| <h2 class="text-2xl font-bold text-gray-900 mb-4">Location</h2> |
| <div class="h-64 bg-gray-200 rounded-xl overflow-hidden relative"> |
| |
| <div class="absolute inset-0 flex items-center justify-center bg-blue-50"> |
| <div class="text-center"> |
| <i data-feather="map" class="w-12 h-12 text-blue-400 mx-auto mb-2"></i> |
| <p class="text-blue-600">124 University Avenue, London</p> |
| <p class="text-gray-500 text-sm mt-1">0.5 miles from University campus</p> |
| </div> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <p class="text-gray-700"><i data-feather="clock" class="inline mr-2 w-4 h-4"></i> 10 min walk to UWC • 5 min walk to MyCiTi bus stop • 15 min walk to Canal Walk</p> |
| </div> |
| </div> |
| |
| |
| <div> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-2xl font-bold text-gray-900">Reviews</h2> |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"> |
| <i data-feather="edit" class="inline mr-2 w-4 h-4"></i> Write a Review |
| </button> |
| </div> |
| |
| <div class="space-y-6"> |
| |
| <div class="bg-white p-6 rounded-lg shadow-sm"> |
| <div class="flex items-center mb-4"> |
| <div class="h-12 w-12 rounded-full bg-gray-200 overflow-hidden mr-4"> |
| <img src="http://static.photos/people/200x200/3" alt="Reviewer" class="h-full w-full object-cover"> |
| </div> |
| <div> |
| <h4 class="font-medium text-gray-900">Emma Wilson</h4> |
| <div class="flex items-center mt-1"> |
| <div class="flex text-yellow-400 mr-2"> |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| </div> |
| <span class="text-sm text-gray-500">2 months ago</span> |
| </div> |
| </div> |
| </div> |
| <p class="text-gray-700">"I've lived here for the past year and it's been perfect. The location is incredibly convenient - I can walk to all my classes. The apartment is modern and clean, and the landlord is very responsive when anything needs fixing. Highly recommend!"</p> |
| </div> |
| |
| |
| <div class="bg-white p-6 rounded-lg shadow-sm"> |
| <div class="flex items-center mb-4"> |
| <div class="h-12 w-12 rounded-full bg-gray-200 overflow-hidden mr-4"> |
| <img src="http://static.photos/people/200x200/4" alt="Reviewer" class="h-full w-full object-cover"> |
| </div> |
| <div> |
| <h4 class="font-medium text-gray-900">Daniel Park</h4> |
| <div class="flex items-center mt-1"> |
| <div class="flex text-yellow-400 mr-2"> |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| </div> |
| <span class="text-sm text-gray-500">4 months ago</span> |
| </div> |
| </div> |
| </div> |
| <p class="text-gray-700">"As an international student, finding good accommodation was my biggest worry. This apartment exceeded all my expectations. It's quiet, secure, and the Wi-Fi is excellent for online classes. The building manager helped me with everything when I first arrived."</p> |
| </div> |
| </div> |
| |
| <button class="mt-6 w-full py-3 border border-blue-600 text-blue-600 rounded-md font-medium hover:bg-blue-50 transition-colors"> |
| Show All 24 Reviews |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="lg:w-1/3"> |
| <div class="bg-white p-6 rounded-xl shadow-md sticky top-4"> |
| <div class="flex items-center mb-6"> |
| <div class="h-16 w-16 rounded-full bg-gray-200 overflow-hidden mr-4"> |
| <img src="http://static.photos/people/200x200/5" alt="Landlord" class="h-full w-full object-cover"> |
| </div> |
| <div> |
| <h3 class="font-bold text-gray-900">Mark Johnson</h3> |
| <p class="text-gray-600">Property Owner</p> |
| <div class="flex items-center mt-1"> |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
| <span class="text-sm text-gray-600 ml-1">4.9 (24 reviews)</span> |
| </div> |
| </div> |
| </div> |
| |
| <div class="space-y-4 mb-6"> |
| <div class="flex items-center"> |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> |
| <i data-feather="mail" class="w-5 h-5 text-blue-600"></i> |
| </div> |
| <span class="text-gray-700">mark.johnson@studentstay.co.za</span> |
| </div> |
| <div class="flex items-center"> |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> |
| <i data-feather="phone" class="w-5 h-5 text-blue-600"></i> |
| </div> |
| <span class="text-gray-700">+27 82 123 4567</span> |
| </div> |
| <div class="flex items-center"> |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> |
| <i data-feather="clock" class="w-5 h-5 text-blue-600"></i> |
| </div> |
| <span class="text-gray-700">Responds within 1 hour</span> |
| </div> |
| </div> |
| |
| <div class="space-y-4"> |
| <button class="w-full py-3 bg-blue-600 text-white rounded-md font-medium hover:bg-blue-700 transition-colors flex items-center justify-center"> |
| <i data-feather="message-square" class="w-5 h-5 mr-2"></i> Contact Landlord |
| </button> |
| <button class="w-full py-3 bg-white text-blue-600 border border-blue-600 rounded-md font-medium hover:bg-blue-50 transition-colors flex items-center justify-center"> |
| <i data-feather="calendar" class="w-5 h-5 mr-2"></i> Book Viewing |
| </button> |
| <button class="w-full py-3 bg-white text-gray-700 border border-gray-300 rounded-md font-medium hover:bg-gray-50 transition-colors flex items-center justify-center"> |
| <i data-feather="heart" class="w-5 h-5 mr-2"></i> Save to Favorites |
| </button> |
| </div> |
| |
| <div class="mt-6 pt-6 border-t border-gray-200"> |
| <h4 class="font-medium text-gray-900 mb-3">Rental Terms</h4> |
| <ul class="space-y-2 text-sm text-gray-600"> |
| <li class="flex items-start"> |
| <i data-feather="check" class="w-4 h-4 text-green-500 mr-2 mt-0.5"></i> |
| <span>Minimum stay: 6 months</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="w-4 h-4 text-green-500 mr-2 mt-0.5"></i> |
| <span>Deposit: 1 month's rent</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="w-4 h-4 text-green-500 mr-2 mt-0.5"></i> |
| <span>Utilities included (electricity, water, gas)</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="w-4 h-4 text-green-500 mr-2 mt-0.5"></i> |
| <span>No smoking</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-16"> |
| <h2 class="text-2xl font-bold text-gray-900 mb-6">Similar Listings</h2> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| |
| <a href="property.html?id=5" class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow"> |
| <div class="relative h-48"> |
| <img src="http://static.photos/workspace/640x360/1" alt="Similar listing" class="absolute h-full w-full object-cover"> |
| <div class="absolute top-2 right-2 bg-white px-2 py-1 rounded-full text-sm font-medium">R8,000/mo</div> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-lg font-semibold text-gray-900 mb-2">Gardens Studio</h3> |
| <p class="text-gray-600 mb-3"><i data-feather="map-pin" class="inline mr-1 w-4 h-4"></i> 1km from University of Cape Town</p> |
| <div class="flex flex-wrap gap-2"> |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Private</span> |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Wi-Fi</span> |
| </div> |
| </div> |
| </a> |
| |
| |
| <a href="property.html?id=6" class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow"> |
| <div class="relative h-48"> |
| <img src="http://static.photos/workspace/640x360/2 |
| </body> |
| </html> |
