Skip to content

Commit 8915b63

Browse files
Desire4techDesire4tech
committed
Initial commit
1 parent ab83dff commit 8915b63

File tree

8 files changed

+157
-0
lines changed

8 files changed

+157
-0
lines changed

‎.gitignore‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Avoid accidental upload of the Sketch and Figma design files
2+
#####################################################
3+
## Please do not remove lines 5 and 6 - thanks! 🙂 ##
4+
#####################################################
5+
*.sketch
6+
*.fig
7+
8+
# Avoid accidental XD upload if you convert the design file
9+
###############################################
10+
## Please do not remove line 12 - thanks! 🙂 ##
11+
###############################################
12+
*.xd
13+
14+
# Avoid your project being littered with annoying .DS_Store files!
15+
.DS_Store
16+
.prettierignore

‎images/favicon-32x32.png‎

1.04 KB
Loading

‎images/image-qr-code.png‎

5.1 KB
Loading

‎index.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
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+
8+
<link
9+
rel="icon"
10+
type="image/png"
11+
sizes="32x32"
12+
href="./images/favicon-32x32.png"
13+
/>
14+
<link rel="preconnect" href="https://fonts.googleapis.com" />
15+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
16+
<link
17+
href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap"
18+
rel="stylesheet"
19+
/>
20+
<link rel="stylesheet" href="style.css" />
21+
22+
<title>Frontend Mentor | QR code component</title>
23+
</head>
24+
<body>
25+
<div class="outer-box">
26+
<img class="qr-image" src="images/image-qr-code.png" alt="qr code img" />
27+
<div class="inner-box">
28+
<h3 class="intro-heading">
29+
Improve your front-end skills by building projects
30+
</h3>
31+
<p class="intro">
32+
Scan the QR code to visit Frontend Mentor and take your coding skills
33+
to the next level
34+
</p>
35+
</div>
36+
</div>
37+
38+
<div class="attribution">
39+
Challenge by
40+
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
41+
>Frontend Mentor</a
42+
>. Coded by <a href="#">Joy Effiong</a>.
43+
</div>
44+
</body>
45+
</html>

‎screenshot/desktop.png‎

79.3 KB
Loading

‎screenshot/mobile.png‎

49.9 KB
Loading

‎style-guide.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
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+
> 💡 These are just the design sizes. Ensure content is responsive and meets WCAG requirements by testing the full range of screen sizes from 320px to large screens.
11+
12+
## Colors
13+
14+
- White: hsl(0, 0%, 100%)
15+
16+
- Slate 300: hsl(212, 45%, 89%)
17+
- Slate 500: hsl(216, 15%, 48%)
18+
- Slate 900: hsl(218, 44%, 22%)
19+
20+
## Typography
21+
22+
### Body Copy
23+
24+
- Font size (paragraph): 15px
25+
26+
### Font
27+
28+
- Family: [Outfit](https://fonts.google.com/specimen/Outfit)
29+
- Weights: 400, 700
30+
31+
> 💎 This is a free+ challenge. So, if you want to see all the design details and practice working with professional tools like Figma, you can download the design file from where you downloaded the starter code.

‎style.css‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
body {
2+
background-color: hsl(212, 45%, 89%);
3+
text-align: center;
4+
}
5+
6+
.outer-box {
7+
width: 320px;
8+
height: 499px;
9+
background-color: hsl(0, 0%, 100%);
10+
border-radius: 20px;
11+
margin: 200px auto 200px auto;
12+
box-shadow: 0px 25px 25px 0px rgba(0, 0, 0, 0.05);
13+
padding: 16px 16px 40px;
14+
display: flex;
15+
flex-direction: column;
16+
align-items: flex-start;
17+
}
18+
19+
.qr-image {
20+
width: 288px;
21+
height: 288px;
22+
border-radius: 10px;
23+
margin: 16px 16px 24px;
24+
}
25+
26+
.inner-box{
27+
display: flex;
28+
padding: 0px 16px;
29+
flex-direction: column;
30+
align-items: center;
31+
align-self: stretch;
32+
}
33+
34+
.intro-heading {
35+
font-family: "Outfit", serif;
36+
font-weight: 700;
37+
font-size: 22px;
38+
line-height: 120%;
39+
margin: 16px;
40+
color: hsl(218, 44%, 22%);
41+
align-self: stretch;
42+
text-align: center;
43+
}
44+
45+
.intro {
46+
font-family: "Outfit", serif;
47+
font-optical-sizing: auto;
48+
font-weight: 400;
49+
font-size: 15px;
50+
color: hsl(216, 15%, 48%);
51+
padding: 0 16px;
52+
letter-spacing: 0.2px;
53+
line-height: 140%;
54+
text-align: center;
55+
align-self: stretch;
56+
57+
}
58+
59+
.attribution {
60+
font-size: 11px;
61+
text-align: center;
62+
}
63+
.attribution a {
64+
color: hsl(228, 45%, 44%);
65+
}

0 commit comments

Comments
 (0)