-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.pug
159 lines (144 loc) · 5.29 KB
/
index.pug
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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
html(lang="ru")
head
meta(charset="utf-8")
meta(name="viewport" content="width=device-width, initial-scale=1")
link(rel='styelsheet', href='https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap', type='text/css')
title= "Social dashboard"
style
include main.css
body
.head
.title
h1 Social Media Dashboard
p Total Followers: 23,004
.mode
h3 Dark Mode
label.switch
input(
type='checkbox'
name='mode'
onClick='myFunction()'
)
span.slider.round
.main-stat
.block-stat.facebook
.name-soc
img(src="images/icon-facebook.svg", alt="")
p.social @nathanf
h1.number 1998
p.followers followers
.change
img(src="images/icon-up.svg", alt="")
.p.up 12 Today
.block-stat.twitter
.name-soc
img(src="images/icon-twitter.svg", alt="")
p.social @nathanf
h1.number 1044
p.followers followers
.change
img(src="images/icon-up.svg", alt="")
.p.up 99 Today
.block-stat.instagram
.name-soc
img(src="images/icon-instagram.svg", alt="")
p.social @nathanf
h1.number 11k
p.followers followers
.change
img(src="images/icon-up.svg", alt="")
.p.up 1099 Today
.block-stat.youtube
.name-soc
img(src="images/icon-youtube.svg", alt="")
p.social @nathanf
h1.number 8239
p.followers Subscribers
.change
img(src="images/icon-down.svg", alt="")
.p.down 144 Today
.overview
h2 Overview - Today
.overview-flex
.overview-card
.overview-card-name-stat
p Page Views
img(src="/images/icon-facebook.svg", alt="", srcset="")
.overview-card-number
p.number 87
.change
img(src="images/icon-up.svg", alt="")
.p.up 3%
.overview-card
.overview-card-name-stat
p Likes
img(src="/images/icon-facebook.svg", alt="", srcset="")
.overview-card-number
p.number 52
.change
img(src="images/icon-down.svg", alt="")
.p.down 2%
.overview-card
.overview-card-name-stat
p Likes
img(src="/images/icon-instagram.svg", alt="", srcset="")
.overview-card-number
p.number 5462
.change
img(src="images/icon-up.svg", alt="")
.p.up 2257%
.overview-card
.overview-card-name-stat
p Page Views
img(src="/images/icon-instagram.svg", alt="", srcset="")
.overview-card-number
p.number 52k
.change
img(src="images/icon-up.svg", alt="")
.p.up 1375%
.overview-flex
.overview-card
.overview-card-name-stat
p Retweets
img(src="/images/icon-twitter.svg", alt="", srcset="")
.overview-card-number
p.number 117
.change
img(src="images/icon-up.svg", alt="")
.p.up 303%
.overview-card
.overview-card-name-stat
p Likes
img(src="/images/icon-twitter.svg", alt="", srcset="")
.overview-card-number
p.number 507
.change
img(src="images/icon-up.svg", alt="")
.p.up 553%
.overview-card
.overview-card-name-stat
p Likes
img(src="/images/icon-youtube.svg", alt="", srcset="")
.overview-card-number
p.number 107
.change
img(src="images/icon-down.svg", alt="")
.p.down 19%
.overview-card
.overview-card-name-stat
p Total Views
img(src="/images/icon-youtube.svg", alt="", srcset="")
.overview-card-number
p.number 1407
.change
img(src="images/icon-down.svg", alt="")
.p.down 12%
.attribution
p
| Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
| Coded by <a href="https://www.frontendmentor.io/profile/faizov" target="_blank">Yuriy Faizov</a>.
script.
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}