Skip to content

Commit

Permalink
Integracion
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jordan-Iralde
Jordan-Iralde committed Nov 28, 2024
1 parent f2be182 commit f46dadf
Show file tree
Hide file tree
Showing 5 changed files with 219 additions and 213 deletions.
193 changes: 134 additions & 59 deletions AIntegracion/Syles/Styles_Chatbot/Style.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* General Reset */
/* Estilo General */
* {
margin: 0;
padding: 0;
Expand All @@ -7,11 +7,11 @@

body {
font-family: 'Poppins', sans-serif;
background-image: url('imgs/pagina web.png');
background-color: #2570d1;
display: flex;
flex-direction: column;
min-height: 100vh;
background: linear-gradient(45deg, #4c6ef5, #2c3e50); /* Fondo degradado */
color: #fff;
height: 100vh;
background-size: cover;
background-position: center;
}

/* Header */
Expand All @@ -21,119 +21,194 @@ header {
top: 0;
left: 0;
z-index: 1000;
background: #fff;
background-color: rgba(255, 255, 255, 0.9); /* Fondo blanco semi-transparente */
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
padding: 10px 20px;
transition: all 0.3s ease-in-out;
animation: slideDown 0.5s ease-out;
}

/* Animación para el header */
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

/* Navbar */
.navbar {
padding: 10px 0;
}

.navbar-toggler {
border: none;
background-color: transparent;
}

.navbar-toggler-icon {
background-color: #003851;
}

.navbar-nav {
display: flex;
justify-content: space-between;
align-items: center;
justify-content: flex-end;
}

.navbar a {
text-decoration: none;
font-weight: 700;
color: #003851;
.navbar-nav .nav-item {
margin-left: 15px;
}

.navbar .search-form {
.search-form {
margin-right: 10px;
position: relative;
}

.navbar .search-form input {
width: 200px;
padding: 5px 10px;
.search-input {
border-radius: 20px;
border: 1px solid #ccc;
padding: 8px 12px;
width: 220px;
}

.search-input:focus {
outline: none;
box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
}

/* Main Content */
main {
flex: 1; /* Permite que el contenido ocupe todo el espacio disponible */
margin-top: 70px; /* Asegura espacio para el header fijo */
/* Estilos de los botones */
.BotonesNavbar {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
padding: 20px;
margin-top: 20px;
}

.BotonesNavbar button {
background-color: #2570d1;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
margin: 0 10px;
cursor: pointer;
transition: background-color 0.3s;
}

#imagenCelular {
max-width: 250px;
height: auto;
.BotonesNavbar button:hover {
background-color: #003851;
}

/* Tarjetas */
.cuadricula {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
width: 100%;
padding: 20px;
animation: fadeIn 1s ease-out;
}

.tarjeta {
perspective: 1000px;
width: 150px;
height: 200px;
position: relative;
transition: transform 0.3s ease-in-out;
}

.tarjeta:hover {
transform: scale(1.05);
}

.tarjeta .frente,
.tarjeta .reverso {
position: absolute;
backface-visibility: hidden;
width: 100%;
height: 100%;
height: 200px;
background-color: #fff;
border: 2px solid #ddd;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
transition: transform 0.6s ease;
font-size: 1.2rem;
text-align: center;
color: #003851;
transition: transform 0.6s;
}

.tarjeta .frente {
background: #c4c6c6;
background-color: #2570d1;
color: #fff;
font-weight: bold;
font-size: 16px;
color: #003851;
}

.tarjeta .reverso {
background-color: #fff;
transform: rotateY(180deg);
background: #003851;
color: #fff;
}

.tarjeta:hover .frente {
transform: rotateY(180deg);
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
}

.tarjeta:hover .reverso {
transform: rotateY(0);
}

/* Animación para las tarjetas */
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

/* Botón Chatbot */
#botonChat {
background-color: #003851;
padding: 10px 20px;
color: white;
border: none;
border-radius: 5px;
margin-top: 20px;
text-align: center;
transition: background-color 0.3s;
}

#botonChat:hover {
background-color: #2570d1;
}

/* Footer */
footer {
width: 100%;
background-color: #003851;
color: #fff;
padding: 20px;
padding: 30px 20px;
color: white;
text-align: center;
margin-top: auto; /* Hace que el footer se mantenga al final incluso con poco contenido */
margin-top: 50px;
}

.footer-contact,
.footer-numbers,
.footer-bottom {
.footer-contact h1 {
font-size: 1.5rem;
margin-bottom: 10px;
}

.footer-contact h1 {
font-size: 20px;
font-weight: 700;
.footer-numbers .number {
margin-bottom: 10px;
}

.footer-numbers .number {
margin: 5px 0;
/* Responsive */
@media (max-width: 768px) {
.navbar-nav {
text-align: center;
}

.cuadricula {
grid-template-columns: 1fr;
}

.BotonesNavbar {
flex-direction: column;
}
}
35 changes: 27 additions & 8 deletions AIntegracion/Syles/styleTurnero.css
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,12 @@
/* Estilos generales */
AIntegracion\Img\IMG Turnero\fondito.webp
body {
margin: 0;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: flex-start;
background-color: #642e2e; /* Fondo claro */
background: url('AIntegracion/Img/IMG_Turnero/fondito.webp') no-repeat center center fixed; /* Fondo con imagen */
background-size: cover; /* Asegura que el fondo cubra toda la pantalla */
background-position: center;
background-attachment: fixed; /* Hace que el fondo no se mueva al hacer scroll */
height: 100vh; /* Asegura que el body ocupe todo el alto */
flex-direction: column;
}
Expand All @@ -27,21 +24,35 @@ main {

/* Caja principal de turnero */
.turnero-box {
background-color: rgba(93, 138, 168, 0.9); /* Fondo más oscuro para contraste */
background-color: rgba(0, 0, 0, 0.7); /* Fondo oscuro y semi-transparente para contraste */
padding: 35px;
border-radius: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
width: 100%;
max-width: 500px;
text-align: center;
margin: 20px;
animation: fadeIn 0.8s ease-out;
}

/* Animación de desvanecimiento para la caja */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

/* Titulo */
.turnero-box h2 {
font-size: 30px;
color: white;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra suave en el texto */
}

/* Entrada de texto */
Expand All @@ -55,26 +66,34 @@ main {
border-radius: 5px;
background-color: #eaeaea;
font-size: 14px;
transition: background-color 0.3s ease-in-out;
}

.turnero-box input:focus {
background-color: #f3f3f3;
box-shadow: 0 0 8px rgba(0, 123, 255, 0.7); /* Efecto de enfoque */
}

/* Botón */
.turnero-box button {
background-color: #3b5998;
color: white;
padding: 10px;
padding: 15px;
width: 100%;
max-width: 400px;
height: 50px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
transition: background-color 0.3s, transform 0.2s;
font-size: 15px;
margin-top: 15px;
text-transform: uppercase; /* Texto en mayúsculas */
}

.turnero-box button:hover {
background-color: #2d4373;
transform: scale(1.05); /* Efecto de hover */
}

/* Diseño Responsivo para pantallas pequeñas */
Expand Down
Loading

0 comments on commit f46dadf

Please sign in to comment.