update qr-code

lele-sf · lele-sf · commit 8701f5686ab0 · 2023-09-07T19:17:24.000-03:00
diff --git a/qr-code/index.html b/qr-code/index.html
@@ -6,22 +6,23 @@
 
   <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
   <link rel="stylesheet" href="style.css">
-  
   <title>Frontend Mentor | QR code component</title>
+
 </head>
 <body>
-  <main class="qr-code">
-    <div class="qr-code-image">
-      <img src="./images/image-qr-code.png" alt="QR code">
-    </div>
+
+<div class="container">
+  <div class="qr-code">
+    <img src="./images/image-qr-code.png" alt="QR code" class="qr-code-img">
     <div class="qr-code-text">
-      <h1>Improve your front-end skills by building projects</h1>
+      <h2>Improve your front-end skills by building projects</h2>
       <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
     </div>
-  </main>
-    <footer class="attribution">
-      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
-      Coded by <a href="https://github.com/lele-sf">lele-sf</a>.
-    </footer>
+  </div>
+</div>
+<footer class="attribution">
+  Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
+  Coded by <a href="https://github.com/lele-sf">lele-sf</a>.
+</footer>
 </body>
 </html>
diff --git a/qr-code/style.css b/qr-code/style.css
@@ -1,43 +1,45 @@
 @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');
 
-html {
+* {
+    margin: 0;
+    padding: 0;
     box-sizing: border-box;
 }
-*, *:before, *:after {
-    box-sizing: inherit;
-}
+
 body {
-    background-color: hsl(212, 45%, 89%);
     font-family: 'Outfit', sans-serif;
+    background-color: hsl(212, 45%, 89%);
+    min-height: 100vh;
     display: flex;
+    font-size: 15px;
     flex-direction: column;
     justify-content: center;
-    align-items: center;
-    min-height: 100vh;
+}
+
+.container {
+    max-width: 360px;
+    margin: 0 auto;
 }
 .qr-code {
     background-color: hsl(0, 0%, 100%);
-    border-radius: 20px;
-    padding: 20px;
-    max-width: 400px;
+    padding: 18px;
+    border-radius: 17px;
+    text-align: center;
+    margin: 0 1em;
 }
-.qr-code img {
+.qr-code-img {
     width: 100%;
-    max-width: 375px;
-    border-radius: 10px;
+    border-radius: 12px;
 }
 .qr-code-text {
-    text-align: center;
+    padding: 22px 10px;
 }
-.qr-code-text h1 {
+.qr-code-text h2 {
     color: hsl(218, 44%, 22%);
-    font-weight: 700;
-    font-size: 25px;
+    padding-bottom: 15px;
 }
 .qr-code-text p {
     color: hsl(220, 15%, 55%);
-    font-size: 15px;
-    font-weight: 400;
 }
 .attribution {
     text-align: center;
