custom1/blog.html

296 lines
23 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>blog</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">Visa2Egypt</div><ul class="nav-1-nav-links"><li><a href="home.html">Home</a></li><li><a href="about.html">Visa Types</a></li><li><a href="contact.html">Requirements</a></li><li><a href="services.html">Processing</a></li><li><a href="faq.html">FAQ</a></li><li class="nav-1-dropdown"><a href="#">Resources<i class="fas fa-chevron-down"><i class="fas fa-chevron-down">🔽</i></i></a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Track Visa</button><button class="nav-1-btn nav-1-solid">Apply Now</button></div></nav></div>
<div class="text-2-wrapper"><section class="text-2-section"><p class="text-2-tagline">Government-Approved Processing</p><h2 class="text-2-heading">Apply for Your Egypt Visa Online Fast & Secure</h2><p class="text-2-description">Explore the land of Pharaohs with confidence. Our seamless, government-approved platform ensures a swift and secure application process with 24/7 expert support.</p><div class="text-2-button-group"><button class="text-2-btn text-2-solid">Start Your Application</button><button class="text-2-btn text-2-outline">Explore Visa Types</button></div></section></div>
<section id="featured-posts" style="background-color: #F8F8F8; padding: 60px 20px; font-family: 'Open Sans', sans-serif;">
<link rel="stylesheet" href="style.css" />
<div style="max-width: 1200px; margin: 0 auto;">
<h2 style="color: #002147; text-align: center; margin-bottom: 40px; font-size: 2.5em; font-family: 'Cairo', sans-serif; position: relative;">
<span style="display: inline-block; padding: 0 20px; background-color: #F8F8F8; z-index: 1;">Featured Stories & Insights</span>
<span style="content: ''; display: block; width: 80px; height: 3px; background-color: #C19A6B; margin: 10px auto 0;"></span>
</h2>
<div class="carousel-container" style="position: relative;">
<div class="carousel-track">
<!-- Post Card 1 -->
<article class="carousel-item">
<img src="https://via.placeholder.com/600x400/002147/C19A6B?text=Pyramids+Adventure" alt="Post Image: Pyramids Adventure" style="width: 100%; height: 200px; object-fit: cover;">
<div style="padding: 25px;">
<h3 style="font-size: 1.5em; color: #002147; margin-bottom: 15px; font-family: 'Cairo', sans-serif;">Exploring the Giza Plateau</h3>
<p style="font-size: 0.95em; color: #555; line-height: 1.6; margin-bottom: 20px;">Discover the ancient wonders of Egypt, from the majestic Pyramids to the enigmatic Sphinx, a journey through time awaits...</p>
<a href="#" style="display: inline-block; background-color: #C19A6B; color: #fff; padding: 10px 20px; border-radius: 5px; text-decoration: none; font-weight: bold; transition: background-color 0.3s ease;">Read More</a>
</div>
</article>
<!-- Post Card 2 -->
<article class="carousel-item">
<img src="https://via.placeholder.com/600x400/002147/C19A6B?text=Nile+Cruise+Journey" alt="Post Image: Nile Cruise Journey" style="width: 100%; height: 200px; object-fit: cover;">
<div style="padding: 25px;">
<h3 style="font-size: 1.5em; color: #002147; margin-bottom: 15px; font-family: 'Cairo', sans-serif;">A Luxurious Nile Cruise Experience</h3>
<p style="font-size: 0.95em; color: #555; line-height: 1.6; margin-bottom: 20px;">Sail through history on a serene Nile cruise, visiting Luxor, Aswan, and the Valley of the Kings with comfort...</p>
<a href="#" style="display: inline-block; background-color: #C19A6B; color: #fff; padding: 10px 20px; border-radius: 5px; text-decoration: none; font-weight: bold; transition: background-color 0.3s ease;">Read More</a>
</div>
</article>
<!-- Post Card 3 -->
<article class="carousel-item">
<img src="https://via.placeholder.com/600x400/002147/C19A6B?text=Ancient+Temples" alt="Post Image: Ancient Temples" style="width: 100%; height: 200px; object-fit: cover;">
<div style="padding: 25px;">
<h3 style="font-size: 1.5em; color: #002147; margin-bottom: 15px; font-family: 'Cairo', sans-serif;">Unveiling the Secrets of Karnak</h3>
<p style="font-size: 0.95em; color: #555; line-height: 1.6; margin-bottom: 20px;">Dive deep into the grandeur of Karnak Temple, an astonishing complex of sanctuaries, pylons, and obelisks...</p>
<a href="#" style="display: inline-block; background-color: #C19A6B; color: #fff; padding: 10px 20px; border-radius: 5px; text-decoration: none; font-weight: bold; transition: background-color 0.3s ease;">Read More</a>
</div>
</article>
<!-- Post Card 4 (for more items/scroll demo) -->
<article class="carousel-item">
<img src="https://via.placeholder.com/600x400/002147/C19A6B?text=Visa+Tips+Egypt" alt="Post Image: Visa Tips Egypt" style="width: 100%; height: 200px; object-fit: cover;">
<div style="padding: 25px;">
<h3 style="font-size: 1.5em; color: #002147; margin-bottom: 15px; font-family: 'Cairo', sans-serif;">Essential Tips for Your Egypt Visa</h3>
<p style="font-size: 0.95em; color: #555; line-height: 1.6; margin-bottom: 20px;">Navigate the visa application process with ease. Our guide covers everything from documents to processing times...</p>
<a href="#" style="display: inline-block; background-color: #C19A6B; color: #fff; padding: 10px 20px; border-radius: 5px; text-decoration: none; font-weight: bold; transition: background-color 0.3s ease;">Read More</a>
</div>
</article>
<!-- Post Card 5 -->
<article class="carousel-item">
<img src="https://via.placeholder.com/600x400/002147/C19A6B?text=Red+Sea+Diving" alt="Post Image: Red Sea Diving" style="width: 100%; height: 200px; object-fit: cover;">
<div style="padding: 25px;">
<h3 style="font-size: 1.5em; color: #002147; margin-bottom: 15px; font-family: 'Cairo', sans-serif;">Diving into the Red Sea's Wonders</h3>
<p style="font-size: 0.95em; color: #555; line-height: 1.6; margin-bottom: 20px;">Explore the vibrant coral reefs and diverse marine life of Egypt's Red Sea, a paradise for divers and snorkelers...</p>
<a href="#" style="display: inline-block; background-color: #C19A6B; color: #fff; padding: 10px 20px; border-radius: 5px; text-decoration: none; font-weight: bold; transition: background-color 0.3s ease;">Read More</a>
</div>
</article>
</div>
<!-- Navigation Arrows (simple placeholders, hidden on mobile by media query) -->
<div style="position: absolute; top: 50%; width: 100%; display: flex; justify-content: space-between; transform: translateY(-50%); pointer-events: none; padding: 0 10px;">
<button aria-label="Previous post" style="background-color: #C19A6B; border: none; border-radius: 50%; color: white; font-size: 2em; width: 40px; height: 40px; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0.8; transition: opacity 0.3s; pointer-events: auto; transform: translateX(-50%); z-index: 10;">&lt;</button>
<button aria-label="Next post" style="background-color: #C19A6B; border: none; border-radius: 50%; color: white; font-size: 2em; width: 40px; height: 40px; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0.8; transition: opacity 0.3s; pointer-events: auto; transform: translateX(50%); z-index: 10;">&gt;</button>
</div>
<!-- Pagination Dots (simple placeholders) -->
<div style="display: flex; justify-content: center; margin-top: 30px;">
<span aria-label="Page 1" style="display: inline-block; width: 12px; height: 12px; background-color: #C19A6B; border-radius: 50%; margin: 0 5px; opacity: 0.5; cursor: pointer;"></span>
<span aria-label="Page 2" style="display: inline-block; width: 12px; height: 12px; background-color: #C19A6B; border-radius: 50%; margin: 0 5px; opacity: 1; cursor: pointer;"></span>
<span aria-label="Page 3" style="display: inline-block; width: 12px; height: 12px; background-color: #C19A6B; border-radius: 50%; margin: 0 5px; opacity: 0.5; cursor: pointer;"></span>
</div>
</div>
</div>
</section>
<section class="latest-articles-section">
<div class="container">
<h2 class="section-title">Explore Ancient Egypt & Modern Travel</h2>
<p class="section-subtitle">Stay updated with our latest insights, travel tips, and cultural guides for your journey to the land of Pharaohs.</p>
<div class="articles-grid">
<article class="article-card">
<div class="article-image-wrapper">
<img src="https://via.placeholder.com/400x250/C19A6B/002147?text=Pyramids+of+Giza" alt="Panoramic view of the Giza Pyramids and Sphinx">
</div>
<div class="article-content">
<span class="article-category">Travel Guide</span>
<h3 class="article-title">Top 7 Historical Landmarks You Must Visit in Egypt</h3>
<p class="article-excerpt">Journey through time from Luxor's temples to Aswan's beauty. Discover Egypt's iconic sites.</p>
<a href="#" class="read-more-link">Read More <span aria-hidden="true">&rarr;</span></a>
</div>
</article>
<article class="article-card">
<div class="article-image-wrapper">
<img src="https://via.placeholder.com/400x250/002147/C19A6B?text=Nile+Cruise+Visa" alt="Traditional Egyptian felucca boat sailing on the Nile River at sunset">
</div>
<div class="article-content">
<span class="article-category">Visa Tips</span>
<h3 class="article-title">Decoding the Nile Cruise Visa: A Seamless Application Guide</h3>
<p class="article-excerpt">Ensure your river adventure flows smoothly with our expert advice on cruise-specific visas.</p>
<a href="#" class="read-more-link">Read More <span aria-hidden="true">&rarr;</span></a>
</div>
</article>
<article class="article-card">
<div class="article-image-wrapper">
<img src="https://via.placeholder.com/400x250/C19A6B/002147?text=Egyptian+Culture" alt="Vibrant Egyptian street market with traditional goods and textiles">
</div>
<div class="article-content">
<span class="article-category">Culture & Etiquette</span>
<h3 class="article-title">Embracing Egyptian Culture: Tips for Travelers</h3>
<p class="article-excerpt">From local customs to friendly greetings, immerse yourself fully in Egypt's warm hospitality.</p>
<a href="#" class="read-more-link">Read More <span aria-hidden="true">&rarr;</span></a>
</div>
</article>
<article class="article-card">
<div class="article-image-wrapper">
<img src="https://via.placeholder.com/400x250/002147/C19A6B?text=Visa+Requirements" alt="Close-up of a passport open to a visa stamp page">
</div>
<div class="article-content">
<span class="article-category">Application Guide</span>
<h3 class="article-title">Avoiding Common Pitfalls in Your Egypt Visa Application</h3>
<p class="article-excerpt">Streamline your application process by learning from common mistakes and securing a swift approval.</p>
<a href="#" class="read-more-link">Read More <span aria-hidden="true">&rarr;</span></a>
</div>
</article>
</div>
<div class="view-all-articles">
<a href="#" class="cta-button">View All Articles</a>
</div>
</div>
</section>
<section class="blog-categories-filter">
<div class="container">
<h2 class="section-heading">Explore Blog Categories</h2>
<div class="filter-controls">
<div class="search-filter">
<label for="category-search" class="visually-hidden">Search Categories</label>
<input type="search" id="category-search" placeholder="Search categories..." aria-label="Search blog categories" class="search-input">
<button type="button" class="search-button">
<svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
<span class="visually-hidden">Search</span>
</button>
</div>
<div class="category-list" role="group" aria-label="Filter blog categories">
<button type="button" class="category-button active" data-category="all">All Categories</button>
<button type="button" class="category-button" data-category="ancient-egypt">Ancient Egypt</button>
<button type="button" class="category-button" data-category="visa-guides">Visa Guides</button>
<button type="button" class="category-button" data-category="cultural-festivals">Cultural Festivals</button>
<button type="button" class="category-button" data-category="travel-tips">Travel Tips</button>
<button type="button" class="category-button" data-category="archaeology">Archaeological Discoveries</button>
<button type="button" class="category-button" data-category="nile-cruises">Nile Cruises</button>
</div>
</div>
</div>
</section>
<section id="blog-search" class="section-padding">
<div class="container">
<h2 class="section-title">Explore Our Blog Posts</h2>
<div class="search-bar-container">
<form action="#" method="get" class="blog-search-form">
<label for="blog-search-input" class="visually-hidden">Search Blog Articles</label>
<input type="search" id="blog-search-input" name="query" placeholder="e.g., Pyramids, Visa Tips, Luxor" class="search-input">
<button type="submit" class="search-button" aria-label="Search Blog">
<svg class="search-icon" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
</svg>
<span class="visually-hidden">Submit Search</span>
</button>
</form>
</div>
<div class="blog-filters">
<button class="filter-button active">All Articles</button>
<button class="filter-button">Ancient History</button>
<button class="filter-button">Travel Tips</button>
<button class="filter-button">Cultural Insights</button>
<button class="filter-button">Visa Guides</button>
</div>
<div class="blog-posts-grid">
<article class="blog-post-card">
<div class="post-image-wrapper">
<img src="https://via.placeholder.com/400x250/C19A6B/002147?text=Pharaohs%27+Secrets" alt="Ancient Egyptian hieroglyphs on temple walls" class="post-thumbnail">
</div>
<div class="post-content">
<h3 class="post-title">Unraveling the Secrets of Ancient Egyptian Pharaohs</h3>
<p class="post-excerpt">Dive deep into the lives and legacies of Egypt's most iconic rulers, from Tutankhamun to Ramses II.</p>
<div class="post-meta">
<span class="post-category">Ancient History</span>
<span class="post-date">October 26, 2023</span>
</div>
<a href="#" class="read-more-link">Read More</a>
</div>
</article>
<article class="blog-post-card">
<div class="post-image-wrapper">
<img src="https://via.placeholder.com/400x250/002147/C19A6B?text=Nile+Cruise+Tips" alt="A serene Nile River with a felucca at sunset" class="post-thumbnail">
</div>
<div class="post-content">
<h3 class="post-title">Your Essential Guide to a Memorable Nile Cruise</h3>
<p class="post-excerpt">Embark on a timeless journey. Discover what to expect, pack, and explore on a classic Nile river cruise.</p>
<div class="post-meta">
<span class="post-category">Travel Tips</span>
<span class="post-date">October 20, 2023</span>
</div>
<a href="#" class="read-more-link">Read More</a>
</div>
</article>
<article class="blog-post-card">
<div class="post-image-wrapper">
<img src="https://via.placeholder.com/400x250/C19A6B/002147?text=Visa+Application+FAQ" alt="Egypt e-visa stamp on a passport page" class="post-thumbnail">
</div>
<div class="post-content">
<h3 class="post-title">Common Questions About Your Egypt Visa Application</h3>
<p class="post-excerpt">Navigate the visa process with ease. We answer your most pressing questions about requirements and timelines.</p>
<div class="post-meta">
<span class="post-category">Visa Guides</span>
<span class="post-date">October 15, 2023</span>
</div>
<a href="#" class="read-more-link">Read More</a>
</div>
</article>
<article class="blog-post-card">
<div class="post-image-wrapper">
<img src="https://via.placeholder.com/400x250/002147/C19A6B?text=Cairo+Culture" alt="Bustling market street in Khan el-Khalili, Cairo" class="post-thumbnail">
</div>
<div class="post-content">
<h3 class="post-title">Experiencing the Vibrant Culture of Modern Cairo</h3>
<p class="post-excerpt">Beyond the pyramids, explore the bustling markets, historic mosques, and contemporary art scene of Egypt's capital.</p>
<div class="post-meta">
<span class="post-category">Cultural Insights</span>
<span class="post-date">October 08, 2023</span>
</div>
<a href="#" class="read-more-link">Read More</a>
</div>
</article>
</div>
<div class="pagination">
<a href="#" class="pagination-link active" aria-current="page">1</a>
<a href="#" class="pagination-link">2</a>
<a href="#" class="pagination-link">3</a>
<a href="#" class="pagination-link next" rel="next">Next &raquo;</a>
</div>
</div>
</section>
<section id="newsletter-subscription" class="newsletter-section" data-theme="egyptian">
<div class="container">
<div class="newsletter-content">
<h2 class="section-title">Unlock Egypt's Mystique: Subscribe for Essential Updates</h2>
<p class="section-description">
Receive curated insights on Egypt visa regulations, cultural travel tips, and exclusive offers.
Navigate your journey to the land of Pharaohs with confidence and ease.
</p>
<form action="#" method="POST" class="newsletter-form">
<div class="input-group">
<label for="email-subscribe" class="visually-hidden">Your Email Address</label>
<input type="email" id="email-subscribe" name="email" placeholder="Enter your email address" required aria-label="Enter your email address to subscribe to our newsletter">
<button type="submit" class="cta-button">Subscribe Now</button>
</div>
<div class="privacy-consent">
<input type="checkbox" id="privacy-consent" name="privacy-consent" required>
<label for="privacy-consent">I agree to receive marketing communications and accept the <a href="#privacy-policy" class="privacy-link">Privacy Policy</a>.</label>
</div>
</form>
</div>
</div>
</section>
<div class="footer-1-wrapper"><section class="footer-1-section"><div class="footer-1-top"><div class="footer-1-brand"><h3 class="footer-1-logo">Visa2Egypt</h3><p class="footer-1-newsletter-text">Stay informed with the latest Egypt travel and visa updates. Your seamless journey starts here!</p><div class="footer-1-newsletter-form"><input type="email" placeholder="Enter your email"></input><button class="footer-1-subscribe-btn">Subscribe</button></div><p class="footer-1-privacy-note"><span>By subscribing you agree to our </span><a href="#">Privacy Policy</a><span> and consent to receive updates about Egypt visa services.</span></p></div><div class="footer-1-columns"><div class="footer-1-column"><h4>Visa Services</h4><ul><li><a href="#">Tourist Visa</a></li><li><a href="#">Business Visa</a></li><li><a href="#">Nile Cruise Visa</a></li><li><a href="#">Archaeology Permit</a></li><li><a href="#">All Visa Types</a></li></ul></div><div class="footer-1-column"><h4>Quick Links</h4><ul><li><a href="#">Requirements</a></li><li><a href="#">Application Process</a></li><li><a href="#">FAQ</a></li><li><a href="#">Track Your Visa</a></li><li><a href="#">Contact Support</a></li></ul></div><div class="footer-1-column footer-1-social"><h4>Follow Our Journey</h4><ul><li><i class="fab fa-facebook"></i><span>Facebook</span></li><li><i class="fab fa-instagram"></i><span>Instagram</span></li><li><i class="fab fa-x-twitter"></i><span>X (Twitter)</span></li><li><i class="fab fa-linkedin"></i><span>LinkedIn</span></li><li><i class="fab fa-youtube"></i><span>Youtube</span></li></ul></div></div></div><div class="footer-1-bottom"><p>© 2024 Visa2Egypt. All rights reserved.</p><ul class="footer-1-links"><li><a href="#">Privacy Policy</a></li><li><a href="#">Terms of Service</a></li><li><a href="#">Cookie Settings</a></li></ul></div></section></div>
</body>
</html>