save
This commit is contained in:
akairatu
parent
6a5721598d
commit
fd0137fe74
2116
src/css/style.css
2116
src/css/style.css
File diff suppressed because it is too large
Load Diff
690
src/index.html
690
src/index.html
@ -3,249 +3,419 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ExamPrep Pro | Your Path to Academic Success</title>
|
||||
<title>ExamPass | Your Path to Academic Success</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<nav class="nav-container">
|
||||
<div class="logo">Snap<span>PASS</span></div>
|
||||
<div class="nav-toggle" id="navToggle">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="container nav-container">
|
||||
<a href="#" class="logo">Exam<span>Pass</span></a>
|
||||
<nav>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#services">Our Services</a></li>
|
||||
<li><a href="#methodology">Methodology</a></li>
|
||||
<li><a href="#exams">Exams</a></li>
|
||||
<li><a href="#success">Success Stories</a></li>
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#methodology">Exams</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
<li class="lang-switch">
|
||||
<div class="lang-switch">
|
||||
<a href="#" class="active">EN</a>
|
||||
<a href="#">RU</a>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
<div class="contact-icons">
|
||||
<a href="https://wa.me/your-number" target="_blank" class="animate-hover"><i class="fab fa-whatsapp"></i></a>
|
||||
<a href="https://t.me/your-channel" target="_blank" class="animate-hover"><i class="fab fa-telegram"></i></a>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section id="hero" class="hero-section">
|
||||
<div class="hero-background">
|
||||
<div class="gradient-overlay"></div>
|
||||
<div class="pattern-grid"></div>
|
||||
<div class="floating-shapes">
|
||||
<div class="shape shape1"></div>
|
||||
<div class="shape shape2"></div>
|
||||
<div class="shape shape3"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="hero-content animate-slide-up">
|
||||
<h1 class="main-title">PASS ANY EXAM<br>IN ON CLICK</h1>
|
||||
<div class="hero-text">
|
||||
<h1 class="main-title">
|
||||
<span class="text-line">PASS ANY EXAM</span>
|
||||
<span class="text-line action-line">
|
||||
IN ONE <a href="#contact" class="click-button">
|
||||
<span class="click-text">CLICK</span>
|
||||
<span class="click-icon">
|
||||
<i class="fas fa-arrow-down"></i>
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<p class="hero-description">Studying abroad is within reach: secure your spot at Cambridge, Harvard, Oxford, and other top universities with us!</p>
|
||||
<div class="stats-container animate-fade-in">
|
||||
<div class="stat-item">
|
||||
<span class="stat-number" data-target="100">0</span>%
|
||||
<p>Success Rate</p>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-number" data-target="100">0</span>+
|
||||
<p>clients reached their goal</p>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-number" data-target="6">0</span>
|
||||
<p>Years Experience</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-buttons">
|
||||
<a href="#methodology" class="btn btn-primary animate-pulse">Learn Our Method</a>
|
||||
<a href="#contact" class="btn btn-secondary">Start Now</a>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-shapes">
|
||||
<div class="shape shape1"></div>
|
||||
<div class="shape shape2"></div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<div class="wave-separator">
|
||||
<svg class="wave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4320 200" preserveAspectRatio="none">
|
||||
<path d="M0,200 L0,100 C360,160 720,180 1080,140 C1260,120 1350,100 1440,100 C1530,100 1620,120 1800,140 C2160,180 2520,160 2880,100 C3060,80 3150,60 3240,60 C3330,60 3420,80 3600,100 C3960,140 4320,160 4320,100 L4320,200 L0,200 Z"></path>
|
||||
<svg class="wave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4320 400" preserveAspectRatio="none">
|
||||
<path d="M0,400 L0,120 C360,180 720,200 1080,160 C1260,140 1350,100 1440,100 C1530,100 1620,140 1800,160 C2160,200 2520,180 2880,140 C3060,120 3150,100 3240,100 C3330,100 3420,120 3600,140 C3960,180 4320,200 4320,160 L4320,400 L0,400 Z"></path>
|
||||
</svg>
|
||||
<svg class="wave wave2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4320 200" preserveAspectRatio="none">
|
||||
<path d="M0,200 L0,100 C360,160 720,180 1080,140 C1260,120 1350,100 1440,100 C1530,100 1620,120 1800,140 C2160,180 2520,160 2880,100 C3060,80 3150,60 3240,60 C3330,60 3420,80 3600,100 C3960,140 4320,160 4320,100 L4320,200 L0,200 Z"></path>
|
||||
<svg class="wave wave2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4320 400" preserveAspectRatio="none">
|
||||
<path d="M0,400 L0,120 C360,180 720,200 1080,160 C1260,140 1350,100 1440,100 C1530,100 1620,140 1800,160 C2160,200 2520,180 2880,140 C3060,120 3150,100 3240,100 C3330,100 3420,120 3600,140 C3960,180 4320,200 4320,160 L4320,400 L0,400 Z"></path>
|
||||
</svg>
|
||||
<svg class="wave wave3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4320 200" preserveAspectRatio="none">
|
||||
<path d="M0,200 L0,100 C360,160 720,180 1080,140 C1260,120 1350,100 1440,100 C1530,100 1620,120 1800,140 C2160,180 2520,160 2880,100 C3060,80 3150,60 3240,60 C3330,60 3420,80 3600,100 C3960,140 4320,160 4320,100 L4320,200 L0,200 Z"></path>
|
||||
<svg class="wave wave3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4320 400" preserveAspectRatio="none">
|
||||
<path d="M0,400 L0,120 C360,180 720,200 1080,160 C1260,140 1350,100 1440,100 C1530,100 1620,140 1800,160 C2160,200 2520,180 2880,140 C3060,120 3150,100 3240,100 C3330,100 3420,120 3600,140 C3960,180 4320,200 4320,160 L4320,400 L0,400 Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<section id="methodology" class="methodology-section">
|
||||
<section class="stats-section">
|
||||
<div class="container">
|
||||
<h2 class="section-title animate-slide-up">EXAM TYPES</h2>
|
||||
<div class="exam-types-grid">
|
||||
<div class="exam-type-card animate-slide-up">
|
||||
<div class="card-icon">
|
||||
<i class="fas fa-chart-line"></i>
|
||||
<div class="stats-header">
|
||||
<span class="stats-overline">Our Success</span>
|
||||
<h2 class="stats-title">Our Achievements</h2>
|
||||
</div>
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card animate-slide-up">
|
||||
<div class="stat-icon">
|
||||
<i class="fas fa-trophy"></i>
|
||||
</div>
|
||||
<h3>GMAT Focus Edition & GRE</h3>
|
||||
<p class="exam-description">Prestigious analytical exams for applying for elite business schools and universities for Master's degree, Master of Business Administration, Executive MBA, PhD</p>
|
||||
<div class="stat-content">
|
||||
<div class="stat-number">100%</div>
|
||||
<div class="stat-title">Guarantee</div>
|
||||
<div class="stat-description">Results guaranteed or money back</div>
|
||||
</div>
|
||||
<div class="stat-decoration"></div>
|
||||
</div>
|
||||
|
||||
<div class="exam-type-card animate-slide-up" data-delay="200">
|
||||
<div class="card-icon">
|
||||
<i class="fas fa-language"></i>
|
||||
<div class="stat-card animate-slide-up" data-delay="200">
|
||||
<div class="stat-icon">
|
||||
<i class="fas fa-calendar-alt"></i>
|
||||
</div>
|
||||
<h3>TOEFL iBT & IELTS Indicator</h3>
|
||||
<p class="exam-description">Exams which evaluate your level of English, they must be passed for applying for any international studying programs, these exams are the most popular among international exams</p>
|
||||
<div class="stat-content">
|
||||
<div class="stat-number">6+</div>
|
||||
<div class="stat-title">Years</div>
|
||||
<div class="stat-description">Successfully operating on the market</div>
|
||||
</div>
|
||||
<div class="stat-decoration"></div>
|
||||
</div>
|
||||
|
||||
<div class="exam-type-card animate-slide-up" data-delay="400">
|
||||
<div class="card-icon">
|
||||
<div class="stat-card animate-slide-up" data-delay="400">
|
||||
<div class="stat-icon">
|
||||
<i class="fas fa-graduation-cap"></i>
|
||||
</div>
|
||||
<h3>Admission abroad</h3>
|
||||
<p class="exam-description">TOP World's best universities and business schools guaranteed admission: Harvard, Stanford, Oxford, LBS, Cambridge; Master of Business Administration programs, Executive MBA, Master's degree</p>
|
||||
</div>
|
||||
|
||||
<div class="exam-type-card animate-slide-up" data-delay="600">
|
||||
<div class="card-icon">
|
||||
<i class="fas fa-laptop"></i>
|
||||
<div class="stat-content">
|
||||
<div class="stat-number">1000+</div>
|
||||
<div class="stat-title">Students</div>
|
||||
<div class="stat-description">Successfully admitted abroad</div>
|
||||
</div>
|
||||
<h3>Online exams</h3>
|
||||
<p class="exam-description">DuoLingo, GED, CFA, ACT and many other exams; university entrance exams: University of London, London School of Economics, Bocconi; Big Three employments tests: McKinsey, BCG, Bain</p>
|
||||
<div class="stat-decoration"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="exams" class="exams-section">
|
||||
<section id="methodology" class="methodology-section">
|
||||
<div class="container">
|
||||
<h2 class="section-title animate-slide-up">EXAM PREPARATION</h2>
|
||||
<div class="exam-grid">
|
||||
<div class="exam-card animate-slide-up">
|
||||
<h3>GMAT | GRE</h3>
|
||||
<ul class="exam-features">
|
||||
<li><i class="fas fa-check"></i> Quantitative Reasoning</li>
|
||||
<li><i class="fas fa-check"></i> Verbal Reasoning</li>
|
||||
<li><i class="fas fa-check"></i> Integrated Reasoning</li>
|
||||
<li><i class="fas fa-check"></i> Analytical Writing</li>
|
||||
</ul>
|
||||
<div class="score-range">
|
||||
<span>Target Score: 700-800</span>
|
||||
<div class="exam-types-header">
|
||||
<span class="exam-types-overline">What We Offer</span>
|
||||
<h2 class="exam-types-title">Exam Types</h2>
|
||||
</div>
|
||||
<div class="accordion-container">
|
||||
<div class="accordion-item active" data-exam="gmat">
|
||||
<div class="accordion-header">
|
||||
<div class="accordion-icon">
|
||||
<i class="fas fa-chart-line"></i>
|
||||
</div>
|
||||
<div class="accordion-title">
|
||||
<h3>GMAT Focus Edition & GRE</h3>
|
||||
<span class="accordion-subtitle">Business & Graduate Schools</span>
|
||||
</div>
|
||||
<div class="accordion-toggle">
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<p class="exam-description">Prestigious analytical exams for applying for elite business schools and universities for Master's degree, Master of Business Administration, Executive MBA, PhD</p>
|
||||
<div class="exam-features">
|
||||
<div class="feature-tag">Quantitative Reasoning</div>
|
||||
<div class="feature-tag">Verbal Reasoning</div>
|
||||
<div class="feature-tag">Analytical Writing</div>
|
||||
<div class="feature-tag">Integrated Reasoning</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="exam-card animate-slide-up" data-delay="200">
|
||||
<h3>TOEFL | IELTS</h3>
|
||||
<ul class="exam-features">
|
||||
<li><i class="fas fa-check"></i> Reading Comprehension</li>
|
||||
<li><i class="fas fa-check"></i> Listening Skills</li>
|
||||
<li><i class="fas fa-check"></i> Speaking Practice</li>
|
||||
<li><i class="fas fa-check"></i> Writing Tasks</li>
|
||||
</ul>
|
||||
<div class="score-range">
|
||||
<span>Target Score: IELTS 7.0-9.0 | TOEFL 100-120</span>
|
||||
|
||||
<div class="accordion-item" data-exam="toefl">
|
||||
<div class="accordion-header">
|
||||
<div class="accordion-icon">
|
||||
<i class="fas fa-language"></i>
|
||||
</div>
|
||||
<div class="accordion-title">
|
||||
<h3>TOEFL iBT & IELTS Indicator</h3>
|
||||
<span class="accordion-subtitle">English Proficiency</span>
|
||||
</div>
|
||||
<div class="accordion-toggle">
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<p class="exam-description">Exams which evaluate your level of English, they must be passed for applying for any international studying programs, these exams are the most popular among international exams</p>
|
||||
<div class="exam-features">
|
||||
<div class="feature-tag">Reading Comprehension</div>
|
||||
<div class="feature-tag">Listening Skills</div>
|
||||
<div class="feature-tag">Speaking Practice</div>
|
||||
<div class="feature-tag">Writing Tasks</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="exam-card animate-slide-up" data-delay="400">
|
||||
<h3>SAT | ACT</h3>
|
||||
<ul class="exam-features">
|
||||
<li><i class="fas fa-check"></i> Mathematics</li>
|
||||
<li><i class="fas fa-check"></i> Critical Reading</li>
|
||||
<li><i class="fas fa-check"></i> Writing & Language</li>
|
||||
<li><i class="fas fa-check"></i> Science (ACT)</li>
|
||||
</ul>
|
||||
<div class="score-range">
|
||||
<span>Target Score: SAT 1500+ | ACT 33+</span>
|
||||
|
||||
<div class="accordion-item" data-exam="admission">
|
||||
<div class="accordion-header">
|
||||
<div class="accordion-icon">
|
||||
<i class="fas fa-graduation-cap"></i>
|
||||
</div>
|
||||
<div class="accordion-title">
|
||||
<h3>Admission Abroad</h3>
|
||||
<span class="accordion-subtitle">University Applications</span>
|
||||
</div>
|
||||
<div class="accordion-toggle">
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<p class="exam-description">TOP World's best universities and business schools guaranteed admission: Harvard, Stanford, Oxford, LBS, Cambridge; Master of Business Administration programs, Executive MBA, Master's degree</p>
|
||||
<div class="exam-features">
|
||||
<div class="feature-tag">Harvard University</div>
|
||||
<div class="feature-tag">Stanford University</div>
|
||||
<div class="feature-tag">Oxford University</div>
|
||||
<div class="feature-tag">Cambridge University</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item" data-exam="online">
|
||||
<div class="accordion-header">
|
||||
<div class="accordion-icon">
|
||||
<i class="fas fa-laptop"></i>
|
||||
</div>
|
||||
<div class="accordion-title">
|
||||
<h3>Online Exams</h3>
|
||||
<span class="accordion-subtitle">Digital Assessments</span>
|
||||
</div>
|
||||
<div class="accordion-toggle">
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<p class="exam-description">DuoLingo, GED, CFA, ACT and many other exams; university entrance exams: University of London, London School of Economics, Bocconi; Big Three employments tests: McKinsey, BCG, Bain</p>
|
||||
<div class="exam-features">
|
||||
<div class="feature-tag">DuoLingo English Test</div>
|
||||
<div class="feature-tag">CFA Certification</div>
|
||||
<div class="feature-tag">McKinsey Test</div>
|
||||
<div class="feature-tag">University Entrance</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="about" class="about-section">
|
||||
<div class="container">
|
||||
<div class="about-content">
|
||||
<div class="about-text-container animate-slide-up">
|
||||
<div class="about-header">
|
||||
<span class="overline">About Us</span>
|
||||
<h2 class="about-title">We're <span class="gradient-text">SnapPass</span></h2>
|
||||
</div>
|
||||
|
||||
<div class="about-description">
|
||||
<div class="text-block">
|
||||
<p class="large-text">A team of experts ready to transform the way you prepare for exams.</p>
|
||||
</div>
|
||||
|
||||
<div class="text-block highlight-block">
|
||||
<p>Forget sleepless nights and endless courses — we do things differently.</p>
|
||||
</div>
|
||||
|
||||
<div class="text-block">
|
||||
<p>With us, everything is easy and straightforward: you'll feel confident after the very first step, and within days you'll be holding an official acceptance letter from a top‑tier university in your hands.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="price-block animate-fade-in">
|
||||
<div class="price-label">Average Total Price</div>
|
||||
<div class="price-amount">
|
||||
<span class="currency">$</span>
|
||||
<span class="amount">15,000</span>
|
||||
</div>
|
||||
<div class="price-note">The only company no one can compete with, unique and exclusive</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="background-grid"></div>
|
||||
</section>
|
||||
|
||||
<section id="success" class="success-section">
|
||||
<div class="container">
|
||||
<h2 class="section-title animate-slide-up">SUCCESS STORIES</h2>
|
||||
<div class="success-grid">
|
||||
<div class="success-card animate-slide-up">
|
||||
<div class="success-content">
|
||||
<div class="score-improvement">
|
||||
<span class="old-score">GMAT 600</span>
|
||||
<div class="success-header">
|
||||
<span class="success-overline">Success Stories</span>
|
||||
<h2 class="success-title">Real Results</h2>
|
||||
<p class="success-subtitle">Students who transformed their futures with our help</p>
|
||||
</div>
|
||||
|
||||
<div class="carousel-container">
|
||||
<!-- Navigation arrows -->
|
||||
<button type="button" class="carousel-nav carousel-prev" id="prevBtn">
|
||||
<i class="fas fa-chevron-left"></i>
|
||||
</button>
|
||||
<button type="button" class="carousel-nav carousel-next" id="nextBtn">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</button>
|
||||
|
||||
<!-- Carousel track -->
|
||||
<div class="carousel-track-container">
|
||||
<div class="carousel-track" id="carouselTrack">
|
||||
<!-- Card -->
|
||||
<div class="carousel-slide">
|
||||
<div class="card-flip-container" id="flipContainer">
|
||||
<!-- Front face -->
|
||||
<div class="card-face front">
|
||||
<div class="success-card">
|
||||
<div class="card-header">
|
||||
<div class="student-avatar">
|
||||
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=80&h=80&fit=crop&crop=face" alt="Alex M." />
|
||||
</div>
|
||||
<div class="student-details">
|
||||
<h3 class="student-name">Alex M.</h3>
|
||||
<span class="student-location">New York, USA</span>
|
||||
</div>
|
||||
<div class="university-badge">
|
||||
<span>Harvard</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="score-transformation">
|
||||
<div class="score-before">
|
||||
<span class="score-label">Before</span>
|
||||
<span class="score-value">GMAT 600</span>
|
||||
</div>
|
||||
<div class="score-arrow">
|
||||
<i class="fas fa-arrow-right"></i>
|
||||
<span class="new-score">GMAT 740</span>
|
||||
</div>
|
||||
<div class="score-after">
|
||||
<span class="score-label">After</span>
|
||||
<span class="score-value">GMAT 740</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="testimonial">"The structured approach and continuous support helped me achieve my target score in just 3 months!"</p>
|
||||
<div class="student-info">
|
||||
<span class="student-name">Alex M.</span>
|
||||
<span class="admission">Admitted to Harvard Business School</span>
|
||||
<blockquote class="testimonial">
|
||||
"The structured approach and continuous support helped me achieve my target score in just 3 months!"
|
||||
</blockquote>
|
||||
<div class="achievement">
|
||||
<i class="fas fa-graduation-cap"></i>
|
||||
<span>Admitted to Harvard Business School</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="success-card animate-slide-up" data-delay="200">
|
||||
<div class="success-content">
|
||||
<div class="score-improvement">
|
||||
<span class="old-score">IELTS 6.0</span>
|
||||
<!-- Back face -->
|
||||
<div class="card-face back">
|
||||
<div class="success-card">
|
||||
<div class="card-header">
|
||||
<div class="student-avatar">
|
||||
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=80&h=80&fit=crop&crop=face" alt="Alex M." />
|
||||
</div>
|
||||
<div class="student-details">
|
||||
<h3 class="student-name">Alex M.</h3>
|
||||
<span class="student-location">New York, USA</span>
|
||||
</div>
|
||||
<div class="university-badge">
|
||||
<span>Harvard</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="score-transformation">
|
||||
<div class="score-before">
|
||||
<span class="score-label">Before</span>
|
||||
<span class="score-value">GMAT 600</span>
|
||||
</div>
|
||||
<div class="score-arrow">
|
||||
<i class="fas fa-arrow-right"></i>
|
||||
<span class="new-score">IELTS 8.0</span>
|
||||
</div>
|
||||
<div class="score-after">
|
||||
<span class="score-label">After</span>
|
||||
<span class="score-value">GMAT 740</span>
|
||||
</div>
|
||||
</div>
|
||||
<blockquote class="testimonial">
|
||||
"The structured approach and continuous support helped me achieve my target score in just 3 months!"
|
||||
</blockquote>
|
||||
<div class="achievement">
|
||||
<i class="fas fa-graduation-cap"></i>
|
||||
<span>Admitted to Harvard Business School</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="testimonial">"The intensive speaking practice and writing feedback were invaluable for my IELTS preparation."</p>
|
||||
<div class="student-info">
|
||||
<span class="student-name">Maria K.</span>
|
||||
<span class="admission">Admitted to Oxford University</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dots indicator -->
|
||||
<div class="carousel-indicators">
|
||||
<button type="button" class="carousel-dot active" data-slide="0"></button>
|
||||
<button type="button" class="carousel-dot" data-slide="1"></button>
|
||||
<button type="button" class="carousel-dot" data-slide="2"></button>
|
||||
<button type="button" class="carousel-dot" data-slide="3"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact" class="contact-section">
|
||||
<section id="contact" class="contact-form-section">
|
||||
<div class="container">
|
||||
<h2 class="section-title">START YOUR JOURNEY</h2>
|
||||
<div class="contact-content">
|
||||
<div class="contact-info animate-slide-up">
|
||||
<h3>Why Choose Us?</h3>
|
||||
<ul class="benefits-list">
|
||||
<li><i class="fas fa-check-circle"></i> Personalized Study Plan</li>
|
||||
<li><i class="fas fa-check-circle"></i> Expert Instructors</li>
|
||||
<li><i class="fas fa-check-circle"></i> Guaranteed Results</li>
|
||||
<li><i class="fas fa-check-circle"></i> Flexible Schedule</li>
|
||||
<li><i class="fas fa-check-circle"></i> Online & Offline Options</li>
|
||||
</ul>
|
||||
<div class="contact-buttons">
|
||||
<a href="#" class="btn btn-primary">Join Free Trial Class</a>
|
||||
<div class="social-links">
|
||||
<a href="#" class="btn btn-outline">Telegram</a>
|
||||
<a href="#" class="btn btn-outline">WhatsApp</a>
|
||||
</div>
|
||||
<div class="contact-grid">
|
||||
<!-- Left Side: Text & Socials -->
|
||||
<div class="contact-info">
|
||||
<h2 class="contact-heading">
|
||||
<span>GET IN</span>
|
||||
<span>TOUCH</span>
|
||||
</h2>
|
||||
<p class="contact-subheading">
|
||||
We prefer to communicate via Telegram. Click to get access to a
|
||||
<a href="#" class="highlight-link">private Telegram channel</a>.
|
||||
</p>
|
||||
<div class="contact-methods">
|
||||
<a href="https://t.me/your_telegram" class="contact-method-btn" target="_blank">Telegram</a>
|
||||
<a href="https://wa.me/your_whatsapp" class="contact-method-btn" target="_blank">WhatsApp</a>
|
||||
<a href="https://instagram.com/your_instagram" class="contact-method-btn" target="_blank">Instagram</a>
|
||||
</div>
|
||||
</div>
|
||||
<form class="contact-form animate-slide-up" data-delay="200">
|
||||
<div class="form-group">
|
||||
<input type="text" placeholder="Your Name" required class="animate-input">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="tel" placeholder="+7 (999) 999-99-99" required class="animate-input">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<select required class="animate-input">
|
||||
<option value="">Select Exam</option>
|
||||
<option value="gmat">GMAT</option>
|
||||
<option value="gre">GRE</option>
|
||||
<option value="toefl">TOEFL</option>
|
||||
<option value="ielts">IELTS</option>
|
||||
<option value="sat">SAT</option>
|
||||
<option value="act">ACT</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<select required class="animate-input">
|
||||
<option value="">Current Level</option>
|
||||
<option value="beginner">Beginner</option>
|
||||
<option value="intermediate">Intermediate</option>
|
||||
<option value="advanced">Advanced</option>
|
||||
</select>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary animate-button">Start Preparation</button>
|
||||
</form>
|
||||
|
||||
<!-- Right Side: Form -->
|
||||
<div class="contact-form-container">
|
||||
<form class="contact-form" id="contactForm">
|
||||
<div class="form-group">
|
||||
<label for="firstName">Name</label>
|
||||
<input type="text" id="firstName" name="firstName" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="phone">Phone Number</label>
|
||||
<input type="tel" id="phone" name="phone" required>
|
||||
</div>
|
||||
<button type="submit" class="submit-btn">
|
||||
<span>Send</span>
|
||||
<i class="fas fa-arrow-right"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -289,5 +459,187 @@
|
||||
</footer>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Simple Card Flip Carousel
|
||||
var currentCard = 0;
|
||||
var isFlipping = false;
|
||||
var currentRotation = 0; // Отслеживаем текущий поворот
|
||||
|
||||
// Данные для карточек
|
||||
var cards = [
|
||||
{
|
||||
name: "Alex M.",
|
||||
location: "New York, USA",
|
||||
university: "Harvard",
|
||||
before: "GMAT 600",
|
||||
after: "GMAT 740",
|
||||
testimonial: "The structured approach and continuous support helped me achieve my target score in just 3 months!",
|
||||
achievement: "Admitted to Harvard Business School",
|
||||
avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=80&h=80&fit=crop&crop=face"
|
||||
},
|
||||
{
|
||||
name: "Maria K.",
|
||||
location: "Madrid, Spain",
|
||||
university: "Oxford",
|
||||
before: "IELTS 6.0",
|
||||
after: "IELTS 8.0",
|
||||
testimonial: "The intensive speaking practice and writing feedback were invaluable for my IELTS preparation!",
|
||||
achievement: "Admitted to Oxford University",
|
||||
avatar: "https://images.unsplash.com/photo-1494790108755-2616b612b786?w=80&h=80&fit=crop&crop=face"
|
||||
},
|
||||
{
|
||||
name: "David L.",
|
||||
location: "Toronto, Canada",
|
||||
university: "MIT",
|
||||
before: "GRE 310",
|
||||
after: "GRE 335",
|
||||
testimonial: "Amazing results! The quantitative section strategies completely transformed my approach.",
|
||||
achievement: "Admitted to MIT Graduate Program",
|
||||
avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=80&h=80&fit=crop&crop=face"
|
||||
},
|
||||
{
|
||||
name: "Sarah J.",
|
||||
location: "London, UK",
|
||||
university: "Cambridge",
|
||||
before: "TOEFL 95",
|
||||
after: "TOEFL 115",
|
||||
testimonial: "The speaking sessions boosted my confidence tremendously!",
|
||||
achievement: "Admitted to Cambridge University",
|
||||
avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=80&h=80&fit=crop&crop=face"
|
||||
}
|
||||
];
|
||||
|
||||
function updateCardContent(cardData) {
|
||||
// Обновляем переднюю сторону
|
||||
var frontCard = document.querySelector('.card-face.front .success-card');
|
||||
if (frontCard) {
|
||||
updateSingleCard(frontCard, cardData);
|
||||
}
|
||||
|
||||
// Обновляем заднюю сторону
|
||||
var backCard = document.querySelector('.card-face.back .success-card');
|
||||
if (backCard) {
|
||||
updateSingleCard(backCard, cardData);
|
||||
}
|
||||
}
|
||||
|
||||
function updateSingleCard(card, cardData) {
|
||||
if (!card) return;
|
||||
|
||||
// Обновляем контент
|
||||
var name = card.querySelector('.student-name');
|
||||
var location = card.querySelector('.student-location');
|
||||
var university = card.querySelector('.university-badge span');
|
||||
var beforeScore = card.querySelector('.score-before .score-value');
|
||||
var afterScore = card.querySelector('.score-after .score-value');
|
||||
var testimonial = card.querySelector('.testimonial');
|
||||
var achievement = card.querySelector('.achievement span');
|
||||
var avatar = card.querySelector('.student-avatar img');
|
||||
|
||||
if (name) name.textContent = cardData.name;
|
||||
if (location) location.textContent = cardData.location;
|
||||
if (university) university.textContent = cardData.university;
|
||||
if (beforeScore) beforeScore.textContent = cardData.before;
|
||||
if (afterScore) afterScore.textContent = cardData.after;
|
||||
if (testimonial) testimonial.textContent = '"' + cardData.testimonial + '"';
|
||||
if (achievement) achievement.textContent = cardData.achievement;
|
||||
if (avatar) {
|
||||
avatar.src = cardData.avatar;
|
||||
avatar.alt = cardData.name;
|
||||
}
|
||||
}
|
||||
|
||||
function flipCard() {
|
||||
if (isFlipping) return;
|
||||
isFlipping = true;
|
||||
|
||||
var flipContainer = document.getElementById('flipContainer');
|
||||
if (!flipContainer) {
|
||||
isFlipping = false;
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Flipping to card:', currentCard);
|
||||
|
||||
// Увеличиваем поворот на 180 градусов
|
||||
currentRotation += 180;
|
||||
|
||||
// Сбрасываем поворот после полного оборота (720 градусов = 2 полных оборота)
|
||||
if (currentRotation >= 720) {
|
||||
currentRotation = currentRotation - 720;
|
||||
}
|
||||
|
||||
console.log('Current rotation:', currentRotation);
|
||||
|
||||
// Поворачиваем карточку на текущий угол (вертикально сверху вниз)
|
||||
flipContainer.style.transform = 'rotateX(' + currentRotation + 'deg)';
|
||||
|
||||
// В середине поворота меняем контент
|
||||
setTimeout(function() {
|
||||
updateCardContent(cards[currentCard]);
|
||||
}, 400);
|
||||
|
||||
// Обновляем точки
|
||||
var dots = document.querySelectorAll('.carousel-dot');
|
||||
dots.forEach(function(dot, index) {
|
||||
if (index === currentCard) {
|
||||
dot.classList.add('active');
|
||||
} else {
|
||||
dot.classList.remove('active');
|
||||
}
|
||||
});
|
||||
|
||||
// Разблокируем через полную анимацию
|
||||
setTimeout(function() {
|
||||
isFlipping = false;
|
||||
}, 800);
|
||||
}
|
||||
|
||||
function nextSlide() {
|
||||
if (isFlipping) return;
|
||||
currentCard = (currentCard + 1) % cards.length;
|
||||
flipCard();
|
||||
}
|
||||
|
||||
function prevSlide() {
|
||||
if (isFlipping) return;
|
||||
currentCard = (currentCard - 1 + cards.length) % cards.length;
|
||||
flipCard();
|
||||
}
|
||||
|
||||
function goToSlide(index) {
|
||||
if (isFlipping) return;
|
||||
currentCard = index;
|
||||
flipCard();
|
||||
}
|
||||
|
||||
// Инициализация
|
||||
console.log('Card flip carousel loaded');
|
||||
updateCardContent(cards[0]);
|
||||
|
||||
// Добавляем event listeners
|
||||
var prevBtn = document.getElementById('prevBtn');
|
||||
var nextBtn = document.getElementById('nextBtn');
|
||||
var dots = document.querySelectorAll('.carousel-dot');
|
||||
|
||||
if (prevBtn) {
|
||||
prevBtn.addEventListener('click', prevSlide);
|
||||
}
|
||||
|
||||
if (nextBtn) {
|
||||
nextBtn.addEventListener('click', nextSlide);
|
||||
}
|
||||
|
||||
// Добавляем listeners для точек
|
||||
dots.forEach(function(dot, index) {
|
||||
dot.addEventListener('click', function() {
|
||||
goToSlide(index);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
|
||||
110
src/js/main.js
110
src/js/main.js
@ -14,6 +14,44 @@ document.addEventListener('mouseup', () => {
|
||||
cursor.style.transform = 'translate(-50%, -50%) scale(1)';
|
||||
});
|
||||
|
||||
// Accordion functionality
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const accordionItems = document.querySelectorAll('.accordion-item');
|
||||
|
||||
accordionItems.forEach(item => {
|
||||
const header = item.querySelector('.accordion-header');
|
||||
|
||||
header.addEventListener('click', () => {
|
||||
const isActive = item.classList.contains('active');
|
||||
|
||||
// Close all other accordion items
|
||||
accordionItems.forEach(otherItem => {
|
||||
if (otherItem !== item) {
|
||||
otherItem.classList.remove('active');
|
||||
}
|
||||
});
|
||||
|
||||
// Toggle current item
|
||||
if (isActive) {
|
||||
item.classList.remove('active');
|
||||
} else {
|
||||
item.classList.add('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Header scroll effect
|
||||
const header = document.querySelector('.header');
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
if (window.scrollY > 100) {
|
||||
header.classList.add('scrolled');
|
||||
} else {
|
||||
header.classList.remove('scrolled');
|
||||
}
|
||||
});
|
||||
|
||||
// Intersection Observer for Animations
|
||||
const observerOptions = {
|
||||
threshold: 0.2,
|
||||
@ -31,22 +69,28 @@ const observer = new IntersectionObserver((entries) => {
|
||||
entry.target.style.animationDelay = `${delay}ms`;
|
||||
}
|
||||
|
||||
// Animate numbers if it's a stat number
|
||||
if (entry.target.classList.contains('stat-number')) {
|
||||
// Animate numbers if it's a stat number or trust number
|
||||
if (entry.target.classList.contains('stat-number') || entry.target.classList.contains('trust-number')) {
|
||||
animateNumber(entry.target);
|
||||
}
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// Observe elements
|
||||
document.querySelectorAll('.animate-slide-up, .method-card, .exam-card, .success-card, .stat-number').forEach(el => {
|
||||
// Observe elements - убираем .stat-number из наблюдателя для новых карточек
|
||||
document.querySelectorAll('.animate-slide-up, .method-card, .exam-card, .success-card, .trust-number').forEach(el => {
|
||||
observer.observe(el);
|
||||
});
|
||||
|
||||
// Number Animation
|
||||
function animateNumber(element) {
|
||||
const target = parseInt(element.getAttribute('data-target'));
|
||||
|
||||
// Если нет data-target атрибута, не анимируем
|
||||
if (!target || isNaN(target)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const duration = 2000; // 2 seconds
|
||||
const step = target / (duration / 16); // 60fps
|
||||
let current = 0;
|
||||
@ -135,33 +179,41 @@ phoneInput.addEventListener('input', function(e) {
|
||||
e.target.value = value;
|
||||
});
|
||||
|
||||
// Form Submission Animation
|
||||
const contactForm = document.querySelector('.contact-form');
|
||||
// Contact Form Submission
|
||||
const contactForm = document.querySelector('#contactForm');
|
||||
|
||||
contactForm.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const button = this.querySelector('button[type="submit"]');
|
||||
const originalText = button.textContent;
|
||||
|
||||
// Add loading state
|
||||
button.disabled = true;
|
||||
button.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Sending...';
|
||||
|
||||
// Simulate form submission (replace with actual API call)
|
||||
setTimeout(() => {
|
||||
button.innerHTML = '<i class="fas fa-check"></i> Message Sent!';
|
||||
button.style.backgroundColor = 'var(--success-color)';
|
||||
if (contactForm) {
|
||||
contactForm.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Reset form
|
||||
const button = this.querySelector('.submit-btn');
|
||||
const originalContent = button.innerHTML;
|
||||
|
||||
// Get form data
|
||||
const firstName = this.querySelector('#firstName').value;
|
||||
const lastName = this.querySelector('#lastName').value;
|
||||
const phone = this.querySelector('#phone').value;
|
||||
|
||||
// Add loading state
|
||||
button.disabled = true;
|
||||
button.innerHTML = '<i class="fas fa-spinner fa-spin"></i> <span>Sending...</span>';
|
||||
|
||||
// Simulate form submission (replace with actual API call)
|
||||
setTimeout(() => {
|
||||
this.reset();
|
||||
button.disabled = false;
|
||||
button.textContent = originalText;
|
||||
button.style.backgroundColor = '';
|
||||
button.innerHTML = '<i class="fas fa-check"></i> <span>Message Sent!</span>';
|
||||
button.style.background = 'linear-gradient(135deg, #10b981, #059669)';
|
||||
|
||||
// Reset form after delay
|
||||
setTimeout(() => {
|
||||
this.reset();
|
||||
button.disabled = false;
|
||||
button.innerHTML = originalContent;
|
||||
button.style.background = 'linear-gradient(135deg, var(--primary-color), #4f46e5)';
|
||||
}, 3000);
|
||||
|
||||
}, 2000);
|
||||
}, 1500);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Active Navigation Link on Scroll
|
||||
const sections = document.querySelectorAll('section');
|
||||
@ -260,4 +312,6 @@ document.querySelectorAll('.service-card').forEach(card => {
|
||||
const icon = card.querySelector('.card-icon i');
|
||||
icon.style.transform = 'scale(1) rotate(0deg)';
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Carousel functionality moved to inline script in HTML
|
||||
3
zametki.txt
Normal file
3
zametki.txt
Normal file
@ -0,0 +1,3 @@
|
||||
нужно сделать meta ссылки для сайта
|
||||
|
||||
и нужно оптимизировать seo
|
||||
Loading…
Reference in New Issue
Block a user