refactoring project, separate styles into components, update readme file

DalaScript · DalaScript · commit 835ccbf8368d · 2025-08-25T10:23:02.000+04:00
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # QR Code Component | Frontend Mentor
 
-**Part 1**
+**Challenge 1**
 
 This is a solution to the [QR code component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
 
@@ -11,12 +11,9 @@ This is a solution to the [QR code component challenge on Frontend Mentor](https
 - [🔎 Overview](#-overview)
   - [📸 Screenshot](#-screenshot)
   - [🔗 Links](#-links)
-- [🧠 My process](#-my-process)
   - [🛠️ Built with](#️-built-with)
-  - [🎓 What I learned](#-what-i-learned)
-  - [📈 Continued development](#-continued-development)
+- [🧠 My process](#-my-process)
   - [🔜 Next Project](#-next-project)
-  - [🗃️ Useful resources](#️-useful-resources)
 - [👤 Author](#-author)
   - [🌐 Connect with Me](#-connect-with-me)
   - [💻 Coding Profiles](#-coding-profiles)
@@ -31,12 +28,8 @@ This is a solution to the [QR code component challenge on Frontend Mentor](https
 
 ### 🔗 Links
 
-  - [🔴 Live Demo](https://github.com/DalaScript/qr-code-component)
-  - [🗂️ GitHub Repository](https://DalaScript.github.io/qr-code-component/)
-
----
-
-## 🧠 My process
+  - [🔴 Live Demo](https://DalaScript.github.io/qr-code-component/)
+  - [🗂️ GitHub Repository](https://github.com/DalaScript/qr-code-component)
 
 ### 🛠️ Built with
 
@@ -45,33 +38,14 @@ This is a solution to the [QR code component challenge on Frontend Mentor](https
   - Flexbox
   - Mobile-first workflow
   - bem - [Block Element Modifier](https://getbem.com/introduction/)
-  - scss - [Sassy Cascading Style Sheets](https://sass-lang.com/documentation/at-rules/control/for/)
-
-### 🎓 What I learned
 
-  - Actually, nothing special, It was pretty easy for me.
-
-  > 🚀 For me, this challenge was more about **practice** and gaining additional **experience**,  
-  > rather than learning something entirely new.  
-  >  
-  > 👨‍💻 Since I’m not a beginner and already familiar with these technologies,  
-  > I approached it with confidence — and still, I truly **enjoyed working on it**.  
-  >  
-  > 🎯 Overall, I consider this a very **valuable and enjoyable experience**.
-
-### 📈 Continued development
+---
 
-  - First I want to finish the javascript course I'm taking on freecodecamp, I'm also going through the learning path on Frontendmentor, and after that I want to focus more on React, Next.js and Node.js.
+## 🧠 My process
 
 ### 🔜 Next Project
 
-  - Recipe Page | *Part 2* → [View Repository](https://github.com/DalaScript/recipe-page)
-
-### 🗃️ Useful resources
-
-  - [ChatGPT](https://chatgpt.com/) - He is my hero, if I need something fast, if I can't understand something, or if I can't find it on the internet, I always ask him.
-  - [W3Schools](https://www.w3schools.com/) - This is my favorite documentation platform I've been using since I started programming, it's the best explained resource.
-  - [YouTube](https://www.youtube.com/) - I'm always looking for news and listening to other developers, sharing their experiences so that I can see many different solutions to a problem.
+  - Recipe Page | *Challenge 2* → [View Repository](https://github.com/DalaScript/recipe-page)
 
 ---
 
diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
diff --git a/assets/styles/base/reset.css b/assets/styles/base/reset.css
@@ -0,0 +1,7 @@
+/* || Reset
+ *************************/
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
diff --git a/assets/styles/base/variables.css b/assets/styles/base/variables.css
@@ -0,0 +1,30 @@
+/* || Fonts Imports ('Outfit')
+ *************************/
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
+
+/* || Global Variables
+ *************************/
+:root {
+    /* || Colors
+     *************************/
+    --white: #ffffff;
+    --light-gray: #d6e2f0;
+    --grayish-blue: #7b879d;
+    --dark-blue: #1f3251;
+
+    /* || Fonts
+     *************************/
+    --outfit: "Outfit", sans-serif;
+
+    /* || Spacing
+     *************************/
+    --space-xs: 0.5rem;
+    --space-sm: 1rem;
+    --space-md: 1.5rem;
+    --space-lg: 2.5rem;
+
+    /* || Font sizes
+     *************************/
+    --fs-sm: 0.9375rem;
+    --fs-md: 1.375rem;
+}
diff --git a/assets/styles/components/card.css b/assets/styles/components/card.css
@@ -0,0 +1,39 @@
+/* || Card
+ *************************/
+.card {
+    padding: var(--space-sm) var(--space-sm) var(--space-lg);
+    max-width: 320px;
+    border-radius: 20px;
+
+    background-color: var(--white);
+    box-shadow: 0px 25px 25px #0000000c;
+}
+
+.card__img {
+    width: 100%;
+    height: auto;
+    border-radius: 10px;
+    display: block;
+}
+
+.card__content {
+    margin-top: var(--space-md);
+    padding: 0 var(--space-sm);
+    text-align: center;
+}
+
+.card__title {
+    font-size: var(--fs-md);
+    color: var(--dark-blue);
+}
+
+.card__description {
+    margin-top: var(--space-sm);
+
+    font-size: var(--fs-sm);
+    font-weight: 400;
+    letter-spacing: 0.1875px;
+    line-height: 1.1875rem;
+
+    color: var(--grayish-blue);
+}
diff --git a/assets/styles/layout/page-layout.css b/assets/styles/layout/page-layout.css
@@ -0,0 +1,16 @@
+/* || Body
+ *************************/
+body {
+    background-color: var(--light-gray);
+    font-family: var(--outfit);
+}
+
+/* || Main
+ *************************/
+main {
+    height: 100vh;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
diff --git a/assets/styles/styles.css b/assets/styles/styles.css
diff --git a/index.html b/index.html
@@ -3,28 +3,30 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
     <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
+    <title>QR Code Component | Frontend Mentor</title>
 
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap" rel="stylesheet">
-
-    <title>QR code component | Frontend Mentor</title>
-    <link rel="stylesheet" href="./assets/styles/styles.css">
+    <!-- Styles -->
+    <!-- Base -->
+    <link rel="stylesheet" href="./assets/styles/base/variables.css" />
+    <link rel="stylesheet" href="./assets/styles/base/reset.css" />
+    <!-- Page Layout -->
+    <link rel="stylesheet" href="./assets/styles/layout/page-layout.css">
+    <!-- Components -->
+    <link rel="stylesheet" href="./assets/styles/components/card.css" />
 </head>
 <body>
     <main>
         <article class="card">
-            <img class="card__img" src="./assets/images/image-qr-code.png" width="288" height="288" alt="qr code">
-            <section class="card__content">
-                <h2 class="card__title">
+            <img class="card__img" src="./assets/images/image-qr-code.png" width="288" height="288" alt="QR code" /|>
+            <div class="card__content">
+                <h1 class="card__title">
                     Improve your front-end skills by building projects
-                </h2>
-                <p class="card__subtitle">
+                </h1>
+                <p class="card__description">
                     Scan the QR code to visit Frontend Mentor and take your coding skills to the next level
                 </p>
-            </section>
+            </div>
         </article>
     </main>
 </body>
