notifications-page/index.html at master · NitheeshKumar-C/notifications-page · 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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<!-- displays site properly based on user's device -->

		<link
			rel="icon"
			type="image/png"
			sizes="32x32"
			href="./assets/images/favicon-32x32.png"
		/>

		<title>Frontend Mentor | Notifications page</title>

		<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=Plus+Jakarta+Sans:wght@500;800&display=swap"
			rel="stylesheet"
		/>

		<link rel="stylesheet" href="./css/style.css" />
		<link rel="stylesheet" href="./css/responsive.css">

		<script src="./Js/script.js" defer></script>
	</head>
	<body>
		<main>
			<section class="chat-body">
				<section class="chat-header">
					<div>
						<h1>Notifications</h1>
						<span id="msg-count">3</span>
					</div>
					<div class="markAsRead"><p onclick="readAll()">Mark all as read</p></div>
				</section>
				<section class="chat-list">
					<div class="chat-container">
							<img src="./assets/images/avatar-mark-webber.webp" alt="" />
						<div class="chat-container-d2">
							<div><a class="user">Mark Webber</a> reacted to your recent post<a class="action"> My first tournament today!</a><span class="dot"></span></div>
							<div><span class="time">1m ago</span></div>
						</div>
					</div>
					<div class="chat-container">
							<img src="./assets/images/avatar-angela-gray.webp" alt="" />
						<div class="chat-container-d2">
							<div><a class="user">Angela Gray</a> followed you <a class="action"></a><span class="dot"></span></div>
							<div><span class="time">5m ago</span></div>
						</div>
					</div>
					<div class="chat-container">
							<img src="./assets/images/avatar-jacob-thompson.webp" alt="" />
						<div class="chat-container-d2">
							<div><a class="user" >Jacob Thompson</a> has joined your group <a class="action"> Chess Club</a><span class="dot"></span></div>
							<div><span class="time">1 day ago</span></div>
						</div>
					</div>
					<div class="chat-container read">
						<img src="./assets/images/avatar-rizky-hasanuddin.webp" alt="" />
					<div class="chat-container-d2">
						<div><a class="user">Rizky Hasanuddin</a> sent you a private message</div>
						<div><span class="time">5 day ago</span></div>

						<div class="message">
							 Hello, thanks for setting up the Chess Club. I've been a member for a few weeks now and
  I'm already having lots of fun and improving my game.
						</div>
					</div>
					</div>
					<div class="chat-container read">
						<img src="./assets/images/avatar-kimberly-smith.webp" alt="" />
						<div class="chat-container-d2">
							<div><a class="user">Jacob Thompson</a> commented on your picture</div>
							<div><span class="time">1 week ago</span></div>
						</div>
						<div class="chess-img">
							<img src="./assets/images/image-chess.webp" alt="">
						</div>
					</div>
					<div class="chat-container read">
						<img src="./assets/images/avatar-nathan-peterson.webp" alt="" />
						<div class="chat-container-d2">
							<div><a class="user" >Nathan Peterson</a> reacted to your recent post <a class="action"> 5 end-game strategies to increase your win rate</a></div>
							<div><span class="time">2 weeks ago</span></div>
						</div>
					</div>
				<div class="chat-container read">
					<img src="./assets/images/avatar-anna-kim.webp" alt="" />
					<div class="chat-container-d2">
						<div><a class="user">Anna Kim</a> left the group <a class="action"> Chess Club</a></div>
						<div><span class="time">2 weeks ago</span></div>
					</div>
				</div>
				</section>
			</section>
			<div class="attribution">
				Challenge by
				<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
					>Frontend Mentor</a
				>. <br> Coded by <a href="https://www.frontendmentor.io/profile/NitheeshKumar-C" target="_blank">NitheeshKumar</a>.
			</div>
		</main>

		<!-- Notifications 3

  Mark all as read

  Mark Webber reacted to your recent post My first tournament today!
  1m ago

  Angela Gray followed you
  5m ago

  Jacob Thompson has joined your group Chess Club
  1 day ago

  Rizky Hasanuddin sent you a private message
  5 days ago
  Hello, thanks for setting up the Chess Club. I've been a member for a few weeks now and
  I'm already having lots of fun and improving my game.

  Kimberly Smith commented on your picture
  1 week ago

  Nathan Peterson reacted to your recent post 5 end-game strategies to increase your win rate
  2 weeks ago

  Anna Kim left the group Chess Club
  2 weeks ago -->


	</body>
</html>