Style of the page is completed update index.html and style.css

SergioZF09 · Aug 28, 2024 · 8429534 · 8429534
1 parent 6b9a922
commit 8429534
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
 
   <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
 
-  <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="./styles/style.css">
 
   <title>Frontend Mentor | QR code component</title>
 
@@ -17,12 +17,12 @@
 
   <main class="container">
     <section class="container__section__qr">
-      <img src="./images/image-qr-code.png" alt="Image QR Code">
+      <img class="container__section__qr__imageQr" src="./images/image-qr-code.png" alt="Image QR Code">
     </section>
     <section class="container__section__info">
-      <h1>Improve your front-end skills by building projects</h1>
+      <h1 class="container__section__info__title">Improve your front-end skills by building projects</h1>
 
-      <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
+      <p class="container__section__info__paragraph">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
     </section>
   </main>
 

diff --git a/styles/style.css b/styles/style.css
@@ -1,7 +1,10 @@
 @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
 
 :root{
-    --color-light-blue: hsl(212, 45%, 89%);
+    --color-white: hsl(0, 0%, 100%);
+    --color-state-300: hsl(212, 45%, 89%);
+    --color-state-500: hsl(216, 15%, 48%);
+    --color-state-900: hsl(218, 44%, 22%);
 }
 
 * {
@@ -11,12 +14,49 @@
 }
 
 body{
-    color: var(--color-light-blue);
+    background: var(--color-state-300);
+    font-family: 'Outfit';
 }
 
-.attribution {
-    font-size: 11px;
+.container{
+    width: 320px;
+    background: var(--color-white);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
     text-align: center;
+    margin: 230px auto;
+    padding: 16px 16px 40px;
+    border-radius: 20px;
+}
+
+.container__section__qr__imageQr{
+    width: 288px;
+    height: 288px;
+    margin-bottom: 24px;
+    border-radius: 10px;
+}
+
+.container__section__info__title{
+    color: var(--color-state-900);
+    font-size: 22px;
+    font-weight: 700;
+    margin-bottom: 16px;
+}
+
+.container__section__info__paragraph{
+    color: var(--color-state-500);
+    font-size: 15px;
+    font-weight: 400;
+    letter-spacing: 0.2px;
+}
+
+.attribution {
+    font-size: 18px;
+    text-align: center; 
+    margin-top: auto;
+    padding: 20px;
 }
 
 .attribution a {