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="en" dir="ltr">
<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>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playwrite+GB+S+Guides:ital@0;1&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/AMR2010M/butterfly-css@latest/vf.js"></script>
<style>
.font{
font-family: "Playwrite GB S Guides", cursive;
font-weight: 400;
font-style: normal;
}
.font {
font-family: "Playwrite GB S Guides", cursive;
font-weight: 400;
font-style: italic;
}
</style>
</head>
<body >
<div style="width: 95%;" center>
<section responsive >
<div handdrawn nof rotate="1" h-20 columns mb-2>
<p top tred tsmall center rows mt-1>
<img circle src="84445066.jpeg" h-4.5 mr-2 w-4 >Mu Joe
</p>
<h1 center w-90p h-50p tsmall p-1 class="font">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 h-20 columns style="padding: 3px;"mb-2>
<p top tred tsmall center rows mt-1>
<img circle src="84445066.jpeg" h-4.5 mr-2 w-4 > ankush
</p>
<h1 center tsmall w-90p h-50p p-1 class="font" >"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 columns style="padding: 3px;"mb-2>
<p top tred tsmall center rows mt-1>
<img circle src="84445066.jpeg" h-4.5 mr-2 w-4>Andrew Carter
</p>
<h1 center w-90p tsmall h-50p class="font">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 style="padding: 3px;" columns mb-2>
<p top tred tsmall center rows mt-1>
<img circle src="84445066.jpeg" h-4.5 mr-2 w-4>DocuBloom
</p>
<h1 center tsmall w-90p h-50p class="font">"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 columns style="padding: 3px;"mb-2>
<p top tred tsmall center rows mt-1>
<img circle src="84445066.jpeg" h-4.5 mr-2 w-4> Mai Easa
</p>
<h1 center w-90p tsmall h-50p p-1 class="font"> 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 columns rotate='1'style="padding: 3px;"mb-2>
<p top tred tsmall center rows mt-1>
<img circle src="84445066.jpeg" h-4.5 mr-2 w-4> Imad Limrani
</p>
<h1 center w-90p tsmall h-50p class="font" >Wonderful, keep it up, my dear brother.</h1>
</div>
</section>
</div>
<div space h-5></div>
</body>
</html>
* ملاحظة: تأكد من تضمين ملف Butterfly.css في مشروعك.
