Skip to main content

Side Navigation Bar CSS

 *{

    background-color: #353b48;

}

body{

    margin: 0px;

    padding: 0px;

    font-family: cursive;

}

.navbar{

    position: absolute;

    top: 50%;

    transform: translateY(-50% );

}

    

.navbar a{

    text-decoration: none;

    display:block;

    margin: 8px 0px;

   padding: 8px;

   width: 130px;

   font-size: 22px;

   /* background-color: #e74c3c; */

   color: white;

   margin-left: -100px;

   border-radius: 10px;

   transition: 0.6s;

}

.navbar a:hover{

    margin-left: 0px;

}

Comments

Post a Comment

Popular posts from this blog

Web 2 Sign in

 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Sign Up window</title>     <style>         * {             box-sizing: border-box;         }         body {             /* justify-content: center; */             /* align-items: center; */             margin: 0px;             padding: 0px;             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;             color: black;             background-color: #e9faff;         }         .cont {   ...
Post a Comment
Read more

Side Navigation Bar 1

 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <link rel="stylesheet" href="style.css"> </head> <body>     <div class="navbar">         <a href="#" style="background-color: #27ae60;">Home</a>         <a href="#" style="background-color: #c0392b;">About</a>         <a href="#" style="background-color: #ba21d8;">Gellary</a>         <a href="#" style="background-color: #2980b9;">Contact</a>     </div> </body> </html>
Post a Comment
Read more