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

1,354 righitakieddine

Abrir en el editor Publica tu código

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

Recomendado

1 October 2023

Efecto de texto brillante

11 April 2026

Estructura CSS del girasol HTML

26 December 2024

Un código de logicalarray833

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