From 9dd617e8f16a00d95db45fcec07c29aa243ff26d Mon Sep 17 00:00:00 2001
From: Luis Castro <luiscastrosounds@gmail.com>
Date: Wed, 19 Nov 2025 03:07:41 +0000
Subject: [PATCH] done

---
 starter_code/index.html            |  22 +--
 starter_code/stylesheets/style.css | 275 +++++++++++++++++++++++++++++
 2 files changed, 286 insertions(+), 11 deletions(-)

diff --git a/starter_code/index.html b/starter_code/index.html
index 2f593610f..ae5a36584 100644
--- a/starter_code/index.html
+++ b/starter_code/index.html
@@ -22,7 +22,7 @@
     <div>
       <img src="./images/slack-logo.png" alt="Slack logo" />
 
-      <ul>
+      <ul class="menu-ul">
         <li>
           <a href="#">Product</a>
         </li>
@@ -64,7 +64,7 @@
     <div>
       <h1>Great teamwork starts with a digital HQ</h1>
 
-      <p>Slack is free to try for as long as you'd like.</p>
+      <p><span id="slack-is-free">Slack is free to try</span> for as long as you'd like.</p>
 
       <div>
         <button>Sign up with email</button>
@@ -78,15 +78,15 @@ <h1>Great teamwork starts with a digital HQ</h1>
     </div>
 
     <div>
-      <img src="./images/hero-product-ui.png" alt="Slack app screenshot" />
+      <img id="big-image" src="./images/hero-product-ui.png" alt="Slack app screenshot" />
     </div>
   </header>
 
   <main>
-    <section>
+    <section id="trusted-section">
       <p>Trusted by companies all over the world</p>
 
-      <div>
+      <div class="logos">
         <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" />
@@ -97,9 +97,9 @@ <h1>Great teamwork starts with a digital HQ</h1>
 
     </section>
 
-    <section>
+    <section id="teams-large-section">
       <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 id="slack-securely-p">Slack securely scales up to support collaboration at the world’s biggest companies.</p>
 
 
       <ul>
@@ -129,7 +129,7 @@ <h3>Teams large and small rely on Slack</h3>
       </ul>
     </section>
 
-    <section>
+    <section id="welcome-digital-hq-section">
       <h3>Welcome to your new digital HQ</h3>
 
       <button>Try for free</button>
@@ -139,7 +139,7 @@ <h3>Welcome to your new digital HQ</h3>
   </main>
 
   <footer>
-    <ul>
+    <ul class="footer-ul">
       <li>Status</li>
       <li>Privacy</li>
       <li>Terms</li>
@@ -151,7 +151,7 @@ <h3>Welcome to your new digital HQ</h3>
 
     <hr>
 
-    <ul>
+    <ul class="social-media-ul">
       <li>
         <i class="fab fa-twitter"></i>
       </li>
@@ -166,7 +166,7 @@ <h3>Welcome to your new digital HQ</h3>
       </li>
     </ul>
 
-    <div>
+    <div class="trademarks">
       <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..db3d6e863 100644
--- a/starter_code/stylesheets/style.css
+++ b/starter_code/stylesheets/style.css
@@ -1,3 +1,5 @@
+/* INCOMPLETE!!!!!!!! */
+
 /*
 background purple: #540B51
 background ivory: #F3EAE2
@@ -8,3 +10,276 @@ paragraph yellow: #ECB12F
 links blue: #2E71A6
 footer links grey: #454245
 */
+
+body {
+    background-color: white;
+}
+
+nav {
+    background-color: #540B51;
+    display: flex;
+    justify-content: space-between;
+    /* coloca os dois divs um à esquerda, outro à direita */
+    align-items: center;
+    /* alinha verticalmente */
+    padding: 20px;
+}
+
+nav div {
+    display: flex;
+    align-items: center;
+}
+
+nav div:first-child img {
+    height: 24px;
+    /*ajusta tamanho do logo */
+}
+
+nav div:last-child button {
+    margin-left: 10px;
+    /* coloca algum espaçamento entre os botões */
+}
+
+nav button {
+    background: none;
+    /* remove fundo branco */
+
+    border: none;
+    /* remove borda */
+
+    padding: 0;
+    /* remove espaço interno extra */
+
+    cursor: pointer;
+    /* cursor de clique */
+
+}
+
+.menu-ul {
+    display: none;
+}
+
+.logos {
+    display: flex;
+    justify-content: space-between;
+    /* distribui os logos ocupando toda a largura */
+    flex-wrap: wrap;
+    /* permite quebrar linha em ecrãs pequenos */
+    align-items: center;
+    padding: 0 20px;
+    /* margem lateral */
+}
+
+.logos img {
+    height: 50px;
+    margin-bottom: 20px;
+
+}
+#big-image {
+    width: 100%;
+
+}
+
+
+
+
+
+
+
+
+header {
+    background-color: #540B51;
+}
+
+h1 {
+    color: white;
+    font-size: 3.5rem;
+    text-align: center;
+}
+
+header p {
+    color: white;
+    text-align: center;
+    font-size: 1.5rem;
+}
+
+#slack-is-free {
+    color: #ECB12F;
+}
+
+header div {
+    background-color: #540B51;
+    /* garante que o espaço dentro do div fique colorido */
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
+/* Container dos botões dentro do header */
+header div div {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+header button {
+    width: 90%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 16px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 1rem;
+    margin-bottom: 12px;
+    text-transform: uppercase;
+}
+
+/* Botão: Sign up with email */
+header button:first-child {
+    background-color: white;
+    color: #540B51;
+}
+
+/* Botão: Sign up with Google */
+header button:last-child {
+    background-color: #4285F4;
+    color: white;
+    width: 90%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 16px;
+    border: none;
+    border-radius: 4px;
+    position: relative;
+    /* necessário para posicionar o quadrado */
+    margin-bottom: 12px;
+    cursor: pointer;
+}
+
+header button:last-child img {
+    background-color: white;
+    padding: 8px;
+    /* cria o quadrado */
+    border-radius: 4px;
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    left: 12px;
+}
+
+/* Ajustar logo do Google */
+header button img {
+    width: 20px;
+    height: 20px;
+    margin-right: 10px;
+    display: block;
+}
+
+#trusted-section {
+    background-color: #F3EAE2;
+    text-align: center;
+    padding-top: 20px;
+    /* espaço acima dos logos */
+    padding-bottom: 20px;
+    /* espaço abaixo dos logos */
+}
+
+#trusted-section p {
+    text-transform: uppercase;
+}
+
+#teams-large-section {
+    background-color: white;
+    text-align: center;
+}
+
+#teams-large-section h3 {
+    color: #540B51;
+    font-size: 2.5rem;
+}
+
+#teams-large-section span {
+    color: #540B51;
+    font-size: 3rem;
+}
+
+#slack-securely-p {
+    font-size: 1.5rem;
+}
+
+#teams-large-section ul {
+    padding-left: 25%;
+    padding-right: 25%;
+    font-size: 1.5rem;
+}
+
+#welcome-digital-hq-section {
+    background-color: #540B51;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 400px;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#welcome-digital-hq-section button {
+    width: 90%;
+    padding: 16px;
+    border-radius: 4px;
+    font-size: 1rem;
+    margin-bottom: 12px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    text-transform: uppercase;
+}
+
+#welcome-digital-hq-section button:last-child {
+    background-color: transparent;
+    color: white;
+    border: 2px solid white;
+    /* linha branca da caixa*/
+}
+
+#welcome-digital-hq-section button:first-child {
+    color: #540B51;
+}
+
+#welcome-digital-hq-section h3 {
+    color: white;
+    text-align: center;
+    font-size: 3rem;
+    margin-left: 3%;
+    margin-right: 3%;
+}
+
+
+.social-media-ul {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 50px;
+    list-style-type: none;
+}
+footer {
+    font-size: 1.5em;
+    background-color: white;
+}
+
+.footer-ul {
+    list-style-type: none;
+}
+
+main ul {
+    list-style-type: none;
+}
+.trademarks {
+    text-align: center;
+}
\ No newline at end of file