diff --git a/assets/logo.jpeg b/assets/logo.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..5f786fe910fa5b6148332de9a353f5b0f89af184
Binary files /dev/null and b/assets/logo.jpeg differ
diff --git a/practicaFinal.html b/practicaFinal.html
new file mode 100644
index 0000000000000000000000000000000000000000..a796d66b1f35275ec18cb3226ba64294f8587595
--- /dev/null
+++ b/practicaFinal.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Estructura con IDs</title>
+ <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+ <div id="contenedor-superior">
+ <div id="rectangular-superior">
+ <img src="assets/logo.jpeg" alt="Logo CD Abanto">
+ <h1 id="titulo">C.D. ABANTO</h1>
+ </div>
+ <div id="superior-derecha">
+ <p>Temporada 2023/2024</p>
+ </div>
+ </div>
+ <div id="contenedor-principal">
+ <div id="resto-pantalla"></div>
+ <div id="vertical-derecha">
+ <div id="div-superior">Datos Temporada</div>
+ <div id="div-inferior">Rendimiento Jugadores</div>
+ </div>
+ </div>
+</body>
+</html>
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000000000000000000000000000000000000..c3b02ac127992b2453ab2d74c2af5af7e4415566
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,112 @@
+/* Reset y configuración global */
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ font-family: Arial, sans-serif;
+}
+
+/* Contenedor superior */
+#contenedor-superior {
+ display: flex;
+ height: 200px;
+ margin: 10px;
+}
+
+/* Div rectangular superior */
+#rectangular-superior {
+ background-color: #4FC3F7;
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-right: 10px;
+ padding: 0 20px;
+}
+
+/* Imagen dentro del div rectangular superior */
+#rectangular-superior img {
+ height: 180px;
+ width: auto;
+ object-fit: contain;
+}
+
+/* Estilo del tÃtulo */
+#titulo {
+ font-size: 6.5em;
+ color: white;
+ margin: 0 auto;
+ font-weight: bold;
+ text-align: center;
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+/* Div amarillo en la esquina superior derecha */
+#superior-derecha {
+ background-color: #B3E5FC;
+ width: 25%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 3em;
+ font-weight: bold;
+ text-align: center;
+ color: #333;
+ padding: 10px;
+}
+
+/* Contenedor principal para los divs inferiores */
+#contenedor-principal {
+ display: flex;
+ flex: 1;
+ margin: 10px;
+}
+
+/* Div que ocupa el resto de la pantalla */
+#resto-pantalla {
+ background-color: #01579B;
+ flex: 1;
+ margin-right: 10px;
+ color: white;
+ font-size: 1.5em;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+/* Div vertical derecho */
+#vertical-derecha {
+ background-color: #0288D1;
+ width: 25%;
+ display: flex;
+ flex-direction: column;
+}
+
+/* Div superior e inferior */
+#div-superior, #div-inferior {
+ flex: 1;
+ border: 3px solid white;
+ color: white;
+ font-size: 1.5em;
+ font-weight: bold;
+ text-align: center;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: background-color 0.3s, color 0.3s;
+}
+
+/* Efecto hover */
+#div-superior:hover, #div-inferior:hover {
+ background-color: #B3E5FC;
+ color: #0288D1;
+}