completed

gazalthecoder · gazalthecoder · commit d21ae19036f6 · 2023-05-23T20:36:46.000+05:30
diff --git a/index.html b/index.html
@@ -13,13 +13,17 @@
     .attribution { font-size: 11px; text-align: center; }
     .attribution a { color: hsl(228, 45%, 44%); }
   </style>
+
+  <link rel="stylesheet" href="style.css">
 </head>
 <body>
-
-  Improve your front-end skills by building projects
-
-  Scan the QR code to visit Frontend Mentor and take your coding skills to the next level
   
+  <div class="card">
+      <img src="C:\Users\Saurabh\code\Frontend-Mentor\qr-code-component\images\image-qr-code.png" alt="" >
+      <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>
+   
   <div class="attribution">
     Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
     Coded by <a href="#">Your Name Here</a>.
diff --git a/style.css b/style.css
@@ -0,0 +1,50 @@
+@import url('https://fonts.googleapis.com/css2?family=Outfit&display=swap');
+
+:root {
+    /* Colors */
+    --White : hsl(0, 0%, 100%) ;
+    --Light_gray : hsl(212, 45%, 89%) ;
+    --Grayish_blue : hsl(220, 15%, 55%) ;
+    --Dark_blue : hsl(218, 44%, 22%) ;
+}
+
+html, body {
+    width : 100% ;
+    height : 100% ;
+    margin : 0 ;
+    padding : 0 ;
+    text-align: center;
+    font-family: 'Outfit', sans-serif;
+    font-size : 15px ;
+}
+
+body {
+    background-color: var(--Light_gray);
+    display : flex ;
+    flex-direction: column ;
+    align-items : center ;
+    justify-content : center ;
+    position : relative ;
+}
+
+.card {
+    background-color: var(--White);
+    max-width : 300px ;
+    padding : 20px ;
+    border-radius: 15px ;
+    align-self: center ;
+}
+
+.card img {
+    width : 100% ;
+    border-radius : 15px ;
+}
+
+.card p {
+    color : var(--Grayish_blue) ;
+}
+
+.attribution {
+    position : absolute ;
+    bottom : 0 ;
+}
