मियामी बाइक रेंटल वेबसाइट HTML टेम्पलेट

अनुशंसित

26 February 2025

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Miami Bike</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;
}

मियामी बाइक रेंटल वेबसाइट HTML टेम्पलेट

अनुशंसित

HTML CSS डेवलपर लैंडिंग पेज

वेबसाइट

एनिमेटेड HTML इनपुट

HTML

CSS

JS

अनुशंसित

HTML CSS डेवलपर लैंडिंग पेज

वेबसाइट

एनिमेटेड HTML इनपुट

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS