commit 9b459522a91fb1e8b2bd635e499b94ea4f2967b2
Author: root <root@hub.scroll.pub>
Date: 2024-12-26 22:41:52 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..4044f97
--- /dev/null
+++ b/body.html
@@ -0,0 +1,91 @@
+<header class="header">
+ <nav class="nav">
+ <div class="logo">HR Partner</div>
+ <button class="mobile-menu" aria-label="Toggle menu">
+ <span></span><span></span><span></span>
+ </button>
+ <ul class="nav-links">
+ <li><a href="#services">Services</a></li>
+ <li><a href="#about">About</a></li>
+ <li><a href="#contact">Contact</a></li>
+ </ul>
+ </nav>
+</header>
+
+<main>
+ <section class="hero">
+ <div class="hero-content">
+ <h1>Transform Your<br>Workforce Management</h1>
+ <p>Expert HR solutions tailored to your business needs</p>
+ <a href="#contact" class="cta-button">Get Started</a>
+ </div>
+ </section>
+
+ <section id="services" class="services">
+ <h2>Our Services</h2>
+ <div class="services-grid">
+ <div class="service-card">
+ <div class="icon">👥</div>
+ <h3>Recruitment</h3>
+ <p>Strategic talent acquisition and placement services</p>
+ </div>
+ <div class="service-card">
+ <div class="icon">📊</div>
+ <h3>HR Consulting</h3>
+ <p>Expert guidance on HR strategy and best practices</p>
+ </div>
+ <div class="service-card">
+ <div class="icon">📈</div>
+ <h3>Performance Management</h3>
+ <p>Comprehensive employee evaluation systems</p>
+ </div>
+ <div class="service-card">
+ <div class="icon">🎓</div>
+ <h3>Training</h3>
+ <p>Professional development and compliance training</p>
+ </div>
+ </div>
+ </section>
+
+ <section id="about" class="about">
+ <h2>Why Choose Us</h2>
+ <div class="features">
+ <div class="feature">
+ <h3>20+ Years Experience</h3>
+ <p>Trusted by leading companies worldwide</p>
+ </div>
+ <div class="feature">
+ <h3>Tailored Solutions</h3>
+ <p>Customized approach for your unique needs</p>
+ </div>
+ <div class="feature">
+ <h3>Expert Team</h3>
+ <p>Certified HR professionals at your service</p>
+ </div>
+ </div>
+ </section>
+
+ <section id="contact" class="contact">
+ <h2>Get in Touch</h2>
+ <form id="contact-form" class="contact-form">
+ <input type="text" placeholder="Name" required>
+ <input type="email" placeholder="Email" required>
+ <textarea placeholder="Message" required></textarea>
+ <button type="submit" class="submit-button">Send Message</button>
+ </form>
+ </section>
+</main>
+
+<footer class="footer">
+ <div class="footer-content">
+ <div class="footer-section">
+ <h4>HR Partner</h4>
+ <p>Professional HR solutions for modern businesses</p>
+ </div>
+ <div class="footer-section">
+ <h4>Contact</h4>
+ <p>contact@hrpartner.scroll.pub</p>
+ <p>+1 (555) 123-4567</p>
+ </div>
+ </div>
+</footer>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..11ec324
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+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
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..9f3d21e
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# 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
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..6f8530d
--- /dev/null
+++ b/script.js
@@ -0,0 +1,67 @@
+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);
+ });
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..6ce25f6
--- /dev/null
+++ b/style.css
@@ -0,0 +1,235 @@
+: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);
+ }
+}
\ No newline at end of file