ffbks/solescience-chronicles
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>SoleScience Chronicles | Foot Comfort Articles</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9 <style>10 @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;700&display=swap');11 12 body {13 font-family: 'Montserrat', sans-serif;14 background-color: #f8f9fa;15 }16 17 .hero-title {18 font-family: 'Bebas Neue', cursive;19 letter-spacing: 2px;20 }21 22 .article-card {23 transition: all 0.3s ease;24 background: linear-gradient(145deg, #ffffff, #f1f1f1);25 }26 27 .article-card:hover {28 transform: translateY(-5px);29 box-shadow: 0 10px 25px rgba(0,0,0,0.1);30 }31 </style>32</head>33<body>34 <!-- Header -->35 <div id="header-container"></div>36<!-- Hero Section -->37 <section class="bg-gray-100 py-20">38 <div class="container mx-auto px-6 text-center">39 <h1 class="hero-title text-5xl md:text-7xl font-bold text-gray-900 mb-6">SOLE SCIENCE CHRONICLES</h1>40 <p class="text-xl text-gray-700 max-w-2xl mx-auto">Explore our collection of in-depth articles about foot biomechanics, comfort technology, and the science behind happy feet.</p>41 </div>42 </section>43 44 <!-- Articles Grid -->45 <section class="py-20 bg-white">46 <div class="container mx-auto px-6">47 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">48 <!-- Article 1 -->49 <a href="#" class="article-card rounded-xl overflow-hidden shadow-md">50 <div class="h-48 overflow-hidden">51 <img src="http://static.photos/medical/640x360/1" alt="Biomechanics" class="w-full h-full object-cover">52 </div>53 <div class="p-6">54 <span class="text-sm text-gray-500">Biomechanics</span>55 <h3 class="text-xl font-bold mt-2 mb-3">The Physics of Walking: How Your Feet Work</h3>56 <p class="text-gray-600">An in-depth look at the complex biomechanics of human gait and how it influences insole design.</p>57 </div>58 </a>59 60 <!-- Article 2 -->61 <a href="#" class="article-card rounded-xl overflow-hidden shadow-md">62 <div class="h-48 overflow-hidden">63 <img src="http://static.photos/science/640x360/2" alt="Material Science" class="w-full h-full object-cover">64 </div>65 <div class="p-6">66 <span class="text-sm text-gray-500">Material Science</span>67 <h3 class="text-xl font-bold mt-2 mb-3">From Cork to Carbon Fiber: The Evolution of Insole Materials</h3>68 <p class="text-gray-600">Trace the fascinating journey of insole materials from ancient times to cutting-edge modern composites.</p>69 </div>70 </a>71 72 <!-- Article 3 -->73 <a href="#" class="article-card rounded-xl overflow-hidden shadow-md">74 <div class="h-48 overflow-hidden">75 <img src="http://static.photos/technology/640x360/3" alt="Tech" class="w-full h-full object-cover">76 </div>77 <div class="p-6">78 <span class="text-sm text-gray-500">Technology</span>79 <h3 class="text-xl font-bold mt-2 mb-3">Smart Insoles: The Future of Footwear Technology</h3>80 <p class="text-gray-600">Exploring how pressure sensors and IoT are revolutionizing how we understand and improve foot comfort.</p>81 </div>82 </a>83 84 <!-- Article 4 -->85 <a href="#" class="article-card rounded-xl overflow-hidden shadow-md">86 <div class="h-48 overflow-hidden">87 <img src="http://static.photos/health/640x360/4" alt="Health" class="w-full h-full object-cover">88 </div>89 <div class="p-6">90 <span class="text-sm text-gray-500">Health</span>91 <h3 class="text-xl font-bold mt-2 mb-3">Posture and Pain: How Insoles Affect Your Whole Body</h3>92 <p class="text-gray-600">Discover the surprising connections between foot support, spinal alignment, and overall health.</p>93 </div>94 </a>95 96 <!-- Article 5 -->97 <a href="#" class="article-card rounded-xl overflow-hidden shadow-md">98 <div class="h-48 overflow-hidden">99 <img src="http://static.photos/history/640x360/5" alt="History" class="w-full h-full object-cover">100 </div>101 <div class="p-6">102 <span class="text-sm text-gray-500">History</span>103 <h3 class="text-xl font-bold mt-2 mb-3">A Brief History of Foot Comfort: From Sandals to Smart Insoles</h3>104 <p class="text-gray-600">How civilizations throughout history have addressed the universal need for comfortable footwear.</p>105 </div>106 </a>107 108 <!-- Article 6 -->109 <a href="#" class="article-card rounded-xl overflow-hidden shadow-md">110 <div class="h-48 overflow-hidden">111 <img src="http://static.photos/sport/640x360/6" alt="Sports" class="w-full h-full object-cover">112 </div>113 <div class="p-6">114 <span class="text-sm text-gray-500">Sports Science</span>115 <h3 class="text-xl font-bold mt-2 mb-3">Performance Enhancement: How Elite Athletes Use Custom Insoles</h3>116 <p class="text-gray-600">The science behind how specialized insoles can give athletes an edge in competition.</p>117 </div>118 </a>119 </div>120 121 <!-- Pagination -->122 <div class="mt-16 flex justify-center space-x-2">123 <button class="w-10 h-10 rounded-full bg-black text-white font-bold">1</button>124 <button class="w-10 h-10 rounded-full bg-gray-200 hover:bg-gray-300 font-bold">2</button>125 <button class="w-10 h-10 rounded-full bg-gray-200 hover:bg-gray-300 font-bold">3</button>126 <button class="w-10 h-10 rounded-full bg-gray-200 hover:bg-gray-300 font-bold">></button>127 </div>128 </div>129 </section>130 131 <!-- Newsletter -->132 <section class="py-16 bg-gray-100">133 <div class="container mx-auto px-6 max-w-4xl text-center">134 <h3 class="text-2xl font-bold mb-4">Stay Updated with Sole Science</h3>135 <p class="mb-6 text-gray-700">Get the latest articles and research on foot comfort delivered to your inbox.</p>136 <div class="flex">137 <input type="email" placeholder="Your email" class="bg-white px-4 py-3 rounded-l focus:outline-none w-full">138 <button class="bg-black text-white px-6 rounded-r hover:bg-gray-800 font-bold">139 Subscribe140 </button>141 </div>142 </div>143 </section>144 <!-- Footer -->145 <div id="footer-container"></div>146 147 <!-- Newsletter -->148 <div id="newsletter-container"></div>149 <script>150 // Load components151 fetch('components/header.html')152 .then(response => response.text())153 .then(data => {154 document.getElementById('header-container').innerHTML = data;155 });156 157 fetch('components/footer.html')158 .then(response => response.text())159 .then(data => {160 document.getElementById('footer-container').innerHTML = data;161 });162 163 fetch('components/newsletter.html')164 .then(response => response.text())165 .then(data => {166 document.getElementById('newsletter-container').innerHTML = data;167 });168 169 feather.replace();170 </script>171</body>172</html>