Skip to main content

                        Use CSS variable and make search Bar

This is CSS sheet

.header-grvu{
    background-color: yellowgreen;
    padding: 2% 4%;
    text-align: center;
    box-sizing: border-box;
    height: 100px;
}
.header-grvu1{
    float: inline-end;
}
.header-grvu2{
    float: right;
 
}
/* background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)),
                  url("../../media/examples/lizard.png"); */
.header-grvu2 #search1{
    background-image:linear-gradient(rgba(156, 156, 163, 0.5), rgba(197, 197, 194, 0.575)), url(search.png);
    background-size: 10%;
    background-repeat: no-repeat;
    background-position: right;
    /* background-color: rgba(163, 162, 162, 0.856); */
    /* background-position-x: 144px;
    background-position-y: 3px; */
    height: 33px;
    border: 3px solid black;
    border-radius: 5px;
    padding-left: 5px;
    padding-right: 25px;
    font-size: 15px;
}

This is HTML sheet

<div class="header-grvu">
                       <div class="header-grvu1">
                        <h1><cite>Ismail Sardar</cite></h1>
                       </div>
                       <div class="header-grvu2">
                        <input type="text" name="search" id="search1" placeholder="search">
                       </div>

Comments

Post a Comment

Popular posts from this blog

feture

Post a Comment
Read more
Use  <nav>,<figure>,<ifrem>,<samp>,<var> Tag < html lang = "en" > < head >   < meta charset = "UTF-8" >   < meta http-equiv = "X-UA-Compatible" content = "IE=edge" >   < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >   < style >     header {       text-align : center ;     }     body {       background-color : rgb ( 196 , 152 , 72 );     }     .agp {       width : 100% ;       height : 250px ;    }     .fcss {     border : 3px solid red ;     border-radius : 5px ;     padding : 5px ;     margin : 2px ;     width : 50% ;    }     .fs {       text-align : center ;     }     .t1 , .t2 , .t3 , .t4 {       background-colo...
Post a Comment
Read more
Use CSS variable (form and list style)  If you want icon like -list ..Go to this wed -site : https://fontawesome.com/v5.15/icons?d=gallery&p=2&q=tick And attest HTML <header> this link : <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> This is CSS sheet /* form style */ .text-are12 {     resize : none ;     border : 3px solid rgb ( 71 , 3 , 3 );     border-radius : 5px ;     margin : 10px ; } input [ type = "submit" ], input [ type = "reset" ]{     width : 90px ;     border : none ;     margin : 10px ;     border-radius : 5px ;     padding : 5px ;     background-color : olivedrab ;     color : white ;     cursor : pointer...
Post a Comment
Read more