Visit Kinshasa is a simple and responsive website that serves as a guide for exploring Kinshasa's vibrant district. This is the step 4 of Intro to Digital Course by CYF [ Code Your Future ] . I would be grateful if someone could review my code. It features information about local activities, including shows, concerts, parks, sports, and a personal tour guide.
Link to my project on GitHub : https://github.com/apachitech/dav-hometown
Link to my project on Netlify : https://david-hometown.netlify.app/
This website showcases the best cultural and recreational activities in Kinshasa, helping tourists and locals alike discover the area’s attractions. With a clean, modern design and responsive layout, it is accessible across various devices.
The project includes:
- A landing page with a beautiful header image.
- Details of various local activities like concerts, picnics, and sports.
- A featured guide section introducing a local expert.
- Responsive Design: The website is fully responsive and adapts to different screen sizes, from desktops to mobile devices.
- Interactive Elements: Images in the activities section have a hover effect that scales the image for a more dynamic user experience.
- Guide Section: A dedicated section introducing a local guide with personal recommendations.
The project is built using the following technologies:
- HTML5: For structuring the content.
- CSS3: For styling the layout and making the site responsive.
- Responsive Design: Media queries for responsiveness.
To use this project locally:
-
Clone the repository:
git clone https://github.com/your-username/visit-kinshasa.git
-
Navigate into the project directory:
cd visit-kinshasa
-
Open the project:
- Simply open the
index.html
file in your browser to view the website locally.
- Simply open the
Once the project is set up, you can open the website in your browser. The main page will display the header image, followed by activity recommendations and a guide section. The design is responsive and will adapt based on your screen size.
- Header Image: The header background image can be changed by modifying the
background-image
property in the.header
class instyles.css
. - Activity Images: The activity section images can be updated by replacing the image files in the
images
folder and updating theirsrc
attributes inindex.html
.
Contributions are welcome! If you'd like to contribute, please fork the repository and make your changes in a new branch. Once you're done, submit a pull request.