diff --git a/styles.css b/styles.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/wireframe1.css b/wireframe1.css
new file mode 100644
index 000000000..39d162be1
--- /dev/null
+++ b/wireframe1.css
@@ -0,0 +1,65 @@
+/* Reset básico */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: Arial, sans-serif;
+}
+
+body {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+/* Header */
+header {
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+header h1 {
+  margin-bottom: 10px;
+}
+
+/* Secciones principales */
+section {
+  margin-bottom: 40px;
+}
+
+/* Artículos estilo wireframe */
+article {
+  border: 2px solid #cccccc;
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+/* Botón estilo wireframe */
+button {
+  margin-top: 20px;
+  padding: 10px 20px;
+  border: 2px solid #ccc;
+  background: #f5f5f5;
+  cursor: pointer;
+}
+
+/* Grid inferior con dos artículos */
+main section:nth-of-type(2) {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+}
+
+/* Footer */
+footer {
+  text-align: center;
+  padding: 20px;
+  border-top: 2px solid #ccc;
+}
+
+/* Responsive para móviles */
+@media (max-width: 700px) {
+  main section:nth-of-type(2) {
+    grid-template-columns: 1fr;
+  }
+}
\ No newline at end of file
diff --git a/wireframe1.html b/wireframe1.html
new file mode 100644
index 000000000..127a6c5f0
--- /dev/null
+++ b/wireframe1.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <link rel="stylesheet" href="wireframe1.css">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Wireframe Questions</title>
+</head>
+
+<body>
+  <header>
+    <h1>Frequently Asked Questions</h1>
+    <p>Answers to common concepts in software development and Git workflow.</p>
+  </header>
+
+  <main>
+
+    <!-- Large article block -->
+    <section>
+      <article>
+        <h2>What is the purpose of a README file?</h2>
+        <p>
+          A README file introduces and explains a project. It usually describes the
+          project's purpose, how to install or run it, the technologies used, and any
+          relevant instructions for contributors or users. It serves as the first point
+          of reference for understanding the repository.
+        </p>
+        <button>Read More</button>
+      </article>
+    </section>
+
+    <!-- Two smaller article blocks side by side -->
+    <section>
+      <article>
+        <h2>What is the purpose of a wireframe?</h2>
+        <p>
+          A wireframe is a visual guide that outlines the structure of a webpage or
+          application interface. It focuses on layout, content placement, and user flow
+          without dealing with styling or design details. Wireframes help teams plan and
+          test ideas early in the design process.
+        </p>
+        <button>Read More</button>
+      </article>
+
+      <article>
+        <h2>What is a branch in Git?</h2>
+        <p>
+          A branch in Git is a parallel version of a project’s code. It allows developers
+          to work on new features, fixes, or experiments without altering the main codebase.
+          Once the work is ready, the branch can be merged back into the main branch.
+        </p>
+        <button>Read More</button>
+      </article>
+    </section>
+
+  </main>
+
+  <footer>
+    <p>Footer .</p>
+  </footer>
+
+</body>
+</html>
\ No newline at end of file
