From 040eab6e3ce2cd214750c7b4716f9101a9619727 Mon Sep 17 00:00:00 2001
From: Gaelle <gaelle.madelaine@gmail.com>
Date: Thu, 1 May 2025 19:41:05 +0200
Subject: [PATCH] Solved lab

---
 .vscode/settings.json              |   3 +
 starter_code/index.html            |  59 ++--
 starter_code/stylesheets/style.css | 477 +++++++++++++++++++++++++++++
 3 files changed, 509 insertions(+), 30 deletions(-)
 create mode 100644 .vscode/settings.json
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000..6f3a2913e
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/starter_code/index.html b/starter_code/index.html
index 2f593610f..3e034ea73 100644
--- a/starter_code/index.html
+++ b/starter_code/index.html
@@ -10,18 +10,18 @@
   <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">
   <title>Slack is your digital HQ | Slack</title>
 </head>
 
-<body>
+<body class ="navbar">
   <!-- NAVBAR -->
   <nav>
-    <div>
-      <img src="./images/slack-logo.png" alt="Slack logo" />
-
+        <div>
+      <img src="./images/slack-logo.png" alt="Slack logo" class = "logoSlack"/>
       <ul>
         <li>
           <a href="#">Product</a>
@@ -38,7 +38,7 @@
       </ul>
     </div>
 
-    <div>
+    <div class="buttonNav">
       <button>
         <img src="./images/icon-search.png" alt="Search icon">
       </button>
@@ -47,7 +47,7 @@
         <img src="./images/icon-menu.png" alt="Menu icon">
       </button>
 
-      <ul hidden>
+      <ul>
         <li>
           <a href="#">Sign in</a>
         </li>
@@ -61,32 +61,31 @@
 
   <!-- HEADER -->
   <header>
-    <div>
+    <div class = "firstPart">
       <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 to try</span> for as long as you'd like.</p>
 
-      <div>
-        <button>Sign up with email</button>
+      <div  class ="signUp">
+        <button class = "SignupEmail">Sign up with email</button>
 
-        <button>
-          <img src="./images/logo-google.png" alt="Google logo" />
+        <button class="signUpGoogle">
+          <img src="./images/logo-google.png" alt="Google logo" id="logoGoogle" />
           <span>Sign up with Google</span>
         </button>
       </div>
-
     </div>
 
-    <div>
-      <img src="./images/hero-product-ui.png" alt="Slack app screenshot" />
+    <div id="try">
+      <img id="imgGrande" src="./images/hero-product-ui.png" alt="Slack app screenshot"/>
     </div>
   </header>
 
   <main>
-    <section>
-      <p>Trusted by companies all over the world</p>
+    <section id = "logo">
+      <p id="trustedcompany">Trusted by companies all over the world</p>
 
-      <div>
+      <div id="logocompany">
         <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,15 +96,15 @@ <h1>Great teamwork starts with a digital HQ</h1>
 
     </section>
 
-    <section>
+    <section id="cifras">
       <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="fraseCifras">Slack securely scales up to support collaboration at the world’s biggest companies.</p>
 
 
       <ul>
         <li>
           <p><span>85%</span></p>
-          <p>
+          <p class="subtextCifras">
             of users say Slack has improved communication
             <sup>*</sup>
           </p>
@@ -113,7 +112,7 @@ <h3>Teams large and small rely on Slack</h3>
 
         <li>
           <p><span>86%</span></p>
-          <p>
+          <p class="subtextCifras">
             feel their ability to work remotely has improved has improved
             <sup>*</sup>
           </p>
@@ -121,7 +120,7 @@ <h3>Teams large and small rely on Slack</h3>
 
         <li>
           <p><span>88%</span></p>
-          <p>
+          <p class="subtextCifras">
             feel more connected to their teams*
             <sup>*</sup>
           </p>
@@ -129,29 +128,29 @@ <h3>Teams large and small rely on Slack</h3>
       </ul>
     </section>
 
-    <section>
+    <section id="hq">
       <h3>Welcome to your new digital HQ</h3>
 
-      <button>Try for free</button>
-      <button>Talk to sales</button>
+      <button id="freebutton">Try for free</button>
+      <button id="salesbutton">Talk to sales</button>
     </section>
 
   </main>
 
   <footer>
-    <ul>
+    <ul id="footerlinks">
       <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 id="download">Download Slack</li>
     </ul>
 
     <hr>
 
-    <ul>
+    <ul id="redes">
       <li>
         <i class="fab fa-twitter"></i>
       </li>
@@ -166,7 +165,7 @@ <h3>Welcome to your new digital HQ</h3>
       </li>
     </ul>
 
-    <div>
+    <div id="theEnd">
       <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..c949ef751 100644
--- a/starter_code/stylesheets/style.css
+++ b/starter_code/stylesheets/style.css
@@ -8,3 +8,480 @@ paragraph yellow: #ECB12F
 links blue: #2E71A6
 footer links grey: #454245
 */
+
+@import url('https://use.fontawesome.com/releases/v5.0.1/css/all.css');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+body{
+    font-family: "Poppins", sans-serif;
+    font-weight: 100;
+    width: 100vw;
+
+}
+
+.firstPart {
+    display:flex;
+    justify-content: center;
+    flex-direction: column;
+}
+
+
+nav {
+    background-color: #540B51;
+}
+
+header{
+    color: white;
+    font-weight: 300;
+}
+
+.firstPart span:nth-child(1)  {
+    color: #ECB12F;
+    font-weight: 500;
+}
+
+.signUp {
+    display: flex;
+    flex-direction: column;
+    font-family: "Poppins", sans-serif;  
+}
+
+.SignupEmail  {
+    color: #540B51;
+    text-transform: uppercase;
+    background-color: white;
+    border: none;
+    border-radius: 3px;   
+}
+
+main img {
+    width: 10%;
+}
+
+main span, h3 {
+    color: #540B51;
+    font-weight: 700;
+    font-size: 1.8rem;
+}
+
+#fraseCifras {
+    font-weight: 400;
+    font-size: 0.8rem;
+}
+
+
+#cifras li {
+    list-style-type: none;
+    margin-bottom: 2rem;
+    
+}
+
+#cifras {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    text-align: center;
+}
+
+
+
+li p {
+    margin-top: 0;
+    margin-bottom: 0;
+    font-weight: 700;
+    
+}
+
+#cifras h3 {
+    margin: 50px 30px 0 30px;
+}
+
+#hq {
+    display: flex;
+    background-color: #540B51;
+    flex-direction: column;
+    text-align: center;
+    align-items: center;
+    }
+
+#hq h3 {
+    color: white;
+    margin: 40px ;
+    }
+
+#hq button {
+    height: 2.5rem;
+    border-radius: 3px;
+    width: 92%;
+    font-weight: 600;
+    font-family: "Poppins", sans-serif;
+    text-transform: uppercase;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#freebutton {
+    background-color: white;
+    color: #540B51;
+    border: 2px solid white;
+}
+
+#salesbutton {
+    color: white;
+    background-color: #540B51;
+    border: 1px solid white;
+    margin-bottom: 35px;
+    margin-top: 15px;  
+}
+
+
+footer ul {
+    list-style-type: none;
+    padding-left: 0;
+    margin-left: 0.5rem;
+}
+
+footer {
+    display: flex;
+    flex-direction: column;
+    font-family: "Poppins", sans-serif;
+    font-weight: 600;
+    font-size: 0.7rem;
+    margin: 1rem;
+}
+
+footer li {
+    margin-bottom: 15px;
+}
+
+
+#redes {
+    display: flex;
+    justify-content: space-between;
+
+}
+
+
+
+#theEnd{
+    color: #454245;
+    text-align: center;
+    align-items: center;
+}
+
+
+#footerlinks li:nth-last-child(1){
+    list-style-image: url('../images/icon-download.png');
+    text-align: left;
+    margin-left: 30px;
+    
+    
+}
+
+#footerlinks li:nth-last-child(2){
+    list-style-image: url('../images/icon-region.png');
+    margin-left: 30px;
+    text-align: left;
+}
+
+
+nav{
+    display: flex; 
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+} 
+
+nav ul {
+    display: none;
+    }
+
+.firstPart {
+        background-color:#540B51;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        justify-content: center;
+        text-align: center;
+    }
+
+    header button {
+    height: 2.5rem;
+    margin: 0.3rem;
+    border-radius: 3px;
+    border: none;
+    width: 92%;
+    font-weight: 600;
+    font-family: "Poppins", sans-serif;
+    text-transform: uppercase;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    }
+
+    #logoGoogle {
+        display: flex;
+        width: 20px;
+        background-color: white;
+        position: ;
+        left: 20px;
+        padding: 4px ;
+        right: 85%;
+        position: absolute;
+        
+    
+    } 
+    
+    .signUpGoogle {
+         background-color: #4285F4 ;
+        color: white;
+        text-align: center;
+        flex-grow: 90;
+        align-items: center;
+        display: flex;
+        position: relative;
+         }
+
+         .buttonNav button{
+            background: none;
+            border-style: none;
+            justify-content: row;
+        }
+        
+        .buttonNav{
+            display: flex;
+            justify-content: row;
+            margin: 1rem;
+        }
+
+        #logo {
+            display: flex;
+            flex-direction: column ;
+            background-color: #F3EAE2; 
+            margin-top: -7px;
+            padding: 15px 15px ;
+
+        } 
+
+        #download {
+            color: #2E71A6;
+        }
+
+
+
+@media (width < 768px){
+
+.logoSlack{
+    width: 20%;
+    margin : 1rem;
+    display: flex;
+    align-items: center;
+}
+
+
+
+
+h1{
+    margin: 0px;
+    color: white;
+    padding: 20px 20px 0 20px;
+    align-items: center;
+    justify-content: center;
+    }
+
+.signUp {
+    display: flex;
+    flex-direction: column;
+    font-family: "Poppins", sans-serif; 
+    width: 100%; 
+    justify-content: center;  
+    align-items: center;
+    margin-bottom: 1rem;
+}
+
+
+
+
+
+
+#imgGrande {
+    width: 100%;
+}
+
+header{
+    display: flex;
+    flex-direction: column;
+}
+
+
+
+
+#trustedcompany {
+    text-transform: uppercase;
+    font-weight: 600;
+    text-align: center;
+    font-size: 0.8rem;
+}
+
+#try {
+    height: auto;
+}
+
+#logocompany {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 30px;
+    flex-wrap: wrap;
+}
+
+
+main img {
+    width: 3.5rem;
+    height: auto ;
+}
+
+#cifras ul {
+    padding: 0;
+    width: 40%;
+    font-size: 0.6rem;
+}
+
+#footerlinks{
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+    }
+
+
+
+}
+/* *****************MOBILE SCREENS******************* */
+@media (min-width: 768px) and  (max-width: 1024px ){
+
+    .logoSlack{
+        width: 30%;
+        margin : 1rem;
+        display: flex;
+        align-items: center;
+    }
+
+    main img {
+        width: .5rem;
+        height: auto ;
+    }
+
+header {
+    display:flex; 
+    flex-direction: row;
+    height: 700px;
+    
+}
+
+.firstPart{
+    width: 60%;
+    background-image: url('../images/background-singup.png');
+    background-size: cover;
+    text-align: left;  
+    display: flex; 
+    justify-content: flex-start;
+    align-items: flex-start ;
+    padding: 40px 20px 60px 20px;
+}
+
+#try {
+    width: 40%;
+    overflow: hidden;  
+    background-color: #540B51; 
+    display: flex;
+    align-items: center;
+}
+
+#try img {
+    max-width: auto ;
+    height: 40%;  
+}
+
+h1 {
+    text-align: left;
+    margin: 0;
+    font-size: 3.5rem;
+}
+
+.signUp {
+    width: 100%;
+    margin-top: 20px;
+    display: flex;
+    align-items: center;
+}
+
+#trustedcompany {
+    text-transform: uppercase;
+    font-weight: 600;
+    text-align: center;
+    font-size: 1rem;
+}
+
+#logocompany {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    gap: 30px;
+    
+}
+
+main img {
+    width: 5rem;
+    height: auto ;
+}
+
+#logo {
+    display: flex;
+    flex-direction: column ;
+    background-color: #F3EAE2; 
+    margin-top: -7px;
+    padding: 50px 40px ;
+} 
+
+#cifras ul {
+    padding: 0;
+    font-size: 0.6rem;
+    flex-direction: row;
+    display: flex;
+    gap:90px;
+    justify-content: space-around;
+    text-align: left;
+    margin: 50px 40px 20px 40px;
+}
+
+.subtextCifras {
+    text-align: left;
+}
+
+#footerlinks{
+    margin: 20px 20px;
+    display: flex;
+    flex-direction: row;
+    justify-content:space-between;
+    }
+
+}
+
+#redes {
+    display: flex;
+    justify-content: space-between;
+    width: 40%;
+
+}
+
+#theEnd{
+    margin-top: 20px;
+    color: #454245;
+    text-align: left;
+    align-items: flex-start;
+}
+
+
