File size: 7,583 Bytes
f8c4957 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Research Teasers | BrainyScribblesChronicles</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;600&display=swap');
body {
font-family: 'Poppins', sans-serif;
}
.title-font {
font-family: 'Playfair Display', serif;
}
.gradient-text {
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.research-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
</style>
</head>
<body class="bg-gray-50">
<nav class="bg-white bg-opacity-90 backdrop-filter backdrop-blur-lg shadow-sm sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0 flex items-center">
<i data-feather="book-open" class="text-indigo-600 h-8 w-8"></i>
<span class="ml-2 title-font text-2xl font-bold text-gray-900">BrainyScribbles</span>
</div>
</div>
<div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
<a href="index.html" class="text-gray-500 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Home</a>
<a href="stories.html" class="text-gray-500 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Stories</a>
<a href="research.html" class="text-gray-900 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Research</a>
<a href="events.html" class="text-gray-500 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Events</a>
<a href="about.html" class="text-gray-500 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">About</a>
</div>
</div>
</div>
</nav>
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<h1 class="title-font text-4xl font-bold text-gray-900 mb-8">Research Teasers</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="research-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300">
<div class="p-6">
<div class="flex items-center mb-4">
<div class="bg-indigo-100 rounded-full p-3 mr-4">
<i data-feather="dna" class="text-indigo-600"></i>
</div>
<h2 class="title-font text-xl font-bold text-gray-900">Quantum Biology Breakthrough</h2>
</div>
<p class="text-gray-600 mb-4">Our team has discovered quantum coherence in photosynthesis at room temperature, challenging previous assumptions about quantum effects in biological systems.</p>
<div class="flex items-center text-sm text-gray-500">
<span>Biology Dept.</span>
<span class="mx-2">•</span>
<span>June 2, 2023</span>
</div>
<a href="#" class="mt-4 inline-block text-indigo-600 hover:text-indigo-800 font-medium">Read Abstract →</a>
</div>
</div>
<div class="research-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300">
<div class="p-6">
<div class="flex items-center mb-4">
<div class="bg-indigo-100 rounded-full p-3 mr-4">
<i data-feather="cpu" class="text-indigo-600"></i>
</div>
<h2 class="title-font text-xl font-bold text-gray-900">AI Ethics Framework</h2>
</div>
<p class="text-gray-600 mb-4">New ethical framework for AI development addresses bias mitigation, transparency, and accountability in machine learning systems.</p>
<div class="flex items-center text-sm text-gray-500">
<span>Computer Science</span>
<span class="mx-2">•</span>
<span>May 18, 2023</span>
</div>
<a href="#" class="mt-4 inline-block text-indigo-600 hover:text-indigo-800 font-medium">Read Abstract →</a>
</div>
</div>
<div class="research-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300">
<div class="p-6">
<div class="flex items-center mb-4">
<div class="bg-indigo-100 rounded-full p-3 mr-4">
<i data-feather="globe" class="text-indigo-600"></i>
</div>
<h2 class="title-font text-xl font-bold text-gray-900">Climate Resilience Study</h2>
</div>
<p class="text-gray-600 mb-4">Urban planning strategies for climate resilience in coastal cities show promising results in our 5-year longitudinal study.</p>
<div class="flex items-center text-sm text-gray-500">
<span>Environmental Science</span>
<span class="mx-2">•</span>
<span>April 30, 2023</span>
</div>
<a href="#" class="mt-4 inline-block text-indigo-600 hover:text-indigo-800 font-medium">Read Abstract →</a>
</div>
</div>
</div>
</main>
<footer class="bg-gray-100 py-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="flex items-center mb-4 md:mb-0">
<i data-feather="book-open" class="text-indigo-600 h-6 w-6"></i>
<span class="ml-2 title-font text-lg font-bold text-gray-900">BrainyScribbles</span>
</div>
<div class="flex space-x-6">
<a href="#" class="text-gray-500 hover:text-indigo-600">
<i data-feather="twitter"></i>
</a>
<a href="#" class="text-gray-500 hover:text-indigo-600">
<i data-feather="instagram"></i>
</a>
<a href="#" class="text-gray-500 hover:text-indigo-600">
<i data-feather="facebook"></i>
</a>
</div>
</div>
<div class="mt-8 pt-8 border-t border-gray-200 text-center text-gray-500 text-sm">
<p>© 2023 BrainyScribblesChronicles. All rights reserved.</p>
</div>
</div>
</footer>
<script>
feather.replace();
</script>
</body>
</html> |