Navegación de la barra lateral HTML del panel de control de OMIC EST

1,228 righitakieddine

Abrir en el editor Publica tu código

Navegación de la barra lateral HTML del panel de control de OMIC EST

Recomendado

4 December 2025

Plantas vs Zombies sin jardín

23 August 2025

Plantilla HTML para diseño web, experiencia digital y podcast

2 June 2025

Auriculares 3D

HTML

</header>
    <body>
        <section class="top">
            <nav class="btn">
                <div>
                    <button class="singout_btn">singout</button>
                </div>
            </nav>
            <aside>
                <div class="aside_bar">
                    <ul class="aside_link">
                        <h1>Omic EST</h1>
                        <li><a href="dashboard.html" class="individual"><i class='bx bx-home' ></i>Home</a></li>
                        <li><a href="sale.html" class="individual"><i class='bx bx-cart'></i>sale</a></li>
                        <li><a href="buy.html"class="individual"><i class='bx bx-cart-add'></i>buy</a></li>
                        <li><a href="statistics.html"class="individual"><i class='bx bxs-contact' ></i>statistics</a></li>
                        <li><a href="deagrame.html"class="individual"><i class='bx bx-bar-chart'></i>diagrame</a></li>

</ul>
                </div>
            </aside>

</section>
    </body>
</html>

CSS

*{
    position: relative;
    height: auto;
    width: 100%;
    margin: 0;
    padding: 0;
}
.top{
    /* position: relative; */
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    width: 512;
    background-attachment: fixed;
   /* background-image: url('https://www.pinterest.com/pin/48061921662815271/');*/
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: black;
 }

.btn{
    margin-left:5rem;
    height: auto;
    width: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: end;
    margin-right: 9rem ;
}
.signOut__btn{
    width: 150px;
    height: 30px;
    border-radius: 10px;
    background-color:gray;
    border: 2px solid black;
    border-radius: 10px;
    color: black;
    cursor: pointer;
    margin-top: 2rem;
    text-align: center;
}
.signOut__btn:hover{
    background-color: orange;
    color: white;
}
.aside__bar{
    width: 20%;
    min-height: 100vh;
    background-color: rgba(0, 0, 0,0.3);
    backdrop-filter: blur(5px);
    position: fixed;
    top:3%;
    left: 0;
    box-shadow: -8px 0 16px rgba(225, 225, 225, 0.3);
    border-radius: .5rem;
    display: flex;
    align-content: start;
    margin-top: 2rem;
    animation: fadeEffect 3s;

}
 .individual{
    height: 30px;
    margin-top: 0px;
    width: 150px;
    background-color: transparent;
    align-items: center;
    display: flex;
    flex-direction: row;
    padding: 10px 20px;
    padding-right: 70px;
    list-style: none;
    display: flex;
    color: white;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-block-start: 1px solid black;
    border-block-end:1px solid black;
 }
 .individual i{
    margin-right: 2px;
 }
 aside h1{
    background-color: rgba(225, 225, 225, 0.3);
    padding: 14px 10px;
    border-radius: .5em;
    width: 230px;
    color: orange;
    text-align: center;
    font-size: 30px;
}
aside li:hover{
    padding-left: 5px; 
}
aside a{
    color: white;
    margin-left: 10px;
    text-decoration: none;
}
aside a i{
    size: 2rem;
    margin-right: 30px;
}