Skip to content

Commit 77a53a8

Browse files
Jeanclaude09-devJeanclaude09-dev
authored
Add files via upload
1 parent 580f452 commit 77a53a8

File tree

8 files changed

+159
-1
lines changed

8 files changed

+159
-1
lines changed

‎README.md‎

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,40 @@
1-
# QR-Code-Component
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+
- [Screenshot](#screenshot)
8+
- [Built with](#built-with)
9+
- [What I learned](#what-i-learned)
10+
- [Author](#author)
11+
12+
### Screenshot
13+
14+
![](screenshot.png)
15+
16+
- Mobile-first workflow
17+
18+
![](screenshot_mobile.png)
19+
20+
### Built with
21+
22+
- Semantic HTML5 markup
23+
- CSS custom properties
24+
- Flexbox
25+
26+
### What I learned
27+
28+
```css
29+
@media() {
30+
}
31+
```
32+
33+
### Continued development
34+
35+
I would like to focus more on media query and responsiveness and typography
36+
37+
## Author
38+
39+
- Frontend Mentor - [@Jeanclaude09-dev](https://www.frontendmentor.io/profile/Jeanclaude09-dev)
40+
- instagram - [@iamje_nclaude](https://www.instagram.com/iamje_nclaude)

‎design/desktop-design.jpg‎

24.1 KB
Loading

‎design/mobile-design.jpg‎

24.5 KB
Loading

‎images/favicon-32x32.png‎

1.04 KB
Loading

‎images/image-qr-code.png‎

5.1 KB
Loading

‎index.html‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
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+
<!-- displays site properly based on user's device -->
7+
<link rel="preconnect" href="https://fonts.googleapis.com" />
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9+
<link
10+
href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
11+
rel="stylesheet"
12+
/>
13+
14+
<link
15+
rel="icon"
16+
type="image/png"
17+
sizes="32x32"
18+
href="./images/favicon-32x32.png"
19+
/>
20+
21+
<title>Frontend Mentor | QR code component</title>
22+
23+
<style>
24+
body {
25+
font-size: 15px;
26+
}
27+
p {
28+
font-family: Outfit, arial, sans-serif;
29+
}
30+
h1 {
31+
font-family: Outfit, sans-serif;
32+
font-weight: 700;
33+
font-size: 25px;
34+
margin: 0;
35+
}
36+
37+
.container {
38+
display: flex;
39+
flex-direction: column;
40+
align-items: center;
41+
justify-content: center;
42+
height: 100vh;
43+
background-color: rgba(214, 226, 240, 1);
44+
}
45+
46+
.card {
47+
display: flex;
48+
flex-direction: column;
49+
align-items: center;
50+
justify-content: center;
51+
text-align: center;
52+
width: 300px;
53+
padding: 20px;
54+
border-radius: 10px;
55+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
56+
background-color: white;
57+
}
58+
.card img {
59+
width: 100%;
60+
height: auto;
61+
border-radius: 10px;
62+
margin-bottom: 5px;
63+
}
64+
.card h1 {
65+
font-weight: 700;
66+
}
67+
@media (max-width: 375px) {
68+
body {
69+
margin: 0;
70+
}
71+
.container {
72+
padding: 10% 15%;
73+
}
74+
.card {
75+
width: 100%;
76+
padding: 10px;
77+
}
78+
.card img {
79+
width: 100%;
80+
height: auto;
81+
}
82+
h1 {
83+
font-size: 20px;
84+
}
85+
}
86+
87+
.attribution {
88+
font-size: 11px;
89+
text-align: center;
90+
}
91+
.attribution a {
92+
color: hsl(228, 45%, 44%);
93+
}
94+
</style>
95+
</head>
96+
<body>
97+
<div class="container">
98+
<div class="card">
99+
<img src="images/image-qr-code.png" alt="qr code" />
100+
<h1>Improve your front-end skills by building projects</h1>
101+
<p>
102+
Scan the QR code to visit Frontend Mentor and take your coding skills
103+
to the next level
104+
</p>
105+
<p>
106+
Improve your front-end skills by building projects Scan the QR code to
107+
visit Frontend Mentor and take your coding skills to the next level
108+
</p>
109+
</div>
110+
</div>
111+
112+
<div class="attribution">
113+
Challenge by
114+
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
115+
>Frontend Mentor</a
116+
>. Coded by <a href="#">Jeanclaude09-dev</a>.
117+
</div>
118+
</body>
119+
</html>

‎screenshot.png‎

52.8 KB
Loading

‎screenshot_mobile.png‎

42 KB
Loading

0 commit comments

Comments
 (0)