site prototype
This commit is contained in:
akairatu
commit
8569ed720a
20
.gitignore
vendored
Normal file
20
.gitignore
vendored
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
# Dependencies
|
||||||
|
node_modules/
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
|
||||||
|
# Environment variables
|
||||||
|
.env
|
||||||
|
.env.local
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea/
|
||||||
|
.vscode/
|
||||||
|
*.swp
|
||||||
|
*.swo
|
||||||
|
.DS_Store
|
||||||
|
Thumbs.db
|
||||||
65
README.md
Normal file
65
README.md
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
# Presentation Website
|
||||||
|
|
||||||
|
A modern, responsive presentation website template with smooth animations and mobile-friendly design.
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- Responsive design
|
||||||
|
- Mobile-friendly navigation
|
||||||
|
- Smooth scrolling
|
||||||
|
- Animated service cards
|
||||||
|
- Contact form
|
||||||
|
- Modern UI components
|
||||||
|
|
||||||
|
## Prerequisites
|
||||||
|
|
||||||
|
- Node.js (Download and install from [nodejs.org](https://nodejs.org/))
|
||||||
|
|
||||||
|
## Getting Started
|
||||||
|
|
||||||
|
1. Clone this repository:
|
||||||
|
```bash
|
||||||
|
git clone <repository-url>
|
||||||
|
cd hantalanding
|
||||||
|
```
|
||||||
|
|
||||||
|
2. Install dependencies:
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
3. Start the development server:
|
||||||
|
```bash
|
||||||
|
npm start
|
||||||
|
```
|
||||||
|
|
||||||
|
The website will be available at `http://localhost:3000`
|
||||||
|
|
||||||
|
## Project Structure
|
||||||
|
|
||||||
|
```
|
||||||
|
src/
|
||||||
|
├── assets/ # Images and other static files
|
||||||
|
├── css/ # Stylesheets
|
||||||
|
├── js/ # JavaScript files
|
||||||
|
└── index.html # Main HTML file
|
||||||
|
```
|
||||||
|
|
||||||
|
## Customization
|
||||||
|
|
||||||
|
1. Replace the logo text in `index.html`
|
||||||
|
2. Update the hero section content
|
||||||
|
3. Modify the About section with your content
|
||||||
|
4. Customize service cards
|
||||||
|
5. Configure the contact form
|
||||||
|
|
||||||
|
## Development
|
||||||
|
|
||||||
|
The project uses live-server for development, which provides:
|
||||||
|
- Auto-reload on file changes
|
||||||
|
- Static file serving
|
||||||
|
- Cross-browser compatibility
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
This project is licensed under the ISC License.
|
||||||
2399
package-lock.json
generated
Normal file
2399
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
16
package.json
Normal file
16
package.json
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
{
|
||||||
|
"name": "hantalanding",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "Modern presentation website",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"start": "live-server src --port=3000",
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"keywords": ["landing", "presentation", "website"],
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"devDependencies": {
|
||||||
|
"live-server": "^1.2.2"
|
||||||
|
}
|
||||||
|
}
|
||||||
15
src/assets/globe-icon.svg
Normal file
15
src/assets/globe-icon.svg
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#4F46E5"/>
|
||||||
|
<stop offset="100%" style="stop-color:#818CF8"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<circle cx="100" cy="100" r="95" stroke="url(#gradient)" stroke-width="3" opacity="0.8"/>
|
||||||
|
<ellipse cx="100" cy="100" rx="95" ry="30" stroke="url(#gradient)" stroke-width="3" opacity="0.6"/>
|
||||||
|
<line x1="5" y1="100" x2="195" y2="100" stroke="url(#gradient)" stroke-width="3" opacity="0.4"/>
|
||||||
|
<line x1="100" y1="5" x2="100" y2="195" stroke="url(#gradient)" stroke-width="3" opacity="0.4"/>
|
||||||
|
<path d="M100 5C120 35 130 65 130 100C130 135 120 165 100 195" stroke="url(#gradient)" stroke-width="3" opacity="0.6"/>
|
||||||
|
<path d="M100 5C80 35 70 65 70 100C70 135 80 165 100 195" stroke="url(#gradient)" stroke-width="3" opacity="0.6"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.0 KiB |
35
src/assets/student-success.svg
Normal file
35
src/assets/student-success.svg
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="600" height="400" viewBox="0 0 600 400" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#4F46E5;stop-opacity:0.2"/>
|
||||||
|
<stop offset="100%" style="stop-color:#818CF8;stop-opacity:0.2"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#FB7185;stop-opacity:0.2"/>
|
||||||
|
<stop offset="100%" style="stop-color:#FFB1C1;stop-opacity:0.2"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- Background Shapes -->
|
||||||
|
<circle cx="300" cy="200" r="150" fill="url(#grad1)"/>
|
||||||
|
<circle cx="400" cy="300" r="100" fill="url(#grad2)"/>
|
||||||
|
|
||||||
|
<!-- Graduation Cap -->
|
||||||
|
<path d="M250 150L350 150L300 100L250 150Z" fill="#4F46E5"/>
|
||||||
|
<rect x="290" y="150" width="20" height="60" fill="#4F46E5"/>
|
||||||
|
<path d="M270 160L330 160L300 180L270 160Z" fill="#818CF8"/>
|
||||||
|
|
||||||
|
<!-- Books -->
|
||||||
|
<rect x="200" y="250" width="200" height="20" fill="#FB7185" rx="5"/>
|
||||||
|
<rect x="220" y="230" width="160" height="20" fill="#4F46E5" rx="5"/>
|
||||||
|
<rect x="240" y="210" width="120" height="20" fill="#818CF8" rx="5"/>
|
||||||
|
|
||||||
|
<!-- Stars -->
|
||||||
|
<path d="M150 100L160 120L180 110L160 100L150 80L140 100L120 110L140 120L150 100Z" fill="#FB7185"/>
|
||||||
|
<path d="M450 150L460 170L480 160L460 150L450 130L440 150L420 160L440 170L450 150Z" fill="#818CF8"/>
|
||||||
|
<path d="M400 50L410 70L430 60L410 50L400 30L390 50L370 60L390 70L400 50Z" fill="#4F46E5"/>
|
||||||
|
|
||||||
|
<!-- Text -->
|
||||||
|
<text x="300" y="350" font-family="Arial, sans-serif" font-size="24" fill="#4F46E5" text-anchor="middle">Success in Education</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.7 KiB |
5
src/assets/universities/cambridge.svg
Normal file
5
src/assets/universities/cambridge.svg
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="200" height="80" viewBox="0 0 200 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<text x="50%" y="50%" font-family="Georgia, serif" font-size="24" fill="#4F46E5" text-anchor="middle" dominant-baseline="middle">CAMBRIDGE</text>
|
||||||
|
<text x="50%" y="70%" font-family="Georgia, serif" font-size="16" fill="#6B7280" text-anchor="middle" dominant-baseline="middle">UNIVERSITY</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 445 B |
5
src/assets/universities/harvard.svg
Normal file
5
src/assets/universities/harvard.svg
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="200" height="80" viewBox="0 0 200 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<text x="50%" y="50%" font-family="Georgia, serif" font-size="24" fill="#4F46E5" text-anchor="middle" dominant-baseline="middle">HARVARD</text>
|
||||||
|
<text x="50%" y="70%" font-family="Georgia, serif" font-size="16" fill="#6B7280" text-anchor="middle" dominant-baseline="middle">UNIVERSITY</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 443 B |
5
src/assets/universities/mit.svg
Normal file
5
src/assets/universities/mit.svg
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="200" height="80" viewBox="0 0 200 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<text x="50%" y="50%" font-family="Georgia, serif" font-size="24" fill="#4F46E5" text-anchor="middle" dominant-baseline="middle">MIT</text>
|
||||||
|
<text x="50%" y="70%" font-family="Georgia, serif" font-size="16" fill="#6B7280" text-anchor="middle" dominant-baseline="middle">Massachusetts Institute of Technology</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 466 B |
5
src/assets/universities/oxford.svg
Normal file
5
src/assets/universities/oxford.svg
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="200" height="80" viewBox="0 0 200 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<text x="50%" y="50%" font-family="Georgia, serif" font-size="24" fill="#4F46E5" text-anchor="middle" dominant-baseline="middle">OXFORD</text>
|
||||||
|
<text x="50%" y="70%" font-family="Georgia, serif" font-size="16" fill="#6B7280" text-anchor="middle" dominant-baseline="middle">UNIVERSITY</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 442 B |
766
src/css/style.css
Normal file
766
src/css/style.css
Normal file
@ -0,0 +1,766 @@
|
|||||||
|
:root {
|
||||||
|
--primary-color: #4F46E5;
|
||||||
|
--primary-dark: #3730A3;
|
||||||
|
--primary-light: #818CF8;
|
||||||
|
--secondary-color: #F4F5FF;
|
||||||
|
--accent-color: #FB7185;
|
||||||
|
--success-color: #10B981;
|
||||||
|
--text-color: #1F2937;
|
||||||
|
--text-light: #6B7280;
|
||||||
|
--white: #ffffff;
|
||||||
|
--gradient-1: linear-gradient(135deg, #4F46E5 0%, #818CF8 100%);
|
||||||
|
--gradient-2: linear-gradient(135deg, #FB7185 0%, #FFB1C1 100%);
|
||||||
|
--gradient-success: linear-gradient(135deg, #10B981 0%, #34D399 100%);
|
||||||
|
--transition: all 0.3s ease;
|
||||||
|
--shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||||
|
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Base Animations */
|
||||||
|
@keyframes slideUp {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(30px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; }
|
||||||
|
to { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0% { transform: scale(1); }
|
||||||
|
50% { transform: scale(1.05); }
|
||||||
|
100% { transform: scale(1); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% { transform: translateY(0); }
|
||||||
|
50% { transform: translateY(-10px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes shimmer {
|
||||||
|
0% { background-position: -1000px 0; }
|
||||||
|
100% { background-position: 1000px 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animation Classes */
|
||||||
|
.animate-slide-up {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(30px);
|
||||||
|
animation: slideUp 0.6s ease forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-fade-in {
|
||||||
|
opacity: 0;
|
||||||
|
animation: fadeIn 0.6s ease forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-pulse {
|
||||||
|
animation: pulse 2s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-delay] {
|
||||||
|
animation-delay: var(--delay);
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: var(--text-color);
|
||||||
|
background-color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header Styles */
|
||||||
|
.header {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
background: rgba(255, 255, 255, 0.95);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
-webkit-backdrop-filter: blur(10px);
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo span {
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links {
|
||||||
|
display: flex;
|
||||||
|
list-style: none;
|
||||||
|
gap: 2rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--text-color);
|
||||||
|
font-weight: 500;
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links a:hover {
|
||||||
|
color: var(--primary-color);
|
||||||
|
background: var(--secondary-color);
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lang-switch {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lang-switch a {
|
||||||
|
padding: 0.2rem 0.5rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lang-switch a.active {
|
||||||
|
background: var(--gradient-1);
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-icons {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-icons a {
|
||||||
|
color: var(--primary-color);
|
||||||
|
font-size: 1.5rem;
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-icons a:hover {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-toggle {
|
||||||
|
display: none;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hero Section */
|
||||||
|
.hero-section {
|
||||||
|
padding: 120px 0 60px;
|
||||||
|
background: var(--gradient-1);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-title {
|
||||||
|
font-size: 4rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
background: var(--white);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
color: transparent;
|
||||||
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-description {
|
||||||
|
color: var(--secondary-color);
|
||||||
|
font-size: 1.2rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
border-radius: 50px;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: var(--transition);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: var(--accent-color);
|
||||||
|
color: var(--white);
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background: transparent;
|
||||||
|
border: 2px solid var(--white);
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:hover {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
box-shadow: var(--shadow-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-image {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floating {
|
||||||
|
animation: float 6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* About Section */
|
||||||
|
.about-section {
|
||||||
|
padding: 80px 0;
|
||||||
|
background: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight-text {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: var(--primary-color);
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-content {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 4rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Exams Section */
|
||||||
|
.exams-section {
|
||||||
|
padding: 80px 0;
|
||||||
|
background: var(--secondary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.exam-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.exam-card {
|
||||||
|
background: var(--white);
|
||||||
|
padding: 2rem;
|
||||||
|
border-radius: 15px;
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
transition: var(--transition);
|
||||||
|
border: 1px solid rgba(79, 70, 229, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.exam-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: var(--shadow-lg);
|
||||||
|
border-color: var(--primary-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.exam-card h3 {
|
||||||
|
color: var(--primary-color);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.exam-card ul {
|
||||||
|
list-style-position: inside;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Advantages Section */
|
||||||
|
.advantages-section {
|
||||||
|
padding: 80px 0;
|
||||||
|
background: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.advantages-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advantage-card {
|
||||||
|
text-align: center;
|
||||||
|
padding: 2rem;
|
||||||
|
border-radius: 15px;
|
||||||
|
background: var(--white);
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.advantage-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: var(--shadow-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.advantage-card i {
|
||||||
|
font-size: 3rem;
|
||||||
|
background: var(--gradient-1);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
color: transparent;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Universities Section */
|
||||||
|
.universities-section {
|
||||||
|
padding: 80px 0;
|
||||||
|
background: var(--secondary-color);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.universities-section::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -50%;
|
||||||
|
left: -50%;
|
||||||
|
width: 200%;
|
||||||
|
height: 200%;
|
||||||
|
background: var(--gradient-1);
|
||||||
|
opacity: 0.05;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-subtitle {
|
||||||
|
text-align: center;
|
||||||
|
color: var(--text-light);
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.university-logos {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.university-logos img {
|
||||||
|
max-width: 180px;
|
||||||
|
height: auto;
|
||||||
|
transition: var(--transition);
|
||||||
|
filter: grayscale(1) opacity(0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.university-logos img:hover {
|
||||||
|
filter: grayscale(0) opacity(1);
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Contact Section */
|
||||||
|
.contact-section {
|
||||||
|
padding: 80px 0;
|
||||||
|
background: var(--gradient-1);
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-content {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 4rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-text {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-buttons {
|
||||||
|
display: grid;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline {
|
||||||
|
background: transparent;
|
||||||
|
border: 2px solid var(--white);
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-form {
|
||||||
|
display: grid;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-form input,
|
||||||
|
.contact-form button {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
color: var(--white);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-form input::placeholder {
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-form button:hover {
|
||||||
|
background: var(--accent-color);
|
||||||
|
border-color: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 2rem;
|
||||||
|
margin: 2rem 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-item {
|
||||||
|
padding: 1rem;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 10px;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-number {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--white);
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.methodology-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
gap: 2rem;
|
||||||
|
margin-top: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.method-card {
|
||||||
|
background: var(--white);
|
||||||
|
padding: 2rem;
|
||||||
|
border-radius: 15px;
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
transition: var(--transition);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.method-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: var(--shadow-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.method-icon {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
margin: 0 auto 1.5rem;
|
||||||
|
background: var(--gradient-1);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.method-icon i {
|
||||||
|
font-size: 2rem;
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.exam-features {
|
||||||
|
list-style: none;
|
||||||
|
margin: 1.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.exam-features li {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.exam-features i {
|
||||||
|
color: var(--success-color);
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score-range {
|
||||||
|
background: var(--gradient-success);
|
||||||
|
color: var(--white);
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border-radius: 25px;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.success-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
|
gap: 2rem;
|
||||||
|
margin-top: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.success-card {
|
||||||
|
background: var(--white);
|
||||||
|
border-radius: 15px;
|
||||||
|
padding: 2rem;
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.score-improvement {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.old-score {
|
||||||
|
color: var(--text-light);
|
||||||
|
text-decoration: line-through;
|
||||||
|
}
|
||||||
|
|
||||||
|
.new-score {
|
||||||
|
color: var(--success-color);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.testimonial {
|
||||||
|
font-style: italic;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.student-info {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.student-name {
|
||||||
|
font-weight: 600;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admission {
|
||||||
|
color: var(--primary-color);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.benefits-list {
|
||||||
|
list-style: none;
|
||||||
|
margin: 2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.benefits-list li {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.benefits-list i {
|
||||||
|
margin-right: 1rem;
|
||||||
|
color: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-input {
|
||||||
|
transform-origin: left;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-input:focus {
|
||||||
|
transform: scale(1.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-button {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-button::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 200%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(
|
||||||
|
to right,
|
||||||
|
rgba(255,255,255,0) 0%,
|
||||||
|
rgba(255,255,255,0.3) 50%,
|
||||||
|
rgba(255,255,255,0) 100%
|
||||||
|
);
|
||||||
|
transform: translateX(-100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-button:hover::after {
|
||||||
|
transform: translateX(100%);
|
||||||
|
transition: transform 0.6s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
.footer {
|
||||||
|
background: var(--text-color);
|
||||||
|
color: var(--white);
|
||||||
|
padding: 4rem 0 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-content {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 2fr;
|
||||||
|
gap: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-links {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-group h4 {
|
||||||
|
color: var(--primary-light);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-group a {
|
||||||
|
color: var(--text-light);
|
||||||
|
text-decoration: none;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-group a:hover {
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-bottom {
|
||||||
|
margin-top: 3rem;
|
||||||
|
padding-top: 2rem;
|
||||||
|
border-top: 1px solid rgba(255,255,255,0.1);
|
||||||
|
text-align: center;
|
||||||
|
color: var(--text-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Design */
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
.main-title {
|
||||||
|
font-size: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-content,
|
||||||
|
.contact-content {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-container {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-content {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.nav-toggle {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: var(--white);
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 1rem 0;
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links.active {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-icons {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-title {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-buttons {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.university-logos {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-container {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-links {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.section-title {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight-text {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-buttons {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-content {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-links {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
277
src/index.html
Normal file
277
src/index.html
Normal file
@ -0,0 +1,277 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<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>
|
||||||
|
<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">ExamPrep<span>Pro</span></div>
|
||||||
|
<div class="nav-toggle" id="navToggle">
|
||||||
|
<i class="fas fa-bars"></i>
|
||||||
|
</div>
|
||||||
|
<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="#contact">Contact</a></li>
|
||||||
|
<li class="lang-switch">
|
||||||
|
<a href="#" class="active">EN</a>
|
||||||
|
<a href="#">RU</a>
|
||||||
|
</li>
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section id="hero" class="hero-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="hero-content animate-slide-up">
|
||||||
|
<h1 class="main-title">YOUR JOURNEY TO<br>ACADEMIC EXCELLENCE</h1>
|
||||||
|
<p class="hero-description">Expert preparation for international exams with proven methodologies and personalized approach. Join thousands of successful students worldwide.</p>
|
||||||
|
<div class="stats-container animate-fade-in">
|
||||||
|
<div class="stat-item">
|
||||||
|
<span class="stat-number" data-target="95">0</span>%
|
||||||
|
<p>Success Rate</p>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<span class="stat-number" data-target="1000">0</span>+
|
||||||
|
<p>Students</p>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<span class="stat-number" data-target="15">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>
|
||||||
|
|
||||||
|
<section id="methodology" class="methodology-section">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-title animate-slide-up">OUR METHODOLOGY</h2>
|
||||||
|
<div class="methodology-grid">
|
||||||
|
<div class="method-card animate-slide-up">
|
||||||
|
<div class="method-icon">
|
||||||
|
<i class="fas fa-brain"></i>
|
||||||
|
</div>
|
||||||
|
<h3>Diagnostic Assessment</h3>
|
||||||
|
<p>We start with a comprehensive evaluation of your current knowledge and skills to create a personalized study plan.</p>
|
||||||
|
</div>
|
||||||
|
<div class="method-card animate-slide-up" data-delay="200">
|
||||||
|
<div class="method-icon">
|
||||||
|
<i class="fas fa-route"></i>
|
||||||
|
</div>
|
||||||
|
<h3>Strategic Planning</h3>
|
||||||
|
<p>Custom study schedule based on your target exam date, current level, and available study time.</p>
|
||||||
|
</div>
|
||||||
|
<div class="method-card animate-slide-up" data-delay="400">
|
||||||
|
<div class="method-icon">
|
||||||
|
<i class="fas fa-graduation-cap"></i>
|
||||||
|
</div>
|
||||||
|
<h3>Intensive Practice</h3>
|
||||||
|
<p>Regular mock exams and targeted practice sessions with detailed feedback and improvement strategies.</p>
|
||||||
|
</div>
|
||||||
|
<div class="method-card animate-slide-up" data-delay="600">
|
||||||
|
<div class="method-icon">
|
||||||
|
<i class="fas fa-chart-line"></i>
|
||||||
|
</div>
|
||||||
|
<h3>Progress Tracking</h3>
|
||||||
|
<p>Continuous monitoring of your progress with data-driven adjustments to your study plan.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="exams" class="exams-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>
|
||||||
|
</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>
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
<i class="fas fa-arrow-right"></i>
|
||||||
|
<span class="new-score">GMAT 740</span>
|
||||||
|
</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>
|
||||||
|
</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>
|
||||||
|
<i class="fas fa-arrow-right"></i>
|
||||||
|
<span class="new-score">IELTS 8.0</span>
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="contact" class="contact-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>
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="container">
|
||||||
|
<div class="footer-content">
|
||||||
|
<div class="footer-info">
|
||||||
|
<div class="logo">ExamPrep<span>Pro</span></div>
|
||||||
|
<p>Your trusted partner in exam preparation since 2008</p>
|
||||||
|
</div>
|
||||||
|
<div class="footer-links">
|
||||||
|
<div class="link-group">
|
||||||
|
<h4>Exams</h4>
|
||||||
|
<a href="#">GMAT</a>
|
||||||
|
<a href="#">GRE</a>
|
||||||
|
<a href="#">TOEFL</a>
|
||||||
|
<a href="#">IELTS</a>
|
||||||
|
</div>
|
||||||
|
<div class="link-group">
|
||||||
|
<h4>Resources</h4>
|
||||||
|
<a href="#">Study Materials</a>
|
||||||
|
<a href="#">Practice Tests</a>
|
||||||
|
<a href="#">Success Stories</a>
|
||||||
|
<a href="#">Blog</a>
|
||||||
|
</div>
|
||||||
|
<div class="link-group">
|
||||||
|
<h4>Company</h4>
|
||||||
|
<a href="#">About Us</a>
|
||||||
|
<a href="#">Methodology</a>
|
||||||
|
<a href="#">Contact</a>
|
||||||
|
<a href="#">Careers</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer-bottom">
|
||||||
|
<p>© 2024 ExamPrep Pro. All rights reserved.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
263
src/js/main.js
Normal file
263
src/js/main.js
Normal file
@ -0,0 +1,263 @@
|
|||||||
|
// Custom Cursor
|
||||||
|
const cursor = document.querySelector('.cursor');
|
||||||
|
|
||||||
|
document.addEventListener('mousemove', (e) => {
|
||||||
|
cursor.style.left = e.clientX + 'px';
|
||||||
|
cursor.style.top = e.clientY + 'px';
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener('mousedown', () => {
|
||||||
|
cursor.style.transform = 'translate(-50%, -50%) scale(0.8)';
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener('mouseup', () => {
|
||||||
|
cursor.style.transform = 'translate(-50%, -50%) scale(1)';
|
||||||
|
});
|
||||||
|
|
||||||
|
// Intersection Observer for Animations
|
||||||
|
const observerOptions = {
|
||||||
|
threshold: 0.2,
|
||||||
|
rootMargin: '0px 0px -50px 0px'
|
||||||
|
};
|
||||||
|
|
||||||
|
const observer = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
entry.target.classList.add('animate-slide-up');
|
||||||
|
|
||||||
|
// Handle elements with delay
|
||||||
|
const delay = entry.target.getAttribute('data-delay');
|
||||||
|
if (delay) {
|
||||||
|
entry.target.style.animationDelay = `${delay}ms`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Animate numbers if it's a stat number
|
||||||
|
if (entry.target.classList.contains('stat-number')) {
|
||||||
|
animateNumber(entry.target);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, observerOptions);
|
||||||
|
|
||||||
|
// Observe elements
|
||||||
|
document.querySelectorAll('.animate-slide-up, .method-card, .exam-card, .success-card, .stat-number').forEach(el => {
|
||||||
|
observer.observe(el);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Number Animation
|
||||||
|
function animateNumber(element) {
|
||||||
|
const target = parseInt(element.getAttribute('data-target'));
|
||||||
|
const duration = 2000; // 2 seconds
|
||||||
|
const step = target / (duration / 16); // 60fps
|
||||||
|
let current = 0;
|
||||||
|
|
||||||
|
const updateNumber = () => {
|
||||||
|
current += step;
|
||||||
|
if (current < target) {
|
||||||
|
element.textContent = Math.round(current);
|
||||||
|
requestAnimationFrame(updateNumber);
|
||||||
|
} else {
|
||||||
|
element.textContent = target;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
updateNumber();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mobile Navigation
|
||||||
|
const navToggle = document.getElementById('navToggle');
|
||||||
|
const navLinks = document.querySelector('.nav-links');
|
||||||
|
|
||||||
|
navToggle.addEventListener('click', () => {
|
||||||
|
navLinks.classList.toggle('active');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Close mobile menu when clicking outside
|
||||||
|
document.addEventListener('click', (e) => {
|
||||||
|
if (!e.target.closest('.nav-container')) {
|
||||||
|
navLinks.classList.remove('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Smooth Scrolling
|
||||||
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||||
|
anchor.addEventListener('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
navLinks.classList.remove('active');
|
||||||
|
|
||||||
|
const target = document.querySelector(this.getAttribute('href'));
|
||||||
|
if (target) {
|
||||||
|
const headerOffset = 80;
|
||||||
|
const elementPosition = target.getBoundingClientRect().top;
|
||||||
|
const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
|
||||||
|
|
||||||
|
window.scrollTo({
|
||||||
|
top: offsetPosition,
|
||||||
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Form Animations
|
||||||
|
const formInputs = document.querySelectorAll('.animate-input');
|
||||||
|
|
||||||
|
formInputs.forEach(input => {
|
||||||
|
input.addEventListener('focus', () => {
|
||||||
|
input.parentElement.classList.add('focused');
|
||||||
|
});
|
||||||
|
|
||||||
|
input.addEventListener('blur', () => {
|
||||||
|
if (!input.value) {
|
||||||
|
input.parentElement.classList.remove('focused');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Phone number formatting
|
||||||
|
const phoneInput = document.querySelector('input[type="tel"]');
|
||||||
|
|
||||||
|
phoneInput.addEventListener('input', function(e) {
|
||||||
|
let value = e.target.value.replace(/\D/g, '');
|
||||||
|
if (value.length > 0) {
|
||||||
|
if (value.length <= 1) {
|
||||||
|
value = '+7 (' + value;
|
||||||
|
} else if (value.length <= 4) {
|
||||||
|
value = '+7 (' + value.substring(1);
|
||||||
|
} else if (value.length <= 7) {
|
||||||
|
value = '+7 (' + value.substring(1, 4) + ') ' + value.substring(4);
|
||||||
|
} else if (value.length <= 9) {
|
||||||
|
value = '+7 (' + value.substring(1, 4) + ') ' + value.substring(4, 7) + '-' + value.substring(7);
|
||||||
|
} else {
|
||||||
|
value = '+7 (' + value.substring(1, 4) + ') ' + value.substring(4, 7) + '-' + value.substring(7, 9) + '-' + value.substring(9, 11);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
e.target.value = value;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Form Submission Animation
|
||||||
|
const contactForm = document.querySelector('.contact-form');
|
||||||
|
|
||||||
|
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)';
|
||||||
|
|
||||||
|
// Reset form
|
||||||
|
setTimeout(() => {
|
||||||
|
this.reset();
|
||||||
|
button.disabled = false;
|
||||||
|
button.textContent = originalText;
|
||||||
|
button.style.backgroundColor = '';
|
||||||
|
}, 2000);
|
||||||
|
}, 1500);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Active Navigation Link on Scroll
|
||||||
|
const sections = document.querySelectorAll('section');
|
||||||
|
const navItems = document.querySelectorAll('.nav-links a');
|
||||||
|
|
||||||
|
function setActiveNavItem() {
|
||||||
|
let current = '';
|
||||||
|
|
||||||
|
sections.forEach(section => {
|
||||||
|
const sectionTop = section.offsetTop;
|
||||||
|
const sectionHeight = section.clientHeight;
|
||||||
|
|
||||||
|
if (pageYOffset >= sectionTop - 200) {
|
||||||
|
current = section.getAttribute('id');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
navItems.forEach(item => {
|
||||||
|
item.classList.remove('active');
|
||||||
|
if (item.getAttribute('href') === `#${current}`) {
|
||||||
|
item.classList.add('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('scroll', setActiveNavItem);
|
||||||
|
window.addEventListener('load', setActiveNavItem);
|
||||||
|
|
||||||
|
// Hover Animations for Cards
|
||||||
|
document.querySelectorAll('.method-card, .exam-card, .success-card').forEach(card => {
|
||||||
|
card.addEventListener('mouseenter', () => {
|
||||||
|
card.style.transform = 'translateY(-10px)';
|
||||||
|
card.style.boxShadow = 'var(--shadow-lg)';
|
||||||
|
});
|
||||||
|
|
||||||
|
card.addEventListener('mouseleave', () => {
|
||||||
|
card.style.transform = 'translateY(0)';
|
||||||
|
card.style.boxShadow = 'var(--shadow)';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add animation classes
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
// Animate title on load
|
||||||
|
const mainTitle = document.querySelector('.main-title');
|
||||||
|
if (mainTitle) {
|
||||||
|
mainTitle.classList.add('animate-in');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Animate university logos
|
||||||
|
const logos = document.querySelectorAll('.university-logos img');
|
||||||
|
logos.forEach((logo, index) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
logo.style.opacity = '1';
|
||||||
|
}, index * 200);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Language switcher
|
||||||
|
const langSwitcher = document.querySelector('.lang-switch');
|
||||||
|
if (langSwitcher) {
|
||||||
|
langSwitcher.addEventListener('click', (e) => {
|
||||||
|
if (e.target.tagName === 'A') {
|
||||||
|
e.preventDefault();
|
||||||
|
langSwitcher.querySelectorAll('a').forEach(link => {
|
||||||
|
link.classList.remove('active');
|
||||||
|
});
|
||||||
|
e.target.classList.add('active');
|
||||||
|
// Here you would typically handle language change
|
||||||
|
console.log('Language changed to:', e.target.textContent);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Parallax Effect for Hero Section
|
||||||
|
const heroContent = document.querySelector('.hero-content');
|
||||||
|
const shapes = document.querySelectorAll('.shape');
|
||||||
|
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
const scrolled = window.pageYOffset;
|
||||||
|
|
||||||
|
heroContent.style.transform = `translateY(${scrolled * 0.3}px)`;
|
||||||
|
shapes.forEach(shape => {
|
||||||
|
shape.style.transform = `translateY(${scrolled * 0.4}px)`;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Service Card Hover Effect
|
||||||
|
document.querySelectorAll('.service-card').forEach(card => {
|
||||||
|
card.addEventListener('mouseenter', (e) => {
|
||||||
|
const icon = card.querySelector('.card-icon i');
|
||||||
|
icon.style.transform = 'scale(1.2) rotate(10deg)';
|
||||||
|
});
|
||||||
|
|
||||||
|
card.addEventListener('mouseleave', (e) => {
|
||||||
|
const icon = card.querySelector('.card-icon i');
|
||||||
|
icon.style.transform = 'scale(1) rotate(0deg)';
|
||||||
|
});
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue
Block a user