Navigation latérale HTML du tableau de bord OMIC EST

1030 righitakieddine

Ouvrir dans l'éditeur Video Publiez votre code

Navigation latérale HTML du tableau de bord OMIC EST

Recommandé

24 June 2025

Modèle HTML pour agence numérique | Tailwind CSS

13 November 2025

Jeu de football rétro : HTML5 Canvas, suivi de la caméra

24 December 2023

Page d'accueil de café

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

Recommandé

Modèle HTML pour agence numérique | Tailwind CSS

Jeu de football rétro : HTML5 Canvas, suivi de la caméra

Page d'accueil de café

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS