<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyBlog - Blog Pribadi Anda</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
line-height: 1.6;
color: #333;
overflow-x: hidden;
}
/* Header */
header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: 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 {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2rem;
}
.logo {
font-size: 1.8rem;
font-weight: 700;
text-decoration: none;
color: white;
}
.nav-links {
display: flex;
list-style: none;
gap: 2rem;
}
.nav-links a {
color: white;
text-decoration: none;
font-weight: 500;
transition: opacity 0.3s;
}
.nav-links a:hover {
opacity: 0.8;
}
.hamburger {
display: none;
flex-direction: column;
cursor: pointer;
}
.hamburger span {
width: 25px;
height: 3px;
background: white;
margin: 3px 0;
transition: 0.3s;
}
/* Hero Section */
.hero {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
padding: 120px 2rem 80px;
text-align: center;
}
.hero h1 {
font-size: 3.5rem;
margin-bottom: 1rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero p {
font-size: 1.3rem;
margin-bottom: 2rem;
color: #666;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.cta-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, box-shadow 0.3s;
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
}
.cta-button:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(102, 126, 234, 0.6);
}
/* Main Content */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.posts-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin: 4rem 0;
}
.post-card {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
transition: transform 0.3s, box-shadow 0.3s;
cursor: pointer;
}
.post-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.post-image {
height: 200px;
background: linear-gradient(45deg, #667eea, #764ba2);
position: relative;
overflow: hidden;
}
.post-image::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: left 0.5s;
}
.post-card:hover .post-image::before {
left: 100%;
}
.post-content {
padding: 2rem;
}
.post-category {
display: inline-block;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
padding: 5px 15px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
margin-bottom: 1rem;
}
.post-title {
font-size: 1.5rem;
margin-bottom: 1rem;
color: #333;
line-height: 1.3;
}
.post-meta {
display: flex;
justify-content: space-between;
align-items: center;
color: #666;
font-size: 0.9rem;
margin-bottom: 1rem;
}
.post-excerpt {
color: #666;
margin-bottom: 1.5rem;
line-height: 1.6;
}
/* Pagination */
.pagination {
display: flex;
justify-content: center;
gap: 1rem;
margin: 4rem 0;
}
.page-btn {
padding: 12px 20px;
border: 2px solid #667eea;
background: white;
color: #667eea;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s;
font-weight: 500;
}
.page-btn:hover,
.page-btn.active {
background: #667eea;
color: white;
}
/* Footer */
footer {
background: #2c3e50;
color: white;
text-align: center;
padding: 3rem 0 1rem;
margin-top: 4rem;
}
.social-links {
display: flex;
justify-content: center;
gap: 1rem;
margin-bottom: 2rem;
}
.social-links a {
width: 50px;
height: 50px;
background: rgba(255,255,255,0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
transition: all 0.3s;
}
.social-links a:hover {
background: #667eea;
transform: translateY(-3px);
}
/* Responsive */
@media (max-width: 768px) {
.hamburger {
display: flex;
}
.nav-links {
position: fixed;
left: -100%;
top: 70px;
flex-direction: column;
background-color: rgba(102, 126, 234, 0.95);
width: 100%;
text-align: center;
transition: 0.3s;
padding: 2rem 0;
}
.nav-links.active {
left: 0;
}
.hero h1 {
font-size: 2.5rem;
}
.posts-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.container {
padding: 0 1rem;
}
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.post-card {
animation: fadeInUp 0.6s ease forwards;
}
.post-card:nth-child(1) { animation-delay: 0.1s; }
.post-card:nth-child(2) { animation-delay: 0.2s; }
.post-card:nth-child(3) { animation-delay: 0.3s; }
</style>
</head>
<body>
<!-- Header -->
<header>
<nav>
<a href="#" class="logo">MyBlog</a>
<ul class="nav-links">
<li><a href="#home">Home</a></li>
<li><a href="#posts">Artikel</a></li>
<li><a href="#about">Tentang</a></li>
<li><a href="#contact">Kontak</a></li>
</ul>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</nav>
</header>
<!-- Hero Section -->
<section class="hero" id="home">
<div class="container">
<h1>Selamat Datang di MyBlog</h1>
<p>Tempat berbagi cerita, pengetahuan, dan inspirasi. Temukan artikel menarik yang akan menginspirasi hari Anda!</p>
<a href="#posts" class="cta-button">Baca Artikel Terbaru</a>
</div>
</section>
<!-- Posts Section -->
<section id="posts" class="container">
<h2 style="text-align: center; font-size: 2.5rem; margin-bottom: 3rem; color: #333;">Artikel Terbaru</h2>
<div class="posts-grid">
<div class="post-card">
<div class="post-image"></div>
<div class="post-content">
<span class="post-category">Teknologi</span>
<h3 class="post-title">Mengenal Artificial Intelligence di 2024</h3>
<div class="post-meta">
<span><i class="fas fa-user"></i> John Doe</span>
<span><i class="fas fa-calendar"></i> 15 Jan 2024</span>
</div>
<p class="post-excerpt">Artificial Intelligence telah mengubah cara kita bekerja dan hidup. Pelajari perkembangan terbaru AI dan bagaimana dampaknya terhadap masa depan...</p>
</div>
</div>
<div class="post-card">
<div class="post-image"></div>
<div class="post-content">
<span class="post-category">Bisnis</span>
<h3 class="post-title">Strategi Marketing Digital yang Efektif</h3>
<div class="post-meta">
<span><i class="fas fa-user"></i> Jane Smith</span>
<span><i class="fas fa-calendar"></i> 14 Jan 2024</span>
</div>
<p class="post-excerpt">Dalam era digital saat ini, strategi marketing yang tepat sangat penting untuk kesuksesan bisnis. Temukan 7 strategi terbaik...</p>
</div>
</div>
<div class="post-card">
<div class="post-image"></div>
<div class="post-content">
<span class="post-category">Kesehatan</span>
<h3 class="post-title">5 Kebiasaan Sehat untuk Produktivitas Tinggi</h3>
<div class="post-meta">
<span><i class="fas fa-user"></i> Dr. Ahmad</span>
<span><i class="fas fa-calendar"></i> 13 Jan 2024</span>
</div>
<p class="post-excerpt">Kesehatan fisik dan mental sangat berpengaruh terhadap produktivitas. Berikut 5 kebiasaan sederhana yang bisa Anda terapkan...</p>
</div>
</div>
<div class="post-card">
<div class="post-image"></div>
<div class="post-content">
<span class="post-category">Travel</span>
<h3 class="post-title">10 Destinasi Wisata Tersembunyi di Indonesia</h3>
<div class="post-meta">
<span><i class="fas fa-user"></i> Rina</span>
<span><i class="fas fa-calendar"></i> 12 Jan 2024</span>
</div>
<p class="post-excerpt">Indonesia memiliki banyak destinasi indah yang belum banyak diketahui. Temukan tempat-tempat menakjubkan untuk liburan Anda...</p>
</div>
</div>
</div>
<div class="pagination">
<button class="page-btn">« Sebelumnya</button>
<button class="page-btn active">1</button>
<button class="page-btn">2</button>
<button class="page-btn">3</button>
<button class="page-btn">Selanjutnya »</button>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<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-instagram"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
</div>
<p>© 2024 MyBlog. Dibuat dengan ❤️ untuk berbagi pengetahuan.</p>
</div>
</footer>
<script>
// Mobile menu toggle
const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');
hamburger.addEventListener('click', () => {
navLinks.classList.toggle('active');
});
// Smooth scrolling
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'
});
}
navLinks.classList.remove('active');
});
});
// Active page button
document.querySelectorAll('.page-btn').forEach(btn => {
btn.addEventListener('click', function() {
document.querySelectorAll('.page-btn').forEach(b => b.classList.remove('active'));
this.classList.add('active');
});
});
// Navbar background on scroll
window.addEventListener('scroll', () => {
const header = document.querySelector('header');
if (window.scrollY > 100) {
header.style.background = 'rgba(102, 126, 234, 0.95)';
header.style.backdropFilter = 'blur(10px)';
} else {
header.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
header.style.backdropFilter = 'none';
}
});
// Intersection Observer for animations
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
});
document.querySelectorAll('.post-card').forEach(card => {
observer.observe(card);
});
</script>
</body>
</html>
0 comments:
Post a Comment