From a806c5d4412d4ceb2eb85e97bfa2500083b2b613 Mon Sep 17 00:00:00 2001
From: sara faltas <gadly@cloudconceptgroup.com>
Date: Mon, 6 Apr 2026 12:39:29 +0200
Subject: [PATCH] resolved

---
 starter_code/index.html            |  66 ++++++----
 starter_code/stylesheets/style.css | 188 +++++++++++++++++++++++++++++
 2 files changed, 228 insertions(+), 26 deletions(-)
diff --git a/starter_code/index.html b/starter_code/index.html
index 2f593610f..a57d103ec 100644
--- a/starter_code/index.html
+++ b/starter_code/index.html
@@ -18,11 +18,11 @@
 
 <body>
   <!-- NAVBAR -->
-  <nav>
+  <nav id="access-menu">
     <div>
-      <img src="./images/slack-logo.png" alt="Slack logo" />
+      <img src="./images/slack-logo.png" alt="Slack logo" width="100px"/>
 
-      <ul>
+      <ul hidden>
         <li>
           <a href="#">Product</a>
         </li>
@@ -39,11 +39,11 @@
     </div>
 
     <div>
-      <button>
+      <button id="button-search">
         <img src="./images/icon-search.png" alt="Search icon">
       </button>
 
-      <button>
+      <button id="button-menu">
         <img src="./images/icon-menu.png" alt="Menu icon">
       </button>
 
@@ -60,17 +60,17 @@
 
 
   <!-- HEADER -->
-  <header>
+  <header id="main-header">
     <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>Slack is free to try</span> for as long as you'd like.</p>
 
       <div>
-        <button>Sign up with email</button>
+        <button id="email-signup">Sign up with email</button>
 
-        <button>
-          <img src="./images/logo-google.png" alt="Google logo" />
+        <button id="google-signup">
+          <img src="./images/logo-google.png" alt="Google logo" width="30px" heigth="10px"/>
           <span>Sign up with Google</span>
         </button>
       </div>
@@ -78,12 +78,12 @@ <h1>Great teamwork starts with a digital HQ</h1>
     </div>
 
     <div>
-      <img src="./images/hero-product-ui.png" alt="Slack app screenshot" />
+      <img src="./images/hero-product-ui.png" alt="Slack app screenshot" width=100% />
     </div>
   </header>
 
   <main>
-    <section>
+    <section class="companies">
       <p>Trusted by companies all over the world</p>
 
       <div>
@@ -97,7 +97,7 @@ <h1>Great teamwork starts with a digital HQ</h1>
 
     </section>
 
-    <section>
+    <section class="section_team">
       <h3>Teams large and small rely on Slack</h3>
       <p>Slack securely scales up to support collaboration at the world’s biggest companies.</p>
 
@@ -123,35 +123,49 @@ <h3>Teams large and small rely on Slack</h3>
           <p><span>88%</span></p>
           <p>
             feel more connected to their teams*
-            <sup>*</sup>
+            <!-- <sup>*</sup> -->
           </p>
         </li>
       </ul>
     </section>
 
-    <section>
+    <section id="welcome">
       <h3>Welcome to your new digital HQ</h3>
-
-      <button>Try for free</button>
-      <button>Talk to sales</button>
+       <div>
+      <button>TRY FOR FREE</button>
+      </div>
+      <div>
+      <button>TALK TO SALES</button>
+      </div>
     </section>
-
+    </main>
+ <br>
   </main>
 
-  <footer>
-    <ul>
+ 
+
+  <footer id="footer">
+    
+    <ul id = footer1>
+      <hr>
       <li>Status</li>
+      <br>
       <li>Privacy</li>
+      <br>
       <li>Terms</li>
+      <br>
       <li>Cookie Preferences</li>
+      <br>
       <li>Contact Us</li>
-      <li>Change Region</li>
-      <li>Download Slack</li>
+      <br>
+      <li><img src="images/icon-region.png"> Change Region</li>
+      <br>
+      <li> <img src="./images/icon-download.png"> Download Slack</li>
     </ul>
 
-    <hr>
 
-    <ul>
+
+    <ul id="social-media">
       <li>
         <i class="fab fa-twitter"></i>
       </li>
@@ -166,7 +180,7 @@ <h3>Welcome to your new digital HQ</h3>
       </li>
     </ul>
 
-    <div>
+    <div id="copyRight">
       <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..50f27164c 100644
--- a/starter_code/stylesheets/style.css
+++ b/starter_code/stylesheets/style.css
@@ -8,3 +8,191 @@ paragraph yellow: #ECB12F
 links blue: #2E71A6
 footer links grey: #454245
 */
+
+  
+html {
+  scroll-behavior: smooth; 
+}
+body {
+  background-color:rgb(81, 12, 51);
+  margin: 0px; 
+  text-align: center;
+
+}
+/* @media screen and (max-width:769) {} */
+
+#access-menu div:nth-child(1){
+display: flex;
+  justify-content: flex-start;
+}
+#access-menu div:nth-child(2){
+  background-color: rgb(81, 12, 51);
+  color: white;
+  display: flex;
+  justify-content: flex-end;
+}
+
+#button-search{
+   background-color: rgb(81, 12, 51);
+   position:relative;
+   top: 0px;
+   right: 0px;
+   border-style:none;
+}
+#button-menu{
+   background-color: rgb(81, 12, 51);
+   justify-content:right;
+   top: 0px;
+   right: 0px;
+    border-style:none;
+}
+
+
+#main-header {
+color: white;
+ padding: 30px;
+
+}
+
+#main-header div div{
+   display:flex;
+  flex-direction:column;
+  justify-content: center;
+  align-items: center;
+  padding: 30px;
+}
+
+#main-header button:nth-child(1){
+  background-color: white;  
+  border-style: none;
+  border-radius: 5px; 
+  width:100%;
+  height:50px;
+}
+#main-header button:nth-child(2){
+  background-color: rgb(90, 142, 246);
+  border-style: none;
+  border-radius: 5px;
+  color:white;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width:100%;
+  height: 50px;
+  margin: 20px;
+}
+
+#main-header div p span {
+    color: rgb(235, 211, 26);
+}
+
+
+#email-signup{
+display: flex;
+flex-direction: column;
+justify-content: center;
+
+}
+
+#google-signup{
+display: flex;
+flex-direction: column;
+align-items: center;
+background-color: rgb(130, 130, 245);
+}
+.companies{
+  background-color: rgb(247, 245, 237);
+ padding-bottom: 30px;
+}
+.companies div img{
+ width: 100px;
+
+}
+.companies p{
+  align-items: center;
+  padding: 20px;
+}
+
+.section_team{
+  background-color: white;
+  margin:0px;
+  padding: 20px 70px 20px 70px;
+}
+
+.section_team h3 {
+  color:rgb(81, 12, 51) ;
+  font-size:x-large;
+}
+
+.section_team ul span {
+    color:rgb(81, 12, 51);
+    font-size:xx-large;
+    font-weight: bolder;
+}
+
+.section_team ul{
+  list-style: none;
+  font-weight: bold;
+}
+
+#footer{
+  background-color: white;
+ 
+}
+#footer ul {
+  list-style: none;
+  text-align: left;
+  padding: 20px;
+
+}
+#footer1 li:nth-child(14){
+  color:blue;
+}
+
+
+#welcome div{
+  display: flex;
+  flex-direction:row;
+  justify-content: center;
+}
+#welcome h3{
+  color: white;
+}
+
+#welcome div button{
+border-radius: 5px;
+width: 100%;
+height:50px;
+margin:10px;
+}
+
+
+
+#social-media{
+   display: flex;
+  justify-content: space-between; 
+  align-items: center;   
+}
+
+#copyRight{
+  padding-bottom: 30px;
+}
+
+
+@media screen and (min-width: 769px) and (max-width: 1023px) {
+#main-header{
+   display:flex;
+  flex-direction:row;
+  padding: 30px;
+}
+
+#footer1{
+  display:flex;
+  flex-direction:row;
+  align-items: center;
+  justify-content: space-between;
+  margin-left: 20px;
+  margin-right: 20px;
+}
+}
\ No newline at end of file
