body.html
Changed around line 1
+
+
+
HR Partner
+
+
+
+
+ Services
+ About
+ Contact
+
+
+
+
+
+
+
+ Transform Your
Transform Your
Workforce Management
+
Expert HR solutions tailored to your business needs
+
+
+
+
+
Our Services
+
+
+
👥
+
Recruitment
+
Strategic talent acquisition and placement services
+
+
+
📊
+
HR Consulting
+
Expert guidance on HR strategy and best practices
+
+
+
📈
+
Performance Management
+
Comprehensive employee evaluation systems
+
+
+
🎓
+
Training
+
Professional development and compliance training
+
+
+
+
+
+
Why Choose Us
+
+
+
20+ Years Experience
+
Trusted by leading companies worldwide
+
+
+
Tailored Solutions
+
Customized approach for your unique needs
+
+
+
Expert Team
+
Certified HR professionals at your service
+
+
+
+
+
+
Get in Touch
+
+
+
+
+
+
+
+
+
+
+
+
+
HR Partner
+
Professional HR solutions for modern businesses
+
+
+
Contact
+
contact@hrpartner.scroll.pub
+
+1 (555) 123-4567
+
+
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://hrpartner.scroll.pub
+ metaTags
+ editButton /edit.html
+ title HR Partner - Professional HR Solutions for Your Business
+ style.css
+ body.html
+ script.js
readme.scroll
Changed around line 1
+ # hrpartner.scroll.pub
+ Website generated from prompt: I WANT A LANDING PAGE TO SHOW MY HUMAN RESOURCES SERVICES, PLEASE, USE LARGE FONT TO THE HERO TEXTS, THEN SOME AREAS TO EXPLAIN THE SERVICE AND ALL THE ANOTHER KIND OF STUFF THAT A LANDING PAGE USUALLY HAVE
script.js
Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ // Mobile menu functionality
+ const mobileMenu = document.querySelector('.mobile-menu');
+ const navLinks = document.querySelector('.nav-links');
+
+ mobileMenu.addEventListener('click', () => {
+ mobileMenu.classList.toggle('active');
+ navLinks.classList.toggle('active');
+ });
+
+ // Smooth scroll for navigation links
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ const target = document.querySelector(this.getAttribute('href'));
+
+ window.scrollTo({
+ top: target.offsetTop - 80,
+ behavior: 'smooth'
+ });
+
+ // Close mobile menu if open
+ mobileMenu.classList.remove('active');
+ navLinks.classList.remove('active');
+ });
+ });
+
+ // Form submission
+ const contactForm = document.getElementById('contact-form');
+
+ contactForm.addEventListener('submit', (e) => {
+ e.preventDefault();
+
+ // Add animation to button
+ const submitButton = contactForm.querySelector('.submit-button');
+ submitButton.style.opacity = '0.7';
+ submitButton.textContent = 'Sending...';
+
+ // Simulate form submission
+ setTimeout(() => {
+ submitButton.style.opacity = '1';
+ submitButton.textContent = 'Message Sent!';
+ contactForm.reset();
+
+ setTimeout(() => {
+ submitButton.textContent = 'Send Message';
+ }, 2000);
+ }, 1500);
+ });
+
+ // Intersection Observer for fade-in animations
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.style.opacity = '1';
+ entry.target.style.transform = 'translateY(0)';
+ }
+ });
+ }, { threshold: 0.1 });
+
+ document.querySelectorAll('.service-card, .feature').forEach(el => {
+ el.style.opacity = '0';
+ el.style.transform = 'translateY(20px)';
+ el.style.transition = 'all 0.6s ease-out';
+ observer.observe(el);
+ });
+ });
style.css
Changed around line 1
+ :root {
+ --primary-color: #2a4365;
+ --secondary-color: #4299e1;
+ --text-color: #2d3748;
+ --light-bg: #f7fafc;
+ --white: #ffffff;
+ --transition: all 0.3s ease;
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+ }
+
+ .header {
+ position: fixed;
+ width: 100%;
+ background: var(--white);
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+ z-index: 1000;
+ }
+
+ .nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 5%;
+ max-width: 1200px;
+ margin: 0 auto;
+ }
+
+ .logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ color: var(--primary-color);
+ }
+
+ .nav-links {
+ display: flex;
+ list-style: none;
+ gap: 2rem;
+ }
+
+ .nav-links a {
+ text-decoration: none;
+ color: var(--text-color);
+ font-weight: 500;
+ transition: var(--transition);
+ }
+
+ .nav-links a:hover {
+ color: var(--secondary-color);
+ }
+
+ .hero {
+ min-height: 100vh;
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ display: flex;
+ align-items: center;
+ padding: 0 5%;
+ }
+
+ .hero-content {
+ max-width: 800px;
+ color: var(--white);
+ }
+
+ .hero h1 {
+ font-size: 4rem;
+ line-height: 1.2;
+ margin-bottom: 1rem;
+ }
+
+ .hero p {
+ font-size: 1.5rem;
+ margin-bottom: 2rem;
+ }
+
+ .cta-button {
+ display: inline-block;
+ padding: 1rem 2rem;
+ background: var(--white);
+ color: var(--primary-color);
+ text-decoration: none;
+ border-radius: 30px;
+ font-weight: bold;
+ transition: var(--transition);
+ }
+
+ .cta-button:hover {
+ transform: translateY(-3px);
+ box-shadow: 0 10px 20px rgba(0,0,0,0.2);
+ }
+
+ .services, .about, .contact {
+ padding: 5rem 5%;
+ max-width: 1200px;
+ margin: 0 auto;
+ }
+
+ .services-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ margin-top: 3rem;
+ }
+
+ .service-card {
+ background: var(--white);
+ padding: 2rem;
+ border-radius: 10px;
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+ transition: var(--transition);
+ }
+
+ .service-card:hover {
+ transform: translateY(-5px);
+ }
+
+ .icon {
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+ }
+
+ .features {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ margin-top: 3rem;
+ }
+
+ .contact-form {
+ display: grid;
+ gap: 1rem;
+ max-width: 600px;
+ margin: 3rem auto;
+ }
+
+ .contact-form input,
+ .contact-form textarea {
+ padding: 1rem;
+ border: 1px solid #ddd;
+ border-radius: 5px;
+ font-size: 1rem;
+ }
+
+ .submit-button {
+ background: var(--primary-color);
+ color: var(--white);
+ padding: 1rem;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: var(--transition);
+ }
+
+ .submit-button:hover {
+ background: var(--secondary-color);
+ }
+
+ .footer {
+ background: var(--primary-color);
+ color: var(--white);
+ padding: 3rem 5%;
+ }
+
+ .footer-content {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+ }
+
+ .mobile-menu {
+ display: none;
+ }
+
+ @media (max-width: 768px) {
+ .hero h1 {
+ font-size: 2.5rem;
+ }
+
+ .nav-links {
+ display: none;
+ }
+
+ .mobile-menu {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ background: none;
+ border: none;
+ cursor: pointer;
+ }
+
+ .mobile-menu span {
+ display: block;
+ width: 25px;
+ height: 3px;
+ background: var(--primary-color);
+ transition: var(--transition);
+ }
+
+ .mobile-menu.active span:nth-child(1) {
+ transform: rotate(45deg) translate(5px, 5px);
+ }
+
+ .mobile-menu.active span:nth-child(2) {
+ opacity: 0;
+ }
+
+ .mobile-menu.active span:nth-child(3) {
+ transform: rotate(-45deg) translate(5px, -5px);
+ }
+
+ .nav-links.active {
+ display: flex;
+ flex-direction: column;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ background: var(--white);
+ padding: 1rem;
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+ }
+ }