Navber style 1

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="../css/practice1.css">
    <title>Document</title>
</head>
<body>
    
<div class="nav">
    <img src="../pic/logo1.jpg">
    <p>QUALEX IT</p>
   <div class="menu">
       <!-- span holo div er moto but div block level a kaj kore.Span kaj kore line level a .span dhoreeditkorte hoi.
       ar &#9776 holo menu code .ota dela manu icon ashe amon onek html icone code google src dela paoua jai' -->
       
       <span onClick="kkfunction()">&#9776</span> 

    <ul class ="uiclass" id="mal">
        <li class="list"><a href=#>HOME</a> </li>

        <li class="list"><a href=#>ABOUT ME</a></li>
        <li class="list"><a href=#>STUDY</a></li>
        <li class="list"><a href=#>EXTRA</a></li>
        
    </ul>
    </div>
</div>

<script>
    function kkfunction(){

        var xdocument.getElementById("mal");


        if (x.style.display=="none")
        {
            x.style.display="block";
        }
       else
        {
            x.style.display="none";
        }
      

    }


    
</script>


</body>
</html>















*{
    margin:0;
    padding0;
    box-sizingborder-box;

}
.menu{
    text-alignright;
    font-weightbolder;
    
}

/* thats part is very important part .aikhne class dhore kono kaj holo na ul ii dhore orizontal korte holo */
ul li{
    displayinline-block;
    padding:20px;
    
}

.list a{
    text-decorationnone;
    colorwhite;
    padding20px;
}

.uiclass :hover{
    
   backgroundrgb(0255242);
   colortomato;
    
}

.nav{
    backgroundskyblue;
    color:white/*  Totala box er moddhe color marle text ar color hoi */
    padding10px;
    positionrelative;

}

.nav img{
   display:block;
   height60px;
   float:left;
   margin-left30px;
   padding-bottom5px;
   position:absolute;

}
.nav p{
    font-sizexx-large;
    font-weightbolder;
    font-styleitalic;

    display:block;
    margin-left:100px ;
    margin-top6px;

 
    position:absolute;
 
 }





span{
    margin0px 20px 0px 20px;
    font-size40px;
    cursorpointer;
    displaynone;    
    /* display none kore dela gayeb hoye jai mal da */
}




/* media quary use kora hoi ak ak display size device a ak ak rokom show korte */
@media (max-width:768px){

span{
   
    displayblock;

}
    

ul li{
    /* choto screen a option gula vertically sajalam */
    displayblock;

    
}

ul{

    display:none;

}







/* media quary sobar niche likhte hoi */
/* @media (min-weidth:768) and (max-width: 1023px) dui point ar majhedakhate amon use korbo */
/* min-width:2345 amon dela amon hobe je oi size er opore na gale oinlayout ashbe na */
/* ar moddhe je code likhbo ta karjokor hobe sei device er jonno jar display weight 700px ar niche */


}





Comments

Popular posts from this blog

D WEB LINK