Modern Scientific Calculator - Copy this Html, Tailwind Component to your project

<div class="container mx auto px 4 py 8 max w 7xl"> <! Header > <header class="text center mb 8 md:mb 12 fade in"> <div class="flex justify between items center mb 4"> <button onclick="toggleDarkMode()" class="p 2 rounded full hover:bg gray 200 dark:hover:bg gray 700 transition colors"> <i class="fas fa moon dark:hidden"></i> <i class="fas fa sun hidden dark:block"></i> </button> <div class="inline flex items center justify center w 16 h 16 md:w 20 md:h 20 rounded full bg gradient to br from [var( primary)] to [var( accent)] shadow lg"> <i class="fas fa calculator text 2xl md:text 3xl text white"></i> </div> <div class="w 10"></div> </div> <h1 class="text 3xl md:text 4xl lg:text 5xl font bold mb 2 gradient text">SCIENCE CALC</h1> <p class="text base md:text lg text gray 600 dark:text gray 300 max w 3xl mx auto leading relaxed"> Calculadora científica avanzada para operaciones matemáticas complejas. Herramienta esencial para estudiantes y profesionales. </p> <div class="mt 4 flex flex wrap justify center gap 2"> <span class="status pill bg blue 100 text blue 800 dark:bg blue 900 dark:text blue 200"> <i class="fas fa calculator mr 1"></i> Científica </span> <span class="status pill bg green 100 text green 800 dark:bg green 900 dark:text green 200"> <i class="fas fa chart line mr 1"></i> Gráficas </span> <span class="status pill bg purple 100 text purple 800 dark:bg purple 900 dark:text purple 200"> <i class="fas fa brain mr 1"></i> Avanzada </span> </div> </header> <! Main Content > <div class="bg white dark:bg gray 800 rounded 2xl elevated card p 6 mb 6"> <! Navigation Tabs > <div class="flex overflow x auto pb 2 mb 6 space x 2"> <button onclick="showSection('home')" class="tab button px 4 py 2 text sm active" id="homeTab"> <i class="fas fa home mr 1"></i> Inicio </button> <button onclick="showSection('matrices')" class="tab button px 4 py 2 text sm" id="matricesTab"> <i class="fas fa table mr 1"></i> Matrices </button> <button onclick="showSection('polynomials')" class="tab button px 4 py 2 text sm" id="polynomialsTab"> <i class="fas fa drafting compass mr 1"></i> Polinomios </button> <button onclick="showSection('vectors')" class="tab button px 4 py 2 text sm" id="vectorsTab"> <i class="fas fa vector square mr 1"></i> Vectores </button> <button onclick="showSection('graphs')" class="tab button px 4 py 2 text sm" id="graphsTab"> <i class="fas fa chart line mr 1"></i> Gráficas </button> <button onclick="showSection('calculus')" class="tab button px 4 py 2 text sm" id="calculusTab"> <i class="fas fa square root alt mr 1"></i> Cálculo </button> <button onclick="showSection('about')" class="tab button px 4 py 2 text sm" id="aboutTab"> <i class="fas fa info circle mr 1"></i> Acerca de </button> </div> <! Content Sections > <div id="content"> <! Home Section > <div id="home section" class="fade in"> <div class="grid grid cols 1 md:grid cols 2 gap 6"> <div class="bg gradient to br from blue 50 to blue 100 dark:from blue 900 dark:to blue 800 p 6 rounded xl"> <h3 class="text xl font bold text blue 800 dark:text blue 200 mb 3 flex items center"> <i class="fas fa lightbulb mr 2"></i> Operaciones Básicas </h3> <ul class="space y 2"> <li class="flex items start"> <i class="fas fa check circle text blue 500 dark:text blue 300 mt 1 mr 2"></i> <span>Matrices: suma, resta, multiplicación</span> </li> <li class="flex items start"> <i class="fas fa check circle text blue 500 dark:text blue 300 mt 1 mr 2"></i> <span>Polinomios: operaciones algebraicas</span> </li> <li class="flex items start"> <i class="fas fa check circle text blue 500 dark:text blue 300 mt 1 mr 2"></i> <span>Vectores: producto punto y cruz</span> </li> </ul> </div> <div class="bg gradient to br from green 50 to green 100 dark:from green 900 dark:to green 800 p 6 rounded xl"> <h3 class="text xl font bold text green 800 dark:text green 200 mb 3 flex items center"> <i class="fas fa cogs mr 2"></i> Operaciones Avanzadas </h3> <ul class="space y 2"> <li class="flex items start"> <i class="fas fa check circle text green 500 dark:text green 300 mt 1 mr 2"></i> <span>Derivación e integración</span> </li> <li class="flex items start"> <i class="fas fa check circle text green 500 dark:text green 300 mt 1 mr 2"></i> <span>Gráficas 2D y 3D</span> </li> <li class="flex items start"> <i class="fas fa check circle text green 500 dark:text green 300 mt 1 mr 2"></i> <span>Cálculo de determinantes</span> </li> </ul> </div> </div> <div class="mt 6 bg gradient to br from purple 50 to purple 100 dark:from purple 900 dark:to purple 800 p 6 rounded xl"> <h3 class="text xl font bold text purple 800 dark:text purple 200 mb 3 flex items center"> <i class="fas fa bolt mr 2"></i> ¿Cómo usar esta calculadora? </h3> <ol class="list decimal pl 5 space y 2"> <li>Selecciona una categoría del menú superior</li> <li>Ingresa los datos requeridos en los campos correspondientes</li> <li>Haz clic en la operación que deseas realizar</li> <li>Visualiza los resultados en la sección inferior</li> </ol> </div> </div> <! Matrices Section > <div id="matrices section" class="hidden fade in"> <h2 class="text 2xl font bold text blue 700 dark:text blue 300 mb 6 flex items center"> <i class="fas fa table mr 2"></i> Operaciones con Matrices </h2> <! Matrix Size Selector > <div class="mb 6 bg white dark:bg gray 700 p 4 rounded xl shadow"> <h3 class="font bold mb 3 text gray 800 dark:text gray 200 flex items center"> <i class="fas fa expand mr 2"></i> Tamaño de Matrices </h3> <div class="flex items center space x 4"> <div> <label class="block text sm font medium text gray 700 dark:text gray 300 mb 1">Filas</label> <select id="matrix rows" class="input field"> <option value="1">1</option> <option value="2">2</option> <option value="3" selected>3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </div> <div class="text 2xl mt 5">×</div> <div> <label class="block text sm font medium text gray 700 dark:text gray 300 mb 1">Columnas</label> <select id="matrix cols" class="input field"> <option value="1">1</option> <option value="2">2</option> <option value="3" selected>3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </div> <button onclick="updateMatrixSize()" class="mt 5 px 4 py 2 bg blue 600 text white rounded lg hover:bg blue 700 transition"> <i class="fas fa sync alt mr 1"></i> Actualizar </button> </div> </div> <div class="grid grid cols 1 md:grid cols 2 gap 6 mb 6"> <! Matriz A > <div class="bg white dark:bg gray 700 p 4 rounded xl shadow"> <div class="flex justify between items center mb 3"> <h3 class="font bold text gray 800 dark:text gray 200 flex items center"> <i class="fas fa matrix mr 2 text blue 500"></i> Matriz A </h3> <div class="flex space x 2"> <button onclick="randomizeMatrix('A')" class="px 2 py 1 text xs bg blue 100 dark:bg blue 900 text blue 800 dark:text blue 200 rounded md"> <i class="fas fa random"></i> </button> <button onclick="clearMatrix('A')" class="px 2 py 1 text xs bg gray 100 dark:bg gray 600 text gray 800 dark:text gray 200 rounded md"> <i class="fas fa eraser"></i> </button> </div> </div> <div class="matrix container"> <div id="matrixA" class="matrix grid"></div> </div> </div> <! Matriz B > <div class="bg white dark:bg gray 700 p 4 rounded xl shadow"> <div class="flex justify between items center mb 3"> <h3 class="font bold text gray 800 dark:text gray 200 flex items center"> <i class="fas fa matrix mr 2 text green 500"></i> Matriz B </h3> <div class="flex space x 2"> <button onclick="randomizeMatrix('B')" class="px 2 py 1 text xs bg green 100 dark:bg green 900 text green 800 dark:text green 200 rounded md"> <i class="fas fa random"></i> </button> <button onclick="clearMatrix('B')" class="px 2 py 1 text xs bg gray 100 dark:bg gray 600 text gray 800 dark:text gray 200 rounded md"> <i class="fas fa eraser"></i> </button> </div> </div> <div class="matrix container"> <div id="matrixB" class="matrix grid"></div> </div> </div> </div> <! Matrix Operations > <div class="mb 6"> <h3 class="text lg font semibold text gray 800 dark:text gray 200 mb 3 flex items center"> <i class="fas fa calculator mr 2"></i> Operaciones Disponibles </h3> <div class="grid grid cols 2 sm:grid cols 3 lg:grid cols 4 gap 3"> <button onclick="matrixOperation('add')" class="operation btn px 3 py 2 bg gradient to r from blue 500 to indigo 500 text white rounded lg"> <i class="fas fa plus mr 1"></i> Sumar </button> <button onclick="matrixOperation('subtract')" class="operation btn px 3 py 2 bg gradient to r from green 500 to emerald 500 text white rounded lg"> <i class="fas fa minus mr 1"></i> Restar </button> <button onclick="matrixOperation('multiply')" class="operation btn px 3 py 2 bg gradient to r from purple 500 to violet 500 text white rounded lg"> <i class="fas fa times mr 1"></i> Multiplicar </button> <button onclick="matrixOperation('determinant')" class="operation btn px 3 py 2 bg gradient to r from red 500 to pink 500 text white rounded lg"> <i class="fas fa search mr 1"></i> Determinante </button> <button onclick="matrixOperation('inverse')" class="operation btn px 3 py 2 bg gradient to r from yellow 500 to amber 500 text white rounded lg"> <i class="fas fa exchange alt mr 1"></i> Inversa </button> <button onclick="matrixOperation('transpose')" class="operation btn px 3 py 2 bg gradient to r from cyan 500 to teal 500 text white rounded lg"> <i class="fas fa retweet mr 1"></i> Transpuesta </button> <button onclick="matrixOperation('rank')" class="operation btn px 3 py 2 bg gradient to r from orange 500 to amber 500 text white rounded lg"> <i class="fas fa layer group mr 1"></i> Rango </button> <button onclick="matrixOperation('trace')" class="operation btn px 3 py 2 bg gradient to r from lime 500 to green 500 text white rounded lg"> <i class="fas fa vector square mr 1"></i> Traza </button> </div> </div> <! Result > <div class="mt 6 p 5 rounded lg result container border border gray 200 dark:border gray 600"> <h3 class="text lg font semibold text gray 800 dark:text gray 200 mb 3 flex items center"> <i class="fas fa square root alt mr 2"></i> Resultado </h3> <div id="matrix result" class="bg white dark:bg gray 700 p 4 rounded md shadow inner border border gray 200 dark:border gray 600 min h 20 overflow auto"> <p class="text gray 500 dark:text gray 400 text center py 4">Los resultados aparecerán aquí...</p> </div> </div> </div> <! Polynomials Section > <div id="polynomials section" class="hidden fade in"> <h2 class="text 2xl font bold text blue 700 dark:text blue 300 mb 6 flex items center"> <i class="fas fa function mr 2"></i> Operaciones con Polinomios </h2> <div class="grid grid cols 1 md:grid cols 2 gap 6 mb 6"> <! Polinomio 1 > <div> <h3 class="font bold mb 2 text gray 800 dark:text gray 200 flex items center"> <i class="fas fa p mr 2 text blue 500"></i> Polinomio 1 </h3> <input type="text" id="poly1" class="input field w full" placeholder="Ej: 3*x**2 + 2*x + 1"> </div> <! Polinomio 2 > <div> <h3 class="font bold mb 2 text gray 800 dark:text gray 200 flex items center"> <i class="fas fa p mr 2 text green 500"></i> Polinomio 2 </h3> <input type="text" id="poly2" class="input field w full" placeholder="Ej: x**2 4"> </div> </div> <! Operations > <div class="mb 6"> <h3 class="text lg font semibold text gray 800 dark:text gray 200 mb 3 flex items center"> <i class="fas fa calculator mr 2"></i> Operaciones Disponibles </h3> <div class="grid grid cols 2 sm:grid cols 3 lg:grid cols 4 gap 3"> <button onclick="polynomialOperation('add')" class="operation btn px 3 py 2 bg gradient to r from blue 500 to indigo 500 text white rounded lg"> <i class="fas fa plus mr 1"></i> Sumar </button> <button onclick="polynomialOperation('subtract')" class="operation btn px 3 py 2 bg gradient to r from green 500 to emerald 500 text white rounded lg"> <i class="fas fa minus mr 1"></i> Restar </button> <button onclick="polynomialOperation('multiply')" class="operation btn px 3 py 2 bg gradient to r from purple 500 to violet 500 text white rounded lg"> <i class="fas fa times mr 1"></i> Multiplicar </button> <button onclick="polynomialOperation('derivative')" class="operation btn px 3 py 2 bg gradient to r from red 500 to pink 500 text white rounded lg"> <i class="fas fa arrow down mr 1"></i> Derivada </button> <button onclick="polynomialOperation('integral')" class="operation btn px 3 py 2 bg gradient to r from yellow 500 to amber 500 text white rounded lg"> <i class="fas fa arrow up mr 1"></i> Integral </button> <button onclick="polynomialOperation('roots')" class="operation btn px 3 py 2 bg gradient to r from cyan 500 to teal 500 text white rounded lg"> <i class="fas fa crosshairs mr 1"></i> Raíces </button> </div> </div> <! Result > <div class="mt 6 p 5 rounded lg result container border border gray 200 dark:border gray 600"> <h3 class="text lg font semibold text gray 800 dark:text gray 200 mb 3 flex items center"> <i class="fas fa square root alt mr 2"></i> Resultado </h3> <div id="polynomial result" class="bg white dark:bg gray 700 p 4 rounded md shadow inner border border gray 200 dark:border gray 600 min h 20"> <p class="text gray 500 dark:text gray 400 text center py 4">Los resultados aparecerán aquí...</p> </div> </div> </div> <! Vectors Section > <div id="vectors section" class="hidden fade in"> <h2 class="text 2xl font bold text blue 700 dark:text blue 300 mb 6 flex items center"> <i class="fas fa vector square mr 2"></i> Operaciones con Vectores </h2> <div class="grid grid cols 1 md:grid cols 2 gap 6 mb 6"> <! Vector 1 > <div> <h3 class="font bold mb 2 text gray 800 dark:text gray 200 flex items center"> <i class="fas fa arrow right mr 2 text blue 500"></i> Vector 1 </h3> <input type="text" id="vector1" class="input field w full" placeholder="Ej: 1, 2, 3"> </div> <! Vector 2 > <div> <h3 class="font bold mb 2 text gray 800 dark:text gray 200 flex items center"> <i class="fas fa arrow right mr 2 text green 500"></i> Vector 2 </h3> <input type="text" id="vector2" class="input field w full" placeholder="Ej: 4, 5, 6"> </div> </div> <! Operations > <div class="mb 6"> <h3 class="text lg font semibold text gray 800 dark:text gray 200 mb 3 flex items center"> <i class="fas fa calculator mr 2"></i> Operaciones Disponibles </h3> <div class="grid grid cols 2 sm:grid cols 3 lg:grid cols 4 gap 3"> <button onclick="vectorOperation('add')" class="operation btn px 3 py 2 bg gradient to r from blue 500 to indigo 500 text white rounded lg"> <i class="fas fa plus mr 1"></i> Sumar </button> <button onclick="vectorOperation('subtract')" class="operation btn px 3 py 2 bg gradient to r from green 500 to emerald 500 text white rounded lg"> <i class="fas fa minus mr 1"></i> Restar </button> <button onclick="vectorOperation('dot')" class="operation btn px 3 py 2 bg gradient to r from purple 500 to violet 500 text white rounded lg"> <i class="fas fa circle dot mr 1"></i> Punto </button> <button onclick="vectorOperation('cross')" class="operation btn px 3 py 2 bg gradient to r from red 500 to pink 500 text white rounded lg"> <i class="fas fa times mr 1"></i> Cruz </button> <button onclick="vectorOperation('magnitude')" class="operation btn px 3 py 2 bg gradient to r from yellow 500 to amber 500 text white rounded lg"> <i class="fas fa ruler mr 1"></i> Magnitud </button> <button onclick="vectorOperation('angle')" class="operation btn px 3 py 2 bg gradient to r from cyan 500 to teal 500 text white rounded lg"> <i class="fas fa angle right mr 1"></i> Ángulo </button> <button onclick="vectorOperation('normalize')" class="operation btn px 3 py 2 bg gradient to r from orange 500 to amber 500 text white rounded lg"> <i class="fas fa compress mr 1"></i> Normalizar </button> </div> </div> <! Result > <div class="mt 6 p 5 rounded lg result container border border gray 200 dark:border gray 600"> <h3 class="text lg font semibold text gray 800 dark:text gray 200 mb 3 flex items center"> <i class="fas fa square root alt mr 2"></i> Resultado </h3> <div id="vector result" class="bg white dark:bg gray 700 p 4 rounded md shadow inner border border gray 200 dark:border gray 600 min h 20"> <p class="text gray 500 dark:text gray 400 text center py 4">Los resultados aparecerán aquí...</p> </div> </div> </div> <! Graphs Section > <div id="graphs section" class="fade in"> <h2 class="text 2xl font bold text blue 700 dark:text blue 300 mb 6 flex items center"> <i class="fas fa chart line mr 2"></i> Gráficas 2D y 3D </h2> <div class="grid grid cols 1 md:grid cols 3 gap 6 mb 6"> <! Graph Type > <div> <h3 class="font bold mb 2 text gray 800 dark:text gray 200 flex items center"> <i class="fas fa chart simple mr 2"></i> Tipo de Gráfica </h3> <select id="graph type" class="input field w full"> <option value="2d">2D</option> <option value="3d">3D</option> </select> </div> <! Function > <div> <h3 class="font bold mb 2 text gray 800 dark:text gray 200 flex items center"> <i class="fas fa function mr 2"></i> Función </h3> <input type="text" id="graph function" class="input field w full" value="sin(x)" placeholder="Ej: sin(x), x**2"> </div> <! Range > <div id="graph range 2d"> <h3 class="font bold mb 2 text gray 800 dark:text gray 200 flex items center"> <i class="fas fa sliders mr 2"></i> Rango para x </h3> <div class="grid grid cols 2 gap 2"> <input type="number" id="x min" class="input field" value=" 10" placeholder="Mínimo"> <input type="number" id="x max" class="input field" value="10" placeholder="Máximo"> </div> </div> <div id="graph range 3d" class="hidden"> <h3 class="font bold mb 2 text gray 800 dark:text gray 200 flex items center"> <i class="fas fa sliders mr 2"></i> Rango para 3D </h3> <div class="grid grid cols 2 gap 2"> <input type="number" id="x min 3d" class="input field" value=" 5" placeholder="x min"> <input type="number" id="x max 3d" class="input field" value="5" placeholder="x max"> <input type="number" id="y min 3d" class="input field" value=" 5" placeholder="y min"> <input type="number" id="y max 3d" class="input field" value="5" placeholder="y max"> </div> </div> </div> <! Plot Button > <button onclick="plotFunction()" class="operation btn px 4 py 3 bg gradient to r from purple 500 to violet 500 text white rounded lg hover:bg blue 700 mb 6 w full"> <i class="fas fa chart line mr 2"></i> Graficar Función </button> <! Graph > <div id="graph container" class="graph container border border gray 200 dark:border gray 600" style="height: 500px; width: 100%; min height: 400px; position: relative;"> <canvas id="chartCanvas" style="width: 100%; height: 100%;"></canvas> </div> </div> <! Calculus Section > <div id="calculus section" class="hidden fade in"> <h2 class="text 2xl font bold text blue 700 dark:text blue 300 mb 6 flex items center"> <i class="fas fa square root alt mr 2"></i> Derivación e Integración </h2> <! Function > <div class="mb 6"> <h3 class="font bold mb 2 text gray 800 dark:text gray 200 flex items center"> <i class="fas fa function mr 2"></i> Función </h3> <input type="text" id="calculus function" class="input field w full" value="x**2 + sin(x)" placeholder="Ej: x**2 + sin(x)"> </div> <! Operations > <div class="mb 6"> <h3 class="text lg font semibold text gray 800 dark:text gray 200 mb 3 flex items center"> <i class="fas fa calculator mr 2"></i> Operaciones Disponibles </h3> <div class="grid grid cols 2 sm:grid cols 3 lg:grid cols 4 gap 3"> <button onclick="calculusOperation('derivative')" class="operation btn px 3 py 2 bg gradient to r from blue 500 to indigo 500 text white rounded lg"> <i class="fas fa arrow down mr 1"></i> Derivar </button> <button onclick="calculusOperation('integral')" class="operation btn px 3 py 2 bg gradient to r from green 500 to emerald 500 text white rounded lg"> <i class="fas fa arrow up mr 1"></i> Integrar </button> </div> </div> <! Result > <div class="mt 6 p 5 rounded lg result container border border gray 200 dark:border gray 600"> <h3 class="text lg font semibold text gray 800 dark:text gray 200 mb 3 flex items center"> <i class="fas fa square root alt mr 2"></i> Resultado </h3> <div id="calculus result" class="bg white dark:bg gray 700 p 4 rounded md shadow inner border border gray 200 dark:border gray 600 min h 20"> <p class="text gray 500 dark:text gray 400 text center py 4">Los resultados aparecerán aquí...</p> </div> </div> </div> <! About Section > <div id="about section" class="hidden fade in"> <h2 class="text 2xl font bold text blue 700 dark:text blue 300 mb 6 flex items center"> <i class="fas fa info circle mr 2"></i> Acerca de </h2> <div class="bg gradient to br from blue 50 to blue 100 dark:from blue 900 dark:to blue 800 p 6 rounded xl mb 6"> <h3 class="text xl font bold text blue 800 dark:text blue 200 mb 3 flex items center"> <i class="fas fa atom mr 2"></i> SCIENCE CALC </h3> <p class="mb 4">Calculadora científica avanzada desarrollada como parte del proyecto para la materia:</p> <p class="font bold mb 4 text lg">Modelos Matemáticos y Simulación</p> </div> <div class="grid grid cols 1 md:grid cols 2 gap 6"> <div class="bg white dark:bg gray 700 p 6 rounded xl shadow"> <h4 class="text lg font bold text blue 700 dark:text blue 300 mb 3 flex items center"> <i class="fas fa user graduate mr 2"></i> Información del Autor </h4> <div class="space y 2"> <p><span class="font semibold">Nombre:</span> Steven Alexander Nieto Durán</p> <p><span class="font semibold">Carrera:</span> Ingeniería en Software</p> <p><span class="font semibold">Semestre:</span> Sexto Semestre</p> <p><span class="font semibold">Año Académico:</span> 2025 </p> </div> </div> <div class="bg white dark:bg gray 700 p 6 rounded xl shadow"> <h4 class="text lg font bold text blue 700 dark:text blue 300 mb 3 flex items center"> <i class="fas fa chalkboard teacher mr 2"></i> Profesor </h4> <p class="mb 4">Ing. Morales Torres Fabricio</p> <h4 class="text lg font bold text blue 700 dark:text blue 300 mb 3 flex items center"> <i class="fas fa code mr 2"></i> Tecnologías Utilizadas </h4> <ul class="list disc pl 5 space y 1"> <li>Python (Flask, NumPy, SymPy)</li> <li>HTML, TailwindCSS</li> <li>JavaScript, Plotly</li> <li>Math.js</li> </ul> </div> </div> </div> </div> </div> <! Footer > <footer class="mt 8 text center text gray 500 dark:text gray 400 text sm"> <div class="flex flex wrap justify center gap 4 mb 3"> <a href="#" class="text gray 400 hover:text [var( primary)] dark:hover:text [var( accent)] transition colors"> <i class="fas fa book mr 1"></i> Documentación </a> <a href="#" class="text gray 400 hover:text [var( primary)] dark:hover:text [var( accent)] transition colors"> <i class="fas fa question circle mr 1"></i> Ayuda </a> <a href="#" class="text gray 400 hover:text [var( primary)] dark:hover:text [var( accent)] transition colors"> <i class="fas fa bug mr 1"></i> Reportar problema </a> <a href="#" class="text gray 400 hover:text [var( primary)] dark:hover:text [var( accent)] transition colors"> <i class="fas fa envelope mr 1"></i> Contacto </a> </div> <p>© 2025 SCIENCE CALC | Calculadora Científica Avanzada</p> <p class="mt 1 text xs">v1.0.0 | Modelos Matemáticos y Simulación</p> </footer> </div> QUIERO QUE DE ESE CÓDIGO, LO ORGANICES MAS PROFECIONALMENTE, Y MEJORA EL DISEÑO, HAZLO MAS MODERNO Y ELEGANETE