WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Landing page para um negócio de bicicletas
1097
mcdonge13
Abrir no Editor
Publique Seu Código
Recomendado
23 August 2025
Exemplo de animação de grade CSS
10 December 2024
Um código por agilecloud61
29 May 2025
Um código de Mete
HTML
Copy
Miami Bikes
Home
Products
Contact
About
Sign In
Sign Out
Miami Bikes
Get the best Riding Experience
Book a Ride
CSS
Copy
*{ 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; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */