Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Blog - booknap</title> | |
| <link rel="stylesheet" href="styles.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.0.0/css/all.min.css" /> | |
| <style> | |
| :root { | |
| --bg: #0f172a; | |
| --card: #0b1223; | |
| --muted: #94a3b8; | |
| --text: #e2e8f0; | |
| --brand: #3b82f6; | |
| --brand-2: #6366f1; | |
| } | |
| body { | |
| background: linear-gradient(180deg, #0b1020, #0b1022 30%, #0b1124); | |
| min-height: 100vh; | |
| color: var(--text); | |
| } | |
| /* Match pricing header/nav styling */ | |
| .header { position: sticky; top: 0; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); background: rgba(7,10,20,0.55); z-index: 20; box-shadow: none; } | |
| .nav { border-bottom: 1px solid rgba(255,255,255,0.06); } | |
| .nav-logo i { color: var(--brand); } | |
| .nav-link { color: var(--muted); text-decoration: none; font-weight: 600; } | |
| .nav-link:hover, .nav-link.active { color: var(--text); } | |
| /* Navigation Login Button */ | |
| .nav-container { | |
| display: flex; | |
| align-items: center; | |
| gap: 2rem; | |
| } | |
| .nav-menu { | |
| display: flex; | |
| align-items: center; | |
| gap: 2rem; | |
| margin-left: auto; | |
| list-style: none; | |
| } | |
| .nav-menu li { | |
| position: relative; | |
| } | |
| .nav-login { | |
| margin-left: 0; | |
| } | |
| .login-btn { | |
| background: linear-gradient(90deg, #3b82f6, #6366f1); | |
| color: white; | |
| padding: 0.75rem 1.5rem; | |
| border-radius: 8px; | |
| text-decoration: none; | |
| font-weight: 600; | |
| transition: background-color 0.2s ease; | |
| display: inline-block; | |
| } | |
| .login-btn:hover { | |
| background: linear-gradient(90deg, #2563eb, #4f46e5); | |
| } | |
| .signup-btn { | |
| background: transparent; | |
| color: var(--text); | |
| padding: 0.75rem 1.5rem; | |
| border: 2px solid rgba(255, 255, 255, 0.2); | |
| border-radius: 8px; | |
| text-decoration: none; | |
| font-weight: 600; | |
| transition: all 0.2s ease; | |
| display: inline-block; | |
| margin-left: 0.5rem; | |
| } | |
| .signup-btn:hover { | |
| background: rgba(255, 255, 255, 0.1); | |
| border-color: rgba(255, 255, 255, 0.4); | |
| } | |
| /* Search Bar Styles */ | |
| .search-container { | |
| margin-left: 0.5rem; | |
| } | |
| .search-bar { | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| background: rgba(0, 0, 0, 0.3); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| border-radius: 25px; | |
| padding: 0.5rem 1rem; | |
| min-width: 300px; | |
| transition: all 0.3s ease; | |
| } | |
| .search-bar:focus-within { | |
| background: rgba(0, 0, 0, 0.4); | |
| border-color: rgba(59, 130, 246, 0.5); | |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); | |
| } | |
| .search-icon { | |
| color: rgba(255, 255, 255, 0.6); | |
| margin-right: 0.75rem; | |
| font-size: 0.9rem; | |
| } | |
| .search-input { | |
| background: transparent; | |
| border: none; | |
| color: var(--text); | |
| font-size: 0.9rem; | |
| font-weight: 500; | |
| width: 100%; | |
| outline: none; | |
| } | |
| .search-input::placeholder { | |
| color: rgba(255, 255, 255, 0.5); | |
| } | |
| /* Dropdown Menu Styles */ | |
| .dropdown { | |
| position: relative; | |
| } | |
| .dropdown-toggle { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .dropdown-toggle i { | |
| font-size: 0.8rem; | |
| transition: transform 0.2s ease; | |
| } | |
| .dropdown.active .dropdown-toggle i { | |
| transform: rotate(180deg); | |
| } | |
| .dropdown-menu { | |
| position: absolute; | |
| top: 100%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background: rgba(15, 23, 42, 0.95); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 12px; | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); | |
| min-width: 500px; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all 0.3s ease; | |
| z-index: 1000; | |
| margin-top: 1rem; | |
| -webkit-backdrop-filter: blur(10px); | |
| backdrop-filter: blur(10px); | |
| } | |
| .dropdown.active .dropdown-menu { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .dropdown-content { | |
| display: flex; | |
| padding: 2rem; | |
| } | |
| .dropdown-section { | |
| flex: 1; | |
| } | |
| .dropdown-section h4 { | |
| color: #e2e8f0; | |
| font-size: 0.875rem; | |
| font-weight: 600; | |
| margin: 0 0 1rem 0; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .dropdown-section ul { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .dropdown-section li { | |
| margin-bottom: 0.75rem; | |
| } | |
| .dropdown-section a { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| color: #94a3b8; | |
| text-decoration: none; | |
| font-size: 0.875rem; | |
| padding: 0.5rem; | |
| border-radius: 8px; | |
| transition: all 0.2s ease; | |
| } | |
| .dropdown-section a:hover { | |
| background: rgba(255, 255, 255, 0.1); | |
| color: #e2e8f0; | |
| } | |
| .dropdown-section i { | |
| font-size: 1rem; | |
| width: 20px; | |
| text-align: center; | |
| } | |
| .dropdown-divider { | |
| width: 1px; | |
| background: rgba(255, 255, 255, 0.2); | |
| margin: 0 1.5rem; | |
| } | |
| .all-categories { | |
| color: #60a5fa ; | |
| font-weight: 600; | |
| margin-top: 0.5rem; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.25rem; | |
| } | |
| .all-categories:hover { | |
| color: #93c5fd ; | |
| } | |
| /* Mobile Navigation */ | |
| .nav-toggle { | |
| display: none; | |
| flex-direction: column; | |
| cursor: pointer; | |
| gap: 4px; | |
| } | |
| .nav-toggle span { | |
| width: 25px; | |
| height: 3px; | |
| background: var(--text); | |
| border-radius: 2px; | |
| transition: all 0.3s ease; | |
| } | |
| @media (max-width: 768px) { | |
| .nav-menu { | |
| display: none; | |
| } | |
| .nav-menu.active { | |
| display: flex; | |
| flex-direction: column; | |
| position: absolute; | |
| top: 100%; | |
| left: 0; | |
| right: 0; | |
| background: rgba(15, 23, 42, 0.95); | |
| -webkit-backdrop-filter: blur(10px); | |
| backdrop-filter: blur(10px); | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| padding: 1rem; | |
| } | |
| .nav-toggle { | |
| display: flex; | |
| } | |
| .search-container { | |
| display: none; | |
| } | |
| } | |
| /* Blog Page Styles */ | |
| .blog-hero { | |
| padding: 4rem 0 3rem; | |
| text-align: center; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .blog-hero h1 { | |
| font-size: 3rem; | |
| font-weight: 700; | |
| margin-bottom: 1rem; | |
| background: linear-gradient(135deg, #3b82f6, #6366f1); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .blog-hero p { | |
| font-size: 1.25rem; | |
| color: var(--muted); | |
| line-height: 1.6; | |
| margin-bottom: 2rem; | |
| } | |
| .blog-grid { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 1rem 4rem; | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .blog-card { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 16px; | |
| overflow: hidden; | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .blog-card:hover { | |
| transform: translateY(-8px); | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); | |
| } | |
| .blog-card-image { | |
| width: 100%; | |
| height: 200px; | |
| background-size: cover; | |
| background-position: center; | |
| position: relative; | |
| } | |
| .blog-card-content { | |
| padding: 1.5rem; | |
| } | |
| .blog-card-title { | |
| font-size: 1.25rem; | |
| font-weight: 600; | |
| margin-bottom: 0.5rem; | |
| color: var(--text); | |
| line-height: 1.4; | |
| } | |
| .blog-card-date { | |
| color: var(--muted); | |
| font-size: 0.875rem; | |
| margin-bottom: 1rem; | |
| } | |
| .blog-card-link { | |
| color: #8b5cf6; | |
| text-decoration: none; | |
| font-weight: 600; | |
| font-size: 0.875rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| transition: color 0.3s ease; | |
| } | |
| .blog-card-link:hover { | |
| color: #a78bfa; | |
| } | |
| .pagination { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 0.5rem; | |
| margin: 3rem 0; | |
| } | |
| .pagination-btn { | |
| background: rgba(255, 255, 255, 0.1); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| color: var(--text); | |
| padding: 0.5rem 1rem; | |
| border-radius: 8px; | |
| text-decoration: none; | |
| transition: all 0.3s ease; | |
| } | |
| .pagination-btn:hover { | |
| background: var(--brand); | |
| border-color: var(--brand); | |
| } | |
| .pagination-btn.active { | |
| background: var(--brand); | |
| border-color: var(--brand); | |
| } | |
| @media (max-width: 768px) { | |
| .blog-hero h1 { | |
| font-size: 2rem; | |
| } | |
| .blog-grid { | |
| grid-template-columns: 1fr; | |
| padding: 0 1rem 2rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header class="header"> | |
| <nav class="nav"> | |
| <div class="nav-container"> | |
| <div class="nav-logo"> | |
| <i class="fas fa-book-open"></i> | |
| <span>booknap</span> | |
| </div> | |
| <div class="search-container"> | |
| <div class="search-bar"> | |
| <i class="fas fa-search search-icon"></i> | |
| <input type="text" placeholder="Find a book..." class="search-input"> | |
| </div> | |
| </div> | |
| <ul class="nav-menu"> | |
| <li><a href="books.html" class="nav-link">Home</a></li> | |
| <li class="dropdown"> | |
| <a href="#" class="nav-link dropdown-toggle">Book Summaries <i class="fas fa-chevron-down"></i></a> | |
| <div class="dropdown-menu"> | |
| <div class="dropdown-content"> | |
| <div class="dropdown-section"> | |
| <h4>Browse by type</h4> | |
| <ul> | |
| <li><a href="#"><i class="fas fa-book-open" style="color: #10b981;"></i> Text Summaries</a></li> | |
| <li><a href="#"><i class="fas fa-headphones" style="color: #3b82f6;"></i> Audio Summaries</a></li> | |
| <li><a href="#"><i class="fas fa-play-circle" style="color: #8b5cf6;"></i> Video Summaries</a></li> | |
| <li><a href="#"><i class="fas fa-file-pdf" style="color: #f59e0b;"></i> PDF Downloads</a></li> | |
| <li><a href="#"><i class="fas fa-mobile-alt" style="color: #06b6d4;"></i> Mobile App</a></li> | |
| </ul> | |
| </div> | |
| <div class="dropdown-divider"></div> | |
| <div class="dropdown-section"> | |
| <h4>Browse by topic</h4> | |
| <ul> | |
| <li><a href="#"><i class="fas fa-brain" style="color: #f59e0b;"></i> Psychology</a></li> | |
| <li><a href="#"><i class="fas fa-chart-line" style="color: #10b981;"></i> Business</a></li> | |
| <li><a href="#"><i class="fas fa-heart" style="color: #ef4444;"></i> Self-Help</a></li> | |
| <li><a href="#"><i class="fas fa-graduation-cap" style="color: #8b5cf6;"></i> Education</a></li> | |
| <li><a href="#"><i class="fas fa-lightbulb" style="color: #06b6d4;"></i> Innovation</a></li> | |
| </ul> | |
| <a href="#" class="all-categories">all categories <i class="fas fa-arrow-right"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </li> | |
| <li><a href="pricing.html" class="nav-link">Pricing</a></li> | |
| <li><a href="blog.html" class="nav-link active">Blog</a></li> | |
| </ul> | |
| <div class="nav-login"> | |
| <a href="login.html" class="login-btn">Login</a> | |
| <a href="signup.html" class="signup-btn">Sign Up</a> | |
| </div> | |
| <div class="nav-toggle"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| </div> | |
| </nav> | |
| </header> | |
| <main> | |
| <section class="blog-hero"> | |
| <h1>Read Our Blog</h1> | |
| <p>Weekly articles with insights into the latest book summaries and reading strategies. Our blog takes the key concepts from popular books and lays out practical next steps, so you can learn and apply knowledge in meaningful ways.</p> | |
| </section> | |
| <div class="blog-grid"> | |
| <!-- Blog Card 1 --> | |
| <article class="blog-card"> | |
| <div class="blog-card-image" style="background-image: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');"></div> | |
| <div class="blog-card-content"> | |
| <h3 class="blog-card-title">How to Access Your Inner Strength Through Reading</h3> | |
| <p class="blog-card-date">June 17, 2025</p> | |
| <a href="#" class="blog-card-link">VIEW THESE RESOURCES</a> | |
| </div> | |
| </article> | |
| <!-- Blog Card 2 --> | |
| <article class="blog-card"> | |
| <div class="blog-card-image" style="background-image: url('https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80');"></div> | |
| <div class="blog-card-content"> | |
| <h3 class="blog-card-title">Meditation is the Key to a Flourishing Life</h3> | |
| <p class="blog-card-date">June 11, 2025</p> | |
| <a href="#" class="blog-card-link">VIEW THESE RESOURCES</a> | |
| </div> | |
| </article> | |
| <!-- Blog Card 3 --> | |
| <article class="blog-card"> | |
| <div class="blog-card-image" style="background-image: url('https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1976&q=80');"></div> | |
| <div class="blog-card-content"> | |
| <h3 class="blog-card-title">Women's Leadership in Literature Isn't Optional</h3> | |
| <p class="blog-card-date">June 5, 2025</p> | |
| <a href="#" class="blog-card-link">VIEW THESE RESOURCES</a> | |
| </div> | |
| </article> | |
| <!-- Blog Card 4 --> | |
| <article class="blog-card"> | |
| <div class="blog-card-image" style="background-image: url('https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80');"></div> | |
| <div class="blog-card-content"> | |
| <h3 class="blog-card-title">Modeling Success for the Next Generation</h3> | |
| <p class="blog-card-date">May 14, 2025</p> | |
| <a href="#" class="blog-card-link">VIEW THESE RESOURCES</a> | |
| </div> | |
| </article> | |
| <!-- Blog Card 5 --> | |
| <article class="blog-card"> | |
| <div class="blog-card-image" style="background-image: url('https://images.unsplash.com/photo-1554224155-6726b3ff858f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2011&q=80');"></div> | |
| <div class="blog-card-content"> | |
| <h3 class="blog-card-title">How to Honor Tradition and Innovation</h3> | |
| <p class="blog-card-date">May 6, 2025</p> | |
| <a href="#" class="blog-card-link">VIEW THESE RESOURCES</a> | |
| </div> | |
| </article> | |
| <!-- Blog Card 6 --> | |
| <article class="blog-card"> | |
| <div class="blog-card-image" style="background-image: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');"></div> | |
| <div class="blog-card-content"> | |
| <h3 class="blog-card-title">Slow Down to Hear Your Inner Voice</h3> | |
| <p class="blog-card-date">April 30, 2025</p> | |
| <a href="#" class="blog-card-link">VIEW THESE RESOURCES</a> | |
| </div> | |
| </article> | |
| <!-- Blog Card 7 --> | |
| <article class="blog-card"> | |
| <div class="blog-card-image" style="background-image: url('https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80');"></div> | |
| <div class="blog-card-content"> | |
| <h3 class="blog-card-title">You Are Under Construction</h3> | |
| <p class="blog-card-date">June 10, 2024</p> | |
| <a href="#" class="blog-card-link">VIEW THESE RESOURCES</a> | |
| </div> | |
| </article> | |
| <!-- Blog Card 8 --> | |
| <article class="blog-card"> | |
| <div class="blog-card-image" style="background-image: url('https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1976&q=80');"></div> | |
| <div class="blog-card-content"> | |
| <h3 class="blog-card-title">Knowledge at the Center</h3> | |
| <p class="blog-card-date">June 3, 2024</p> | |
| <a href="#" class="blog-card-link">VIEW THESE RESOURCES</a> | |
| </div> | |
| </article> | |
| <!-- Blog Card 9 --> | |
| <article class="blog-card"> | |
| <div class="blog-card-image" style="background-image: url('https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80');"></div> | |
| <div class="blog-card-content"> | |
| <h3 class="blog-card-title">Let's Grow Together</h3> | |
| <p class="blog-card-date">May 27, 2024</p> | |
| <a href="#" class="blog-card-link">VIEW THESE RESOURCES</a> | |
| </div> | |
| </article> | |
| </div> | |
| <!-- Pagination --> | |
| <div class="pagination"> | |
| <a href="#" class="pagination-btn active">1</a> | |
| <a href="#" class="pagination-btn">2</a> | |
| <a href="#" class="pagination-btn">3</a> | |
| <span style="color: var(--muted); margin: 0 0.5rem;">…</span> | |
| <a href="#" class="pagination-btn">16</a> | |
| <a href="#" class="pagination-btn">Next »</a> | |
| </div> | |
| </main> | |
| <script> | |
| // Simple navigation toggle for mobile | |
| document.querySelector('.nav-toggle').addEventListener('click', function() { | |
| document.querySelector('.nav-menu').classList.toggle('active'); | |
| }); | |
| // Dropdown click behavior | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const dropdown = document.querySelector('.dropdown'); | |
| const dropdownToggle = document.querySelector('.dropdown-toggle'); | |
| if (dropdown && dropdownToggle) { | |
| dropdownToggle.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| dropdown.classList.toggle('active'); | |
| }); | |
| // Close dropdown when clicking outside | |
| document.addEventListener('click', function(e) { | |
| if (!dropdown.contains(e.target)) { | |
| dropdown.classList.remove('active'); | |
| } | |
| }); | |
| // Close dropdown when pressing Escape key | |
| document.addEventListener('keydown', function(e) { | |
| if (e.key === 'Escape') { | |
| dropdown.classList.remove('active'); | |
| } | |
| }); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |