LewisC92/hoxton-wealth-rectangles
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>Hoxton Wealth Rectangles</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <style>9 .soft-rectangle {10 width: 200px;11 height: 120px;12 border-radius: 24px;13 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);14 }15 .primary {16 background-color: #0a3732;17 position: relative;18 }19 .secondary {20 background-color: #93C5FD; /* Tailwind blue-300 */21 border: 2px solid #3B82F6;22 }23 .accent {24 background-color: #1D4ED8; /* Tailwind blue-700 */25 }26 .emoji {27 position: absolute;28 top: 12px;29 right: 12px;30 font-size: 1.2rem;31 }32 .box-text {33 display: flex;34 align-items: center;35 justify-content: center;36 height: 100%;37 color: white;38 font-weight: bold;39 font-size: 1.2rem;40 }41</style>42</head>43<body class="bg-gray-50 min-h-screen flex flex-col items-center justify-center p-8">44 <h1 class="text-3xl font-bold text-gray-800 mb-12">Hoxton Wealth Brand Elements</h1>45 46 <div class="flex flex-wrap justify-center gap-12 max-w-4xl">47 <!-- Primary Rectangle -->48 <div class="flex flex-col items-center">49 <div class="soft-rectangle primary mb-4 relative">50 <span class="emoji">💻</span>51 <div class="box-text">Tools and Systems</div>52 </div>53 <span class="text-gray-700 font-medium">Primary Color</span>54 <code class="text-sm text-gray-500 mt-1">#0a3732</code>55 </div>56<!-- Secondary Rectangle -->57 <div class="flex flex-col items-center">58 <div class="soft-rectangle secondary mb-4"></div>59 <span class="text-gray-700 font-medium">Secondary Color</span>60 <code class="text-sm text-gray-500 mt-1">#93C5FD</code>61 </div>62 63 <!-- Accent Rectangle -->64 <div class="flex flex-col items-center">65 <div class="soft-rectangle accent mb-4"></div>66 <span class="text-gray-700 font-medium">Accent Color</span>67 <code class="text-sm text-gray-500 mt-1">#1D4ED8</code>68 </div>69 </div>70 71 <footer class="mt-16 text-center text-gray-500 text-sm">72 <p>Hoxton Wealth Brand Guidelines © 2023</p>73 </footer>74</body>75</html>76