Skip to content

Commit f355481

Browse files
RanitManikRanitManik
committed
added challenge 05
1 parent e8c7004 commit f355481

10 files changed

+201
-0
lines changed

‎FrontendMentor05—QR code component/README.md

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
# Frontend Mentor - QR code component solution
2+
3+
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.
4+
5+
## Table of contents
6+
7+
- [Overview](#overview)
8+
- [The challenge](#the-challenge)
9+
- [Screenshot](#screenshot)
10+
- [Links](#links)
11+
- [My process](#my-process)
12+
- [Built with](#built-with)
13+
- [What I learned](#what-i-learned)
14+
- [Code Highlights](#code-highlights)
15+
- [Useful resources](#Useful-resources)
16+
- [Author](#author)
17+
- [Acknowledgments](#acknowledgments)
18+
19+
## Overview
20+
21+
### The challenge
22+
23+
24+
Your challenge is to build out this QR code component and get it looking as close to the design as possible.
25+
26+
You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
27+
28+
### Screenshot
29+
30+
![Screen Shot.png](Screen%20Shot.png)
31+
32+
### Links
33+
34+
- Solution
35+
URL: [Add solution URL here](https://www.frontendmentor.io/solutions/nft-preview-card-component-using-html-css-Z0bX2RTQ2t)
36+
- Live Site
37+
URL: [Add live site URL here](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor04%E2%80%94nft-preview-card-component/index.html)
38+
- codepen: [click here to see the codepen](https://codepen.io/RANIT-MANIK/pen/vYPNLWJ)
39+
40+
## My process
41+
42+
### Built with
43+
44+
- Semantic HTML5 markup
45+
- CSS custom properties
46+
- CSS Grid
47+
- Mobile-first workflow
48+
49+
### What I learned
50+
51+
## Code Highlights
52+
53+
54+
### Useful resources
55+
56+
57+
## Author
58+
59+
- Website - [Ranit Manik](https://ranitmanik.github.io/Portfolio-1.0)
60+
- Frontend Mentor - [@RanitManik](https://www.frontendmentor.io/profile/RanitManik)
61+
- LinkedIn - [@ranit-manik](https://www.linkedin.com/in/ranit-manik/)
62+
63+
## Acknowledgments
64+
65+
I would like to express my gratitude to the creators of the Frontend Mentor platform for providing an engaging and
66+
practical challenge in the form of the Blog Preview Card. The hands-on experience gained through tackling this project
67+
has significantly contributed to my growth as a web developer.
68+
69+
I want to acknowledge the supportive community at Frontend Mentor. The platform's collaborative environment and
70+
constructive feedback from peers have been invaluable in refining my skills and pushing me to strive for excellence.
71+
72+
This project has been a rewarding learning experience, and I look forward to applying these insights in future
73+
endeavors. Thank you to everyone who has played a part in my journey of continuous improvement.
74+
75+
Best regards,<br>
76+
Ranit Manik
77+
78+

‎FrontendMentor05—QR code component/Screen Shot.png

317 KB
Loading

‎FrontendMentor05—QR code component/design/desktop-design.jpg

25.8 KB
Loading

‎FrontendMentor05—QR code component/design/desktop-preview.jpg

33.1 KB
Loading

‎FrontendMentor05—QR code component/design/mobile-design.jpg

27 KB
Loading

‎FrontendMentor05—QR code component/images/favicon-32x32.png

1.04 KB
Loading

‎FrontendMentor05—QR code component/images/image-qr-code.png

5.1 KB
Loading

‎FrontendMentor05—QR code component/index.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
7+
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
8+
9+
<title>Frontend Mentor | QR code component</title>
10+
<link rel="stylesheet" href="style.css">
11+
</head>
12+
<body class="grid-flow">
13+
<main class="grid-flow">
14+
<img class="qr-img" src="images/image-qr-code.png" alt="QR code image">
15+
<h1>Improve your front-end skills by building projects</h1>
16+
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
17+
</main>
18+
</body>
19+
</html>

‎FrontendMentor05—QR code component/style-guide.md

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# Front-end Style Guide
2+
3+
## Layout
4+
5+
The designs were created to the following widths:
6+
7+
- Mobile: 375px
8+
- Desktop: 1440px
9+
10+
## Colors
11+
12+
- White: hsl(0, 0%, 100%)
13+
- Light gray: hsl(212, 45%, 89%)
14+
- Grayish blue: hsl(220, 15%, 55%)
15+
- Dark blue: hsl(218, 44%, 22%)
16+
17+
## Typography
18+
19+
### Body Copy
20+
21+
- Font size (paragraph): 15px
22+
23+
### Font
24+
25+
- Family: [Outfit](https://fonts.google.com/specimen/Outfit)
26+
- Weights: 400, 700

‎FrontendMentor05—QR code component/style.css

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
/*------------------------------------ IMPORT ------------------------------------*/
2+
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600&display=swap');
3+
4+
/*------------------------------------ ROOT CSS ------------------------------------*/
5+
:root {
6+
/* colors */
7+
--White: hsl(0, 0%, 100%);
8+
--Light-gray: hsl(212, 45%, 89%);
9+
--Grayish-blue: hsl(220, 15%, 55%);
10+
--Dark-blue: hsl(218, 44%, 22%);
11+
12+
/*font-size*/
13+
--fs-1-paragraph: 0.9375rem;
14+
--fs-2-heading-1: 1.5rem;
15+
16+
/*font-family*/
17+
--ff-1: 'Outfit', sans-serif;
18+
19+
/*font-weight*/
20+
--fw-1-paragraph: 400;
21+
--fw-2-heading: 600;
22+
23+
}
24+
25+
26+
/*------------------------------------ GENERAL CSS ------------------------------------*/
27+
* {
28+
padding: 0;
29+
margin: 0;
30+
}
31+
32+
body {
33+
background-color: var(--Light-gray);
34+
min-height: 100vh;
35+
color: var(--Grayish-blue);
36+
font-family: var(--ff-1);
37+
font-weight: var(--fw-1-paragraph);
38+
place-items: center;
39+
}
40+
41+
.grid-flow {
42+
display: grid;
43+
}
44+
45+
/*------------------------------------ CUSTOM CSS ------------------------------------*/
46+
main {
47+
max-width: 20rem;
48+
margin: 1rem;
49+
background-color: var(--White);
50+
padding-inline: 1rem;
51+
padding-block: 1rem 3rem;
52+
gap: 1rem;
53+
text-align: center;
54+
box-shadow: 0 0 100px var(--Grayish-blue);
55+
}
56+
57+
.qr-img {
58+
width: 100%;
59+
}
60+
61+
main {
62+
border-radius: 1.5rem;
63+
}
64+
65+
.qr-img {
66+
border-radius: 1rem;
67+
}
68+
69+
h1 {
70+
font-size: var(--fs-2-heading-1);
71+
font-weight: var(--fw-2-heading);
72+
color: var(--Dark-blue);
73+
}
74+
75+
h1, p {
76+
margin-inline: 1rem;
77+
}
78+

0 commit comments

Comments
 (0)