Home
Code Master(Mfuranziza Dusabe Hamza)
"Visit Rwanda" tourism website focusing on wildlife, particularly mountain gorillas

"Visit Rwanda" tourism website focusing on wildlife, particularly mountain gorillas

Key Features of This Rwanda Tourism Website:
Focus on Mountain Gorillas ("Ingagi"):

Dedicated section highlighting gorilla trekking experiences

Information about conservation efforts

Booking options for gorilla permits

Wildlife Showcase:

Featured animals including gorillas, golden monkeys, elephants, lions, and more

Beautiful image cards for each species

Conservation-focused messaging

National Parks Information:

Sections on Volcanoes, Akagera, and Nyungwe National Parks

Visual highlights of each park's unique features

User Experience:

Responsive design that works on all devices

Attractive color scheme inspired by Rwanda's landscapes

Easy navigation with clear calls-to-action

Practical Information:

Contact form for tour inquiries

Testimonials from previous visitors

Footer with important links and contact details

This tailwind example is contributed by Code Master(Mfuranziza Dusabe Hamza), on 24-Jun-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Masonry, Image grid,Service rates, Subscription plans,Product Showcase, Product card

Image gallery Pricing Product Gradient

Author Code Master(Mfuranziza Dusabe Hamza)

507

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Visit Rwanda - Land of Mountain Gorillas</title>
    <style>
        /* Global Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* Header Styles */
        header {
            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1562552473-0a68a53a9b0b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
            background-size: cover;
            background-position: center;
            height: 100vh;
            color: white;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
        }
        
        nav {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.7);
            padding: 20px 0;
        }
        
        nav ul {
            display: flex;
            justify-content: center;
            list-style: none;
        }
        
        nav ul li {
            margin: 0 15px;
        }
        
        nav ul li a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            font-size: 18px;
            transition: color 0.3s;
        }
        
        nav ul li a:hover {
            color: #f5a623;
        }
        
        .logo {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 20px;
        }
        
        .header-content h1 {
            font-size: 60px;
            margin-bottom: 20px;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
        }
        
        .header-content p {
            font-size: 20px;
            max-width: 800px;
            margin: 0 auto 30px;
        }
        
        .btn {
            display: inline-block;
            background-color: #f5a623;
            color: white;
            padding: 12px 30px;
            border-radius: 5px;
            text-decoration: none;
            font-weight: bold;
            transition: background-color 0.3s;
        }
        
        .btn:hover {
            background-color: #e69100;
        }
        
        /* About Section */
        .about {
            padding: 80px 0;
            background-color: white;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 50px;
            font-size: 36px;
            color: #333;
        }
        
        .about-content {
            display: flex;
            align-items: center;
            gap: 40px;
        }
        
        .about-text {
            flex: 1;
        }
        
        .about-image {
            flex: 1;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .about-image img {
            width: 100%;
            height: auto;
            display: block;
        }
        
        /* Wildlife Section */
        .wildlife {
            padding: 80px 0;
            background-color: #f9f9f9;
        }
        
        .animals-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 30px;
        }
        
        .animal-card {
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
        }
        
        .animal-card:hover {
            transform: translateY(-10px);
        }
        
        .animal-image {
            height: 200px;
            overflow: hidden;
        }
        
        .animal-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }
        
        .animal-card:hover .animal-image img {
            transform: scale(1.1);
        }
        
        .animal-info {
            padding: 20px;
        }
        
        .animal-info h3 {
            margin-bottom: 10px;
            color: #333;
        }
        
        .animal-info p {
            color: #666;
            margin-bottom: 15px;
        }
        
        /* Gorilla Tracking Section */
        .gorilla-tracking {
            padding: 80px 0;
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1551632811-561732d1e306?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            color: white;
            text-align: center;
        }
        
        .gorilla-tracking h2 {
            margin-bottom: 30px;
        }
        
        .gorilla-tracking p {
            max-width: 800px;
            margin: 0 auto 30px;
            font-size: 18px;
        }
        
        /* Parks Section */
        .parks {
            padding: 80px 0;
            background-color: white;
        }
        
        .parks-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 30px;
        }
        
        .park-card {
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            position: relative;
            height: 250px;
        }
        
        .park-image {
            height: 100%;
        }
        
        .park-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .park-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2));
            display: flex;
            align-items: flex-end;
            padding: 20px;
            color: white;
        }
        
        .park-overlay h3 {
            font-size: 24px;
        }
        
        /* Testimonials */
        .testimonials {
            padding: 80px 0;
            background-color: #f9f9f9;
        }
        
        .testimonial-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 30px;
        }
        
        .testimonial-card {
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .testimonial-text {
            font-style: italic;
            margin-bottom: 20px;
            color: #555;
        }
        
        .testimonial-author {
            font-weight: bold;
            color: #333;
        }
        
        /* Contact Section */
        .contact {
            padding: 80px 0;
            background-color: white;
        }
        
        .contact-form {
            max-width: 600px;
            margin: 0 auto;
            background-color: #f9f9f9;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
        }
        
        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
        }
        
        .form-group textarea {
            height: 150px;
        }
        
        /* Footer */
        footer {
            background-color: #333;
            color: white;
            padding: 50px 0 20px;
            text-align: center;
        }
        
        .footer-content {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-bottom: 30px;
        }
        
        .footer-section {
            flex: 1;
            min-width: 250px;
            margin-bottom: 20px;
        }
        
        .footer-section h3 {
            margin-bottom: 20px;
            font-size: 20px;
        }
        
        .footer-section ul {
            list-style: none;
        }
        
        .footer-section ul li {
            margin-bottom: 10px;
        }
        
        .footer-section ul li a {
            color: #ddd;
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .footer-section ul li a:hover {
            color: #f5a623;
        }
        
        .social-icons a {
            color: white;
            margin: 0 10px;
            font-size: 20px;
            transition: color 0.3s;
        }
        
        .social-icons a:hover {
            color: #f5a623;
        }
        
        .copyright {
            border-top: 1px solid #555;
            padding-top: 20px;
            color: #aaa;
        }
        
        /* Responsive Styles */
        @media (max-width: 768px) {
            .header-content h1 {
                font-size: 40px;
            }
            
            .about-content {
                flex-direction: column;
            }
            
            nav ul {
                flex-direction: column;
                align-items: center;
            }
            
            nav ul li {
                margin: 10px 0;
            }
        }
    </style>
</head>
<body>
    
    <header>
        <nav>
            <div class="container">
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About Rwanda</a></li>
                    <li><a href="#wildlife">Wildlife</a></li>
                    <li><a href="#gorillas">Gorilla Tracking</a></li>
                    <li><a href="#parks">National Parks</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div>
        </nav>
        
        <div class="header-content">
            <div class="logo">Visit Rwanda</div>
            <h1>Discover the Land of a Thousand Hills</h1>
            <p>Experience breathtaking landscapes, vibrant culture, and unforgettable encounters with mountain gorillas in their natural habitat.</p>
            <a href="#gorillas" class="btn">Plan Your Gorilla Trek</a>
        </div>
    </header>
    
    
    <section id="about" class="about">
        <div class="container">
            <h2 class="section-title">About Rwanda</h2>
            <div class="about-content">
                <div class="about-text">
                    <p>Rwanda, known as "The Land of a Thousand Hills," is a country of stunning beauty with a remarkable biodiversity. Despite its tragic history, Rwanda has emerged as one of Africa's most progressive and safest countries, with a strong commitment to conservation and sustainable tourism.</p>
                    <p>The country is home to rare mountain gorillas ("ingagi" in Kinyarwanda), golden monkeys, and numerous other species in its four national parks. Rwanda's capital, Kigali, is one of the cleanest and most organized cities in Africa, offering excellent museums, memorials, and cultural experiences.</p>
                    <p>With its welcoming people, comfortable climate, and incredible wildlife viewing opportunities, Rwanda offers a truly unique African experience.</p>
                </div>
                <div class="about-image">
                    <img src="https://images.unsplash.com/photo-1562552473-0a68a53a9b0b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Rwanda landscape">
                </div>
            </div>
        </div>
    </section>
    
    
    <section id="wildlife" class="wildlife">
        <div class="container">
            <h2 class="section-title">Rwanda's Incredible Wildlife</h2>
            <div class="animals-grid">
                <div class="animal-card">
                    <div class="animal-image">
                        <img src="https://images.unsplash.com/photo-1551632811-561732d1e306?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Mountain Gorilla">
                    </div>
                    <div class="animal-info">
                        <h3>Mountain Gorilla (Ingagi)</h3>
                        <p>The majestic mountain gorilla is Rwanda's most famous resident. With only about 1,000 remaining in the wild, seeing these gentle giants in Volcanoes National Park is a once-in-a-lifetime experience.</p>
                        <a href="#gorillas" class="btn">Learn More</a>
                    </div>
                </div>
                
                <div class="animal-card">
                    <div class="animal-image">
                        <img src="https://images.unsplash.com/photo-1575550959106-5a7defe28b56?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Golden Monkey">
                    </div>
                    <div class="animal-info">
                        <h3>Golden Monkey</h3>
                        <p>These striking primates with golden-orange bodies and cheeks are endemic to the Virunga volcanic mountains. They live in bamboo forests and are known for their playful behavior.</p>
                        <a href="#" class="btn">Learn More</a>
                    </div>
                </div>
                
                <div class="animal-card">
                    <div class="animal-image">
                        <img src="https://images.unsplash.com/photo-1504173010664-32509aeebb62?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="African Elephant">
                    </div>
                    <div class="animal-info">
                        <h3>African Elephant</h3>
                        <p>Akagera National Park is home to Rwanda's population of African elephants. These intelligent giants can often be seen in family groups near water sources.</p>
                        <a href="#" class="btn">Learn More</a>
                    </div>
                </div>
                
                <div class="animal-card">
                    <div class="animal-image">
                        <img src="https://images.unsplash.com/photo-1550358864-518f202c02ba?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Lion">
                    </div>
                    <div class="animal-info">
                        <h3>Lion</h3>
                        <p>Recently reintroduced to Akagera National Park, lions have successfully reestablished themselves in Rwanda. The park now has several prides thriving in the savannah landscape.</p>
                        <a href="#" class="btn">Learn More</a>
                    </div>
                </div>
                
                <div class="animal-card">
                    <div class="animal-image">
                        <img src="https://images.unsplash.com/photo-1585110396000-c9ffd4e4b308?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Hippopotamus">
                    </div>
                    <div class="animal-info">
                        <h3>Hippopotamus</h3>
                        <p>Large pods of hippos can be seen in Akagera's lakes and waterways. These massive creatures spend their days in water and come ashore at night to graze.</p>
                        <a href="#" class="btn">Learn More</a>
                    </div>
                </div>
                
                <div class="animal-card">
                    <div class="animal-image">
                        <img src="https://images.unsplash.com/photo-1557050543-4d5f4e07ef46?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Chimpanzee">
                    </div>
                    <div class="animal-info">
                        <h3>Chimpanzee</h3>
                        <p>Nyungwe Forest National Park is home to a large population of chimpanzees. Tracking these intelligent primates through the rainforest is an exhilarating experience.</p>
                        <a href="#" class="btn">Learn More</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    
    <section id="gorillas" class="gorilla-tracking">
        <div class="container">
            <h2 class="section-title">Gorilla Tracking Experience</h2>
            <p>Rwanda is one of only three countries in the world where you can see mountain gorillas in their natural habitat. The gorilla trekking experience in Volcanoes National Park is often described as life-changing.</p>
            <p>After an early morning briefing, you'll hike through lush forests with expert trackers and guides to find one of the habituated gorilla families. You'll spend one unforgettable hour observing these magnificent creatures as they go about their daily lives - feeding, playing, and interacting with each other.</p>
            <p>Permits are required for gorilla trekking and should be booked well in advance. The revenue from permits goes directly to conservation efforts and local communities.</p>
            <a href="#contact" class="btn">Book Your Trek</a>
        </div>
    </section>
    
    
    <section id="parks" class="parks">
        <div class="container">
            <h2 class="section-title">Rwanda's National Parks</h2>
            <div class="parks-grid">
                <div class="park-card">
                    <div class="park-image">
                        <img src="https://images.unsplash.com/photo-1562552473-0a68a53a9b0b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Volcanoes National Park">
                    </div>
                    <div class="park-overlay">
                        <h3>Volcanoes National Park</h3>
                    </div>
                </div>
                
                <div class="park-card">
                    <div class="park-image">
                        <img src="https://images.unsplash.com/photo-1575550959106-5a7defe28b56?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Akagera National Park">
                    </div>
                    <div class="park-overlay">
                        <h3>Akagera National Park</h3>
                    </div>
                </div>
                
                <div class="park-card">
                    <div class="park-image">
                        <img src="https://images.unsplash.com/photo-1504173010664-32509aeebb62?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Nyungwe Forest National Park">
                    </div>
                    <div class="park-overlay">
                        <h3>Nyungwe Forest National Park</h3>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    
    <section class="testimonials">
        <div class="container">
            <h2 class="section-title">Visitor Experiences</h2>
            <div class="testimonial-grid">
                <div class="testimonial-card">
                    <p class="testimonial-text">"Seeing the mountain gorillas was the most profound wildlife experience of my life. Looking into the eyes of a silverback gorilla is something I'll never forget."</p>
                    <p class="testimonial-author">- Sarah Johnson, USA</p>
                </div>
                
                <div class="testimonial-card">
                    <p class="testimonial-text">"Rwanda surprised me in the best possible way. The landscapes are stunning, the people are warm and welcoming, and the conservation efforts are truly inspiring."</p>
                    <p class="testimonial-author">- Michael Chen, Australia</p>
                </div>
                
                <div class="testimonial-card">
                    <p class="testimonial-text">"The gorilla trek was challenging but worth every step. Our guide was incredibly knowledgeable and made sure we had an unforgettable encounter with the gorillas."</p>
                    <p class="testimonial-author">- Amina Diallo, Senegal</p>
                </div>
            </div>
        </div>
    </section>
    
    
    <section id="contact" class="contact">
        <div class="container">
            <h2 class="section-title">Plan Your Rwanda Adventure</h2>
            <div class="contact-form">
                <form>
                    <div class="form-group">
                        <label for="name">Full Name</label>
                        <input type="text" id="name" name="name" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="email">Email Address</label>
                        <input type="email" id="email" name="email" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="phone">Phone Number</label>
                        <input type="tel" id="phone" name="phone">
                    </div>
                    
                    <div class="form-group">
                        <label for="interest">Primary Interest</label>
                        <select id="interest" name="interest" class="form-control">
                            <option value="gorilla">Gorilla Trekking</option>
                            <option value="safari">Wildlife Safari</option>
                            <option value="culture">Cultural Experiences</option>
                            <option value="hiking">Hiking & Nature</option>
                            <option value="other">Other</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="message">Your Message</label>
                        <textarea id="message" name="message" required></textarea>
                    </div>
                    
                    <button type="submit" class="btn">Submit Inquiry</button>
                </form>
            </div>
        </div>
    </section>
    
    
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>Visit Rwanda</h3>
                    <p>Discover the beauty, wildlife, and culture of Rwanda - the Land of a Thousand Hills.</p>
                    <div class="social-icons">
                        <a href="#"><i class="fab fa-facebook"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-youtube"></i></a>
                    </div>
                </div>
                
                <div class="footer-section">
                    <h3>Quick Links</h3>
                    <ul>
                        <li><a href="#home">Home</a></li>
                        <li><a href="#about">About Rwanda</a></li>
                        <li><a href="#wildlife">Wildlife</a></li>
                        <li><a href="#gorillas">Gorilla Tracking</a></li>
                        <li><a href="#parks">National Parks</a></li>
                    </ul>
                </div>
                
                <div class="footer-section">
                    <h3>Contact Info</h3>
                    <ul>
                        <li>Rwanda Development Board</li>
                        <li>Tourism Department</li>
                        <li>KG 9 Ave, Kigali</li>
                        <li>Phone: +250 796132866</li>
                        <li>Email: tourism@rwandadevelopmentboard.org</li>
                    </ul>
                </div>
            </div>
            
            <div class="copyright">
                <p>&copy; 2023 Visit Rwanda. All rights reserved.</p>
            </div>
        </div>
    </footer>
    
    
    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</body>
</html>

Related Examples

Product card

Author:
Anum Shahana

9 months ago

1.2k
Modern E-commerce Product Card with TailwindCSS
This product card is designed for e-commerce platforms using TailwindCSS. It features a discount badge, product image carousel, quick view and quick order buttons, ratings, product name, brand details, dynamic pricing with a strike-through original price, and a prominent add-to-cart button. The clean and professional layout is perfect for showcasing products on online stores.

Author:
SHARIFUL ISLAM

7 months ago

1.5k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

7 months ago

1.3k
Checkout Card
A modern and responsive checkout card built with HTML & Tailwind CSS, featuring a clean UI, smooth shadows, and interactive hover effects. It includes secure payment options, a clear pricing breakdown, and adapts seamlessly to all screen sizes. Perfect for e-commerce and digital platforms to enhance user experience.

Author:
Rajesh Maheshwari

7 months ago

1.1k
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

5 months ago

650
AcodeMaster GameZone – Play Your Favorite Games Online
AcodeMaster GameZone is a modern gaming website where you can discover, explore, and play exciting games anytime, anywhere. Designed with smooth animations and a stylish dark theme using Tailwind CSS, it offers a fast and fun experience for every gamer.

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

717
Pricing Plans
Js integrated Pricing Plans

Author:
ORGIN_DREAMS

4 months ago

420
E-commerce Website UI Design
Here is a well-structured UI Design for a general e-commerce website template. This can be used as a reference for designers and developers to build or evaluate the UI components needed for an e-commerce site. View https://github.com/Rathanak-Phan/general-e-commerce-website-template

Author:
Rathanak Phan

3 months ago

1.1k
Attractive Feature Section
With Gradient Color 6 Features

Author:
KULDEEP

2 months ago

481
pricing
pricing

Author:
Omer fils ELENGA

2 months ago

284
Tailwind Card Components
A collection of 20+ copy-paste ready card components built with pure HTML and Tailwind CSS. Includes product cards, profile cards, article cards, pricing cards, testimonials, and notifications.

Author:
Ijila Itunu

1 week ago

46
color blur
blur

Author:
BocchiChan

7 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components