diff --git a/index.html b/index.html
new file mode 100644
index 000000000..84393c919
--- /dev/null
+++ b/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+        <title>Post de @daanipardo_</title>
+        <link rel="stylesheet" type="text/css" href="./styles.css"/>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    </head>
+    <body>
+        <div class="post">
+            <div class="post-encabezado">
+                <i class="fa-brands fa-html5"></i>
+                <strong><h1>Rainbow Six Siege</h1></strong>
+                <i class="fa-solid fa-ellipsis-vertical"></i>
+            </div>
+            <div class="post-imagen">
+                <img src="https://sm.ign.com/ign_es/game/r/rainbow-si/rainbow-six-siege_d2b2.jpg"
+            </div>
+            <div class="post-footer">
+                <div class="emojis">
+                <button class="boton"><i class="fa-regular fa-heart"></i></button>
+                <i class="fa-regular fa-comment"></i>
+                <i class="fa-solid fa-location-arrow"></i>
+                </div>
+                <strong><p>Esta publicacion le ha gustado a 354 personas</p></strong>
+                <p class="descripcion">Rainbow six siege es un shooter tactico 5vs5 de buscar y destruir. Gana el primero que llegue a 4 rondas, en caso de empate a 3 , es a 5. Son 3 rondas como atacante y 3 rondas como defensor o al reves. No lo recomiendo me estan empezando a salir canas.</p>
+                <ul>
+                    <li><strong>Izan_05:</strong>Agregame esta es mi id....</li>
+                    <li><strong>Punki_05:</strong>Deja de jugar ya, no sales de bronce.</li>
+                    <li><strong>ElGordoMillo:</strong>No doy una bala, me lo voy a desisntalar</li>
+                </ul>
+                <p class="comentarios"> Ver todos los comentarios...</p>
+            </div>
+        </div>
+    </body>
\ No newline at end of file
diff --git a/styles.css b/styles.css
new file mode 100644
index 000000000..976277927
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,47 @@
+body{
+    background-color: black;
+}
+*{
+	border: 1px dashed red;
+	min-height: 10px;
+}
+.post{
+    background: white;
+    width: 500px;
+    height: 800px;
+    margin: auto;
+}
+.post-encabezado{
+    display: flex;
+    border-bottom: 2px solid black;
+    height:75px;
+    align-items: center;
+    text-align: center;
+}
+h1{
+    width: 465px;
+}
+
+.post-imagen img{
+  width: 475px;  
+  height: 400px;
+  object-fit: cover;
+  margin-top: 10px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+  margin-left: 10px;
+  }
+.post-footer p{
+  margin-top: 1px;
+  }
+ul li{
+    list-style-type: none;
+    margin-left: -20px;
+}
+.comentarios{
+    color: gray;
+    margin-left: 20px;
+}
+.boton :active{
+    background-color: red;
+}
\ No newline at end of file
