diff --git a/starter-code/index.html b/starter-code/index.html
new file mode 100644
index 000000000..56e0ae8a1
--- /dev/null
+++ b/starter-code/index.html
@@ -0,0 +1,224 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="styles.css" />
+
+
+</head>
+
+<body>
+    <header class="menu">
+        <h2 class="cabezaizquierda">
+            Revera
+        </h2>
+
+        <nav>
+
+            <ul>
+                <li>Home</li>
+                <li>About</li>
+                <li>Sample page</li>
+                <li>Portfolio</li>
+                <li>Blog</li>
+                <li>Parent page >> </li>
+                <li>Contact</li>
+            </ul>
+
+
+        </nav>
+    </header>
+
+    <header class="hero">
+        <h1>
+            ETIAM MAURIS TORTOR, PHARETRA QUIS LOBORTIS IN, PHARETRA IN DIAM
+        </h1>
+        <p class="herotext">
+            Los marcadores de versión indican la versión de Excel en la que se presentó una función. Estas funciones no
+            están
+            disponibles en versiones anteriores. Por ejemplo, un marcador de versión de 2013 indica que esta función
+            está disponible
+            en Excel 2013 y en todas las versiones posteriores.
+        </p>
+    </header>
+
+
+    <section class="conteineruno">
+
+        <div class="row">
+
+            <article class="col-md-4">
+                <img src="./img/project-1.jpg" alt="foto gatito">
+                <h3>Web design</h3>
+                <p>unc libero ett, laculls nec augen non</p>
+            </article>
+            <article class="col-md-4">
+                <img src="./img/project-1.jpg" alt="foto gatito">
+                <h3>Web development</h3>
+                <p>unc libero ett, laculls nec augen non</p>
+            </article>
+            <article class="col-md-4">
+                <img src="./img/project-1.jpg" alt="foto gatito">
+                <h3>User Interface</h3>
+                <p>unc libero ett, laculls nec augen non</p>
+            </article>
+
+
+
+
+        </div>
+
+
+
+
+
+    </section>
+
+
+
+
+    <section class="containerdos">
+        <h2> Latest Projects</h2>
+        <h3> Few of the latest porfolio items</h3>
+
+
+
+        <div class="row">
+
+            <article class="col-md-3">
+                <img src="./img/project-1.jpg" alt="foto gatito">
+                <p>unc libero ett, laculls nec augen non</p>
+            </article>
+            <article class="col-md-3">
+                <img src="./img/project-1.jpg" alt="foto gatito">
+                <p>unc libero ett, laculls nec augen non</p>
+            </article>
+            <article class="col-md-3">
+                <img src="./img/project-1.jpg" alt="foto gatito">
+                <p>unc libero ett, laculls nec augen non</p>
+            </article>
+            <article class="col-md-3">
+                <img src="./img/project-1.jpg" alt="foto gatito">
+                <p>unc libero ett, laculls nec augen non</p>
+            </article>
+
+
+
+
+        </div>
+
+
+    </section>
+
+
+
+    <section class="container">
+
+        <h2> Latest Articles</h2>
+        <h3> Few of the latest porfolio items</h3>
+
+
+
+        <div class="row">
+
+            <article class="col-md-3">
+                <img src="./img/project-1.jpg" alt="foto gatito">
+                <h3> Ettam mauris tortor, pharetra quis loboritn, pharetra in dam</h3>
+                <h3> posted on august 19, 2019 by admin</h3>
+                <p>unc libero ett, laculls nec augen nonBe Svendsen es un interesante personaje que se ha ganado su
+                    lugar dentro del circuito mundial sin duda alguna, un
+                    productor danés que cuenta con un enfoque muy peculiar dentro de la música electrónica</p>
+            </article>
+            <article class="col-md-3">
+                <img src="./img/project-1.jpg" alt="foto gatito">
+                <h3> Ettam mauris tortor, pharetra quis loboritn, pharetra in dam</h3>
+                <h3> posted on august 19, 2019 by admin</h3>
+                <p>unc libero ett, laculls nec augen nonBe Svendsen es un interesante personaje que se ha ganado su
+                    lugar dentro del circuito mundial sin duda alguna, un
+                    productor danés que cuenta con un enfoque muy peculiar dentro de la música electrónica</p>
+            </article>
+            <article class="col-md-3">
+                <img src="./img/project-1.jpg" alt="foto gatito">
+                <h3> Ettam mauris tortor, pharetra quis loboritn, pharetra in dam</h3>
+                <h3> posted on august 19, 2019 by admin</h3>
+                <p>unc libero ett, laculls nec augen nonBe Svendsen es un interesante personaje que se ha ganado su
+                    lugar dentro del circuito mundial sin duda alguna, un
+                    productor danés que cuenta con un enfoque muy peculiar dentro de la música electrónica</p>
+            </article>
+            <article class="col-md-3">
+                <img src="./img/project-1.jpg" alt="foto gatito">
+                <h3> Ettam mauris tortor, pharetra quis loboritn, pharetra in dam</h3>
+                <h3> posted on august 19, 2019 by admin</h3>
+                <p>unc libero ett, laculls nec augen nonBe Svendsen es un interesante personaje que se ha ganado su
+                    lugar dentro del circuito mundial sin duda alguna, un
+                    productor danés que cuenta con un enfoque muy peculiar dentro de la música electrónica</p>
+            </article>
+
+
+
+
+        </div>
+
+    </section>
+    <section class="conteinercuatro">
+
+        <div class="row">
+
+            <article class="col-md-3">
+                <h3>Reserva</h3>
+                <p>unc libero ett, laculls nec augen nonn ejemplo de código o una variante del mismo.
+                    Esto es necesario para probar una nueva funcionalidad o
+                    para testear su implementación o rendimiento. El código puede ser muy largo.</p>
+            </article>
+            <article class="col-md-3">
+                <h3>Meta</h3>
+                <p>Log in</p>
+                <p>Entress RSS</p>
+                <p>Comments RSS</p>
+                <p>WordPress.org</p>
+            </article>
+            <article class="col-md-3">
+                <h3>Archives</h3>
+                <p>August 2013</p>
+            </article>
+            <article class="col-md-3">
+                <h3>Recent Posts</h3>
+                <p>Eesunc libero ett, laculls nec augen nonn ejemplo de código o una variante del mismo.
+                    Esto es necesario para prob</p>
+                <p>Eesunc libero ett, laculls nec augen nonn ejemplo de código o una variante del mismo.
+                    Esto es necesario para prob</p>
+                <p>Eesunc libero ett, laculls nec augen nonn ejemplo de código o una variante del mismo.
+                    Esto es necesario para prob</p>
+                <p>Eesunc libero ett, laculls nec augen nonn ejemplo de código o una variante del mismo.
+                    Esto es necesario para prob</p>
+                <p>Eesunc libero ett, laculls nec augen nonn ejemplo de código o una variante del mismo.
+                    Esto es necesario para prob</p>
+            </article>
+
+
+
+
+        </div>
+
+
+
+
+
+    </section>
+
+
+
+
+
+
+
+
+</body>
+
+</html>
+
+<footer>Copyright © 2016</footer>
\ No newline at end of file
diff --git a/starter-code/styles.css b/starter-code/styles.css
new file mode 100644
index 000000000..3121af269
--- /dev/null
+++ b/starter-code/styles.css
@@ -0,0 +1,104 @@
+img {
+    width: 100px;
+
+}
+
+.menu ul {
+    display: flex;
+    list-style: none;
+
+}
+
+menu li {
+    margin-right: 10px;
+
+
+}
+
+.menu {
+    display: flex;
+    content: center;
+
+}
+
+
+.cabezaizquierda {
+    text-transform: uppercase
+}
+
+.cabeceraderecha {
+    display: flex justify-content: flex
+}
+
+.hero {
+    background-image: url('./img/project-2.jpg');
+    background-size: cover;
+    background-repeat: no-repeat;
+    color: white;
+
+}
+
+.herotext {
+    color: white;
+}
+
+
+.conteineruno {
+    padding-left: 20px;
+    padding-right: 20px;
+    padding-bottom: 20px;
+    padding-top: 20px;
+    background-color: red;
+    align-items: center
+}
+
+p .containerdos {
+    align-items: center
+}
+
+.containertres {
+    align-items: center
+}
+
+.conteinercuatro {
+    background-color: rgb(53, 49, 49);
+
+
+}
+
+.conteinercuatro p {
+    color: white
+}
+
+.conteinercuatro h3 {
+    color: white;
+    ;
+}
+
+footer {
+    background-color: black;
+    color: white;
+}
+
+
+.row {
+    margin: 10px 0;
+    display: flex;
+    text-align: center;
+}
+
+.row [class='col'] {
+    padding: 10px;
+    text-align: center;
+    align-items: center;
+
+}
+
+.row,
+p {
+    color: black;
+}
+
+
+
+@media screen and (max-width:1050px) {}
\ No newline at end of file
