Uptown is a website template for real estate agencies, realtors, rental companies and property managers, built on Bootstrap 5. It has nine pages: home, about, services, agents, properties, a property page, blog, a single blog post and contact. The layout is responsive and mobile-ready, and the menu bar stays in view as you scroll.
The home page opens with a parallax hero and a location search, followed by services, featured listings, how it works, an about block with counters, client reviews, the agents and the latest blog posts. The properties page lists nine properties with a search bar that filters them by location, sale or rent, type and bedrooms, and each listing has its own page with a photo, facts, features, a description, reviews and an “Ask about this property” button. You will also find a services page with a four-step process, an agents page, a blog with topic and keyword filters, a blog post with comments and a comment form, and a contact page with a working contact form and a map that loads on click.
What’s new in 3.0
Bootstrap 5.3.8 (the earlier release used Bootstrap 4.2.1 and jQuery), compiled from Sass with the Bootstrap 4 proportions the design was drawn with, and plain JavaScript with no jQuery. Swiper 14 replaces Owl Carousel on the client reviews, Jarallax 3 runs the hero parallax (static on phones and when reduced motion is set), and small built-in modules replace Waypoints, animate.css and animateNumber for the reveal animations and counters. Plugins that nothing used, such as AOS, Scrollax, Magnific Popup and the date and time pickers, are gone. Lucide SVG icons and a Font Awesome 7 Brands subset replace the Open Iconic, Ionicons, IcoMoon and Flaticon icon fonts. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
Lighter pages: the home page went from 4,090 KB and 53 requests to 1,311 KB and 31 requests, and all nine pages together from 24,993 KB and 386 requests to 6,761 KB and 172. Every photo has an AVIF version with the JPEG as the fallback, and the full-screen preloader is gone. The download went from 5.57 MB to 4.92 MB and still includes the Sass sources, now with the build tools.
No third-party requests: Nunito Sans is self-hosted, the Twitter bird is now the X logo, and a Google Analytics 4 snippet stays commented out until you add your own ID. The contact page map is an OpenStreetMap map that needs no setup and loads only when a visitor clicks “Show map”. Before, every page loaded its web fonts from Google Fonts and a Google Maps script.
Property search that works: the search bar on the properties page filters the listings in the browser by location, sale or rent, type and bedrooms, keeps the search in the address and says when nothing matches, and the home page search opens it pre-filled. The nine listings are different houses, apartments and commercial spaces for sale or rent, and each card opens its own listing page; the eight blog posts each open their own post with its comments. Before, the home search did nothing, all nine property cards were the same home and opened one fixed listing, and every post had the same title.
Working forms: the contact form and the blog comment form send through php/send-email.php and php/comment.php, with a spam trap, a recipient you set and an in-page message, and the mailer keeps visitor input out of the mail headers. “Ask about this property” and the agent names open the contact form with the subject filled in. Before, both forms posted nowhere.
Accessibility: a skip link and a main landmark on every page, headings in order, a labelled search field, names on icon-only buttons and links, visible focus rings (they were switched off) and 44 px slider dots (they were 10 px). Text meets WCAG AA contrast, with a deeper pink for pink text and the buttons, darker greys and a darker overlay on the “How it works” photo on phones and tablets.
Fixed: each agent, client and blog post now has its own name or title (they repeated one each), the review summary matches its review count, typos such as “Lokced” are corrected, and the contact details are fictional instead of placeholder text. On wide screens the slanted white edges at the bottom of the hero now reach the corners (a sliver of photo showed at both corners above about 1800 px). Every link now goes somewhere; the pagination, footer, social and reply links pointed to #.