127 lines
3.1 KiB
CSS
127 lines
3.1 KiB
CSS
|
|
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200&display=swap');
|
|
|
|
.rentel-app {
|
|
background: var(--container-dark-background-color);
|
|
}
|
|
|
|
.rentel-header {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 13%;
|
|
color: black;
|
|
border-bottom: 2px solid var(--second-border-color);
|
|
display: flex;
|
|
background: var(--main-background-color);
|
|
justify-content: center; /* Centrar horizontalmente */
|
|
align-items: center; /* Centrar verticalmente */
|
|
}
|
|
|
|
.rentel-header > p {
|
|
position: relative;
|
|
top: 23px;
|
|
margin: 0; /* Asegura que no haya margen interior */
|
|
font-size: 30px;
|
|
font-family: 'Oswald', sans-serif;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.rentel-items {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 86%;
|
|
top: 13%;
|
|
padding-top: 20px;
|
|
margin: 0 auto;
|
|
left: 0;
|
|
right: 0;
|
|
overflow: auto;
|
|
}
|
|
|
|
.rentelapp {
|
|
display: flex;
|
|
align-items: center; /* Para centrar verticalmente */
|
|
justify-content: space-between; /* Para colocar la imagen a la derecha */
|
|
position: relative;
|
|
width: 88%;
|
|
background: var(--main-background-color);
|
|
border-radius: 8px;
|
|
height: 22.3%;
|
|
margin: 0 auto;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0px 0px 7px 4px rgba(0, 0, 0, 0.1);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.rentelapp h1 {
|
|
position: absolute;
|
|
font-size: 90px;
|
|
font-family: 'Oswald', sans-serif;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
margin: 0;
|
|
top: 50%;
|
|
left: 50%;
|
|
z-index: 0;
|
|
transform: translate(-50%, -50%);
|
|
background: linear-gradient(to right, rgba(169, 169, 169, 0.3), transparent);
|
|
-webkit-background-clip: text; /* Para aplicar el gradiente solo al texto */
|
|
color: transparent; /* Hacemos el texto transparente para mostrar solo el gradiente */
|
|
}
|
|
|
|
.rentelapp img {
|
|
height: auto; /* Ajusta según tu diseño */
|
|
max-height: 110%; /* Ajusta según tu diseño */
|
|
margin-bottom: 20px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.rentelapp-title {
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 20px;
|
|
font-size: 18px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.rentelapp-price {
|
|
position: relative;
|
|
bottom: 20px;
|
|
left: 20px;
|
|
font-weight: bold;
|
|
color: red;
|
|
font-size: 18px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.rentelapp-price .per-day-link {
|
|
position: relative;
|
|
top: 7px;
|
|
color: red;
|
|
font-size: 0.8em; /* Tamaño más pequeño para "per day" */
|
|
vertical-align: super; /* Alineación superior para posicionar "per day" arriba */
|
|
text-decoration: none; /* Sin subrayado */
|
|
z-index: 1;
|
|
}
|
|
|
|
.rentelapp-purchase {
|
|
position: absolute;
|
|
left: 20px;
|
|
font-size: 16px;
|
|
color: white;
|
|
bottom: 20px;
|
|
background: linear-gradient(#ff8080, #ff4040); /* Degradado de rojo claro a oscuro */
|
|
border: none;
|
|
border-radius: 15px; /* Border radius para esquinas redondeadas */
|
|
padding: 4px 20px; /* Espaciado interno para el botón */
|
|
cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
|
|
transition: background 0.3s ease-in-out;
|
|
z-index: 1;
|
|
}
|
|
|
|
.rentelapp-purchase:hover {
|
|
background: linear-gradient(#ff4040, #ff0000); /* Cambio de color al pasar el cursor */
|
|
}
|