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