├── .gitignore ├── assets ├── images │ ├── logo.png │ ├── author.jpg │ ├── blog-1.jpg │ ├── blog-1.png │ ├── blog-2.jpg │ ├── blog-3.jpg │ ├── logo.jpeg │ ├── blog-3.webp │ ├── favicon.ico │ ├── service-1.png │ ├── service-2.png │ ├── service-3.png │ ├── hero-banner.png │ ├── logo-light.png │ ├── property-1.jpeg │ ├── property-1.jpg │ ├── property-2.jpg │ ├── property-3.jpg │ ├── property-4.jpg │ ├── property-4.png │ ├── about-banner-1.jpg │ ├── about-banner-1.png │ ├── about-banner-2.jpg │ └── hero-banner.jpeg ├── js │ └── script.js └── css │ └── style.css ├── .idea ├── .gitignore ├── vcs.xml ├── modules.xml └── Property-Booker.iml ├── LICENSE ├── backend-data └── sampleData.json ├── README.md └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangsonww/BadminVerse-Property-Booker/HEAD/assets/images/logo.png -------------------------------------------------------------------------------- /assets/images/author.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangsonww/BadminVerse-Property-Booker/HEAD/assets/images/author.jpg -------------------------------------------------------------------------------- /assets/images/blog-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangsonww/BadminVerse-Property-Booker/HEAD/assets/images/blog-1.jpg -------------------------------------------------------------------------------- /assets/images/blog-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangsonww/BadminVerse-Property-Booker/HEAD/assets/images/blog-1.png -------------------------------------------------------------------------------- /assets/images/blog-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangsonww/BadminVerse-Property-Booker/HEAD/assets/images/blog-2.jpg -------------------------------------------------------------------------------- /assets/images/blog-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangsonww/BadminVerse-Property-Booker/HEAD/assets/images/blog-3.jpg -------------------------------------------------------------------------------- /assets/images/logo.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangsonww/BadminVerse-Property-Booker/HEAD/assets/images/logo.jpeg -------------------------------------------------------------------------------- /assets/images/blog-3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangsonww/BadminVerse-Property-Booker/HEAD/assets/images/blog-3.webp -------------------------------------------------------------------------------- /assets/images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangsonww/BadminVerse-Property-Booker/HEAD/assets/images/favicon.ico -------------------------------------------------------------------------------- /assets/images/service-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangsonww/BadminVerse-Property-Booker/HEAD/assets/images/service-1.png -------------------------------------------------------------------------------- /assets/images/service-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangsonww/BadminVerse-Property-Booker/HEAD/assets/images/service-2.png -------------------------------------------------------------------------------- /assets/images/service-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangsonww/BadminVerse-Property-Booker/HEAD/assets/images/service-3.png -------------------------------------------------------------------------------- /assets/images/hero-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangsonww/BadminVerse-Property-Booker/HEAD/assets/images/hero-banner.png -------------------------------------------------------------------------------- /assets/images/logo-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangsonww/BadminVerse-Property-Booker/HEAD/assets/images/logo-light.png -------------------------------------------------------------------------------- /assets/images/property-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangsonww/BadminVerse-Property-Booker/HEAD/assets/images/property-1.jpeg -------------------------------------------------------------------------------- /assets/images/property-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangsonww/BadminVerse-Property-Booker/HEAD/assets/images/property-1.jpg -------------------------------------------------------------------------------- /assets/images/property-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangsonww/BadminVerse-Property-Booker/HEAD/assets/images/property-2.jpg -------------------------------------------------------------------------------- /assets/images/property-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangsonww/BadminVerse-Property-Booker/HEAD/assets/images/property-3.jpg -------------------------------------------------------------------------------- /assets/images/property-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangsonww/BadminVerse-Property-Booker/HEAD/assets/images/property-4.jpg -------------------------------------------------------------------------------- /assets/images/property-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangsonww/BadminVerse-Property-Booker/HEAD/assets/images/property-4.png -------------------------------------------------------------------------------- /.idea/.gitignore: -------------------------------------------------------------------------------- 1 | # Default ignored files 2 | /shelf/ 3 | /workspace.xml 4 | # Editor-based HTTP Client requests 5 | /httpRequests/ 6 | -------------------------------------------------------------------------------- /assets/images/about-banner-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangsonww/BadminVerse-Property-Booker/HEAD/assets/images/about-banner-1.jpg -------------------------------------------------------------------------------- /assets/images/about-banner-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangsonww/BadminVerse-Property-Booker/HEAD/assets/images/about-banner-1.png -------------------------------------------------------------------------------- /assets/images/about-banner-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangsonww/BadminVerse-Property-Booker/HEAD/assets/images/about-banner-2.jpg -------------------------------------------------------------------------------- /assets/images/hero-banner.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoangsonww/BadminVerse-Property-Booker/HEAD/assets/images/hero-banner.jpeg -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.idea/Property-Booker.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Son Nguyen 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /assets/js/script.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const elemToggleFunc = function (elem) { elem.classList.toggle("active"); } 4 | const navbar = document.querySelector("[data-navbar]"); 5 | const overlay = document.querySelector("[data-overlay]"); 6 | const navCloseBtn = document.querySelector("[data-nav-close-btn]"); 7 | const navOpenBtn = document.querySelector("[data-nav-open-btn]"); 8 | const navbarLinks = document.querySelectorAll("[data-nav-link]"); 9 | 10 | const navElemArr = [overlay, navCloseBtn, navOpenBtn]; 11 | 12 | for (let i = 0; i < navbarLinks.length; i++) { 13 | navElemArr.push(navbarLinks[i]); 14 | } 15 | 16 | for (let i = 0; i < navElemArr.length; i++) { 17 | navElemArr[i].addEventListener("click", function () { 18 | elemToggleFunc(navbar); 19 | elemToggleFunc(overlay); 20 | }); 21 | } 22 | 23 | function openModal() { 24 | document.getElementById("addListingModal").style.display = "block"; 25 | } 26 | 27 | function closeModal() { 28 | document.getElementById("addListingModal").style.display = "none"; 29 | } 30 | 31 | const addListingButton = document.querySelector('.header-top-btn'); 32 | addListingButton.addEventListener('click', openModal); 33 | 34 | function openBookingModal() { 35 | document.getElementById("bookingModal").style.display = "block"; 36 | } 37 | 38 | function closeBookingModal() { 39 | document.getElementById("bookingModal").style.display = "none"; 40 | } 41 | 42 | const makeBookingButton = document.querySelector('.hero-content .btn'); 43 | makeBookingButton.addEventListener('click', openBookingModal); 44 | 45 | function scrollToPropertySection() { 46 | const propertySection = document.getElementById("property"); 47 | if (propertySection) { 48 | propertySection.scrollIntoView({ behavior: "smooth" }); // Smooth scrolling 49 | } 50 | } 51 | 52 | const header = document.querySelector("[data-header]"); 53 | 54 | window.addEventListener("scroll", function () { 55 | window.scrollY >= 400 ? header.classList.add("active") 56 | : header.classList.remove("active"); 57 | }); 58 | -------------------------------------------------------------------------------- /backend-data/sampleData.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": 1, 4 | "name": "New Basketball Court - Forest View", 5 | "sport": "basketball", 6 | "location": "District 7, Ho Chi Minh City, Vietnam", 7 | "price": 40000, 8 | "available": true, 9 | "hours": "8AM - 10PM", 10 | "amenities": ["Water fountain", "Secure lockers", "Equipment rental"], 11 | "images": ["assets/images/property-1.jpeg"], 12 | "description": "Great basketball court with a nice view of the forest. Perfect for casual play or competitive matches." 13 | }, 14 | { 15 | "id": 2, 16 | "name": "Indoor Badminton Court - District 2", 17 | "sport": "badminton", 18 | "location": "District 2, Ho Chi Minh City, Vietnam", 19 | "price": 50000, 20 | "available": true, 21 | "hours": "6AM - 11PM", 22 | "amenities": ["Air conditioning", "Shower facilities", "Café"], 23 | "images": ["assets/images/property-2.jpg"], 24 | "description": "Well-maintained indoor badminton court with synthetic flooring and ample lighting." 25 | }, 26 | { 27 | "id": 3, 28 | "name": "Multi-Sport Court - District 7", 29 | "sport": "multi-sport", 30 | "location": "District 7, Ho Chi Minh City, Vietnam", 31 | "price": 65000, 32 | "available": false, 33 | "hours": "7AM - 10PM", 34 | "amenities": ["Basketball hoops", "Volleyball net", "Badminton nets", "Social lounge"], 35 | "images": ["assets/images/property-3.jpg"], 36 | "description": "Versatile indoor court suitable for basketball, volleyball, and badminton. Great for group events and tournaments." 37 | }, 38 | { 39 | "id": 4, 40 | "name": "Outdoor Badminton Courts - Park View", 41 | "sport": "badminton", 42 | "location": "District 3, Ho Chi Minh City, Vietnam", 43 | "price": 35000, 44 | "available": true, 45 | "hours": "6AM - 9PM", 46 | "amenities": ["Benches", "Shade", "Nearby restrooms"], 47 | "images": ["assets/images/property-4.jpg"], 48 | "description": "Two well-maintained outdoor badminton courts located in a peaceful park setting. Ideal for casual play." 49 | } 50 | ] 51 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # BadminVerse: Badminton & Basketball Court Booking Platform 2 | 3 | **Project Overview** 4 | 5 | BadminVerse is a simple, lightweight, and user-friendly web platform designed to simplify the process of finding and booking badminton and basketball courts across Vietnam. The platform features a visually appealing design, easy navigation, and convenient booking functionality. 6 | 7 | **Key Features** 8 | 9 | * **Court Search and Booking:** Users can easily search for available courts based on location, date, and time. A seamless booking process allows them to reserve their desired court. 10 | * **Featured Listings:** The platform showcases prominent court listings, providing detailed information about each court's amenities, location, and pricing. 11 | * **News and Blogs:** Users can stay updated with the latest news, tips, and articles related to badminton and basketball. 12 | * **User Accounts:** User accounts enable booking history tracking, personalized preferences, and participation in events/tournaments. (Not yet implemented in the provided code) 13 | * **Court Listing Submission:** Court owners can add their listings to the platform, potentially expanding the available options for users. (Not yet implemented in the provided code) 14 | 15 | **Technologies Used** 16 | 17 | * **HTML5:** Structure and content of the web pages. 18 | * **CSS3:** Styling and visual presentation. 19 | * **JavaScript:** Interactive elements and potential booking functionality (currently placeholder functions). 20 | * **Ionicons:** Icons for visual appeal and user interface enhancement. 21 | * **Google Fonts:** "Nunito Sans" and "Poppins" font families for typography. 22 | * **Unsplash:** High-quality images for visual content. 23 | * **Hero Patterns:** Background patterns for design aesthetics. 24 | 25 | **Project Structure** 26 | 27 | ``` 28 | BadminVerse/ 29 | ├── assets/ 30 | │ ├── css/ 31 | │ │ └── style.css 32 | │ ├── images/ 33 | │ │ └── various image files 34 | │ └── js/ 35 | │ └── script.js 36 | ├── index.html 37 | └── README.md 38 | ``` 39 | 40 | **How to Use** 41 | 42 | 1. **Clone the repository:** `git clone https://github.com/hoangsonww/BadminVerse-Property-Booker.git`. 43 | 2. **Open `index.html`:** View the webpage in your preferred web browser. 44 | 3. **Explore:** Browse featured court listings, read news/blog articles. 45 | 4. **Booking:** (Placeholder Functionality) Click on "Make A Booking" or "Book Now" buttons to initiate the court reservation process. 46 | 5. **Add Listing:** (Placeholder Functionality) Use the "Add Listing" feature to submit your court details to the platform. 47 | 48 | **Important Notes** 49 | 50 | * The booking and court listing functionalities are not fully implemented in the provided code. These are represented by placeholder functions and modals. 51 | * The actual implementation would involve server-side scripting (e.g., PHP, Node.js), a database, and potentially a payment gateway integration. 52 | * The project can be extended to include a backend and database to store court information, user data, and booking details. 53 | 54 | **Future Enhancements** 55 | 56 | * **User Authentication and Profiles:** Implement user login/registration and personalized profiles. 57 | * **Enhanced Search and Filtering:** Allow users to filter courts by specific criteria (e.g., indoor/outdoor, surface type, amenities). 58 | * **Ratings and Reviews:** Enable users to rate and review courts. 59 | * **Interactive Map:** Integrate a map to visualize court locations. 60 | * **Mobile App:** Create a mobile app version for on-the-go booking. 61 | 62 | **Contributing** 63 | 64 | Feel free to fork the repository and submit pull requests if you'd like to contribute to the development of BadminVerse. 65 | 66 | Let me know if you have any other questions. 67 | 68 | --- 69 | 70 | Thank you for considering my project. I hope you find it interesting and engaging. If you have any questions or need further information, please feel free to reach out! 71 | -------------------------------------------------------------------------------- /assets/css/style.css: -------------------------------------------------------------------------------- 1 | /*-----------------------------------*\ 2 | #style.css 3 | \*-----------------------------------*/ 4 | 5 | /** 6 | * copyright 2022 codewithsadee 7 | */ 8 | 9 | 10 | 11 | 12 | 13 | /*-----------------------------------*\ 14 | #CUSTOM PROPERTY 15 | \*-----------------------------------*/ 16 | 17 | :root { 18 | 19 | /** 20 | * colors 21 | */ 22 | 23 | --dark-jungle-green: hsl(188, 63%, 7%); 24 | --prussian-blue: hsl(200, 69%, 14%); 25 | --raisin-black-1: hsl(227, 29%, 13%); 26 | --raisin-black-2: hsl(229, 17%, 19%); 27 | --yellow-green: hsl(89, 72%, 45%); 28 | --orange-soda: hsl(9, 100%, 62%); 29 | --cultured-1: hsl(0, 0%, 93%); 30 | --cultured-2: hsl(192, 24%, 96%); 31 | --misty-rose: hsl(7, 56%, 91%); 32 | --alice-blue: hsl(210, 100%, 97%); 33 | --seashell: hsl(8, 100%, 97%); 34 | --cadet: hsl(200, 15%, 43%); 35 | --white: hsl(0, 0%, 100%); 36 | --black: hsl(0, 0%, 0%); 37 | --opal: hsl(180, 20%, 62%); 38 | 39 | /** 40 | * typography 41 | */ 42 | 43 | --ff-nunito-sans: "Nunito Sans", sans-serif; 44 | --ff-poppins: "Poppins", sans-serif; 45 | 46 | --fs-1: 1.875rem; 47 | --fs-2: 1.5rem; 48 | --fs-3: 1.375rem; 49 | --fs-4: 1.125rem; 50 | --fs-5: 0.875rem; 51 | --fs-6: 0.813rem; 52 | --fs-7: 0.75rem; 53 | 54 | --fw-500: 500; 55 | --fw-600: 600; 56 | --fw-700: 700; 57 | 58 | /** 59 | * transition 60 | */ 61 | 62 | --transition: 0.25s ease; 63 | 64 | /** 65 | * spacing 66 | */ 67 | 68 | --section-padding: 100px; 69 | 70 | /** 71 | * shadow 72 | */ 73 | 74 | --shadow-1: 0 5px 20px 0 hsla(219, 56%, 21%, 0.1); 75 | --shadow-2: 0 16px 32px hsla(188, 63%, 7%, 0.1); 76 | 77 | } 78 | 79 | 80 | 81 | 82 | 83 | /*-----------------------------------*\ 84 | #RESET 85 | \*-----------------------------------*/ 86 | 87 | *, *::before, *::after { 88 | margin: 0; 89 | padding: 0; 90 | box-sizing: border-box; 91 | } 92 | 93 | li { list-style: none; } 94 | 95 | a { text-decoration: none; } 96 | 97 | a, 98 | img, 99 | span, 100 | button, 101 | ion-icon { display: block; } 102 | 103 | button { 104 | border: none; 105 | background: none; 106 | font: inherit; 107 | text-align: left; 108 | cursor: pointer; 109 | } 110 | 111 | address { font-style: normal; } 112 | 113 | ion-icon { pointer-events: none; } 114 | 115 | html { 116 | font-family: var(--ff-nunito-sans); 117 | scroll-behavior: smooth; 118 | } 119 | 120 | body { 121 | background: var(--white); 122 | overflow-x: hidden; 123 | } 124 | 125 | ::-webkit-scrollbar { 126 | width: 10px; 127 | height: 8px; 128 | } 129 | 130 | ::-webkit-scrollbar-track { background: var(--white); } 131 | 132 | ::-webkit-scrollbar-thumb { 133 | background: var(--cadet); 134 | border-left: 2px solid var(--white); 135 | } 136 | 137 | 138 | 139 | 140 | 141 | /*-----------------------------------*\ 142 | #REUSED STYLE 143 | \*-----------------------------------*/ 144 | 145 | .container { padding-inline: 15px; } 146 | 147 | button, a { transition: var(--transition); } 148 | 149 | .h1, 150 | .h2, 151 | .h3 { 152 | color: var(--dark-jungle-green); 153 | font-family: var(--ff-poppins); 154 | line-height: 1.3; 155 | } 156 | 157 | .h1 { 158 | font-size: var(--fs-1); 159 | line-height: 1; 160 | } 161 | 162 | .h2 { font-size: var(--fs-2); } 163 | 164 | .h3 { 165 | font-size: var(--fs-4); 166 | font-weight: var(--font-weight, 700); 167 | } 168 | 169 | .h3 > a { color: inherit; } 170 | 171 | .btn { 172 | position: relative; 173 | background: var(--orange-soda); 174 | color: var(--white); 175 | font-family: var(--ff-poppins); 176 | font-size: var(--fs-5); 177 | text-transform: var(--text-transform, capitalize); 178 | border: 1px solid var(--orange-soda); 179 | padding: 10px 20px; 180 | z-index: 1; 181 | } 182 | 183 | .btn:is(:hover, :focus) { 184 | background: var(--black); 185 | color: var(--dark-jungle-green); 186 | border-color: var(--black); 187 | } 188 | 189 | .btn::before { 190 | content: ""; 191 | position: absolute; 192 | top: 0; 193 | left: 0; 194 | width: 0; 195 | height: 100%; 196 | background: var(--white); 197 | transition: var(--transition); 198 | z-index: -1; 199 | } 200 | 201 | .btn:is(:hover, :focus)::before { width: 100%; } 202 | 203 | .w-100 { width: 100%; } 204 | 205 | .section-subtitle { 206 | color: var(--orange-soda); 207 | font-size: var(--fs-5); 208 | font-weight: var(--fw-600); 209 | padding: 5px 20px; 210 | background: hsla(9, 100%, 62%, 0.1); 211 | width: max-content; 212 | border-radius: 50px; 213 | margin-inline: auto; 214 | margin-bottom: 15px; 215 | } 216 | 217 | .section-title { 218 | text-align: var(--text-align, center); 219 | margin-bottom: var(--margin-bottom, 50px); 220 | } 221 | 222 | .card-badge { 223 | background: var(--black); 224 | color: var(--white); 225 | font-size: var(--fs-7); 226 | text-transform: uppercase; 227 | position: absolute; 228 | top: 15px; 229 | right: 15px; 230 | padding: 4px 10px; 231 | } 232 | 233 | .card-badge.green { background: var(--yellow-green); } 234 | 235 | .card-badge.orange { background: var(--orange-soda); } 236 | 237 | .has-scrollbar { 238 | display: flex; 239 | align-items: flex-start; 240 | gap: 15px; 241 | overflow-x: auto; 242 | margin-inline: -15px; 243 | padding-inline: 15px; 244 | scroll-padding-left: 15px; 245 | padding-bottom: 60px; 246 | scroll-snap-type: inline mandatory; 247 | } 248 | 249 | .has-scrollbar > li { 250 | min-width: 100%; 251 | scroll-snap-align: start; 252 | } 253 | 254 | .has-scrollbar::-webkit-scrollbar-track { 255 | background: var(--cultured-2); 256 | outline: 2px solid var(--cadet); 257 | border-radius: 10px; 258 | } 259 | 260 | .has-scrollbar::-webkit-scrollbar-thumb { 261 | background: var(--cadet); 262 | border: 1px solid var(--cultured-2); 263 | border-radius: 10px; 264 | } 265 | 266 | .has-scrollbar::-webkit-scrollbar-button { width: 15%; } 267 | 268 | select { 269 | appearance: none; 270 | background: var(--white); 271 | border: 1px solid var(--cadet); 272 | color: var(--cadet); 273 | font-size: var(--fs-5); 274 | padding: 10px 10px; 275 | border-radius: 5px; 276 | cursor: pointer; 277 | } 278 | 279 | input { 280 | background: var(--white); 281 | border: 1px solid var(--cadet); 282 | color: var(--cadet); 283 | font-size: var(--fs-5); 284 | padding: 10px 15px; 285 | border-radius: 5px; 286 | } 287 | 288 | /*-----------------------------------*\ 289 | #HEADER 290 | \*-----------------------------------*/ 291 | 292 | .header { 293 | position: relative; 294 | z-index: 2; 295 | } 296 | 297 | .header-top { 298 | background: var(--prussian-blue); 299 | padding-block: 15px; 300 | } 301 | 302 | .header-top .container, 303 | .header-top-list { 304 | display: flex; 305 | flex-wrap: wrap; 306 | justify-content: center; 307 | align-items: center; 308 | } 309 | 310 | .header-top .container { gap: 8px 20px; } 311 | 312 | .header-top-list { gap: 15px; } 313 | 314 | .header-top-link { 315 | color: var(--white); 316 | font-size: var(--fs-6); 317 | font-weight: var(--fw-700); 318 | display: flex; 319 | justify-content: center; 320 | align-items: center; 321 | gap: 5px; 322 | } 323 | 324 | .header-top-link:is(:hover, :focus) { color: var(--orange-soda); } 325 | 326 | .header-top-link ion-icon { 327 | color: var(--orange-soda); 328 | font-size: 15px; 329 | --ionicon-stroke-width: 60px; 330 | } 331 | 332 | .header-top .wrapper, 333 | .header-top-social-list { 334 | display: flex; 335 | align-items: center; 336 | } 337 | 338 | .header-top .wrapper { gap: 20px; } 339 | 340 | .header-top-social-list { gap: 8px; } 341 | 342 | .header-top-social-link { 343 | color: var(--white); 344 | font-size: 15px; 345 | } 346 | 347 | .header-top-btn { 348 | background: var(--orange-soda); 349 | color: var(--white); 350 | font-size: var(--fs-6); 351 | font-weight: var(--fw-700); 352 | padding: 4px 15px; 353 | } 354 | 355 | .header-top-btn:is(:hover, :focus) { --orange-soda: hsl(7, 72%, 46%); } 356 | 357 | .header-bottom { 358 | background: var(--white); 359 | padding-block: 25px; 360 | } 361 | 362 | .header-bottom .logo img { margin-inline: auto; } 363 | 364 | .navbar { 365 | background: var(--white); 366 | position: fixed; 367 | top: 0; 368 | left: -310px; 369 | max-width: 300px; 370 | width: 100%; 371 | height: 100%; 372 | box-shadow: 0 3px 10px hsla(0, 0%, 0%, 0.3); 373 | z-index: 5; 374 | padding: 60px 20px; 375 | visibility: hidden; 376 | transition: 0.15s ease-in; 377 | } 378 | 379 | .navbar.active { 380 | visibility: visible; 381 | transform: translateX(310px); 382 | transition: 0.25s ease-out; 383 | } 384 | 385 | .navbar-top { 386 | display: flex; 387 | justify-content: space-between; 388 | align-items: center; 389 | padding-bottom: 40px; 390 | border-bottom: 1px solid var(--cultured-1); 391 | margin-bottom: 25px; 392 | } 393 | 394 | .navbar-top .logo img { width: 200px; } 395 | 396 | .nav-close-btn ion-icon { 397 | font-size: 20px; 398 | --ionicon-stroke-width: 45px; 399 | padding: 5px; 400 | } 401 | 402 | .navbar-link { 403 | color: var(--cadet); 404 | font-size: var(--fs-5); 405 | font-weight: var(--fw-600); 406 | text-transform: uppercase; 407 | padding-block: 15px; 408 | } 409 | 410 | .navbar-link:is(:hover, :focus) { color: var(--orange-soda); } 411 | 412 | .overlay { 413 | position: fixed; 414 | inset: 0; 415 | background: hsla(0, 0%, 0%, 0.7); 416 | opacity: 0; 417 | pointer-events: none; 418 | transition: var(--transition); 419 | z-index: 4; 420 | } 421 | 422 | .overlay.active { 423 | opacity: 1; 424 | pointer-events: all; 425 | } 426 | 427 | .header-bottom-actions { 428 | background: var(--white); 429 | position: fixed; 430 | bottom: 0; 431 | left: 0; 432 | width: 100%; 433 | display: flex; 434 | justify-content: space-evenly; 435 | padding-block: 15px 10px; 436 | box-shadow: -2px 0 30px hsla(237, 71%, 52%, 0.2); 437 | z-index: 3; 438 | } 439 | 440 | .header-bottom-actions-btn ion-icon { 441 | color: hsl(0, 0%, 10%); 442 | font-size: 20px; 443 | margin-inline: auto; 444 | margin-bottom: 5px; 445 | --ionicon-stroke-width: 40px; 446 | transition: var(--transition); 447 | } 448 | 449 | .header-bottom-actions-btn:is(:hover, :focus) ion-icon { color: var(--orange-soda); } 450 | 451 | .header-bottom-actions-btn span { 452 | color: var(--cadet); 453 | font-family: var(--ff-poppins); 454 | font-size: var(--fs-7); 455 | font-weight: var(--fw-500); 456 | } 457 | 458 | 459 | 460 | 461 | 462 | /*-----------------------------------*\ 463 | #HERO 464 | \*-----------------------------------*/ 465 | 466 | .hero { 467 | background: var(--cultured-2); 468 | padding-block: var(--section-padding); 469 | } 470 | 471 | .hero-content { margin-bottom: 60px; } 472 | 473 | .hero-subtitle { 474 | display: flex; 475 | justify-content: flex-start; 476 | align-items: center; 477 | gap: 5px; 478 | margin-bottom: 20px; 479 | } 480 | 481 | .hero-subtitle ion-icon { color: var(--orange-soda); } 482 | 483 | .hero-subtitle span { 484 | color: var(--dark-jungle-green); 485 | font-size: var(--fs-5); 486 | font-weight: var(--fw-700); 487 | } 488 | 489 | .hero-title { margin-bottom: 20px; } 490 | 491 | .hero-text { 492 | color: var(--cadet); 493 | font-size: var(--fs-5); 494 | line-height: 1.8; 495 | padding-left: 15px; 496 | border-left: 1px solid; 497 | margin-bottom: 30px; 498 | } 499 | 500 | 501 | 502 | 503 | 504 | /*-----------------------------------*\ 505 | #ABOUT 506 | \*-----------------------------------*/ 507 | 508 | .about { padding-block: var(--section-padding); } 509 | 510 | .about-banner { 511 | position: relative; 512 | margin-bottom: 40px; 513 | } 514 | 515 | .about-banner > img { 516 | max-width: max-content; 517 | width: 100%; 518 | } 519 | 520 | .about-banner .abs-img { 521 | position: absolute; 522 | bottom: 100px; 523 | left: 15px; 524 | width: 50%; 525 | border-radius: 4px; 526 | } 527 | 528 | .about .section-subtitle { margin-inline: 0; } 529 | 530 | .about .section-title { 531 | --text-align: left; 532 | --margin-bottom: 15px; 533 | } 534 | 535 | .about-text { 536 | color: var(--cadet); 537 | font-size: var(--fs-5); 538 | line-height: 1.7; 539 | margin-bottom: 30px; 540 | } 541 | 542 | .about-list { margin-bottom: 30px; } 543 | 544 | .about-item { 545 | display: flex; 546 | justify-content: flex-start; 547 | align-items: center; 548 | gap: 10px; 549 | margin-bottom: 15px; 550 | } 551 | 552 | .about-item-icon { 553 | background: var(--misty-rose); 554 | height: 45px; 555 | min-width: 45px; 556 | border-radius: 50%; 557 | display: grid; 558 | place-items: center; 559 | } 560 | 561 | .about-item-icon ion-icon { 562 | color: var(--orange-soda); 563 | font-size: 18px; 564 | } 565 | 566 | .about-item-text { 567 | color: var(--cadet); 568 | font-size: var(--fs-5); 569 | } 570 | 571 | .about .callout { 572 | background: hsla(7, 78%, 53%, 0.05); 573 | color: var(--cadet); 574 | font-size: var(--fs-5); 575 | font-weight: var(--fw-500); 576 | line-height: 1.8; 577 | padding: 20px 25px; 578 | border-left: 4px solid var(--orange-soda); 579 | margin-bottom: 40px; 580 | } 581 | 582 | .about .btn { 583 | max-width: max-content; 584 | --text-transform: uppercase; 585 | } 586 | 587 | 588 | 589 | 590 | 591 | /*-----------------------------------*\ 592 | #SERVICE 593 | \*-----------------------------------*/ 594 | 595 | .service { 596 | background: var(--cultured-2); 597 | padding-block: var(--section-padding); 598 | } 599 | 600 | .service-list { 601 | display: flex; 602 | flex-wrap: wrap; 603 | justify-content: center; 604 | gap: 30px; 605 | } 606 | 607 | .service-card { 608 | position: relative; 609 | background: var(--white); 610 | text-align: center; 611 | padding: 40px 30px; 612 | box-shadow: var(--shadow-2); 613 | } 614 | 615 | .service-card .card-icon { 616 | width: max-content; 617 | margin-inline: auto; 618 | margin-bottom: 20px; 619 | } 620 | 621 | .service-card .card-title { margin-bottom: 15px; } 622 | 623 | .service-card .card-title > a:is(:hover, :focus) { color: var(--orange-soda); } 624 | 625 | .service-card .card-text { 626 | color: var(--cadet); 627 | font-size: var(--fs-5); 628 | line-height: 1.8; 629 | margin-bottom: 25px; 630 | } 631 | 632 | .service-card .card-link { 633 | color: var(--opal); 634 | font-size: var(--fs-5); 635 | font-weight: var(--fw-600); 636 | display: flex; 637 | justify-content: center; 638 | align-items: center; 639 | gap: 5px; 640 | } 641 | 642 | .service-card:is(:hover, :focus) .card-link { color: var(--orange-soda); } 643 | 644 | .service-card::after { 645 | content: ""; 646 | position: absolute; 647 | bottom: 0; 648 | left: 0; 649 | width: 0; 650 | height: 4px; 651 | background: var(--orange-soda); 652 | transition: var(--transition); 653 | } 654 | 655 | .service-card:is(:hover, :focus)::after { width: 100%; } 656 | 657 | 658 | 659 | 660 | 661 | /*-----------------------------------*\ 662 | #PROPERTY 663 | \*-----------------------------------*/ 664 | 665 | .property { padding-block: var(--section-padding); } 666 | 667 | .property-card { 668 | border: 1px solid var(--alice-blue); 669 | box-shadow: var(--shadow-2); 670 | } 671 | 672 | .property-card .card-banner { 673 | position: relative; 674 | aspect-ratio: 2 / 1.5; 675 | overflow: hidden; 676 | } 677 | 678 | .property-card .card-banner a { height: 100%; } 679 | 680 | .property-card .card-banner img { 681 | height: 100%; 682 | object-fit: cover; 683 | transition: 0.5s ease; 684 | } 685 | 686 | .property-card:hover .card-banner img { transform: scale(1.1); } 687 | 688 | .property-card .card-banner::before { 689 | content: ""; 690 | position: absolute; 691 | inset: 0; 692 | background: linear-gradient(to top, hsla(0, 0%, 0%, 0.95), transparent 30%); 693 | pointer-events: none; 694 | z-index: 1; 695 | } 696 | 697 | .property-card .banner-actions { 698 | position: absolute; 699 | bottom: 15px; 700 | left: 15px; 701 | right: 15px; 702 | display: flex; 703 | flex-wrap: wrap-reverse; 704 | align-items: center; 705 | gap: 15px 10px; 706 | z-index: 1; 707 | } 708 | 709 | .banner-actions-btn { 710 | color: var(--white); 711 | font-size: var(--fs-6); 712 | line-height: 1; 713 | display: flex; 714 | align-items: flex-end; 715 | gap: 4px; 716 | } 717 | 718 | .banner-actions-btn ion-icon { font-size: 16px; } 719 | 720 | .banner-actions-btn:first-child { margin-right: auto; } 721 | 722 | .banner-actions-btn:is(:hover, :focus) { color: var(--orange-soda); } 723 | 724 | .property-card .card-content { 725 | padding: 30px 15px 15px; 726 | border-bottom: 1px solid hsla(0, 0%, 0%, 0.1); 727 | } 728 | 729 | .card-price { 730 | color: var(--orange-soda); 731 | font-family: var(--ff-poppins); 732 | font-size: var(--fs-5); 733 | margin-bottom: 5px; 734 | } 735 | 736 | .card-price strong { 737 | font-size: var(--fs-4); 738 | font-weight: var(--fw-600); 739 | } 740 | 741 | .property-card .card-title { 742 | --font-weight: var(--fw-600); 743 | margin-bottom: 15px; 744 | } 745 | 746 | .property-card .card-title > a:is(:hover, :focus) { color: var(--orange-soda); } 747 | 748 | .property-card .card-text { 749 | color: var(--cadet); 750 | font-size: var(--fs-5); 751 | line-height: 1.8; 752 | margin-bottom: 25px; 753 | } 754 | 755 | .property-card .card-list { 756 | display: flex; 757 | flex-wrap: wrap; 758 | align-items: center; 759 | row-gap: 15px; 760 | } 761 | 762 | .property-card .card-item { 763 | padding-block: 5px; 764 | color: var(--cadet); 765 | font-size: var(--fs-5); 766 | } 767 | 768 | .property-card .card-item:not(:last-child) { 769 | padding-right: 15px; 770 | border-right: 1px solid hsla(0, 0%, 0%, 0.2); 771 | margin-right: 20px; 772 | } 773 | 774 | .property-card .card-item :is(strong, ion-icon) { display: inline-block; } 775 | 776 | .property-card .card-item ion-icon { 777 | margin-left: 2px; 778 | margin-bottom: -2px; 779 | } 780 | 781 | .property-card .card-item span { margin-top: 5px; } 782 | 783 | .card-footer { 784 | padding: 15px; 785 | display: flex; 786 | flex-wrap: wrap-reverse; 787 | justify-content: space-between; 788 | align-items: center; 789 | gap: 15px; 790 | } 791 | 792 | .card-author { 793 | display: flex; 794 | align-items: center; 795 | gap: 10px; 796 | } 797 | 798 | .author-avatar { 799 | width: 40px; 800 | height: 40px; 801 | overflow: hidden; 802 | border-radius: 50%; 803 | } 804 | 805 | .author-name > a { 806 | color: var(--dark-jungle-green); 807 | font-family: var(--ff-poppins); 808 | font-size: var(--fs-5); 809 | font-weight: var(--fw-600); 810 | margin-bottom: 3px; 811 | } 812 | 813 | .author-name > a:is(:hover, :focus) { color: var(--orange-soda); } 814 | 815 | .author-title { 816 | color: var(--cadet); 817 | font-size: var(--fs-7); 818 | } 819 | 820 | .card-footer-actions { 821 | display: flex; 822 | align-items: center; 823 | gap: 10px; 824 | } 825 | 826 | .card-footer-actions-btn { 827 | background: var(--cultured-2); 828 | color: var(--cadet); 829 | width: 35px; 830 | height: 35px; 831 | display: grid; 832 | place-items: center; 833 | font-size: 18px; 834 | } 835 | 836 | .card-footer-actions-btn:is(:hover, :focus) { 837 | background: var(--orange-soda); 838 | color: var(--white); 839 | } 840 | 841 | 842 | 843 | 844 | 845 | /*-----------------------------------*\ 846 | #FEATURES 847 | \*-----------------------------------*/ 848 | 849 | .features { 850 | background: var(--cultured-2); 851 | padding-block: var(--section-padding); 852 | } 853 | 854 | .features-list { 855 | display: flex; 856 | flex-wrap: wrap; 857 | justify-content: center; 858 | gap: 50px 20px; 859 | } 860 | 861 | .features-list > li { width: calc(50% - 10px); } 862 | 863 | .features-card { 864 | position: relative; 865 | background: var(--white); 866 | padding: 40px 15px; 867 | border-radius: 12px; 868 | display: flex; 869 | flex-direction: column; 870 | height: 100%; 871 | justify-content: center; 872 | align-items: center; 873 | gap: 10px; 874 | box-shadow: var(--shadow-1); 875 | } 876 | 877 | .features-card:is(:hover, :focus) { background: var(--orange-soda); } 878 | 879 | .features-card .card-icon { 880 | background: var(--seashell); 881 | color: var(--orange-soda); 882 | width: 60px; 883 | height: 60px; 884 | display: grid; 885 | place-items: center; 886 | border-radius: 50%; 887 | font-size: 28px; 888 | } 889 | 890 | .features-card .card-icon ion-icon { --ionicon-stroke-width: 20px; } 891 | 892 | .features-card .card-title { 893 | color: var(--dark-jungle-green); 894 | font-family: var(--ff-poppins); 895 | font-size: var(--fs-6); 896 | font-weight: var(--fw-600); 897 | text-align: center; 898 | transition: var(--transition); 899 | } 900 | 901 | .features-card:is(:hover, :focus) .card-title { color: var(--white); } 902 | 903 | .features-card .card-btn { 904 | background: var(--white); 905 | color: var(--cadet); 906 | position: absolute; 907 | bottom: 0; 908 | left: 50%; 909 | transform: translate(-50%, 50%); 910 | width: 40px; 911 | height: 40px; 912 | display: grid; 913 | place-items: center; 914 | font-size: 20px; 915 | border-radius: 50%; 916 | box-shadow: 0 0 10px hsla(219, 56%, 21%, 0.1); 917 | transition: var(--transition); 918 | } 919 | 920 | .features-card:is(:hover, :focus) .card-btn { color: var(--orange-soda); } 921 | 922 | 923 | 924 | 925 | 926 | /*-----------------------------------*\ 927 | #BLOG 928 | \*-----------------------------------*/ 929 | 930 | .blog { padding-block: var(--section-padding); } 931 | 932 | .blog-card { box-shadow: var(--shadow-2); } 933 | 934 | .blog-card .card-banner { 935 | overflow: hidden; 936 | aspect-ratio: 2 / 1.5; 937 | } 938 | 939 | .blog-card .card-banner img { 940 | height: 100%; 941 | object-fit: cover; 942 | transition: 0.5s ease; 943 | } 944 | 945 | .blog-card:is(:hover, :focus) .card-banner img { transform: scale(1.1); } 946 | 947 | .blog-content { padding: 30px; } 948 | 949 | .blog-card .card-meta-list { 950 | display: flex; 951 | align-items: center; 952 | gap: 10px; 953 | margin-bottom: 15px; 954 | } 955 | 956 | .blog-card :is(.card-meta-link, .publish-date) { 957 | color: var(--cadet); 958 | font-size: var(--fs-7); 959 | font-weight: var(--fw-600); 960 | display: flex; 961 | align-items: center; 962 | gap: 5px; 963 | transition: var(--transition); 964 | } 965 | 966 | .blog-card :is(.card-meta-link, .publish-date) ion-icon { color: var(--orange-soda); } 967 | 968 | .blog-card .card-meta-link:is(:hover, :focus) { color: var(--orange-soda); } 969 | 970 | .blog-title { 971 | font-size: 1rem; 972 | --font-weight: var(--fw-600); 973 | } 974 | 975 | .blog-card .blog-title:is(:hover, :focus) { color: var(--orange-soda); } 976 | 977 | .blog-content-bottom { 978 | padding-top: 20px; 979 | border-top: 1px solid hsla(0, 0%, 0%, 0.1); 980 | margin-top: 20px; 981 | display: flex; 982 | justify-content: space-between; 983 | align-items: center; 984 | } 985 | 986 | .blog-card .read-more-btn { 987 | color: var(--orange-soda); 988 | font-size: var(--fs-7); 989 | font-weight: var(--fw-600); 990 | text-transform: uppercase; 991 | } 992 | 993 | 994 | 995 | 996 | 997 | /*-----------------------------------*\ 998 | #CTA 999 | \*-----------------------------------*/ 1000 | 1001 | .cta { 1002 | background: linear-gradient(to bottom, var(--white) 50%, var(--raisin-black-1) 50%); 1003 | } 1004 | 1005 | .cta-card { 1006 | background: var(--orange-soda); 1007 | padding: 50px 25px; 1008 | box-shadow: var(--shadow-2); 1009 | } 1010 | 1011 | .cta-card .card-content { 1012 | max-width: max-content; 1013 | margin-inline: auto; 1014 | margin-bottom: 30px; 1015 | } 1016 | 1017 | .cta-card .card-title { 1018 | color: var(--white); 1019 | line-height: 1.3; 1020 | margin-bottom: 15px; 1021 | } 1022 | 1023 | .cta-card .card-text { 1024 | color: var(--white); 1025 | font-size: var(--fs-5); 1026 | line-height: 1.8; 1027 | } 1028 | 1029 | .cta-btn { 1030 | display: flex; 1031 | align-items: center; 1032 | gap: 10px; 1033 | color: var(--black); 1034 | background: var(--white); 1035 | box-shadow: var(--shadow-2); 1036 | border-color: var(--white); 1037 | margin-inline: auto; 1038 | } 1039 | 1040 | .cta-btn:is(:hover, :focus) { 1041 | background: none; 1042 | color: var(--white); 1043 | border-color: transparent; 1044 | } 1045 | 1046 | .cta-btn::before { background: var(--black); } 1047 | 1048 | 1049 | 1050 | 1051 | 1052 | /*-----------------------------------*\ 1053 | #FOOTER 1054 | \*-----------------------------------*/ 1055 | 1056 | .footer { 1057 | background: var(--raisin-black-1); 1058 | color: var(--white); 1059 | margin-bottom: 68px; 1060 | } 1061 | 1062 | .footer .container { padding-inline: 30px; } 1063 | 1064 | .footer a { color: inherit; } 1065 | 1066 | .footer-top { 1067 | padding-top: 80px; 1068 | padding-bottom: 40px; 1069 | } 1070 | 1071 | .footer-brand { margin-bottom: 70px; } 1072 | 1073 | .footer-brand .logo { margin-bottom: 15px; } 1074 | 1075 | .section-text { 1076 | font-size: var(--fs-5); 1077 | line-height: 1.8; 1078 | margin-bottom: 30px; 1079 | max-width: 45ch; 1080 | } 1081 | 1082 | .contact-list { 1083 | display: grid; 1084 | gap: 15px; 1085 | margin-bottom: 30px; 1086 | } 1087 | 1088 | .contact-link { 1089 | display: flex; 1090 | align-items: flex-start; 1091 | gap: 10px; 1092 | } 1093 | 1094 | .contact-link ion-icon { font-size: 18px; } 1095 | 1096 | .contact-link :is(address, span) { 1097 | font-size: var(--fs-5); 1098 | transition: var(--transition); 1099 | } 1100 | 1101 | .contact-link:is(:hover, :focus) span { color: var(--orange-soda); } 1102 | 1103 | .social-list { 1104 | display: flex; 1105 | align-items: center; 1106 | gap: 20px; 1107 | } 1108 | 1109 | .footer-list:not(:last-child) { margin-bottom: 50px; } 1110 | 1111 | .footer-list-title { 1112 | font-family: var(--ff-poppins); 1113 | font-size: var(--fs-3); 1114 | font-weight: var(--fw-700); 1115 | margin-bottom: 15px; 1116 | } 1117 | 1118 | .footer-link { 1119 | font-size: var(--fs-5); 1120 | padding-block: 10px; 1121 | } 1122 | 1123 | .footer-link:is(:hover, :focus) { color: var(--orange-soda); } 1124 | 1125 | .footer-bottom { 1126 | background: var(--raisin-black-2); 1127 | padding-block: 25px; 1128 | } 1129 | 1130 | .copyright { 1131 | font-size: var(--fs-5); 1132 | text-align: center; 1133 | } 1134 | 1135 | .copyright a { display: inline-block; } 1136 | 1137 | .copyright a:is(:hover, :focus) { color: var(--orange-soda); } 1138 | 1139 | 1140 | 1141 | 1142 | 1143 | /*-----------------------------------*\ 1144 | #MEDIA QUERIES 1145 | \*-----------------------------------*/ 1146 | 1147 | /** 1148 | * responsive for larger than 600px screen 1149 | */ 1150 | 1151 | @media (min-width: 600px) { 1152 | 1153 | /** 1154 | * CUSTOM PROPERTY 1155 | */ 1156 | 1157 | :root { 1158 | 1159 | /** 1160 | * typography 1161 | */ 1162 | 1163 | --fs-2: 1.875rem; 1164 | 1165 | } 1166 | 1167 | 1168 | 1169 | /** 1170 | * REUSED STYLE 1171 | */ 1172 | 1173 | .container { 1174 | max-width: 550px; 1175 | margin-inline: auto; 1176 | } 1177 | 1178 | .has-scrollbar { 1179 | gap: 25px; 1180 | margin-inline: -25px; 1181 | padding-inline: 25px; 1182 | scroll-padding-left: 25px; 1183 | } 1184 | 1185 | .has-scrollbar > li { min-width: calc(50% - 12.5px); } 1186 | 1187 | 1188 | 1189 | /** 1190 | * SERVICE 1191 | */ 1192 | 1193 | .service-list > li { width: calc(50% - 15px); } 1194 | 1195 | 1196 | 1197 | /** 1198 | * PROPERTY 1199 | */ 1200 | 1201 | .property .container { 1202 | max-width: unset; 1203 | padding-inline: 25px; 1204 | } 1205 | 1206 | 1207 | 1208 | /** 1209 | * CTA 1210 | */ 1211 | 1212 | .cta-card { --fs-2: 1.5rem; } 1213 | 1214 | 1215 | 1216 | /** 1217 | * FOOTER 1218 | */ 1219 | 1220 | .footer-link-box { 1221 | display: flex; 1222 | justify-content: space-between; 1223 | gap: 20px; 1224 | } 1225 | 1226 | } 1227 | 1228 | 1229 | 1230 | 1231 | 1232 | /** 1233 | * responsive for larger than 768px screen 1234 | */ 1235 | 1236 | @media (min-width: 768px) { 1237 | 1238 | /** 1239 | * CUSTOM PROPERTY 1240 | */ 1241 | 1242 | :root { 1243 | 1244 | /** 1245 | * typography 1246 | */ 1247 | 1248 | --fs-1: 2.5rem; 1249 | --fs-5: 0.938rem; 1250 | --fs-6: 0.875rem; 1251 | 1252 | } 1253 | 1254 | 1255 | 1256 | /** 1257 | * REUSED STYLE 1258 | */ 1259 | 1260 | .container { max-width: 720px; } 1261 | 1262 | .btn { 1263 | --fs-5: 1rem; 1264 | padding: 12px 28px; 1265 | } 1266 | 1267 | 1268 | 1269 | /** 1270 | * HEADER 1271 | */ 1272 | 1273 | .header-top { padding-block: 5px; } 1274 | 1275 | .header-top .wrapper { margin-left: auto; } 1276 | 1277 | .header-top-social-list { gap: 12px; } 1278 | 1279 | .header-top-social-link { font-size: 1rem; } 1280 | 1281 | .header-top-btn { padding: 10px 20px; } 1282 | 1283 | .header-bottom-actions { 1284 | all: unset; 1285 | display: flex; 1286 | align-items: center; 1287 | gap: 10px; 1288 | } 1289 | 1290 | .header-bottom .container { 1291 | display: flex; 1292 | justify-content: space-between; 1293 | align-items: center; 1294 | } 1295 | 1296 | .header-bottom-actions-btn ion-icon { margin-bottom: 0; } 1297 | 1298 | .header-bottom-actions-btn span { display: none; } 1299 | 1300 | .header-bottom-actions-btn { 1301 | background: var(--white); 1302 | width: 50px; 1303 | height: 50px; 1304 | box-shadow: var(--shadow-2); 1305 | } 1306 | 1307 | 1308 | 1309 | /** 1310 | * HERO 1311 | */ 1312 | 1313 | .hero-content { max-width: 400px; } 1314 | 1315 | 1316 | 1317 | /** 1318 | * ABOUT 1319 | */ 1320 | 1321 | .about .section-title { max-width: 30ch; } 1322 | 1323 | .about-text { max-width: 55ch } 1324 | 1325 | .about-list { 1326 | display: grid; 1327 | grid-template-columns: 1fr 1fr; 1328 | } 1329 | 1330 | 1331 | 1332 | /** 1333 | * FEATURES 1334 | */ 1335 | 1336 | .features-list > li { width: calc(33.33% - 13.33px); } 1337 | 1338 | .features-card { gap: 20px; } 1339 | 1340 | .features-card .card-icon { 1341 | width: 80px; 1342 | height: 80px; 1343 | font-size: 32px; 1344 | } 1345 | 1346 | .features-card .card-title { --fs-6: 1.125rem; } 1347 | 1348 | 1349 | 1350 | /** 1351 | * BLOG 1352 | */ 1353 | 1354 | .blog-card { --fs-7: 0.875rem; } 1355 | 1356 | .blog-title { font-size: 1.25rem; } 1357 | 1358 | .blog .card-meta-list { gap: 30px; } 1359 | 1360 | 1361 | 1362 | /** 1363 | * CTA 1364 | */ 1365 | 1366 | .cta-card { --fs-2: 1.625rem; } 1367 | 1368 | 1369 | 1370 | /** 1371 | * FOOTER 1372 | */ 1373 | 1374 | .footer { margin-bottom: 0; } 1375 | 1376 | } 1377 | 1378 | 1379 | 1380 | 1381 | 1382 | /** 1383 | * responsive for larger than 992px screen 1384 | */ 1385 | 1386 | @media (min-width: 992px) { 1387 | 1388 | /** 1389 | * CUSTOM PROPERTY 1390 | */ 1391 | 1392 | :root { 1393 | 1394 | /** 1395 | * typography 1396 | */ 1397 | 1398 | --fs-1: 3.125rem; 1399 | --fs-4: 1.375rem; 1400 | 1401 | } 1402 | 1403 | 1404 | 1405 | /** 1406 | * REUSED STYLE 1407 | */ 1408 | 1409 | .container { max-width: 970px; } 1410 | 1411 | .btn { padding: 15px 40px; } 1412 | 1413 | 1414 | 1415 | /** 1416 | * HEADER 1417 | */ 1418 | 1419 | .header-top-list, 1420 | .header-top .wrapper { gap: 30px; } 1421 | 1422 | 1423 | 1424 | /** 1425 | * HERO 1426 | */ 1427 | 1428 | .hero-content { 1429 | max-width: unset; 1430 | margin-bottom: 0; 1431 | } 1432 | 1433 | .hero .container { 1434 | display: grid; 1435 | grid-template-columns: 1fr 1fr; 1436 | align-items: center; 1437 | } 1438 | 1439 | 1440 | 1441 | /** 1442 | * ABOUT 1443 | */ 1444 | 1445 | .about .container { 1446 | display: grid; 1447 | grid-template-columns: 1fr 1fr; 1448 | align-items: center; 1449 | gap: 60px; 1450 | } 1451 | 1452 | .about-banner { margin-bottom: 0; } 1453 | 1454 | .about-banner > img { width: 100%; } 1455 | 1456 | 1457 | 1458 | /** 1459 | * SERVICE 1460 | */ 1461 | 1462 | .service-list > li { width: calc(33.33% - 20px); } 1463 | 1464 | 1465 | 1466 | /** 1467 | * PROPERTY 1468 | */ 1469 | 1470 | .property-card .card-content { padding-inline: 30px; } 1471 | 1472 | .card-footer { padding: 20px 30px 30px; } 1473 | 1474 | 1475 | 1476 | /** 1477 | * FEATURES 1478 | */ 1479 | 1480 | .features-list { column-gap: 30px; } 1481 | 1482 | .features-list > li { width: calc(25% - 30px); } 1483 | 1484 | 1485 | 1486 | /** 1487 | * BLOG 1488 | */ 1489 | 1490 | .blog-title { font-size: 1.375rem; } 1491 | 1492 | 1493 | 1494 | /** 1495 | * CTA 1496 | */ 1497 | 1498 | .cta-card { 1499 | --fs-2: 1.875rem; 1500 | --fs-5: 1rem; 1501 | 1502 | display: flex; 1503 | justify-content: space-between; 1504 | align-items: center; 1505 | padding: 50px; 1506 | } 1507 | 1508 | .cta-card :is(.card-content, .cta-btn) { margin: 0; } 1509 | 1510 | 1511 | 1512 | /** 1513 | * FOOTER 1514 | */ 1515 | 1516 | .footer-top .container { 1517 | display: flex; 1518 | justify-content: space-between; 1519 | } 1520 | 1521 | .footer-brand { 1522 | max-width: 300px; 1523 | margin-bottom: 0; 1524 | } 1525 | 1526 | .footer-link-box { flex-basis: 550px; } 1527 | 1528 | } 1529 | 1530 | 1531 | 1532 | 1533 | 1534 | /** 1535 | * responsive for larger than 1200px screen 1536 | */ 1537 | 1538 | @media (min-width: 1200px) { 1539 | 1540 | /** 1541 | * CUSTOM PROPERTY 1542 | */ 1543 | 1544 | :root { 1545 | 1546 | /** 1547 | * typography 1548 | */ 1549 | 1550 | --fs-2: 2.75rem; 1551 | --fs-4: 1.5rem; 1552 | 1553 | } 1554 | 1555 | 1556 | 1557 | /** 1558 | * REUSED STYLE 1559 | */ 1560 | 1561 | .container { max-width: 1200px; } 1562 | 1563 | .has-scrollbar > li { min-width: calc(33.33% - 16.66px); } 1564 | 1565 | 1566 | 1567 | /** 1568 | * HEADER 1569 | */ 1570 | 1571 | .header-bottom { padding-block: 30px; } 1572 | 1573 | .header-bottom-actions-btn:last-child, 1574 | .navbar-top, 1575 | .overlay { display: none; } 1576 | 1577 | .navbar, 1578 | .navbar.active { all: unset; } 1579 | 1580 | .navbar-list { 1581 | display: flex; 1582 | align-items: center; 1583 | gap: 30px; 1584 | } 1585 | 1586 | .navbar-link { 1587 | color: var(--dark-jungle-green); 1588 | --fs-5: 1.125rem; 1589 | text-transform: capitalize; 1590 | } 1591 | 1592 | .header { padding-bottom: 114px; } 1593 | 1594 | .header-bottom { 1595 | position: absolute; 1596 | left: 0; 1597 | bottom: 0; 1598 | width: 100%; 1599 | } 1600 | 1601 | .header.active .header-bottom { 1602 | position: fixed; 1603 | bottom: auto; 1604 | top: -94px; 1605 | padding-block: 20px; 1606 | box-shadow: 0 10px 50px hsla(237, 71%, 52%, 0.2); 1607 | animation: slideDown 0.25s ease-out forwards; 1608 | } 1609 | 1610 | @keyframes slideDown { 1611 | 0% { transform: translateY(0); } 1612 | 100% { transform: translateY(100%); } 1613 | } 1614 | 1615 | 1616 | 1617 | /** 1618 | * HERO 1619 | */ 1620 | 1621 | .hero-text { 1622 | padding-left: 30px; 1623 | max-width: 450px; 1624 | margin-bottom: 40px; 1625 | } 1626 | 1627 | 1628 | 1629 | /** 1630 | * FEATURES 1631 | */ 1632 | 1633 | .features-card .card-icon { 1634 | width: 100px; 1635 | height: 100px; 1636 | font-size: 45px; 1637 | } 1638 | 1639 | .features-card .card-title { --fs-6: 1.375rem; } 1640 | 1641 | 1642 | .modal { 1643 | display: none; 1644 | position: fixed; 1645 | z-index: 1; 1646 | left: 0; 1647 | top: 0; 1648 | width: 100%; 1649 | height: 100%; 1650 | overflow: hidden; 1651 | background-color: rgba(0, 0, 0, 0.4); 1652 | } 1653 | 1654 | .modal-content { 1655 | background-color: #fefefe; 1656 | margin: 10px auto; 1657 | padding: 20px; 1658 | border: 1px solid #888; 1659 | width: 30%; 1660 | border-radius: 8px; 1661 | } 1662 | 1663 | .close-btn { 1664 | color: #aaa; 1665 | float: right; 1666 | font-size: 28px; 1667 | font-weight: bold; 1668 | } 1669 | 1670 | .close-btn:hover, 1671 | .close-btn:focus { 1672 | color: black; 1673 | text-decoration: none; 1674 | cursor: pointer; 1675 | } 1676 | 1677 | #listingForm button { 1678 | padding: 12px 25px; 1679 | border: none; 1680 | border-radius: 5px; 1681 | cursor: pointer; 1682 | font-size: 16px; 1683 | transition: background-color 0.3s ease; 1684 | } 1685 | 1686 | #listingForm button[type="submit"] { 1687 | background-color: #28a745; /* Green for submit */ 1688 | color: white; 1689 | margin-right: 10px; 1690 | } 1691 | 1692 | #listingForm button[type="submit"]:hover { 1693 | background-color: #218838; /* Darker green on hover */ 1694 | } 1695 | 1696 | #listingForm button[onclick="closeModal()"] { 1697 | background-color: #dc3545; /* Red for cancel */ 1698 | color: white; 1699 | } 1700 | 1701 | #listingForm button[onclick="closeModal()"]:hover { 1702 | background-color: #c82333; /* Darker red on hover */ 1703 | } 1704 | 1705 | #bookingForm button[type="submit"] { 1706 | background-color: #007bff; 1707 | color: white; 1708 | padding: 12px 25px; 1709 | border: none; 1710 | border-radius: 5px; 1711 | cursor: pointer; 1712 | font-size: 16px; 1713 | transition: background-color 0.3s ease; 1714 | } 1715 | 1716 | #bookingForm button[type="submit"]:hover { 1717 | background-color: #0069d9; 1718 | } 1719 | 1720 | /** 1721 | * CTA 1722 | */ 1723 | 1724 | .cta-card { 1725 | --fs-2: 2.25rem; 1726 | padding-inline: 60px; 1727 | } 1728 | 1729 | 1730 | 1731 | /** 1732 | * FOOTER 1733 | */ 1734 | 1735 | .footer { --fs-5: 1rem; } 1736 | 1737 | .footer-link-box { flex-basis: 700px; } 1738 | 1739 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | BadminVerse - Badminton & Basketball Court Booker 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 | 21 |
22 |
23 | 40 | 41 |
42 | 67 | 68 | 69 |
70 |
71 |
72 | 73 | 94 | 95 | 128 | 129 |
130 |
131 | 132 | 135 | 136 | 181 | 182 |
183 | 184 | 189 | 190 | 195 | 196 | 201 | 202 | 207 | 208 |
209 | 210 |
211 |
212 | 213 |
214 | 215 |
216 |
217 |
218 |
219 |
220 |

221 | 222 | 223 | Badminton/Basketball Court Booker 224 |

225 | 226 |

Find Your Favorite Badminton & Basketball Courts

227 | 228 |

229 | BadminVerse is a platform that helps you find your favorite badminton and basketball courts. You can book a court 230 | at your favorite location and time. 231 |

232 | 233 | 234 |
235 | 236 |
237 | Modern house model 238 |
239 | 240 |
241 |
242 | 243 |
244 |
245 | 246 |
247 | House interior 248 |
249 | 250 |
251 | 252 |

About Us

253 | 254 |

The Ultimate Badminton & Basketball Court Booking Platform

255 | 256 |

257 | BadminVerse is your one-stop shop for finding and booking the perfect badminton or basketball court. Effortlessly discover courts across Vietnam, reserve your spot at your preferred time, and get ready to play! 258 |

259 | 260 |
    261 |
  • 262 |
    263 | 264 |
    265 |

    Wide Range of Locations

    266 |
    • 267 | 268 |
  • 269 |
    270 | 271 |
    272 |

    Easy Online Booking

    273 |
    • 274 | 275 |
  • 276 |
    277 | 278 |
    279 |

    Community & Events

    280 |
    • 281 | 282 |
  • 283 |
    284 | 285 |
    286 |

    Booking Reminders

    287 |
    • 288 |
289 | 290 |

291 | BadminVerse: Your game, your court, your time. 292 |

293 | 294 | Find Your Court 295 |
296 | 297 | 298 |
299 |
300 | 301 |
302 |
303 | 304 |

Our Services

305 | 306 |

Our Main Focuses

307 | 308 | 378 | 379 |
380 |
381 | 382 |
383 |
384 | 385 |

Properties

386 | 387 |

Featured Listings

388 | 389 |
    390 | 391 |
  • 392 |
    393 | 394 |
    395 | 396 | 397 | New Apartment Nice View 398 | 399 | 400 |
    Available
    401 | 402 | 423 | 424 |
    425 | 426 |
    427 | 428 |
    429 | VND 40,000/hr 430 |
    431 | 432 |

    433 | New Basketball Court - Forest View 434 |

    435 | 436 |

    437 | Great basketball court with a nice view of the forest. Perfect for casual play or competitive matches. 438 |

    439 | 440 |
      441 | 442 |
    • 443 | 444 | Basketball Court 445 |
      • 446 | 447 |
    • 448 | 449 | Available Hours: 8AM - 10PM 450 |
      • 451 | 452 |
    • 453 | 454 | District 7, HCMC, VN 455 |
      • 456 | 457 |
    458 | 459 |
    460 | 461 | 462 |
    463 | 464 |
    465 |
    466 | BadminVerse Logo 467 |
    468 | 469 |
    470 |

    471 | BadminVerse 472 |

    473 | 474 |

    Admin

    475 |
    476 |
    477 | 478 |
    479 | 480 | 483 | 484 | 487 | 488 | 491 | 492 |
    493 | 494 |
    495 | 496 |
    497 | 498 |
    • 499 | 500 |
  • 501 |
    502 | 503 |
    504 | 505 | 506 | Modern Apartments 507 | 508 | 509 |
    Available
    510 | 511 | 522 |
    523 | 524 |
    525 |
    526 | VND 50,000/hr 527 |
    528 | 529 |

    530 | Indoor Badminton Court - District 2 531 |

    532 | 533 |

    534 | Well-maintained indoor badminton court with synthetic flooring and ample lighting. 535 |

    536 | 537 |
      538 |
    • 539 | 540 | 4 Courts 541 |
      • 542 | 543 |
    • 544 | 545 | Available Hours: 6AM - 11PM 546 |
      • 547 | 548 |
    • 549 | 550 | Max Players: 8 per court 551 |
      • 552 |
    553 |
    554 | 555 |
    556 | 557 |
    558 | 559 |
    560 | William Seklo 561 |
    562 | 563 |
    564 |

    565 | BadminVerse 566 |

    567 | 568 |

    Admin

    569 |
    570 |
    571 | 572 |
    573 | 574 | 577 | 578 | 581 | 582 | 585 | 586 |
    587 | 588 |
    589 | 590 |
    591 |
    • 592 | 593 |
  • 594 |
    595 | 596 |
    597 | 598 | 599 | Comfortable Apartment 600 | 601 | 602 |
    Available
    603 | 604 | 615 |
    616 | 617 |
    618 |
    619 | VND 65,000/hr 620 |
    621 | 622 |

    623 | Multi-Sport Court - District 7 624 |

    625 | 626 |

    627 | Versatile indoor court suitable for basketball, volleyball, and badminton. Great for group events and tournaments. 628 |

    629 | 630 |
      631 |
    • 632 | 633 | 634 | 635 | Multi-Sport 636 |
      • 637 | 638 |
    • 639 | 640 | Available Hours: 7AM - 10PM 641 |
      • 642 | 643 |
    • 644 | 645 | Max Players: 10-12 646 |
      • 647 |
    648 |
    649 | 650 |
    651 | 652 |
    653 | 654 |
    655 | William Seklo 656 |
    657 | 658 |
    659 |

    660 | BadminVerse 661 |

    662 | 663 |

    Admin

    664 |
    665 |
    666 | 667 |
    668 | 669 | 672 | 673 | 676 | 677 | 680 | 681 |
    682 | 683 |
    684 | 685 |
    686 |
    • 687 | 688 |
  • 689 |
    690 | 691 |
    692 | 693 | Outdoor Badminton Court 694 | 695 | 696 |
    Available
    697 | 698 | 709 |
    710 | 711 |
    712 |
    713 | VND 35,000/hr 714 |
    715 | 716 |

    717 | Outdoor Badminton Courts - Park View 718 |

    719 | 720 |

    721 | Two well-maintained outdoor badminton courts located in a peaceful park setting. Ideal for casual play. 722 |

    723 | 724 |
      725 |
    • 726 | 727 | 2 Courts 728 |
      • 729 | 730 |
    • 731 | 732 | Available Hours: 6AM - 9PM 733 |
      • 734 | 735 |
    • 736 | 737 | Outdoor 738 |
      • 739 |
    740 |
    741 | 742 |
    743 |
    744 |
    745 | City Park Authority 746 |
    747 |
    748 |

    749 | BadminVerse 750 |

    751 | 752 |

    Admin

    753 |
    754 |
    755 | 756 |
    757 | 760 | 763 | 766 |
    767 |
    768 |
    769 |
    • 770 |
771 |
772 |
773 | 774 |
775 |
776 | 777 |

Court Amenities

778 | 779 |

Enhance Your Experience

780 | 781 | 854 |
855 |
856 | 857 |
858 |
859 | 860 |

News & Blogs

861 | 862 |

Latest from the Court

863 | 864 | 997 | 998 |
999 |
1000 | 1001 |
1002 |
1003 | 1004 |
1005 |
1006 |

Ready to Play?

1007 |

Find the perfect court and get your game on!

1008 |
1009 | 1010 | 1014 |
1015 | 1016 |
1017 |
1018 |
1019 |
1020 | 1021 | 1142 | 1143 | 1144 | 1145 | 1146 | 1147 | 1148 | 1149 | 1150 | --------------------------------------------------------------------------------