Dashboard OMIC EST HTML Barra di navigazione laterale

669 righitakieddine

Apri nell'Editor Pubblica il Tuo Codice

Dashboard OMIC EST HTML Barra di navigazione laterale

Consigliato

14 October 2024

Un modello di pagina web per "Anes Development" con un messaggio di benvenuto e la navigazione.

28 September 2025

Modello HTML per negozio di scarpe da ginnastica per e-commerce

14 February 2025

Un codice di Pedro_bugica

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

Consigliato

Un modello di pagina web per "Anes Development" con un messaggio di benvenuto e la navigazione.

Modello HTML per negozio di scarpe da ginnastica per e-commerce

Un codice di Pedro_bugica

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS