EduGlobal

This tailwind example is contributed by Tanvir Hasan Bappy (Tanvir), on 20-Jul-2025. Component is made with Tailwind CSS v3. It is responsive.

Badge

Author Tanvir Hasan Bappy (Tanvir)

481

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Our Distinguished Educational Services</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .hero-section {
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
            background-size: cover;
            background-position: center;
        }
        
        .flag-icon {
            width: 30px;
            height: 20px;
            display: inline-block;
            margin-right: 10px;
            border: 1px solid #ddd;
        }
        
        .service-card {
            transition: all 0.3s ease;
        }
        
        .service-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        
        .comparison-table {
            border-collapse: separate;
            border-spacing: 0;
        }
        
        .comparison-table th, .comparison-table td {
            border: 1px solid #e2e8f0;
            padding: 12px;
        }
        
        .comparison-table th {
            background-color: #f7fafc;
        }
        
        .comparison-table tr:nth-child(even) {
            background-color: #f8fafc;
        }
        
        .process-step {
            position: relative;
            padding-left: 60px;
        }
        
        .process-step::before {
            content: "";
            position: absolute;
            left: 20px;
            top: 0;
            height: 100%;
            width: 2px;
            background-color: #3b82f6;
        }
        
        .process-step:last-child::before {
            display: none;
        }
        
        .step-number {
            position: absolute;
            left: 0;
            top: 0;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #3b82f6;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }
        
        .faq-item {
            border-bottom: 1px solid #e2e8f0;
        }
        
        .faq-question {
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .faq-question:hover {
            color: #3b82f6;
        }
        
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }
        
        .faq-answer.active {
            max-height: 300px;
        }
    </style>
</head>
<body class="font-sans bg-gray-50">
    
    <nav class="bg-white shadow-lg sticky top-0 z-50">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center">
                <i class="fas fa-graduation-cap text-blue-600 text-3xl mr-2"></i>
                <span class="text-xl font-bold text-blue-600">EduGlobal</span>
            </div>
            <div class="hidden md:flex space-x-8">
                <a href="#" class="text-blue-600 font-medium">Home</a>
                <a href="#" class="text-gray-600 hover:text-blue-600">About</a>
                <a href="#" class="text-gray-600 hover:text-blue-600">Services</a>
                <a href="#" class="text-gray-600 hover:text-blue-600">Universities</a>
                <a href="#" class="text-gray-600 hover:text-blue-600">Contact</a>
            </div>
            <div class="md:hidden">
                <button class="text-gray-600 focus:outline-none">
                    <i class="fas fa-bars text-2xl"></i>
                </button>
            </div>
        </div>
    </nav>

<section class="hero-section text-white py-20 md:py-32">
        <div class="container mx-auto px-4 text-center">
            <h1 class="text-4xl md:text-5xl font-bold mb-6">Our Distinguished Educational Services</h1>
            <p class="text-xl md:text-2xl max-w-3xl mx-auto mb-8">We provide comprehensive solutions for studying in China and Turkey with the best opportunities and scholarships</p>
            <div class="flex flex-col sm:flex-row justify-center gap-4">
                <a href="#china" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg font-medium transition duration-300">
                    Study in China
                </a>
                <a href="#turkey" class="bg-red-600 hover:bg-red-700 text-white px-8 py-3 rounded-lg font-medium transition duration-300">
                    Study in Turkey
                </a>
            </div>
        </div>
    </section>

<section id="china" class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <span class="inline-block mb-2 text-blue-600 font-semibold">EDUCATION SERVICES</span>
                <h2 class="text-3xl md:text-4xl font-bold mb-4">Study in China</h2>
                <p class="text-lg text-gray-600 max-w-3xl mx-auto">Discover exceptional educational opportunities at China's top universities</p>
            </div>
            
            <div class="mb-16">
                <h3 class="text-2xl font-bold mb-8 text-center flex items-center justify-center">
                    <span class="flag-icon" style="background-color: #de2910;"></span>
                    Scholarships in China
                </h3>
                
                <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
                    <div class="service-card bg-white p-6 rounded-lg shadow-md border border-gray-100">
                        <div class="text-blue-600 text-4xl mb-4">
                            <i class="fas fa-award"></i>
                        </div>
                        <h4 class="text-xl font-bold mb-2">Chinese Government Scholarships (CSC)</h4>
                        <p class="text-gray-600">Full scholarships covering tuition, accommodation, and monthly stipend for outstanding students.</p>
                    </div>
                    
                    <div class="service-card bg-white p-6 rounded-lg shadow-md border border-gray-100">
                        <div class="text-blue-600 text-4xl mb-4">
                            <i class="fas fa-university"></i>
                        </div>
                        <h4 class="text-xl font-bold mb-2">Chinese University Scholarships</h4>
                        <p class="text-gray-600">Partial and full scholarships from prestigious universities like Tsinghua, Peking, and Fudan.</p>
                    </div>
                    
                    <div class="service-card bg-white p-6 rounded-lg shadow-md border border-gray-100">
                        <div class="text-blue-600 text-4xl mb-4">
                            <i class="fas fa-map-marked-alt"></i>
                        </div>
                        <h4 class="text-xl font-bold mb-2">Provincial Scholarships</h4>
                        <p class="text-gray-600">Additional scholarships from Chinese provincial governments to attract international students.</p>
                    </div>
                    
                    <div class="service-card bg-white p-6 rounded-lg shadow-md border border-gray-100">
                        <div class="text-blue-600 text-4xl mb-4">
                            <i class="fas fa-star"></i>
                        </div>
                        <h4 class="text-xl font-bold mb-2">Academic Excellence Scholarships</h4>
                        <p class="text-gray-600">For academically outstanding students with exceptional grades and achievements.</p>
                    </div>
                </div>
            </div>
            
            <div class="mb-16">
                <h3 class="text-2xl font-bold mb-8 text-center">Academic Services</h3>
                
                <div class="grid md:grid-cols-2 gap-8">
                    <div class="flex items-start">
                        <div class="bg-blue-100 p-3 rounded-full mr-4">
                            <i class="fas fa-check-circle text-blue-600 text-xl"></i>
                        </div>
                        <div>
                            <h4 class="text-lg font-bold mb-2">University Admission</h4>
                            <p class="text-gray-600">Assistance in securing admission to internationally recognized Chinese universities with high global rankings.</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start">
                        <div class="bg-blue-100 p-3 rounded-full mr-4">
                            <i class="fas fa-check-circle text-blue-600 text-xl"></i>
                        </div>
                        <div>
                            <h4 class="text-lg font-bold mb-2">Major Selection</h4>
                            <p class="text-gray-600">Consultations to choose the right major based on your interests, skills, and job market demands.</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start">
                        <div class="bg-blue-100 p-3 rounded-full mr-4">
                            <i class="fas fa-check-circle text-blue-600 text-xl"></i>
                        </div>
                        <div>
                            <h4 class="text-lg font-bold mb-2">Document Preparation</h4>
                            <p class="text-gray-600">Help in preparing, translating, and notarizing all required documents for university applications.</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start">
                        <div class="bg-blue-100 p-3 rounded-full mr-4">
                            <i class="fas fa-check-circle text-blue-600 text-xl"></i>
                        </div>
                        <div>
                            <h4 class="text-lg font-bold mb-2">Chinese Language Study</h4>
                            <p class="text-gray-600">Preparatory programs for learning Chinese language before starting your academic program.</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div>
                <h3 class="text-2xl font-bold mb-8 text-center">Administrative Services</h3>
                
                <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
                    <div class="service-card bg-gray-50 p-6 rounded-lg border border-gray-200">
                        <div class="text-blue-600 text-3xl mb-4">
                            <i class="fas fa-passport"></i>
                        </div>
                        <h4 class="text-lg font-bold mb-2">Student Visa</h4>
                        <p class="text-gray-600">Complete guidance for study visa application procedures and requirements.</p>
                    </div>
                    
                    <div class="service-card bg-gray-50 p-6 rounded-lg border border-gray-200">
                        <div class="text-blue-600 text-3xl mb-4">
                            <i class="fas fa-home"></i>
                        </div>
                        <h4 class="text-lg font-bold mb-2">University Housing</h4>
                        <p class="text-gray-600">Booking accommodation on-campus or off-campus based on your preferences.</p>
                    </div>
                    
                    <div class="service-card bg-gray-50 p-6 rounded-lg border border-gray-200">
                        <div class="text-blue-600 text-3xl mb-4">
                            <i class="fas fa-heartbeat"></i>
                        </div>
                        <h4 class="text-lg font-bold mb-2">Health Insurance</h4>
                        <p class="text-gray-600">Arranging required health insurance coverage for international students in China.</p>
                    </div>
                    
                    <div class="service-card bg-gray-50 p-6 rounded-lg border border-gray-200">
                        <div class="text-blue-600 text-3xl mb-4">
                            <i class="fas fa-plane-arrival"></i>
                        </div>
                        <h4 class="text-lg font-bold mb-2">Airport Reception</h4>
                        <p class="text-gray-600">Reception and transportation service from the airport to your accommodation.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="turkey" class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <span class="inline-block mb-2 text-red-600 font-semibold">EDUCATION SERVICES</span>
                <h2 class="text-3xl md:text-4xl font-bold mb-4">Study in Turkey</h2>
                <p class="text-lg text-gray-600 max-w-3xl mx-auto">Get discounted scholarships at Turkey's top private universities</p>
            </div>
            
            <div class="mb-16">
                <h3 class="text-2xl font-bold mb-8 text-center flex items-center justify-center">
                    <span class="flag-icon" style="background-color: #E30A17;"></span>
                    Discounted Scholarships in Turkish Private Universities
                </h3>
                
                <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
                    <div class="service-card bg-white p-6 rounded-lg shadow-md border border-gray-100">
                        <div class="text-red-600 text-4xl mb-4">
                            <i class="fas fa-percentage"></i>
                        </div>
                        <h4 class="text-xl font-bold mb-2">Discounts up to 75%</h4>
                        <p class="text-gray-600">On tuition fees at prestigious private universities based on your academic performance.</p>
                    </div>
                    
                    <div class="service-card bg-white p-6 rounded-lg shadow-md border border-gray-100">
                        <div class="text-red-600 text-4xl mb-4">
                            <i class="fas fa-medal"></i>
                        </div>
                        <h4 class="text-xl font-bold mb-2">Excellence Scholarships</h4>
                        <p class="text-gray-600">For students with outstanding high school performance and test scores.</p>
                    </div>
                    
                    <div class="service-card bg-white p-6 rounded-lg shadow-md border border-gray-100">
                        <div class="text-red-600 text-4xl mb-4">
                            <i class="fas fa-running"></i>
                        </div>
                        <h4 class="text-xl font-bold mb-2">Activity Scholarships</h4>
                        <p class="text-gray-600">For students excelling in sports, arts, or other extracurricular activities.</p>
                    </div>
                    
                    <div class="service-card bg-white p-6 rounded-lg shadow-md border border-gray-100">
                        <div class="text-red-600 text-4xl mb-4">
                            <i class="fas fa-users"></i>
                        </div>
                        <h4 class="text-xl font-bold mb-2">Sibling Scholarships</h4>
                        <p class="text-gray-600">Additional discounts for siblings studying at the same university.</p>
                    </div>
                </div>
            </div>
            
            <div class="mb-16">
                <h3 class="text-2xl font-bold mb-8 text-center">Partner Turkish Universities</h3>
                
                <div class="grid md:grid-cols-2 lg:grid-cols-5 gap-6">
                    <div class="bg-white p-6 rounded-lg shadow-sm text-center border border-gray-100">
                        <div class="text-red-600 text-4xl mb-4">
                            <i class="fas fa-school"></i>
                        </div>
                        <h4 class="font-bold">Bahçeşehir University</h4>
                    </div>
                    
                    <div class="bg-white p-6 rounded-lg shadow-sm text-center border border-gray-100">
                        <div class="text-red-600 text-4xl mb-4">
                            <i class="fas fa-school"></i>
                        </div>
                        <h4 class="font-bold">Istanbul Aydın University</h4>
                    </div>
                    
                    <div class="bg-white p-6 rounded-lg shadow-sm text-center border border-gray-100">
                        <div class="text-red-600 text-4xl mb-4">
                            <i class="fas fa-school"></i>
                        </div>
                        <h4 class="font-bold">Istanbul Gelişim University</h4>
                    </div>
                    
                    <div class="bg-white p-6 rounded-lg shadow-sm text-center border border-gray-100">
                        <div class="text-red-600 text-4xl mb-4">
                            <i class="fas fa-school"></i>
                        </div>
                        <h4 class="font-bold">Nişantaşı University</h4>
                    </div>
                    
                    <div class="bg-white p-6 rounded-lg shadow-sm text-center border border-gray-100">
                        <div class="text-red-600 text-4xl mb-4">
                            <i class="fas fa-school"></i>
                        </div>
                        <h4 class="font-bold">Istanbul Medipol University</h4>
                    </div>
                </div>
            </div>
            
            <div class="mb-16">
                <h3 class="text-2xl font-bold mb-8 text-center">Academic Services in Turkey</h3>
                
                <div class="grid md:grid-cols-2 gap-8">
                    <div class="flex items-start">
                        <div class="bg-red-100 p-3 rounded-full mr-4">
                            <i class="fas fa-check-circle text-red-600 text-xl"></i>
                        </div>
                        <div>
                            <h4 class="text-lg font-bold mb-2">Guaranteed Admission</h4>
                            <p class="text-gray-600">Guaranteed acceptance at our partner universities with proper documentation.</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start">
                        <div class="bg-red-100 p-3 rounded-full mr-4">
                            <i class="fas fa-check-circle text-red-600 text-xl"></i>
                        </div>
                        <div>
                            <h4 class="text-lg font-bold mb-2">Major Selection</h4>
                            <p class="text-gray-600">Consultations to choose the best available majors with good job prospects.</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start">
                        <div class="bg-red-100 p-3 rounded-full mr-4">
                            <i class="fas fa-check-circle text-red-600 text-xl"></i>
                        </div>
                        <div>
                            <h4 class="text-lg font-bold mb-2">Credential Recognition</h4>
                            <p class="text-gray-600">Assistance with credential recognition procedures for international students.</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start">
                        <div class="bg-red-100 p-3 rounded-full mr-4">
                            <i class="fas fa-check-circle text-red-600 text-xl"></i>
                        </div>
                        <div>
                            <h4 class="text-lg font-bold mb-2">Turkish Language Courses</h4>
                            <p class="text-gray-600">Preparatory programs for learning Turkish language before academic studies.</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div>
                <h3 class="text-2xl font-bold mb-8 text-center">Administrative Services in Turkey</h3>
                
                <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
                    <div class="service-card bg-white p-6 rounded-lg border border-gray-200">
                        <div class="text-red-600 text-3xl mb-4">
                            <i class="fas fa-id-card"></i>
                        </div>
                        <h4 class="text-lg font-bold mb-2">Student Residence Permit</h4>
                        <p class="text-gray-600">Assistance in obtaining student residence permit after arrival in Turkey.</p>
                    </div>
                    
                    <div class="service-card bg-white p-6 rounded-lg border border-gray-200">
                        <div class="text-red-600 text-3xl mb-4">
                            <i class="fas fa-building"></i>
                        </div>
                        <h4 class="text-lg font-bold mb-2">Student Housing</h4>
                        <p class="text-gray-600">Arranging accommodation in university or private dormitories.</p>
                    </div>
                    
                    <div class="service-card bg-white p-6 rounded-lg border border-gray-200">
                        <div class="text-red-600 text-3xl mb-4">
                            <i class="fas fa-piggy-bank"></i>
                        </div>
                        <h4 class="text-lg font-bold mb-2">Bank Account Opening</h4>
                        <p class="text-gray-600">Help with bank account opening procedures for international students.</p>
                    </div>
                    
                    <div class="service-card bg-white p-6 rounded-lg border border-gray-200">
                        <div class="text-red-600 text-3xl mb-4">
                            <i class="fas fa-hands-helping"></i>
                        </div>
                        <h4 class="text-lg font-bold mb-2">Reception Services</h4>
                        <p class="text-gray-600">Student reception and orientation upon arrival in Turkey.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">Comparison Between Studying in China and Turkey</h2>
                <p class="text-lg text-gray-600 max-w-3xl mx-auto">Understand the key differences to make the best choice for your education</p>
            </div>
            
            <div class="overflow-x-auto">
                <table class="comparison-table w-full rounded-lg overflow-hidden">
                    <thead>
                        <tr>
                            <th class="text-left">Aspect</th>
                            <th class="text-center">China</th>
                            <th class="text-center">Turkey</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="font-semibold">Scholarship Type</td>
                            <td class="text-center">Full and free scholarships</td>
                            <td class="text-center">Discounted scholarships</td>
                        </tr>
                        <tr>
                            <td class="font-semibold">Scholarship Coverage</td>
                            <td class="text-center">Tuition + housing + monthly stipend</td>
                            <td class="text-center">Discount on tuition fees</td>
                        </tr>
                        <tr>
                            <td class="font-semibold">Study Language</td>
                            <td class="text-center">Chinese/English</td>
                            <td class="text-center">Turkish/English</td>
                        </tr>
                        <tr>
                            <td class="font-semibold">Study Duration</td>
                            <td class="text-center">4 years bachelor's</td>
                            <td class="text-center">4 years bachelor's</td>
                        </tr>
                        <tr>
                            <td class="font-semibold">Total Cost</td>
                            <td class="text-center">Free with scholarships</td>
                            <td class="text-center">Significantly reduced</td>
                        </tr>
                        <tr>
                            <td class="font-semibold">Job Opportunities</td>
                            <td class="text-center">In China and Asia</td>
                            <td class="text-center">In Turkey and Europe</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </section>

<section class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">How to Start Your Journey with Us?</h2>
                <p class="text-lg text-gray-600 max-w-3xl mx-auto">Follow these simple steps to begin your educational adventure abroad</p>
            </div>
            
            <div class="max-w-3xl mx-auto">
                <div class="process-step mb-10">
                    <div class="step-number">1</div>
                    <div class="bg-white p-6 rounded-lg shadow-sm">
                        <h3 class="text-xl font-bold mb-3">Free Consultation</h3>
                        <p class="text-gray-600">Book an appointment for a free consultation with our team of education experts to discuss your options.</p>
                    </div>
                </div>
                
                <div class="process-step mb-10">
                    <div class="step-number">2</div>
                    <div class="bg-white p-6 rounded-lg shadow-sm">
                        <h3 class="text-xl font-bold mb-3">Choose Destination</h3>
                        <p class="text-gray-600">Decide whether you prefer studying in China with full scholarships or Turkey with discounted tuition fees.</p>
                    </div>
                </div>
                
                <div class="process-step mb-10">
                    <div class="step-number">3</div>
                    <div class="bg-white p-6 rounded-lg shadow-sm">
                        <h3 class="text-xl font-bold mb-3">Document Preparation</h3>
                        <p class="text-gray-600">We'll help you prepare all required documents including transcripts, recommendation letters, and personal statements.</p>
                    </div>
                </div>
                
                <div class="process-step mb-10">
                    <div class="step-number">4</div>
                    <div class="bg-white p-6 rounded-lg shadow-sm">
                        <h3 class="text-xl font-bold mb-3">Application</h3>
                        <p class="text-gray-600">We submit your application to suitable universities and scholarships based on your qualifications.</p>
                    </div>
                </div>
                
                <div class="process-step mb-10">
                    <div class="step-number">5</div>
                    <div class="bg-white p-6 rounded-lg shadow-sm">
                        <h3 class="text-xl font-bold mb-3">Follow-up Results</h3>
                        <p class="text-gray-600">We follow up with you until you receive admission and scholarship decisions from universities.</p>
                    </div>
                </div>
                
                <div class="process-step">
                    <div class="step-number">6</div>
                    <div class="bg-white p-6 rounded-lg shadow-sm">
                        <h3 class="text-xl font-bold mb-3">Final Procedures</h3>
                        <p class="text-gray-600">We help you with travel arrangements, visa procedures, and arrival services in your destination country.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently Asked Questions</h2>
                <p class="text-lg text-gray-600 max-w-3xl mx-auto">Find answers to common questions about studying abroad</p>
            </div>
            
            <div class="max-w-4xl mx-auto">
                <h3 class="text-2xl font-bold mb-6 flex items-center">
                    <span class="flag-icon mr-3" style="background-color: #de2910;"></span>
                    Questions About China
                </h3>
                
                <div class="faq-item mb-6">
                    <div class="faq-question bg-gray-50 p-4 rounded-lg flex justify-between items-center">
                        <h4 class="font-semibold">What are the requirements for Chinese Government Scholarship?</h4>
                        <i class="fas fa-chevron-down text-blue-600"></i>
                    </div>
                    <div class="faq-answer px-4">
                        <p class="py-4 text-gray-600">Requirements vary by academic level, but generally require good GPA in high school or bachelor's degree and English language certificate. For undergraduate programs, you typically need a high school diploma with good grades. For master's programs, you need a bachelor's degree with good academic performance. Some programs may require HSK (Chinese proficiency) test scores.</p>
                    </div>
                </div>
                
                <div class="faq-item mb-6">
                    <div class="faq-question bg-gray-50 p-4 rounded-lg flex justify-between items-center">
                        <h4 class="font-semibold">Can I study in English in China?</h4>
                        <i class="fas fa-chevron-down text-blue-600"></i>
                    </div>
                    <div class="faq-answer px-4">
                        <p class="py-4 text-gray-600">Yes, many Chinese universities offer programs in English especially for international students. These programs are available at undergraduate, master's, and PhD levels in various fields including engineering, business, medicine, and more. However, learning basic Chinese is recommended for daily life and better integration into the society.</p>
                    </div>
                </div>
                
                <h3 class="text-2xl font-bold mb-6 mt-12 flex items-center">
                    <span class="flag-icon mr-3" style="background-color: #E30A17;"></span>
                    Questions About Turkey
                </h3>
                
                <div class="faq-item mb-6">
                    <div class="faq-question bg-gray-50 p-4 rounded-lg flex justify-between items-center">
                        <h4 class="font-semibold">How much discount can I get at Turkish universities?</h4>
                        <i class="fas fa-chevron-down text-red-600"></i>
                    </div>
                    <div class="faq-answer px-4">
                        <p class="py-4 text-gray-600">Discounts can reach up to 75% of tuition fees depending on the university and major. The exact discount depends on your high school grades, test scores, and the university's policies. Some exceptional students may qualify for even higher discounts or full scholarships in certain cases.</p>
                    </div>
                </div>
                
                <div class="faq-item mb-6">
                    <div class="faq-question bg-gray-50 p-4 rounded-lg flex justify-between items-center">
                        <h4 class="font-semibold">Are Turkish degrees internationally recognized?</h4>
                        <i class="fas fa-chevron-down text-red-600"></i>
                    </div>
                    <div class="faq-answer px-4">
                        <p class="py-4 text-gray-600">Yes, the Turkish private universities we work with are internationally recognized and accredited by the Turkish Higher Education Council (YÖK). Many of these universities have international accreditations and partnerships with universities in Europe and North America, making their degrees valuable worldwide.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="py-16 bg-blue-600 text-white">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to Start Your Educational Journey?</h2>
                <p class="text-xl max-w-3xl mx-auto">Contact us today for a free and detailed consultation about studying in China or Turkey</p>
            </div>
            
            <div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-12">
                <div class="bg-white rounded-lg shadow-xl p-8">
                    <h3 class="text-2xl font-bold mb-6 text-gray-800">Request Consultation</h3>
                    <form>
                        <div class="mb-4">
                            <label class="block text-gray-700 mb-2" for="name">Full Name</label>
                            <input type="text" id="name" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-700">
                        </div>
                        <div class="mb-4">
                            <label class="block text-gray-700 mb-2" for="email">Email Address</label>
                            <input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-700">
                        </div>
                        <div class="mb-4">
                            <label class="block text-gray-700 mb-2" for="phone">Phone Number</label>
                            <input type="tel" id="phone" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-700">
                        </div>
                        <div class="mb-4">
                            <label class="block text-gray-700 mb-2" for="interest">I'm interested in</label>
                            <select id="interest" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-700">
                                <option>Study in China</option>
                                <option>Study in Turkey</option>
                                <option>Both Options</option>
                            </select>
                        </div>
                        <div class="mb-4">
                            <label class="block text-gray-700 mb-2" for="message">Your Message</label>
                            <textarea id="message" rows="4" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-700"></textarea>
                        </div>
                        <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300">
                            Send Request
                        </button>
                    </form>
                </div>
                
                <div>
                    <div class="mb-8">
                        <h3 class="text-2xl font-bold mb-4">Contact Information</h3>
                        <div class="space-y-4">
                            <div class="flex items-start">
                                <i class="fas fa-map-marker-alt text-xl mr-4 mt-1"></i>
                                <p>123 Education Street, Knowledge City, Global 12345</p>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-phone-alt text-xl mr-4"></i>
                                <p>+1 (234) 567-8900</p>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-envelope text-xl mr-4"></i>
                                <p>info@eduglobal.com</p>
                            </div>
                            <div class="flex items-center">
                                <i class="fab fa-whatsapp text-xl mr-4"></i>
                                <p>+1 (234) 567-8901</p>
                            </div>
                        </div>
                    </div>
                    
                    <div>
                        <h3 class="text-2xl font-bold mb-4">Office Hours</h3>
                        <div class="space-y-2">
                            <div class="flex justify-between">
                                <span>Monday - Friday</span>
                                <span>9:00 AM - 6:00 PM</span>
                            </div>
                            <div class="flex justify-between">
                                <span>Saturday</span>
                                <span>10:00 AM - 4:00 PM</span>
                            </div>
                            <div class="flex justify-between">
                                <span>Sunday</span>
                                <span>Closed</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-8">
                        <h3 class="text-2xl font-bold mb-4">Follow Us</h3>
                        <div class="flex space-x-4">
                            <a href="#" class="bg-white text-blue-600 w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-50 transition duration-300">
                                <i class="fab fa-facebook-f"></i>
                            </a>
                            <a href="#" class="bg-white text-blue-600 w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-50 transition duration-300">
                                <i class="fab fa-twitter"></i>
                            </a>
                            <a href="#" class="bg-white text-blue-600 w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-50 transition duration-300">
                                <i class="fab fa-instagram"></i>
                            </a>
                            <a href="#" class="bg-white text-blue-600 w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-50 transition duration-300">
                                <i class="fab fa-linkedin-in"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<footer class="bg-gray-900 text-white py-12">
        <div class="container mx-auto px-4">
            <div class="grid md:grid-cols-4 gap-8 mb-8">
                <div>
                    <div class="flex items-center mb-4">
                        <i class="fas fa-graduation-cap text-blue-400 text-2xl mr-2"></i>
                        <span class="text-xl font-bold">EduGlobal</span>
                    </div>
                    <p class="text-gray-400">Providing world-class educational opportunities in China and Turkey with the best scholarships and services.</p>
                </div>
                
                <div>
                    <h4 class="text-lg font-bold mb-4">Quick Links</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Home</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">About Us</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Services</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Universities</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Contact</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-bold mb-4">Study Destinations</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Study in China</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Study in Turkey</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Scholarships</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Application Process</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Student Testimonials</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-bold mb-4">Newsletter</h4>
                    <p class="text-gray-400 mb-4">Subscribe to our newsletter for the latest updates and scholarship opportunities.</p>
                    <form class="flex">
                        <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg focus:outline-none text-gray-800 w-full">
                        <button type="submit" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-r-lg">
                            <i class="fas fa-paper-plane"></i>
                        </button>
                    </form>
                </div>
            </div>
            
            <div class="pt-8 border-t border-gray-800 text-center text-gray-400">
                <p>&copy; 2023 EduGlobal. All rights reserved.</p>
            </div>
        </div>
    </footer>

Related Examples

Badges for showing status

Author:
Conan Hilton

3 years ago

9.7k
Thankyou Card

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

5.9k
Notifications
Toast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.

Author:
Abhiraj

1 year ago

1.2k
Badges without border

Author:
Prajwal Hallale

3 years ago

7.4k
Rwandan farmers with Canadian markets through sustainable, fair trade practices.
Key Features of This Website: Professional Design: Clean, modern interface with orange/green color scheme representing mangoes and agriculture Fully responsive layout that works on all devices Comprehensive Sections: Hero section highlighting the Rwanda-Canada mango trade Product showcase with different mango varieties Current market pricing table Detailed farm-to-table process explanation Company information and impact metrics Testimonials from partners Contact form and information Trade-Specific Content: Focus on Rwandan mango varieties suitable for Canadian markets Pricing in both USD and kg units common in agricultural trade Information about certifications and compliance Shipping and logistics details User Experience: Clear calls-to-action for quotes and orders Easy navigation between sections Newsletter signup for market updates Contact information prominently displayed Trust Elements: Certifications and compliance badges Impact statistics showing benefits to Rwandan farmers Testimonials from Canadian partners

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

1.1k
chip
Interactive and customizable chips or tags to display labels, categories, or filters. Includes options for removable chips with icons and different styles.

Author:
Abhiraj

1 year ago

1.6k
Badges for showing statuses

Author:
Mohit Prajapati

3 years ago

10.5k
machine
A fully interactive, web-based macOS-style desktop environment featuring draggable and resizable windows, a dynamic Dock with magnification, smooth glass UI effects, adaptive colors, a functional photo gallery with hover menus, and integrated mini-apps like Safari, Notes, Weather, and App Store. Built using HTML, CSS, Tailwind, and JavaScript to recreate a modern OS experience directly in the browser.

Author:
Gidy Official

2 months ago

227
Black and white badges

Author:
Anonymous

1 year ago

2.8k
Icon Notification Badge with Count

Author:
Arya

3 years ago

14.4k
Tag Input field
This code creates a dynamic tag input field using HTML, JavaScript, and TailwindCSS. Users can type tags into the input field and press "Enter" to add them. Each tag is displayed inside the input field as a styled container with a remove button. The tag input is limited to a maximum of 5 tags, and an error message is shown if the limit is exceeded. Users can remove tags to free up space for new ones. The input field and tags are styled using TailwindCSS, ensuring a clean and responsive design.

Author:
Ranit Saha

1 year ago

2k
Tags list
click to remove the tag from list

Author:
Asher Wilde

2 years ago

11.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components