From 67776e5f30ab2264326631c5325b09a9b952df76 Mon Sep 17 00:00:00 2001
From: Akshaya Srinivas <akshaya.pra12@gmail.com>
Date: Wed, 19 Feb 2025 08:50:35 +0100
Subject: [PATCH] Partially completed

---
 starter_code/index.html            |  47 ++++-----
 starter_code/stylesheets/style.css | 159 +++++++++++++++++++++++++++++
 2 files changed, 183 insertions(+), 23 deletions(-)

diff --git a/starter_code/index.html b/starter_code/index.html
index 2f593610f..672478f43 100644
--- a/starter_code/index.html
+++ b/starter_code/index.html
@@ -7,7 +7,7 @@
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 
   <!-- link the Font Awesome stylesheet - CDN -->
-  <link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet" />
+  <link href="./stylesheets/style.css" rel="stylesheet" />
 
   <!-- link your styles -->
   <link rel="stylesheet" href="./stylesheets/style.css" />
@@ -20,7 +20,7 @@
   <!-- NAVBAR -->
   <nav>
     <div>
-      <img src="./images/slack-logo.png" alt="Slack logo" />
+      <img src="./images/slack-logo.png" alt="Slack logo" class="slack-logo"/>
 
       <ul>
         <li>
@@ -40,11 +40,11 @@
 
     <div>
       <button>
-        <img src="./images/icon-search.png" alt="Search icon">
+        <img src="./images/icon-search.png" alt="Search icon" class="nav-bar-button">
       </button>
 
       <button>
-        <img src="./images/icon-menu.png" alt="Menu icon">
+        <img src="./images/icon-menu.png" alt="Menu icon"class="nav-bar-button">
       </button>
 
       <ul hidden>
@@ -60,16 +60,16 @@
 
 
   <!-- HEADER -->
-  <header>
-    <div>
+  <header class="hero">
+    <div class="container">
       <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 class="highlight">Slack is free to try </span>for as long as you'd like.</p>
 
       <div>
-        <button>Sign up with email</button>
+        <button class="btn email">Sign up with email</button>
 
-        <button>
+        <button class="btn google">
           <img src="./images/logo-google.png" alt="Google logo" />
           <span>Sign up with Google</span>
         </button>
@@ -83,10 +83,10 @@ <h1>Great teamwork starts with a digital HQ</h1>
   </header>
 
   <main>
-    <section>
+    <section class="trusted">
       <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,43 +97,44 @@ <h1>Great teamwork starts with a digital HQ</h1>
 
     </section>
 
-    <section>
+    <section class="stats">
       <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 class="stat-box">
       <ul>
         <li>
-          <p><span>85%</span></p>
+          <p ><span class="number">85%</span></p>
           <p>
             of users say Slack has improved communication
-            <sup>*</sup>
+            
           </p>
         </li>
 
         <li>
-          <p><span>86%</span></p>
+          <p><span class="number">86%</span></p>
           <p>
             feel their ability to work remotely has improved has improved
-            <sup>*</sup>
+           
           </p>
         </li>
 
         <li>
-          <p><span>88%</span></p>
+          <p><span class="number">88%</span></p>
           <p>
             feel more connected to their teams*
-            <sup>*</sup>
+         
           </p>
         </li>
       </ul>
+    </div>
     </section>
 
-    <section>
+    <section class="cta">
       <h3>Welcome to your new digital HQ</h3>
 
-      <button>Try for free</button>
-      <button>Talk to sales</button>
+      <button class="btn primary">Try for free</button>
+      <button class="btn secondary">Talk to sales</button>
     </section>
 
   </main>
@@ -149,7 +150,7 @@ <h3>Welcome to your new digital HQ</h3>
       <li>Download Slack</li>
     </ul>
 
-    <hr>
+    
 
     <ul>
       <li>
diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css
index 59f4a7798..e5d351127 100644
--- a/starter_code/stylesheets/style.css
+++ b/starter_code/stylesheets/style.css
@@ -8,3 +8,162 @@ paragraph yellow: #ECB12F
 links blue: #2E71A6
 footer links grey: #454245
 */
+img {
+    width: 10px;
+}
+body, h1, h2, h3, h4 {
+    font-family: sans-serif;
+}
+
+body {
+    background-color: #540B51;
+    font-family: Arial, Helvetica, sans-serif;
+    margin:0;
+    padding:0;
+    text-align:center;
+}
+.container{
+    padding:20px;
+}
+
+
+nav {
+    margin: 15px 10px 20px 10px;
+    /* width: 100vw; */
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+nav ul{
+    display: none;
+}
+nav div button {
+    background-color: transparent;
+    border: none;
+}
+
+.nav-bar-button {
+    width:30px;
+}
+
+.slack-logo {
+    width:40%;
+}
+
+.hero{
+    background-color: #4a154b;
+    color:white;
+    padding:40px 20px;
+}
+.hero h1{
+font-size:50px;
+margin:15px 0;
+}
+.hero .highlight{
+    color:yellow;
+}
+.btn{
+    width:90%;
+    padding:12px;
+    margin:8px 0;
+    border:none;
+    font-size:16px;
+}
+.email{
+    background-color:white;
+    color:black;
+}
+.google{
+    background-color: lightblue;
+    color:white;
+}
+.trusted{
+    padding:20px;
+    background-color: #F3EAE2;
+}
+.trusted p{
+    font-weight:bold;
+    font-size:14px;
+    
+}
+.logos{
+    display:flex;
+    flex-wrap:wrap;
+    justify-content: center;
+    gap:10px;
+}
+.logos img{
+    height:30px;
+    width: 150px;
+}
+.stats{
+    background-color: #eaeaea;
+    padding:20px;
+}
+.stats h3{
+    color:#4a154b;
+    font-size: 30px;
+}
+.stats-box .number{
+    font-size: 50px;
+    color:#540B51
+}
+.stat-box{
+    background-color:#eaeaea ;
+    margin:10px auto;
+    padding:15px;
+    border-radius:5px;
+    max-width:300px;
+}
+.stats ul{
+    list-style-type: none;
+}
+.stat-box p{
+    font-size: large;
+}
+.cta{
+    background-color: #4a154b;
+    color:white;
+    padding:30px 20px;
+}
+.cta .primary{
+    background-color: #ffcc00;
+color:black;
+}
+.cta .secondary{
+    background-color: white;
+    color:black;
+}
+footer{
+    display:flex;
+    justify-content: center;
+    color:white;
+    font-size: 12px;
+}
+footer ul{
+    display: flex;
+    justify-content: center;
+    gap:15px;
+    margin-top:10px;
+    flex-direction: column;
+    list-style-type: none;
+}
+@media (min-width:768px){
+    .hero h1{
+        font-size: 28px;
+    }
+    .btn{
+        width:60%;
+    }
+    .logos img{
+        height:40px;
+    }
+    .stat-box{
+        max-width:500px;
+    }
+    footer ul{
+        justity-content:center;
+    }
+}
+
+