ta-web-mad · AnaaZamoraa · Sep 28, 2023
diff --git a/starter_code/images/icons8-facebook-30.png b/starter_code/images/icons8-facebook-30.png
diff --git a/starter_code/images/icons8-twitter-30.png b/starter_code/images/icons8-twitter-30.png
diff --git a/starter_code/images/icons8-youtube-30.png b/starter_code/images/icons8-youtube-30.png
diff --git a/starter_code/index.html b/starter_code/index.html
@@ -1,20 +1,164 @@
 <!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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-xxx" crossorigin="anonymous">
 
-  <body>
-
-
-  </body>
-</html>
+  <!-- link your styles -->
+  <link rel="stylesheet" href="./stylesheets/style.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css"
+    integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+  <title>Where work happens | Slack</title>
+</head>
+
+<body>
+  <nav class="navbar navbar-expand-lg navbar-light bg-light end-0">
+    <a class="navbar-brand" href="#"><img src="/starter_code/images/slack-logo.png" alt="slack logo"
+        class="slack-logo"></a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
+      aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse navbar justify-content-end" id="navbarNav">
+      <ul class="navbar-nav">
+        <li class="nav-item active">
+          <a class="nav-link" href="#">Why Slack</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#">Pricing</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#">About us</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#"><button class="btn btn-sm btn-outline-secondary" type="button">Your
+              workspaces</button></a>
+        </li>
+      </ul>
+    </div>
+  </nav>
+  <div class="container">
+    <div class="row row-one">
+      <img src="/starter_code/images/home_talking.png" alt="home talking" class=" col-lg-6 home-talking">
+      <div class="top-text col-lg-6">
+        <h1 class="title"><strong>Where Work Happens</strong></h1>
+        <p class="subtitle">When your team needs to kick off a project, hire a new employee, deploy some code, review a
+          sales contact, finalize next year's budget, measure a A/B test, plan your next office opening, and more, Slack
+          has you covered.</p>
+        <button class="primary">GET STARTED</button>
+        <p class="normal-text">Already using Slack? <a href="#">Sign in</a></p>
+      </div>
+    </div>
+  </div>
+  <section class="companies">
+    <h2 class="second-title"><strong>You're in good company</strong></h2>
+    <p class="normal-text">Millions of people around the world have already made Slack the place where their work
+      happens.</p>
+    <button class="secondary">DISCOVER WHY</button>
+    <div class="row row-images">
+      <div class="col-lg-4 col-md-6 col-sm-12 column-images">
+        <img src="/starter_code/images/airbnb-logo.png" alt="airbnb logo" class="logo">
+      </div>
+      <div class="col-lg-4 col-md-6 col-sm-12 column-images">
+        <img src="/starter_code/images/capital-one-logo.png" alt="capital logo" class="logo">
+      </div>
+      <div class="col-lg-4 col-md-6 col-sm-12 column-images">
+        <img src="/starter_code/images/harvard-logo.png" alt="harvard logo" class="logo">
+      </div>
+      <div class="col-lg-4 col-md-6 col-sm-12 column-images">
+        <img src="/starter_code/images/los-angeles-times-logo.png" alt="times logo" class="logo">
+      </div>
+      <div class="col-lg-4 col-md-6 col-sm-12 column-images">
+        <img src="/starter_code/images/oracle-logo.png" alt="oracle logo" class="logo">
+      </div>
+      <div class="col-lg-4 col-md-6 col-sm-12 column-images">
+        <img src="/starter_code/images/ticketmaster-logo.png" alt="ticketmaster logo" class="logo">
+      </div>
+    </div>
+  </section>
+  <section class="try-it">
+    <div class="row row-try-it">
+      <div class="col-lg-9 col-md-6 col-sm-12 column-try-it-1">
+        <h2 class="third-title"><strong>Try it for free</strong></h2>
+        <p class="normal-text">Already using Slack? <a href="#">Sign in</a></p>
+      </div>
+      <div class="col-lg-3 col-md-6 col-sm-12 column-try-it-2">
+        <button class="button-email">Email address</button>
+        <button class="primary">GET STARTED</button>
+      </div>
+    </div>
+  </section>
+  <footer>
+    <section class="footer">
+      <div class="row row-footer">
+        <div class="col-lg-4 col-sm-12">
+          <img src="/starter_code/images/Slack.ico" alt="slack icon" class="slack-icon">
+        </div>
+        <div class="col-md-2 col-6">
+          <ul class="list">
+            <li><STRONg>COMPANY</STRONg></li>
+            <li>About us</li>
+            <li>Careers</li>
+            <li>Blog</li>
+            <li>Press</li>
+            <li>Brand Guidelines</li>
+          </ul>
+        </div>
+        <div class="col-md-2 col-6">
+          <ul class="list">
+            <li><STRONg>PRODUCT</STRONg></li>
+            <li>Why Slack?</li>
+            <li>Enterprise</li>
+            <li>Customer Stories</li>
+            <li>Pricing</li>
+            <li>Security</li>
+          </ul>
+        </div>
+        <div class="col-md-2 col-6">
+          <ul class="list">
+            <li><STRONg>RESOURCES</STRONg></li>
+            <li>Download</li>
+            <li>Help Center</li>
+            <li>Guides</li>
+            <li>Partners</li>
+            <li>Events</li>
+            <li>App Directory</li>
+            <li>API</li>
+          </ul>
+        </div>
+        <div class="col-md-2 col-6">
+          <ul class="list">
+            <li><STRONg>EXTRAS</STRONg></li>
+            <li>Podcast</li>
+            <li>Slack Shop</li>
+            <li>Slack at Work</li>
+            <li>Slack Fund</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+  </footer>
+  <section class="bottom">
+    <div class="row row-bottom">
+      <div class="col-lg-8 col-md-7 col-sm-12 column-bottom">
+        <span class="bottom-text"><strong>Status</strong></span>
+        <span class="bottom-text"><strong>Privacy & Terms</strong></span>
+        <span class="bottom-text"><strong>Contact us</strong></span>
+      </div>
+      <div class="col-lg-4 col-md-5 col-sm-12 column-bottom">
+        <img src="/starter_code/images/us-flag.png" alt="us flag" class="image-us">
+        <span class="normal-text"><strong>English (US)</strong></span>
+        <img src="/starter_code/images/icons8-twitter-30.png" alt="twitter" class="bottom-icon">
+        <img src="/starter_code/images/icons8-facebook-30.png" alt="facebook" class="bottom-icon">
+        <img src="/starter_code/images/icons8-youtube-30.png" alt="youtube" class="bottom-icon">
+      </div>
+    </div>
+  </section>
+</body>
+
+</html>
diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css
@@ -5,3 +5,130 @@ main-titles dark-grey: #2C303F;
 paragraph grey: #5b5e6d;
 nav grey: #5b5e6d;
 */
+nav {
+    position: fixed;
+}
+.slack-logo {
+    width: 100px;
+}
+.row-one {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-top: 40px;
+}
+.home-talking {
+    width: 100%;
+}
+.top-text {
+    display: flex;
+    flex-direction: column;
+    align-items:flex-start;
+    text-align:left;
+    gap: 10px;
+}
+.title {
+    font-family:'Times New Roman', Times, serif;
+    font-style: inherit;
+    color: #2C303F;
+    font-size: 5rem;
+}
+.subtitle {
+    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-size: 1.5rem;
+}
+.primary {
+    background-color: #192592;
+    color:white;
+    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    padding: 4px 4px;
+    border: 5px solid #192592;
+    border-radius: 8px;
+}
+.companies {
+    background-color: #F4F3F4;
+    padding-top: 100px;
+    border-top: 2px solid lightgray;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    text-align: center;
+}
+.second-title {
+    font-family:'Times New Roman', Times, serif;
+    font-size: 3rem;
+    color: #2C303F;
+}
+.secondary {
+    color: #192592;
+    border: 2px solid lightgrey;
+    padding: 10px 10px;
+    border-radius: 8px;
+    background-color: white;
+}
+.logo {
+    width: 250px;
+    padding: 30px;
+}
+.row-images {
+    width: 80%;
+    padding: 40px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+.column-images {
+    display: flex;
+    justify-content: center;
+}
+.try-it {
+    margin: 40px;
+}
+.third-title {
+    font-family:'Times New Roman', Times, serif;
+    font-size: 2rem;
+    color: #2C303F;
+}
+.button-email {
+    color: #192592;
+    border: 2px solid lightgrey;
+    padding: 8px 8px;
+    border-radius: 8px;
+    background-color: white;
+}
+footer {
+    border-top: 2px solid lightgray;
+    padding: 40px;
+}
+.row-footer{
+    padding: 0;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+}
+.slack-icon {
+    width: 100px;
+}
+.list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    color: #5b5e6d;;
+}
+.image-us {
+    width: 30px;
+}
+.bottom {
+    background-color: #F4F3F4;
+    padding: 30px;
+}
+.column-bottom {
+    display: flex;
+    gap: 1.5rem;
+    align-items: center;
+    font-size: 0.75rem;
+}
+.bottom-icon {
+    width: 7%;
+}