Scribd
Upload
17 views16 pages

Script

The document is an HTML template for a website titled 'Dream Up', aimed at providing guidance for students in academic and career success. It includes sections for navigation, a hero section with a motivational message, and a services section detailing various offerings such as academic guidance, career counseling, and skill development. The design incorporates modern CSS styles and animations to enhance user experience.

Uploaded by

manvendraaa20
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
17 views16 pages

Script

The document is an HTML template for a website titled 'Dream Up', aimed at providing guidance for students in academic and career success. It includes sections for navigation, a hero section with a motivational message, and a services section detailing various offerings such as academic guidance, career counseling, and skill development. The design incorporates modern CSS styles and animations to enhance user experience.

Uploaded by

manvendraaa20
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 16

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dream Up - Guidance for Students</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?
family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
--primary: #6c63ff;
--secondary: #4d44db;
--accent: #ff6584;
--dark: #2d3748;
--light: #f7fafc;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}

body {
background-color: var(--light);
color: var(--dark);
overflow-x: hidden;
perspective: 1000px;
}

.navbar {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
transform-style: preserve-3d;
}

.hero {
height: 90vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}

.hero-content {
transform-style: preserve-3d;
animation: float 6s ease-in-out infinite;
}

@keyframes float {
0%, 100% { transform: translateY(0) rotateY(0deg); }
50% { transform: translateY(-20px) rotateY(5deg); }
}

.card-3d {
transform-style: preserve-3d;
transition: transform 0.5s ease;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
border-radius: 20px;
background: white;
}

.card-3d:hover {
transform: rotateY(10deg) rotateX(5deg) translateY(-10px);
}

.floating {
animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}

.shape-1 {
position: absolute;
width: 300px;
height: 300px;
background: linear-gradient(45deg, var(--primary), var(--accent));
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
opacity: 0.2;
top: 10%;
left: 10%;
animation: moveShape1 20s linear infinite;
transform-style: preserve-3d;
}

.shape-2 {
position: absolute;
width: 200px;
height: 200px;
background: linear-gradient(45deg, var(--accent), var(--secondary));
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
opacity: 0.2;
bottom: 10%;
right: 10%;
animation: moveShape2 25s linear infinite;
transform-style: preserve-3d;
}

@keyframes moveShape1 {
0% { transform: translate(0, 0) rotate(0deg); }
25% { transform: translate(50px, 50px) rotate(90deg); }
50% { transform: translate(100px, 0) rotate(180deg); }
75% { transform: translate(50px, -50px) rotate(270deg); }
100% { transform: translate(0, 0) rotate(360deg); }
}

@keyframes moveShape2 {
0% { transform: translate(0, 0) rotate(0deg); }
25% { transform: translate(-50px, 50px) rotate(90deg); }
50% { transform: translate(-100px, 0) rotate(180deg); }
75% { transform: translate(-50px, -50px) rotate(270deg); }
100% { transform: translate(0, 0) rotate(360deg); }
}

.btn-primary {
background: var(--primary);
color: white;
transition: all 0.3s ease;
transform-style: preserve-3d;
}

.btn-primary:hover {
transform: translateY(-5px) rotateX(10deg);
box-shadow: 0 10px 20px rgba(108, 99, 255, 0.3);
}

.feature-card {
transition: all 0.3s ease;
transform-style: preserve-3d;
}

.feature-card:hover {
transform: translateY(-10px) rotateY(5deg);
}

.testimonial-card {
transform-style: preserve-3d;
transition: all 0.3s ease;
}

.testimonial-card:hover {
transform: rotateY(10deg) scale(1.02);
}

.contact-form {
transform-style: preserve-3d;
transition: all 0.5s ease;
}

.contact-form:hover {
transform: rotateX(5deg);
}

.flip-card {
perspective: 1000px;
}

.flip-card-inner {
transition: transform 0.6s;
transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
backface-visibility: hidden;
}
.flip-card-back {
transform: rotateY(180deg);
}

.parallax {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
transform-style: preserve-3d;
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar fixed w-full z-50 py-4 px-6 md:px-12">
<div class="flex justify-between items-center">
<div class="text-2xl font-bold text-indigo-600 transform hover:rotate-3
transition-transform">
<span class="text-indigo-600">DREAM</span> <span class="text-pink-
500">UP</span>
</div>
<div class="hidden md:flex space-x-8">
<a href="#home" class="text-gray-700 hover:text-indigo-600
transition">Home</a>
<a href="#services" class="text-gray-700 hover:text-indigo-600
transition">Services</a>
<a href="#about" class="text-gray-700 hover:text-indigo-600
transition">About</a>
<a href="#testimonials" class="text-gray-700 hover:text-indigo-600
transition">Success Stories</a>
<a href="#contact" class="text-gray-700 hover:text-indigo-600
transition">Contact</a>
</div>
<button class="md:hidden text-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-
width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</nav>

<!-- Hero Section -->


<section id="home" class="hero">
<div class="shape-1"></div>
<div class="shape-2"></div>
<div class="container mx-auto px-6 md:px-12">
<div class="hero-content flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-12 md:mb-0">
<h1 class="text-4xl md:text-6xl font-bold mb-6 text-gray-800">
<span class="text-indigo-600">Dream</span> Big,
<span class="text-pink-500">Achieve</span> Bigger
</h1>
<p class="text-lg text-gray-600 mb-8">
Your personalized guide to academic and career success.
We help students and professionals navigate challenges
and unlock their full potential.
</p>
<div class="flex space-x-4">
<button class="btn-primary px-8 py-3 rounded-full font-
semibold">
Get Started
</button>
<button class="border-2 border-indigo-600 text-indigo-600
px-8 py-3 rounded-full font-semibold hover:bg-indigo-50 transition">
Learn More
</button>
</div>
</div>
<div class="md:w-1/2 flex justify-center">
<div class="card-3d w-full max-w-md p-6">
<div class="floating">
<img src="https://illustrations.popsy.co/amber/career-
success.svg" alt="Career Success" class="w-full">
</div>
</div>
</div>
</div>
</div>
</section>

<!-- Services Section -->


<section id="services" class="py-20 bg-gray-50">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-gray-800">Our
<span class="text-indigo-600">Services</span></h2>
<p class="text-lg text-gray-600 max-w-2xl mx-auto">
We provide comprehensive solutions to help you overcome
academic
and career challenges with confidence.
</p>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">


<!-- Service Card 1 -->
<div class="feature-card bg-white rounded-xl p-8 shadow-lg">
<div class="w-16 h-16 bg-indigo-100 rounded-full flex items-
center justify-center mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8
text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3
6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754
5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-
3.332.477-4.5 1.253" />
</svg>
</div>
<h3 class="text-xl font-semibold mb-3 text-gray-800">Academic
Guidance</h3>
<p class="text-gray-600">
Personalized study plans, subject-specific tutoring, and
exam preparation strategies tailored to your learning style.
</p>
</div>
<!-- Service Card 2 -->
<div class="feature-card bg-white rounded-xl p-8 shadow-lg">
<div class="w-16 h-16 bg-pink-100 rounded-full flex items-
center justify-center mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8
text-pink-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16
6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2
0 00-2 2v10a2 2 0 002 2z" />
</svg>
</div>
<h3 class="text-xl font-semibold mb-3 text-gray-800">Career
Counseling</h3>
<p class="text-gray-600">
Discover your strengths, explore career paths, and develop
a roadmap to achieve your professional goals.
</p>
</div>

<!-- Service Card 3 -->


<div class="feature-card bg-white rounded-xl p-8 shadow-lg">
<div class="w-16 h-16 bg-purple-100 rounded-full flex items-
center justify-center mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8
text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-
2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
</svg>
</div>
<h3 class="text-xl font-semibold mb-3 text-gray-800">Skill
Development</h3>
<p class="text-gray-600">
Master essential skills like time management, critical
thinking, and communication to excel in academics and beyond.
</p>
</div>

<!-- Service Card 4 -->


<div class="feature-card bg-white rounded-xl p-8 shadow-lg">
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-
center justify-center mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8
text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955
11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332
9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
</svg>
</div>
<h3 class="text-xl font-semibold mb-3 text-gray-800">Mental
Wellness</h3>
<p class="text-gray-600">
Techniques to manage stress, build resilience, and maintain
motivation throughout your academic journey.
</p>
</div>
<!-- Service Card 5 -->
<div class="feature-card bg-white rounded-xl p-8 shadow-lg">
<div class="w-16 h-16 bg-green-100 rounded-full flex items-
center justify-center mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8
text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<h3 class="text-xl font-semibold mb-3 text-gray-800">Goal
Setting</h3>
<p class="text-gray-600">
Learn to set SMART goals, create actionable plans, and
track progress effectively.
</p>
</div>

<!-- Service Card 6 -->


<div class="feature-card bg-white rounded-xl p-8 shadow-lg">
<div class="w-16 h-16 bg-yellow-100 rounded-full flex items-
center justify-center mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8
text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-
1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0
0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014
0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
</div>
<h3 class="text-xl font-semibold mb-3 text-gray-800">Mentorship
Program</h3>
<p class="text-gray-600">
Connect with experienced mentors who can provide guidance,
advice, and support in your field of interest.
</p>
</div>
</div>
</div>
</section>

<!-- About Section -->


<section id="about" class="py-20">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-12 md:mb-0">
<div class="flip-card w-full max-w-md mx-auto">
<div class="flip-card-inner">
<div class="flip-card-front card-3d rounded-xl
overflow-hidden">
<img src="https://images.unsplash.com/photo-
1522202176988-66273c2fd55f?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80"
alt="Team" class="w-full h-full object-cover">
</div>
<div class="flip-card-back card-3d bg-indigo-600 text-
white p-8 rounded-xl flex flex-col justify-center">
<h3 class="text-2xl font-bold mb-4">Manvendra Singh
Shekhawat</h3>
<p class="mb-4">Founder & Lead Mentor</p>
<p class="text-sm">
With over 10 years of experience in education
and career counseling,
I founded Dream Up to help students navigate
the challenges of academics
and career planning with confidence.
</p>
</div>
</div>
</div>
</div>
<div class="md:w-1/2 md:pl-12">
<h2 class="text-3xl md:text-4xl font-bold mb-6 text-gray-
800">About <span class="text-indigo-600">Dream Up</span></h2>
<p class="text-lg text-gray-600 mb-6">
Dream Up was born from a passion to help students and young
professionals overcome
obstacles in their academic and career journeys. We believe
everyone deserves
personalized guidance to unlock their full potential.
</p>
<p class="text-lg text-gray-600 mb-8">
Our team of experienced educators, career counselors, and
mentors work together
to provide comprehensive support tailored to your unique
needs and aspirations.
</p>
<button class="btn-primary px-8 py-3 rounded-full font-
semibold">
Meet Our Team
</button>
</div>
</div>
</div>
</section>

<!-- Testimonials Section -->


<section id="testimonials" class="py-20 bg-indigo-50">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-gray-
800">Success <span class="text-indigo-600">Stories</span></h2>
<p class="text-lg text-gray-600 max-w-2xl mx-auto">
Hear from students and professionals who transformed their
academic and career paths with our guidance.
</p>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">


<!-- Testimonial 1 -->
<div class="testimonial-card bg-white rounded-xl p-8 shadow-lg">
<div class="flex items-center mb-6">
<div class="w-12 h-12 rounded-full overflow-hidden mr-4">
<img
src="https://randomuser.me/api/portraits/women/32.jpg" alt="Testimonial" class="w-
full h-full object-cover">
</div>
<div>
<h4 class="font-semibold text-gray-800">Priya
Sharma</h4>
<p class="text-sm text-gray-600">Computer Science
Student</p>
</div>
</div>
<p class="text-gray-600 italic mb-4">
"Dream Up helped me identify my strengths and choose the
right specialization.
Their career counseling sessions gave me clarity I never
had before."
</p>
<div class="flex text-yellow-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
viewBox="0 0 20 20" fill="currentColor">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07
3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364
1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8
2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98
8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
viewBox="0 0 20 20" fill="currentColor">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07
3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364
1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8
2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98
8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
viewBox="0 0 20 20" fill="currentColor">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07
3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364
1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8
2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98
8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
viewBox="0 0 20 20" fill="currentColor">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07
3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364
1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8
2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98
8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
viewBox="0 0 20 20" fill="currentColor">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07
3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364
1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8
2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98
8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
</div>
</div>

<!-- Testimonial 2 -->


<div class="testimonial-card bg-white rounded-xl p-8 shadow-lg">
<div class="flex items-center mb-6">
<div class="w-12 h-12 rounded-full overflow-hidden mr-4">
<img
src="https://randomuser.me/api/portraits/men/45.jpg" alt="Testimonial" class="w-
full h-full object-cover">
</div>
<div>
<h4 class="font-semibold text-gray-800">Rahul
Verma</h4>
<p class="text-sm text-gray-600">Engineering
Graduate</p>
</div>
</div>
<p class="text-gray-600 italic mb-4">
"The mentorship program connected me with industry
professionals who guided me
through my job search. I landed my dream job within 3
months!"
</p>
<div class="flex text-yellow-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
viewBox="0 0 20 20" fill="currentColor">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07
3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364
1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8
2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98
8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
viewBox="0 0 20 20" fill="currentColor">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07
3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364
1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8
2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98
8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
viewBox="0 0 20 20" fill="currentColor">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07
3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364
1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8
2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98
8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
viewBox="0 0 20 20" fill="currentColor">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07
3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364
1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8
2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98
8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
viewBox="0 0 20 20" fill="currentColor">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07
3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364
1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8
2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98
8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
</div>
</div>

<!-- Testimonial 3 -->


<div class="testimonial-card bg-white rounded-xl p-8 shadow-lg">
<div class="flex items-center mb-6">
<div class="w-12 h-12 rounded-full overflow-hidden mr-4">
<img
src="https://randomuser.me/api/portraits/women/68.jpg" alt="Testimonial" class="w-
full h-full object-cover">
</div>
<div>
<h4 class="font-semibold text-gray-800">Ananya
Patel</h4>
<p class="text-sm text-gray-600">MBA Student</p>
</div>
</div>
<p class="text-gray-600 italic mb-4">
"The study techniques I learned helped me improve my grades
significantly.
The time management strategies were life-changing!"
</p>
<div class="flex text-yellow-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
viewBox="0 0 20 20" fill="currentColor">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07
3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364
1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8
2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98
8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
viewBox="0 0 20 20" fill="currentColor">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07
3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364
1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8
2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98
8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
viewBox="0 0 20 20" fill="currentColor">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07
3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364
1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8
2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98
8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
viewBox="0 0 20 20" fill="currentColor">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07
3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364
1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8
2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98
8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
viewBox="0 0 20 20" fill="currentColor">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07
3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364
1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8
2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98
8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
</div>
</div>
</div>
</div>
</section>

<!-- CTA Section -->


<section class="py-20 bg-gradient-to-r from-indigo-600 to-purple-600 text-
white">
<div class="container mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Your
Academic Journey?</h2>
<p class="text-xl mb-8 max-w-2xl mx-auto">
Take the first step towards achieving your dreams with personalized
guidance from Dream Up.
</p>
<button class="bg-white text-indigo-600 px-8 py-3 rounded-full font-
semibold hover:bg-gray-100 transition">
Book a Free Consultation
</button>
</div>
</section>

<!-- Contact Section -->


<section id="contact" class="py-20">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row">
<div class="md:w-1/2 mb-12 md:mb-0">
<h2 class="text-3xl md:text-4xl font-bold mb-6 text-gray-
800">Get in <span class="text-indigo-600">Touch</span></h2>
<p class="text-lg text-gray-600 mb-8">
Have questions or want to learn more about our services?
Fill out the form and we'll get back to you within 24
hours.
</p>
<div class="space-y-6">
<div class="flex items-center">
<div class="w-12 h-12 bg-indigo-100 rounded-full flex
items-center justify-center mr-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6
w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-
linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498
4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0
011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3
6V5z" />
</svg>
</div>
<div>
<h4 class="font-semibold text-gray-800">Phone</h4>
<p class="text-gray-600">+91 98765 43210</p>
</div>
</div>
<div class="flex items-center">
<div class="w-12 h-12 bg-indigo-100 rounded-full flex
items-center justify-center mr-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6
w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-
linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2
0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</div>
<div>
<h4 class="font-semibold text-gray-800">Email</h4>
<p class="text-gray-600">[email protected]</p>
</div>
</div>
<div class="flex items-center">
<div class="w-12 h-12 bg-indigo-100 rounded-full flex
items-center justify-center mr-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6
w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-
linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-
2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path stroke-linecap="round" stroke-
linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</div>
<div>
<h4 class="font-semibold
text-gray-800">Address</h4>
<p class="text-gray-600">123 Education Street,
Jaipur, Rajasthan</p>
</div>
</div>
</div>
</div>
<div class="md:w-1/2 md:pl-12">
<div class="contact-form bg-white rounded-xl p-8 shadow-lg">
<form>
<div class="mb-6">
<label for="name" class="block text-gray-700 font-
medium mb-2">Your Name</label>
<input type="text" id="name" class="w-full px-4 py-
3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-
indigo-500">
</div>
<div class="mb-6">
<label for="email" class="block text-gray-700 font-
medium mb-2">Email Address</label>
<input type="email" id="email" class="w-full px-4
py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-
indigo-500">
</div>
<div class="mb-6">
<label for="subject" class="block text-gray-700
font-medium mb-2">Subject</label>
<input type="text" id="subject" class="w-full px-4
py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-
indigo-500">
</div>
<div class="mb-6">
<label for="message" class="block text-gray-700
font-medium mb-2">Message</label>
<textarea id="message" rows="4" class="w-full px-4
py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-
indigo-500"></textarea>
</div>
<button type="submit" class="btn-primary w-full py-3
rounded-lg font-semibold">
Send Message
</button>
</form>
</div>
</div>
</div>
</div>
</section>

<!-- Footer -->


<footer class="bg-gray-900 text-white py-12">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row justify-between">
<div class="mb-8 md:mb-0">
<div class="text-2xl font-bold mb-4">
<span class="text-indigo-400">DREAM</span> <span
class="text-pink-400">UP</span>
</div>
<p class="text-gray-400 max-w-xs">
Empowering students and professionals to achieve their
academic and career goals through personalized guidance.
</p>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 gap-8">
<div>
<h4 class="text-lg font-semibold mb-4">Quick Links</h4>
<ul class="space-y-2">
<li><a href="#home" class="text-gray-400 hover:text-
white transition">Home</a></li>
<li><a href="#services" class="text-gray-400
hover:text-white transition">Services</a></li>
<li><a href="#about" class="text-gray-400 hover:text-
white transition">About</a></li>
<li><a href="#testimonials" class="text-gray-400
hover:text-white transition">Success Stories</a></li>
<li><a href="#contact" class="text-gray-400 hover:text-
white transition">Contact</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Services</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white
transition">Academic Guidance</a></li>
<li><a href="#" class="text-gray-400 hover:text-white
transition">Career Counseling</a></li>
<li><a href="#" class="text-gray-400 hover:text-white
transition">Skill Development</a></li>
<li><a href="#" class="text-gray-400 hover:text-white
transition">Mentorship Program</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Connect</h4>
<div class="flex space-x-4">
<a href="#" class="w-10 h-10 bg-gray-800 rounded-full
flex items-center justify-center hover:bg-indigo-600 transition">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5
w-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M22.675 0h-21.35c-.732 0-1.325.593-
1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-
2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-
1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0
1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z"/>
</svg>
</a>
<a href="#" class="w-10 h-10 bg-gray-800 rounded-full
flex items-center justify-center hover:bg-blue-400 transition">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5
w-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M23.953 4.57a10 10 0 01-2.825.775
4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384
4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213
2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996
0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39
0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-
13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
</svg>
</a>
<a href="#" class="w-10 h-10 bg-gray-800 rounded-full
flex items-center justify-center hover:bg-pink-600 transition">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5
w-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2.163c3.204 0 3.584.012 4.85.07
3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012
3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-
3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-
1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919
1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78
2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2
4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014
4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-
3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-
4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-
2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-
2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-
1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-
1.44z"/>
</svg>
</a>
<a href="#" class="w-10 h-10 bg-gray-800 rounded-full
flex items-center justify-center hover:bg-red-600 transition">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5
w-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M19.615 3.184c-3.604-.246-11.631-.245-
15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245
11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-
8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-
400">
<p>&copy; 2023 Dream Up. All rights reserved. Founded by Manvendra
Singh Shekhawat.</p>
</div>
</div>
</footer>

<script>
// Simple animation for 3D effect on scroll
document.addEventListener('scroll', function() {
const cards = document.querySelectorAll('.card-3d');
const scrollPosition = window.scrollY;

cards.forEach((card, index) => {


const cardPosition = card.getBoundingClientRect().top;
const rotation = (scrollPosition - cardPosition) * 0.1;
card.style.transform = `rotateY(${rotation}deg) rotateX(${rotation
* 0.5}deg)`;
});
});

// Smooth scrolling for anchor links


document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});

// Form submission
const form = document.querySelector('form');
if (form) {
form.addEventListener('submit', function(e) {
e.preventDefault();
alert('Thank you for your message! We will get back to you soon.');
form.reset();
});
}
</script>
</body>
</html>

You might also like