flexbox lab

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>

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;
+  }
+
+
+}