diff --git a/starter_code/images/basic_exclamation.svg b/starter_code/images/basic_exclamation.svg
new file mode 100644
index 0000000..2c6b13f
--- /dev/null
+++ b/starter_code/images/basic_exclamation.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<path fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M53.92,10.081c12.107,12.105,12.107,31.732,0,43.838
+	c-12.106,12.108-31.734,12.108-43.84,0c-12.107-12.105-12.107-31.732,0-43.838C22.186-2.027,41.813-2.027,53.92,10.081z"/>
+<line stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="32" y1="17" x2="32" y2="39"/>
+<line stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="32" y1="43" x2="32" y2="47"/>
+</svg>
diff --git a/starter_code/images/basic_info.svg b/starter_code/images/basic_info.svg
new file mode 100644
index 0000000..3e1dfb7
--- /dev/null
+++ b/starter_code/images/basic_info.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<path fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M53.92,10.081c12.107,12.105,12.107,31.732,0,43.838
+	c-12.106,12.108-31.734,12.108-43.84,0c-12.107-12.105-12.107-31.732,0-43.838C22.186-2.027,41.813-2.027,53.92,10.081z"/>
+<line stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="32" y1="47" x2="32" y2="25"/>
+<line stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="32" y1="21" x2="32" y2="17"/>
+</svg>
diff --git a/starter_code/images/basic_question.svg b/starter_code/images/basic_question.svg
new file mode 100644
index 0000000..4c2ddad
--- /dev/null
+++ b/starter_code/images/basic_question.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<path fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M53.92,10.081c12.107,12.105,12.107,31.732,0,43.838
+	c-12.106,12.108-31.734,12.108-43.84,0c-12.107-12.105-12.107-31.732,0-43.838C22.186-2.027,41.813-2.027,53.92,10.081z"/>
+<line stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="30" y1="43" x2="30" y2="47"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M24,21c0-3,2-5,8-5c5,0,8,3,8,7s-6,7-6,7s-4,2-4,8v1
+	"/>
+</svg>
diff --git a/starter_code/images/facebook.png b/starter_code/images/facebook.png
new file mode 100644
index 0000000..3a72823
Binary files /dev/null and b/starter_code/images/facebook.png differ
diff --git a/starter_code/images/menu.png b/starter_code/images/menu.png
new file mode 100644
index 0000000..2574592
Binary files /dev/null and b/starter_code/images/menu.png differ
diff --git a/starter_code/images/twiter.png b/starter_code/images/twiter.png
new file mode 100644
index 0000000..27f7455
Binary files /dev/null and b/starter_code/images/twiter.png differ
diff --git a/starter_code/images/youtube.png b/starter_code/images/youtube.png
new file mode 100644
index 0000000..ff9fdcb
Binary files /dev/null and b/starter_code/images/youtube.png differ
diff --git a/starter_code/index.html b/starter_code/index.html
index bf06bff..aff3025 100644
--- a/starter_code/index.html
+++ b/starter_code/index.html
@@ -1,20 +1,190 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 
-    <!-- link the font awesome CDN -->
-    <link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet"/>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 
-    <!-- link your styles -->
-    <link rel="stylesheet" href="./stylesheets/style.css" />
-    <title>Where work happens | Slack</title>
-  </head>
+  <!-- link the font awesome CDN -->
+  <link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet" />
 
-  <body>
-   
-    
-  </body>
-</html>
+  <!-- link your styles -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css"
+    integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+  <link rel="stylesheet" href="./stylesheets/style.css" />
+  <title>Where work happens | Slack</title>
+</head>
+
+<body>
+  <header class="header">
+    <div class="flex">
+      <figure class="logo">
+        <img src="./images/slack-logo.png" alt="slack logo">
+      </figure>
+      <div class="col d-block d-md-none">
+        <figure class="hamburguer">
+          <img src="./images/menu.png" alt="hamburguer menu">
+        </figure>
+      </div>
+      <nav class="nav d-none d-md-block">
+        <ul>
+          <div class="flex">
+            <li><a href="#">why slack?</a></li>
+            <li><a href="#">pricing</a></li>
+            <li><a href="#">about us</a></li>
+            <li class="button-link"><a href="#">your workspaces</a></li>
+          </div>
+        </ul>
+      </nav>
+    </div>
+  </header>
+  <section class="hero">
+    <div class="container">
+      <div class="row">
+        <div class="col col-lg-6 order-sm-2 intro">
+          <h1>Where work happens</h1>
+          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci dicta corrupti ad magni, ducimus facilis
+            ut?
+            Blanditiis totam molestias vero? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo, eum?</p>
+          <form action="#" class="email">
+            <input type="email" placeholder="E-mail address">
+            <button type="submit" class="email-button">Get started</button>
+          </form>
+          <p>Already using Slack?<a href="#" class="but">Sign in</a></p>
+        </div>
+        <div class="col col-lg-6 order-sm-1">
+          <figure class="hero-img">
+            <img src="./images/home_talking.png" alt="home page">
+          </figure>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section class="partners">
+    <div class="container">
+      <article class="companies">
+        <h3>You're in good company</h3>
+        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dignissimos, nihil.</p>
+        <a href="#" class="button-link">discover why</a>
+      </article>
+      <article>
+        <div class="row">
+          <figure class=" col-md-6 col-lg-4 partners-img"><img src="./images/airbnb-logo.png" alt="airbnb-logo">
+          </figure>
+          <figure class=" col-md-6 col-lg-4 partners-img"><img src="./images/capital-one-logo.png"
+              alt="capital-one-logo"></figure>
+          <figure class=" col-md-6 col-lg-4 partners-img"><img src="./images/harvard-logo.png" alt="harvard-logo">
+          </figure>
+          <figure class=" col-md-6 col-lg-4 partners-img"><img src="./images/los-angeles-times-logo.png"
+              alt="los-angeles-times-logo">
+          </figure>
+          <figure class="col-md-6 col-lg-4 partners-img"><img src="./images/oracle-logo.png" alt="oracle-logo">
+          </figure>
+          <figure class="col-md-6 col-lg-4 partners-img"><img src="./images/ticketmaster-logo.png"
+              alt="ticketmaster-logo"></figure>
+        </div>
+      </article>
+    </div>
+  </section>
+  <section class="try">
+    <div class="container">
+      <div class="row">
+        <article class="col col-lg-6">
+          <h6>Try it for free</h6>
+          <p>Already using Slack?<a href="#">Sign in</a></p>
+        </article>
+        <article class="col col-lg-6">
+          <form action="#" class="email">
+            <label for="email">Email adress</label>
+            <input type="email">
+            <button type="submit" class="email-button">get started</button>
+        </article>
+        </form>
+      </div>
+    </div>
+  </section>
+  <section class="information">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-4 order-md-1 ">
+          <figure>
+            <img src="./images/iso-slack.png" alt="iso-slack">
+          </figure>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-6 col-md-4">
+          <div class="row">
+            <article class="col-md-6 ">
+              <h6 class="end-title">Company</h6>
+              <p class="info">About us</p>
+              <p class="info">Careers</p>
+              <p class="info">Blog</p>
+              <p class="info">Press</p>
+              <p class="info">Brand Guidelines</p>
+            </article>
+            <article class="col-md-6 ">
+              <h6 class="end-title">Product</h6>
+              <p class="info">why slack?</p>
+              <p class="info">enterprise</p>
+              <p class="info">customer stories</p>
+              <p class="info">pricing</p>
+              <p class="info">security</p>
+            </article>
+          </div>
+        </div>
+        <div class="col-6 col-md-4 ">
+          <div class="row">
+            <article class="col-md-6">
+              <h6 class="end-title">Resources</h6>
+              <p class="info">download</p>
+              <p class="info">help center</p>
+              <p class="info">guides</p>
+              <p class="info">partners</p>
+              <p class="info">events</p>
+              <p class="info">app directory</p>
+              <p class="info cap">api</p>
+            </article>
+            <article class="col-md-6">
+              <h6 class="end-title">extras</h6>
+              <p class="info">podcast</p>
+              <p class="info">slack shop</p>
+              <p class="info">slack at work</p>
+              <p class="info">slack fund</p>
+            </article>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <footer>
+    <div class="container">
+      <div class="row">
+        <article class="col">
+          <div class="flex">
+            <p class="footer-text">status</p>
+            <p class="footer-text">privacy & terms</p>
+            <p class="footer-text">contact us</p>
+        </article>
+        <article class="col">
+          <button>
+            <div class="flex language-button">
+              <img src="./images/us-flag.png" alt="lang-img">
+              <p class="footer-text">english (US)</p>
+            </div>
+          </button>
+        </article>
+        <article class="col">
+          <div class="flex rss-icons">
+            <figure><img src="./images/facebook.png" alt="facebook-icon" class="footer-icons"></figure>
+            <figure><img src="./images/twiter.png" alt="twitter-icon" class="footer-icons"></figure>
+            <figure><img src="./images/youtube.png" alt="youtube-icon" class="footer-icons"></figure>
+          </div>
+        </article>
+      </div>
+    </div>
+  </footer>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css
index cff873e..4eec98c 100644
--- a/starter_code/stylesheets/style.css
+++ b/starter_code/stylesheets/style.css
@@ -5,3 +5,117 @@ main-titles dark-grey: #2C303F;
 paragraph grey: #5b5e6d;
 nav grey: #5b5e6d;
 */
+
+.flex {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.img {
+    width: 100%;
+}
+
+.header {
+    /* position: fixed; */
+    width: 100%;
+    border-bottom: solid 1px #2C303F;
+    background-color: white;
+    justify-content: space-around;
+}
+
+.logo img {
+    width: 100px;
+}
+
+.hamburguer img {
+    width: 50px;
+    margin: 0px;
+    padding: 0px;
+}
+
+.nav ul li {
+    color: #2C303F;
+    /*quitar*/
+    margin: 10px;
+    padding: 0;
+    list-style-type: none;
+}
+
+.nav ul li a {
+    color: #2C303F;
+}
+
+.hero {
+    justify-content: center;
+    margin-top: 50px;
+}
+
+.hero-img img {
+    width: 500px;
+}
+
+.companies {
+    padding: 50px;
+    text-align: center;
+
+}
+
+.partners {
+    background-color: #F4F3F4;
+    padding-bottom: 50px;
+}
+
+.partners-img img {
+    width: 70%;
+    align-items: center;
+
+}
+
+.try {
+    padding: 50px;
+}
+
+.end-title {
+    text-transform: uppercase;
+}
+
+.footer-text {
+    color: #5b5e6d;
+    text-transform: capitalize;
+}
+
+footer {
+    background-color: #F4F3F4;
+    color: #5b5e6d;
+}
+
+.rss-icons figure img {
+    width: 15px;
+}
+
+.language-button {
+    align-items: center;
+    justify-content: center;
+}
+
+.language-button img {
+    width: 20px;
+    margin-right: 5px;
+}
+
+.language-button p {
+    text-size-adjust: 5px;
+    padding-top: 10px;
+
+}
+
+.intro {
+    padding-left: 50px;
+}
+
+.button-link {
+    border: solid 1px #192592;
+    padding: 10px 10px;
+    text-transform: uppercase;
+}
\ No newline at end of file