handing over again

Author: mk3346

starter_code/index.html

@@ -39,12 +39,12 @@
         </ul>
       </div>
 
-      <div>
-        <button>
+      <div class="navmenu-container">
+        <button class="navmenu-search">
           <img src="./images/icon-search.png" alt="Search icon" />
         </button>
 
-        <button>
+        <button class="navmenu-sandwich">
           <img src="./images/icon-menu.png" alt="Menu icon" />
         </button>
 
@@ -82,7 +82,7 @@ <h1>Great teamwork starts with a digital HQ</h1>
         </div>
       </div>
 
-      <div>
+      <div class="container-hero">
         <img
           class="hero"
           src="./images/hero-product-ui.png"
@@ -170,7 +170,7 @@ <h2>Choose how you want to work</h2>
 
         <div>
           <img
-            class="img-benefits"
+            class="img-benefits img-benefits-right"
             src="./images/flexibility-mobile.png"
             alt="flexibility"
           />
@@ -186,7 +186,7 @@ <h2>Choose how you want to work</h2>
           />
         </div>
 
-        <div>
+        <div class="benefits-text">
           <h2>Move faster with your tools in one place</h2>
           <p>
             With your other work apps connected to Slack, you can work faster by

starter_code/stylesheets/style.css

@@ -12,7 +12,6 @@ footer links grey: #454245
 body {
   margin: 0;
   padding: 0;
-  background: #540b51;
   font-family: Arial, Helvetica, sans-serif;
 }
 
@@ -23,9 +22,31 @@ body {
   height: 100px;
 }
 
+.navmenu-container {
+  width: 200px;
+  text-align: right
+  align-items: center;
+  justify-content: center;
+}
+
+.navmenu-search {
+  width: 50px;
+  display: inline-block;
+  background:#540b51; 
+  border: none;
+  padding: 2em;
+}
+
+.navmenu-sandwich {
+  width: 50px;
+  display: inline-block;
+  background:#540b51; 
+  border: none;
+}
+
 .logo {
   width: auto;
-  height: 50px;
+  height: 20px;
   padding: 2rem;
 }
 
@@ -90,9 +111,16 @@ header {
   color: #ecb12f;
 }
 
+.container-hero {
+  width: auto;
+  overflow: hidden;
+}
+
 .hero {
   width: auto;
   height: 350px;
+  object-fit: cover;
+  text-align: right;
 }
 
 .logo-container {
@@ -125,6 +153,10 @@ header {
   width: 95%;
 }
 
+.img-benefits-right {
+  text-align: right;
+}
+
 .benefits-text {
   margin: 16px;
 }
@@ -140,3 +172,9 @@ header {
 .facts {
   background-color: white;
 }
+
+@media (max-width: 767px) {
+  .navbar a{
+    visibility: hidden;
+  }
+}