From 757529988e35c833f0a42ac31acfe222449fd98a Mon Sep 17 00:00:00 2001
From: Larissa Almeida <oa.larissa@hotmail.com>
Date: Wed, 19 Feb 2025 08:04:23 +0100
Subject: [PATCH] Lab done

---
 starter_code/index.html            |  72 +++---
 starter_code/stylesheets/style.css | 402 +++++++++++++++++++++++++++++
 2 files changed, 442 insertions(+), 32 deletions(-)
diff --git a/starter_code/index.html b/starter_code/index.html
index 2f593610f..3e75e2b64 100644
--- a/starter_code/index.html
+++ b/starter_code/index.html
@@ -8,8 +8,6 @@
 
   <!-- link the Font Awesome stylesheet - 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" />
 
   <link rel="icon" type="image/x-icon" href="./images/slack-icon.png">
@@ -19,9 +17,11 @@
 <body>
   <!-- NAVBAR -->
   <nav>
-    <div>
+      <div class="nav-logo">
       <img src="./images/slack-logo.png" alt="Slack logo" />
+      </div>
 
+      <div class="nav-links">
       <ul>
         <li>
           <a href="#">Product</a>
@@ -38,21 +38,19 @@
       </ul>
     </div>
 
-    <div>
+    <div class="nav-buttons">
       <button>
         <img src="./images/icon-search.png" alt="Search icon">
-      </button>
-
-      <button>
-        <img src="./images/icon-menu.png" alt="Menu icon">
-      </button>
-
+      </button>    
+   <button>
+    <img src="./images/icon-menu.png" class="menu-icon" alt="Menu icon">
+  </button>
       <ul hidden>
         <li>
           <a href="#">Sign in</a>
         </li>
         <li>
-          <a href="#">Try for free</a>
+          <a href="#" class="btn-trial">Try for free</a>
         </li>
       </ul>
     </div>
@@ -61,47 +59,50 @@
 
   <!-- HEADER -->
   <header>
-    <div>
+    <div class="header-content">
       <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>Slack is free</span> to try for as long as you'd like.</p>
 
-      <div>
-        <button>Sign up with email</button>
+      <sectio class="header-buttons">
+        <button class="sign-up-button">Sign up with email</button>
 
-        <button>
+        <button class = "google-button">
           <img src="./images/logo-google.png" alt="Google logo" />
           <span>Sign up with Google</span>
         </button>
-      </div>
+      </sectio>
 
     </div>
 
-    <div>
+    <div class="header-image">
       <img src="./images/hero-product-ui.png" alt="Slack app screenshot" />
     </div>
   </header>
 
   <main>
-    <section>
+    <section class="companies">
       <p>Trusted by companies all over the world</p>
 
-      <div>
+      <div class="companies-container">
         <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-nyt.png"  alt="New York Times logo" />
         <img src="./images/logo-spotify.png" alt="Spotify logo" />
       </div>
-
     </section>
 
-    <section>
+    <!--INFO SECTION-->
+
+    <section class="info-container">
+      <div>
       <h3>Teams large and small rely on Slack</h3>
       <p>Slack securely scales up to support collaboration at the world’s biggest companies.</p>
+      </div>
 
-
+      
       <ul>
         <li>
           <p><span>85%</span></p>
@@ -122,35 +123,41 @@ <h3>Teams large and small rely on Slack</h3>
         <li>
           <p><span>88%</span></p>
           <p>
-            feel more connected to their teams*
+            feel more connected to their teams
             <sup>*</sup>
           </p>
         </li>
       </ul>
+
+      <div class="survey-container">
+        <p> *Weighted average. Based on 2.707 survey responses from weekly Slack users in the U.S., UK, Australia and Canada with a +- 2% margin of error at 95% CI (August 2020).</p>
+      </div>
     </section>
 
-    <section>
+    <section class="digital-era">
       <h3>Welcome to your new digital HQ</h3>
 
       <button>Try for free</button>
-      <button>Talk to sales</button>
+      <button id="buttontwo">Talk to sales</button>
     </section>
 
   </main>
 
   <footer>
+    <section class="footer-container">
+    <hr>
     <ul>
       <li>Status</li>
       <li>Privacy</li>
       <li>Terms</li>
       <li>Cookie Preferences</li>
       <li>Contact Us</li>
-      <li>Change Region</li>
-      <li>Download Slack</li>
+      <li> <img src="./images/icon-region.png" alt="Region" /> Change Region</li>
+      <li> <img src="./images/icon-download.png" alt="Cloud" /> <span>Download Slack</span></li>
     </ul>
+  </section>
 
-    <hr>
-
+  <section class="icon-container">
     <ul>
       <li>
         <i class="fab fa-twitter"></i>
@@ -165,8 +172,9 @@ <h3>Welcome to your new digital HQ</h3>
         <i class="fab fa-linkedin"></i>
       </li>
     </ul>
+  </section>
 
-    <div>
+    <div class="small">
       <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..f5f21f893 100644
--- a/starter_code/stylesheets/style.css
+++ b/starter_code/stylesheets/style.css
@@ -8,3 +8,405 @@ paragraph yellow: #ECB12F
 links blue: #2E71A6
 footer links grey: #454245
 */
+
+html, 
+body {   
+    width: 100%;  
+    margin: 0;
+    padding: 0;
+    font-family: 'Roboto', sans-serif;
+}
+
+
+/*Nav*/
+
+nav  {
+    display: grid;
+    grid-auto-flow: column;
+    grid-template-columns: repeat(3, 1fr);
+    width: 100%;
+    align-items: center;
+    justify-content: space-evenly;
+    background-color:#540b51;
+    padding: 20px;
+}
+
+.nav-logo img{
+    width: 120px;
+    height: auto;
+    background-color: #540b51;
+    position: relative;
+}
+
+nav ul {
+    display: none;
+}
+
+.nav-buttons {
+    display: flex;
+    justify-content: space-around;
+    padding: 10px 20px;
+}
+
+.nav-buttons button{
+    background-color:#540b51;
+    border: 0;
+    color: white;
+}
+
+/*Header*/
+
+header {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    background-color:#540b51;
+    background-size:contain;
+    background-repeat: no-repeat;
+}
+
+.header-content{
+    color: #F3EAE2;
+    padding: 20px;
+}
+
+.header-content h1 {
+    font-size: 3em;
+    color: whitesmoke;
+    text-align: center;
+}
+
+.header-content p {
+    padding-top: 50px;
+    font-size: 1.2em;
+    word-spacing: 1.6;
+    letter-spacing: 1.4;
+    text-align: center;
+}
+
+.header-content span {
+    font-weight: bold;
+    color: rgb(255, 187, 0);
+}
+.header-image {
+    display: flex; 
+    align-items: center;
+    justify-content: center;
+    padding-bottom: 30px;
+}
+
+.header-image img{
+    width: 100%;
+    height: auto;
+}
+
+.header-buttons {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    width: 100%;
+    margin: 20px 0;
+}
+
+.sign-up-button{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: white;
+    color: #540b51;
+    border-radius: 5px;
+    margin: 10px;
+    width: 100%;
+    padding: 15px;
+    text-transform: uppercase;
+    font-weight: bolder;
+}
+
+.google-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #4285F4;
+    color: white;
+    border-radius: 5px;
+    margin: 10px;
+    width: 100%;
+    padding: 5px;
+}
+.google-button img {
+    width: auto;
+    height: 35px;
+    background-color: white;
+    margin-right: auto;
+}
+
+.google-button span {
+    margin-right: auto;
+    text-transform: uppercase;
+    font-size: 1em;
+    color: white;
+    padding-right: 20px;
+}
+
+/*Main*/
+
+.companies {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    background-color: #F3EAE2;
+    padding: 20px;
+}
+
+.companies p{
+    text-align: center;
+    text-transform: uppercase;
+    font-weight: bold;
+    padding: 10px;
+}
+
+.companies-container {
+    display: flex;
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+    padding-bottom: 20px;
+}
+
+.companies-container img {
+    width: auto;
+    height: 40px;
+    padding: 10px;
+}
+
+/*Info Section*/
+
+.info-container {
+    background-color: white;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 0 40px;
+}
+
+.info-container h3 {
+    font-size: 2.2em;
+    font-weight: 600;
+    color:#540b51;
+    text-align: center;
+    padding-top: 40px;
+}
+
+.info-container p {
+    font-size: 1.2em;
+    text-align: center;
+}
+
+.info-container span {
+    font-size: 2.5em;
+    font-weight: 700;
+    color:#540b51;
+}
+
+.info-container ul {
+    text-align: justify;
+    font-weight: 1em;
+    width: 60%;
+    list-style-type: none;
+}
+
+.info-container li p {
+    font-weight: bold;
+}
+
+.survey-container {
+    width: 100%;
+    font-weight: lighter;
+    font-size: 0.8em;
+    padding-bottom: 40px;
+}
+
+
+/*Digital Section*/ 
+
+.digital-era {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 20px;
+    background-color: #540b51;
+}
+
+.digital-era h3 {
+    color: white;
+    font-size: 2.2em;
+    text-align: center;
+}
+
+.digital-era button {
+    color:#540b51;
+    text-transform: uppercase;
+    padding: 10px;
+    margin-bottom: 10px;
+    border-radius: 2px;
+    border: 1px solid white;
+    font-weight: bold;
+}
+
+#buttontwo {
+    color: white;
+    background-color:#540b51;
+}
+
+/*Footer*/
+
+hr{
+   width: 90%;
+   margin: 40px auto 30px auto;
+   color: #d3cfd3;
+}
+
+footer ul li {
+    width: 100%;
+    list-style-type: none;
+    padding: 15px 0;
+}
+
+.footer-container li {
+    font-weight: 600;  
+}
+
+.footer-container li span {
+    color:#4285F4
+}
+
+.icon-container ul{
+    width: 80%;
+    display: grid;
+    grid-auto-flow: column;
+    justify-content:space-between;
+    align-items: center;
+}
+
+.small {
+    padding: 20px;
+    text-align: center;
+    font-weight: light;
+}
+
+
+@media only screen and (min-width: 768px) and (max-width: 1024px) {
+
+    /*Nav*/
+
+nav {
+    display: flex;
+    align-items:center;
+    justify-content: space-around;
+    height: 30px;
+}
+nav ul {
+    display: flex;
+    list-style-type: none;
+    background-color: #540b51;
+}
+
+nav ul li {
+    display: flex;
+    align-items: center;
+    padding-right: 40px;
+}
+
+nav ul li a{
+    text-decoration: none;
+    color: white;
+    background-color: #540b51;
+}
+.menu-icon {
+    display: none;
+}
+
+.btn-trial {
+    height: 15px;
+    font-size: 0.7em;
+    font-weight: bold;
+    background-color: white;
+    color:#540b51;
+    padding: 10px;
+    text-transform: uppercase;
+}
+
+/*header*/
+
+header {
+    background-image: url('../images/background-singup.png');
+    display: grid;
+    grid-auto-flow: column;
+    grid-template-columns: 1fr 1fr;
+}
+
+.header-image {
+    width: 120%;
+    height: auto;
+}
+
+.header-content h1 {
+    font-size: 3.5em;
+    text-align:left
+}
+
+/*container*/
+
+.companies-container {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+/*Info container*/
+
+.info-container ul {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    padding: 10px;
+}
+
+.info-container ul li p {
+    width: 80%;
+    text-align: center;
+}
+
+/*Digital Section*/
+
+.digital-era {
+    display: flex;
+    align-items: center;
+    flex-shrink: 1;
+}
+
+.digital-era button {
+    width: 400px;
+}
+
+/*footer*/
+
+.footer-container ul{
+    font-size: 0.8em;
+    width: 90%;
+    display: flex;
+    justify-content:space-between;
+    align-items: center;
+    text-align: center;
+}
+
+.footer-container ul li img {
+    display: none;
+}
+
+.icon-container {
+    display: flex;
+    justify-content: space-evenly;
+}
+
+}
\ No newline at end of file
