From eaba17e6bea9422a61e5f81b37a82ddbc3f8a450 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Abdala?= <isacabala@gmail.com>
Date: Thu, 12 Mar 2026 17:02:48 +0000
Subject: [PATCH] slack screen flexbox

---
 starter_code/index.html            |  68 +++++----
 starter_code/stylesheets/style.css | 236 ++++++++++++++++++++++++++++-
 2 files changed, 276 insertions(+), 28 deletions(-)
diff --git a/starter_code/index.html b/starter_code/index.html
index 2f593610f..c98fb0157 100644
--- a/starter_code/index.html
+++ b/starter_code/index.html
@@ -18,9 +18,11 @@
 
 <body>
   <!-- NAVBAR -->
+   <div id="nav-purple"> 
   <nav>
-    <div>
+    <div id="nav-slack-logo">
       <img src="./images/slack-logo.png" alt="Slack logo" />
+      
 
       <ul>
         <li>
@@ -39,6 +41,8 @@
     </div>
 
     <div>
+
+      <div id="div-search-menu"> 
       <button>
         <img src="./images/icon-search.png" alt="Search icon">
       </button>
@@ -46,7 +50,8 @@
       <button>
         <img src="./images/icon-menu.png" alt="Menu icon">
       </button>
-
+      </div>
+      
       <ul hidden>
         <li>
           <a href="#">Sign in</a>
@@ -61,85 +66,96 @@
 
   <!-- HEADER -->
   <header>
-    <div>
+    <div id="header-purple">
       <h1>Great teamwork starts with a digital HQ</h1>
 
-      <p>Slack is free to try for as long as you'd like.</p>
+      <p><strong id="yellow-text">Slack is free to try</strong> for as long as you'd like.</p>
 
-      <div>
-        <button>Sign up with email</button>
+      <div id="sign-email-google">
+        <button id="sign-email">Sign up with email</button>
 
-        <button>
+        <button id="google-logo">
           <img src="./images/logo-google.png" alt="Google logo" />
-          <span>Sign up with Google</span>
+          <span id="sign-google">Sign up with Google</span>
         </button>
       </div>
 
     </div>
-
-    <div>
+    </div>
+    <div id="hero-div">
       <img src="./images/hero-product-ui.png" alt="Slack app screenshot" />
     </div>
   </header>
 
   <main>
+
+    <div id="six-images"> 
     <section>
       <p>Trusted by companies all over the world</p>
 
-      <div>
+      <div class="row">
         <img src="./images/logo-airbnb.png" alt="Airbnb logo" />
         <img src="./images/logo-nasa.png" alt="NASA logo" />
         <img src="./images/logo-uber.png" alt="Uber logo" />
         <img src="./images/logo-target.png" alt="Target logo" />
-        <img src="./images/logo-nyt.png" alt="New York Times logo" />
-        <img src="./images/logo-spotify.png" alt="Spotify logo" />
+      </div>
+
+      <div class="row"> 
+        <img src="./images/logo-nyt.png" alt="New York Times logo" id="new-york"/>
+        <img src="./images/logo-spotify.png" alt="Spotify logo" id="spotify"/>
+      </div>
+
       </div>
 
     </section>
 
-    <section>
+    <section id="section-bellow-images">
+
+      <div class="teams-large">
       <h3>Teams large and small rely on Slack</h3>
-      <p>Slack securely scales up to support collaboration at the world’s biggest companies.</p>
 
+      <p>Slack securely scales up to support collaboration at the world’s biggest companies.</p>
+       </div>
 
       <ul>
         <li>
-          <p><span>85%</span></p>
-          <p>
+          <p class="porcentage"><span class="purp-text">85%</span></p>
+          <p class="porcentage-ptext">
             of users say Slack has improved communication
             <sup>*</sup>
           </p>
         </li>
 
         <li>
-          <p><span>86%</span></p>
-          <p>
+          <p class="porcentage"><span class="purp-text">86%</span></p>
+          <p class="porcentage-ptext">
             feel their ability to work remotely has improved has improved
             <sup>*</sup>
           </p>
         </li>
 
         <li>
-          <p><span>88%</span></p>
-          <p>
+          <p class="porcentage"><span class="purp-text">88%</span></p>
+          <p class="porcentage-ptext">
             feel more connected to their teams*
             <sup>*</sup>
           </p>
         </li>
       </ul>
+
     </section>
 
-    <section>
+    <section id="welcome-digital">
       <h3>Welcome to your new digital HQ</h3>
 
       <button>Try for free</button>
-      <button>Talk to sales</button>
+      <button class="button-purple">Talk to sales</button>
     </section>
 
   </main>
 
   <footer>
-    <ul>
+    <ul class="status-ul">
       <li>Status</li>
       <li>Privacy</li>
       <li>Terms</li>
@@ -151,7 +167,7 @@ <h3>Welcome to your new digital HQ</h3>
 
     <hr>
 
-    <ul>
+    <ul class="ul-row">
       <li>
         <i class="fab fa-twitter"></i>
       </li>
@@ -166,7 +182,7 @@ <h3>Welcome to your new digital HQ</h3>
       </li>
     </ul>
 
-    <div>
+    <div >
       <small>
         &copy; 2022 Slack Technologies, LLC, a Salesforce company. All rights reserved. Various trademarks held by
         their respective owners.
diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css
index 59f4a7798..ea22c1eda 100644
--- a/starter_code/stylesheets/style.css
+++ b/starter_code/stylesheets/style.css
@@ -1,10 +1,242 @@
-/*
+ /*
 background purple: #540B51
 background ivory: #F3EAE2
 button blue: #4285F4
 titles black: #191817
 paragraph black: #000000
-paragraph yellow: #ECB12F
+paragraph yellow: 
 links blue: #2E71A6
 footer links grey: #454245
 */
+@media (max-width: 768px)  {
+
+*{
+    box-sizing: border-box;
+}
+
+body{
+    margin: 0;
+    width: 100%;
+    overflow-x: hidden;
+}    
+
+#nav-purple {
+    background-color: #540B51;
+}
+
+#nav-purlple {
+    width: 100%;
+}
+
+nav {
+    display: flex;
+    justify-content: space-between;
+    padding: 20px;
+}
+
+nav ul {
+    display: none;
+}
+
+#nav-slack-logo  img {
+    display: flex;
+    width: 200px;
+}
+
+#div-search-menu button {
+    width: 50px;
+    height: 50px;
+    background-color: #540B51;
+    border: #540B51;
+}
+
+#header-purple {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: white;
+    text-align: center;
+}
+
+#header-purple h1 {
+    font-size: 50px;
+    max-width: 450px;
+}
+
+#header-purple #yellow-text{
+    color: #ECB12F;
+}
+
+#sign-email-google {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    width: 100%;
+    max-width: 500px;
+    padding: 10px;
+    font-size: 32px;
+    margin-bottom: 20px;
+}
+
+#sign-email-google #sign-email {
+    font-size: 20px;
+    padding: 20px;
+}
+
+#sign-email-google #sign-google {
+    font-size: 20px;
+}
+
+#google-logo img {
+    width: 50px;
+}
+
+#google-logo {
+    background-color:  #2E71A6;
+    display: flex;
+    align-items: center;
+    justify-content: start;
+    gap: 20px;
+}
+
+#hero-div{
+     background-color: #540B51;
+}
+
+#hero-div img {
+    width: 100%;
+}
+
+#six-images{
+    background-color: #F3EAE2;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 30px;
+}
+
+#six-images p {
+    text-align: center;
+    font-size: 32px;
+}
+
+.row{
+    display: flex;
+    gap: 40px;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.row img{
+    width: 120px;
+}
+
+#new-york {
+    width: 370px;
+}
+
+#spotify {
+    width: 200px;
+}
+
+.teams-large {
+    width: 100%;
+    max-width: 550px;
+}
+
+#section-bellow-images {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    width: 100%;
+    max-width: 500px;
+    margin: 0 auto;
+    gap: 20px;
+}
+#section-bellow-images  h3 { 
+    font-size: 20px;
+    max-width: 500px;
+    color: #540B51;
+    text-align: center;
+}
+
+#section-bellow-images ul {
+    display: flex;
+    flex-direction: column;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.purp-text {
+    font-size: 30px;
+    color: #540B51;
+}
+
+.porcentage {
+    display: flex;
+    justify-content: center;
+}
+
+.porcentage-ptext {
+    text-align: center;
+    max-width: 500px;
+    margin-bottom: 20px;
+}
+
+#bellow-images .porcentage {
+    text-align: center;
+}
+
+#welcome-digital {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: #540B51;
+    color: white;
+    height: 300px; 
+}
+
+#welcome-digital button {
+    font-size: 20px;
+    height: 50px;
+    width: 100%;
+    max-width: 500px;
+}
+
+#welcome-digital .button-purple {
+    background-color: #540B51;
+    color: white;
+    border: 2px solid white;
+    border-radius: 5px;
+}
+
+footer .status-ul {
+    padding: 10px;
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+footer .ul-row {
+    list-style: none;
+    display: flex;
+    justify-content: space-around;
+    margin-bottom: 8px;
+    height: 10px;
+    padding: 10px;
+}
+
+small {
+    padding: 15px;
+}
+
+}
+
+
+
+
