CodeRocketAI-powered Tailwind CSS

CodeRocket

Generate
Pricing

Components

Browse Components

Community

Discord
Changelog

yann tyb - CodeRocket

yann tyb

User profile

Free user

yann tyb

4 months ago

6

Components

0

Remixes

0

Likes

Latest activity

Layout with 11/12 and 1/12 height containers

Created a component

21 days ago

Untitled Component

Created a component

4 months ago

Untitled Component

Created a component

4 months ago

Untitled Component

Created a component

4 months ago

Untitled Component

Created a component

4 months ago

Latest components

Layout with 11/12 and 1/12 height containers

yann tyb•21 days ago

react

0

A blog page templage with a nav bar

yann tyb•4 months ago

react

0

<!DOCTYPE html> <html lang="en" data-theme="retro"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>The Art of Forging: Craftsmanship in Every Strike</title> <link href="https://cdn.jsdelivr.net/npm/daisyui@latest/dist/full.css" rel="stylesheet"> <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script> <style> .animated-bg { background-color: #1a1a1a; background-image: linear-gradient(90deg, #222 1px, transparent 1px), linear-gradient(#222 1px, transparent 1px); background-size: 20px 20px; animation: moveLines 5s linear infinite; } @keyframes moveLines { 0% { background-position: 0 0; } 100% { background-position: 20px 20px; } } .chapter-block { transition: all 0.3s ease; opacity: 0; transform: translateY(50px); position: relative; } .reveal { animation: reveal 1s ease forwards; } @keyframes reveal { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } .title-animation { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.5); animation: titleReveal 2s ease-out forwards; z-index: 100; } @keyframes titleReveal { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.5); } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; } } .waving-border { position: absolute; bottom: 0; left: 0; width: 100%; height: 5px; background: repeating-linear-gradient( to right, #f59e0b 0%, #f59e0b 25%, #10b981 25%, #10b981 50%, #3b82f6 50%, #3b82f6 75%, #ec4899 75%, #ec4899 100% ); background-size: 200% 100%; animation: waveBorder 5s linear infinite; } @keyframes waveBorder { 0% { background-position: 0 0; } 100% { background-position: 200% 0; } } .chapter-block:hover .hover-effect { opacity: 1; transform: translateY(0) scale(1); } .hover-effect { transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); opacity: 0; transform: translateY(20px) scale(0.8); position: absolute; top: 10px; right: 10px; } </style> </head> <body class="animated-bg min-h-screen flex flex-col"> <nav class="bg-base-300 shadow-lg"> <div class="navbar container mx-auto"> <div class="flex-1"> <a class="btn btn-ghost normal-case text-xl">[Forge Name]</a> </div> <div class="flex-none"> <ul class="menu menu-horizontal px-1"> <li><a>Home</a></li> <li><a>About</a></li> <li><a>Products</a></li> <li><a>Contact</a></li> </ul> </div> </div> </nav> <div class="container mx-auto px-4 py-8 flex-grow"> <h1 class="text-4xl font-bold mb-12 text-center text-white title-animation">The Art of Forging: Craftsmanship in Every Strike</h1> <div class="grid grid-cols-3"> <div class="chapter-block bg-base-200 p-6 col-span-2 min-h-[200px]"> <h2 class="text-2xl font-semibold mb-4">What is Forging?</h2> <p>Forging is more than just shaping metal; it's a journey that transforms raw materials into functional beauty. The process involves heating, hammering, and shaping metal to achieve the desired form. Every strike of the hammer is a step closer to perfection.</p> <div class="hover-effect"> <i class="fas fa-fire text-3xl text-primary"></i> </div> <div class="waving-border"></div> </div> <div class="chapter-block bg-base-200 p-6 col-span-1 min-h-[200px] flex flex-col justify-between"> <h2 class="text-2xl font-semibold mb-4">Our Philosophy</h2> <p>At [Forge Name], we believe every forged piece tells a story. It's a story of fire meeting metal, of resilience and adaptability.</p> <div class="hover-effect"> <i class="fas fa-book-open text-3xl text-secondary"></i> </div> <div class="waving-border"></div> </div> <div class="chapter-block bg-base-200 p-6 col-span-3 min-h-[250px]"> <h2 class="text-2xl font-semibold mb-4">The Process: A Blend of Fire and Precision</h2> <div class="grid grid-cols-2 gap-4"> <ol class="list-decimal list-inside"> <li><strong>Selecting the Material:</strong> We start with high-quality materials.</li> <li><strong>Heating the Metal:</strong> Our forge burns hot, reaching over 2000°F.</li> </ol> <ol class="list-decimal list-inside" start="3"> <li><strong>Shaping the Metal:</strong> Using hammers, presses, and anvil techniques.</li> <li><strong>Quenching and Tempering:</strong> Balancing hardness with flexibility.</li> </ol> </div> <div class="hover-effect"> <i class="fas fa-hammer text-3xl text-accent"></i> </div> <div class="waving-border"></div> </div> <div class="chapter-block bg-base-200 p-6 col-span-2 min-h-[220px]"> <h2 class="text-2xl font-semibold mb-4">Why Choose Hand-Forged?</h2> <ul class="list-disc list-inside grid grid-cols-2 gap-4"> <li>Durability: Superior materials and craftsmanship ensure longevity.</li> <li>Uniqueness: No two hand-forged pieces are exactly alike.</li> <li>Heritage: Owning a forged piece connects you to a tradition spanning centuries.</li> </ul> <div class="hover-effect"> <i class="fas fa-check-circle text-3xl text-success"></i> </div> <div class="waving-border"></div> </div> <div class="chapter-block bg-base-200 p-6 col-span-1 min-h-[220px] flex flex-col justify-between"> <h2 class="text-2xl font-semibold mb-4">Explore Our Creations</h2> <p>From kitchen knives to ornamental ironwork, we invite you to browse our collection. Each piece is handcrafted with precision and passion.</p> <div class="hover-effect"> <i class="fas fa-search text-3xl text-info"></i> </div> <div class="waving-border"></div> </div> <div class="chapter-block bg-base-200 p-6 col-span-3 min-h-[200px]"> <h2 class="text-2xl font-semibold mb-4">Join Our Community</h2> <p class="max-w-3xl mx-auto text-center">Interested in forging your own path? At [Forge Name], we offer workshops for beginners and seasoned metalworkers. Learn the art of blacksmithing and experience the satisfaction of creating something with your own hands.</p> <div class="hover-effect"> <i class="fas fa-users text-3xl text-warning"></i> </div> <div class="waving-border"></div> </div> </div> <div class="flex flex-col md:flex-row justify-between mt-8 gap-4 mb-16"> <div class="card bg-base-300 shadow-xl flex-1"> <div class="card-body"> <h2 class="card-title">Get in Touch</h2> <p>We'd love to hear from you! Whether you're looking for a custom project, advice, or just want to talk about the craft, our team is here to help.</p> <div class="card-actions justify-end"> <button class="btn btn-primary">Contact Us</button> </div> </div> </div> <div class="card bg-base-300 shadow-xl flex-1"> <div class="card-body"> <h2 class="card-title">Stay Updated</h2> <p>Subscribe to our newsletter for the latest in forging tips, product launches, and more.</p> <div class="card-actions justify-end"> <button class="btn btn-secondary">Subscribe</button> </div> </div> </div> </div> </div> <footer class="footer footer-center p-4 bg-base-300 text-base-content mt-auto"> <div> <p class="italic">Forging isn't just about making things; it's about creating connections—to history, to craftsmanship, and to the enduring power of human ingenuity. Join us at [Forge Name] and be part of this timeless tradition.</p> </div> </footer> <script> document.addEventListener('DOMContentLoaded', (event) => { const blocks = document.querySelectorAll('.chapter-block'); blocks.forEach((block, index) => { setTimeout(() => { block.classList.add('reveal'); }, 2000 + (index * 200)); }); }); </script> </body> </html> Add verticale separation animation too.

yann tyb•4 months ago

html

0

<!DOCTYPE html> <html lang="en" data-theme="retro"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>The Art of Forging: Craftsmanship in Every Strike</title> <link href="https://cdn.jsdelivr.net/npm/daisyui@latest/dist/full.css" rel="stylesheet"> <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script> <style> .animated-bg { background-color: #1a1a1a; background-image: linear-gradient(90deg, #222 1px, transparent 1px), linear-gradient(#222 1px, transparent 1px); background-size: 20px 20px; animation: moveLines 5s linear infinite; } @keyframes moveLines { 0% { background-position: 0 0; } 100% { background-position: 20px 20px; } } .chapter-block { transition: all 0.3s ease; } .chapter-block:hover { transform: scale(1.05) rotate(var(--rotation)); box-shadow: 0 10px 30px rgba(0,0,0,0.2); z-index: 10; } </style> </head> <body class="animated-bg min-h-screen flex flex-col"> <nav class="bg-base-300 shadow-lg"> <div class="navbar container mx-auto"> <div class="flex-1"> <a class="btn btn-ghost normal-case text-xl">[Forge Name]</a> </div> <div class="flex-none"> <ul class="menu menu-horizontal px-1"> <li><a>Home</a></li> <li><a>About</a></li> <li><a>Products</a></li> <li><a>Contact</a></li> </ul> </div> </div> </nav> <div class="container mx-auto px-4 py-8 flex-grow"> <h1 class="text-4xl font-bold mb-12 text-center text-white">The Art of Forging: Craftsmanship in Every Strike</h1> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16"> <div class="chapter-block bg-base-200 p-6 rounded-box shadow-xl" style="--rotation: -3deg;"> <h2 class="text-2xl font-semibold mb-4">What is Forging?</h2> <p>Forging is more than just shaping metal; it's a journey that transforms raw materials into functional beauty. The process involves heating, hammering, and shaping metal to achieve the desired form. Every strike of the hammer is a step closer to perfection.</p> </div> <div class="chapter-block bg-base-200 p-6 rounded-box shadow-xl" style="--rotation: 2deg;"> <h2 class="text-2xl font-semibold mb-4">Our Philosophy</h2> <p>At [Forge Name], we believe every forged piece tells a story. It's a story of fire meeting metal, of resilience and adaptability. Whether it's a hand-forged knife, a custom sword, or intricate metal art, our creations are designed to be as durable as they are stunning.</p> </div> <div class="chapter-block bg-base-200 p-6 rounded-box shadow-xl" style="--rotation: -2deg;"> <h2 class="text-2xl font-semibold mb-4">The Process: A Blend of Fire and Precision</h2> <ol class="list-decimal list-inside"> <li><strong>Selecting the Material:</strong> We start with high-quality materials.</li> <li><strong>Heating the Metal:</strong> Our forge burns hot, reaching over 2000°F.</li> <li><strong>Shaping the Metal:</strong> Using hammers, presses, and anvil techniques.</li> <li><strong>Quenching and Tempering:</strong> Balancing hardness with flexibility.</li> </ol> </div> <div class="chapter-block bg-base-200 p-6 rounded-box shadow-xl" style="--rotation: 3deg;"> <h2 class="text-2xl font-semibold mb-4">Why Choose Hand-Forged?</h2> <ul class="list-disc list-inside"> <li>Durability: Superior materials and craftsmanship ensure longevity.</li> <li>Uniqueness: No two hand-forged pieces are exactly alike.</li> <li>Heritage: Owning a forged piece connects you to a tradition spanning centuries.</li> </ul> </div> <div class="chapter-block bg-base-200 p-6 rounded-box shadow-xl" style="--rotation: -1deg;"> <h2 class="text-2xl font-semibold mb-4">Explore Our Creations</h2> <p>From kitchen knives to ornamental ironwork, we invite you to browse our collection. Each piece is handcrafted with precision and passion, making it perfect for collectors, enthusiasts, and professionals alike.</p> </div> <div class="chapter-block bg-base-200 p-6 rounded-box shadow-xl" style="--rotation: 1deg;"> <h2 class="text-2xl font-semibold mb-4">Join Our Community</h2> <p>Interested in forging your own path? At [Forge Name], we offer workshops for beginners and seasoned metalworkers. Learn the art of blacksmithing and experience the satisfaction of creating something with your own hands.</p> </div> </div> <div class="flex flex-col md:flex-row justify-between mt-8 gap-4 mb-16"> <div class="card bg-base-300 shadow-xl flex-1"> <div class="card-body"> <h2 class="card-title">Get in Touch</h2> <p>We'd love to hear from you! Whether you're looking for a custom project, advice, or just want to talk about the craft, our team is here to help.</p> <div class="card-actions justify-end"> <button class="btn btn-primary">Contact Us</button> </div> </div> </div> <div class="card bg-base-300 shadow-xl flex-1"> <div class="card-body"> <h2 class="card-title">Stay Updated</h2> <p>Subscribe to our newsletter for the latest in forging tips, product launches, and more.</p> <div class="card-actions justify-end"> <button class="btn btn-secondary">Subscribe</button> </div> </div> </div> </div> </div> <footer class="footer footer-center p-4 bg-base-300 text-base-content mt-auto"> <div> <p class="italic">Forging isn't just about making things; it's about creating connections—to history, to craftsmanship, and to the enduring power of human ingenuity. Join us at [Forge Name] and be part of this timeless tradition.</p> </div> </footer> </body> </html> Add a bit of randomness in the grid placement.

yann tyb•4 months ago

html

0

Here is a blog post: "The Art of Forging: Craftsmanship in Every Strike In a world where mass production dominates, the ancient art of forging stands as a testament to the power of skill, patience, and dedication. At [Forge Name], we honor this tradition, blending age-old techniques with modern innovation to create tools, weapons, and art that last a lifetime. What is Forging? Forging is more than just shaping metal; it’s a journey that transforms raw materials into functional beauty. The process involves heating, hammering, and shaping metal to achieve the desired form. Every strike of the hammer is a step closer to perfection. Our Philosophy At [Forge Name], we believe every forged piece tells a story. It’s a story of fire meeting metal, of resilience and adaptability. Whether it’s a hand-forged knife, a custom sword, or intricate metal art, our creations are designed to be as durable as they are stunning. The Process: A Blend of Fire and Precision 1. Selecting the Material We start with high-quality materials, ensuring each product begins with a strong foundation. From carbon steels to Damascus blends, every choice is deliberate. 2. Heating the Metal Our forge burns hot, reaching temperatures over 2000°F. This intense heat makes the metal malleable, ready for shaping. 3. Shaping the Metal Using hammers, presses, and anvil techniques, we bring each design to life. Precision is key, and our blacksmiths are artisans in every sense. 4. Quenching and Tempering Quenching cools the metal rapidly, locking in its structure. Tempering follows, balancing hardness with flexibility for a finished product that lasts. Why Choose Hand-Forged? Hand-forged items aren’t just tools—they’re investments. Unlike factory-made alternatives, our pieces are built with care and attention to detail. This results in: • Durability: Superior materials and craftsmanship ensure longevity. • Uniqueness: No two hand-forged pieces are exactly alike. • Heritage: Owning a forged piece connects you to a tradition spanning centuries. Explore Our Creations From kitchen knives to ornamental ironwork, we invite you to browse our collection. Each piece is handcrafted with precision and passion, making it perfect for collectors, enthusiasts, and professionals alike. Join Our Community Interested in forging your own path? At [Forge Name], we offer workshops for beginners and seasoned metalworkers. Learn the art of blacksmithing and experience the satisfaction of creating something with your own hands. Get in Touch We’d love to hear from you! Whether you’re looking for a custom project, advice, or just want to talk about the craft, our team is here to help. [Insert contact form link or email address] Stay Updated Subscribe to our newsletter for the latest in forging tips, product launches, and more. [Subscribe Button] Forging isn’t just about making things; it’s about creating connections—to history, to craftsmanship, and to the enduring power of human ingenuity. Join us at [Forge Name] and be part of this timeless tradition." Make a page for this post. Separate chapter when there are not linked. Add a background animation.

yann tyb•4 months ago

html

0