Modello di sito web HTML per il noleggio di biciclette

757 righitakieddine

Apri nell'Editor Pubblica il Tuo Codice

Modello di sito web HTML per il noleggio di biciclette

Consigliato

14 March 2025

Modulo di registrazione/accesso

23 August 2025

Codice HTML e CSS della pagina di accesso turca

10 May 2025

Un codice di Mete

HTML

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>omic est</title>
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
    <section class="container">
    <nav class="nav__bar">
        <ul class="nav__links">
            <li><a href="index.html">Home</a></li>
            <li><a href="products.html">Products</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="about.html">About</a></li>
        </ul>
        <div class="btn">
        
            <button class="signIn__btn">Sign In</button>
            <button class="signOut__btn">Sign Out</button>
        </div>
    </nav>
        <div class="hero__container">
            <div class="logo">
                <img src="https://www.pinterest.com/pin/813814595197143121/" alt="logo" class="logo">
            </div>
            <div class="hero__text">
                <h1>Miami Bikes</h1>
                <p>Get the best Riding Experience</p>
                <button class="shop__btn">Book a Ride</button>
            </div>
        </div>
     <aside>
        <div class="aside__bar">
            <ul class="side__links">
                <h1>Miami Bikes</h1>
                <li><a href="index.html" class="individual"><i class='bx bx-home' ></i>Dashboard</a></li>
                <li><a href="products.html"class="individual"><i class='bx bxs-contact' ></i>contact</a></li>
                <li><a href="contact.html"class="individual"> <i class='bx bx-bell'></i>Notification</a></li>
                <li><a href="about.html"class="individual"><i class='bx bxl-youtube'></i>Youtube</a></li>
                <li><a href="about.html" class="individual"><i class='bx bxl-instagram' ></i>Instagram</a></li>
                <li><a href="about.html" class="individual"><i class='bx bx-x'></i>twitter</a></li>
                <li><a href="facebook.com" class="individual"><i class='bx bxl-facebook'></i>Facebook</a></li>
            </ul>
        </div>
    </aside>
    
</section>
</html>

CSS

*{
    position: relative;
    height: auto;
    width: 100%;
    margin: 0;
    padding: 0;
}
.container{
    /* position: relative; */
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    width: 100%;
    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;
}
.nav__bar{
    position: fixed;
    width: 20rem;
    height: 50px;
    background-color: transparent;
    display: flex;
    flex-direction: row;
    align-items: end;
    z-index: 1;
    /* justify-content: space-between; */
   
}
.nav__links{
    width: 600px;
    height: 30px;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: white;
    margin-top: 2rem;
    margin-left: -2rem;
}
ul{
    list-style-type: none;
}
.nav__links a{
    text-decoration: none;
    color: black;
    margin: 20px;
    font-size: 20px;
}
.nav__links a:hover{
    color: orange;
    text-decoration: underline;
}
.btn{
    margin-left:5rem;
    height: auto;
    width: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: end;
    margin-right: 9rem ;
}
.signIn__btn{
    width: 150px;
    height: 30px;
    border-radius: 10px;
   background-color: white;
    border: 2px solid black;
    border-radius: 10px;
    color: black;
    cursor: pointer;
    margin-top: 2rem;
    text-align: center;
}
.signIn__btn:hover{
    background-color: orange;
    color: white;
}
.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;
}
.container__header{
   width: 100%;
   height: 350px;
    position: relative;
    display: grid;
    grid-template-columns: auto;
    align-items: start;
    margin-top: 0rem;

}
.shop__btn{
    width: 150px;
    height: 30px;
    border-radius: 10px;
   background-color: wheat;
    border: 2px solid black;
    border-radius: 10px;
    color: black;
    cursor: pointer;
    margin-top: 2rem;
    text-align: center;
}
.hero__container{
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    width: 500px;
     text-align: center;  
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
    animation: fadeEffect 3s; 
}
@keyframes fadeEffect {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
}
.logo{
    width: 200px;
    height: 200px;
    border-radius:50% ;
    border: 5px solid white;
}
.hero__text h1{
    color: whitesmoke;
    font-size: 50px;
    margin-top: 2rem;
}
.hero__text p{
    color: black;
    font-size: 20px;
    margin-top: 2rem;
    font-weight: bold;
    background-color:orange;
    backdrop-filter: blur(20px);
    padding: 3px 5px;
    border-radius: 3px;
}
 .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

Modulo di registrazione/accesso

Codice HTML e CSS della pagina di accesso turca

Un codice di Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS