Formulario de registro, maqueta

css/About-Us.css

@@ -0,0 +1,210 @@
+/*Estilos para la Navbar*/
+.header .navbar-brand {
+    color: white !important;
+}
+
+.header .nav-link {
+    color: white !important;
+    font-size: 16.5px;
+}
+
+.header .nav-link:hover {
+    color: rgb(99, 56, 56) !important;
+}
+
+@media(max-width: 700px){
+    .nav-link{text-align: center;}
+}
+
+.header .navbar {
+    background-image: linear-gradient(to right, #F5E2BE, #e07A76);
+}
+
+
+
+    body {
+        font-family: "IBM Plex Sans", sans-serif;
+        font-weight: 400;
+        font-style: normal;
+    }
+
+
+    h1,h2 {
+        font-family: "Hammersmith One", sans-serif;
+        font-weight: 400;
+        font-style: normal;
+        font-size: 50px;
+        padding: 20px;
+    }
+
+h3 {
+    font-family: "Hammersmith One", sans-serif;
+    font-weight: 400;
+    font-style: oblique;
+    font-size: 30px;
+    color: #e07A76;
+}
+
+#pmodal{
+    font-family: "IBM Plex Sans", sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 15px;
+    text-align: justify;
+}
+
+/*Estilos para las imagenes*/
+.image-container {
+    padding: 20px;
+}
+
+.container {
+    padding: 20px;
+}
+
+/*Carta*/
+.team-member {
+    width: 318px; /* Ancho fijo para todas las tarjetas */
+    margin: 20px; /* Espacio alrededor de las tarjetas */
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Sombra suave alrededor de la tarjeta */
+    border-radius: 8px; /* Bordes redondeados */
+    overflow: hidden; /* Asegura que la imagen no desborde los bordes redondeados */
+}
+
+.card-img-top {
+    width: 100%; /* Asegura que la imagen cubra todo el ancho de la tarjeta */
+    height: auto; /* Mantiene la relación de aspecto de la imagen */
+}
+
+.card-body {
+    padding: 15px; /* Espacio interno alrededor del contenido dentro de la tarjeta */
+    text-align: center; /* Centra el texto en la tarjeta */
+}
+
+.card-title {
+    margin-bottom: 10px; /* Espacio debajo del título */
+    color: #f8c0a9; /* Color del texto para el título */
+}
+
+.card-text {
+    margin-bottom: 20px; /* Espacio debajo del texto */
+    color: #666; /* Color del texto para la descripción */
+}
+
+.btn-primary {
+    background-color: #f8c0a9; /* Color de fondo para el botón */
+    border: none; /* Sin borde para el botón */
+    padding: 10px 20px; /* Relleno para el botón */
+}
+
+.btn-primary:hover {
+    background-color: #f8c0a9; /* Color de fondo del botón al pasar el mouse */
+}
+
+#imgmodal{
+    width: 200px; 
+    height: auto;
+    margin-right: 20px;
+}
+
+/*.custom-card{
+	width: 300px;
+	height: 500px;
+}
+
+    p{text-align: justify;} 
+
+.img-fluid {
+
+    max-width:100%;
+    height:auto;
+
+}
+
+.card-body{
+    flex:1 1 auto;padding:1rem 1rem
+}
+
+
+.card-text:last-child{
+
+    margin-bottom:0
+
+}
+
+.card-text{
+    font-family: "IBM Plex Sans", sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 15px;
+
+}
+
+
+ #team-container {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-around;
+            padding: 20px;
+        }
+
+        .team-member {
+            width: 300px;
+            margin: 20px;
+            padding: 20px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            text-align: center;
+            position: relative;
+        }
+
+        .team-member img {
+            width: 150px;
+            height: 150px;
+            border-radius: 50%;
+            margin-bottom: 10px;
+            position: absolute;
+            top: -75px;
+            left: 75px;
+            border: 4px solid #fff;
+        }*/
+
+
+
+
+/*PREGUNTAR SOBRE LA PARTE DE BOOSTRAP CSS Y LOS 9 ERRORES*/
+
+            /*
+.carousel-control-color{
+    white;
+}
+$carousel-control-width15%;
+$carousel-control-opacity:           .5;
+$carousel-control-hover-opacity:     .9;
+$carousel-control-transition:        opacity .15s ease;
+
+.carousel-indicators{
+    width:30px;
+    height: 3px;
+
+}
+$carousel-indicator-height:          3px;
+$carousel-indicator-hit-area-height: 10px;
+$carousel-indicator-spacer:          3px;
+$carousel-indicator-opacity:         .5;
+$carousel-indicator-active-bg:       $white;
+$carousel-indicator-active-opacity:  1;
+$carousel-indicator-transition:      opacity .6s ease;
+
+$carousel-caption-width:             70%;
+$carousel-caption-color:             $white;
+$carousel-caption-padding-y:         1.25rem;
+$carousel-caption-spacer:            1.25rem;
+
+$carousel-control-icon-width:        2rem;
+
+$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
+$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");
+
+$carousel-transition-duration:       .6s;
+$carousel-transition:                transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)*/