Merge pull request #5 from Mayank-Garg7/Addition

Addition
Mayank-Garg7 · Jan 14, 2024 · e189810 · e189810
2 parents 9731690 + 117b17a
commit e189810
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 17 deletions.
diff --git a/index.html b/index.html
@@ -11,13 +11,11 @@
 </head>
 
 <body>
-    <div class="container">
-      <div class="box">
-        <img class="images" src="./images/image-qr-code.png" alt="here">
-        <h3>Improve your front-end skills by building projects</h3>
-        <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
-      </div>
-    </div>
+  <div class="box">
+    <img class="images" src="./images/image-qr-code.png" alt="here">
+    <h3>Improve your front-end skills by building projects</h3>
+    <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
+  </div>
 </body>
 
-</html>
+</html>
diff --git a/style.css b/style.css
@@ -4,18 +4,25 @@ body{
     text-align: center;
     background-color: hsl(230, 63%, 87%);
 }
-.box{
+
+.box {
     font-family: 'Outfit', sans-serif;
-    margin:20px;
-    width: 360px;   
-    border: 1px solid white; 
+    margin: 20px;
+    width: 25%;
+    border: 1px solid white;
     border-radius: 20px;
-    padding: 15px;
+    padding: 20px;
     background-color: aliceblue;
 }
 
-.images{
+.images {
     border-radius: 20px;
-    height: 350px;
-    width: 350px;
-}
+    max-width: 100%;
+    height: auto;
+}
+
+@media (min-width: 768px) {
+    .box {
+        max-width: 768px;
+    }
+}