Elevate your social proof with a touch of personality! This template is designed to break the boring,
rigid structure of corporate websites by introducing a playful and organic aesthetic. 🎨
Authentic Hand-Drawn Vibe ✍️: Powered by the unique handdrawn attribute,
giving your components an artistic, sketchy border that feels human and approachable.
Dynamic Geometry 🔄: Take full creative control! Use the rotate attribute
to tilt your cards and create a lively, "scattered notes" effect that captures attention.
Ultra-Lightweight Engine 🚀: Say goodbye to bulky frameworks. This template generates
up to 80% less code than traditional libraries, ensuring lightning-fast load times.
Seamless Responsiveness 📱: Built with a responsive core to look
flawless on everything from mobile screens to large desktop monitors.
"Perfect for creative agencies, indie hackers, and modern portfolios." 🎀
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AMR2010M/butterfly-css@latest/butterflycss.css">
<script src="https://cdn.jsdelivr.net/gh/AMR2010M/butterfly-css@latest/df.js"></script>
<script src="https://cdn.jsdelivr.net/gh/AMR2010M/butterfly-css@latest/vf.js"></script>
<title>ButterBlocks Showcase</title>
</head>
<body>
<h2 class="text-4xl f text-center mb-16" tpink> loved by the community 💞 </h2>
<section responsive>
<div handdrawn nof rotate="2" h-20 p-1 columns>
<p top tred tsmall center rows mt-1>
<img circle src="7f553cbe-0536-4719-a220-090ff9ad0c8b.avif" h-4.5 mr-2 w-4>Mu Joe
</p>
<h1 center w-90p h-50p tsmall p-1>Whoa, Butterfly CSS I'm *truely* digging the focus on animations – making CSS so much less painful Kinda genius imo, to streamline the whole process</h1>
</div>
<div handdrawn nof rotate="-1" h-20 p-1 columns>
<p top tred tsmall center rows mt-1>
<img circle src="Untitled design (3).jpg" h-4.5 mr-2 w-4> ankush
</p>
<h1 center tsmall w-90p h-50p p-1>"Butterfly CSS's biggest strength is its simplicity and power packed into a lightweight, beginner-friendly package."</h1>
</div>
<div handdrawn nof rotate="2" h-20 p-1 columns>
<p top tred tsmall center rows mt-1>
<img circle src="f0s489x1bhmhm3ctzjfpk9plb2da.jpeg" h-4.5 mr-2 w-4>Andrew Carter
</p>
<h1 center w-90p tsmall h-50p p-1>Really impressive work! I like how Butterfly CSS simplifies building creative websites without bulky frameworks. minimal yet powerful CSS feels refreshing"</h1>
</div>
<div handdrawn rotate="-2" nof h-20 p-1 columns>
<p top tred tsmall center rows mt-1>
<img circle src="Untitled design (3).jpg" h-4.5 mr-2 w-4>DocuBloom
</p>
<h1 center tsmall w-90p h-50p p-1>"It's a great product for a team that is new to motion and animation would guide them in the right direction "</h1>
</div>
<div handdrawn nof h-20 p-1 columns>
<p top tred tsmall center rows mt-1>
<img circle src="Untitled design (3).jpg" h-4.5 mr-2 w-4> Mai Easa
</p>
<h1 center w-90p tsmall h-50p p-1> that's excellent. I liked the way the library is presented and the examples that help beginners. Honestly, the library is very good.</h1>
</div>
<div handdrawn nof h-20 p-1 columns>
<p top tred tsmall center rows mt-1>
<img circle src="Untitled design (3).jpg" h-4.5 mr-2 w-4> Imad Limrani
</p>
<h1 center w-90p tsmall h-50p p-1>Wonderful, keep it up, my dear brother.</h1>
</div>
</section>
<div space h-5></div>
</body>
</html>
* ملاحظة: تأكد من تضمين ملف Butterfly.css في مشروعك.
