l made it reponsive

Author: nohetekelmariyam

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-    "liveServer.settings.port": 5501
-}
+  "liveServer.settings.port": 5502
+}

css/style.css

@@ -9,18 +9,20 @@ body {
 /*Header*/
 .header {
   background-color: rgb(248, 248, 248);
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-start;
 }
 
 .karam-logo {
-  width: 30px;
-  margin-left: 4em;
+  width: 3%;
+  margin-top: 0.5em;
 }
 
-.nav {
-  display: flex;
-  float: right;
-  margin-right: 3em;
+#cheakbox-menu {
+  display: none;
 }
+
 #nav-link {
   color: black;
 }
@@ -32,19 +34,23 @@ body {
 }
 
 .nav-item {
-  display: inline;
+  display: inline-block;
   list-style-type: none;
 }
 
 .nav-link:hover {
   color: orangered;
 }
 
+.humburger-menu {
+  display: none;
+}
 /*hero*/
 .hero {
   text-align: center;
-  padding: 12em;
+  padding: 10em;
   background-size: cover;
+  background-position: center;
   background-image: url("/img/first-background.jpg");
 }
 
@@ -53,8 +59,7 @@ body {
 }
 
 .hero p {
-  font-size: 20px;
-  margin-top: 0px;
+  font-size: 2rem;
   color: white;
 }
 
@@ -75,57 +80,50 @@ body {
 
 /*icon*/
 .section {
-  margin-top: 8em;
+  margin-top: 1em;
 }
 
 .section-p {
-  font-size: 3em;
+  font-size: 3rem;
   color: rgb(69, 67, 67);
   text-align: center;
 }
 
 .icon-imag {
-  width: 45%;
+  width: 40%;
   padding: 1em;
 }
 
 .icon-discribtion {
-  font-size: 20px;
+  font-size: 1rem;
 }
 
 .section-icon {
   display: flex;
   width: 90%;
-  justify-content: center;
-  margin-left: 8em;
-  padding-bottom: 6em;
-}
-
-.section-icon div {
-  padding: 1em 3em;
-}
-
-.homepage-img {
-  max-width: 100%;
-  max-height: 100%;
+  justify-content: space-around;
+  padding-bottom: 4em;
+  margin-left: 5em;
 }
 
 .article {
   display: flex;
   align-items: center;
   background-color: rgb(245, 220, 224);
+  width: 100%;
 }
 
+.homepage-img {
+  width: 50%;
+}
+.article-p {
+  text-align: center;
+  padding-left: 1em;
+}
 .article-quote {
-  font-size: 30px;
+  font-size: 3rem;
   font-style: italic;
-  padding-left: 2.5em;
   color: rgb(31, 31, 31);
-  text-align: center;
-}
-
-.article-button {
-  margin-left: 12em;
 }
 
 .article-button:hover {
@@ -158,9 +156,6 @@ footer p {
 /*section*/
 
 /*Nameiput*/
-#karam-logo {
-  margin-left: 8em;
-}
 
 .form-name {
   padding: 0.5em;
@@ -199,7 +194,7 @@ footer p {
 }
 
 .colorselct-p {
-  margin-bottom: 7px;
+  margin-bottom: 1em;
   color: rgb(118, 118, 118);
 }
 
@@ -216,18 +211,18 @@ footer p {
 }
 
 .store-img {
-  width: 500px;
-  height: 650px;
-  margin-left: 50px;
+  width: 100%;
+  margin: 0%;
 }
 
 .img-section {
-  margin-left: 12em;
+  width: 40%;
 }
 
 .section-flex {
   display: flex;
-  margin-left: 135px;
+  justify-content: right;
+  margin-left: 1.5em;
   border-bottom: 1.2px solid rgb(212, 201, 201);
 }
 #placeorder-button {
@@ -251,6 +246,79 @@ footer p {
 .cheakbox {
   padding: 60px;
 }
+
+@media (max-width: 590px) {
+  .header {
+    justify-content: space-between;
+  }
+  .karam-logo {
+    padding: 1em 0 0 2em;
+  }
+
+  .nav-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+  }
+  .humburger-menu {
+    display: block;
+    font-size: 2rem;
+    cursor: pointer;
+    padding: 0 1em 0 0;
+  }
+  .humburger-menu:hover {
+    color: orangered;
+  }
+  .label-menu {
+    padding: 1em 1em;
+  }
+  #cheakbox-menu {
+    display: none;
+  }
+  #cheakbox-menu:checked ~ .nav-list {
+    display: none;
+  }
+  .section {
+  }
+  .section-icon {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-left: 0;
+  }
+  .section-p {
+    font-size: 2rem;
+  }
+  .img-div {
+    display: flex;
+    flex-direction: column;
+  }
+  .icon-imag {
+    width: 30%;
+  }
+  .article-quote {
+    font-size: 1rem;
+  }
+  /* store */
+  .section-flex {
+    display: flex;
+    /* margin-left: 1.5em; */
+    border-bottom: 1.2px solid rgb(212, 201, 201);
+    align-content: flex-end;
+    flex-wrap: wrap;
+    flex-direction: column;
+  }
+  .img-section {
+    width: 100%;
+    height: auto;
+  }
+  .store-img {
+    width: 100%;
+    margin: 0;
+  }
+}
+
 /**
  * Add your custom styles below
  * 

index.html

@@ -12,7 +12,14 @@
 <body>
 <header class="header">
     <img class="karam-logo" src="img/karma-logo.svg" alt="picture of karam logo">
+
     <nav class="nav">
+
+       
+         <label class="label-menu" for="cheakbox-menu">
+          <span class="humburger-menu"> &#9776; </span>
+         </label>
+         <input type="checkbox" id="cheakbox-menu" > 
         <ul class="nav-list">
 
          <li class="nav-item">
@@ -34,7 +41,7 @@
             <a class="nav-link" href="#">Login</a> </li>     
         </ul>
     </nav>
-   
+    
 </header>
 
 <main>
@@ -52,33 +59,30 @@ <h1>Introducing Karma</h1>
 <p class="section-p">Everyone needs a little Karma.</p> 
 
 <div class="section-icon">
-<div> 
+<div class="img-div"> 
  <img class="icon-imag" src="img/icon-devices.svg" alt="device picture">
- <p class="icon-discribtion">internet for all devices</p>
+ <p class="icon-discribtion">Internet for all devices</p>
 </div> 
 
-<div>
+<div class="img-div">
     <img class="icon-imag" src="img/icon-coffee.svg" alt="icon coffee picture">
     <p class="icon-discribtion">Boost your productivity</p>
 </div>
 
-<div>
+<div class="img-div">
    <img  class="icon-imag" src="img/icon-refill.svg" alt="icon coffee picture">
    <p class="icon-discribtion">Pay as You Go </p>
 </div>
 </div>
 
 <article class="article">
-  <div class="article-img">
+   
     <img class="homepage-img" src="level-2/homepage-feature.png" alt="">
-  </div>
+    
 
   <div class="article-p">
     <p class="article-quote"> <spam style="color: rgb(224, 69, 13); ">&#8220;</spam> Whenever i am, i just don't<br> worry about my connection</br> 
     anymore! <spam style="color: rgb(224, 69, 13); ">&#8221;</spam></p> 
-    
-    
-    
     <button class="article-button">Get Karma today</button>
 
   </div>