Picsoft25/divinescript-typography-haven
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>Our Portfolio - Ihsaan Typesetting</title>7 <link rel="stylesheet" href="style.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">11</head>12<body class="font-poppins bg-amber-50">13 <custom-navbar></custom-navbar>14 15 <main class="py-20">16 <section class="container mx-auto px-6">17 <div class="text-center mb-16">18 <h1 class="text-4xl md:text-5xl font-playfair font-bold text-amber-900 mb-4">Our Portfolio</h1>19 <p class="text-xl text-amber-700 max-w-2xl mx-auto">A showcase of our finest Islamic typesetting projects</p>20 </div>21 22 <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">23 <!-- Portfolio Item 1 -->24 <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition duration-300 hover-scale">25 <img src="https://static.photos/education/640x360/1" alt="Quran Typesetting" class="w-full h-64 object-cover">26 <div class="p-6">27 <h3 class="text-xl font-playfair font-bold text-amber-900 mb-2">Holy Quran - Tajweed Edition</h3>28 <p class="text-amber-700 mb-4">Complete typesetting with color-coded tajweed rules and custom page layout.</p>29 <div class="flex items-center text-sm text-amber-600">30 <i data-feather="calendar" class="w-4 h-4 mr-2"></i>31 <span>Completed: March 2023</span>32 </div>33 </div>34 </div>35 36 <!-- Portfolio Item 2 -->37 <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition duration-300 hover-scale">38 <img src="https://static.photos/education/640x360/2" alt="Islamic Book" class="w-full h-64 object-cover">39 <div class="p-6">40 <h3 class="text-xl font-playfair font-bold text-amber-900 mb-2">Fiqh of Worship</h3>41 <p class="text-amber-700 mb-4">Arabic-English parallel text with custom diacritical marks and footnotes.</p>42 <div class="flex items-center text-sm text-amber-600">43 <i data-feather="calendar" class="w-4 h-4 mr-2"></i>44 <span>Completed: January 2023</span>45 </div>46 </div>47 </div>48 49 <!-- Portfolio Item 3 -->50 <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition duration-300 hover-scale">51 <img src="https://static.photos/education/640x360/3" alt="Children's Book" class="w-full h-64 object-cover">52 <div class="p-6">53 <h3 class="text-xl font-playfair font-bold text-amber-900 mb-2">Prophet's Stories for Kids</h3>54 <p class="text-amber-700 mb-4">Colorful Arabic-English children's book with integrated calligraphy.</p>55 <div class="flex items-center text-sm text-amber-600">56 <i data-feather="calendar" class="w-4 h-4 mr-2"></i>57 <span>Completed: November 2022</span>58 </div>59 </div>60 </div>61 </div>62 </section>63 </main>64 65 <custom-footer></custom-footer>66 67 <script src="components/navbar.js"></script>68 <script src="components/footer.js"></script>69 <script src="script.js"></script>70 <script>feather.replace();</script>71</body>72</html>