mirror of https://github.com/kortix-ai/suna.git
wip
This commit is contained in:
marko-kraemer
parent
b6ac7e0ec4
commit
8fc55f130c
|
|
@ -3,126 +3,92 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>GrowthPro - Marketing Solutions</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||
<title>Adam Cohen Hillel | Creative Developer</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar">
|
||||
<div class="nav-content">
|
||||
<a href="#" class="logo"><i class="fas fa-chart-line"></i> GrowthPro</a>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#services">Services</a></li>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
<li><a href="#experience">Magic</a></li>
|
||||
<li><a href="#contact">Let's Create</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<header class="hero">
|
||||
<div class="hero-content">
|
||||
<h1>Transform Your Business Growth</h1>
|
||||
<p class="subtitle">Innovative marketing solutions that drive results</p>
|
||||
<button class="cta-button">Get Started <i class="fas fa-arrow-right"></i></button>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<section id="services" class="services">
|
||||
<h2>Our Services</h2>
|
||||
<div class="service-grid">
|
||||
<div class="service-card">
|
||||
<i class="fas fa-bullseye"></i>
|
||||
<h3>Digital Strategy</h3>
|
||||
<p>Data-driven approaches to reach your target audience</p>
|
||||
</div>
|
||||
<div class="service-card">
|
||||
<i class="fas fa-search"></i>
|
||||
<h3>SEO Optimization</h3>
|
||||
<p>Boost your online visibility and rankings</p>
|
||||
</div>
|
||||
<div class="service-card">
|
||||
<i class="fas fa-ad"></i>
|
||||
<h3>PPC Campaigns</h3>
|
||||
<p>Targeted advertising that converts</p>
|
||||
<main>
|
||||
<section id="hero">
|
||||
<div class="hero-content">
|
||||
<h1>Adam Cohen Hillel</h1>
|
||||
<p class="tagline">Digital Alchemist & Code Artist</p>
|
||||
<p class="sub-tagline">Turning caffeine into code & dreams into pixels</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="about">
|
||||
<div class="container">
|
||||
<h2>The Plot Twist</h2>
|
||||
<div class="about-content">
|
||||
<div class="about-text">
|
||||
<p>👋 Yo! I'm Adam – part code wizard, part digital troublemaker. When I'm not pushing pixels around or making browsers do backflips, I'm probably dreaming up the next big thing that'll make your users go "Holy sh*t!"</p>
|
||||
<p>I don't just build websites – I craft digital experiences that punch mediocrity in the face. Think of me as your technical creative director who actually knows how to code. Wild, right?</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="stats">
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">500+</span>
|
||||
<span class="stat-label">Clients Served</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">95%</span>
|
||||
<span class="stat-label">Success Rate</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">10M+</span>
|
||||
<span class="stat-label">Revenue Generated</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="about" class="about">
|
||||
<h2>Why Choose Us</h2>
|
||||
<div class="features">
|
||||
<div class="feature">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<h3>Expert Team</h3>
|
||||
<p>Industry professionals with proven track record</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<i class="fas fa-rocket"></i>
|
||||
<h3>Fast Results</h3>
|
||||
<p>See improvements within the first month</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<i class="fas fa-clock"></i>
|
||||
<h3>24/7 Support</h3>
|
||||
<p>Always here when you need us</p>
|
||||
<section id="experience">
|
||||
<div class="container">
|
||||
<h2>The Magic Happens Here</h2>
|
||||
<div class="experience-grid">
|
||||
<div class="experience-card">
|
||||
<i class="fas fa-wand-magic-sparkles"></i>
|
||||
<h3>Creative Coding</h3>
|
||||
<p>Making pixels dance and interfaces sing. Your website won't just exist – it'll perform.</p>
|
||||
</div>
|
||||
<div class="experience-card">
|
||||
<i class="fas fa-brain"></i>
|
||||
<h3>Digital Innovation</h3>
|
||||
<p>Breaking conventions and building tomorrow's web experiences today. Because normal is boring.</p>
|
||||
</div>
|
||||
<div class="experience-card">
|
||||
<i class="fas fa-rocket"></i>
|
||||
<h3>Performance Art</h3>
|
||||
<p>Crafting lightning-fast, butter-smooth experiences that'll make your users' jaws drop.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact" class="contact">
|
||||
<h2>Ready to Grow?</h2>
|
||||
<p>Get your free consultation today</p>
|
||||
<form class="contact-form">
|
||||
<input type="text" placeholder="Your Name" required>
|
||||
<input type="email" placeholder="Email Address" required>
|
||||
<textarea placeholder="Tell us about your goals"></textarea>
|
||||
<button type="submit" class="submit-btn">Send Message</button>
|
||||
</form>
|
||||
<section id="contact">
|
||||
<div class="container">
|
||||
<h2>Let's Create Something Legendary</h2>
|
||||
<div class="contact-content">
|
||||
<div class="social-links">
|
||||
<a href="#" class="social-link"><i class="fab fa-linkedin"></i></a>
|
||||
<a href="#" class="social-link"><i class="fab fa-github"></i></a>
|
||||
<a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
|
||||
</div>
|
||||
<div class="contact-form">
|
||||
<form>
|
||||
<input type="text" placeholder="Your Name (Required for Spellcasting)" required>
|
||||
<input type="email" placeholder="Your Email (Promise Not to Spam)" required>
|
||||
<textarea placeholder="Tell me about your wildest digital dreams..." required></textarea>
|
||||
<button type="submit">Send It to the Moon 🚀</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="footer-content">
|
||||
<div class="footer-section">
|
||||
<h3>GrowthPro</h3>
|
||||
<p>Your partner in digital success</p>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h3>Contact</h3>
|
||||
<p>Email: info@growthpro.com</p>
|
||||
<p>Phone: (555) 123-4567</p>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h3>Follow Us</h3>
|
||||
<div class="social-links">
|
||||
<a href="#"><i class="fab fa-facebook"></i></a>
|
||||
<a href="#"><i class="fab fa-twitter"></i></a>
|
||||
<a href="#"><i class="fab fa-linkedin"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>© 2024 GrowthPro. All rights reserved.</p>
|
||||
<div class="container">
|
||||
<p>© 2023 Adam Cohen Hillel. Made with ☕️ and good vibes.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
<script src="marketing-tests.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,188 +0,0 @@
|
|||
// Marketing Landing Page Test Suite
|
||||
|
||||
// Main test runner
|
||||
function runMarketingTests() {
|
||||
console.log('%cRunning Marketing Landing Page Tests...', 'color: blue; font-weight: bold');
|
||||
|
||||
testNavigation();
|
||||
testHeroSection();
|
||||
testServices();
|
||||
testStats();
|
||||
testContactForm();
|
||||
testResponsiveness();
|
||||
testAnimations();
|
||||
|
||||
console.log('%cAll tests completed!', 'color: green; font-weight: bold');
|
||||
}
|
||||
|
||||
// Test Navigation
|
||||
function testNavigation() {
|
||||
console.group('Navigation Tests');
|
||||
|
||||
// Test navigation elements
|
||||
const navbar = document.querySelector('.navbar');
|
||||
const logo = document.querySelector('.logo');
|
||||
const navLinks = document.querySelectorAll('.nav-links a');
|
||||
|
||||
console.assert(navbar !== null, 'Navbar exists');
|
||||
console.assert(logo !== null, 'Logo exists');
|
||||
console.assert(navLinks.length === 3, `Expected 3 nav links, found ${navLinks.length}`);
|
||||
|
||||
// Test navigation functionality
|
||||
navLinks.forEach(link => {
|
||||
console.assert(link.getAttribute('href').startsWith('#'),
|
||||
'Navigation links have proper anchor format');
|
||||
});
|
||||
|
||||
console.groupEnd();
|
||||
}
|
||||
|
||||
// Test Hero Section
|
||||
function testHeroSection() {
|
||||
console.group('Hero Section Tests');
|
||||
|
||||
const hero = document.querySelector('.hero');
|
||||
const ctaButton = document.querySelector('.cta-button');
|
||||
|
||||
console.assert(hero !== null, 'Hero section exists');
|
||||
console.assert(ctaButton !== null, 'CTA button exists');
|
||||
|
||||
// Test hero content
|
||||
const heroTitle = hero.querySelector('h1');
|
||||
console.assert(heroTitle.textContent.length > 0, 'Hero title has content');
|
||||
|
||||
console.groupEnd();
|
||||
}
|
||||
|
||||
// Test Services Section
|
||||
function testServices() {
|
||||
console.group('Services Tests');
|
||||
|
||||
const services = document.querySelectorAll('.service-card');
|
||||
console.assert(services.length === 3, `Expected 3 service cards, found ${services.length}`);
|
||||
|
||||
services.forEach(service => {
|
||||
console.assert(service.querySelector('i') !== null, 'Service has icon');
|
||||
console.assert(service.querySelector('h3') !== null, 'Service has title');
|
||||
console.assert(service.querySelector('p') !== null, 'Service has description');
|
||||
});
|
||||
|
||||
console.groupEnd();
|
||||
}
|
||||
|
||||
// Test Statistics Section
|
||||
function testStats() {
|
||||
console.group('Statistics Tests');
|
||||
|
||||
const stats = document.querySelectorAll('.stat-item');
|
||||
console.assert(stats.length === 3, `Expected 3 stat items, found ${stats.length}`);
|
||||
|
||||
stats.forEach(stat => {
|
||||
const number = stat.querySelector('.stat-number');
|
||||
const label = stat.querySelector('.stat-label');
|
||||
console.assert(number !== null && label !== null, 'Stat item has number and label');
|
||||
});
|
||||
|
||||
console.groupEnd();
|
||||
}
|
||||
|
||||
// Test Contact Form
|
||||
function testContactForm() {
|
||||
console.group('Contact Form Tests');
|
||||
|
||||
const form = document.querySelector('.contact-form');
|
||||
const inputs = form.querySelectorAll('input');
|
||||
const textarea = form.querySelector('textarea');
|
||||
const submitBtn = form.querySelector('.submit-btn');
|
||||
|
||||
console.assert(form !== null, 'Contact form exists');
|
||||
console.assert(inputs.length === 2, 'Form has correct number of inputs');
|
||||
console.assert(textarea !== null, 'Form has textarea');
|
||||
console.assert(submitBtn !== null, 'Form has submit button');
|
||||
|
||||
// Test form validation
|
||||
const nameInput = form.querySelector('input[type="text"]');
|
||||
const emailInput = form.querySelector('input[type="email"]');
|
||||
|
||||
console.assert(nameInput.hasAttribute('required'), 'Name input is required');
|
||||
console.assert(emailInput.hasAttribute('required'), 'Email input is required');
|
||||
|
||||
console.groupEnd();
|
||||
}
|
||||
|
||||
// Test Responsive Design
|
||||
function testResponsiveness() {
|
||||
console.group('Responsive Design Tests');
|
||||
|
||||
const container = document.querySelector('.container');
|
||||
const computedStyle = window.getComputedStyle(container);
|
||||
|
||||
console.assert(computedStyle.maxWidth === '1200px', 'Container has correct max-width');
|
||||
|
||||
// Test mobile menu
|
||||
const mobileMenuButton = document.querySelector('.mobile-menu-button');
|
||||
console.assert(mobileMenuButton !== null, 'Mobile menu button exists');
|
||||
|
||||
console.groupEnd();
|
||||
}
|
||||
|
||||
// Test Animations
|
||||
function testAnimations() {
|
||||
console.group('Animation Tests');
|
||||
|
||||
const serviceCards = document.querySelectorAll('.service-card');
|
||||
|
||||
serviceCards.forEach(card => {
|
||||
const styles = window.getComputedStyle(card);
|
||||
console.assert(styles.transition.includes('transform'),
|
||||
'Service cards have hover animation');
|
||||
});
|
||||
|
||||
console.groupEnd();
|
||||
}
|
||||
|
||||
// Test UI Components Styling
|
||||
function testStyling() {
|
||||
console.group('Styling Tests');
|
||||
|
||||
const root = document.documentElement;
|
||||
const styles = getComputedStyle(root);
|
||||
|
||||
// Test color scheme
|
||||
console.assert(styles.getPropertyValue('--primary-color') !== '',
|
||||
'Primary color is defined');
|
||||
console.assert(styles.getPropertyValue('--secondary-color') !== '',
|
||||
'Secondary color is defined');
|
||||
|
||||
console.groupEnd();
|
||||
}
|
||||
|
||||
// Run tests when DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
runMarketingTests();
|
||||
});
|
||||
|
||||
// Error handling
|
||||
window.addEventListener('error', (error) => {
|
||||
console.error('Test Error:', error.message);
|
||||
});
|
||||
|
||||
// Helper function to simulate user interactions
|
||||
function simulateUserInteraction() {
|
||||
// Simulate scroll
|
||||
window.scrollTo(0, 500);
|
||||
|
||||
// Simulate form input
|
||||
const form = document.querySelector('.contact-form');
|
||||
const nameInput = form.querySelector('input[type="text"]');
|
||||
const emailInput = form.querySelector('input[type="email"]');
|
||||
|
||||
nameInput.value = 'Test User';
|
||||
emailInput.value = 'test@example.com';
|
||||
|
||||
// Simulate form submission
|
||||
form.dispatchEvent(new Event('submit'));
|
||||
}
|
||||
|
||||
// Run interaction tests
|
||||
setTimeout(simulateUserInteraction, 1000);
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
// Smooth scrolling for navigation links
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
document.querySelector(this.getAttribute('href')).scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Navbar scroll effect
|
||||
window.addEventListener('scroll', function() {
|
||||
const navbar = document.querySelector('.navbar');
|
||||
if (window.scrollY > 50) {
|
||||
navbar.style.backgroundColor = '#ffffff';
|
||||
navbar.style.boxShadow = '0 2px 10px rgba(0,0,0,0.1)';
|
||||
} else {
|
||||
navbar.style.backgroundColor = '#ffffff';
|
||||
navbar.style.boxShadow = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Form submission handling
|
||||
const form = document.querySelector('.contact-form');
|
||||
form.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
// Add your form submission logic here
|
||||
alert('Thank you for your message! We will get back to you soon.');
|
||||
form.reset();
|
||||
});
|
||||
|
||||
// Animation on scroll
|
||||
function revealOnScroll() {
|
||||
const elements = document.querySelectorAll('.service-card, .feature, .stat-item');
|
||||
elements.forEach(element => {
|
||||
const elementTop = element.getBoundingClientRect().top;
|
||||
const elementVisible = 150;
|
||||
|
||||
if (elementTop < window.innerHeight - elementVisible) {
|
||||
element.classList.add('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', revealOnScroll);
|
||||
|
||||
// Initial check for elements in view
|
||||
revealOnScroll();
|
||||
|
||||
// Mobile menu toggle
|
||||
const mobileMenuButton = document.createElement('button');
|
||||
mobileMenuButton.classList.add('mobile-menu-button');
|
||||
mobileMenuButton.innerHTML = '<i class="fas fa-bars"></i>';
|
||||
document.querySelector('.nav-content').prepend(mobileMenuButton);
|
||||
|
||||
mobileMenuButton.addEventListener('click', function() {
|
||||
const navLinks = document.querySelector('.nav-links');
|
||||
navLinks.classList.toggle('show');
|
||||
});
|
||||
|
|
@ -1,284 +0,0 @@
|
|||
/* Base styles */
|
||||
:root {
|
||||
--primary-color: #2563eb;
|
||||
--secondary-color: #1e40af;
|
||||
--text-color: #1f2937;
|
||||
--light-bg: #f3f4f6;
|
||||
--white: #ffffff;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: var(--text-color);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
.navbar {
|
||||
background-color: var(--white);
|
||||
padding: 1rem 0;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.nav-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
color: var(--text-color);
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-links a:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||
padding: 8rem 2rem 4rem;
|
||||
text-align: center;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
background-color: var(--white);
|
||||
color: var(--primary-color);
|
||||
border: none;
|
||||
padding: 1rem 2rem;
|
||||
font-size: 1.1rem;
|
||||
border-radius: 50px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.cta-button:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Services Section */
|
||||
.services {
|
||||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
.service-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
background: var(--white);
|
||||
padding: 2rem;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.service-card:hover {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
.service-card i {
|
||||
font-size: 2.5rem;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Stats Section */
|
||||
.stats {
|
||||
background-color: var(--light-bg);
|
||||
padding: 4rem 0;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 2.5rem;
|
||||
font-weight: bold;
|
||||
color: var(--primary-color);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
color: var(--text-color);
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
/* Features Section */
|
||||
.features {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.feature {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.feature i {
|
||||
font-size: 2rem;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Contact Form */
|
||||
.contact {
|
||||
background-color: var(--light-bg);
|
||||
padding: 4rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.contact-form {
|
||||
max-width: 600px;
|
||||
margin: 2rem auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.contact-form input,
|
||||
.contact-form textarea {
|
||||
padding: 1rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.contact-form textarea {
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
background-color: var(--primary-color);
|
||||
color: var(--white);
|
||||
border: none;
|
||||
padding: 1rem;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.submit-btn:hover {
|
||||
background-color: var(--secondary-color);
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
background-color: var(--text-color);
|
||||
color: var(--white);
|
||||
padding: 3rem 0 1rem;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 2rem;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.footer-section h3 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.social-links {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.social-links a {
|
||||
color: var(--white);
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
text-align: center;
|
||||
margin-top: 2rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
/* Container */
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.nav-content {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.stats {
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,272 @@
|
|||
/* Reset and Base Styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--primary-color: #ff0099;
|
||||
--secondary-color: #00ff99;
|
||||
--accent-color: #6e00ff;
|
||||
--dark: #121212;
|
||||
--light: #f8f9fa;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
line-height: 1.6;
|
||||
color: var(--dark);
|
||||
background-color: var(--dark);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/* Header and Navigation */
|
||||
header {
|
||||
background: rgba(18, 18, 18, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: 0 4px 30px rgba(255, 0, 153, 0.2);
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
margin: 0 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
nav ul li a {
|
||||
text-decoration: none;
|
||||
color: var(--light);
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
nav ul li a:hover {
|
||||
color: var(--dark);
|
||||
background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
|
||||
box-shadow: 0 0 20px rgba(255, 0, 153, 0.4);
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
#hero {
|
||||
height: 100vh;
|
||||
background: linear-gradient(135deg, var(--dark) 0%, #1a1a1a 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle, var(--primary-color) 1%, transparent 10%);
|
||||
background-size: 50px 50px;
|
||||
animation: moveBackground 20s linear infinite;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.hero-content h1 {
|
||||
font-size: 5rem;
|
||||
margin-bottom: 20px;
|
||||
color: var(--light);
|
||||
text-shadow: 0 0 20px var(--primary-color);
|
||||
animation: glitch 5s infinite;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
font-size: 2rem;
|
||||
color: var(--secondary-color);
|
||||
margin-bottom: 15px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
.sub-tagline {
|
||||
font-size: 1.2rem;
|
||||
color: var(--primary-color);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* About Section */
|
||||
#about {
|
||||
background-color: var(--dark);
|
||||
color: var(--light);
|
||||
}
|
||||
|
||||
.about-content {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 2px solid var(--primary-color);
|
||||
border-radius: 20px;
|
||||
padding: 40px;
|
||||
box-shadow: 0 0 30px rgba(255, 0, 153, 0.2);
|
||||
}
|
||||
|
||||
.about-text p {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
/* Experience Section */
|
||||
.experience-card {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 2px solid var(--secondary-color);
|
||||
padding: 40px;
|
||||
border-radius: 20px;
|
||||
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
|
||||
.experience-card:hover {
|
||||
transform: translateY(-15px) scale(1.05);
|
||||
box-shadow: 0 0 30px rgba(0, 255, 153, 0.3);
|
||||
}
|
||||
|
||||
.experience-card i {
|
||||
font-size: 3.5rem;
|
||||
background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.experience-card h3 {
|
||||
color: var(--light);
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.experience-card p {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
/* Contact Section */
|
||||
.contact-content {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 2px solid var(--accent-color);
|
||||
padding: 40px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.social-link {
|
||||
font-size: 2.5rem;
|
||||
color: var(--light);
|
||||
margin: 0 20px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.social-link:hover {
|
||||
color: var(--primary-color);
|
||||
transform: translateY(-5px) scale(1.2);
|
||||
}
|
||||
|
||||
.contact-form input,
|
||||
.contact-form textarea {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 2px solid var(--primary-color);
|
||||
color: var(--light);
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 20px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.contact-form input:focus,
|
||||
.contact-form textarea:focus {
|
||||
border-color: var(--secondary-color);
|
||||
box-shadow: 0 0 20px rgba(0, 255, 153, 0.2);
|
||||
}
|
||||
|
||||
.contact-form button {
|
||||
background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
|
||||
color: var(--dark);
|
||||
font-weight: bold;
|
||||
padding: 15px 40px;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
cursor: pointer;
|
||||
font-size: 1.1rem;
|
||||
transition: all 0.3s ease;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.contact-form button:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 0 30px rgba(255, 0, 153, 0.4);
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
background: var(--dark);
|
||||
color: var(--light);
|
||||
text-align: center;
|
||||
padding: 30px 0;
|
||||
border-top: 4px solid var(--primary-color);
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes glitch {
|
||||
0% { text-shadow: 0 0 20px var(--primary-color); }
|
||||
25% { text-shadow: -2px 0 var(--primary-color), 2px 0 var(--secondary-color); }
|
||||
50% { text-shadow: 2px 0 var(--secondary-color), -2px 0 var(--primary-color); }
|
||||
75% { text-shadow: 0 0 20px var(--secondary-color); }
|
||||
100% { text-shadow: 0 0 20px var(--primary-color); }
|
||||
}
|
||||
|
||||
@keyframes moveBackground {
|
||||
0% { transform: translate(0, 0); }
|
||||
100% { transform: translate(-50%, -50%); }
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.hero-content h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.experience-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,110 +0,0 @@
|
|||
// Enhanced Test Suite for CulinaryHub Website
|
||||
|
||||
// Function to run all tests
|
||||
function runTests() {
|
||||
console.log('%cStarting CulinaryHub Tests...', 'color: blue; font-weight: bold');
|
||||
|
||||
testNavigationLinks();
|
||||
testRecipeCardAnimation();
|
||||
testViewRecipeButton();
|
||||
testResponsiveElements();
|
||||
testStylingProperties();
|
||||
|
||||
console.log('%cTests completed!', 'color: blue; font-weight: bold');
|
||||
}
|
||||
|
||||
// Test Navigation Links
|
||||
function testNavigationLinks() {
|
||||
console.group('Navigation Tests');
|
||||
const navLinks = document.querySelectorAll('.nav-links a');
|
||||
|
||||
// Test quantity
|
||||
console.assert(navLinks.length === 3, 'Expected 3 navigation links, found: ' + navLinks.length);
|
||||
console.log(navLinks.length === 3 ? '✓ Correct number of navigation links' : '✗ Wrong number of links');
|
||||
|
||||
// Test active state
|
||||
navLinks[1].click();
|
||||
setTimeout(() => {
|
||||
console.assert(navLinks[1].classList.contains('active'), 'Active state not working');
|
||||
console.log(navLinks[1].classList.contains('active') ? '✓ Active state working' : '✗ Active state failed');
|
||||
}, 100);
|
||||
|
||||
// Test link text content
|
||||
const expectedLinks = ['Recipes', 'Techniques', 'Kitchen Tips'];
|
||||
navLinks.forEach((link, index) => {
|
||||
console.assert(link.textContent === expectedLinks[index],
|
||||
`Link text mismatch: Expected ${expectedLinks[index]}, got ${link.textContent}`);
|
||||
});
|
||||
console.groupEnd();
|
||||
}
|
||||
|
||||
// Test Recipe Card Animation
|
||||
function testRecipeCardAnimation() {
|
||||
console.group('Recipe Card Tests');
|
||||
const miniCards = document.querySelectorAll('.mini-card');
|
||||
const mainCard = document.querySelector('.recipe-card');
|
||||
|
||||
// Test mini cards
|
||||
console.assert(miniCards.length === 3, 'Expected 3 mini cards, found: ' + miniCards.length);
|
||||
console.log(miniCards.length === 3 ? '✓ Correct number of mini cards' : '✗ Wrong number of cards');
|
||||
|
||||
// Test main recipe card content
|
||||
console.assert(mainCard !== null, 'Main recipe card exists');
|
||||
console.assert(mainCard.querySelector('h2').textContent === 'Classic Pasta Carbonara',
|
||||
'Main recipe card title correct');
|
||||
console.groupEnd();
|
||||
}
|
||||
|
||||
// Test View Recipe Button
|
||||
function testViewRecipeButton() {
|
||||
console.group('Button Tests');
|
||||
const viewButton = document.querySelector('.btn');
|
||||
|
||||
console.assert(viewButton !== null, 'View Recipe button exists');
|
||||
console.log(viewButton ? '✓ View Recipe button found' : '✗ Button not found');
|
||||
|
||||
// Test button styling
|
||||
const styles = window.getComputedStyle(viewButton);
|
||||
console.assert(styles.backgroundColor.includes('231, 76, 60') || styles.backgroundColor.includes('#e74c3c'),
|
||||
'Button has correct background color');
|
||||
console.groupEnd();
|
||||
}
|
||||
|
||||
// Test Responsive Elements
|
||||
function testResponsiveElements() {
|
||||
console.group('Responsive Design Tests');
|
||||
const container = document.querySelector('.container');
|
||||
const recipeGrid = document.querySelector('.recipe-grid');
|
||||
|
||||
console.assert(container !== null, 'Container exists');
|
||||
console.assert(recipeGrid !== null, 'Recipe grid exists');
|
||||
|
||||
// Test responsive styles
|
||||
const mediaQuery = window.matchMedia('(max-width: 768px)');
|
||||
console.log(`Current viewport width: ${window.innerWidth}px`);
|
||||
console.log(`Responsive mode: ${mediaQuery.matches ? 'Mobile' : 'Desktop'}`);
|
||||
console.groupEnd();
|
||||
}
|
||||
|
||||
// Test Styling Properties
|
||||
function testStylingProperties() {
|
||||
console.group('Styling Tests');
|
||||
const body = document.body;
|
||||
const styles = window.getComputedStyle(body);
|
||||
|
||||
console.assert(styles.fontFamily.includes('Segoe UI'), 'Correct font family applied');
|
||||
console.assert(styles.backgroundColor === 'rgb(247, 243, 237)', 'Correct background color');
|
||||
|
||||
// Test layout
|
||||
console.assert(styles.display === 'flex', 'Body uses flex layout');
|
||||
console.assert(styles.flexDirection === 'column', 'Body uses column direction');
|
||||
console.groupEnd();
|
||||
}
|
||||
|
||||
// Run tests when DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', runTests);
|
||||
|
||||
// Add error handling
|
||||
window.addEventListener('error', function(e) {
|
||||
console.error('Test Error:', e.message);
|
||||
});
|
||||
Loading…
Reference in New Issue