From fbe2f5ba544c348dbe7714f09a5586d1c48123a0 Mon Sep 17 00:00:00 2001
From: SandraPerez <iamsandraperez.sndr@gmail.com>
Date: Thu, 12 Oct 2023 09:18:13 +0200
Subject: [PATCH] done

---
 starter_code/images/menu.png       | Bin 0 -> 3250 bytes
 starter_code/index.html            | 185 ++++++++++++++++++++++++++---
 starter_code/stylesheets/style.css |  48 ++++++++
 3 files changed, 215 insertions(+), 18 deletions(-)
 create mode 100644 starter_code/images/menu.png

diff --git a/starter_code/images/menu.png b/starter_code/images/menu.png
new file mode 100644
index 0000000000000000000000000000000000000000..2574592ff7a7afe314c2a004ac28c26c6bde228f
GIT binary patch
literal 3250
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
G8uka}{t;{d

literal 0
HcmV?d00001

diff --git a/starter_code/index.html b/starter_code/index.html
index bf06bff..7c9e89e 100644
--- a/starter_code/index.html
+++ b/starter_code/index.html
@@ -1,20 +1,169 @@
 <!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"/>
-
-    <!-- link your styles -->
-    <link rel="stylesheet" href="./stylesheets/style.css" />
-    <title>Where work happens | Slack</title>
-  </head>
-
-  <body>
-   
-    
-  </body>
-</html>
+
+<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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+  <!-- link the font awesome CDN -->
+  <link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet" />
+
+  <!-- link your styles -->
+  <link rel="stylesheet" href="./stylesheets/style.css" />
+  <title>Where work happens | Slack</title>
+</head>
+
+<body>
+  <header class="menu">
+
+    <img src="./images/slack-logo.png" alt="navicon" class="navicon">
+    <img src="./images/menu.png" alt="burger" class="d-lg-none d-block">
+
+
+    <nav class="d-lg-block d-none">
+      <ul>
+        <li>Why Slack?</li>
+        <li>Pricing</li>
+        <li>About Us</li>
+        <li>Your Workspace</li>
+      </ul>
+
+    </nav>
+
+  </header>
+
+  <section class="primeraparte">
+    <div class="container">
+      <div class="row">
+
+        <div class="col-lg-6">
+          <article>
+            <h2>Where Work Happens</h2>
+            <p>When your team to kick off a project, hire a new employee, deplay some code, review a sales contact,
+              finalize next year´s budget, measure on A/B test, plan your next office opening, and more, Slack has you
+              covered.</p>
+            <input type="email" placeholder="Email address">
+            <button type="button">
+              <p> Get started </p>
+            </button>
+            <p>Already using Slack? <span><a href="nada">Sign in</a></span></p>
+          </article>
+        </div>
+
+        <div class="col-lg-6">
+          <img src="./images/home_talking.png" alt="Imagen personas">
+        </div>
+
+      </div>
+  </section>
+
+  <section class="segundaparte">
+    <div class="container">
+      <div class="row">
+
+        <div class="col-lg-12">
+          <h2>You re in good company</h2>
+          <p>Millions of people around the word</p>
+          <p>Discovery Why</p>
+        </div>
+        <div class="col-lg-4">
+          <img src="./images/airbnb-logo.png" alt="logo Airbnb">
+          <img src="./images/capital-one-logo.png" alt="logo Capital One">
+          <img src="./images/harvard-logo.png" alt="logo Hardvard University">
+          <img src="./images/los-angeles-times-logo.png" alt="logo Los Angeles Times">
+          <img src="./images/ticketmaster-logo.png" alt="logo Ticketmaster">
+        </div>
+      </div>
+    </div>
+
+
+  </section>
+
+  <section class="terceraparte">
+    <div class="container">
+      <div class="row">
+        <div class="col-lg-6">
+          <h3>Try it for free</h3>
+          <p>Already using Slack? <span><a href="nada">Sign in</a></span></p>
+        </div>
+        <div class="col-lg-3">
+          <button type="button">
+            <p> Get started </p>
+          </button>
+        </div>
+
+        <div class="col-lg-3">
+          <input type="email" placeholder="Email address">
+
+        </div>
+
+      </div>
+
+
+  </section>
+
+
+  <section class="cuartaparte">
+    <div class="container">
+      <div class="row">
+        <div class="col-12 col-md-2 lg-2">
+          <img src="./images/Slack.ico" alt="icono Slack">
+          <div class="col-6 col-md-2 lg-2">
+            <h4>Company</h4>
+            <p>About us</p>
+            <p>Careers</p>
+            <p>Blog</p>
+            <p>Press</p>
+            <p>Brand Guidelines</p>
+          </div>
+          <div class="col-6 col-md-2 lg-2">
+            <h4>Product</h4>
+            <p>Why Slack</p>
+            <p>Enterprise</p>
+            <p>Customer Stories</p>
+            <p>Pricing </p>
+            <p>Security</p>
+          </div>
+          <div class="col-6 col-md-2 lg-2">
+            <h4>Resources</h4>
+            <p>Download</p>
+            <p>Help Center</p>
+            <p>Guides</p>
+            <p>Partners</p>
+            <p>Events</p>
+            <p>App Directory</p>
+            <p>API</p>
+          </div>
+          <div class="col-6 col-md-2 lg-2">
+            <h4>Extras</h4>
+            <p>Podcast</p>
+            <p>Slack Shop</p>
+            <p>Slack at Work</p>
+            <p>Slack Fund</p>
+          </div>
+
+        </div>
+
+      </div>
+
+    </div>
+
+  </section>
+
+
+
+  <footer class="container">
+
+    <p>Status</p>
+    <p>Privacy & Terms</p>
+    <p>Contact Us</p>
+    <p>English (Us)</p>
+
+    </section>
+
+  </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..cca63c3 100644
--- a/starter_code/stylesheets/style.css
+++ b/starter_code/stylesheets/style.css
@@ -5,3 +5,51 @@ main-titles dark-grey: #2C303F;
 paragraph grey: #5b5e6d;
 nav grey: #5b5e6d;
 */
+
+
+
+.img {
+    width: 100px;
+
+
+}
+
+
+
+
+.menu {
+    display: flex;
+    justify-content: space-between;
+    padding: 10px;
+
+
+}
+
+.menu li {
+    display: inline;
+}
+
+.menu img {
+    height: 3em;
+}
+
+
+.caja {
+    border: 1px;
+    border-color: black;
+    padding: 10px;
+    display: inline-block;
+}
+
+.text {
+    display: flex;
+}
+
+.segundaparte {
+    background-color: #F4F3F4;
+}
+
+
+.cuartaparte {
+    display: flex;
+}
\ No newline at end of file