-
Notifications
You must be signed in to change notification settings - Fork 0
/
profile.html
132 lines (131 loc) · 4.34 KB
/
profile.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Quiz-App</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<header class="header">
<h1 class="header__title">Profile</h1>
</header>
<main class="profile">
<div class="profile__card">
<img
class="profile__card-img"
src="https://source.unsplash.com/random/300x300?portrait"
alt=""
height="200"
width="200"
/>
<h2 class="profile-card__name">Max Doe</h2>
</div>
<h3>About me</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum
dignissimos, reprehenderit quam facilis animi in distinctio nemo est
culpa velit non unde expedita porro. Expedita animi quo voluptates
blanditiis libero?
</p>
<ul class="counter-list">
<li class="counter-list__item">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
width="24"
viewbox="0 0 48 48"
>
<path
d="M21.55 31.5q.05-3.6.825-5.25.775-1.65 2.925-3.6 2.1-1.9 3.225-3.525t1.125-3.475q0-2.25-1.5-3.75t-4.2-1.5q-2.6 0-4 1.475T17.9 14.95l-4.2-1.85q1.1-2.95 3.725-5.025T23.95 6q5 0 7.7 2.775t2.7 6.675q0 2.4-1.025 4.35-1.025 1.95-3.275 4.1-2.45 2.35-2.95 3.6t-.55 4Zm2.4 12.5q-1.45 0-2.475-1.025Q20.45 41.95 20.45 40.5q0-1.45 1.025-2.475Q22.5 37 23.95 37q1.45 0 2.475 1.025Q27.45 39.05 27.45 40.5q0 1.45-1.025 2.475Q25.4 44 23.95 44Z"
/>
</svg>
<span>12</span>
</li>
<li class="counter-list__item">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewbox="0 0 24 24"
width="24px"
fill="#000000"
>
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2z" />
</svg>
<span>4</span>
</li>
</ul>
<h2 id="title">Settings</h2>
<form class="profile__settings" aria-labelledby="title">
<input
type="checkbox"
id="switch-darkmode"
class="profile__settings-darkmode-input"
/>
<label for="switch-darkmode" class="profile__settings-darkmode-label"
>Toggle Darkmode</label
>
</form>
</main>
<nav class="navigation">
<ul class="navigation__list">
<li class="navigation__list-item">
<a
class="navigation__link"
href="/index.html"
aria-label="go to home page"
>
<svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewbox="0 0 24 24"
width="24px"
>
<path
d="M12 5.69l5 4.5V18h-2v-6H9v6H7v-7.81l5-4.5M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3z"
/>
</svg>
</a>
</li>
<li class="navigation__list-item">
<a
class="navigation__link"
href="/bookmarks.html"
aria-label="go to bookmarks page"
>
<svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewbox="0 0 24 24"
width="24px"
>
<path
d="M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2zm0 15l-5-2.18L7 18V5h10v13z"
/>
</svg>
</a>
</li>
<li class="navigation__list-item navigation__list-item--active">
<a
class="navigation__link"
href="/profile.html"
aria-label="go to profile page"
>
<svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewbox="0 0 24 24"
width="24px"
>
<path
d="M12 6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0 9c2.7 0 5.8 1.29 6 2v1H6v-.99c.2-.72 3.3-2.01 6-2.01m0-11C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z"
/>
</svg>
</a>
</li>
</ul>
</nav>
</body>
</html>