Click here to Skip to main content
15,867,851 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
<!DOCTYPE html>
<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">
    <title>Twm2</title>
    <link rel="stylesheet" href="styles2.css">
    <link rel="stylesheet" href="css/all.min.css">
    <link rel="stylesheet" href="css/fontawesome.min.css">
        
</head>
<body>
    <header>
        <div class="logo">
            <a href="#"><img src="logo.png" alt=""></a>
        </div>
            <div class="heading">
            <h1 class="lucida">The WasherMan</h1>
          
        </div>
        </header>
        <div class="wrapper">
            <div class="sidebar">
                <!--profile of user-->
                <div class="profile">
                    <img src="muser.png" alt="">
                    <h3>User Profile</h3>
                </div>
                <!--Menu item-->
                <ul>
                    <li> <a href="#" class="active"> 
                        class="fa-solid fa-address-card" href="#"></a>
                    </div>
                </div>
            </div>
        </div>
        
        
        <!--MAKING FOOTER-->
        <section>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Commodi animi asperiores non qui rerum amet earum ratione! Aspernatur aperiam voluptatum voluptatibus, et aut at cum accusamus hic, quasi iste minima aliquam quod quam ullam amet totam numquam sequi fuga fugiat laudantium! Nesciunt eius, eos, sint incidunt dolorum blanditiis eveniet iusto corporis molestias laudantium tenetur necessitatibus reiciendis dolor voluptatibus facilis nobis eligendi in ipsam, debitis sit? Id veritatis deserunt, ut quia consectetur nobis eum magni hic ipsum tempore animi voluptas odit! Quae voluptas iusto dolore error suscipit architecto, itaque dolorem ipsam, necessitatibus nobis maiores! Natus rem dolores nobis? Eligendi iste nulla, distinctio vero cum, aperiam neque veritatis voluptas alias numquam provident corporis maiores. Vero dolore architecto blanditiis culpa ipsam corporis pariatur quaerat quidem. Alias animi nam, nostrum numquam fugiat, quisquam ea exercitationem dolor nulla id distinctio. Necessitatibus ut illum ipsam quod officiis. Animi odio aliquam obcaecati, nemo sunt harum possimus pariatur, autem officiis dolor quisquam? Commodi enim nemo numquam nihil ipsa ab, aspernatur fugit quae obcaecati rem, quo ipsum unde blanditiis. Dolores placeat quam consectetur vitae nemo excepturi neque atque sequi dicta tempore dolorem minus, deleniti similique omnis itaque illum vel debitis eligendi odit nisi doloribus magni optio dignissimos repellendus? Eveniet laudantium reprehenderit nemo dicta veniam quia eligendi repellat eaque dolor quas veritatis magnam dolores neque, aut sequi laboriosam! Corrupti harum aut et ipsam saepe aspernatur accusamus quam labore eveniet dignissimos natus, impedit nesciunt suscipit optio quibusdam deserunt. Possimus repudiandae eligendi minus architecto, sed exercitationem nisi cupiditate laborum sequi perferendis fugiat labore a nihil unde tempore consectetur explicabo in assumenda fuga dolorem molestiae ab veniam excepturi tenetur. Velit sunt fugiat adipisci porro sequi quis ratione expedita nisi dolor a totam consequuntur, ut fugit pariatur quod atque ipsam, sit dolore eos excepturi accusamus doloremque mollitia. Cupiditate minima molestias quisquam fugit delectus consequuntur nostrum sint iusto? Numquam natus iure ab assumenda veritatis esse dolores deleniti ut, exercitationem animi doloremque autem vel? Ipsum ea adipisci, inventore ut sapiente culpa voluptate repellat, suscipit dolore, delectus accusamus? Ad laborum, nemo expedita soluta accusamus eveniet vel voluptas. Dolor possimus delectus quibusdam deleniti perferendis quasi rerum fugiat cum quas quia incidunt nobis, corrupti a, voluptatem numquam consequuntur mollitia inventore. Beatae, numquam quis iste harum natus atque itaque dolorem expedita porro sed ipsum recusandae nulla rem et aut omnis mollitia totam. Quisquam natus commodi error expedita quo accusantium, quaerat culpa veniam quas quidem quasi iusto. Illo mollitia rem magni aspernatur, commodi iure id nemo molestias ratione atque assumenda incidunt placeat eos voluptate quisquam magnam est distinctio soluta veritatis in nam ex, harum totam. Ratione, nostrum ad laudantium asperiores sit excepturi amet sequi dolor assumenda, magni ut dolore quam cupiditate sunt dolorem odio quas officia non iure? Tempore ipsam esse quaerat ut, corporis iusto voluptates totam dicta. Mollitia, magni quam voluptates nisi placeat quidem similique iusto eveniet, ipsa consequatur saepe totam eum? Rem modi tenetur a neque? Nihil nam nobis quis repudiandae, illum eligendi adipisci consequatur, sed molestias rerum mollitia, minus repellendus nesciunt sint neque perferendis! Quaerat incidunt cumque, officiis unde porro dolorem repellendus dicta vero, provident harum fugit odit numquam laboriosam eum rem ab in! Esse aperiam, vel ullam repudiandae ad, sit accusamus culpa et architecto voluptates totam repellat omnis enim consequuntur. Corporis ad illum beatae aspernatur fugit dolor praesentium. Autem minus, nemo labore aliquid sit, qui cupiditate debitis ad exercitationem rem et nostrum illo quod. Quaerat maxime iusto, accusamus atque ipsa veniam alias quia voluptate blanditiis aliquid, aperiam voluptas, est minus inventore. Expedita voluptatibus, architecto quis distinctio ab mollitia eligendi est explicabo rerum repellat dolore, incidunt obcaecati ipsa minima aliquid eveniet repellendus tempora recusandae ipsum facere tenetur dignissimos ducimus. Eos pariatur quasi nemo. Dolorum vitae nam ullam sequi illum est corrupti voluptas possimus quam soluta inventore libero vero ea ad iure maxime consectetur in assumenda excepturi sed voluptatem, expedita non quia necessitatibus. Quibusdam, tempora consectetur unde suscipit quia itaque! Saepe minima quae illo quasi accusamus mollitia laudantium aspernatur non, nulla ex? Nemo blanditiis eligendi amet facere commodi velit ab quidem tenetur odio, modi iusto, tempore qui harum fugiat quibusdam exercitationem totam natus vitae provident hic nisi, sit ex. Fuga tenetur harum ducimus commodi quaerat id, blanditiis nihil ipsum soluta pariatur perspiciatis nam maiores a unde veniam, dolorum saepe minima corrupti quam similique earum consequatur. Facilis pariatur commodi voluptates fugit nisi quis aliquid porro, veritatis ratione unde debitis explicabo magni! Sed ipsam deleniti magni, alias consequuntur ipsum iure temporibus. Officia, commodi quos earum incidunt aliquam, sed sapiente consequuntur ipsum est qui, molestias illum exercitationem! Pariatur doloremque eaque at consectetur fugit tempore, expedita accusamus delectus cupiditate voluptatum sint ipsum, eos optio veniam deleniti consequatur architecto non doloribus repellendus? Velit, dignissimos inventore hic laborum impedit iure recusandae id eum tempore perspiciatis, in distinctio quas fugiat placeat. Magni, autem optio aliquid dicta repellendus totam rerum labore expedita est delectus saepe natus assumenda voluptates quaerat. Reiciendis quos, laudantium cum in ab itaque dolorum consequatur sit tempora laborum voluptate architecto quo, quasi, ullam assumenda libero minima est! Quam ratione alias molestiae non aliquid debitis, rem quo est sint nemo, enim ullam! Facere ab reprehenderit iste consequatur, officia sit voluptates repellat voluptatem maiores perspiciatis amet aliquid vero omnis cum cupiditate, delectus inventore esse illum blanditiis illo magnam! Ipsum temporibus qui illum adipisci rerum exercitationem cupiditate, perferendis ab voluptas sunt voluptatum minima sequi velit laboriosam, saepe dolores, aliquam nisi magnam consequuntur officia facilis. Cupiditate ratione unde doloremque, ipsa sunt magni quae eius asperiores dolores voluptatibus deserunt quibusdam eveniet dolore molestias iste dignissimos voluptate facere blanditiis quis quasi culpa libero. Quod provident nulla temporibus perferendis saepe consectetur tempore dignissimos. Sunt laborum perspiciatis odio dolorem? Excepturi officia omnis expedita magni adipisci, necessitatibus est minima unde minus praesentium natus? Qui id cupiditate, aperiam hic ipsa quas. Voluptatem commodi ullam deleniti rerum, provident quaerat repudiandae ipsum culpa, obcaecati aspernatur tempora nulla voluptate dolore, quasi consectetur accusantium harum? Iusto dolorem animi debitis. Laudantium consequatur architecto dolorum consectetur non repellendus fugiat veniam, aliquid iusto optio animi eaque quaerat vero, omnis quisquam officiis ad quibusdam porro ab? Perferendis quasi totam id accusamus nam?
            
        </section>
        <footer>
            <div class="inner-footer">
                <div class="social-links">
                    <ul>
                        <li class="social-items"><a href="#">^__i class="fab fa-facebook"></a></li>
                        <li class="social-items"><a href="#">^__i class="fab fa-twitter-square"></a></li>
                        <li class="social-items"><a href="#">^__i class="fab fa-instagram"></a></li>
                    </ul>
                </div>
                <div class="quick-links">
                    <ul>
                        <li class="quick-items"><a href="#">Home</a></li>
                        <li class="quick-items"><a href="#">About Us</a></li>
                        <li class="quick-items"><a href="#">Terms & Policy</a></li>
                        <li class="quick-items"><a href="#">Contact Us</a></li>
                    </ul>
                </div>
            </div>
            <div class="outer-footer">
                Copyright © Xylen coding. All Right Reserved
            </div>
            </footer>
</body>
</html>

CSS
*{
    list-style: none;
    text-decoration: none;
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
body{
    background: url('picture.bmp') fixed no-repeat;
    background-size: cover;
    
}
/* ****HEADER STYLING STARTS HERE**** */
@font-face{
    src: url(fonts/lucida\ calligraphy\ italic.ttf);
    font-family:luci;
}
@font-face{
    src: url(fonts/Jokerman-Regular.ttf);
    font-family: joke;
}
header {
        padding: 20px;
        width: 100%;
        
        /*position:relative;*/
        background-color: rgba(255, 111, 0, 0.7);
        box-shadow: 0 0 6px rgb(44, 44, 44);
        backdrop-filter: blur(8px);
        
    } 
    header .heading{
        display: flex;
        flex-direction:column;
        overflow: hidden;
        text-align: center;
    color:#fff;
    
    }

.heading  .lucida{
    font-family:luci;
    
}
.heading .jokerman{
    font-family: joke;
}

    .logo img{
        display:block;
        background-position: center;
        background-repeat: no-repeat;
        position:absolute;
        max-width: 100%;
        max-height: 100%;
        bottom:3px;
        float:left; 
          
    }
    /* •••••••••••••HEADER ENDS•••••••••••••• */
/* •••••••••••••NAV-BAR STARTS HERE•••••••••••••• */
.wrapper .sidebar{
    background:rgba(55, 190, 177, 0.707);
    box-shadow: 0 0 1px rgb(44, 44, 44);
    position:sticky;
    
    float:right;
    left:0;
    width: 225px;
    height: 100vh;
    padding: 20px 0px;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
}
.wrapper .sidebar .profile {
    margin-bottom: 30px;
    text-align: center;
}
.wrapper .sidebar .profile img{
 display: block;
 height: 100px;
 width: 100px;
 border-radius: 50%;
 margin-left: 54px;
}
.wrapper .sidebar .profile h3{
    color: #fff;
    margin:10px 0px 5px;
}
.wrapper .sidebar ul li a{
    display: block;
    padding: 13px 30px;
    /*border-bottom: 1px solid rgb(255, 255, 255);*/
    font-size:16px;
    position: relative;
    color: #fff;
}
.wrapper .sidebar ul li a .icon{
    color: #fff;
    width: 30px;
    display: inline-block;
}
/* link hover */
.wrapper .sidebar ul li a:hover{
    background-color: rgb(225, 255, 0);
    padding:auto;
    color:rgb(55, 129, 173); 
    font-weight: bold; 
    border-radius:20px;
    transition: all 0.3s linear;
    }
    .wrapper .sidebar ul li a:hover .icon,
    .wrapper .sidebar ul li a.active .icon{
        color: rgb(255, 0, 0);
    }
    .wrapper .sidebar ul li a:hover::before,
    .wrapper .sidebar ul li a.active::before{
        display: block;
    }
    .wrapper .section{
        width:100%;
        /*float: right;*/
        margin-right:225px;
        transition: all 0.5s ease;
        position:sticky;
        top:0;
        display: flex;
            }
    .wrapper .section .top_navbar{
        background-color:rgba(55, 178, 159, 0.84);
        box-shadow: 0 0 5px rgb(44, 44, 44);
        height:50px;
        display:flex;
        align-items:center;
        padding:0px 30px;
        
        overflow: hidden;
                
    }
    .wrapper .section .top_navbar .hamburger a{
        font-size:28px;
        color: #fff;
        /*padding: 0px 965px;*/
        
        }
        .wrapper .section .top_navbar .hamburger a:hover{
            color: rgb(255, 0, 0);
        }
        body.active .wrapper .sidebar{
            right:-225px;
        }
        body.active .wrapper .section{
            margin-right:0px;
            width:100%;
        }
        .wrapper .section .top_navbar .menus{
            display:flex;
            font-size: large;
            font-weight: 700;
            overflow: hidden;
        
        }
        .wrapper .section .top_navbar .menus a{
            color:#fff;
            padding: 7px 7px;
            margin-right: 80px;          
        }
        .wrapper .section .top_navbar .menus a:hover{
            background-color: #e1ff00;
            padding: 7px 7px;
            color:rgb(55, 129, 173); 
        
            border-radius: 4px;
            transition: all 0.3s linear;
        }
        /****** footer style starts here***/
        footer .inner-footer{
            margin:0;
            padding:20px;
            width: 100%;
            background-color:rgb(57, 57, 57);
            box-shadow: 0 0 6px rgb(32, 32, 32);
        }
        footer .inner-footer .social-links{
            display: flex;
            justify-content: center;
        }
        footer .inner-footer .social-links ul{
            display: flex;
            
        }
        footer .inner-footer .social-items{
            list-style:none;
        }
        footer .inner-footer .social-items a{
            padding: 10px 10px;
            font-size: 30px;
            color: aquamarine;
            margin-right:20px;
            }
        footer .inner-footer .quick-links , .quick-links ul {
            display: flex;
            margin-top:5px;
            justify-content: center;
                    }
        footer .inner-footer .quick-links .quick-items{
            list-style: none;
            margin-right:20px;
            
        }
        footer .inner-footer .quick-links .quick-items a{
            padding:0 15px;
            font-size: 18px;
            color:whitesmoke;
            
        }
        footer .inner-footer .quick-links .quick-items a:hover{
            background-color: #e1ff00;
            padding: 5px 20px;
            color:rgb(55, 129, 173); 
        
            border-radius: 4px;
            transition: all 0.3s linear;
        }
        footer .outer-footer{
            padding:8px;
            font-size:18px;
            text-align:center;
            background-color:rgb(43, 43, 43);
            box-shadow: 0 0 2px rgb(32, 32, 32);
            color: rgba(245, 245, 245, 0.399);
        }


What I have tried:

i have tried making website .

here the problem i am facing i.e
even after using " position tag as sticky " in css for my nav bar (i.e top_navbar in html) , it is not working

and

i dont know how to make my sidebar function as in & out; out by cliking the three-bars!
Posted
Updated 25-May-22 22:59pm
v3

1 solution

See CSS Navigation Bar[^], and similar examples.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900