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

1024 righitakieddine

Abrir en el editor Video Publica tu código

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

Recomendado

11 August 2025

Contenedor de animación de mensajes HTML

29 January 2025

Un código de sheeshokaokayokay

21 February 2026

Formulario de inicio de sesión animado con CSS y fondo líquido

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;
}

Recomendado

Contenedor de animación de mensajes HTML

Un código de sheeshokaokayokay

Formulario de inicio de sesión animado con CSS y fondo líquido

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS