RESPONSIVE NAVBAR CSS

-

 @import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');


*{
    margin: 0;
    padding: 0;
}

body{
    font-family:Roboto Condensed;
    min-height: 100vh;
    background-image: url(https://images.pexels.com/photos/268533/pexels-photo-268533.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

nav{
    background-color: rgba(255, 255, 255, 0.416);
    backdrop-filter: blur(10px);
    box-shadow: 5px 5px 3px rgb(122, 116, 116);
}

ul{
    display: flex;
    flex-wrap: wrap;
    padding-top: 30px;
    width: 100%;
    list-style: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

li{
    height: 60px;
}
a{
    height: 100%;
    padding: 10px;
    text-decoration: none;
    color: black;
}

a:hover{
    background-color: lightgray;
}

li{
    margin-right: auto;
}

.sidebar{
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 250px;
    z-index: 999;
    background-color: rgba(255, 255, 255, 0.696);
    backdrop-filter: blur(10px);
    box-shadow: -10px 0 10px;
     display: none;
     flex-direction: column;
     align-items: flex-start;
     justify-content: flex-start;    
}

.sidebar li{
    width: 100%;
}
.sidebar a{
    width: 100%;
}

.sidebar svg{
    float: right;
}

Comments

Post a Comment

Popular posts from this blog

HTML FORMS

-
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Document </ title > </ head > < body >     < H1 > Forms in HTML </ H1 >     < form action = "/submit.php" > < div >   < label for = "Name" > Name </ label >   < input type = "text" placeholder = "Enter name" > </ div > < div >     < label for = "Phone" > Phone </ label >     < input type = "tel" placeholder = "Enter phone no." >     </ div >     < div >     < label for = "Email" > Email </ label >     < input type = "email" placeholder = "Email" >     </ div >     < div >     < l...
Read more

FORM STYLING IN CSS

-
<! DOCTYPE html > < html lang = "en" >   < head >     < meta charset = "UTF-8" />     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" />     < title > forms </ title >   </ head >   < style >     body {       margin : 0 ;       padding : 0 ;     }     .csf {       display : flexbox;       text-align : center ;       background-color : rgb ( 216 , 216 , 216 );       height : 400px ;       width : 550px ;       padding : 90px 0px 0px 15px ;       margin-left : 40% ;       margin-top : 10% ;       border-radius : 2px ;       border : 2px solid ;       font-size : 19px ;     }     input {       mar...
Read more