updates

ehsanidev · ehsanidev · commit 5bcdb4512137 · 2025-03-07T15:18:19.000+03:30
diff --git a/index.html b/index.html
@@ -14,10 +14,10 @@
   <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap" rel="stylesheet">
 </head>
 <body>
-  <main class="qr-container">
-    <div id="qr-image"><img src="./images/image-qr-code.png" alt="QR"></div>
-    <h1 id="qr-heading-text" class="outfit-bold">Improve your front-end</br>skills by building projects</h1>
-    <p id="qr-body-text" class="outfit-regular">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
+  <main class="box-shadow">
+    <div><img src="./images/image-qr-code.png" alt="QR"></div>
+    <h1>Improve your front-end</br>skills by building projects</h1>
+    <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
   </main>
 </body>
 </html>
diff --git a/style.css b/style.css
@@ -1,19 +1,32 @@
 :root{
-    --qr-bg-color:hsl(0, 0%, 100%);
     --background: hsl(212, 45%, 89%);
-    --qr-body-text-color: hsl(216, 15%, 48%);
-    --qr-heading-text-color: hsl(218, 44%, 22%);
+    --qr-bg-color:hsl(0, 0%, 100%);
+    --qr-body-color: hsl(216, 15%, 48%);
+    --qr-heading-color: hsl(218, 44%, 22%);
 
     --paragraph-font-size: 15px;
+    --outfit-regular: 400;
+    --outfit-bold: 700;
 
     --radius: 12px;
 }
+
+.box-shadow{
+    -webkit-box-shadow: 2px 20px 57px -4px rgba(31,50,81,0.29);
+    -moz-box-shadow: 2px 20px 57px -4px rgba(31,50,81,0.29);
+    box-shadow: 2px 20px 57px -4px rgba(31,50,81,0.29);
+}
+
 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }
+
 body {
+    font-family: "Outfit", sans-serif;
+    font-optical-sizing: auto;
+    font-style: normal;
     min-height: 100vh;
     background: var(--background);
     display: flex;
@@ -22,49 +35,37 @@ body {
     align-items: center;
 }
 
-.outfit-regular,
-.outfit-bold{
-    font-family: "Outfit", sans-serif;
-    font-optical-sizing: auto;
-    font-style: normal;
-}
-
-.outfit-regular {
-    font-weight: 400;
-}
-.outfit-bold {
-    font-weight: 700;
-}
-
-.qr-container{
+main{
     display: flex;
     flex-direction: column;
-   place-items: center;
-   text-align: center;
-   background-color: var(--qr-bg-color);
-   border-radius: 15px;
-   padding: 15px 15px 25px 15px;
-   gap: 15px;
-   width: 18rem;
+    place-items: center;
+    text-align: center;
+    background-color: var(--qr-bg-color);
+    border-radius: 15px;
+    padding: 15px 15px 25px 15px;
+    gap: 15px;
+    width: 18rem;
 }
 
-#qr-image{
-    display: block;
+div, div>img, h1, p{ display: block; }
+
+div{
     max-width:100%;
     border-radius: var(--radius);
     & img{
         width:100%;
-        display: block;
         border-radius: var(--radius);
     }
 }
-#qr-heading-text{
-    display: block;
+
+h1{
     font-size: larger;
-    color: var(--qr-heading-text-color);
+    font-weight: var(--outfit-bold);
+    color: var(--qr-heading-color);
 }
-#qr-body-text{
-    display: block;
+
+p{
     font-size: var(--paragraph-font-size);
-    color: var(--qr-body-text-color);
+    font-weight: var(--outfit-regular);
+    color: var(--qr-body-color);
 }
