new home - CHIWORLD MEDIA SERVICES

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>RedAir – Flight Booking</title>
<style>
/* — CSS VARIABLES & RESET — */
:root {
–primary-red: #DC2626;
–dark-red: #991B1B;
–light-red: #FEF2F2;
–white: #ffffff;
–black: #1f2937;
–gray: #6b7280;
–shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
}

body {
background-color: #f9fafb;
color: var(–black);
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* — HEADER — */
header {
background-color: var(–white);
box-shadow: var(–shadow);
position: sticky;
top: 0;
z-index: 1000;
}

.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 5%;
max-width: 1200px;
margin: 0 auto;
}

.logo {
font-size: 1.8rem;
font-weight: 800;
color: var(–primary-red);
display: flex;
align-items: center;
gap: 5px;
}

.nav-links {
display: flex;
gap: 2rem;
}

.nav-links a {
font-weight: 500;
transition: color 0.3s;
}

.nav-links a:hover {
color: var(–primary-red);
}

.btn-book {
background-color: var(–primary-red);
color: var(–white);
padding: 0.5rem 1.5rem;
border-radius: 5px;
font-weight: 600;
transition: background 0.3s;
}

.btn-book:hover {
background-color: var(–dark-red);
}

/* — HERO SECTION — */
.hero {
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(‘https://images.unsplash.com/photo-1436491865332-7a61a109cc05?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80’);
background-size: cover;
background-position: center;
height: 500px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: var(–white);
padding: 0 20px;
}

.hero h1 {
font-size: 3rem;
margin-bottom: 1rem;
text-transform: uppercase;
letter-spacing: 2px;
}

.hero p {
font-size: 1.2rem;
margin-bottom: 2rem;
}

/* — SEARCH BOX — */
.search-container {
background-color: var(–white);
padding: 2rem;
border-radius: 10px;
width: 100%;
max-width: 900px;
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
margin-top: -50px; /* Overlap hero */
position: relative;
}

.search-tabs {
display: flex;
gap: 1rem;
margin-bottom: 1.5rem;
border-bottom: 2px solid #eee;
}

.tab {
padding-bottom: 10px;
cursor: pointer;
font-weight: 600;
color: var(–gray);
}

.tab.active {
color: var(–primary-red);
border-bottom: 2px solid var(–primary-red);
}

.search-form {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1rem;
align-items: end;
}

.form-group {
display: flex;
flex-direction: column;
}

.form-group label {
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: var(–gray);
}

.form-group input, .form-group select {
padding: 0.8rem;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 1rem;
outline: none;
}

.form-group input:focus {
border-color: var(–primary-red);
}

.search-btn {
background-color: var(–primary-red);
color: var(–white);
border: none;
padding: 0.9rem;
border-radius: 5px;
font-size: 1rem;
font-weight: bold;
cursor: pointer;
transition: 0.3s;
}

.search-btn:hover {
background-color: var(–dark-red);
}

/* — FLIGHT RESULTS — */
.results-section {
max-width: 900px;
margin: 3rem auto;
padding: 0 20px;
display: none; /* Hidden by default */
}

.flight-card {
background: var(–white);
border: 1px solid #eee;
border-left: 5px solid var(–primary-red);
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: var(–shadow);
transition: transform 0.2s;
}

.flight-card:hover {
transform: translateY(-3px);
}

.airline-info {
display: flex;
align-items: center;
gap: 1rem;
}

.airline-logo {
width: 40px;
height: 40px;
background-color: var(–light-red);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(–primary-red);
font-weight: bold;
}

.flight-time {
text-align: center;
}

.flight-time h3 { font-size: 1.2rem; }
.flight-time span { font-size: 0.8rem; color: var(–gray); }

.duration {
text-align: center;
color: var(–gray);
font-size: 0.9rem;
padding: 0 1rem;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
}

.price-book {
text-align: right;
}

.price {
font-size: 1.5rem;
color: var(–primary-red);
font-weight: 800;
display: block;
}

.select-btn {
background-color: var(–primary-red);
color: white;
padding: 0.5rem 1.5rem;
border-radius: 5px;
margin-top: 0.5rem;
display: inline-block;
font-weight: 600;
cursor: pointer;
}

/* — FEATURES SECTION — */
.features {
padding: 4rem 5%;
background-color: var(–light-red);
text-align: center;
}

.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 2rem auto 0;
}

.feature-card {
background: var(–white);
padding: 2rem;
border-radius: 10px;
box-shadow: var(–shadow);
}

.feature-icon {
font-size: 2rem;
color: var(–primary-red);
margin-bottom: 1rem;
}

/* — FOOTER — */
footer {
background-color: #111827;
color: var(–white);
padding: 3rem 5%;
text-align: center;
}

.footer-links {
display: flex;
justify-content: center;
gap: 2rem;
margin-bottom: 2rem;
}

/* — RESPONSIVE — */
@media (max-width: 768px) {
.flight-card {
flex-direction: column;
gap: 1rem;
text-align: center;
}

.airline-info, .flight-time, .duration, .price-book {
width: 100%;
border: none;
justify-content: center;
}

.duration { padding: 10px 0; }

.search-form {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>

<!– Navigation –>
<header>
<nav class=”navbar”>
<a href=”#” class=”logo”>✈ RedAir</a>
<div class=”nav-links”>
<a href=”#”>Home</a>
<a href=”#”>My Trips</a>
<a href=”#”>Check-in</a>
<a href=”#”>Contact</a>
</div>
<a href=”#” class=”btn-book”>Sign In</a>
</nav>
</header>

<!– Hero Section –>
<section class=”hero”>
<h1>Explore the World in Style</h1>
<p>Best deals on flights. Secure booking. Red Carpet Service.</p>
</section>

<!– Search Section –>
<div class=”search-container”>
<div class=”search-tabs”>
<div class=”tab active” onclick=”switchTab(‘one-way’)”>One Way</div>
<div class=”tab” onclick=”switchTab(’round-trip’)”>Round Trip</div>
</div>

<form id=”flight-search-form” class=”search-form”>
<div class=”form-group”>
<label>From</label>
<input type=”text” id=”from” placeholder=”City (e.g. New York)” required value=”New York”>
</div>
<div class=”form-group”>
<label>To</label>
<input type=”text” id=”to” placeholder=”City (e.g. London)” required value=”London”>
</div>
<div class=”form-group”>
<label>Departure</label>
<input type=”date” id=”date” required>
</div>
<div class=”form-group”>
<label>Passengers</label>
<select id=”passengers”>
<option value=”1″>1 Passenger</option>
<option value=”2″>2 Passengers</option>
<option value=”3″>3 Passengers</option>
</select>
</div>
<button type=”submit” class=”search-btn”>Search Flights</button>
</form>
</div>

<!– Results Section –>
<div id=”results” class=”results-section”>
<!– Results will be injected here by JS –>
</div>

<!– Features –>
<section class=”features”>
<h2>Why Fly With RedAir?</h2>
<div class=”features-grid”>
<div class=”feature-card”>
<div class=”feature-icon”>🛡️</div>
<h3>Safe & Secure</h3>
<p>Your safety is our priority with advanced safety protocols.</p>
</div>
<div class=”feature-card”>
<div class=”feature-icon”>💺</div>
<h3>Comfort Class</h3>
<p>Enjoy spacious seating and premium in-flight entertainment.</p>
</div>
<div class=”feature-card”>
<div class=”feature-icon”>🛍️</div>
<h3>Extra Baggage</h3>
<p>Generous baggage allowance included in all tickets.</p>
</div>
</div>
</section>

<!– Footer –>
<footer>
<div class=”footer-links”>
<a href=”#”>About Us</a>
<a href=”#”>Terms & Conditions</a>
<a href=”#”>Privacy Policy</a>
</div>
<p>© 2023 RedAir Reservations. All Rights Reserved.</p>
</footer>

// Tab Switching Logic
function switchTab(type) {
const tabs = document.querySelectorAll(‘.tab’);
tabs.forEach(t => t.classList.remove(‘active’));
event.target.classList.add(‘active’);
// In a real app, you would show/hide the Return Date input here
}

// Search Functionality Simulation
const form = document.getElementById(‘flight-search-form’);
const resultsContainer = document.getElementById(‘results’);

form.addEventListener(‘submit’, function(e) {
e.preventDefault();

const from = document.getElementById(‘from’).value;
const to = document.getElementById(‘to’).value;

// Show loading state
resultsContainer.style.display = ‘block’;
resultsContainer.innerHTML = `<div style=”text-align:center; padding: 2rem;”>Searching for flights from ${from} to ${to}…</div>`;

// Simulate API delay
setTimeout