Blog-preview-card/index.html at main · AzamAzis/Blog-preview-card · 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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes">
		<link
			rel="icon"
			type="image/png"
			sizes="32x32"
			href="./assets/images/favicon-32x32.png">
		<title>Frontend Mentor | Blog preview card</title>
		<meta
			name="description"
			content="Blog preview card about HTML and CSS foundations from Greg Hooper">
		<meta name="keywords" content="Frontend Mentor, Blog preview card">
		<meta name="author" content="Azam Azis">
		<meta property="og:title" content="Frontend Mentor | Blog preview card">
		<meta
			property="og:description"
			content="Blog preview card about HTML and CSS foundations from Greg Hooper">
		<meta
			property="og:image"
			content="https://ik.imagekit.io/2p6x3rqkj/preview.jpg?updatedAt=1775631584524">
		<meta property="og:image:alt" content="Blog preview card">
		<meta property="og:image:width" content="1200">
		<meta property="og:image:height" content="630">
		<meta
			property="og:url"
			content="https://azamazis.github.io/Blog-preview-card/">
		<meta property="og:type" content="website">
		<meta name="twitter:card" content="summary_large_image">
		<meta name="twitter:title" content="Frontend Mentor | Blog preview card">
		<meta
			name="twitter:description"
			content="Blog preview card about HTML and CSS foundations from Greg Hooper">
		<meta
			name="twitter:image"
			content="https://ik.imagekit.io/2p6x3rqkj/preview.jpg?updatedAt=1775631584524">
		<meta name="twitter:image:alt" content="Blog preview card">
		<meta name="twitter:image:width" content="1200">
		<meta name="twitter:image:height" content="630">
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<div class="card">
			<img
				class="illustration"
				src="./assets/images/illustration-article.svg"
				alt="illustration with a yellow background"
				height="201"
				width="336">

			<a
				class="btn"
				href="https://www.frontendmentor.io/learning-paths/getting-started-on-frontend-mentor-XJhRWRREZd/challenge/65e6f48617e502f0b6ca3d00/start"
				target="_blank"
				rel="noopener noreferrer">
				Learning
			</a>

			<p class="publish-date">Published 21 Dec 2023</p>

			<a
				class="title"
				href="https://www.theodinproject.com/paths/foundations/courses/foundations"
				target="_blank"
				rel="noopener noreferrer">
				HTML & CSS foundations
			</a>

			<p class="quote">
				These languages are the backbone of every website, defining structure,
				content, and presentation.
			</p>

			<div class="author">
				<img
					class="author__img"
					src="./assets/images/image-avatar.webp"
					alt="Greg Hooper"
					height="50"
					width="50">
				<p class="author__name">Greg Hooper</p>
			</div>
		</div>

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