if u are a frontend you must have been bored of soul-less blocks so i decided to make butterblog to break every design rule this is the first block of the day
follow us for daily free blocks
what is this ?
its a free butterfly css nav bar responsive template with dark mode
from where?
it from butterblocks
how to use ?
note:(tailwind cdn is just for svg you can remove)
<!DOCTYPE html>
<html lang="ar" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AMR2010M/butterfly-css@latest/v4.css">
<script src="https://cdn.jsdelivr.net/gh/AMR2010M/butterfly-css@latest/df.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<script src="https://cdn.jsdelivr.net/gh/AMR2010M/butterfly-css@latest/vf.js"></script>
<style>
[computer='hide']{
display: none;
}
@media(max-width:800px){
[mobile='hide']{
display: none;
}
[computer='hide']{
display: block;
}
[cp6]{
height: 10rem;
width:10rem;
}
}
</style>
</head>
<body dyellow lyellow >
<nav id='nav'navbar handdrawn spink top white nof m-1 w-90p style="position: fixed;">
<button computer="hide" id='menu-btn' style="left: 1rem ;position:absolute; top:1rem "> <svg width="35" height="35" viewBox="0 -5 32 32" xmlns="http://www.w3.org/2000/svg"><title>menu</title><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="99.045%" id="a"><stop stop-color="#b4b5c6" offset="0%"/><stop stop-color="pink" offset="100%"/></linearGradient></defs><path d="M974 58a2 2 0 0 1 0 4h-28a2 2 0 0 1 0-4zm0-9a2 2 0 0 1 0 4h-28a2 2 0 0 1 0-4zm0-9a2 2 0 0 1 0 4h-28a2 2 0 0 1 0-4z" transform="translate(-944 -40)" fill="pink"/></svg></button>
<h2 top bold m-1 tpink style="left: 4rem ;position:absolute; font-size: 30px;" >ButterBlocks</h2>
<div flex-auto id="list" cp6 >
<span m-1 hover-19 >home</span>
<span m-1 hover-19>Templates</span>
<span m-1 hover-19>Docs</span>
</div>
<button style="right: 3px ;position:absolute; " dark-btn m-1 hover-1 ><svg width="28px" height="28px" viewBox="0 0 35 35" data-name="Layer 2" id="Layer_2" xmlns="http://www.w3.org/2000/svg"><path d="M18.44,34.68a18.22,18.22,0,0,1-2.94-.24,18.18,18.18,0,0,1-15-20.86A18.06,18.06,0,0,1,9.59.63,2.42,2.42,0,0,1,12.2.79a2.39,2.39,0,0,1,1,2.41L11.9,3.1l1.23.22A15.66,15.66,0,0,0,23.34,21h0a15.82,15.82,0,0,0,8.47.53A2.44,2.44,0,0,1,34.47,25,18.18,18.18,0,0,1,18.44,34.68ZM10.67,2.89a15.67,15.67,0,0,0-5,22.77A15.66,15.66,0,0,0,32.18,24a18.49,18.49,0,0,1-9.65-.64A18.18,18.18,0,0,1,10.67,2.89Z"/></svg></button>
</nav>
<script >
var menubtn=document.getElementById('menu-btn');
var nav=document.getElementById('nav');
var list=document.getElementById('list');
if(window.getComputedStyle(menubtn).display == 'block'){
list.style.display='none';
}
var ismenu=0;
nav.style.height='5rem';
menubtn.onclick=function(){
if(ismenu==0){
if(window.getComputedStyle(menubtn).display == 'block'){
list.style.display='block';
}
nav.style.height='20rem';
ismenu=1;
}
else{
if(window.getComputedStyle(menubtn).display == 'block'){
list.style.display='none';
}
nav.style.height='5rem';
ismenu=0;
}
}
window.onclick=function(){
}
</script>
how to edit?
visit the offical butterfly css docs it's very easy to learn with so stunning animations and effects
please give us agithub star or leave a comment here that will really uplift us
Top comments (0)