Transform repository into a modern blog website
- Created responsive blog layout with hero section, navigation, and footer - Implemented modern CSS with gradients, animations, and mobile-first design - Added interactive JavaScript for mobile menu, smooth scrolling, and scroll effects - Created blog post structure with sample welcome post - Added Font Awesome icons and Google Fonts integration - Implemented modern blog card design with hover effects - Added about and contact sections for complete blog experience 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Paweł Orzech
parent
061ba46513
commit
58096c3fd8
4 changed files with 908 additions and 0 deletions
141
index.html
Normal file
141
index.html
Normal file
|
|
@ -0,0 +1,141 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Pawel Orzech - Blog</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter: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-container">
|
||||||
|
<div class="nav-logo">
|
||||||
|
<h2>Pawel Orzech</h2>
|
||||||
|
</div>
|
||||||
|
<ul class="nav-menu">
|
||||||
|
<li class="nav-item">
|
||||||
|
<a href="#home" class="nav-link">Home</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a href="#blog" class="nav-link">Blog</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a href="#about" class="nav-link">About</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a href="#contact" class="nav-link">Contact</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="hamburger">
|
||||||
|
<span class="bar"></span>
|
||||||
|
<span class="bar"></span>
|
||||||
|
<span class="bar"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section id="home" class="hero">
|
||||||
|
<div class="hero-content">
|
||||||
|
<h1>Welcome to My Blog</h1>
|
||||||
|
<p class="hero-subtitle">Thoughts, ideas, and stories from my journey</p>
|
||||||
|
<a href="#blog" class="cta-button">Read My Posts</a>
|
||||||
|
</div>
|
||||||
|
<div class="hero-bg"></div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="blog" class="blog-section">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-title">Latest Posts</h2>
|
||||||
|
<div class="blog-grid">
|
||||||
|
<article class="blog-card">
|
||||||
|
<div class="blog-image">
|
||||||
|
<div class="placeholder-image">
|
||||||
|
<i class="fas fa-image"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="blog-content">
|
||||||
|
<div class="blog-meta">
|
||||||
|
<span class="blog-date">September 7, 2025</span>
|
||||||
|
<span class="blog-tag">Welcome</span>
|
||||||
|
</div>
|
||||||
|
<h3>Welcome to My Blog</h3>
|
||||||
|
<p>This is my first blog post! I'm excited to share my thoughts and experiences with you.</p>
|
||||||
|
<a href="posts/welcome.html" class="read-more">Read More</a>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="blog-card">
|
||||||
|
<div class="blog-image">
|
||||||
|
<div class="placeholder-image">
|
||||||
|
<i class="fas fa-code"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="blog-content">
|
||||||
|
<div class="blog-meta">
|
||||||
|
<span class="blog-date">Coming Soon</span>
|
||||||
|
<span class="blog-tag">Tech</span>
|
||||||
|
</div>
|
||||||
|
<h3>My Development Journey</h3>
|
||||||
|
<p>Exploring the world of software development and sharing insights along the way.</p>
|
||||||
|
<a href="#" class="read-more disabled">Coming Soon</a>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="blog-card">
|
||||||
|
<div class="blog-image">
|
||||||
|
<div class="placeholder-image">
|
||||||
|
<i class="fas fa-lightbulb"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="blog-content">
|
||||||
|
<div class="blog-meta">
|
||||||
|
<span class="blog-date">Coming Soon</span>
|
||||||
|
<span class="blog-tag">Ideas</span>
|
||||||
|
</div>
|
||||||
|
<h3>Creative Thoughts</h3>
|
||||||
|
<p>Random thoughts and creative ideas that inspire me in my daily life.</p>
|
||||||
|
<a href="#" class="read-more disabled">Coming Soon</a>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="about" class="about-section">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-title">About Me</h2>
|
||||||
|
<div class="about-content">
|
||||||
|
<div class="about-text">
|
||||||
|
<p>Hi! I'm Pawel, and this is my personal blog where I share my thoughts, experiences, and ideas.</p>
|
||||||
|
<p>Welcome to my corner of the internet. I'm excited to connect with you through my writing.</p>
|
||||||
|
</div>
|
||||||
|
<div class="about-links">
|
||||||
|
<a href="#" class="social-link"><i class="fab fa-github"></i></a>
|
||||||
|
<a href="#" class="social-link"><i class="fab fa-linkedin"></i></a>
|
||||||
|
<a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="contact" class="contact-section">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-title">Get In Touch</h2>
|
||||||
|
<p class="contact-text">Have something to say? I'd love to hear from you.</p>
|
||||||
|
<a href="mailto:contact@example.com" class="contact-button">Send Email</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="container">
|
||||||
|
<p>© 2025 Pawel Orzech. All rights reserved.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
219
posts/welcome.html
Normal file
219
posts/welcome.html
Normal file
|
|
@ -0,0 +1,219 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Welcome to My Blog - Pawel Orzech</title>
|
||||||
|
<link rel="stylesheet" href="../style.css">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter: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">
|
||||||
|
<style>
|
||||||
|
.post-header {
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
color: white;
|
||||||
|
padding: 120px 0 80px 0;
|
||||||
|
margin-top: 70px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 60px 20px;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-meta {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
border-bottom: 1px solid #e5e7eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-title {
|
||||||
|
font-size: 3rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-subtitle {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
opacity: 0.9;
|
||||||
|
text-align: center;
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-button {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
background: white;
|
||||||
|
color: #2563eb;
|
||||||
|
padding: 12px 24px;
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 25px;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-button:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 5px 15px rgba(37, 99, 235, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content h2 {
|
||||||
|
color: #1f2937;
|
||||||
|
font-size: 2rem;
|
||||||
|
margin: 2rem 0 1rem 0;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content h3 {
|
||||||
|
color: #374151;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin: 1.5rem 0 1rem 0;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content p {
|
||||||
|
color: #4b5563;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content blockquote {
|
||||||
|
background: #f9fafb;
|
||||||
|
border-left: 4px solid #2563eb;
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
margin: 2rem 0;
|
||||||
|
font-style: italic;
|
||||||
|
border-radius: 0 8px 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content code {
|
||||||
|
background: #f3f4f6;
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-family: 'Courier New', monospace;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #1f2937;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-navigation {
|
||||||
|
background: #f9fafb;
|
||||||
|
padding: 40px 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.post-title {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content {
|
||||||
|
padding: 40px 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<nav class="navbar">
|
||||||
|
<div class="nav-container">
|
||||||
|
<div class="nav-logo">
|
||||||
|
<h2>Pawel Orzech</h2>
|
||||||
|
</div>
|
||||||
|
<ul class="nav-menu">
|
||||||
|
<li class="nav-item">
|
||||||
|
<a href="../index.html" class="nav-link">Home</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a href="../index.html#blog" class="nav-link">Blog</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a href="../index.html#about" class="nav-link">About</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a href="../index.html#contact" class="nav-link">Contact</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="hamburger">
|
||||||
|
<span class="bar"></span>
|
||||||
|
<span class="bar"></span>
|
||||||
|
<span class="bar"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<header class="post-header">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="post-title">Welcome to My Blog</h1>
|
||||||
|
<p class="post-subtitle">The beginning of a new journey in sharing thoughts and ideas</p>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="post-content">
|
||||||
|
<a href="../index.html#blog" class="back-button">
|
||||||
|
<i class="fas fa-arrow-left"></i>
|
||||||
|
Back to Blog
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="post-meta">
|
||||||
|
<span><i class="fas fa-calendar"></i> September 7, 2025</span>
|
||||||
|
<span><i class="fas fa-tag"></i> Welcome</span>
|
||||||
|
<span><i class="fas fa-clock"></i> 3 min read</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>Hello World!</h2>
|
||||||
|
|
||||||
|
<p>Welcome to my personal blog! This is my first post, and I'm excited to begin this journey of sharing my thoughts, experiences, and ideas with you.</p>
|
||||||
|
|
||||||
|
<p>Starting a blog has been something I've been thinking about for a while. There's something magical about putting thoughts into words and sharing them with the world. Whether you're here by accident or intention, I'm glad you stopped by.</p>
|
||||||
|
|
||||||
|
<h3>What You Can Expect</h3>
|
||||||
|
|
||||||
|
<p>This blog will be a mix of various topics that interest me:</p>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li><strong>Technology & Development:</strong> Insights from my coding journey, useful tips, and interesting discoveries in the world of software development.</li>
|
||||||
|
<li><strong>Personal Thoughts:</strong> Reflections on life, learning, and growth.</li>
|
||||||
|
<li><strong>Creative Ideas:</strong> Random thoughts and creative projects that inspire me.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<blockquote>
|
||||||
|
"The best time to plant a tree was 20 years ago. The second best time is now." - Chinese Proverb
|
||||||
|
</blockquote>
|
||||||
|
|
||||||
|
<p>I believe in the power of sharing knowledge and experiences. Every post here will be written with the hope that it might help someone, spark an idea, or simply provide an interesting read during your coffee break.</p>
|
||||||
|
|
||||||
|
<h3>Let's Connect</h3>
|
||||||
|
|
||||||
|
<p>I'd love to hear from you! Feel free to reach out through the contact section on the main page. Whether you have feedback, questions, or just want to say hello, I'm always open to connecting with fellow readers and learners.</p>
|
||||||
|
|
||||||
|
<p>Thank you for being here at the beginning of this journey. Here's to many more posts, ideas, and connections ahead!</p>
|
||||||
|
|
||||||
|
<p><em>Happy reading!</em><br>
|
||||||
|
Pawel</p>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<div class="post-navigation">
|
||||||
|
<div class="container">
|
||||||
|
<a href="../index.html#blog" class="cta-button">
|
||||||
|
<i class="fas fa-arrow-left"></i>
|
||||||
|
Back to All Posts
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="container">
|
||||||
|
<p>© 2025 Pawel Orzech. All rights reserved.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="../script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
109
script.js
Normal file
109
script.js
Normal file
|
|
@ -0,0 +1,109 @@
|
||||||
|
// Mobile Navigation Toggle
|
||||||
|
const hamburger = document.querySelector('.hamburger');
|
||||||
|
const navMenu = document.querySelector('.nav-menu');
|
||||||
|
|
||||||
|
hamburger.addEventListener('click', mobileMenu);
|
||||||
|
|
||||||
|
function mobileMenu() {
|
||||||
|
hamburger.classList.toggle('active');
|
||||||
|
navMenu.classList.toggle('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Close mobile menu when clicking on a nav link
|
||||||
|
const navLinks = document.querySelectorAll('.nav-link');
|
||||||
|
|
||||||
|
navLinks.forEach(n => n.addEventListener('click', closeMenu));
|
||||||
|
|
||||||
|
function closeMenu() {
|
||||||
|
hamburger.classList.remove('active');
|
||||||
|
navMenu.classList.remove('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Smooth scrolling for navigation links
|
||||||
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||||
|
anchor.addEventListener('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
const target = document.querySelector(this.getAttribute('href'));
|
||||||
|
if (target) {
|
||||||
|
target.scrollIntoView({
|
||||||
|
behavior: 'smooth',
|
||||||
|
block: 'start'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Navbar scroll effect
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
const navbar = document.querySelector('.navbar');
|
||||||
|
if (window.scrollY > 100) {
|
||||||
|
navbar.style.background = 'rgba(255, 255, 255, 0.98)';
|
||||||
|
navbar.style.boxShadow = '0 2px 30px rgba(0, 0, 0, 0.15)';
|
||||||
|
} else {
|
||||||
|
navbar.style.background = 'rgba(255, 255, 255, 0.95)';
|
||||||
|
navbar.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.1)';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Intersection Observer for animations
|
||||||
|
const observerOptions = {
|
||||||
|
threshold: 0.1,
|
||||||
|
rootMargin: '0px 0px -50px 0px'
|
||||||
|
};
|
||||||
|
|
||||||
|
const observer = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
entry.target.style.opacity = '1';
|
||||||
|
entry.target.style.transform = 'translateY(0)';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, observerOptions);
|
||||||
|
|
||||||
|
// Observe elements for animation
|
||||||
|
document.querySelectorAll('.blog-card, .section-title, .about-text, .contact-text').forEach(el => {
|
||||||
|
el.style.opacity = '0';
|
||||||
|
el.style.transform = 'translateY(20px)';
|
||||||
|
el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
|
||||||
|
observer.observe(el);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add loading effect
|
||||||
|
window.addEventListener('load', () => {
|
||||||
|
document.body.classList.add('loaded');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Parallax effect for hero section
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
const scrolled = window.pageYOffset;
|
||||||
|
const heroBackground = document.querySelector('.hero-bg');
|
||||||
|
if (heroBackground) {
|
||||||
|
heroBackground.style.transform = `translateY(${scrolled * 0.5}px)`;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Dynamic typing effect for hero title (optional enhancement)
|
||||||
|
function typeWriter(element, text, speed = 100) {
|
||||||
|
let i = 0;
|
||||||
|
element.innerHTML = '';
|
||||||
|
|
||||||
|
function type() {
|
||||||
|
if (i < text.length) {
|
||||||
|
element.innerHTML += text.charAt(i);
|
||||||
|
i++;
|
||||||
|
setTimeout(type, speed);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
type();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize typing effect when page loads
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const heroTitle = document.querySelector('.hero h1');
|
||||||
|
if (heroTitle) {
|
||||||
|
const originalText = heroTitle.textContent;
|
||||||
|
setTimeout(() => {
|
||||||
|
typeWriter(heroTitle, originalText, 80);
|
||||||
|
}, 500);
|
||||||
|
}
|
||||||
|
});
|
||||||
439
style.css
Normal file
439
style.css
Normal file
|
|
@ -0,0 +1,439 @@
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: #333;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Navigation */
|
||||||
|
.navbar {
|
||||||
|
background: rgba(255, 255, 255, 0.95);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 1000;
|
||||||
|
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 1rem 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-logo h2 {
|
||||||
|
color: #2563eb;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-menu {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
list-style: none;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link:hover {
|
||||||
|
color: #2563eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 2px;
|
||||||
|
bottom: -5px;
|
||||||
|
left: 0;
|
||||||
|
background-color: #2563eb;
|
||||||
|
transition: width 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link:hover::after {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger {
|
||||||
|
display: none;
|
||||||
|
flex-direction: column;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar {
|
||||||
|
width: 25px;
|
||||||
|
height: 3px;
|
||||||
|
background-color: #333;
|
||||||
|
margin: 3px 0;
|
||||||
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hero Section */
|
||||||
|
.hero {
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-bg {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
opacity: 0.1;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'%3E%3Cpath d='m0 40l40-40h-40v40zm40 0v-40h-40l40 40z'/%3E%3C/g%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content {
|
||||||
|
z-index: 2;
|
||||||
|
max-width: 600px;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero h1 {
|
||||||
|
font-size: 3.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
animation: fadeInUp 1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-subtitle {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
opacity: 0.9;
|
||||||
|
animation: fadeInUp 1s ease 0.2s both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-button {
|
||||||
|
display: inline-block;
|
||||||
|
background: white;
|
||||||
|
color: #2563eb;
|
||||||
|
padding: 15px 30px;
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 50px;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
animation: fadeInUp 1s ease 0.4s both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-button:hover {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sections */
|
||||||
|
.blog-section,
|
||||||
|
.about-section,
|
||||||
|
.contact-section {
|
||||||
|
padding: 80px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
color: #1f2937;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title::after {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
width: 50px;
|
||||||
|
height: 3px;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
margin: 1rem auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Blog Grid */
|
||||||
|
.blog-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||||
|
gap: 2rem;
|
||||||
|
margin-top: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card {
|
||||||
|
background: white;
|
||||||
|
border-radius: 15px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card:hover {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-image {
|
||||||
|
height: 200px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.placeholder-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: white;
|
||||||
|
font-size: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-content {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-meta {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-date {
|
||||||
|
color: #6b7280;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-tag {
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
color: white;
|
||||||
|
padding: 0.25rem 0.75rem;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-content h3 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
color: #1f2937;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-content p {
|
||||||
|
color: #6b7280;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.read-more {
|
||||||
|
color: #2563eb;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.read-more:hover {
|
||||||
|
color: #1d4ed8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.read-more.disabled {
|
||||||
|
color: #9ca3af;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* About Section */
|
||||||
|
.about-section {
|
||||||
|
background: #f9fafb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-content {
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-text p {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: #4b5563;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-links {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-link {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
color: white;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-link:hover {
|
||||||
|
transform: translateY(-3px) scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Contact Section */
|
||||||
|
.contact-section {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-text {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: #4b5563;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
max-width: 500px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-button {
|
||||||
|
display: inline-block;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
color: white;
|
||||||
|
padding: 15px 30px;
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 50px;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-button:hover {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
.footer {
|
||||||
|
background: #1f2937;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
padding: 2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animations */
|
||||||
|
@keyframes fadeInUp {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(30px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Design */
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.nav-menu {
|
||||||
|
position: fixed;
|
||||||
|
left: -100%;
|
||||||
|
top: 70px;
|
||||||
|
flex-direction: column;
|
||||||
|
background-color: white;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
transition: 0.3s;
|
||||||
|
box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
|
||||||
|
padding: 2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-menu.active {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger.active .bar:nth-child(2) {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger.active .bar:nth-child(1) {
|
||||||
|
transform: translateY(8px) rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger.active .bar:nth-child(3) {
|
||||||
|
transform: translateY(-8px) rotate(-45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero h1 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
padding: 0 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 480px) {
|
||||||
|
.hero h1 {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-subtitle {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card {
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue