HOW TO CREATE SIDEBAR MENU USING HTML AND CSS? June 18, 2020 CREATING SIDEBAR MENU USING HTML AND CSS 1) HTML code: Index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Home </title> <link rel="stylesheet" href="style.css"> <script src="https://kit.fontawesome.com/b99e675b6e.js"></script> </head> <body> <div class="wrapper"> <div class="sidebar"> <h2> SIDEBAR MENU</h2> <ul> <li><a href="#"><i class="fas fa-home"></i>Home</a></li> <li><a href="#"><i class="fas fa-user"></i>About</a></li> <li><a href="#"><i class="fas fa-users"></i>Team</a></li> <li><a href="#"><i class="fas fa-user"></i>Service</a></li> <li><a href="#"><i class="fa fa-phone"></i> Contact</a></li> </ul> </div> <div class="main_content"> <div class="header"> <center> <h1> Welcome!!!</h1> </center> </div> </div> </body> </html> 2) CSS: Style.css *{ margin: 0; padding: 0; box-sizing: border-box; list-style: none; text-decoration: none; font-family: 'Josefin Sans', sans-serif; } body{ background-color: #f3f5f9; } .wrapper{ display: flex; position: relative; } .wrapper .sidebar{ width: 200px; height: 100%; background: #990033; padding: 30px 0px; position: fixed; } .wrapper .sidebar h2{ color: #fff; text-transform: uppercase; text-align: center; margin-bottom: 30px; } .wrapper .sidebar ul li{ padding: 15px; border-bottom: 1px solid #bdb8d7; border-bottom: 1px solid rgba(0,0,0,0.05); border-top: 1px solid rgba(255,255,255,0.05); } .wrapper .sidebar ul li a{ color: white; display: block; } .wrapper .sidebar ul li a .fas{ width: 25px; } .wrapper .sidebar ul li:hover{ background-color: #cc6666; } .wrapper .sidebar ul li:hover a{ color: #fff; } .wrapper .main_content{ width: 100%; margin-left: 200px; } .wrapper .main_content .header{ padding: 20px; color: #717171; border-bottom: 1px solid #e0e4e8; font-family: Century Gothic; } Share Get link Facebook X Pinterest Email Other Apps Share Get link Facebook X Pinterest Email Other Apps Comments
Comments
Post a Comment