Skip to content

Commit cd573de

Browse files
Desire4techDesire4tech
committed
update qr-code-component-main
1 parent d33fac2 commit cd573de

File tree

2 files changed

+105
-23
lines changed

2 files changed

+105
-23
lines changed

‎qr-code-component-main/index.html‎

Lines changed: 40 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,45 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
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 -->
67

7-
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
8-
9-
<title>Frontend Mentor | QR code component</title>
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" />
1021

11-
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
12-
<style>
13-
.attribution { font-size: 11px; text-align: center; }
14-
.attribution a { color: hsl(228, 45%, 44%); }
15-
</style>
16-
</head>
17-
<body>
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>
1837

19-
Improve your front-end skills by building projects
20-
21-
Scan the QR code to visit Frontend Mentor and take your coding skills to the next level
22-
23-
<div class="attribution">
24-
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
25-
Coded by <a href="#">Your Name Here</a>.
26-
</div>
27-
</body>
28-
</html>
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>

‎qr-code-component-main/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+
padding: 16px 16px 40px;
13+
box-shadow: 0px 25px 25px 0px rgba(0, 0, 0, 0.05);
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)