qr-code-component/index.html at main · AzamAzis/qr-code-component · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link
			rel="icon"
			type="image/png"
			sizes="32x32"
			href="./images/favicon-32x32.png">
		<title>Frontend Mentor | QR code component</title>
		<meta
			name="description"
			content="I completed the QR code component challenge from Frontend Mentor, where the goal was to create a simple card layout based on figma design using HTML and CSS. The project focused on building a clean and responsive UI while matching the design as closely as possible.">
		<meta
			name="keywords"
			content="Frontend Mentor, Frontend Mentor | QR code component, learning how to code">
		<meta name="author" content="Azam Azis">
		<meta property="og:title" content="Frontend Mentor | QR code component">
		<meta property="og:type" content="website">
		<meta
			property="og:description"
			content="I completed the QR code component challenge from Frontend Mentor, where the goal was to create a simple card layout based on figma design using HTML and CSS. The project focused on building a clean and responsive UI while matching the design as closely as possible.">
		<meta
			property="og:image"
			content="https://ik.imagekit.io/2p6x3rqkj/screenshot.png?updatedAt=1775411399615">
		<meta property="og:image:width" content="1200">
		<meta property="og:image:height" content="630">
		<meta name="twitter:card" content="summary_large_image">
		<meta
			property="og:url"
			content="https://qr-code-component-challenge-001.netlify.app/">
		<link rel="preconnect" href="https://fonts.googleapis.com">
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
		<link
			href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap"
			rel="stylesheet">
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<div class="card flex column">
			<img
				class="qr-code"
				src="images/image-qr-code.png"
				alt="QR code for Frontend Mentor"
				height="275"
				width="275">

			<div class="content">
				<h1 class="card__title text-center">
					Improve your <span class="no-wrap">front-end</span> skills by building
					projects
				</h1>
				<p class="card__para text-center">
					Scan the QR code to visit Frontend Mentor and take your coding skills
					to the next level
				</p>
			</div>
		</div>

		<footer class="attribution absolute">
			Challenge by
			<a href="https://www.frontendmentor.io?ref=challenge">Frontend Mentor</a>.
			Coded by <a href="https://github.com/AzamAzis">Azam Azis</a>.
		</footer>
	</body>
</html>