diff --git a/PROTOTIPO_ANALIZADOR_DE_TEXTO.png b/PROTOTIPO_ANALIZADOR_DE_TEXTO.png new file mode 100644 index 0000000..30b4bfe Binary files /dev/null and b/PROTOTIPO_ANALIZADOR_DE_TEXTO.png differ diff --git a/README.md b/README.md index 469d4c7..1849507 100644 --- a/README.md +++ b/README.md @@ -1,788 +1,43 @@ -# Analizador de texto +ANALIZADOR DE TEXTOS PARA TRADUCTORAS -## Índice +¡Bienvenida al Text Analyzer Web App para Traductoras! Esta aplicación es una herramienta en línea diseñada específicamente para mujeres que trabajan realizando traducciones. Con esta herramienta, puedes analizar cualquier texto para obtener información detallada sobre su contenido y así establecer tus tarifas de manera más efectiva. -* [1. Consideraciones generales](#1-consideraciones-generales) -* [2. Preámbulo](#2-preámbulo) -* [3. Resumen del proyecto](#3-resumen-del-proyecto) -* [4. Funcionalidades](#4-funcionalidades) -* [5. Boilerplate](#5-boilerplate) -* [6. Criterios de aceptación mínimos del proyecto](#6-criterios-de-aceptación-mínimos-del-proyecto) -* [7. Pruebas](#7-pruebas) -* [8. Pistas, tips y lecturas complementarias](#8-pistas-tips-y-lecturas-complementarias) -* [9. Consideraciones para pedir tu Project Feedback](#9-consideraciones-para-pedir-tu-project-feedback) -* [10. Objetivos de aprendizaje](#10-objetivos-de-aprendizaje) -* [11. Funcionalidades opcionales](#11-funcionalidades-opcionales) +##INTRODUCCIÓN -*** +La Text Analyzer Web App para Traductoras es una aplicación pensada para mujeres que se dedican a la traducción y desean contar con una herramienta que les permita calcular métricas importantes sobre los textos que reciben. Con esta aplicación, podrás obtener rápidamente el número de palabras, caracteres, y otros datos relevantes que te ayudarán en tu trabajo diario como traductora. -## 1. Consideraciones generales +##FUNCIONALIDAD -* Este proyecto lo resolvemos de manera **individual**. -* El rango de tiempo estimado para completar el proyecto es de 2 a 4 Sprints. -* Enfócate en aprender y no solamente en "completar" el proyecto. -* Te sugerimos que no intentes saberlo todo antes de empezar a codear. - No te preocupes demasiado ahora por lo que _todavía_ no entiendas. - Irás aprendiendo. +La aplicación ofrece las siguientes características principales: -## 2. Preámbulo +- Conteo de Palabras: Obtén el número total de palabras en el texto, lo cual te permite estimar el tiempo y esfuerzo requerido para traducirlo. +- Conteo de Caracteres: Calcula el número total de caracteres en el texto, incluyendo espacios y signos de puntuación. +- Caracteres sin Espacios: Muestra el número de caracteres excluyendo espacios y signos de puntuación, lo cual te da una idea más precisa del contenido del texto. +- Conteo de Números: Identifica la cantidad de números presentes en el texto, útil para textos técnicos o financieros. +- Suma de Números: Calcula la suma de todos los números encontrados en el texto, lo cual puede ser importante en contextos financieros o de análisis estadístico. +- Longitud Promedio de Palabras: Calcula la longitud promedio de las palabras en el texto, lo cual puede ser útil para determinar la complejidad del contenido. -![Una lupa sobre texto de libro](https://github.com/Laboratoria/curriculum/assets/92090/2b45f653-69a5-4282-a65c-d34125c36113) -_Credito: Foto de [ethan](https://unsplash.com/fr/@andallthings?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)_ -_en [Unsplash](https://unsplash.com/es/fotos/72NpWZJOskU?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)_ +##USO -Un analizador de texto es una aplicación para extraer información útil de un -texto utilizando diversas técnicas, como el procesamiento del lenguaje -natural (NLP), el aprendizaje automático (ML) y el análisis estadístico. -Estas aplicaciones pueden proporcionar una variedad de métricas que brindan -información básica sobre la longitud y la estructura del texto como por -ejemplo, el conteo de palabras, el conteo de caracteres, el conteo de -oraciones y el conteo de párrafos. Otras métricas incluyen el análisis -de sentimientos, que utiliza técnicas de NLP para determinar el tono -general positivo, negativo o neutral del texto, y el análisis de -legibilidad, que utiliza algoritmos para evaluar la complejidad y la -legibilidad del texto. +Para utilizar la Text Analyzer Web App para Traductoras, sigue estos pasos: -En general, las aplicaciones de análisis de texto brindan información -valiosa y métricas sobre los textos que pueden ayudar a las usuarias a -tomar decisiones informadas y sacar conclusiones significativas. -Mediante el uso de estas herramientas de análisis, las usuarias pueden -obtener una comprensión más profunda de los textos. +1. Abre la aplicación en tu navegador web preferido. +2. Escribe o pega el texto que deseas analizar en el campo de entrada. +3. La aplicación mostrará automáticamente las métricas del texto en la parte inferior de la pantalla. +4. Puedes hacer clic en el botón "BORRAR" para limpiar el campo de texto y comenzar de nuevo. -## 3. Resumen del proyecto +##DECISIONES DE DISEÑO -En este proyecto crearás una aplicación web que servirá para que tu usuaria -pueda analizar un texto en el navegador mostrando una serie de indicadores y -métricas específicas sobre caracteres, letras, números, etc. Que hayan sido -enviadas como _input_ por ella. Lo harás utilizando HTML, CSS y JavaScript. +Para desarrollar esta aplicación, se tomaron en cuenta las necesidades específicas de las mujeres que trabajan como traductoras. Algunas de las decisiones de diseño incluyen: -## 4. Funcionalidades +- En nuestro prototipo inicial se comenzó usando colores morados pero al ir avanzando se modificó a un color más claro que diera una sensacion más relajada +- Interfaz Amigable: La interfaz de usuario se diseñó para ser intuitiva y fácil de usar, permitiendo un acceso rápido a las métricas de los textos. +- Estilo Atractivo: Se seleccionaron colores y fuentes que reflejan la sensibilidad y el gusto de la audiencia objetivo. +- Funcionalidades Relevantes: Se incluyeron funcionalidades específicas como el conteo de números y la suma de números, pensando en las necesidades específicas de las traductoras. +- Color: Usamos el color lila ya que según la psicología del color da calma y tranquilidad, trasmite sensibilidad y comprensión, además que se asocia culturalmente a la feminidad de forma más sutil que el rosa +- Fondo: Se buscó un fondo con libros asociados al uso de las traductoras y con el detalle das las flores intentamos hacerlo un poco más femenino. -El listado de funcionalidades es el siguiente: +--- -1. La aplicación debe permitir a la usuaria ingresar un texto escribiéndolo -en un cuadro de texto. - -2. La aplicación debe calcular las siguientes métricas y actualizar el -resultado en tiempo real a medida que la usuaria escribe su texto: - - - **Recuento de palabras**: la aplicación debe poder contar el número de - palabras en el texto de entrada y mostrar este recuento a la usuaria - - **Recuento de caracteres**: la aplicación debe poder contar el número de - caracteres en el texto de entrada, incluidos espacios y signos de - puntuación, y mostrar este recuento a la usuaria. - - **Recuento de caracteres excluyendo espacios y signos de puntuación**: - la aplicación debe poder contar el número de caracteres en el texto de - entrada, excluyendo espacios y signos de puntuación, y mostrar este recuento - a la usuaria. - - **Recuento de números**: la aplicación debe contar cúantos números hay en - el texto de entrada y mostrar este recuento a la usuaria. - - **Suma total de números**: la aplicación debe sumar todos los números que - hay en el texto de entrada y mostrar el resultado a la usuaria. - - **Longitud media de las palabras**: la aplicación debe calcular la - longitud media de las palabras en el texto de entrada y mostrársela a la usuaria. - -3. La aplicación debe permitir limpiar el contenido de la caja de texto haciendo -clic en un botón. - -![Text analyzer demo](https://github-production-user-asset-6210df.s3.amazonaws.com/12631491/240650556-988dcd6f-bc46-473b-894c-888a66c9fe2d.gif "Text analyzer demo") - -## 5. Boilerplate - -La lógica del proyecto debe estar implementada completamente en JavaScript. En -este proyecto NO está permitido usar librerías o frameworks, solo JavaScript -puro también conocido como Vanilla JavaScript. - -Para comenzar este proyecto tendrás que hacer un _fork_ y _clonar_ este -repositorio que contiene un _boilerplate_ con tests (pruebas). Un _boilerplate_ -es la estructura básica de un proyecto que sirve como un punto de partida con -archivos y configuración inicial de dependencias y tests. - -El boilerplate que les damos contiene esta estructura: - -```text -./ -├── .babelrc -├── .editorconfig -├── .eslintrc -├── .gitignore -├── README.md -├── package.json -├── src -│ ├── analyzer.js -│ ├── index.html -│ ├── index.js -│ └── style.css -└── test - ├── .eslintrc - └── analyzer.spec.js -``` - -### Descripción de scripts / archivos - -* `README.md`: debes modificarlo para explicar la información necesaria para el - uso de tu aplicación - web, así como una introducción a la aplicación, su funcionalidad y decisiones - de diseño que tomaron. -* `.github/workflows`: esta carpeta contine la configuracion para la ejecution - de Github Actions. No debes modificar esta carpeta ni su contenido. -* `read-only/`: esta carpeta contiene las pruebas de criterios mínimos de - aceptación y end-to-end. No debes modificar esta carpeta ni su contenido. -* [`src/index.html`](./src/index.html): este es el punto de entrada a tu - aplicación. Este archivo debe contener tu HTML. -* [`src/style.css`](./src/style.css): este archivo debe contener las reglas de - estilo. Queremos que escribas tus propias reglas, por eso NO está permitido el - uso de frameworks de CSS (Bootstrap, Materialize, etc). -* [`src/analyzer.js`](./src/analyzer.js): acá debes implementar el objeto - `analyzer`, el cual ya está _exportado_ en el _boilerplate_. Este objeto - (`analyzer`) debe contener seis métodos: - - `analyzer.getWordCount(text)`: esta función debe retornar el recuento de - palabras que se encuentran en el parámetro `text` de tipo `string`. - - `analyzer.getCharacterCount(text)`: esta función debe retornar el recuento - de caracteres que se encuentran en el parámetro `text` de tipo `string`. - - `analyzer.getCharacterCountExcludingSpaces(text)`: esta función debe retornar - el recuento de caracteres excluyendo espacios y signos de puntuación que se - encuentran en el parámetro `text` de tipo `string`. - - `analyzer.getNumberCount(text)`: esta función debe retornar cúantos números - se encuentran en el parámetro `text` de tipo `string`. - - `analyzer.getNumberSum(text)`: esta función debe retornar la suma de todos - los números que se encuentran en el parámetro `text` de tipo `string`. - - `analyzer.getAverageWordLength(text)`: esta función debe retornar la longitud - media de palabras que se encuentran en el parámetro `text` de tipo `string`. - En este caso usa 2 dígitos decimales. - - Para ejemplo de uso de cada función recomendamos ver el archivo - [`test/analyzer.spec.js`](./test/analyzer.spec.js). - - _Nota: para simplificar las funcionalidades, definiremos las palabras como - un grupos de caracteres separados por espacios. Por ejemplo las palabras del - texto de entrada `¡Si, Tú puedes hacerlo!` son cuatro:_ - - - _`¡Si,`_ - - _`Tú`_ - - _`puedes`_ - - _`hacerlo!`_ - -* [`src/index.js`](./src/index.js): acá debes escuchar eventos del DOM, invocar - los métodos del objeto `analyzer` según sea necesario y actualizar el resultado - en la UI (interfaz de usuaria). -* [`test/analyzer.spec.js`](./test/analyzer.spec.js): este archivo contiene las -pruebas unitarias para los métodos del objeto `analyzer`. - -*** - -#### Deploy - -Hacer que los sitios estén publicados (o _desplegados_) para que usuarias de -la web puedan acceder a él es algo común en proyectos de desarrollo de software. - -En este proyecto, utilizaremos _Github Pages_ para desplegar nuestro sitio web. - -El comando `npm run deploy` puede ayudarte con esta tarea y también puedes - consultar su [documentación oficial](https://docs.github.com/es/pages). - -## 6. Criterios de aceptación mínimos del proyecto - -A continuación encontrarás los criterios de aceptación mínimos del proyecto -relacionados con cada objetivo de aprendizaje. - -### HTML - -* **Uso de HTML semántico** - - - [ ] La aplicación tiene un encabezado conformado por un - [`
`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header) - que es padre de un - [`

`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h1) - con texto `Analizador de texto`. Para que puedas practicar más, estos - elementos no pueden tener atributos `id`, ni `name`, ni `class`. - - - [ ] La aplicación usa un - [` + + + + + + +
+

MAYERLING HERNANDEZ

+
+ + + + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..b5cd5ec --- /dev/null +++ b/index.js @@ -0,0 +1,49 @@ +import analyzer from './analyzer.js'; + +//TODO: escuchar eventos del DOM e invocar los métodos del objeto `analyzer` + +const textarea = document.querySelector("textarea"); //busco el elemento testarea +const palabras = document.querySelector('li[data-testid="word-count"]'); +const caracteres = document.querySelector('li[data-testid="character-count"]'); +const caracteresSinEspacios = document.querySelector('li[data-testid="character-no-spaces-count"]'); +const numeros = document.querySelector('li[data-testid="number-count"]'); +const suma = document.querySelector('li[data-testid="number-sum"]'); +const longitud = document.querySelector('li[data-testid="word-length-average"]'); +const resetButton = document.getElementById('reset-button'); //busco el elemento id reset-button + +textarea.addEventListener("input", () => { // escucha el input cada que se escribeconst text = textarea.value; //declaramos la constante y obtiene el contenido act del cuadro de texto + const text = textarea.value; + + const wordCount = analyzer.getWordCount(text); //llama a una funcion para contar el numero de palabras + palabras.textContent = `PALABRAS: ${wordCount}`; //crea cadena de texto con el numero de palabras + + const characterCount = analyzer.getCharacterCount(text);//llama a una funcion para contar el numero de caracteres + caracteres.textContent = `CARACTERES: ${characterCount}`;//crea cadena de texto con el numero de caracteres + + const characterCountExcludingSpaces = analyzer.getCharacterCountExcludingSpaces(text);//llama a una funcion para contar el numero de palabras sin epacios ni signos de puntuacion + caracteresSinEspacios.textContent = `CARACTERES SIN ESPACIOS: ${characterCountExcludingSpaces}`;//crea cadena de texto con el numero de palabras sin espacios ni signos de puntuacion + + const averageWordLength = analyzer.getAverageWordLength(text);//llama a una funcion para contar la longitud de palabras + longitud.textContent = `LONGITUD: ${averageWordLength}`;//crea cadena de texto con la longitud de palabras + + const numberCount = analyzer.getNumberCount(text);//llama a una funcion para contar los números + numeros.textContent = `NUMEROS: ${numberCount}`;//crea cadena de texto con la cantidad de números + + const numberSum = analyzer.getNumberSum(text);//llama a una funcion para sumar los números + suma.textContent = `SUMA: ${numberSum}`; // //crea cadena de texto con la suma de números + + +}); + + + +resetButton.addEventListener('click', () => { // cuando se haga click se ejecutara la lista de funciones + textarea.value = ''; //borrará lo escrito en el textarea + palabras.textContent="PALABRAS: 0"; + caracteres.textContent="CARACTERES: 0"; + caracteresSinEspacios.textContent = "CARACTERES SIN ESPACIOS: 0"; + longitud.textContent = "LONGITUD: 0"; + numeros.textContent = "NÚMEROS: 0"; + suma.textContent = "SUMA: 0"; +//dejará los númeos a 0 de cada una de la lista +}) \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index b531843..33d908c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,7 +18,7 @@ "eslint": "^8.3.0", "gh-pages": "^3.1.0", "htmlhint": "^1.0.0", - "jest": "^27.0.1", + "jest": "^27.5.1", "jsdom": "^21.1.1", "opener": "^1.5.1", "serve": "^13.0.2" diff --git a/package.json b/package.json index 67de4e3..d759730 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "eslint": "^8.3.0", "gh-pages": "^3.1.0", "htmlhint": "^1.0.0", - "jest": "^27.0.1", + "jest": "^27.5.1", "jsdom": "^21.1.1", "opener": "^1.5.1", "serve": "^13.0.2" @@ -42,4 +42,4 @@ "version": "8.4.0", "commit": "d5b8aec07b9436348c5e1eb156926b50f8ab795f" } -} \ No newline at end of file +} diff --git a/src/analyzer.js b/src/analyzer.js deleted file mode 100644 index dd3039a..0000000 --- a/src/analyzer.js +++ /dev/null @@ -1,24 +0,0 @@ -const analyzer = { - getWordCount: (text) => { - //TODO: esta función debe retornar el recuento de palabras que se encuentran en el parámetro `text` de tipo `string`. - if(!text) return 0; - return text.trim().split(/\s+/).length; - }, - getCharacterCount: (text) => { - //TODO: esta función debe retornar el recuento de caracteres que se encuentran en el parámetro `text` de tipo `string`. - }, - getCharacterCountExcludingSpaces: (text) => { - //TODO: esta función debe retornar el recuento de caracteres excluyendo espacios y signos de puntuación que se encuentran en el parámetro `text` de tipo `string`. - }, - getAverageWordLength: (text) => { - //TODO: esta función debe retornar la longitud media de palabras que se encuentran en el parámetro `text` de tipo `string`. - }, - getNumberCount: (text) => { - //TODO: esta función debe retornar cúantos números se encuentran en el parámetro `text` de tipo `string`. - }, - getNumberSum: (text) => { - //TODO: esta función debe retornar la suma de todos los números que se encuentran en el parámetro `text` de tipo `string`. - } -}; - -export default analyzer; diff --git a/src/index.html b/src/index.html deleted file mode 100644 index 71b28ad..0000000 --- a/src/index.html +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - Analizador de textos - - - - -
-

Analizador de texto

-
- -

Te presentamos una herramienta para contar las metricas de textos, que te ayudará a saber la cantidad de palabras para establecer tus tarifas en traducciones

- - - - - - - - - \ No newline at end of file diff --git a/src/index.js b/src/index.js deleted file mode 100644 index eb8e817..0000000 --- a/src/index.js +++ /dev/null @@ -1,19 +0,0 @@ -import analyzer from './analyzer.js'; - -//TODO: escuchar eventos del DOM e invocar los métodos del objeto `analyzer` - -const textarea = document.querySelector("textarea"); -const palabras = document.querySelector('.lista .palabras'); - -textarea.addEventListener("input", () => { - const text = textarea.value; - const wordCount = analyzer.getWordCount(text); - palabras.textContent = `PALABRAS: ${wordCount}`; -}); - -const resetButton = document.getElementById('reset-button'); - console.log(resetButton); -resetButton.addEventListener('click', () => { - textarea.value = ''; - -}); \ No newline at end of file diff --git a/src/style.css b/src/style.css deleted file mode 100644 index 6c1f13a..0000000 --- a/src/style.css +++ /dev/null @@ -1,27 +0,0 @@ -h1 { - color: rgb(251, 251, 252); - font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; - -} - -h2{ - color:rgba(208, 185, 250, 0.808); - font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; - font-size: medium; -} -p { - color:rgb(57, 12, 129); - font-family: 'Times New Roman', Times, serif; - font-size: small -} - -html { - background: linear-gradient(to bottom,#8e59b6,#DEB4FF); -} - -#limpiar { - background-color: rgb(235, 240, 239); - text-align: center; - border-radius: 35px; -} - diff --git a/style.css b/style.css new file mode 100644 index 0000000..459a864 --- /dev/null +++ b/style.css @@ -0,0 +1,99 @@ +header { + color: rgb(251, 251, 252); /*color del texto*/ + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + text-align: center; /*alinear en el centro*/ + font-size: 10px; /*tamaño del texto*/ + margin-bottom: 10px; /*crea un margen en la parte de abajo*/ + border-top-right-radius: 30px; /*crea una curva en la parte superios derecha del borde*/ + border-bottom-left-radius: 30px; + border: #e1d5eb; /*crea una linea de borde dandole un color*/ + padding: 1px; /*espciado interno alrededor del contenido del elemento */ + background: #AC91F8; + width: 70%; /*ancho del elemento*/ + margin: 0 auto; /*centra el margen derecho e izquierdo automaticamente*/ + +} + +h2{ + color:rgba(243, 240, 248, 0.952); + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + font-size: 15px; /*tamaño del texto*/ + text-align: center; /*se sentra el texto dentro del elemento*/ + margin-top: 5px; /*crea un margen en la parte de arriba*/ +} + +div { + padding: 10px; /*espciado interno alrededor del contenido del elemento */ + border: 1px solid #cba4f8; /*estilo color y grosor del borde*/ + border-top-right-radius: 30px; /*crea una curva en la parte superios derecha del borde*/ + border-bottom-left-radius: 30px; + box-sizing: border-box; /*calcula el tamaño total del elemento*/ + width: 70%; /*ancho del elemento*/ + margin: 0 auto; /*margen exterior*/ + min-height: 200px; /*altura minima*/ + background: linear-gradient(to bottom,#290446cb,#dfb4ffcb); /*define el fondo*/ +} + +.metricas { + font-family: Arial, Helvetica, sans-serif; + font-size: 12px; + color: rgb(245, 244, 247); + padding: 10px; /*espciado interno alrededor del contenido*/ + border: 1px solid #e0c5ff; /*estilo color y grosor del borde*/ + background-color: #AC91F8; /*define el fondo*/ + box-sizing: border-box; /*calcula el tamaño total del elemento*/ + display: block; /*se mostrará como un bloque*/ + margin: 0 auto; /*margen exterior*/ + border-top-right-radius: 20px; + border-bottom-left-radius: 20px; + width: 50%; /*ancho del elemento*/ + height: 35px; /*establece la altura del elemento*/ + margin-bottom: 5px; + margin-top: 5px; +} + +textarea[name="user-input"] { + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-size: 20px; + color: #3b0366; + padding: 10px; /*espciado interno alrededor del contenido*/ + border: 1px solid #ccc; /*estilo color y grosor del borde*/ + border-top-right-radius: 50px; + border-bottom-left-radius: 50px; + box-sizing: border-box; /*calcula el tamaño total del elemento*/ + display: block; /*se mostrará como un bloque*/ + margin: 0 auto; /*margen exterior*/ + width: 100%; /*ancho del elemento*/ + height: 100px; /*establece la altura del elemento*/ + background-color: #f2edf5; +} + +#reset-button { + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + font-size: 15px; + color: rgb(245, 244, 247); + padding: 10px; /*espciado interno alrededor del contenido*/ + border-radius: 30px; /*de esta forma afecta los 4 lados de la caja*/ + border: 1px solid #e0c5ff; + background-color: #2E094B; /*color de fondo*/ + box-sizing: border-box; /*calcula el tamaño total del elemento*/ + display: block; /*se mostrará como un bloque*/ + margin: 0 auto; /*centra el margen derecho e izquierdo automaticamente*/ +} + +html { + background-image: url('fondo.jpg'); /*vincula una imagen para el fondo de la pagina*/ +} + +footer { + color:rgb(57, 12, 129); + font-family: Arial, Helvetica, sans-serif; + font-size: smaller; + text-align: center; /*centrar texto*/ + border: 1px solid #e0c5ff; + background-color: #e0c5ff9a; /*color de fondo*/ + border-radius: 10px; /*de esta forma afecta los 4 lados de la caja*/ + margin-bottom: 5px; + margin-top: 65px; + width: 100%; /*ancho del elemento*/ + } \ No newline at end of file