From e093e48481fb123119578ceca7103dfaf79ff96b Mon Sep 17 00:00:00 2001
From: joaommj <joao_jacinto_8@hotmail.com>
Date: Wed, 19 Feb 2025 21:00:00 +0000
Subject: [PATCH] day 2

---
 starter_code/index.html            |  88 ++-
 starter_code/stylesheets/style.css | 852 +++++++++++++++++++++++++++++
 2 files changed, 883 insertions(+), 57 deletions(-)
diff --git a/starter_code/index.html b/starter_code/index.html
index 2f593610f..a75aaf3d4 100644
--- a/starter_code/index.html
+++ b/starter_code/index.html
@@ -1,27 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <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 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>
   <!-- NAVBAR -->
-  <nav>
-    <div>
+  <nav class = "navbar">
+    <div >
       <img src="./images/slack-logo.png" alt="Slack logo" />
-
+    </div>
+    <div>
       <ul>
         <li>
           <a href="#">Product</a>
@@ -37,55 +33,47 @@
         </li>
       </ul>
     </div>
-
-    <div>
+    <div id ="nav-tryagain">
       <button>
         <img src="./images/icon-search.png" alt="Search icon">
       </button>
-
-      <button>
+      <button class="butt-gone">
         <img src="./images/icon-menu.png" alt="Menu icon">
       </button>
-
       <ul hidden>
         <li>
           <a href="#">Sign in</a>
         </li>
         <li>
-          <a href="#">Try for free</a>
+          <a href="#" class ="try-free">Try for free</a>
         </li>
       </ul>
     </div>
   </nav>
-
-
   <!-- HEADER -->
   <header>
-    <div>
+   <article id ="team-head">
+     <div>
       <h1>Great teamwork starts with a digital HQ</h1>
-
-      <p>Slack is free to try for as long as you'd like.</p>
-
-      <div>
-        <button>Sign up with email</button>
-
-        <button>
+      <p><span>Slack is free to try</span> for as long as you'd like.</p>
+    </div>
+    <div class ="btn-signin">
+        <button class ="email-button">Sign up with email</button>
+<br>
+        <button class ="blue-btn">
           <img src="./images/logo-google.png" alt="Google logo" />
-          <span>Sign up with Google</span>
+          <p>Sign up with Google</p>
+          <span></span>
         </button>
-      </div>
-
     </div>
-
+  </article>
     <div>
-      <img src="./images/hero-product-ui.png" alt="Slack app screenshot" />
+      <img src="./images/hero-product-ui.png" class ="hero-img" alt="Slack app screenshot" />
     </div>
   </header>
-
   <main>
-    <section>
-      <p>Trusted by companies all over the world</p>
-
+    <section id ="trusted">
+      <h3>Trusted by companies all over the world</h3>
       <div>
         <img src="./images/logo-airbnb.png" alt="Airbnb logo" />
         <img src="./images/logo-nasa.png" alt="NASA logo" />
@@ -94,14 +82,10 @@ <h1>Great teamwork starts with a digital HQ</h1>
         <img src="./images/logo-nyt.png" alt="New York Times logo" />
         <img src="./images/logo-spotify.png" alt="Spotify logo" />
       </div>
-
     </section>
-
-    <section>
+    <section id ="info">
       <h3>Teams large and small rely on Slack</h3>
       <p>Slack securely scales up to support collaboration at the world’s biggest companies.</p>
-
-
       <ul>
         <li>
           <p><span>85%</span></p>
@@ -110,7 +94,6 @@ <h3>Teams large and small rely on Slack</h3>
             <sup>*</sup>
           </p>
         </li>
-
         <li>
           <p><span>86%</span></p>
           <p>
@@ -118,7 +101,6 @@ <h3>Teams large and small rely on Slack</h3>
             <sup>*</sup>
           </p>
         </li>
-
         <li>
           <p><span>88%</span></p>
           <p>
@@ -128,30 +110,25 @@ <h3>Teams large and small rely on Slack</h3>
         </li>
       </ul>
     </section>
-
-    <section>
+    <section id = "free-sale">
       <h3>Welcome to your new digital HQ</h3>
-
-      <button>Try for free</button>
-      <button>Talk to sales</button>
+      <button class ="free-btn">Try for free</button>
+      <br>
+      <button class ="sales-btn">Talk to sales</button>
     </section>
-
   </main>
-
   <footer>
+    <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"/> Change Region</li>
+      <li><img src ="./images/icon-download.png"/><a href ="#"> Download Slack</a> </li>
     </ul>
-
-    <hr>
-
-    <ul>
+    <ul class = "social-row">
       <li>
         <i class="fab fa-twitter"></i>
       </li>
@@ -165,15 +142,12 @@ <h3>Welcome to your new digital HQ</h3>
         <i class="fab fa-linkedin"></i>
       </li>
     </ul>
-
-    <div>
+    <div id = "foot-info">
       <small>
         &copy; 2022 Slack Technologies, LLC, a Salesforce company. All rights reserved. Various trademarks held by
         their respective owners.
       </small>
     </div>
-
   </footer>
 </body>
-
 </html>
\ No newline at end of file
diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css
index 59f4a7798..157a3ebb2 100644
--- a/starter_code/stylesheets/style.css
+++ b/starter_code/stylesheets/style.css
@@ -8,3 +8,855 @@ paragraph yellow: #ECB12F
 links blue: #2E71A6
 footer links grey: #454245
 */
+
+@media (max-width:760px) {
+   
+    html, body {
+        margin: 0;
+        padding: 0;
+        width: 100vw;
+        overflow-x: hidden;
+        font-family: Arial, Helvetica, sans-serif;
+        box-sizing: border-box;
+    }
+
+    .navbar{
+        background-color: #540B51;
+        display:flex;
+        flex-direction: row;
+        justify-content: space-between; 
+        align-items: center;
+        margin: 0;
+        max-width: 100%;
+        padding:10px 0;
+        width: 100%;
+        list-style-type: none;
+        list-style-type: none;
+        box-sizing: border-box; /* Ensures padding doesn't affect width */
+    }
+    .navbar div{
+        margin: 0;
+        padding: 0;
+    }
+
+    .navbar ul{
+       display: none;
+    }
+
+    .navbar button{
+        height: 50px;
+        width: auto;
+        margin: 0;
+        padding:0;
+        background-color: #540B51;
+        border:none;
+    }
+
+    header {
+        background-color: #540B51;
+        color: #fff;
+        text-align: center;
+        margin:  0;
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+
+    header h1{
+        font-size: 5rem;
+    }
+
+    header span{
+        color:#ECB12F;
+        }
+
+    header p, span{
+        font-size: 2.2rem;
+    }
+
+    .btn-signin{
+        display:flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding:30px 0;
+        width:100%;
+    }
+
+    .blue-btn{
+        display: flex;
+        flex-direction: row;
+        justify-content: space-evenly;
+        align-items: center;
+        width:90%;
+        background-color:#4285F4 ;
+        padding: 10px 0;
+        border-radius:5px;
+    }
+
+     .blue-btn img{
+        background-color:#f4f4f4 ;
+        margin: 0;
+        padding:0;
+        height: 90px;
+        width: auto;
+        border-radius:5px;
+        }
+
+    .email-button{
+        border-radius:5px;
+        width:90%;
+        height:100px;
+        
+    }
+    .blue-btn p {
+        color:white;
+    }
+
+    .hero-img{
+        width: 100%;
+        padding:0;
+        margin: 0;
+    }
+
+    #trusted{
+        background-color: #F3EAE2;
+        margin: 0;
+        padding:10px 0 0 0;
+        text-align: center;
+        width: 100%;
+        }
+
+    #trusted div{
+        margin: 0;
+        padding:50px  0;
+        display: flex;
+        flex-wrap: wrap; /* Ensures responsiveness */
+        justify-content: center; /* Centers logos */
+        align-items: center;
+        gap: 10px; /* Adds spacing between images */
+        width: 100%; /* Restrict width for better layout */
+        height: auto;
+    }
+
+    #trusted div img{
+        width:20%;
+    }
+    #trusted h3 {
+       font-size: 1.6rem;
+       text-transform: uppercase;
+    }
+
+    #info{
+    text-align: center;
+    font-weight: bold; 
+    font-size: 25px;
+    word-wrap: break-word; 
+    overflow-wrap: break-word; /* Ensures text wraps properly */
+    white-space: normal; 
+    }
+
+   #info h3, span{
+    font-weight: bold; 
+    font-size: 50px; 
+    color: #540B51; 
+    }
+
+    #info ul{
+        display:flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        list-style-type: none;
+        text-align: center;
+        padding: 0;
+    margin: 0;
+    border: 0;
+    width: 100%; 
+    }
+
+    #info ul li {
+        max-width: 70%; /* Restricts width to allow wrapping */
+        word-wrap: break-word; /* Breaks long words */
+        overflow-wrap: break-word; /* Ensures wrapping */
+        white-space: normal; /* Allows text to wrap */
+        text-align: center; /* Centers the text */
+        padding: 10px 0;
+    }
+
+    #free-sale{
+        background-color: #540B51;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
+        align-items: center;
+        width:100%;
+        margin: 0;
+        padding: 0 0 90px 0;
+    }
+
+    #free-sale button{
+        width: 90%;
+        height: 50px;
+        border-radius: 3px;
+        border: 1px solid white;
+    }
+
+    .free-btn{
+        color: #540B51;
+
+    }
+
+    .sales-btn{
+        background-color: #540B51;
+        color: white;
+    }
+
+    #free-sale h3{
+        font-weight: bold; 
+        font-size: 50px; 
+        color:white;
+        text-align: center;
+        width: 100%;
+    }
+
+    footer{
+        font-weight: bold;
+        font-size: 16px;
+    }
+
+    footer ul li{
+    max-width: 80%; /* Restricts width to allow wrapping */
+    word-wrap: break-word; /* Breaks long words */
+    overflow-wrap: break-word; /* Ensures wrapping */
+    white-space: normal; /* Allows text to wrap */
+    padding: 10px 0;
+    margin-bottom: 15px; /* Adds space below each <li> */
+    word-spacing: 5px; /* Adds space between words */
+    list-style-type: none;
+    }
+
+    footer a{
+        text-decoration: none;
+        color:#4285F4;
+    }
+
+    .social-row{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding:0 30px;
+        margin:0;
+    }
+
+    #foot-info{
+        color:grey;
+        text-align:center;
+        margin:0;
+        padding: 0 50px;
+        max-width:100%;
+    }
+}@media (min-width: 760px) and (max-width: 1024px) {
+   
+    html, body {
+        margin: 0;
+        padding: 0;
+        width: 100vw;
+        overflow-x: hidden;
+        font-family: Arial, Helvetica, sans-serif;
+        box-sizing: border-box;
+    }
+
+
+    .navbar {
+        background-color: #540B51;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        width: 100vw; /* Ensures it spans the viewport width */
+        max-width: 100%; /* Prevents unwanted shrinking */
+        padding: 10px 0;
+        margin: 0;
+        list-style-type: none;
+        box-sizing: border-box; /* Ensures padding doesn't affect width */
+    }
+
+    .navbar div {
+        margin: 0;
+        padding: 0;
+    }
+
+    .navbar ul {
+        display: none;
+    }
+
+    .navbar button {
+        height: 50px;
+        width: auto;
+        margin: 0;
+        padding: 0;
+        background-color: #540B51;
+        border: none;
+    }
+
+    header{
+        background-image: url(../images/background-singup.png);
+        background-size: cover;
+        background-repeat: no-repeat;
+        position:0 0;
+        display: flex;
+        flex-direction: row;
+        align-items: center; /* Aligns content to the top */
+        justify-content: space-between; /* Pushes text to left & image to right */
+        color: white;
+        padding: 40px 20px; /* Adds spacing inside the header */
+        width: 100%;
+        height: 100vh; /* Ensures full screen height */
+        box-sizing: border-box;
+    }
+    
+
+    header h1{
+        font-size: 50px;
+       
+
+    }
+
+    header span{
+        color: #ECB12F;
+    }
+
+    header p{
+        font-size: 25px;
+    }
+
+    .blue-btn img{
+        background-color: white;
+        border-radius: 5px;
+        padding: 0;
+        margin: 0;
+        height: 30px;
+        width: auto;
+    }
+    .btn-signin{
+        display:flex;
+        flex-direction: column;
+        align-items: flex-start;
+        padding:30px 0;
+        gap: 5px;
+        margin-top: 20px;
+    }
+
+    .blue-btn{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 12px 20px;
+        border-radius: 5px;
+        background-color: #4285F4;
+        color: white;
+        font-size: 16px;
+        border: none;
+        gap: 10px;
+        width: 80%;
+        height:50px ;
+    }
+
+    .email-button{
+        border-radius: 5px;
+        padding: 12px 20px;
+        font-size: 16px;
+        border: 1px solid #ccc;
+        background-color: white;
+        width: 80%;
+        height: 50px;
+    }
+
+    /* Image container (right side) */
+    .hero-img {
+        height: 400px;
+        width: 400px; /* Adjust size as needed */
+}
+
+    #trusted{
+        background-color: #F3EAE2;
+        margin: 0;
+        padding:10px 0 0 0;
+        text-align: center;
+        width: 100%;
+    }
+
+    #trusted div{
+        margin: 0;
+        padding:50px  0;
+        display: flex;
+        justify-content:space-evenly; /* Centers logos */
+        align-items: center;
+        gap: 10px; /* Adds spacing between images */
+        width: 100%; /* Restrict width for better layout */
+        height: auto;
+    }
+    
+    #trusted div img{
+        width:150px;
+        height: auto;
+    }
+    #trusted h3 {
+       font-size: 1.6rem;
+       text-transform: uppercase;
+    }
+
+    #info{
+        text-align: center;
+        font-weight: bold; 
+        font-size: 25px;
+        word-wrap: break-word; 
+        overflow-wrap: break-word; /* Ensures text wraps properly */
+        white-space: normal; 
+        }
+    
+       #info h3, span{
+        font-weight: bold; 
+        font-size: 50px; 
+        color: #540B51; 
+        }
+    
+        #info ul{
+            display:flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            list-style-type: none;
+            text-align: left;
+            padding: 0;
+            margin: 0;
+            border: 0;
+            width: 100%; 
+        }
+    
+        #info ul li {
+            max-width: 70%; /* Restricts width to allow wrapping */
+            word-wrap: break-word; /* Breaks long words */
+            overflow-wrap: break-word; /* Ensures wrapping */
+            white-space: normal; /* Allows text to wrap */
+            text-align: left; /* Centers the text */
+            padding: 10px 50px;
+        }
+    
+        #free-sale{
+            background-color: #540B51;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-evenly;
+            align-items: center;
+            width:100%;
+            margin: 0;
+            padding: 0 0 90px 0;
+        }
+    
+        #free-sale button{
+            width: 90%;
+            height: 90px;
+            border-radius: 3px;
+            border: 1px solid white;
+            font-size:30px;
+            text-transform: uppercase;
+        }
+    
+        .free-btn{
+            color: #540B51;
+    
+        }
+    
+        .sales-btn{
+            background-color: #540B51;
+            color: white;
+        }
+    
+        #free-sale h3{
+            font-weight: bold; 
+            font-size: 50px; 
+            color:white;
+            text-align: center;
+            width: 100%;
+        }
+
+        footer ul{
+            font-weight: bold;
+            font-size: 16px;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-evenly;
+            padding: 50px 0 20px 0;
+        }
+    
+        footer ul li{
+        
+        padding: 10px 0;
+        margin-bottom: 15px; /* Adds space below each <li> */
+        word-spacing: 5px; /* Adds space between words */
+        list-style-type: none;
+        }
+    
+        footer a{
+            text-decoration: none;
+            color:#4285F4;
+        }
+    
+        .social-row{
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            padding:0 30px;
+            margin:0;
+            gap:50px;
+        }
+    
+        #foot-info{
+            color:grey;
+            text-align:center;
+            margin:0;
+            padding: 0 50px;
+            max-width:100%;
+        }
+}
+@media (min-width: 1024px) and (max-width: 1440px){
+    
+    html, body {
+        margin: 0;
+        padding: 0;
+        width: 100vw;
+        overflow-x: hidden;
+        font-family: Arial, Helvetica, sans-serif;
+        box-sizing: border-box;
+    }
+
+
+    .navbar {
+        background-color: #540B51;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        width: 100vw; /* Ensures it spans the viewport width */
+        max-width: 100%; /* Prevents unwanted shrinking */
+        padding: 10px 0;
+        margin: 0;
+        list-style-type: none;
+        box-sizing: border-box; /* Ensures padding doesn't affect width */
+    }
+
+    .navbar div {
+        margin: 0;
+        padding: 0;
+    }
+    
+    .butt-gone{
+        display: none;
+    }
+
+    .navbar ul{
+        font-weight: bold;
+        font-size: 16px;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        padding: 0;
+        margin:0;
+    }
+    .navbar ul li{
+    padding: 10px 20px;
+    margin-bottom: 15px; 
+    word-spacing: 5px;
+    list-style-type: none;
+    }
+
+
+    
+    #nav-tryagain{
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-around;
+        padding:0;
+        margin:0;
+    }
+
+    #nav-tryagain ul{
+        font-weight: bold;
+        font-size: 16px;
+        display: flex;
+        flex-direction: row;
+        justify-content: center; 
+        padding: 0;
+        margin: 0;
+        width: 100%;
+    }
+    #nav-tryagain ul li{
+        padding: 10px 20px;
+        margin-bottom: 0; 
+        word-spacing: 5px; 
+        list-style-type: none;
+        text-align: center;
+        }
+
+    #nav-tryagain a{
+        color: rgb(255, 255, 255);
+        display: inline-block;
+    }
+    #nav-tryagain button {
+    background: none;
+    border: none;
+    padding: 10px;
+    cursor: pointer;
+}
+
+    .navbar a{
+        text-decoration: none;
+        color:white;
+       
+    }
+    
+    .try-free{
+        background-color: rgb(255, 255, 255);
+        color: #540B51;
+        text-transform: uppercase;
+        border-radius: 5px;
+        padding: 10px 20px; 
+        font-size: 16px; 
+        border: 1px solid #540B51; 
+        text-align: center;
+    }
+
+
+    .navbar button {
+        height: 50px;
+        width: auto;
+        margin: 0;
+        padding: 0;
+        background-color: #540B51;
+        border: none;
+    }
+
+    header{
+        background-image: url(../images/background-singup.png);
+        background-size: cover;
+        background-repeat: no-repeat;
+        position:0 0;
+        display: flex;
+        flex-direction: row;
+        align-items: center; 
+        color: white;
+        padding: 40px 20px;
+        width: 100%;
+        height: 100vh; 
+        box-sizing: border-box;
+    }
+    
+
+    header h1{
+        font-size: 50px;
+       
+
+    }
+
+    header span{
+        color: #ECB12F;
+    }
+
+    header p{
+        font-size: 25px;
+    }
+
+    .blue-btn img{
+        background-color: white;
+        border-radius: 5px;
+        padding: 0;
+        margin: 0;
+        height: 30px;
+        width: auto;
+    }
+    .btn-signin{
+        display:flex;
+        flex-direction: column;
+        align-items: flex-start;
+        padding:30px 0;
+        gap: 5px;
+        margin-top: 20px;
+    }
+
+    .blue-btn{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 12px 20px;
+        border-radius: 5px;
+        background-color: #4285F4;
+        color: white;
+        font-size: 16px;
+        border: none;
+        gap: 10px;
+        width: 80%;
+        height:50px ;
+    }
+
+    .email-button{
+        border-radius: 5px;
+        padding: 12px 20px;
+        font-size: 16px;
+        border: 1px solid #ccc;
+        background-color: white;
+        width: 80%;
+        height: 50px;
+    }
+
+    /* Image container (right side) */
+    .hero-img {
+        height: 400px;
+        width: 400px; /* Adjust size as needed */
+}
+
+    #trusted{
+        background-color: #F3EAE2;
+        margin: 0;
+        padding:10px 0 0 0;
+        text-align: center;
+        width: 100%;
+    }
+
+    #trusted div{
+        margin: 0;
+        padding:50px  0;
+        display: flex;
+        justify-content:space-evenly;*/
+        align-items: center;
+        gap: 10px; 
+        width: 100%; 
+        height: auto;
+    }
+    
+    #trusted div img{
+        width:150px;
+        height: auto;
+    }
+    #trusted h3 {
+       font-size: 1.6rem;
+       text-transform: uppercase;
+    }
+
+    #info{
+        text-align: center;
+        font-weight: bold; 
+        font-size: 25px;
+        word-wrap: break-word; 
+        overflow-wrap: break-word; /* Ensures text wraps properly */
+        white-space: normal; 
+        }
+    
+       #info h3, span{
+        font-weight: bold; 
+        font-size: 50px; 
+        color: #540B51; 
+        }
+    
+        #info ul{
+            display:flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            list-style-type: none;
+            text-align: left;
+            padding: 0;
+            margin: 0;
+            border: 0;
+            width: 100%; 
+        }
+    
+        #info ul li {
+            max-width: 70%; /* Restricts width to allow wrapping */
+            word-wrap: break-word; /* Breaks long words */
+            overflow-wrap: break-word; /* Ensures wrapping */
+            white-space: normal; /* Allows text to wrap */
+            text-align: left; /* Centers the text */
+            padding: 10px 50px;
+        }
+    
+        #free-sale{
+            background-color: #540B51;
+            display: flex;
+            flex-direction: column; /* Keep overall layout as column */
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+            margin: 0;
+            padding: 0 0 90px 0;
+        }
+    
+        #free-sale button{
+            width: 45%; 
+            height: 90px;
+            border-radius: 3px;
+            border: 1px solid white;
+            font-size: 30px;
+            text-transform: uppercase;
+            margin: 10px; 
+        }
+    
+        .free-btn{
+            color: #540B51;
+    
+        }
+    
+        .sales-btn{
+            background-color: #540B51;
+            color: white;
+        }
+    
+        #free-sale h3{
+            color: white;
+            font-size: 2rem;
+            margin-bottom: 20px;
+        }
+
+        footer ul{
+            font-weight: bold;
+            font-size: 16px;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-evenly;
+            padding: 50px 0 20px 0;
+        }
+    
+        footer ul li{
+        
+        padding: 10px 0;
+        margin-bottom: 15px; /* Adds space below each <li> */
+        word-spacing: 5px; /* Adds space between words */
+        list-style-type: none;
+        }
+    
+        footer a{
+            text-decoration: none;
+            color:#4285F4;
+        }
+    
+        .social-row{
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            padding:0 30px;
+            margin:0;
+            gap:50px;
+        }
+    
+        #foot-info{
+            color:grey;
+            text-align:center;
+            margin:0;
+            padding: 0 50px;
+            max-width:100%;
+        }
+        
+}
\ No newline at end of file
