This project is part of the Advanced CSS and Sass: Flexbox, Grid, Animations and More! by Jonas Schmedtmann. The website design and structure were provided as part of the course curriculum, and I did not design the website from scratch. The project's primary purpose is to practice and apply the concepts learned during the course.
Check out the live demo of the project here.
In this project, we present "Nexter," a fictional luxury home sales company. Their motto is "Your Own Home, the Ultimate Personal Freedom."
The primary goal of this project is to extensively utilize CSS grids throughout the design. The entire layout of the page, as well as several components, are constructed using grids to demonstrate practical application of grid properties covered in the course.
This project features a landing page for the fictional luxury home sales company "Nexter." The page layout is structured using CSS grids, showcasing their flexibility and versatility. The landing page includes the following components:
-
Header: The header includes the Nexter logo, the company's slogan, and a button to view their properties. It also displays logos of media outlets where Nexter has been featured.
-
Top Realtors: This section highlights the top 3 realtors at Nexter along with the number of houses each realtor has sold.
-
Key Features: The key features section uses CSS grids to present six features, each with an icon, title, and description. The features cover aspects like luxury homes, top realtors, and secure payments.
-
Customer Testimonial: A customer testimonial is displayed, along with an image of a couple and a button to find your own home.
-
Featured Homes: A collection of featured homes is presented, each displayed in a grid-like format. Each home includes an image, name, location, number of rooms, area, and price. Users can also contact a realtor for more information.
-
Image Gallery: The image gallery showcases various property images using a grid layout.
-
Footer: The footer contains navigation links, a copyright notice, and a disclaimer regarding the project's usage.
The design is responsive and adapts to different screen sizes, making it accessible on various devices.
- Clone the repository:
git clone https://github.com/SuperUser-Gump/Nexter.git - Navigate to the project directory:
cd nexter - Open the
index.htmlfile in a web browser to view the website.
Navigate the website to explore luxury home listings, view property images, and experience the responsive design.
This project was created as part of the Advanced CSS and Sass: Flexbox, Grid, Animations and More! course by Jonas Schmedtmann. Special thanks to him for providing the project structure and design.