From e2e6a31846c9c573e49575f0c9f6b1ca108bfa6c Mon Sep 17 00:00:00 2001
From: Arthur Jorge <arthur.sjorge@gmail.com>
Date: Wed, 19 Nov 2025 08:30:29 +0100
Subject: [PATCH] flexbox lab

---
 starter_code/index.html            | 10 +++---
 starter_code/stylesheets/style.css | 57 ++++++++++++++++++++++++++++++
 2 files changed, 62 insertions(+), 5 deletions(-)

diff --git a/starter_code/index.html b/starter_code/index.html
index 2f593610f..391b60c76 100644
--- a/starter_code/index.html
+++ b/starter_code/index.html
@@ -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>
@@ -38,7 +38,7 @@
       </ul>
     </div>
 
-    <div>
+    <div class="button-container">
       <button>
         <img src="./images/icon-search.png" alt="Search icon">
       </button>
@@ -64,13 +64,13 @@
     <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>
+      <div class="sign-up">
         <button>Sign up with email</button>
 
         <button>
-          <img src="./images/logo-google.png" alt="Google logo" />
+          <img src="./images/logo-google.png" alt="Google logo" id="big-image" />
           <span>Sign up with Google</span>
         </button>
       </div>
diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css
index 59f4a7798..ce34c4237 100644
--- a/starter_code/stylesheets/style.css
+++ b/starter_code/stylesheets/style.css
@@ -8,3 +8,60 @@ paragraph yellow: #ECB12F
 links blue: #2E71A6
 footer links grey: #454245
 */
+*  {
+    box-sizing: border-box;
+}
+
+body {
+    background-color: #540B51;
+}
+
+h1{
+    display:flex;
+    text-align: center;
+    color:white
+    font-size: 50px;
+    
+}
+header p{
+    text-align: center;
+    color: white;
+}
+header span{
+   color:yellow;
+
+  }
+div .sign-up{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 50px;
+
+}
+
+div #big-image{
+ width: 50px;           /* Make image take full width of button */
+    height: 100%;          /* Make image take full height of button */
+    object-fit: cover;
+}
+.logos img{
+    height: 50px;
+}
+.button-container button {
+    background-color: #540B51;
+}
+@media screen and (max-width: 768px) {
+  .Slack-Logo {
+    height: 50px;
+  }
+  ul {
+    display: none;
+  }
+  nav {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  
+}
\ No newline at end of file