diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..7751d7e --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,138 @@ +/* +* Design Defaults +* +* Palette: +* Primary: #4F46E5 (Indigo) +* Secondary: #10B981 (Emerald Green) +* Background: #F9FAFB (Light Gray) +* Surface/Card: #FFFFFF (White) +* Text: #1F2937 (Dark Gray) +* +* Typography: +* Headings: 'Poppins', sans-serif +* Body: 'Inter', sans-serif +*/ + +body { + font-family: 'Inter', sans-serif; + background-color: #F9FAFB; + color: #1F2937; +} + +h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { + font-family: 'Poppins', sans-serif; + font-weight: 700; +} + +.btn-primary { + background-color: #4F46E5; + border-color: #4F46E5; + padding: 0.75rem 1.5rem; + border-radius: 0.5rem; + font-weight: 600; + transition: all 0.2s ease-in-out; +} + +.btn-primary:hover { + background-color: #4338CA; + border-color: #4338CA; + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0,0,0,0.1); +} + +.btn-secondary { + background-color: #10B981; + border-color: #10B981; + color: white; + padding: 0.75rem 1.5rem; + border-radius: 0.5rem; + font-weight: 600; + transition: all 0.2s ease-in-out; +} + +.btn-secondary:hover { + background-color: #059669; + border-color: #059669; + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0,0,0,0.1); +} + +.navbar { + transition: background-color 0.3s ease-in-out; +} + +.navbar-brand { + font-family: 'Poppins', sans-serif; + font-weight: 700; + color: #4F46E5 !important; +} + +.hero { + color: white; + padding: 6rem 0; + background: linear-gradient(45deg, #4f46e5, #10b981); +} + +.hero h1 { + font-size: 3.5rem; + font-weight: 800; +} + +.hero p { + font-size: 1.25rem; + max-width: 600px; + margin-left: auto; + margin-right: auto; +} + +.section { + padding: 5rem 0; +} + +.section-title { + font-weight: 800; + margin-bottom: 3rem; +} + +.career-card { + background-color: #FFFFFF; + border: 0; + border-radius: 0.5rem; + padding: 2rem; + text-align: center; + transition: all 0.3s ease; + box-shadow: 0 4px 6px rgba(0,0,0,0.05); +} + +.career-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0,0,0,0.1); +} + +.career-card .icon { + width: 64px; + height: 64px; + margin: 0 auto 1.5rem; + color: #4F46E5; +} + +.feature-icon { + width: 48px; + height: 48px; + color: #10B981; +} + +.footer { + background-color: #1F2937; + color: #E5E7EB; + padding: 3rem 0; +} + +.footer a { + color: #F9FAFB; + text-decoration: none; +} + +.footer a:hover { + text-decoration: underline; +} diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..c2031a9 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,15 @@ +document.addEventListener('DOMContentLoaded', function() { + // Smooth scroll for navigation links + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + + let target = document.querySelector(this.getAttribute('href')); + if(target) { + target.scrollIntoView({ + behavior: 'smooth' + }); + } + }); + }); +}); diff --git a/index.php b/index.php index 7205f3d..8ee1237 100644 --- a/index.php +++ b/index.php @@ -1,150 +1,129 @@ - - + - - - New Style - - - - - - - - - - - - - - - - - - - + + + + + CareerPath - Discover Your Future + + + + + + + + + + + + + + + -
-
-

Analyzing your requirements and generating your website…

-
- Loading… -
-

AI is collecting your requirements and applying the first changes.

-

This page will update automatically as the plan is implemented.

-

Runtime: PHP — UTC

-
-
- + + + + + +
+
+

Find Your True Calling.

+

Take our psychometric test to unlock personalized career guidance and step confidently into your future.

+ Take the Free Test +
+
+ + +
+
+

Explore Career Fields

+
+ +
+
+ +
Technology
+
+
+ +
+
+ +
Healthcare
+
+
+ +
+
+ +
Arts & Design
+
+
+ +
+
+ +
Engineering
+
+
+
+
+
+ + +
+
+

Why Choose Us?

+
+
+ +

Personalized Reports

+

Get in-depth analysis and career recommendations tailored just for you.

+
+
+ +

Multi-Language

+

Take the test in your preferred regional language for complete understanding.

+
+
+ +

Expert Guidance

+

Our tests are designed by psychologists to provide meaningful insights.

+
+
+
+
+ + + + + + + - + \ No newline at end of file