From 43129b6e9529b59b8405074d3426415e0afa69be Mon Sep 17 00:00:00 2001
From: dillandatanerd <dillanpatelnz@gmail.com>
Date: Sun, 27 Jul 2025 16:03:47 +0200
Subject: [PATCH] completed lab

---
 starter_code/index.html            |  46 ++---
 starter_code/stylesheets/style.css | 301 +++++++++++++++++++++++++++++
 2 files changed, 320 insertions(+), 27 deletions(-)

diff --git a/starter_code/index.html b/starter_code/index.html
index 2f593610f..6b1cd9b00 100644
--- a/starter_code/index.html
+++ b/starter_code/index.html
@@ -39,15 +39,15 @@
     </div>
 
     <div>
-      <button>
+      <button id="search">
         <img src="./images/icon-search.png" alt="Search icon">
       </button>
 
-      <button>
+      <button id="menu">
         <img src="./images/icon-menu.png" alt="Menu icon">
       </button>
 
-      <ul hidden>
+      <ul id = "hidden">
         <li>
           <a href="#">Sign in</a>
         </li>
@@ -64,12 +64,12 @@
     <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 >Sign up with email</button>
 
-        <button>
+        <button id="signUpGoogle">
           <img src="./images/logo-google.png" alt="Google logo" />
           <span>Sign up with Google</span>
         </button>
@@ -83,7 +83,7 @@ <h1>Great teamwork starts with a digital HQ</h1>
   </header>
 
   <main>
-    <section>
+    <section id="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 id="statistics">
       <h3>Teams large and small rely on Slack</h3>
       <p>Slack securely scales up to support collaboration at the world’s biggest companies.</p>
 
@@ -129,15 +129,17 @@ <h3>Teams large and small rely on Slack</h3>
       </ul>
     </section>
 
-    <section>
+    <section id="digitalHQ">
       <h3>Welcome to your new digital HQ</h3>
 
-      <button>Try for free</button>
-      <button>Talk to sales</button>
+      <button >Try for free</button>
+      <button id="talkToSales">Talk to sales</button>
     </section>
 
   </main>
 
+  <hr>
+
   <footer>
     <ul>
       <li>Status</li>
@@ -149,22 +151,12 @@ <h3>Welcome to your new digital HQ</h3>
       <li>Download Slack</li>
     </ul>
 
-    <hr>
-
-    <ul>
-      <li>
-        <i class="fab fa-twitter"></i>
-      </li>
-      <li>
-        <i class="fab fa-facebook"></i>
-      </li>
-      <li>
-        <i class="fab fa-youtube"></i>
-      </li>
-      <li>
-        <i class="fab fa-linkedin"></i>
-      </li>
-    </ul>
+<ul class="social">
+  <li><i class="fab fa-twitter"></i></li>
+  <li><i class="fab fa-facebook"></i></li>
+  <li><i class="fab fa-youtube"></i></li>
+  <li><i class="fab fa-linkedin"></i></li>
+</ul>
 
     <div>
       <small>
diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css
index 59f4a7798..c037a817c 100644
--- a/starter_code/stylesheets/style.css
+++ b/starter_code/stylesheets/style.css
@@ -8,3 +8,304 @@ paragraph yellow: #ECB12F
 links blue: #2E71A6
 footer links grey: #454245
 */
+
+
+
+body {
+    background-color: #540B51;
+      margin: 0;
+  padding: 0;
+}
+
+nav {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+nav div:last-child {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+nav div > img{
+    position: static;
+    width:30%;
+    left: 0px;
+    top: 0px;
+    
+}
+nav ul{
+  display: none;
+}
+
+ button {
+  position: static;
+  right: 0px;
+  top: 0px;
+  background-color:#540B51;
+  border: none;
+}
+
+#search{
+  background-color: #540B51;
+}
+
+ #menu {
+  background-color: #540B51;
+ }
+
+header {
+display: flex;
+flex-direction: column;
+justify-content: center;
+align-items: center;
+flex-wrap: wrap;
+}
+
+header h1 {
+color: white;
+text-align: center;
+
+}
+
+header  p{
+  text-align: center;
+}
+
+header p > span {
+color:  #ECB12F;
+font-weight: bold;
+}
+
+button {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background-color: white ;
+  color: #540B51;
+  border-radius: 4px;
+  outline: none;
+  max-width: 720px;
+  width: 80%;
+  height: 50px;
+  margin-bottom: 10px;
+  justify-content: center;
+  align-items: center;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+header #signUpGoogle  {
+  
+  color: #ffffff;
+  background-color: #4285F4;
+}
+
+header div > div {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+
+
+header button > img {
+  position: absolute;
+  left: 5px;
+  top: -15px;
+  max-width: 30px;
+  max-height: 30px;
+  background-color: #ffffff;
+  padding: 4px;
+  border-radius: 2px;
+}
+
+header img {
+  max-height: 300px;
+  object-fit: cover;
+  margin-top: 20px;
+}
+
+#companies {
+  background-color: #F3EAE2;
+}
+
+#companies p {
+  text-transform: uppercase;
+  text-align: center;
+  padding: 50px;
+}
+
+#companies div{
+display: flex;
+flex-wrap: wrap;
+justify-content: center;
+align-content: center;
+
+}
+
+#companies img{
+  height: 60px;
+  margin: 20px 20px 20px 20px;
+}
+
+#statistics {
+  background-color: #ffffff;
+  text-align: center;
+  color: black;
+    border: none;
+
+}
+
+#statistics h3{
+  color: #540B51;
+}
+
+#statistics span{
+  color: #540B51;
+  font-weight: bold;
+  font-size: 2em;
+}
+
+#statistics li p{
+  margin: 0;
+  padding: 0;
+  font-weight: bold;
+  max-width: 200px;
+}
+
+#statistics li {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+#statistics ul{
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  padding: 0;
+}
+
+section{
+  color: white;
+  background-color: #540B51;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 30px;
+    margin-bottom: 30px;
+
+}
+
+#talkToSales{
+  background-color: #540B51;
+  outline: 2px solid white;
+  color: white;
+}
+
+footer{
+  background-color: white;
+}
+
+hr {
+  border: none;
+  height: 2px;
+  background-color: #540B51;
+  margin: 40px 0;
+}
+
+ul {
+  font-weight: bolder;
+  list-style: none;
+  padding-top: 50px;
+  ;
+}
+
+ul li {
+  margin-bottom: 20px;
+}
+
+footer ul li:last-child{
+
+  color: #2E71A6
+}
+ul.social {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 0;
+  list-style: none;
+  width: 90%;
+  margin: 30px 10px 10px 10px; 
+}
+
+footer div {
+  text-align: center;
+}
+
+@media screen and (min-width: 768px) and (max-width: 1024px) {
+  
+  nav ul{
+    display: flex;
+    flex-direction: row;
+    align-content: space-around;
+
+  }
+  #menu {
+    display: none;
+  }
+
+  header {
+  display: flex;
+  flex-direction: column; /* Arrange elements in a column */
+  justify-content: space-between; /* Align horizontally */
+  align-items: center; /* Align vertically */
+}
+
+  header {
+    flex-direction: row;
+  }
+
+  header > div {
+    width: 50%;
+  }
+
+#companies > div {
+  display: flex;
+  flex-wrap: nowrap;
+  padding: 20px;
+}
+
+#statistics ul{
+  flex-direction: row;
+  justify-content: space-around;
+
+}
+
+footer > ul{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  list-style: none;
+  padding-top: 50px;
+  margin: 0;
+}
+
+footer .social{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: flex-start;
+  list-style: none;
+  margin: 0;
+  max-width: 50%;
+}
+
+}