This project is a realization of an assignment provided by The Odin Project. It serves as a demonstration of my proficiency in CSS positioning and Bootstrap framework capabilities.
The makeup landing page is themed around the world of beauty and cosmetics. The website encompasses four primary pages:
- Home: An introductory page that welcomes visitors and provides a brief insight into what the website offers.
- About Us: This section elaborates on the essence of the website, its mission, vision, and the team behind it.
- Catalog: A display of various makeup products, collections, and offers.
- Contact Us: A dedicated space for visitors to reach out, make inquiries, and connect.
- Responsive Design: Built using Bootstrap, the website offers a seamless experience on both desktop and mobile devices.
- Modern UI: A clean, intuitive interface designed to engage users and provide easy navigation.
- Dynamic Positioning: Demonstrates advanced CSS positioning techniques, ensuring elements are placed and behave as intended across different screen sizes and resolutions.
The project is structured as follows:
theodinproject-makeup-landing/
│
├── assets/
│ ├── images/ # Directory for all images
│ └── css/ # Stylesheets for the project
│
├── index.html # Home page
├── about.html # About Us page
├── catalog.html # Catalog page
├── contact.html # Contact Us page
│
└── README.md # Documentation
This project was built primarily using HTML, CSS, and Bootstrap. Each page was crafted with attention to detail, ensuring consistency in design and responsiveness across all device types.
- Clone the repository:
git clone https://github.com/Nanahawaw/the-odin-landing-page.git
- Open the
index.htmlin your preferred browser to view the website locally.
Feel free to submit pull requests or suggest new features/changes. Every bit of feedback is welcome!
- The Odin Project for providing the assignment and learning resources.
- Bootstrap documentation for guidelines.
This project is open-source and available to everyone under the MIT license.