Skip to content

Commit 28f7e1b

Browse files
author
Abdulwahid Alsaedawi
committed
add the project
1 parent d93e99d commit 28f7e1b

File tree

3 files changed

+127
-14
lines changed

3 files changed

+127
-14
lines changed

‎.hintrc‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"extends": [
3+
"development"
4+
]
5+
}

‎index.html‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,26 +3,27 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
6-
6+
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700&display=swap" rel="stylesheet">
10+
11+
<link rel="stylesheet" href="styles/style.css">
712
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
813

914
<title>Frontend Mentor | QR code component</title>
1015

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>
1616
</head>
1717
<body>
18-
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
18+
<main class="qr-container">
19+
<img src="./images/image-qr-code.png" alt="QR Code linking to Frontend Mentor">
20+
<h1>Improve your front-end skills by building projects</h1>
21+
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
22+
</main>
2223

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>
24+
<footer class="attribution">
25+
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank" rel="noopener">Frontend Mentor</a>.
26+
Coded by <a href="https://github.com/AbdulwahidAlsaedawi">Abdulwahid Alsaedawi</a>.
27+
</footer>
2728
</body>
2829
</html>

‎styles/style.css‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
:root {
2+
/* Colors */
3+
--color-white: hsl(0, 0%, 100%);
4+
--color-slate-300: hsl(212, 45%, 89%);
5+
--color-slate-500: hsl(216, 15%, 48%);
6+
--color-slate-900: hsl(218, 44%, 22%);
7+
--color-accent: hsl(218, 100%, 50%);
8+
9+
/* Card Styles */
10+
--radius-card: 1.25rem;
11+
--radius-img: 0.625rem;
12+
--shadow-card: 0 25px 25px rgba(0, 0, 0, 0.05);
13+
14+
/* Layout */
15+
--card-width: 20rem; /* 320px */
16+
}
17+
18+
/* Base Reset */
19+
*,
20+
*::before,
21+
*::after {
22+
box-sizing: border-box;
23+
}
24+
25+
body {
26+
margin: 0;
27+
min-height: 100vh;
28+
display: flex;
29+
flex-direction: column;
30+
justify-content: center;
31+
align-items: center;
32+
font-family: 'Outfit', sans-serif;
33+
background-color: var(--color-slate-300);
34+
padding: 1.5rem;
35+
}
36+
37+
/* Main Component */
38+
.qr-container {
39+
background-color: var(--color-white);
40+
border-radius: var(--radius-card);
41+
box-shadow: var(--shadow-card);
42+
padding: 1rem;
43+
44+
/* Mobile Respomsive */
45+
width: 90%;
46+
max-width: 20rem;
47+
48+
text-align: center;
49+
transition: background-color 0.3s ease;
50+
}
51+
52+
.qr-container img {
53+
width: 100%;
54+
border-radius: var(--radius-img);
55+
display: block;
56+
}
57+
58+
.qr-container h1 {
59+
margin: 1.5rem 0 1rem;
60+
font-size: 1.375rem;
61+
font-weight: 700;
62+
line-height: 1.2;
63+
color: var(--color-slate-900);
64+
padding: 0 0.5rem;
65+
}
66+
67+
.qr-container p {
68+
margin-bottom: 1.5rem;
69+
font-size: 0.9375rem;
70+
line-height: 1.4;
71+
color: var(--color-slate-500);
72+
padding: 0 1rem;
73+
}
74+
75+
/* Attribution */
76+
footer.attribution {
77+
margin-top: 2rem;
78+
font-size: 0.75rem;
79+
color: var(--color-slate-500);
80+
text-align: center;
81+
}
82+
83+
footer.attribution a {
84+
color: var(--color-accent);
85+
text-decoration: none;
86+
}
87+
88+
/* Dark Mode Support */
89+
@media (prefers-color-scheme: dark) {
90+
:root {
91+
--color-white: hsl(218, 44%, 15%);
92+
--color-slate-300: hsl(218, 44%, 12%);
93+
--color-slate-500: hsl(212, 45%, 70%);
94+
--color-slate-900: hsl(0, 0%, 100%);
95+
--shadow-card: 0 25px 25px rgba(0, 0, 0, 0.3);
96+
}
97+
}
98+
99+
/* Accessibility */
100+
@media (prefers-reduced-motion: reduce) {
101+
* {
102+
animation-duration: 0.01ms !important;
103+
animation-iteration-count: 1 !important;
104+
transition-duration: 0.01ms !important;
105+
scroll-behavior: auto !important;
106+
}
107+
}

0 commit comments

Comments
 (0)